/* rf.mesh — shared base styles */ /* Fonts loaded via in each page's for faster render */ :root { --ink: #080c09; --ink2: #0c1209; --ink3: #111911; --surf: #141f14; --card: #172017; --rule: #1e301e; --rule2: #2a442a; --lime: #4ade80; --lime2: #86efac; --sage: #22c55e; --moss: #2d6a3f; --gold: #d4a843; --gold2: #fbbf24; --sky: #38bdf8; --sky2: #7dd3fc; --rose: #f43f5e; --rose2: #fb7185; --amber: #f59e0b; --text: #d1fae5; --text2: #6ee7b7; --text3: #34d399; --dim: #4b7c5b; --dimmer:#2a4a35; --mono: 'JetBrains Mono', monospace; --disp: 'Syne', sans-serif; } *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body { background:var(--ink); color:var(--text); font-family:var(--mono); font-size:13px; line-height:1.7; min-height:100vh; } body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); opacity:.5; } .site { position:relative; z-index:1; display:flex; flex-direction:column; min-height:100vh; } /* ── NAV ── */ nav { position:sticky; top:0; z-index:100; background:rgba(8,12,9,.97); border-bottom:1px solid var(--rule2); backdrop-filter:blur(12px); display:flex; align-items:center; gap:0; height:52px; padding:0 2rem; } .logo { font-family:var(--disp); font-size:15px; font-weight:800; color:var(--lime); text-decoration:none; display:flex; align-items:center; gap:.4rem; margin-right:2rem; flex-shrink:0; } .logo-dot { width:7px; height:7px; border-radius:50%; background:var(--sage); animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.4);} 70%{box-shadow:0 0 0 8px rgba(34,197,94,0);} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} } .nav-links { display:flex; gap:0; overflow-x:auto; scrollbar-width:none; flex:1; } .nav-links::-webkit-scrollbar { display:none; } .nav-links a { flex-shrink:0; display:block; padding:0 16px; height:52px; line-height:52px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--dimmer); border-bottom:2px solid transparent; transition:color .15s, border-color .15s, background .15s; white-space:nowrap; } .nav-links a:hover { color:var(--dim); background:rgba(255,255,255,.02); } .nav-links a.active { color:var(--lime); border-bottom-color:var(--sage); } .nav-right { font-size:10px; color:var(--dimmer); letter-spacing:.1em; flex-shrink:0; padding-left:1.5rem; display:flex; align-items:center; gap:1rem; } .nav-badge { padding:2px 8px; border:1px solid var(--rule2); border-radius:2px; } /* ── TAB BAR ── */ .tabbar { background:var(--ink2); border-bottom:1px solid var(--rule); display:flex; overflow-x:auto; scrollbar-width:none; flex-shrink:0; } .tabbar::-webkit-scrollbar { display:none; } .tabbar button { flex-shrink:0; background:none; border:none; border-bottom:1px solid transparent; color:var(--dimmer); font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:11px 18px; cursor:pointer; white-space:nowrap; transition:color .15s,border-color .15s,background .15s; } .tabbar button:hover { color:var(--dim); background:rgba(255,255,255,.02); } .tabbar button.active { color:var(--lime); border-bottom-color:var(--sage); } /* ── PANELS ── */ main { flex:1; } .panel { display:none; padding:2rem 2.5rem; max-width:1200px; margin:0 auto; } .panel.active { display:block; } /* ── TYPOGRAPHY ── */ .sec-head { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; padding-bottom:.6rem; border-bottom:1px solid var(--rule); } .sec-head-num { font-size:10px; color:var(--dimmer); border:1px solid var(--rule); padding:1px 6px; border-radius:2px; } .sec-head h2 { font-family:var(--disp); font-size:14px; font-weight:700; color:var(--text3); letter-spacing:.04em; text-transform:uppercase; margin:0; } h3 { font-family:var(--disp); font-size:13px; font-weight:600; color:var(--lime2); margin-bottom:.4rem; } p { color:var(--dim); font-size:12px; line-height:1.75; } code { font-family:var(--mono); font-size:11px; color:var(--gold); background:rgba(212,168,67,.08); padding:1px 4px; border-radius:2px; } /* ── LAYOUT ── */ .g2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .section { margin-bottom:2rem; } /* ── CARDS ── */ .card { background:var(--card); border:1px solid var(--rule); padding:1rem 1.1rem; } .card-title { font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--dimmer); margin-bottom:.65rem; padding-bottom:.5rem; border-bottom:1px solid var(--rule); } .hl-a{color:var(--gold2);} .hl-g{color:var(--sage);} .hl-b{color:var(--sky);} .hl-r{color:var(--rose);} /* ── SPEC TABLE ── */ .spec { width:100%; border-collapse:collapse; } .spec td { padding:4px 0; border-bottom:1px solid var(--rule); font-size:11.5px; vertical-align:top; } .spec tr:last-child td { border-bottom:none; } .spec td:first-child { color:var(--dimmer); width:46%; font-size:10.5px; padding-right:10px; white-space:nowrap; letter-spacing:.04em; } .spec td:last-child { color:var(--text); } .ok{color:var(--lime)!important;} .wrn{color:var(--gold)!important;} .no{color:var(--rose)!important;} .q{color:var(--sky)!important;} /* ── FLAGS ── */ .flag { display:inline-block; font-size:9px; padding:0px 5px; margin-left:4px; border-radius:2px; vertical-align:middle; letter-spacing:.06em; font-weight:700; } .flag-fix { background:rgba(244,63,94,.15); color:var(--rose2); border:1px solid rgba(244,63,94,.3); } .flag-q { background:rgba(56,189,248,.12); color:var(--sky2); border:1px solid rgba(56,189,248,.25); } .flag-ok { background:rgba(74,222,128,.1); color:var(--lime); border:1px solid rgba(74,222,128,.2); } .flag-note { background:rgba(212,168,67,.12); color:var(--gold2); border:1px solid rgba(212,168,67,.25); } .flag-todo { background:rgba(167,139,250,.1); color:#c4b5fd; border:1px solid rgba(167,139,250,.2); } /* ── TAGS ── */ .tag { display:inline-block; font-size:9px; padding:1px 6px; margin:1px; letter-spacing:.08em; border-radius:2px; } .tg { background:rgba(74,222,128,.08); color:var(--lime); border:1px solid rgba(74,222,128,.2); } .ta { background:rgba(212,168,67,.1); color:var(--gold2); border:1px solid rgba(212,168,67,.2); } .tb { background:rgba(56,189,248,.1); color:var(--sky2); border:1px solid rgba(56,189,248,.2); } .tr { background:rgba(244,63,94,.08); color:var(--rose2); border:1px solid rgba(244,63,94,.18); } .tm { background:rgba(167,139,250,.1); color:#c4b5fd; border:1px solid rgba(167,139,250,.2); } /* ── DATA TABLE ── */ .dt { width:100%; border-collapse:collapse; font-size:12px; } .dt th { text-align:left; padding:6px 10px; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer); border-bottom:1px solid var(--rule2); background:var(--ink3); } .dt td { padding:7px 10px; border-bottom:1px solid var(--rule); color:var(--dim); vertical-align:top; line-height:1.55; } .dt tr:last-child td { border-bottom:none; } .dt td:first-child { color:var(--text); font-weight:600; } .dt .sec td { background:var(--ink); color:var(--dimmer); font-size:9px; letter-spacing:.16em; text-transform:uppercase; padding:9px 10px 3px; border-bottom:none; font-weight:700; } .dt .total td { border-top:1px solid var(--rule2); font-weight:700; color:var(--text); } .price { font-family:var(--mono); color:var(--lime2); } .mono-v { font-family:var(--mono); color:var(--gold); } .v-ok{color:var(--lime);font-weight:700;} .v-w{color:var(--gold);font-weight:700;} .v-no{color:var(--rose);font-weight:700;} /* ── NOTES / CALLOUTS ── */ .note { border-left:2px solid var(--moss); background:rgba(45,106,63,.08); padding:.7rem 1rem; font-size:11.5px; color:var(--dim); line-height:1.7; margin:.75rem 0; } .note.warn { border-left-color:var(--amber); background:rgba(245,158,11,.07); } .note.info { border-left-color:var(--sky); background:rgba(56,189,248,.06); } .note.flag-block { border-left-color:var(--rose); background:rgba(244,63,94,.06); } .note strong { color:var(--text); } .note code { color:var(--gold2); } /* ── TIER BLOCKS ── */ .tier { display:grid; grid-template-columns:90px 1fr; border:1px solid var(--rule); margin-bottom:6px; transition:border-color .2s; } .tier:hover { border-color:var(--rule2); } .tier-lbl { background:var(--ink3); border-right:1px solid var(--rule); padding:.9rem .75rem; display:flex; flex-direction:column; justify-content:center; gap:.3rem; } .tier-n { font-size:9px; color:var(--dimmer); letter-spacing:.14em; } .tier-nm { font-family:var(--disp); font-size:10px; font-weight:700; color:var(--sage); } .tier-body { background:var(--surf); padding:.9rem 1.1rem; } .tier-body h3 { font-size:12px; margin-bottom:.25rem; } .tier-body p { margin-bottom:.4rem; } /* ── FLOW ── */ .flow { display:flex; border:1px solid var(--rule); background:var(--surf); margin:1rem 0; overflow-x:auto; } .fs { flex:1; min-width:100px; padding:.8rem .7rem; text-align:center; border-right:1px solid var(--rule); position:relative; } .fs:last-child { border-right:none; } .fs::after { content:'›'; position:absolute; right:-7px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--dimmer); } .fs:last-child::after { display:none; } .fs-lbl { font-size:8px; color:var(--dimmer); letter-spacing:.14em; text-transform:uppercase; margin-bottom:.25rem; } .fs-name { font-size:10px; font-weight:700; color:var(--lime); font-family:var(--disp); } .fs-sub { font-size:9px; color:var(--dimmer); margin-top:.2rem; } /* ── STEPS ── */ .steps { display:flex; flex-direction:column; gap:6px; } .step { display:grid; grid-template-columns:40px 1fr; border:1px solid var(--rule); } .step-n { background:var(--ink3); display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-size:14px; font-weight:800; color:var(--sage); border-right:1px solid var(--rule); } .step-body { padding:.8rem 1rem; background:var(--surf); } .step-t { font-family:var(--disp); font-size:12px; font-weight:700; color:var(--lime2); margin-bottom:.3rem; } .step-d { font-size:11px; color:var(--dim); line-height:1.65; } /* ── METRICS ── */ .metrics { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:1.5rem; } .metric { background:var(--card); border:1px solid var(--rule); padding:.65rem .9rem; display:flex; flex-direction:column; gap:.15rem; } .metric-v { font-family:var(--disp); font-size:20px; font-weight:800; color:var(--gold); line-height:1; } .metric-l { font-size:9px; color:var(--dimmer); letter-spacing:.12em; text-transform:uppercase; } /* ── FREQ BANDS ── */ .bands { display:flex; flex-direction:column; gap:7px; margin:1rem 0; } .band { display:grid; grid-template-columns:130px 1fr 200px; align-items:center; gap:10px; } .band-f { font-size:10px; font-weight:700; color:var(--gold); text-align:right; font-family:var(--mono); } .band-b { height:20px; border-radius:1px; display:flex; align-items:center; padding:0 7px; font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--ink); } .band-d { font-size:10px; color:var(--dim); line-height:1.4; } /* ── WIRING ── */ .wire-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:1rem 0; } .pin-t { width:100%; border-collapse:collapse; font-size:11px; } .pin-t th { padding:4px 8px; background:var(--ink3); color:var(--dimmer); font-size:9px; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid var(--rule); text-align:left; } .pin-t td { padding:4px 8px; border-bottom:1px solid var(--rule); color:var(--dim); font-family:var(--mono); } .pin-t tr:last-child td { border-bottom:none; } .pn{color:var(--gold)!important;} .ps{color:var(--lime)!important;} .pp{color:var(--rose2)!important;} .pg{color:var(--dimmer)!important;} /* ── BW LADDER ── */ .bw-ladder { display:flex; flex-direction:column; gap:4px; margin:1rem 0; } .bw-row { display:grid; grid-template-columns:130px 1fr 100px; align-items:center; gap:10px; padding:4px 0; border-bottom:1px solid var(--rule); } .bw-row:last-child { border-bottom:none; } .bw-phase { font-size:10px; color:var(--dimmer); } .bw-bar-wrap { background:rgba(255,255,255,.03); height:18px; position:relative; border-radius:1px; } .bw-bar { height:100%; border-radius:1px; display:flex; align-items:center; padding:0 6px; font-size:9px; font-weight:700; letter-spacing:.08em; } .bw-val { font-size:10px; color:var(--dim); font-family:var(--mono); text-align:right; } /* ── DIAGRAM ── */ .diag { border:1px solid var(--rule); background:var(--surf); padding:1rem; margin:1rem 0; } /* ── COMPARE GRID ── */ .cmp { background:var(--card); border:1px solid var(--rule); padding:.9rem 1rem; } .cmp-name { font-family:var(--disp); font-size:12px; font-weight:700; color:var(--lime2); margin-bottom:.5rem; } .cmp-type { font-size:9px; color:var(--dimmer); letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem; } .cmp-body { font-size:11px; color:var(--dim); line-height:1.6; } .cmp-vs { font-size:10px; color:var(--gold); margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--rule); } /* ── FOOTER ── */ footer { border-top:1px solid var(--rule); padding:1.1rem 2.5rem; display:flex; justify-content:space-between; align-items:center; font-size:10px; color:var(--dimmer); letter-spacing:.08em; flex-wrap:wrap; gap:.5rem; } /* ── RESPONSIVE ── */ @media(max-width:768px) { .panel { padding:1rem; } .g2,.g3,.g4 { grid-template-columns:1fr; } .tier { grid-template-columns:1fr; } .tier-lbl { border-right:none; border-bottom:1px solid var(--rule); } .band { grid-template-columns:90px 1fr; } .band-d { display:none; } .wire-grid { grid-template-columns:1fr; } .flow { flex-direction:column; } .fs { border-right:none; border-bottom:1px solid var(--rule); } .fs::after { content:'↓'; right:auto; left:50%; bottom:-8px; top:auto; transform:translateX(-50%); } nav { padding:0 1rem; } .nav-right { display:none; } footer { flex-direction:column; text-align:center; } .bw-row { grid-template-columns:90px 1fr; } .bw-val { display:none; } }