/* * ============================================================ * OOYEH FORM STYLE — v1.0 * Fichier CSS autonome pour les formulaires de contact * générés par forms.ooyeh.net * * USAGE : * 1. Ajouter dans le : * * * * 2. Entourer le
dans : *
...
* * Compatible avec tous les champs du générateur dashboard. * ============================================================ */ /* ── CUSTOM PROPERTIES ───────────────────────────────────── */ :root { /* Palette */ --oy-bg: #faf8f5; --oy-surface: #ffffff; --oy-border: #e4ddd4; --oy-border-focus:#c4a882; --oy-text: #2e2a25; --oy-text-soft: #7a736b; --oy-accent: #c25e30; --oy-accent-hover:#a94e26; --oy-accent-glow: rgba(194, 94, 48, .15); --oy-success: #3a7d5c; --oy-error: #b93a3a; --oy-field-bg: #fdfcfb; --oy-radius: 10px; --oy-radius-sm: 6px; --oy-shadow: 0 1px 3px rgba(46,42,37,.06), 0 6px 24px rgba(46,42,37,.04); --oy-shadow-lg: 0 4px 12px rgba(46,42,37,.08), 0 16px 48px rgba(46,42,37,.06); --oy-transition: .25s cubic-bezier(.4,0,.2,1); /* Typography */ --oy-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --oy-font-display:'Playfair Display', Georgia, serif; } /* ── WRAPPER ─────────────────────────────────────────────── */ .ooyeh-form-wrapper { max-width: 580px; margin: 3rem auto; padding: 2.5rem 2.75rem 2.75rem; background: var(--oy-surface); border: 1px solid var(--oy-border); border-radius: calc(var(--oy-radius) + 4px); box-shadow: var(--oy-shadow); font-family: var(--oy-font-body); color: var(--oy-text); position: relative; overflow: hidden; } /* Subtle decorative top bar */ .ooyeh-form-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--oy-accent), #d4956a, var(--oy-accent)); background-size: 200% 100%; animation: oy-shimmer 6s ease-in-out infinite; } @keyframes oy-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Optional title — add

...

before the form */ .ooyeh-form-title { font-family: var(--oy-font-display); font-weight: 600; font-size: 1.65rem; letter-spacing: -.02em; color: var(--oy-text); margin: 0 0 .35rem; line-height: 1.25; } .ooyeh-form-subtitle { font-size: .9rem; color: var(--oy-text-soft); margin: 0 0 2rem; line-height: 1.5; } /* ── FORM LAYOUT ─────────────────────────────────────────── */ #contactForm { display: flex; flex-direction: column; gap: 1.35rem; } /* ── LABELS ──────────────────────────────────────────────── */ #contactForm label { display: block; font-size: .8rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--oy-text-soft); margin-bottom: .45rem; transition: color var(--oy-transition); } /* Highlight label when field is focused */ #contactForm div:focus-within > label { color: var(--oy-accent); } /* ── INPUTS, SELECTS, TEXTAREA ───────────────────────────── */ #contactForm input[type="text"], #contactForm input[type="email"], #contactForm input[type="tel"], #contactForm input[type="url"], #contactForm input[type="date"], #contactForm select, #contactForm textarea { display: block; width: 100%; padding: .8rem 1rem; font-family: var(--oy-font-body); font-size: .95rem; color: var(--oy-text); background: var(--oy-field-bg); border: 1.5px solid var(--oy-border); border-radius: var(--oy-radius); outline: none; box-sizing: border-box; transition: border-color var(--oy-transition), box-shadow var(--oy-transition), background var(--oy-transition); -webkit-appearance: none; } #contactForm input::placeholder, #contactForm textarea::placeholder { color: #bdb5ab; font-style: italic; font-weight: 400; } /* Focus */ #contactForm input[type="text"]:focus, #contactForm input[type="email"]:focus, #contactForm input[type="tel"]:focus, #contactForm input[type="url"]:focus, #contactForm input[type="date"]:focus, #contactForm select:focus, #contactForm textarea:focus { border-color: var(--oy-border-focus); box-shadow: 0 0 0 3.5px var(--oy-accent-glow); background: var(--oy-surface); } /* Textarea */ #contactForm textarea { resize: vertical; min-height: 120px; line-height: 1.55; } /* Select arrow */ #contactForm select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a736b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } /* ── INLINE LAYOUTS (ville_cp, etc.) ─────────────────────── */ #contactForm > div[style*="display:flex"], #contactForm > div[style*="display: flex"] { gap: .85rem !important; } /* ── CHECKBOX / RGPD ─────────────────────────────────────── */ #contactForm input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--oy-accent); border-radius: 4px; cursor: pointer; flex-shrink: 0; margin-top: 2px; } #contactForm div[style*="align-items"] label, #contactForm .rgpd-label { font-size: .82rem !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--oy-text-soft) !important; line-height: 1.4; cursor: pointer; } /* ── SUBMIT BUTTON ───────────────────────────────────────── */ #submitBtn { display: block; width: 100%; padding: .95rem 1.5rem; margin-top: .5rem; font-family: var(--oy-font-body); font-size: 1rem; font-weight: 700; letter-spacing: .03em; color: #fff; background: var(--oy-accent); border: none; border-radius: var(--oy-radius); cursor: pointer; position: relative; overflow: hidden; transition: background var(--oy-transition), transform var(--oy-transition), box-shadow var(--oy-transition); } #submitBtn:hover { background: var(--oy-accent-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(194, 94, 48, .3); } #submitBtn:active { transform: translateY(0); box-shadow: none; } #submitBtn:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; } /* Ripple / shimmer on hover */ #submitBtn::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transition: left .5s ease; } #submitBtn:hover::after { left: 120%; } /* ── STATUS MESSAGE ──────────────────────────────────────── */ #status { text-align: center; font-size: .875rem; font-weight: 500; min-height: 1.25rem; margin-top: .25rem; transition: color var(--oy-transition); } #status:empty { display: none; } /* ── INVALID STATE ───────────────────────────────────────── */ #contactForm input:invalid:not(:placeholder-shown), #contactForm textarea:invalid:not(:placeholder-shown) { border-color: var(--oy-error); } #contactForm input:invalid:not(:placeholder-shown):focus, #contactForm textarea:invalid:not(:placeholder-shown):focus { box-shadow: 0 0 0 3.5px rgba(185, 58, 58, .12); } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 640px) { .ooyeh-form-wrapper { margin: 1.5rem 1rem; padding: 1.75rem 1.35rem 2rem; } .ooyeh-form-title { font-size: 1.35rem; } /* Stack inline layouts on mobile */ #contactForm > div[style*="display:flex"], #contactForm > div[style*="display: flex"] { flex-direction: column !important; } #contactForm > div[style*="display:flex"] > div, #contactForm > div[style*="display: flex"] > div { flex: 1 1 100% !important; width: 100% !important; } } /* ── OPTIONAL: DARK THEME ────────────────────────────────── */ /* Add class "ooyeh-dark" to .ooyeh-form-wrapper to activate */ .ooyeh-form-wrapper.ooyeh-dark { --oy-bg: #1a1816; --oy-surface: #242120; --oy-border: #3a3632; --oy-border-focus:#c4a882; --oy-text: #ece6df; --oy-text-soft: #9a928a; --oy-field-bg: #2a2724; --oy-shadow: 0 1px 3px rgba(0,0,0,.2), 0 6px 24px rgba(0,0,0,.15); } .ooyeh-form-wrapper.ooyeh-dark #contactForm input::placeholder, .ooyeh-form-wrapper.ooyeh-dark #contactForm textarea::placeholder { color: #5a534b; } .ooyeh-form-wrapper.ooyeh-dark #contactForm select { color-scheme: dark; color: var(--oy-text); background-color: var(--oy-field-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a928a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; } .ooyeh-form-wrapper.ooyeh-dark #contactForm select option { background: #2a2724; color: #ece6df; } /* ── ENTRANCE ANIMATION ──────────────────────────────────── */ .ooyeh-form-wrapper { animation: oy-fadeUp .5s ease-out both; } @keyframes oy-fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } #contactForm > div { animation: oy-fieldIn .4s ease-out both; } #contactForm > div:nth-child(1) { animation-delay: .05s; } #contactForm > div:nth-child(2) { animation-delay: .1s; } #contactForm > div:nth-child(3) { animation-delay: .15s; } #contactForm > div:nth-child(4) { animation-delay: .2s; } #contactForm > div:nth-child(5) { animation-delay: .25s; } #contactForm > div:nth-child(6) { animation-delay: .3s; } #contactForm > div:nth-child(7) { animation-delay: .35s; } #contactForm > div:nth-child(8) { animation-delay: .4s; } #contactForm > div:nth-child(9) { animation-delay: .45s; } #contactForm > div:nth-child(10) { animation-delay: .5s; } @keyframes oy-fieldIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }