/* ========================================================================== Featured Media and Publications Drop in: assets/css/featured_media.css Pairs with: network_card.css, stats_counter.css Typography is inherited from the theme. No font-family is declared anywhere in this file on purpose. ========================================================================== */ .fm-section { --fm-surface: #ffffff; --fm-surface-hover: #fafbfc; --fm-border: #e3e6ec; --fm-border-hover: #c3cad6; --fm-title: #1f2430; --fm-meta: #6b7280; --fm-kind: #8a919e; --fm-chip-border: #dfe3ea; --fm-chip-text: #4b5563; --fm-link: var(--color-primary, var(--primary, #2962ff)); --fm-arrow-bg: #eef2fb; margin-top: 0.9rem; margin-bottom: -0.8rem; } /* Wowchemy toggles dark mode with a class on or . */ html.dark .fm-section, body.dark .fm-section, [data-theme='dark'] .fm-section { --fm-surface: #1e2129; --fm-surface-hover: #242832; --fm-border: #333945; --fm-border-hover: #4d5666; --fm-title: #eaecf1; --fm-meta: #9aa3b2; --fm-kind: #7e8798; --fm-chip-border: #3a4150; --fm-chip-text: #b3bac6; --fm-link: var(--color-primary, var(--primary, #6ea8ff)); --fm-arrow-bg: #2a3040; } /* ----------------------------------------------------------- disclosure */ .fm-details { border: 1px solid var(--fm-border); border-radius: 14px; background: var(--fm-surface); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .fm-details:not([open]):hover { transform: translateY(-2px); border-color: var(--fm-border-hover); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.09); } html.dark .fm-details:not([open]):hover, body.dark .fm-details:not([open]):hover, [data-theme='dark'] .fm-details:not([open]):hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38); } .fm-summary { display: flex; align-items: center; gap: 1.35rem; padding: 1.75rem 1.75rem; cursor: pointer; list-style: none; user-select: none; border-radius: 14px; } /* Hide the native disclosure triangle. */ .fm-summary::-webkit-details-marker { display: none; } .fm-summary::marker { content: ''; } .fm-summary:focus-visible { outline: 2px solid var(--fm-link); outline-offset: 3px; } /* ---- icon tile ---- */ .fm-summary-icon { flex: 0 0 auto; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 15px; background: var(--fm-link); color: #fff; font-size: 1.6rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .fm-summary:hover .fm-summary-icon { transform: scale(1.06) rotate(-4deg); box-shadow: 0 4px 12px rgba(41, 98, 255, 0.35); } /* ---- text ---- */ .fm-summary-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .fm-summary-title { font-size: 1.4rem; font-weight: 700; line-height: 1.3; color: var(--fm-title); transition: color 0.15s ease; } .fm-summary:hover .fm-summary-title { color: var(--fm-link); } .fm-summary-sub { font-size: 0.98rem; line-height: 1.4; color: var(--fm-meta); } /* ---- count ---- */ .fm-summary-count { flex: 0 0 auto; margin-left: auto; font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--fm-meta); border: 1px solid var(--fm-chip-border); border-radius: 999px; padding: 0.28rem 0.6rem; transition: color 0.2s ease, border-color 0.2s ease; } .fm-summary:hover .fm-summary-count { color: var(--fm-link); border-color: currentColor; } /* ---- arrow ---- */ .fm-summary-arrow { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fm-arrow-bg, #eef2fb); color: var(--fm-link); font-size: 0.95rem; transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease; } .fm-summary:hover .fm-summary-arrow { background: var(--fm-link); color: #fff; } .fm-details[open] .fm-summary-arrow { transform: rotate(180deg); } /* ---- open state ---- */ .fm-details[open] .fm-summary { border-bottom: 1px solid var(--fm-border); border-radius: 12px 12px 0 0; } .fm-panel { padding: 1.4rem 1.75rem 1.6rem; } .fm-details .fm-card { background: transparent; } .fm-details .fm-card:hover { background: var(--fm-surface-hover); } @media (max-width: 575.98px) { .fm-summary { gap: 0.85rem; padding: 1.05rem 1.05rem; } .fm-panel { padding: 1rem 1.05rem 1.15rem; } .fm-summary-icon { width: 46px; height: 46px; font-size: 1.15rem; } .fm-summary-title { font-size: 1.08rem; } .fm-summary-sub, .fm-summary-count { display: none; } .fm-summary-arrow { margin-left: auto; } } /* -------------------------------------------------------------- filters */ .fm-section .fm-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.15rem; padding: 0; list-style: none; } .fm-section .fm-filters>li { list-style: none; margin: 0; padding: 0; } .fm-section .fm-filter { font-size: 0.78rem; line-height: 1; color: var(--fm-chip-text); background: transparent; border: 1px solid var(--fm-chip-border); border-radius: 999px; padding: 0.42rem 0.85rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .fm-section .fm-filter:hover { color: var(--fm-link); border-color: currentColor; } .fm-section .fm-filter[aria-pressed='true'] { color: #fff; background: var(--fm-link); border-color: var(--fm-link); } .fm-section .fm-filter:focus-visible { outline: 2px solid var(--fm-link); outline-offset: 2px; } .fm-card[hidden] { display: none; } .fm-empty { margin: 0.5rem 0 0.75rem; font-size: 0.88rem; color: var(--fm-meta); } .fm-empty[hidden] { display: none; } /* ------------------------------------------------------------------ grid */ .fm-section .fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } .fm-section .fm-card { display: flex; flex-direction: column; gap: 0.5rem; background: var(--fm-surface); border: 1px solid var(--fm-border); border-radius: 11px; padding: 1.4rem 1.45rem 1.3rem; transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; } .fm-section .fm-card:hover { transform: translateY(-2px); background: var(--fm-surface-hover); border-color: var(--fm-border-hover); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07); } html.dark .fm-card:hover, body.dark .fm-card:hover, [data-theme='dark'] .fm-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32); } /* --------------------------------------------------------- card contents */ .fm-kind { margin-bottom: 0.1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fm-kind); } .fm-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; } .fm-title a { color: var(--fm-title); text-decoration: none; transition: color 0.15s ease; } .fm-card:hover .fm-title a, .fm-title a:hover { color: var(--fm-link); text-decoration: none; } .fm-meta { margin: 0; font-size: 0.82rem; line-height: 1.4; color: var(--fm-meta); } /* ------------------------------------------------------------ link chips */ /* Reset only the list chrome. Padding is owned by .fm-card and .fm-links a, and setting it here would outrank those rules. */ .fm-section .fm-grid>li, .fm-section .fm-links>li { list-style: none; margin: 0; } .fm-section .fm-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.45rem 0 0; padding: 0; list-style: none; } .fm-links a { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.76rem; line-height: 1; color: var(--fm-chip-text); text-decoration: none; border: 1px solid var(--fm-chip-border); border-radius: 999px; padding: 0.32rem 0.65rem; transition: color 0.15s ease, border-color 0.15s ease; } .fm-links a:hover { color: var(--fm-link); border-color: currentColor; text-decoration: none; } .fm-links i { font-size: 0.82em; } /* ------------------------------------------------------------ responsive */ @media (max-width: 575.98px) { .fm-grid { grid-template-columns: 1fr; } .fm-section .fm-card { padding: 1.15rem 1.2rem 1.1rem; } .fm-title { font-size: 0.95rem; } } @media (prefers-reduced-motion: reduce) { .fm-card, .fm-card:hover, .fm-title a, .fm-details, .fm-details:not([open]):hover, .fm-summary-icon, .fm-summary-arrow, .fm-filter, .fm-links a { transition: none; transform: none; } }