chitrark/reachy_mini_bookreader

1* {2	margin: 0;3	padding: 0;4	box-sizing: border-box;5}6 7body {8	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;9	line-height: 1.6;10	color: #333;11	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);12	min-height: 100vh;13}14 15.hero {16	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);17	color: white;18	padding: 4rem 2rem;19	text-align: center;20}21 22.hero-content {23	max-width: 800px;24	margin: 0 auto;25}26 27.app-icon {28	font-size: 4rem;29	margin-bottom: 1rem;30	display: inline-block;31}32 33.hero h1 {34	font-size: 3rem;35	font-weight: 700;36	margin-bottom: 1rem;37	background: linear-gradient(45deg, #fff, #f0f9ff);38	background-clip: text;39	-webkit-background-clip: text;40	-webkit-text-fill-color: transparent;41}42 43.tagline {44	font-size: 1.25rem;45	opacity: 0.9;46	max-width: 600px;47	margin: 0 auto;48}49 50.container {51	max-width: 1200px;52	margin: 0 auto;53	padding: 0 2rem;54	position: relative;55	z-index: 2;56}57 58.main-card {59	background: white;60	border-radius: 20px;61	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);62	margin-top: -2rem;63	overflow: hidden;64	margin-bottom: 3rem;65}66 67.app-preview {68	background: linear-gradient(135deg, #1e3a8a, #3b82f6);69	padding: 3rem;70	color: white;71	text-align: center;72	position: relative;73}74 75.preview-image {76	background: #000;77	border-radius: 15px;78	padding: 2rem;79	max-width: 500px;80	margin: 0 auto;81	position: relative;82	overflow: hidden;83}84 85.camera-feed {86	font-size: 4rem;87	margin-bottom: 1rem;88	opacity: 0.7;89}90 91.detection-overlay {92	position: absolute;93	top: 50%;94	left: 50%;95	transform: translate(-50%, -50%);96	width: 100%;97}98 99.bbox {100	background: rgba(34, 197, 94, 0.9);101	color: white;102	padding: 0.5rem 1rem;103	border-radius: 8px;104	font-size: 0.9rem;105	font-weight: 600;106	margin: 0.5rem;107	display: inline-block;108	border: 2px solid #22c55e;109}110 111.app-details {112	padding: 3rem;113}114 115.app-details h2 {116	font-size: 2rem;117	color: #1e293b;118	margin-bottom: 2rem;119	text-align: center;120}121 122.template-info {123	display: grid;124	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));125	gap: 2rem;126	margin-bottom: 3rem;127}128 129.info-box {130	background: #f0f9ff;131	border: 2px solid #e0f2fe;132	border-radius: 12px;133	padding: 2rem;134}135 136.info-box h3 {137	color: #0c4a6e;138	margin-bottom: 1rem;139	font-size: 1.2rem;140}141 142.info-box p {143	color: #0369a1;144	line-height: 1.6;145}146 147.how-to-use {148	background: #fefce8;149	border: 2px solid #fde047;150	border-radius: 12px;151	padding: 2rem;152	margin-top: 3rem;153}154 155.how-to-use h3 {156	color: #a16207;157	margin-bottom: 1.5rem;158	font-size: 1.3rem;159	text-align: center;160}161 162.steps {163	display: flex;164	flex-direction: column;165	gap: 1.5rem;166}167 168.step {169	display: flex;170	align-items: flex-start;171	gap: 1rem;172}173 174.step-number {175	background: #eab308;176	color: white;177	width: 2rem;178	height: 2rem;179	border-radius: 50%;180	display: flex;181	align-items: center;182	justify-content: center;183	font-weight: bold;184	flex-shrink: 0;185}186 187.step h4 {188	color: #a16207;189	margin-bottom: 0.5rem;190	font-size: 1.1rem;191}192 193.step p {194	color: #ca8a04;195}196 197.download-card {198	background: white;199	border-radius: 20px;200	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);201	padding: 3rem;202	text-align: center;203}204 205.download-card h2 {206	font-size: 2rem;207	color: #1e293b;208	margin-bottom: 1rem;209}210 211.download-card>p {212	color: #64748b;213	font-size: 1.1rem;214	margin-bottom: 2rem;215}216 217.dashboard-config {218	margin-bottom: 2rem;219	text-align: left;220	max-width: 400px;221	margin-left: auto;222	margin-right: auto;223}224 225.dashboard-config label {226	display: block;227	color: #374151;228	font-weight: 600;229	margin-bottom: 0.5rem;230}231 232.dashboard-config input {233	width: 100%;234	padding: 0.75rem 1rem;235	border: 2px solid #e5e7eb;236	border-radius: 8px;237	font-size: 0.95rem;238	transition: border-color 0.2s;239}240 241.dashboard-config input:focus {242	outline: none;243	border-color: #667eea;244}245 246.install-btn {247	background: linear-gradient(135deg, #667eea, #764ba2);248	color: white;249	border: none;250	padding: 1.25rem 3rem;251	border-radius: 16px;252	font-size: 1.2rem;253	font-weight: 700;254	cursor: pointer;255	transition: all 0.3s ease;256	display: inline-flex;257	align-items: center;258	gap: 0.75rem;259	margin-bottom: 2rem;260	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);261}262 263.install-btn:hover:not(:disabled) {264	transform: translateY(-3px);265	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);266}267 268.install-btn:disabled {269	opacity: 0.7;270	cursor: not-allowed;271	transform: none;272}273 274.manual-option {275	background: #f8fafc;276	border-radius: 12px;277	padding: 2rem;278	margin-top: 2rem;279}280 281.manual-option h3 {282	color: #1e293b;283	margin-bottom: 1rem;284	font-size: 1.2rem;285}286 287.manual-option>p {288	color: #64748b;289	margin-bottom: 1rem;290}291 292.btn-icon {293	font-size: 1.1rem;294}295 296.install-status {297	padding: 1rem;298	border-radius: 8px;299	font-size: 0.9rem;300	text-align: center;301	display: none;302	margin-top: 1rem;303}304 305.install-status.success {306	background: #dcfce7;307	color: #166534;308	border: 1px solid #bbf7d0;309}310 311.install-status.error {312	background: #fef2f2;313	color: #dc2626;314	border: 1px solid #fecaca;315}316 317.install-status.loading {318	background: #dbeafe;319	color: #1d4ed8;320	border: 1px solid #bfdbfe;321}322 323.install-status.info {324	background: #e0f2fe;325	color: #0369a1;326	border: 1px solid #7dd3fc;327}328 329.manual-install {330	background: #1f2937;331	border-radius: 8px;332	padding: 1rem;333	margin-bottom: 1rem;334	display: flex;335	align-items: center;336	gap: 1rem;337}338 339.manual-install code {340	color: #10b981;341	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;342	font-size: 0.85rem;343	flex: 1;344	overflow-x: auto;345}346 347.copy-btn {348	background: #374151;349	color: white;350	border: none;351	padding: 0.5rem 1rem;352	border-radius: 6px;353	font-size: 0.8rem;354	cursor: pointer;355	transition: background-color 0.2s;356}357 358.copy-btn:hover {359	background: #4b5563;360}361 362.manual-steps {363	color: #6b7280;364	font-size: 0.9rem;365	line-height: 1.8;366}367 368.footer {369	text-align: center;370	padding: 2rem;371	color: white;372	opacity: 0.8;373}374 375.footer a {376	color: white;377	text-decoration: none;378	font-weight: 600;379}380 381.footer a:hover {382	text-decoration: underline;383}384 385/* Responsive Design */386@media (max-width: 768px) {387	.hero {388		padding: 2rem 1rem;389	}390 391	.hero h1 {392		font-size: 2rem;393	}394 395	.container {396		padding: 0 1rem;397	}398 399	.app-details,400	.download-card {401		padding: 2rem;402	}403 404	.features-grid {405		grid-template-columns: 1fr;406	}407 408	.download-options {409		grid-template-columns: 1fr;410	}411}