/* * ============================================================ * ROS-GLOBAL.CSS — Rock of Science * Version 2.4 * * TABLE DES MATIÈRES * 1. Variables (couleurs, tailles, espacements) * 2. Police globale * 3. Fond sombre (toutes les pages publiques) * 4. Typographie générale * 5. Liens * 6. Labels (étiquettes orange) * 7. Slider de photos (fiche minéral) * 8. Fiche minéral (layout, colonnes, textes) * 9. Grille de vignettes (toutes les pages de collection) * 10. Page A to Z * 11. Responsive (breakpoints mobiles) * 12. Contrôles de tri * 13. Fil d'ariane dynamique * 14. Gap-fix Enfold * 15. Tableau périodique (By Element) * 16. Pages taxonomie * 17. My Favorites * 18. Lignes compactes fiche minéral * 19. My Collection (gap-fix) * 20. Badge cadenas — minéraux privés * 21. Recherche dans le fil d'ariane * 22. Sticky footer (pied de page fixé en bas) * ============================================================ */ /* ============================================================ 1. VARIABLES Modifie ici pour changer les couleurs et tailles globalement. ============================================================ */ :root { /* ── COULEURS PRINCIPALES ───────────────────────────────────── Pour changer la couleur orange du site (boutons, titres, accents), modifiez --ros-orange. C'est la seule valeur à changer dans 95% des cas. ──────────────────────────────────────────────────────────── */ --ros-orange: #c3512f; /* Orange principal — titres, boutons, compteurs, hover nav */ --ros-orange-light: #ed9b85; /* Orange clair — hover secondaire, rarement utilisé */ /* ── TEXTES ─────────────────────────────────────────────────── --ros-text : corps de texte principal (noms de minéraux, descriptions) --ros-text-dim : métadonnées secondaires (formules, origines...) ──────────────────────────────────────────────────────────── */ --ros-text: #cccccc; /* Texte principal — gris clair sur fond sombre */ --ros-text-dim: #aaaaaa; /* Texte atténué — informations secondaires */ /* ── LIENS ──────────────────────────────────────────────────── Les liens normaux sont gris ; ils passent en blanc au survol. ──────────────────────────────────────────────────────────── */ --ros-link: #b0b0b0; /* Couleur des liens au repos */ --ros-link-hover: #ffffff; /* Couleur des liens au survol */ /* ── FONDS ET BORDURES ─────────────────────────────────────── --ros-border : fines lignes de séparation entre les éléments --ros-bg-card : fond des vignettes de la collection Le fond global du site est défini séparément, section 3. ──────────────────────────────────────────────────────────── */ --ros-border: #2a2a2a; /* Bordures — séparateurs, contours cartes */ --ros-bg-card: #111111; /* Fond des cartes de la collection */ /* ── TYPOGRAPHIE ────────────────────────────────────────────── Modifiez --ros-font-size-base pour augmenter/réduire la taille globale. Toutes les autres tailles sont relatives à celle-ci. ──────────────────────────────────────────────────────────── */ --ros-font-size-base: 18px; /* Taille de base — corps de texte */ --ros-font-size-sm: 16px; /* Petite taille — notes, labels */ --ros-font-size-lg: 20px; /* Grande taille — textes importants */ --ros-font-size-title: 1.8em; /* Titre principal de page (h1) */ --ros-font-size-letter: 1.6em; /* Lettre de l'index A-Z */ /* ── ESPACEMENT ET FORMES ───────────────────────────────────── --ros-gap-grid : espace entre les vignettes de la grille --ros-radius-card : arrondi des coins des cartes de collection ──────────────────────────────────────────────────────────── */ --ros-gap-grid: 24px; /* Espace entre vignettes — augmenter pour aérer */ --ros-gap-section: 40px; /* Espace entre sections de la fiche minéral */ --ros-radius-card: 16px; /* Arrondi des cartes — 0 pour des coins carrés */ } /* ============================================================ 2. POLICE GLOBALE ============================================================ */ body .entry-content, body .entry-content p, body .entry-content li, body .ros-collection-name, body .ros-az-list li, body .ros-country-list li, body .ros-tax-description p, body .ros-mineral-meta, body .ros-meta-line, body .ros-label, body .ros-body-text, body .ros-collection-caption { font-size: 17px !important; } /* Taille des textes de liste — écrase Enfold */ #top nav, #top .main_menu { font-size: unset !important; } .breadcrumb, .breadcrumbs, .av-breadcrumb { font-size: unset !important; } footer, #footer { font-size: unset !important; } .ros-element, .ros-element * { font-size: unset !important; } /* ============================================================ 3. FOND SOMBRE Pour changer la couleur de fond de toutes les pages publiques, modifiez la valeur background ici (#0a0a0a = quasi-noir). La page My Collection a son propre fond (#111111) dans la section 19. ============================================================ */ body.single-mineral, body.page-template-page-full-collection, body.page-template-page-a-to-z, body.page-template-page-by-class, body.page-template-page-by-element, body.page-template-page-by-country, body.page-template-page-by-video, body.page-template-page-by-crystal-system { background: linear-gradient(to bottom, #222222 0%, #000000 100%) !important; background-attachment: fixed !important; } body.single-mineral .container_wrap, body.single-mineral #main, body.single-mineral #wrap_all, body.page-template-page-full-collection .container_wrap, body.page-template-page-full-collection #main, body.page-template-page-full-collection #wrap_all, body.page-template-page-a-to-z .container_wrap, body.page-template-page-a-to-z #main, body.page-template-page-a-to-z #wrap_all, body.page-template-page-by-class .container_wrap, body.page-template-page-by-class #main, body.page-template-page-by-class #wrap_all, body.page-template-page-by-element .container_wrap, body.page-template-page-by-element #main, body.page-template-page-by-element #wrap_all, body.page-template-page-by-country .container_wrap, body.page-template-page-by-country #main, body.page-template-page-by-country #wrap_all, body.page-template-page-by-video .container_wrap, body.page-template-page-by-video #main, body.page-template-page-by-video #wrap_all, body.page-template-page-by-crystal-system .container_wrap, body.page-template-page-by-crystal-system #main, body.page-template-page-by-crystal-system #wrap_all { background: transparent !important; } body.single-mineral .template-page.content.av-content-full, body.page-template-page-full-collection .template-page.content.av-content-full, body.page-template-page-a-to-z .template-page.content.av-content-full, body.page-template-page-by-class .template-page.content.av-content-full, body.page-template-page-by-element .template-page.content.av-content-full, body.page-template-page-by-country .template-page.content.av-content-full, body.page-template-page-by-video .template-page.content.av-content-full, body.page-template-page-by-crystal-system .template-page.content.av-content-full { border-right: none !important; } body.tax-mineral_element, body.tax-mineral_class, body.tax-mineral_country, body.tax-mineral_name { background: linear-gradient(to bottom, #222222 0%, #000000 100%) !important; background-attachment: fixed !important; } body.tax-mineral_element .container_wrap, body.tax-mineral_element #main, body.tax-mineral_element #wrap_all, body.tax-mineral_class .container_wrap, body.tax-mineral_class #main, body.tax-mineral_class #wrap_all, body.tax-mineral_country .container_wrap, body.tax-mineral_country #main, body.tax-mineral_country #wrap_all, body.tax-mineral_name .container_wrap, body.tax-mineral_name #main, body.tax-mineral_name #wrap_all { background: transparent !important; } body.tax-mineral_element .template-page.content.av-content-full, body.tax-mineral_class .template-page.content.av-content-full, body.tax-mineral_country .template-page.content.av-content-full, body.tax-mineral_name .template-page.content.av-content-full { border-right: none !important; } /* ============================================================ 4. TYPOGRAPHIE GÉNÉRALE ============================================================ */ .ros-mineral-single, .ros-collection-grid, .ros-az-grid, .ros-specimen-card { font-size: var(--ros-font-size-base); } /* ── CLASSES DE TYPOGRAPHIE CENTRALISÉES ──────────────────── Utiliser ces deux classes sur toutes les pages pour garantir une cohérence visuelle complète du site. .ros-section-title : titres de section (Strunz Classification, Crystal Systems, You might also like...) Modifier font-size pour la taille, color pour la couleur. .ros-body-text : textes descriptifs sous les titres. Modifier font-size pour la taille, color pour la couleur. ──────────────────────────────────────────────────────────── */ .ros-section-title { font-family: 'Lato', sans-serif; /* Police Enfold par défaut */ color: #aaaaaa !important; /* Gris liens — changer ici pour toutes les sections */ font-size: 32px !important; /* Taille fixe — indépendante du contexte parent. Modifier ici pour tous les titres de section */ font-weight: 300 !important; /* Lato Light — élégant sur fond sombre */ font-variant: small-caps !important; /* Petites capitales CSS */ letter-spacing: 0.08em; line-height: 1.3; margin-bottom: 12px; display: block; } .ros-body-text { color: #ffffff !important; /* Blanc — modifier ici pour tous les textes descriptifs */ font-size: 17px; /* Forcé à 17px par le bloc override ci-dessus */ line-height: 1.8; display: block; } /* ============================================================ 5. LIENS ============================================================ */ .ros-mineral-name { color: var(--ros-orange) !important; font-weight: normal !important; /* Pas de gras — la taille suffit à distinguer le nom */ font-size: 1.1em; text-decoration: underline !important; text-underline-offset: 3px !important; text-transform: capitalize; } .ros-mineral-name:hover { color: var(--ros-orange-light) !important; } .ros-mineral-line a:not(.ros-mineral-name), .ros-mineral-elements a, .ros-specimen-card p a { color: var(--ros-link) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .ros-mineral-line a:not(.ros-mineral-name):hover, .ros-mineral-elements a:hover, .ros-specimen-card p a:hover { color: var(--ros-link-hover) !important; } /* ============================================================ 6. LABELS ============================================================ */ .ros-label { color: var(--ros-orange); font-weight: normal; } /* ============================================================ 7. SLIDER DE PHOTOS ============================================================ */ .ros-slider { position: relative; background: #000; border-radius: 4px; overflow: hidden; } .ros-slide { display: none; } .ros-slide.active { display: block; } .ros-slide img { width: 100%; height: auto; display: block; } .ros-slide a { position: relative; display: block; text-decoration: none !important; } .ros-slide a:hover { text-decoration: none !important; } .ros-prev, .ros-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #fff; border: none; font-size: 30px; padding: 10px 16px; cursor: pointer; z-index: 10; transition: background 0.3s; } .ros-prev { left: 0; } .ros-next { right: 0; } .ros-prev:hover, .ros-next:hover { background: rgba(195, 81, 47, 0.7); } /* ← Changer 195,81,47 = rgb de --ros-orange */ .ros-dots { text-align: center; padding: 10px 0; background: #000; } .ros-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #555; margin: 0 4px; cursor: pointer; transition: background 0.3s; } .ros-dot.active { background: var(--ros-orange); } /* ============================================================ 8. FICHE MINÉRAL ============================================================ */ body.single-mineral .ros-two-columns { display: flex; gap: var(--ros-gap-section); align-items: flex-start; margin-bottom: var(--ros-gap-section); } body.single-mineral .ros-col-photos { flex: 0 0 40%; max-width: 40%; } body.single-mineral .ros-col-data { flex: 0 0 55%; max-width: 55%; } .ros-mineral-single .post-title, h1.post-title.ros-mineral-title, body.single-mineral h1.post-title { color: var(--ros-orange) !important; font-size: var(--ros-font-size-title) !important; margin-bottom: 20px; font-variant: small-caps !important; text-transform: lowercase !important; letter-spacing: 0.05em; } .ros-specimen-card p { margin-bottom: 8px; line-height: 1.6; color: var(--ros-text); font-size: var(--ros-font-size-base); } .ros-mineral-block { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ros-border); } .ros-mineral-block:last-child { border-bottom: none; margin-bottom: 8px; } .ros-mineral-line { color: var(--ros-text); line-height: 1.8; margin-bottom: 4px; font-size: var(--ros-font-size-base); } .ros-mineral-elements { color: var(--ros-text-dim); font-size: var(--ros-font-size-sm); margin-top: 3px; line-height: 1.5; } .ros-video { margin-top: 20px; display: flex; justify-content: center; } .ros-video iframe { width: 50%; height: auto; aspect-ratio: 16/9; border: none; } .ros-encyclopedic-text { border-top: 1px solid #333; padding-top: 30px; margin-top: 10px; color: var(--ros-text); font-size: var(--ros-font-size-base); } /* ============================================================ 9. GRILLE DE VIGNETTES La grille s'adapte automatiquement (auto-fill). minmax(200px, 1fr) = largeur minimum 200px, maximum = fraction disponible. Pour des vignettes plus grandes : augmenter 200px (ex: 250px). Pour des vignettes plus petites : diminuer (ex: 150px). L'espacement est contrôlé par --ros-gap-grid (section 1). ============================================================ */ /* ============================================================ SOUS-TITRE GALERIE — intro before the photo grid Displayed under the separator line on By Element, By Class, and By Crystal System detail pages. Pour modifier la taille : changer font-size. Pour modifier la couleur : changer color. ============================================================ */ .ros-gallery-intro { font-size: 0.85em; /* Discret — ne rivalise pas avec le titre principal */ color: #888; /* Gris moyen */ font-variant: small-caps; letter-spacing: 0.08em; margin-bottom: 24px; /* Espace avant la grille de photos */ } .ros-collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ros-gap-grid); margin: 30px 0; } .ros-collection-item { background: var(--ros-bg-card); border-radius: var(--ros-radius-card); overflow: hidden; } .ros-collection-item a { display: block; width: 100%; text-decoration: none !important; } .ros-collection-item img { width: 100%; height: auto; display: block; border-radius: var(--ros-radius-card) var(--ros-radius-card) 0 0; transition: transform 0.4s ease; } .ros-collection-item:hover img { transform: scale(1.05); } .ros-collection-item .image-overlay-inside { display: none !important; } .ros-collection-caption { padding: 10px 12px 12px; text-align: center; } .ros-collection-name { color: var(--ros-text); /* Couleur des titres de cartes — modifier ici ou changer --ros-text dans :root */ font-size: var(--ros-font-size-base); font-weight: normal; text-transform: capitalize; line-height: 1.4; } .ros-collection-item:hover .ros-collection-name { color: #ffffff; } .ros-collection-placeholder { width: 100%; padding: 40px 10px; display: flex; align-items: center; justify-content: center; color: #444; font-size: var(--ros-font-size-sm); text-align: center; } /* ============================================================ 10. PAGE A TO Z ============================================================ */ .ros-az-sticky { position: sticky; top: 0; z-index: 100; background: rgba(20, 20, 20, 0.95); border-bottom: 1px solid #333; padding: 14px 0; text-align: center; margin-bottom: var(--ros-gap-section); } .ros-az-sticky a { color: var(--ros-text) !important; text-decoration: none !important; font-size: var(--ros-font-size-base); padding: 0 14px; border-right: 1px solid #444; transition: color 0.2s; } .ros-az-sticky a:last-child { border-right: none; } .ros-az-sticky a:hover { color: var(--ros-orange) !important; } .ros-az-sticky a.ros-az-top { color: #888888 !important; font-size: var(--ros-font-size-sm); } .ros-az-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 30px; margin: 0 0 60px; } .ros-az-column { margin-bottom: var(--ros-gap-section); } .ros-az-letter { color: var(--ros-orange); font-size: var(--ros-font-size-letter); font-weight: bold; border-bottom: 1px solid #333; padding-bottom: 6px; margin-bottom: 12px; } .ros-az-list { list-style: none; margin: 0; padding: 0; } .ros-az-list li { margin-bottom: 8px; line-height: 1.5; } .ros-az-list a { color: var(--ros-text) !important; text-decoration: none !important; font-size: var(--ros-font-size-base); transition: color 0.2s; } .ros-az-list a:hover { color: #ffffff !important; text-decoration: underline !important; } /* ============================================================ 11. RESPONSIVE ============================================================ */ @media (max-width: 768px) { body.single-mineral .ros-two-columns { flex-direction: column; } body.single-mineral .ros-col-photos, body.single-mineral .ros-col-data { flex: 0 0 100%; max-width: 100%; } } @media (max-width: 900px) { .ros-collection-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (max-width: 600px) { .ros-collection-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 1024px) { .ros-az-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .ros-az-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .ros-az-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ 12. CONTRÔLES DE TRI ============================================================ */ .ros-sort-label { color: #cccccc; font-size: 0.85em; } /* ============================================================ 13. FIL D'ARIANE DYNAMIQUE ============================================================ */ .ros-breadcrumb { border-bottom: 1px solid #2a2a2a; padding: 8px 0; font-size: 0.85em; margin-bottom: 20px; } .ros-breadcrumb-inner { text-align: right; } body .ros-breadcrumb a, body .ros-breadcrumb a:link, body .ros-breadcrumb a:visited, body .ros-breadcrumb a:active { color: #aaaaaa !important; text-decoration: none !important; transition: color 0.2s; } body .ros-breadcrumb a:hover { color: #c3512f !important; } .ros-breadcrumb-sep { color: #555 !important; margin: 0 6px; } .ros-breadcrumb-current { color: #ffffff !important; } /* ============================================================ 14. GAP-FIX ENFOLD ============================================================ */ body.tax-mineral_class .breadcrumb_top, body.tax-mineral_element .breadcrumb_top, body.tax-mineral_country .breadcrumb_top, body.tax-mineral_name .breadcrumb_top, body.single-mineral .breadcrumb_top { display: none !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } body.tax-mineral_class .av_title_header, body.tax-mineral_element .av_title_header, body.tax-mineral_country .av_title_header, body.tax-mineral_name .av_title_header, body.single-mineral .av_title_header { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } body.tax-mineral_class .template-page, body.tax-mineral_element .template-page, body.tax-mineral_country .template-page, body.tax-mineral_name .template-page, body.single-mineral .template-page, body.tax-mineral_class .post-entry, body.tax-mineral_element .post-entry, body.tax-mineral_country .post-entry, body.tax-mineral_name .post-entry, body.single-mineral .post-entry, body.tax-mineral_class .entry-content-wrapper, body.tax-mineral_element .entry-content-wrapper, body.tax-mineral_country .entry-content-wrapper, body.tax-mineral_name .entry-content-wrapper, body.single-mineral .entry-content-wrapper { padding-top: 0 !important; margin-top: 0 !important; } body.page-template-page-by-class .container_wrap > .container, body.page-template-page-by-country .container_wrap > .container, body.page-template-page-by-video .container_wrap > .container, body.page-template-page-a-to-z .container_wrap > .container, body.page-template-page-full-collection .container_wrap > .container, body.page-template-page-by-crystal-system .container_wrap > .container, body.page-template-page-by-class .template-page.content, body.page-template-page-by-country .template-page.content, body.page-template-page-by-video .template-page.content, body.page-template-page-a-to-z .template-page.content, body.page-template-page-full-collection .template-page.content, body.page-template-page-by-crystal-system .template-page.content, body.page-template-page-by-class .post-entry, body.page-template-page-by-country .post-entry, body.page-template-page-by-video .post-entry, body.page-template-page-a-to-z .post-entry, body.page-template-page-full-collection .post-entry, body.page-template-page-by-crystal-system .post-entry, body.page-template-page-by-class .entry-content-wrapper, body.page-template-page-by-country .entry-content-wrapper, body.page-template-page-by-video .entry-content-wrapper, body.page-template-page-a-to-z .entry-content-wrapper, body.page-template-page-full-collection .entry-content-wrapper, body.page-template-page-by-crystal-system .entry-content-wrapper { padding-top: 0 !important; margin-top: 0 !important; } body.page-template-page-by-class #main, body.page-template-page-by-country #main, body.page-template-page-by-video #main, body.page-template-page-a-to-z #main, body.page-template-page-full-collection #main, body.page-template-page-by-crystal-system #main, body.tax-mineral_class #main, body.tax-mineral_element #main, body.tax-mineral_country #main, body.tax-mineral_name #main, body.single-mineral #main { margin-top: -40px !important; } .ros-bc-slim, .ros-bc-slim > .container, .ros-bc-slim .template-page, .ros-bc-slim .post-entry, .ros-bc-slim .entry-content-wrapper { padding-top: 0 !important; margin-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } .ros-bc-slim .ros-breadcrumb { margin-bottom: 0; } /* ============================================================ 15. TABLEAU PÉRIODIQUE (By Element) ============================================================ */ .ros-periodic-outer { width: 100%; padding: 5px 130px 5px; box-sizing: border-box; } /* ============================================================ 16. PAGES TAXONOMIE ============================================================ */ .ros-tax-header { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #333; } .ros-tax-title { color: #c3512f; font-size: 1.8em; font-variant: small-caps; letter-spacing: 0.05em; margin-bottom: 4px; } h1.ros-tax-title { color: #c3512f !important; font-family: inherit !important; font-variant: small-caps !important; font-size: 1.8em !important; letter-spacing: 0.05em !important; } /* !important nécessaire — Enfold écrase police et font-variant sur les h1 */ /* ============================================================ CLASSE PARTAGÉE : TITRE PRINCIPAL DES SOUS-SECTIONS Appliquée à Crystal System, By Class et By Element. Gère police, taille et mise en forme — PAS la couleur. La couleur est injectée en style inline sur chaque page. ============================================================ */ .ros-main-title { font-family: inherit !important; font-size: 1.8em !important; font-variant: small-caps !important; font-weight: inherit !important; letter-spacing: 0.05em !important; line-height: 1.2 !important; text-transform: none !important; margin-bottom: 4px; } /* Sélecteur plus spécifique pour les h1 — Enfold écrase font-variant sur h1 avec une règle plus lourde */ body h1.ros-main-title { font-variant: small-caps !important; font-family: inherit !important; font-size: 1.8em !important; letter-spacing: 0.05em !important; } .ros-tax-subtitle { color: #888888; font-size: 1em; font-style: italic; margin-top: 4px; margin-bottom: 20px; letter-spacing: 0.03em; } .ros-tax-symbol { color: #888; font-size: 1.1em; font-style: italic; margin-bottom: 8px; } .ros-tax-count { color: #888; font-size: 0.9em; margin-bottom: 20px; } .ros-tax-description { color: var(--ros-text); font-size: 16px; line-height: 1.8; } .ros-tax-description p { margin-bottom: 14px; font-size: 16px; } .ros-tax-description strong { color: #ffffff; } .ros-tax-description h2 { color: #c3512f; font-size: 1.2em; margin: 20px 0 10px; } .ros-tax-description h3 { color: #c3512f; font-size: 1.05em; margin: 16px 0 8px; } /* ============================================================ 17. MY FAVORITES ============================================================ */ body.page-template-page-my-favorites { background: linear-gradient(to bottom, #222222 0%, #000000 100%) !important; background-attachment: fixed !important; } body.page-template-page-my-favorites .container_wrap, body.page-template-page-my-favorites #main, body.page-template-page-my-favorites #wrap_all { background: transparent !important; } body.page-template-page-my-favorites .template-page.content.av-content-full { border-right: none !important; } body.page-template-page-my-favorites .container_wrap > .container, body.page-template-page-my-favorites .template-page.content, body.page-template-page-my-favorites .post-entry, body.page-template-page-my-favorites .entry-content-wrapper { padding-top: 0 !important; margin-top: 0 !important; } body.page-template-page-my-favorites #main { margin-top: -40px !important; } /* ============================================================ 18. LIGNES COMPACTES — FICHE MINÉRAL ============================================================ */ .ros-specimen-meta { margin-bottom: 16px; } .ros-meta-line { display: block; color: var(--ros-text); font-size: var(--ros-font-size-base); line-height: 1.7; } .ros-mineral-meta { color: var(--ros-text-dim); font-size: 0.9em; line-height: 1.6; margin-top: 2px; } .ros-mineral-meta a, .ros-meta-line a, .ros-mineral-elements a { color: #aaaaaa !important; text-decoration: underline !important; } .ros-mineral-meta a:hover, .ros-meta-line a:hover, .ros-mineral-elements a:hover { color: #ffffff !important; } /* ============================================================ 19. MY COLLECTION (page-client.php) ============================================================ */ body.page-template-page-client #main { margin-top: -40px !important; } body.page-template-page-client .container_wrap > .container, body.page-template-page-client .template-page.content, body.page-template-page-client .post-entry, body.page-template-page-client .entry-content-wrapper { padding-top: 0 !important; margin-top: 0 !important; } /* ============================================================ 20. BADGE CADENAS — MINÉRAUX PRIVÉS ============================================================ */ .ros-collection-item { position: relative; } .ros-private-badge { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); border-radius: 6px; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; } .ros-private-badge svg { width: 14px; height: 14px; fill: #c3512f; opacity: 0.9; } /* ============================================================ 21. RECHERCHE DANS LE FIL D'ARIANE ============================================================ */ .ros-search-toggle { background: none; border: none; padding: 0 0 0 12px; cursor: pointer; color: #555; display: inline-flex; align-items: center; vertical-align: middle; transition: color 0.2s; line-height: 1; } .ros-search-toggle:hover { color: #c3512f; } .ros-search-toggle svg { width: 14px; height: 14px; display: block; } .ros-search-wrap { display: none; position: relative; margin-top: 6px; text-align: right; } .ros-search-wrap.open { display: block; } .ros-search-input { background: #111; border: 1px solid #333; border-radius: 4px; color: #cccccc; font-size: 0.85em; padding: 6px 12px; width: 260px; outline: none; transition: border-color 0.2s; } .ros-search-input:focus { border-color: #c3512f; } .ros-search-input::placeholder { color: #444; } .ros-search-results { display: none; position: absolute; right: 0; top: calc(100% + 4px); width: 300px; background: #111; border: 1px solid #2a2a2a; border-radius: 6px; overflow: hidden; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,0.6); } .ros-search-results.has-results { display: block; } .ros-search-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none !important; color: #cccccc !important; border-bottom: 1px solid #1a1a1a; transition: background 0.15s; font-size: 0.88em; } .ros-search-item:last-child { border-bottom: none; } .ros-search-item:hover { background: #1a1a1a; color: #ffffff !important; } .ros-search-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; flex-shrink: 0; display: block; } .ros-search-nophoto { width: 40px; height: 40px; background: #1a1a1a; border-radius: 3px; flex-shrink: 0; display: block; } .ros-search-empty { padding: 12px; color: #444; font-size: 0.85em; text-align: center; } /* ============================================================ FOND PLEINE HAUTEUR Garantit que le dégradé de fond remplit toujours au moins toute la hauteur de la fenêtre. Ne touche pas au positionnement du footer. ============================================================ */ #wrap_all { min-height: 100vh; } /* ============================================================ FILTRE COULEUR / TRANSPARENCE — PAGES TAXONOMIE Utilisé dans taxonomy-mineral_class, mineral_element, mineral_country, mineral_name. Le même filtre apparaît sur toutes les pages taxonomie via la fonction PHP ros_render_color_filter(). ============================================================ */ /* Conteneur du filtre taxonomie — centré, sans cadre */ .ros-tax-color-filter { margin: 8px auto 12px; text-align: center; } /* Barre inline — même style que Full Collection */ .ros-tax-filter-bar { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; padding: 6px 0; font-size: 1em; } /* Label "Filter by:" */ .ros-tax-filter-prefix { color: #555; font-size: 1em; letter-spacing: 0.04em; margin-right: 10px; } /* Boutons texte inline */ .ros-tax-filter-btn { background: none; border: none; color: #888; font-size: 1em; cursor: pointer; padding: 3px 0; transition: color 0.2s; white-space: nowrap; } .ros-tax-filter-btn:hover { color: #cccccc; } .ros-tax-filter-btn.panel-open { color: #c3512f; text-decoration: underline; text-underline-offset: 3px; } .ros-tax-filter-btn.filter-active { color: #c3512f; } /* Séparateurs */ .ros-tax-dot { color: #333; padding: 0 8px; pointer-events: none; user-select: none; } .ros-tax-vline { color: #2a2a2a; padding: 0 14px; pointer-events: none; user-select: none; } /* Compteur + reset */ .ros-tax-filter-count { color: #555; font-size: 0.85em; margin-left: 10px; } .ros-tax-filter-reset { background: none; border: none; color: #444; font-size: 0.85em; cursor: pointer; padding: 0; margin-left: 8px; transition: color 0.2s; } .ros-tax-filter-reset:hover { color: #c3512f; } /* Panneaux accordéon — cachés par défaut, flex centré quand open */ .ros-tax-filter-panel { display: none; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 10px; } .ros-tax-filter-panel.open { display: flex; } /* Pills couleur dans le filtre taxonomie */ .ros-tax-color-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 20px; border: 1px solid #2a2a2a; background: #0d0d0d; color: #555; font-size: 0.8em; cursor: pointer; transition: all 0.15s; } .ros-tax-color-pill:hover { border-color: #444; color: #aaa; } /* Pill sélectionnée — orange */ .ros-tax-color-pill.active { background: #1a0d08; border-color: #c3512f; color: #c3512f; } /* Pills transparence dans le filtre taxonomie */ .ros-tax-trans-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 20px; border: 1px solid #2a2a2a; background: #0d0d0d; color: #555; font-size: 0.8em; cursor: pointer; transition: all 0.15s; } .ros-tax-trans-pill:hover { border-color: #444; color: #aaa; } /* Pill sélectionnée — bleu */ .ros-tax-trans-pill.active { background: #0d1520; border-color: #4a7aaa; color: #7aaadd; } /* Carte specimen cachée par le filtre */ .ros-collection-item.ros-hidden-by-filter { display: none !important; } https://rock-of-science.org/page-sitemap.xml 2026-05-23T12:33:01+00:00