Johan LEROY
3b251c8174
- Scaffold packages/site with 11 Vue components: hero (animated terminal), features, showcase, work groups, how-it-works, security, FAQ accordion, footer - i18n EN/FR via vue-i18n with 82+ keys, autodetect navigator.language, toggle without reload - Animated timeline (terminal, dialog, toast) ported from design, scroll-reveal, copy buttons (2 instances) - Self-hosted JetBrains Mono fonts (@fontsource), optimized assets (mark 28KB, og-cover 1200×630) - SEO: canonical, og:image, theme-color, robots.txt, sitemap.xml for git-arboretum.com - Monorepo integration (decoupled from npm release): build:site / dev:site / preview:site scripts - CI: add build:site step to ci.yml for early detection; create .gitea/workflows/prod.yml for FTPS deploy (lftp mirror) to git-arboretum.com - Validated builds ✓ and UI rendering (EN/FR headless test) ✓
121 lines
2.5 KiB
CSS
121 lines
2.5 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* La palette du design correspond à zinc/emerald/amber/sky/red de Tailwind.
|
|
On ajoute seulement les tokens hors échelle : ombres, police mono, animations. */
|
|
@theme {
|
|
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
|
|
|
--shadow-hero: 0 30px 80px -30px rgb(0 0 0 / 0.85);
|
|
--shadow-card: 0 24px 60px -30px rgb(0 0 0 / 0.8);
|
|
--shadow-phone: 0 30px 70px -28px rgb(0 0 0 / 0.9);
|
|
--shadow-toast: 0 12px 32px -12px rgb(0 0 0 / 0.7);
|
|
--shadow-toast-sm: 0 10px 24px -12px rgb(0 0 0 / 0.6);
|
|
|
|
--animate-blink: blink 1.05s steps(1) infinite;
|
|
--animate-pulse-sky: pulseSky 2s ease-in-out infinite;
|
|
--animate-pulse-amber: pulseAmber 2.2s ease-in-out infinite;
|
|
--animate-toast-in: toastIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
--animate-dlg-in: dlgIn 0.35s ease both;
|
|
}
|
|
|
|
/* JetBrains Mono (Open Font License) : @font-face fournis par @fontsource,
|
|
importés dans main.ts et bundlés par Vite (self-host, pas de CDN Google). */
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background-color: #09090b;
|
|
color: #f4f4f5;
|
|
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
}
|
|
::selection {
|
|
background: rgba(16, 185, 129, 0.3);
|
|
color: #fff;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%,
|
|
48% {
|
|
opacity: 1;
|
|
}
|
|
49%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes pulseSky {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.55);
|
|
}
|
|
70%,
|
|
100% {
|
|
box-shadow: 0 0 0 6px rgba(125, 211, 252, 0);
|
|
}
|
|
}
|
|
@keyframes pulseAmber {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(252, 211, 77, 0.55);
|
|
}
|
|
70%,
|
|
100% {
|
|
box-shadow: 0 0 0 6px rgba(252, 211, 77, 0);
|
|
}
|
|
}
|
|
@keyframes toastIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(16px) scale(0.96);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes dlgIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
/* Tailwind v4 ne met plus cursor:pointer sur les boutons → on le rétablit. */
|
|
button:not(:disabled),
|
|
[role='button']:not([aria-disabled='true']) {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
/* Révélation au scroll (directive v-reveal) */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(22px);
|
|
transition:
|
|
opacity 0.7s ease,
|
|
transform 0.7s ease;
|
|
}
|
|
.reveal.is-visible {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation: none !important;
|
|
}
|
|
.reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|