/* ===================================================================== sex-friend.be — registre « CANARD & CORAIL, BULLES » Gabarit annoncesastro, skin-2 (nuit) retourne en clair + aa-compo-1 + aa-fiche-2. Palette (accent = couleur du favicon #00838f, posee en inline sur ) : canard #00838f accent, #007580 fond de bouton (blanc 5,3:1), #00616b texte (6,9:1 sur peche) corail #f27a5e ornements, #b04630 texte (5,2:1 sur creme) peche #fbefe4 fond de page (neutre chaud), creme #fffaf5 surfaces encre #14302f texte (13:1), muet #5c534d (7:1) lagune #0b4a50 pied de page Formes signature : (1) BULLE DE DIALOGUE : coin a queue sur les lignes, le formulaire d'accueil, la carte de CTA, la fiche ; (2) VIGNETTE-BULLE (arrondi organique, queue en bas a gauche) sur chaque photo ; (3) SEMIS DE BULLES (motif SVG) sur l'en-tete, le hero et le pied ; (4) PILULES corail pour categories et nouveau. ===================================================================== */ body.aa.skin-2 { color-scheme: light; --aa-fond: #fbefe4; --aa-surface: #fffaf5; --aa-texte: #14302f; --aa-muet: #5c534d; --aa-bord: #ecd8c6; --aa-primaire: #007580; --aa-primaire-txt: #fff; --aa-secondaire: #00616b; --aa-secondaire-txt: #fff; --aa-tete: #fffaf5; --aa-tete-txt: #14302f; --aa-pied: #0b4a50; --aa-pied-txt: #f4e7dc; --aa-erreur: #b3261e; --aa-rayon: 20px; --aa-rayon-s: 999px; --aa-ombre: 0 2px 4px -2px rgba(0, 97, 107, .14), 0 18px 34px -22px rgba(0, 97, 107, .42); --aa-police: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --aa-police-titre: "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif; --sf-corail: #f27a5e; --sf-corail-txt: #b04630; --sf-corail-pale: #fde0d6; --sf-canard-txt: #00616b; --sf-bulles-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cg fill='none' stroke='%2300838f' stroke-opacity='.13' stroke-width='1.5'%3E%3Cpath d='M16 14h26a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H28l-8 7v-7h-4a6 6 0 0 1-6-6V20a6 6 0 0 1 6-6z'/%3E%3Cpath d='M104 62h34a6 6 0 0 1 6 6v14a6 6 0 0 1-6 6h-4v7l-8-7h-22a6 6 0 0 1-6-6V68a6 6 0 0 1 6-6z'/%3E%3C/g%3E%3Cg fill='%23f27a5e' fill-opacity='.16'%3E%3Ccircle cx='76' cy='24' r='4'/%3E%3Ccircle cx='62' cy='96' r='6'/%3E%3Ccircle cx='140' cy='18' r='3'/%3E%3C/g%3E%3C/svg%3E"); --sf-bulles-fonce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1.5'%3E%3Cpath d='M16 14h26a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H28l-8 7v-7h-4a6 6 0 0 1-6-6V20a6 6 0 0 1 6-6z'/%3E%3Cpath d='M104 62h34a6 6 0 0 1 6 6v14a6 6 0 0 1-6 6h-4v7l-8-7h-22a6 6 0 0 1-6-6V68a6 6 0 0 1 6-6z'/%3E%3C/g%3E%3Cg fill='%23f27a5e' fill-opacity='.22'%3E%3Ccircle cx='76' cy='24' r='4'/%3E%3Ccircle cx='62' cy='96' r='6'/%3E%3Ccircle cx='140' cy='18' r='3'/%3E%3C/g%3E%3C/svg%3E"); background: var(--aa-fond); color: var(--aa-texte); } body.aa.skin-2 a { color: var(--sf-canard-txt); } /* --- 1. EN-TETE : creme, logo en bulle, nav en pilules -------------------- */ body.aa.skin-2 .aa-header { background: var(--sf-bulles-clair), var(--aa-tete); color: var(--aa-tete-txt); border-top: 0; box-shadow: 0 1px 0 var(--aa-bord), 0 10px 26px -20px rgba(0, 97, 107, .5); } body.aa.skin-2 .aa-logo { text-transform: none; letter-spacing: -.01em; font-size: 1.28rem; font-weight: 800; color: var(--sf-canard-txt); font-family: var(--aa-police-titre); } body.aa.skin-2 .aa-logo__mark { width: 26px; height: 22px; border-radius: 12px 12px 12px 3px; background: linear-gradient(135deg, #00838f, #0aa3a8); box-shadow: 7px 6px 0 -3px var(--sf-corail); } body.aa.skin-2 .aa-nav a { text-transform: none; font-size: .93rem; letter-spacing: 0; border-radius: 999px; color: var(--aa-texte); } body.aa.skin-2 .aa-nav a:hover, body.aa.skin-2 .aa-nav a.is-actif { background: var(--sf-corail-pale); color: #6e2a1b; } body.aa.skin-2 .aa-nav__cta a { background: var(--aa-primaire); color: #fff !important; border-radius: 22px 22px 22px 6px; padding-inline: 1.1rem; box-shadow: 0 8px 18px -10px rgba(0, 117, 128, .8); } body.aa.skin-2 .aa-nav__cta a:hover { background: #00616b; } body.aa.skin-2 .aa-burger { color: var(--sf-canard-txt); background: var(--sf-corail-pale); border-radius: 14px 14px 14px 4px; } /* --- 2. BOUTONS : pilules canard, secondaire contour ------------------- */ body.aa.skin-2 .aa-btn { border-radius: 999px; } body.aa.skin-2 .aa-btn--primaire { background: var(--aa-primaire); color: #fff; box-shadow: 0 10px 20px -12px rgba(0, 117, 128, .9); } body.aa.skin-2 .aa-btn--secondaire { background: var(--aa-surface); color: var(--sf-canard-txt); border-color: #6fb8be; } body.aa.skin-2 .aa-btn--secondaire:hover { background: #e3f3f3; } body.aa.skin-2 .aa-btn:hover { box-shadow: 0 10px 22px -12px rgba(242, 122, 94, .9); } /* --- 3. HERO : semis de bulles + formulaire en bulle de dialogue ----------- */ body.aa.skin-2 .aa-hero { background: var(--sf-bulles-clair), radial-gradient(70% 120% at 100% 0%, #fde0d6, transparent 62%), radial-gradient(60% 110% at 0% 100%, #d6efef, transparent 60%), var(--aa-fond); border-bottom: 0; } body.aa.skin-2 .aa-h1 { font-weight: 800; letter-spacing: -.015em; color: var(--aa-texte); } body.aa.skin-2 .aa-hero .aa-h1::after { content: ""; display: block; width: 74px; height: 10px; margin-top: .55rem; background: radial-gradient(circle at 5px 5px, var(--sf-corail) 4px, transparent 4.5px) 0 0 / 18px 10px repeat-x; } body.aa.skin-2 .aa-intro { color: var(--aa-muet); } body.aa.skin-2 .aa-hero__chiffres { color: var(--sf-corail-txt); } body.aa.skin-2 .aa-hero__form { position: relative; border: 0; border-radius: 28px 28px 28px 8px; background: var(--aa-surface); box-shadow: 0 26px 48px -26px rgba(0, 97, 107, .55); padding: 1.4rem 1.4rem 1.5rem; } body.aa.skin-2 .aa-hero__form-h { color: var(--sf-canard-txt); } /* --- 4. SIDEBAR & FILTRES ---------------------------------------------- */ body.aa.skin-2 .aa-side { border: 0; border-radius: 24px 24px 24px 6px; background: var(--aa-surface); box-shadow: var(--aa-ombre); } body.aa.skin-2 .aa-side__h { color: var(--sf-corail-txt); letter-spacing: .08em; } body.aa.skin-2 .aa-side__liste li.is-actif a { color: #6e2a1b; } body.aa.skin-2 .aa-filtres { border-radius: 24px; border: 0; background: var(--aa-surface); box-shadow: var(--aa-ombre); } body.aa.skin-2 select, body.aa.skin-2 input[type="text"], body.aa.skin-2 input[type="email"], body.aa.skin-2 input[type="tel"], body.aa.skin-2 input[type="number"] { background-color: #fff; border: 1.5px solid var(--aa-bord); border-radius: 14px; color: var(--aa-texte); } body.aa.skin-2 textarea { background: #fff; border: 1.5px solid var(--aa-bord); border-radius: 18px 18px 18px 6px; color: var(--aa-texte); } /* --- 5. LIGNES D'ANNONCE : bulles de dialogue, vignettes-bulles ----------- */ body.aa.skin-2 .aa-liste { gap: .9rem; } body.aa.skin-2 .aa-ligne { background: var(--aa-surface); border: 0; border-radius: 24px 24px 24px 6px; box-shadow: 0 12px 26px -20px rgba(0, 97, 107, .55); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } body.aa.skin-2 .aa-ligne:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 18px 32px -20px rgba(242, 122, 94, .6); } body.aa.skin-2 .aa-ligne__img { border-radius: 46% 46% 46% 14%; background: #d6efef; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #a8d6d9; overflow: hidden; } body.aa.skin-2 .aa-ligne__img img { transition: transform .35s ease; } body.aa.skin-2 .aa-ligne:hover .aa-ligne__img img { transform: scale(1.06); } body.aa.skin-2 .aa-ligne--sans-photo .aa-ligne__img { background: #fde0d6; } body.aa.skin-2 .aa-ligne__nb { background: var(--sf-corail); color: #3a120a; border-radius: 999px; font-weight: 700; } body.aa.skin-2 .aa-ligne__cat, body.aa.skin-2 .aa-fiche__cat a { color: var(--sf-canard-txt); font-weight: 700; } body.aa.skin-2 .aa-ligne__new, body.aa.skin-2 .aa-fiche__new { background: var(--sf-corail-pale); color: #7a2d1c; border-radius: 999px; } body.aa.skin-2 .aa-ligne__meta, body.aa.skin-2 .aa-ligne__date { color: var(--aa-muet); } body.aa.skin-2 .aa-ligne__titre, body.aa.skin-2 .aa-ligne__titre a { color: var(--aa-texte); font-family: var(--aa-police-titre); } body.aa.skin-2 .aa-ligne__titre a:hover { color: var(--sf-canard-txt); } body.aa.skin-2 .aa-ligne__extrait { color: #3d3a37; } /* --- 6. BLOCS DE LIENS (villes, categories) : pastilles-bulles ------------ */ body.aa.skin-2 .aa-h2 { color: var(--aa-texte); } body.aa.skin-2 .aa-liens li { border: 0; background: var(--aa-surface); border-radius: 16px 16px 16px 4px; box-shadow: 0 6px 14px -12px rgba(0, 97, 107, .6); } body.aa.skin-2 .aa-liens li a { color: var(--aa-texte); } body.aa.skin-2 .aa-liens li:hover { background: #fff; box-shadow: 0 0 0 2px var(--sf-corail-pale); } body.aa.skin-2 .aa-liens__nb { color: var(--sf-corail-txt); font-weight: 700; } body.aa.skin-2 .aa-chips li, body.aa.skin-2 .aa-chip { background: #fff; border-color: var(--aa-bord); color: var(--aa-texte); } body.aa.skin-2 .aa-chip:has(input:checked) { background: #e3f3f3; border-color: #00838f; } body.aa.skin-2 .aa-pagination a, body.aa.skin-2 .aa-pagination span { border-radius: 999px; } body.aa.skin-2 .aa-vide { background: var(--aa-surface); border-radius: 24px; } /* --- 7. FICHE : scene en bulle, carte de CTA ------------------------------ */ body.aa.skin-2 .aa-crumbs a { color: var(--sf-canard-txt); } body.aa.skin-2 .aa-crumbs li { color: var(--aa-muet); } body.aa.skin-2 .aa-fiche__titre { color: var(--aa-texte); font-weight: 800; } body.aa.skin-2 .aa-fiche__sous, body.aa.skin-2 .aa-fiche__meta { color: var(--aa-muet); } body.aa.skin-2 .aa-fiche__photo { border-radius: 34px 34px 34px 10px; overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 24px 40px -24px rgba(0, 97, 107, .6); background: #d6efef; } body.aa.skin-2 .aa-fiche__miniatures img { border-radius: 16px 16px 16px 4px; } body.aa.skin-2 .aa-fiche__cta--haut { border: 0; border-radius: 28px 28px 28px 8px; padding: 1.3rem 1.2rem; background: var(--sf-bulles-clair), linear-gradient(160deg, #fff, #fff1e7); box-shadow: 0 26px 44px -26px rgba(0, 97, 107, .6); } body.aa.skin-2 .aa-fiche__infos, body.aa.skin-2 .aa-repondre, body.aa.skin-2 .aa-depot__bloc { border: 0; border-radius: 26px 26px 26px 8px; background: var(--aa-surface); box-shadow: 0 14px 30px -24px rgba(0, 97, 107, .55); } body.aa.skin-2 .aa-fiche__infos dt, body.aa.skin-2 .aa-fiche__physique dt { color: var(--aa-muet); } body.aa.skin-2 .aa-fiche__phy { background: #fff; border: 1.5px solid var(--aa-bord); border-radius: 18px 18px 18px 5px; } body.aa.skin-2 .aa-fiche__plage { background: var(--sf-corail-pale); color: #6e2a1b; border-radius: 999px; } body.aa.skin-2 .aa-fiche__texte p { color: #2b2825; } body.aa.skin-2 .aa-repondre .aa-h2 { color: var(--sf-canard-txt); } body.aa.skin-2 .aa-fiche__barre { background: rgba(255, 250, 245, .95); border-top: 1px solid var(--aa-bord); box-shadow: 0 -10px 24px -16px rgba(0, 97, 107, .5); } /* --- 8. DEPOT ------------------------------------------------------------ */ body.aa.skin-2 .aa-depot__bloc legend { color: #7a2d1c; font-weight: 800; background: var(--sf-corail-pale); padding: .2rem .8rem; border-radius: 999px; } body.aa.skin-2 .aa-form__lbl { color: var(--aa-texte); } body.aa.skin-2 .aa-form__aide, body.aa.skin-2 .aa-form__compteur { color: var(--aa-muet); } body.aa.skin-2 .aa-regles { color: var(--aa-texte); } /* --- 9. PIED DE PAGE : lagune semee de bulles, bulle corail au sommet ------- */ body.aa.skin-2 .aa-footer { position: relative; margin-top: 4rem; border-top: 0; background: var(--sf-bulles-fonce), linear-gradient(180deg, #0d5a61, #0b4a50 55%, #083b40); color: var(--aa-pied-txt); border-radius: 48px 48px 0 0; } body.aa.skin-2 .aa-footer::before { content: ""; position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 64px; height: 44px; border-radius: 22px 22px 22px 6px; background: var(--sf-corail); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5); } body.aa.skin-2 .aa-footer::after { content: ""; position: absolute; left: calc(50% - 25px); top: -4px; width: 50px; height: 10px; background: radial-gradient(circle at 5px 5px, #fff 3px, transparent 3.5px) 0 0 / 17px 10px repeat-x; } body.aa.skin-2 .aa-footer__h { color: #ffd2c4; text-transform: none; letter-spacing: .02em; font-size: .95rem; } body.aa.skin-2 .aa-footer__brand { color: #fff; text-transform: none; letter-spacing: -.01em; font-size: 1.25rem; } body.aa.skin-2 .aa-footer a { color: #f4e7dc; } body.aa.skin-2 .aa-footer a:hover { color: #fff; } body.aa.skin-2 .aa-footer__fictif { opacity: .85; } body.aa.skin-2 .aa-footer__bas { border-top-color: rgba(255, 210, 196, .25); } /* --- 10. PORTE D'AGE & POP-UP ---------------------------------------------- */ body.aa.skin-2 .aa-gate, body.aa.skin-2 .aa-popup { background: rgba(8, 50, 54, .78); } body.aa.skin-2 .aa-gate__box, body.aa.skin-2 .aa-popup__box { border: 0; border-radius: 30px 30px 30px 8px; background: var(--sf-bulles-clair), var(--aa-surface); color: var(--aa-texte); } body.aa.skin-2 .aa-gate__mark { border-radius: 26px 26px 26px 6px; background: var(--aa-primaire); color: #fff; box-shadow: 10px 8px 0 -4px var(--sf-corail); } body.aa.skin-2 .aa-popup__pour { color: var(--sf-canard-txt); } @media (prefers-reduced-motion: reduce) { body.aa.skin-2 .aa-ligne, body.aa.skin-2 .aa-ligne__img img { transition: none; } body.aa.skin-2 .aa-ligne:hover { transform: none; } }