Hugging Face's logo

Snapkitty
/
snapfortress-v2

snapkitty
cryptography
python
Model card Files
xet
 Community
snapfortress-v2
File size: 9,354 Bytes
1084d40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fb586a1
 
1084d40
 
 
fb586a1
1084d40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fb586a1
 
 
 
 
1084d40
fb586a1
1084d40
 
fb586a1
 
 
 
1084d40
fb586a1
 
 
 
 
1084d40
fb586a1
 
1084d40
fb586a1
1084d40
fb586a1
 
 
1084d40
fb586a1
1084d40
fb586a1
 
1084d40
fb586a1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1084d40
fb586a1
 
 
 
1084d40
 
fb586a1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1084d40
 
fb586a1
1084d40
 
fb586a1
1084d40
fb586a1
1084d40
 
 
 
 
 
fb586a1
1084d40
fb586a1
1084d40
 
fb586a1
1084d40
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
:root {
  --bg: #0a0a0f;
  --bg2: #0f0f1a;
  --bg3: #14142a;
  --border: #1e1e3a;
  --accent: #7c5cfc;
  --accent2: #a78bfa;
  --accent3: #38bdf8;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --dim: #475569;
  --green: #4ade80;
  --font: 'Courier New', Courier, monospace;
  --sans: system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* HERO */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6rem 2rem 4rem;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,92,252,0.12) 0%, transparent 70%);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.hero-inner { max-width: 800px; }
.badge {
  display: inline-block;
  font-family: var(--font);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.3rem 0.8rem;
  margin-bottom: 2rem;
  opacity: 0.85;
}
.hero h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #fff 0%, var(--accent2) 60%, var(--accent3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero h1 .v2 { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.tagline { font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--text); margin-bottom: 1rem; font-weight: 500; }
.sub { font-size: 1rem; color: var(--muted); max-width: 600px; margin: 0 auto 2.5rem; }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4rem; }
.btn-primary { background: var(--accent); color: #fff; padding: 0.75rem 2rem; font-weight: 600; border-radius: 4px; transition: background 0.2s; }
.btn-primary:hover { background: var(--accent2); text-decoration: none; color: #fff; }
.btn-ghost { border: 1px solid var(--border); color: var(--muted); padding: 0.75rem 2rem; border-radius: 4px; transition: border-color 0.2s, color 0.2s; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent2); text-decoration: none; }

.pipeline-anim { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: center; font-family: var(--font); font-size: 0.72rem; letter-spacing: 0.08em; }
.pipe-node { background: var(--bg3); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 3px; color: var(--muted); transition: all 0.3s; }
.pipe-node.active, .pipe-node:hover { border-color: var(--accent); color: var(--accent2); background: rgba(124,92,252,0.1); }
.pipe-arrow { color: var(--dim); font-size: 0.8rem; }

/* SECTIONS */
.tax-section { padding: 6rem 2rem; background: var(--bg2); border-bottom: 1px solid var(--border); }
.pipeline-section { padding: 6rem 2rem; border-bottom: 1px solid var(--border); }
.integrity-section { padding: 6rem 2rem; background: var(--bg2); border-bottom: 1px solid var(--border); }
.stack-section { padding: 6rem 2rem; border-bottom: 1px solid var(--border); }

.tax-section h2, .pipeline-section h2, .integrity-section h2, .stack-section h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.25rem; color: #fff;
}
.section-lead { font-size: 1.1rem; color: var(--muted); max-width: 700px; margin-bottom: 3rem; line-height: 1.7; }

.tax-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.tax-item { background: var(--bg3); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 1.5rem; border-radius: 4px; }
.tax-num { display: block; font-family: var(--font); font-size: 0.65rem; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 0.5rem; }
.tax-item p { color: var(--muted); font-size: 0.95rem; }
.tax-answer { font-size: 1.15rem; color: var(--text); border-left: 3px solid var(--green); padding-left: 1.5rem; max-width: 700px; }

.components { display: flex; flex-direction: column; gap: 3rem; }
.component { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 2.5rem; transition: border-color 0.2s; }
.component:hover { border-color: var(--accent); }
.comp-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.comp-num { font-family: var(--font); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--accent); background: rgba(124,92,252,0.1); border: 1px solid var(--accent); padding: 0.25rem 0.6rem; border-radius: 3px; }
.comp-header h3 { font-size: 1.5rem; font-weight: 700; color: #fff; }
.comp-lang { font-family: var(--font); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.08em; margin-left: auto; }
.component > p { color: var(--muted); margin-bottom: 2rem; max-width: 700px; line-height: 1.7; }

.comp-stages { display: flex; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.stage { background: var(--bg3); border: 1px solid var(--border); padding: 0.75rem 1rem; border-radius: 4px; min-width: 150px; flex: 1; }
.stage strong { display: block; font-size: 0.85rem; color: var(--text); margin-bottom: 0.25rem; }
.stage span { font-size: 0.75rem; color: var(--dim); }
.stage-arrow { color: var(--dim); align-self: center; font-size: 1rem; flex-shrink: 0; }

.comp-code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.comp-code pre { padding: 1.25rem; overflow-x: auto; }
.comp-code code { font-family: var(--font); font-size: 0.82rem; color: var(--accent2); white-space: pre; }

.persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.persona-card { background: var(--bg3); border: 1px solid var(--border); padding: 1rem; border-radius: 4px; text-align: center; transition: border-color 0.2s; }
.persona-card:hover { border-color: var(--accent2); }
.persona-icon { display: block; font-size: 1.5rem; margin-bottom: 0.5rem; }
.persona-card strong { display: block; font-size: 0.85rem; color: var(--text); margin-bottom: 0.25rem; }
.persona-card span { font-size: 0.75rem; color: var(--dim); }
.constraint-box { background: rgba(124,92,252,0.07); border: 1px solid rgba(124,92,252,0.3); padding: 1rem 1.5rem; border-radius: 4px; font-size: 0.9rem; color: var(--muted); }
.constraint-box strong { color: var(--accent2); }

.twin-cycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.cycle-item { background: var(--bg3); border: 1px solid var(--border); padding: 1.25rem; border-radius: 4px; }
.cycle-icon { display: block; font-size: 1.3rem; margin-bottom: 0.5rem; }
.cycle-item strong { display: block; font-size: 0.9rem; color: var(--text); margin-bottom: 0.35rem; }
.cycle-item span { font-size: 0.78rem; color: var(--dim); line-height: 1.5; }

.integrity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; }
.int-item { background: var(--bg3); border: 1px solid var(--border); padding: 1.75rem; border-radius: 4px; border-top: 3px solid var(--accent3); }
.int-item h4 { font-size: 1rem; color: var(--accent3); margin-bottom: 0.75rem; }
.int-item p { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }

.stack-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.stack-item { background: var(--bg2); border: 1px solid var(--border); padding: 1.5rem; border-radius: 4px; }
.stack-item strong { display: block; font-size: 1.1rem; color: #fff; margin-bottom: 0.5rem; font-family: var(--font); }
.stack-item span { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }

/* FOOTER */
footer { padding: 3rem 2rem; background: var(--bg); }
.footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.footer-row > div { display: flex; flex-direction: column; gap: 0.25rem; }
.footer-row strong { color: #fff; font-size: 1.05rem; }
.footer-row span { color: var(--muted); font-size: 0.85rem; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; flex-direction: row !important; }
.footer-links a { color: var(--muted); font-size: 0.85rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--accent2); text-decoration: none; }
.footer-note { font-family: var(--font); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--dim); text-align: center; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* RESPONSIVE */
@media (max-width: 640px) {
  .comp-stages { flex-direction: column; }
  .stage-arrow { display: none; }
  .comp-lang { margin-left: 0; width: 100%; }
}

/* SCROLL ANIMATION */
.component, .tax-item, .int-item, .stack-item {
  opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease;
}
.component.visible, .tax-item.visible, .int-item.visible, .stack-item.visible {
  opacity: 1; transform: translateY(0);
}