/* ================================================================ Advanced Art Search — aas-search.css v2.1 ================================================================ */ :root { --aas-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --aas-black: #111; --aas-gray: #6b6b6b; --aas-gray-light: #e0e0e0; --aas-gray-bg: #f6f6f4; --aas-radius: 4px; --aas-shadow: 0 8px 40px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.06); --aas-input-h: 52px; --aas-transition: .18s ease; /* ⬇ Hauteur du header Belart — ajustez si le header change de taille */ --aas-header-h: 90px; } .aas-wrap { position: relative; font-family: var(--aas-font); z-index: 9000; width: 640px; } /* ---------------------------------------------------------------- Input row -------------------------------------------------------------- */ .aas-input-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borderr-color); border-radius: var(--aas-radius); padding: 0 14px; height: var(--aas-input-h); transition: border-color var(--aas-transition), box-shadow var(--aas-transition); } .aas-icon-search { display: flex; color: var(--aas-gray); flex-shrink: 0; } .aas-input { flex: 1; border: none; outline: none; font-size: 15px; font-family: var(--aas-font); color: var(--aas-black); background: transparent; min-width: 0; line-height: 1; } .aas-input::placeholder { color: #aaa; } .aas-input::-webkit-search-cancel-button, .aas-input::-webkit-search-decoration { -webkit-appearance: none; } .aas-clear { background: none; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; color: var(--aas-gray); border-radius: 50%; transition: background var(--aas-transition); flex-shrink: 0; } .aas-clear:hover { background: var(--aas-gray-bg); } /* ---------------------------------------------------------------- Overlay — part du bas du header, ne couvre PAS le header -------------------------------------------------------------- */ .aas-overlay { position: fixed; top: var(--aas-header-h); /* commence SOUS le header */ left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.28); z-index: 8998; /* sous le header (Elementor header = ~9999) */ animation: aasOverlayIn .2s ease; } @keyframes aasOverlayIn { from { opacity: 0; } to { opacity: 1; } } /* ---------------------------------------------------------------- Dropdown — part du bas du header lui aussi -------------------------------------------------------------- */ .aas-dropdown { position: fixed; top: var(--aas-header-h); left: 0; right: 0; background: #fff; border: none; border-radius: 0; box-shadow: var(--aas-shadow); z-index: 8999; /* au-dessus de l'overlay, sous le header */ height: calc(90vh - var(--aas-header-h)); overflow: hidden; overflow-y: auto; animation: aasDropIn .15s ease; } @keyframes aasDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .aas-dropdown::-webkit-scrollbar { width: 4px; } .aas-dropdown::-webkit-scrollbar-thumb { background: var(--aas-gray-light); border-radius: 4px; } .aas-dropdown-inner { padding: 24px 28px 28px; } /* ---------------------------------------------------------------- Scroll lock — ajouté sur par le JS quand la search est ouverte -------------------------------------------------------------- */ body.aas-open { overflow: hidden; } /* ---------------------------------------------------------------- Section title -------------------------------------------------------------- */ .aas-section-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aas-black); margin: 0 0 14px 0; } .aas-section-count { font-weight: 400; color: var(--aas-gray); letter-spacing: 0; } /* ---------------------------------------------------------------- 2-column layouts -------------------------------------------------------------- */ .aas-defaults-layout, .aas-results-layout { display: grid; gap: 32px; } .aas-defaults-layout { grid-template-columns: 180px 1fr; } .aas-results-layout { grid-template-columns: 220px 1fr; } .aas-col-left, .aas-col-right { min-width: 0; } /* ---------------------------------------------------------------- Tags (vertical) -------------------------------------------------------------- */ .aas-tags-col { display: flex; flex-direction: column; gap: 6px; } .aas-tag { display: inline-block; padding: 5px 12px; border: 1px solid var(--aas-gray-light); border-radius: 999px; font-size: 13px; color: var(--aas-black); text-decoration: none; transition: border-color var(--aas-transition), background var(--aas-transition); white-space: nowrap; width: fit-content; } .aas-tag:hover { border-color: var(--aas-black); background: var(--aas-gray-bg); } /* ---------------------------------------------------------------- Ideas grid — grandes cards overlay -------------------------------------------------------------- */ .aas-ideas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; } .aas-idea-card { position: relative; display: block; text-decoration: none; border-radius: var(--aas-radius); overflow: hidden; aspect-ratio: 1 / 1; background: var(--aas-gray-bg); } .aas-idea-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .aas-idea-card:hover img { transform: scale(1.06); } .aas-idea-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.08) 55%, transparent 100%); display: flex; align-items: flex-end; padding: 12px 10px; } .aas-idea-overlay-title { font-size: 11px; font-weight: 700; letter-spacing: .07em; color: #fff; line-height: 1.3; } /* ---------------------------------------------------------------- Suggestions list -------------------------------------------------------------- */ .aas-suggestions-list { display: flex; flex-direction: column; gap: 2px; } .aas-suggestion-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--aas-radius); text-decoration: none; color: var(--aas-black); font-size: 13px; transition: background var(--aas-transition); } .aas-suggestion-item:hover { background: var(--aas-gray-bg); } .aas-suggestion-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aas-suggestion-sub { font-size: 11px; color: var(--aas-gray); flex-shrink: 0; white-space: nowrap; } /* ---------------------------------------------------------------- Section -------------------------------------------------------------- */ .aas-section { margin-bottom: 24px; } .aas-section:last-child { margin-bottom: 0; } .aas-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .aas-see-all { font-size: 13px; color: var(--aas-gray); text-decoration: none; display: flex; align-items: center; gap: 3px; transition: color var(--aas-transition); white-space: nowrap; } .aas-see-all:hover { color: var(--aas-black); text-decoration: underline; } .aas-see-all-arrow { font-size: 16px; line-height: 1; } /* ---------------------------------------------------------------- Works horizontal scroll -------------------------------------------------------------- */ .aas-works-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .aas-works-scroll::-webkit-scrollbar { display: none; } .aas-work-card { flex: 0 0 auto; width: 130px; text-decoration: none; color: var(--aas-black); } .aas-work-card-img { width: 130px; height: 130px; border-radius: var(--aas-radius); overflow: hidden; background: var(--aas-gray-bg); margin-bottom: 7px; } .aas-work-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .aas-work-card:hover .aas-work-card-img img { transform: scale(1.05); } .aas-work-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--aas-gray-light); } .aas-work-card-title { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .aas-work-card-meta { font-size: 11px; color: var(--aas-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------------------------------------------------------------- Artists — grandes cards carrées overlay -------------------------------------------------------------- */ .aas-artists-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .aas-artist-card { position: relative; display: block; text-decoration: none; border-radius: var(--aas-radius); overflow: hidden; aspect-ratio: 1 / 1; background: var(--aas-gray-bg); } .aas-artist-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .aas-artist-card:hover img { transform: scale(1.05); } .aas-artist-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--aas-gray-bg); color: var(--aas-gray-light); } .aas-artist-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.05) 55%, transparent 100%); display: flex; align-items: flex-end; padding: 10px 8px; } .aas-artist-card-name { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.3; letter-spacing: .02em; } .aas-artist-card-name mark { background: none; color: #ffd97a; font-weight: 700; } /* ---------------------------------------------------------------- Highlights -------------------------------------------------------------- */ .aas-suggestion-text mark, .aas-work-card-title mark { background: none; color: var(--aas-black); font-weight: 700; } /* ---------------------------------------------------------------- Loader / Empty -------------------------------------------------------------- */ .aas-loading { display: flex; align-items: center; justify-content: center; padding: 40px; color: var(--aas-gray); font-size: 14px; gap: 10px; } .aas-spinner { width: 18px; height: 18px; border: 2px solid var(--aas-gray-light); border-top-color: var(--aas-black); border-radius: 50%; animation: aasSpin .7s linear infinite; flex-shrink: 0; } @keyframes aasSpin { to { transform: rotate(360deg); } } .aas-empty { padding: 40px; text-align: center; color: var(--aas-gray); font-size: 14px; } /* ---------------------------------------------------------------- Responsive -------------------------------------------------------------- */ @media (max-width: 991.98px) { .aas-wrap { width: 100%; } :root { --aas-header-h: 130px; } /* header mobile souvent plus petit */ .aas-dropdown-inner { padding: 16px; } .aas-defaults-layout, .aas-results-layout { grid-template-columns: 1fr; gap: 20px; } .aas-ideas-grid { grid-template-columns: repeat(4, 1fr); } .aas-artists-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575.98px) { .aas-ideas-grid { grid-template-columns: repeat(2, 1fr); } }