/** * Author Directory Styles * Place at: /wp-content/themes/smartmag-child/css/author-directory.css * * FONT INHERITANCE: * SmartMag sets global typography via Customizer → Typography. * The --smartmag-heading-font and --smartmag-body-font CSS variables * are set on :root by the theme. We reference these so the directory * always matches your site's configured fonts. * * Fallback: if the CSS vars aren't available (older SmartMag versions), * we inherit from body { font-family } which SmartMag also controls. */ /* ── Tokens ── */ .fs-author-directory { --fs-black: #1a1a1a; --fs-dark: #2c2c2c; --fs-charcoal: #3d3d3d; --fs-mid: #6b6b6b; --fs-warm-gray: #8a8279; --fs-border: #d4cfc7; --fs-light: #ece8e1; --fs-cream: #f5f2ec; --fs-off-white: #faf8f5; --fs-white: #ffffff; --fs-green: #2e5a3a; --fs-green-light: #3a7249; --fs-rust: #a0522d; --fs-gold: #b8933a; /* * Font inheritance from SmartMag. * SmartMag 10.x uses --ts-heading-ff and --ts-body-ff. * Older versions use inline styles on . Either way, * 'inherit' will pick up the theme's body font. */ --fs-ad-heading-font: var(--ts-heading-ff, inherit); --fs-ad-body-font: var(--ts-body-ff, inherit); } /* ── Reset scope ── */ .fs-author-directory *, .fs-author-directory *::before, .fs-author-directory *::after { box-sizing: border-box; } /* ══════════════════════════════════════════════ HERO ══════════════════════════════════════════════ */ .fs-ad-hero { background: var(--fs-black); color: var(--fs-cream); padding: 52px 0 48px; text-align: center; position: relative; overflow: hidden; } .fs-ad-hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 39px, rgba(255,255,255,.03) 39px, rgba(255,255,255,.03) 40px ); pointer-events: none; } .fs-ad-hero__inner { position: relative; max-width: 800px; margin: 0 auto; padding: 0 24px; } .fs-ad-hero__logo { display: block; max-width: 420px; width: 80%; height: auto; margin: 0 auto 28px; } .fs-ad-hero__divider { width: 48px; height: 1px; background: rgba(184,147,58,.5); margin: 0 auto 24px; } .fs-ad-hero__title { font-family: var(--fs-ad-heading-font); font-size: clamp(24px, 4vw, 38px); font-weight: 700; line-height: 1.2; margin: 0 0 14px; letter-spacing: -0.3px; color: var(--fs-cream); } .fs-ad-hero__desc { font-family: var(--fs-ad-body-font); font-size: 16px; line-height: 1.65; color: rgba(236,232,225,.6); max-width: 480px; margin: 0 auto; font-weight: 300; } /* ══════════════════════════════════════════════ STICKY TOOLBAR ══════════════════════════════════════════════ */ .fs-ad-toolbar { background: var(--fs-white); border-bottom: 1px solid var(--fs-border); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0,0,0,.06); } /* Account for SmartMag's sticky header if present */ .smartmag-sticky-active .fs-ad-toolbar, .admin-bar .fs-ad-toolbar { /* SmartMag sticky header height varies; adjust if needed */ } .fs-ad-toolbar__inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; /* Added 16px vertical padding */ display: flex; align-items: center; gap: 20px; /* Increased from 16px */ min-height: 56px; flex-wrap: wrap; justify-content: center; /* Centers the top row */ } /* ── Search ── */ .fs-ad-search { position: relative; flex: 0 1 320px; min-width: 200px; } .fs-ad-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--fs-warm-gray); pointer-events: none; } .fs-ad-search input { width: 100%; padding: 10px 14px 10px 40px; border: 1px solid var(--fs-border); border-radius: 6px; font-family: var(--fs-ad-body-font); font-size: 14px; color: var(--fs-dark); background: var(--fs-off-white); transition: border-color .2s, box-shadow .2s; outline: none; } .fs-ad-search input:focus { border-color: var(--fs-green); box-shadow: 0 0 0 3px rgba(46,90,58,.1); background: var(--fs-white); } .fs-ad-search input::placeholder { color: var(--fs-warm-gray); } /* ── Category Filters ── */ .fs-ad-filters { display: flex; align-items: center; gap: 10px; /* Increased from 6px */ flex-wrap: wrap; justify-content: center; } .fs-ad-filter-btn { padding: 6px 14px; border: 1px solid var(--fs-border); border-radius: 20px; background: transparent; font-family: var(--fs-ad-body-font); font-size: 13px; font-weight: 500; color: var(--fs-mid); cursor: pointer; transition: all .2s; white-space: nowrap; line-height: 1.4; } .fs-ad-filter-btn:hover { border-color: var(--fs-charcoal); color: var(--fs-dark); } .fs-ad-filter-btn.active { background: var(--fs-green); border-color: var(--fs-green); color: var(--fs-white); } /* ── Alpha Nav ── */ .fs-ad-alpha-nav { margin: 10px auto 0; /* Centers it and adds 10px gap above */ display: flex; align-items: center; justify-content: center; /* Centers the alphabet */ gap: 4px; /* Increased letter spacing from 1px */ flex-shrink: 0; width: 100%; /* Forces the A-Z to its own dedicated row */ flex-wrap: wrap; /* Keeps it safe on smaller tablets */ } .fs-ad-alpha-nav button { width: 32px; /* Increased from 28px */ height: 32px; /* Increased from 28px */ border: none; background: transparent; font-family: var(--fs-ad-body-font); font-size: 14px; /* Increased from 12px */ font-weight: 600; color: var(--fs-mid); cursor: pointer; border-radius: 4px; transition: all .15s; padding: 0; line-height: 32px; /* Match new height */ } .fs-ad-alpha-nav button:hover { background: var(--fs-cream); color: var(--fs-dark); } .fs-ad-alpha-nav button.active { background: var(--fs-green); color: var(--fs-white); } .fs-ad-alpha-nav button.disabled { color: var(--fs-border); cursor: default; pointer-events: none; } /* ══════════════════════════════════════════════ DIRECTORY GRID ══════════════════════════════════════════════ */ .fs-ad-directory { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; } .fs-ad-results-count { font-family: var(--fs-ad-body-font); font-size: 13px; color: var(--fs-warm-gray); margin-bottom: 28px; font-weight: 400; } .fs-ad-results-count strong { color: var(--fs-dark); font-weight: 600; } /* ── Letter Section ── */ .fs-ad-letter-section { margin-bottom: 40px; } .fs-ad-letter-heading { font-family: var(--fs-ad-heading-font); font-size: 28px; font-weight: 700; color: var(--fs-green); padding-bottom: 10px; border-bottom: 2px solid var(--fs-green); margin-bottom: 20px; display: inline-block; min-width: 44px; text-align: center; } .fs-ad-authors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } /* ── Author Card ── */ .fs-ad-author-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--fs-white); border: 1px solid transparent; border-radius: 8px; text-decoration: none; color: inherit; transition: all .2s; cursor: pointer; } .fs-ad-author-card:hover { border-color: var(--fs-border); box-shadow: 0 2px 12px rgba(0,0,0,.06); transform: translateY(-1px); text-decoration: none; color: inherit; } .fs-ad-author-card:hover .fs-ad-author-name { color: var(--fs-green); } .fs-ad-author-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--fs-cream); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fs-ad-heading-font); font-size: 18px; font-weight: 700; color: var(--fs-green); overflow: hidden; } .fs-ad-author-avatar img { width: 100%; height: 100%; object-fit: cover; } .fs-ad-author-info { min-width: 0; flex: 1; } .fs-ad-author-name { font-family: var(--fs-ad-heading-font); font-size: 15px; font-weight: 600; color: var(--fs-black); transition: color .2s; line-height: 1.3; } .fs-ad-author-role { font-family: var(--fs-ad-body-font); font-size: 12.5px; color: var(--fs-warm-gray); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Search highlight */ .fs-ad-author-name mark { background: rgba(46,90,58,.12); color: inherit; padding: 0 1px; border-radius: 2px; } /* ── Empty State ── */ .fs-ad-empty-state { text-align: center; padding: 64px 24px; } .fs-ad-empty-state svg { width: 48px; height: 48px; color: var(--fs-border); margin-bottom: 16px; } .fs-ad-empty-state h3 { font-family: var(--fs-ad-heading-font); font-size: 20px; color: var(--fs-dark); margin: 0 0 8px; } .fs-ad-empty-state p { font-family: var(--fs-ad-body-font); font-size: 14px; color: var(--fs-warm-gray); margin: 0; } /* ══════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════ */ @media (max-width: 768px) { .fs-ad-hero { padding: 40px 0 36px; } .fs-ad-hero__logo { max-width: 280px; margin-bottom: 20px; } .fs-ad-toolbar__inner { padding: 12px 16px; flex-direction: column; align-items: stretch; gap: 10px; } .fs-ad-search { flex: 1 1 100%; min-width: 0; } .fs-ad-filters { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .fs-ad-filters::-webkit-scrollbar { display: none; } .fs-ad-alpha-nav { margin-left: 0; justify-content: center; flex-wrap: wrap; } .fs-ad-alpha-nav button { width: 26px; height: 26px; font-size: 11px; line-height: 26px; } .fs-ad-authors-grid { grid-template-columns: 1fr; } .fs-ad-directory { padding: 24px 16px 60px; } } @media (min-width: 769px) and (max-width: 1024px) { .fs-ad-authors-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } /* ══════════════════════════════════════════════ DARK MODE COMPATIBILITY SmartMag dark mode adds .dark-skin to . ══════════════════════════════════════════════ */ .dark-skin .fs-ad-toolbar { background: #1e1e1e; border-bottom-color: #333; } .dark-skin .fs-ad-search input { background: #2a2a2a; border-color: #444; color: #e0e0e0; } .dark-skin .fs-ad-filter-btn { border-color: #444; color: #999; } .dark-skin .fs-ad-filter-btn:hover { border-color: #666; color: #ddd; } .dark-skin .fs-ad-filter-btn.active { background: var(--fs-green); border-color: var(--fs-green); color: #fff; } .dark-skin .fs-ad-alpha-nav button { color: #777; } .dark-skin .fs-ad-alpha-nav button:hover { background: #333; color: #ddd; } .dark-skin .fs-ad-directory { background: transparent; } .dark-skin .fs-ad-author-card { background: #1e1e1e; } .dark-skin .fs-ad-author-card:hover { border-color: #444; box-shadow: 0 2px 12px rgba(0,0,0,.3); } .dark-skin .fs-ad-author-name { color: #e0e0e0; } .dark-skin .fs-ad-author-avatar { background: #2a2a2a; } .dark-skin .fs-ad-results-count { color: #777; } .dark-skin .fs-ad-results-count strong { color: #ccc; }