/* ====== Thème & tokens (dark par défaut via .dark sur ) ====== */ :root { --bg: #0b0b12; --fg: #f6f7fb; --fg-muted: #9aa0b2; --card: #131326; --card-border: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.12); --input: #0f1020; --ring: #6ea8ff; --neon-blue: oklch(0.7 0.3 240); --neon-purple: oklch(0.65 0.35 280); --radius: 14px; --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.25); } .dark { background: radial-gradient(1200px 600px at 80% -10%, rgba(115, 84, 241, 0.25), transparent 60%), radial-gradient(1000px 500px at -20% 0%, rgba(58, 134, 255, 0.25), transparent 60%), var(--bg); color: var(--fg); } /* ====== Layout de base ====== */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 1.5; scroll-behavior: smooth; scroll-behavior: auto; } body { display: flex; flex-direction: column; min-height: 100vh; } header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); } header img { width: 32px; height: 32px; } header h1 { font-size: 18px; margin: 0; opacity: 0.9; } main { flex: 1; display: flex; } .container { max-width: 800px; margin: 0 auto; padding: 0 20px; } .text-center { text-align: center; } .hero-title { font-size: clamp(28px, 4vw, 48px); font-weight: 700; line-height: 1.15; margin: 24px 0 12px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple), var(--neon-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .muted { color: var(--fg-muted); } /* ====== Carte / sections ====== */ .main-form { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 60%), var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft); } .subform { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 10px; } .features { margin: 40px 0 20px; } .features-grid-container { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .features-grid-container { grid-template-columns: 1fr; } } /* ====== Inputs & bouton ====== */ input[type='url'], input[type='text'], input[type='number'] { width: 100%; padding: 14px 14px; background: var(--input); color: var(--fg); border: 1px solid var(--card-border); border-radius: calc(var(--radius) - 6px); outline: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.05s ease; } input::placeholder { color: #8087a2; } input:focus { border-color: color-mix(in oklab, var(--neon-blue) 55%, white 10%); box-shadow: 0 0 0 3px color-mix(in oklab, var(--neon-blue) 25%, transparent); } #shorten-button { display: inline-flex; align-items: center; gap: 10px; border: 0; outline: none; cursor: pointer; height: 48px; padding: 0 18px; color: white; font-weight: 600; letter-spacing: 0.2px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); border-radius: calc(var(--radius) - 6px); box-shadow: 0 10px 25px rgba(115, 84, 241, 0.25); transition: transform 0.05s ease, filter 0.2s ease, box-shadow 0.2s ease; } #shorten-button:hover { filter: brightness(1.05); box-shadow: 0 12px 30px rgba(115, 84, 241, 0.35); } #shorten-button:active { transform: translateY(1px); } #shorten-button svg { fill: currentColor; color: white; } /* ====== QR code ====== */ #qr-block { margin-top: 12px; text-align: center; } #qr-canvas { width: 128px !important; height: 128px !important; image-rendering: pixelated; } /* Effet bouton "Copier" et messages */ .btn { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--card-border); background: #151531; color: var(--fg); cursor: pointer; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } #result, #error, #rate-limit-error { margin-top: 14px; border: 1px solid var(--card-border); border-radius: 10px; padding: 14px; background: #0e0e22; } .result-container { display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: space-between; } .result-url-container { margin-bottom: 10px; } .btn-container { display: flex; flex-direction: row; text-align: right; gap: 10px; } #result h2 { margin: 0 0 6px; font-size: 16px; } #result a#short-url { color: var(--neon-blue); word-break: break-all; } #target-out { display: inline-block; margin-top: 4px; color: var(--fg-muted); } /* ====== Feature cards ====== */ .feature-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 60%), var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; transition: border-color 0.2s, transform 0.05s ease, box-shadow 0.2s; } .feature-card:hover { border-color: color-mix(in oklab, var(--neon-blue) 35%, white 5%); box-shadow: 0 10px 30px rgba(58, 134, 255, 0.18); } .feature-card h3 { margin: 10px 0 6px; } .feature-card p { margin: 0; color: var(--fg-muted); } /* Icônes rondes dégradées */ .icon-wrapper { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: white; border: 1px solid rgba(255, 255, 255, 0.15); } .icon-wrapper .icon-svg { width: 22px; height: 22px; } .icon-wrapper.blue-gradient { background: linear-gradient(135deg, color-mix(in oklab, var(--neon-blue) 65%, black 10%), #1a1a32); } .icon-wrapper.purple-gradient { background: linear-gradient(135deg, color-mix(in oklab, var(--neon-purple) 65%, black 10%), #1a1a32); } /* ====== Effets néon ====== */ @keyframes neon-pulse { 0%, 100% { text-shadow: 0 0 8px currentColor, 0 0 18px currentColor; } 50% { text-shadow: 0 0 3px currentColor, 0 0 8px currentColor; } } .neon-glow { animation: neon-pulse 2.2s ease-in-out infinite alternate; } /* ====== Footer ====== */ footer { margin-top: 36px; border-top: 1px solid var(--border); padding: 18px 20px; color: var(--fg-muted); text-align: center; }