/* ========================================================= WorkFlow - Design System Palette: #0055FF · #0F172A · #FFFFFF · #F5F5F7 Style: Bento grids + Glassmorphism light ========================================================= */ /* Polices Google Fonts : chargees via dans le de chaque page (plus rapide qu'un @import, qui retarde le telechargement) */ :root { --brand: #0055FF; --brand-600: #0044CC; --brand-50: #EEF3FF; --ink: #0F172A; --ink-muted: #475569; --ink-faint: #94A3B8; --surface: #FFFFFF; --surface-soft: #F5F5F7; --surface-tint: #F0F4FF; --line: #E5E7EB; --radius-card: 24px; --radius-lg: 20px; --radius-md: 14px; --blur: 14px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } html { scroll-behavior: smooth; } body { font-family: 'Roboto', system-ui, -apple-system, sans-serif; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: 'Oswald', system-ui, sans-serif; letter-spacing: -0.02em; } /* Graisse unifiée des titres : un seul point d'ajustement (700 → 600 si besoin). Sélecteur h*.font-display : plus spécifique que les classes Tailwind font-semibold/font-bold. */ h1.font-display, h2.font-display, h3.font-display, h4.font-display, h5.font-display { font-weight: 700; } /* --------------------------------------------------------- Decorative background blobs (subtle brand tint) --------------------------------------------------------- */ .bg-aurora { position: relative; isolation: isolate; overflow: hidden; } .bg-aurora::before, .bg-aurora::after { content: ""; position: absolute; z-index: -1; border-radius: 9999px; filter: blur(80px); opacity: 0.55; pointer-events: none; } .bg-aurora::before { width: 520px; height: 520px; background: radial-gradient(circle at 30% 30%, #0055FF 0%, transparent 60%); top: -160px; left: -140px; } .bg-aurora::after { width: 460px; height: 460px; background: radial-gradient(circle at 70% 70%, #8AAFFF 0%, transparent 60%); top: 30%; right: -160px; } /* Fine grid overlay for hero */ .bg-grid { background-image: linear-gradient(to right, rgba(15,23,42,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,23,42,0.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 80%); } /* --------------------------------------------------------- Glass cards --------------------------------------------------------- */ .glass { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(var(--blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur)) saturate(140%); border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 32px rgba(15, 23, 42, 0.06); } .glass-strong { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(15, 23, 42, 0.08); } .glass-tint { background: linear-gradient(135deg, rgba(0,85,255,0.06), rgba(255,255,255,0.85)); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border: 1px solid rgba(0, 85, 255, 0.12); } /* --------------------------------------------------------- Bento layout helpers --------------------------------------------------------- */ .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } @media (max-width: 900px) { .bento { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 560px) { .bento { grid-template-columns: repeat(2, 1fr); gap: 12px; } } .bento-card { border-radius: var(--radius-card); padding: 28px; position: relative; overflow: hidden; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } .bento-card:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(15, 23, 42, 0.1); } /* --------------------------------------------------------- Buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; line-height: 1; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); cursor: pointer; white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } .btn-primary { background: var(--ink); color: #fff; } .btn-primary:hover { background: var(--brand); box-shadow: 0 10px 30px rgba(0, 85, 255, 0.3); } .btn-brand { background: var(--brand); color: #fff; } .btn-brand:hover { background: var(--brand-600); box-shadow: 0 10px 30px rgba(0, 85, 255, 0.35); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid rgba(15, 23, 42, 0.12); } .btn-ghost:hover { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.2); } /* --------------------------------------------------------- Tags & pills --------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--brand); background: var(--brand-50); border: 1px solid rgba(0, 85, 255, 0.15); } .pill-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.2); } /* --------------------------------------------------------- Navigation --------------------------------------------------------- */ .navbar { position: fixed; top: 16px; left: 16px; right: 16px; z-index: 50; border-radius: 999px; padding: 10px 14px 10px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06); transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease); } .navbar.is-scrolled { background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 12px rgba(15,23,42,0.06), 0 12px 32px rgba(15,23,42,0.08); } @media (max-width: 720px) { .navbar { padding: 10px 10px 10px 16px; } } .drawer { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 49; display: flex; flex-direction: column; padding: 96px 24px 24px; gap: 8px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .drawer.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .drawer a { font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 600; color: var(--ink); padding: 14px 0; border-bottom: 1px solid rgba(15,23,42,0.08); } .drawer a:hover { color: var(--brand); } .nav-link { position: relative; padding: 8px 14px; color: var(--ink); font-weight: 500; font-size: 16px; } .nav-link::after { content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%) scaleX(0); transform-origin: center; width: 60%; height: 2px; background: var(--brand); border-radius: 2px; transition: transform 0.25s var(--ease); } .nav-link:hover::after, .nav-link.active::after { transform: translateX(-50%) scaleX(1); } .nav-link.active { color: var(--brand); } /* Dropdown menu (desktop) */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font-family: inherit; } .nav-dropdown-trigger svg { transition: transform 0.2s var(--ease); } .nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 240px; padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12); display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); z-index: 60; } .nav-dropdown.open .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown-menu a { padding: 10px 14px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--ink); transition: background 0.15s var(--ease), color 0.15s var(--ease); } .nav-dropdown-menu a:hover { background: var(--brand-50); color: var(--brand); } .nav-dropdown-menu a.active { color: var(--brand); } /* Drawer submenu (mobile) */ .drawer-group { display: flex; flex-direction: column; } .drawer-group-trigger { display: flex; align-items: center; justify-content: space-between; font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 600; color: var(--ink); padding: 14px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.08); background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; text-align: left; width: 100%; } .drawer-group-trigger svg { transition: transform 0.2s var(--ease); } .drawer-group.open .drawer-group-trigger svg { transform: rotate(180deg); } .drawer-group-list { display: none; flex-direction: column; padding: 8px 0 8px 16px; } .drawer-group.open .drawer-group-list { display: flex; } .drawer-group-list a { font-family: 'Roboto', system-ui, sans-serif; font-size: 18px; font-weight: 500; padding: 10px 0; border-bottom: 1px solid rgba(15, 23, 42, 0.05); } /* --------------------------------------------------------- Numbered step --------------------------------------------------------- */ .step-num { font-family: 'Oswald', sans-serif; font-size: 60px; font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--brand), #8AAFFF); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.03em; } /* --------------------------------------------------------- Scroll reveal --------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* --------------------------------------------------------- Marquee (trust bar) --------------------------------------------------------- */ .marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-track { display: flex; gap: 64px; animation: marquee 40s linear infinite; flex-shrink: 0; padding-right: 64px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --------------------------------------------------------- Form --------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; font-weight: 600; color: var(--ink); } .field input, .field textarea, .field select { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(15, 23, 42, 0.12); background: #fff; font-family: inherit; font-size: 15px; color: var(--ink); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0, 85, 255, 0.12); } /* --------------------------------------------------------- Utilities --------------------------------------------------------- */ .gradient-text { background: linear-gradient(135deg, var(--brand), #001A4D); -webkit-background-clip: text; background-clip: text; color: transparent; } .divider-fade { height: 1px; background: linear-gradient(90deg, transparent, rgba(15,23,42,0.1), transparent); } /* Accessibility: reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .marquee-track { animation: none; } } /* Focus ring for all interactive */ a:focus-visible, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }