/* ============================================================================= CollectiblesFamous — Refresh Stylesheet v2 Locked: 2026-04-20 Scope: All scoped under .cf-refresh (body class) to avoid collisions ============================================================================= */ /* ----- Design tokens ----- */ .cf-refresh { /* Brand foundation */ --cf-brand-green: #1B4332; --cf-brand-green-dark: #122B21; --cf-brand-green-darker: #0B1F17; --cf-brand-gold: #B8872A; --cf-brand-gold-dark: #96701D; --cf-featured-bg: #FFFDF8; /* Default accent (homepage + non-hub pages fall back to brand green) */ --cf-accent: var(--cf-brand-green); --cf-accent-soft: rgba(27,67,50,0.08); /* Surfaces */ --cf-bg: #faf9f6; --cf-surface: #ffffff; --cf-surface-warm: #FFFDF8; --cf-border: #e2d9c8; --cf-border-soft: #ede6d4; /* Text */ --cf-text: #1a1a1a; --cf-text-body: #3a3a38; --cf-text-muted: #8C7B5E; --cf-text-strong-muted: #5C4A30; --cf-text-inverse: #F7F3EC; /* Typography */ --cf-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --cf-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --cf-mono: 'IBM Plex Mono', 'Consolas', monospace; /* Layout */ --cf-max-width: 1200px; --cf-max-width-narrow: 860px; --cf-radius: 6px; --cf-radius-lg: 8px; } /* ----- Hub theme classes (apply on ) ----- */ .cf-theme-sports-cards { --cf-accent: #2c7c5a; --cf-accent-soft: rgba(44,124,90,0.08); } .cf-theme-trading-cards { --cf-accent: #0ea5e9; --cf-accent-soft: rgba(14,165,233,0.08); } .cf-theme-coins { --cf-accent: #1a1a1a; --cf-accent-soft: rgba(26,26,26,0.08); } .cf-theme-stamps { --cf-accent: #8B2626; --cf-accent-soft: rgba(139,38,38,0.08); } .cf-theme-toys { --cf-accent: #6b4a82; --cf-accent-soft: rgba(107,74,130,0.08); } .cf-theme-comics { --cf-accent: #c8341f; --cf-accent-soft: rgba(200,52,31,0.08); } .cf-theme-antiques-art { --cf-accent: #6B7A3F; --cf-accent-soft: rgba(107,122,63,0.08); } .cf-theme-memorabilia { --cf-accent: #92400e; --cf-accent-soft: rgba(146,64,14,0.08); } .cf-theme-vintage { --cf-accent: #78543c; --cf-accent-soft: rgba(120,84,60,0.08); } .cf-theme-sneakers { --cf-accent: #ff6b1a; --cf-accent-soft: rgba(255,107,26,0.08); } .cf-theme-jewelry { --cf-accent: #b83260; --cf-accent-soft: rgba(184,50,96,0.08); } .cf-theme-watches { --cf-accent: #0F2A4A; --cf-accent-soft: rgba(15,42,74,0.08); } /* ============================================================================= Base + resets ============================================================================= */ .cf-refresh * { box-sizing: border-box; } .cf-refresh { margin: 0; padding: 0; font-family: var(--cf-sans); background: var(--cf-bg); color: var(--cf-text); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cf-refresh a { color: var(--cf-brand-green); text-decoration: none; } .cf-refresh a:hover { color: var(--cf-brand-gold); } .cf-refresh img { max-width: 100%; height: auto; } /* ============================================================================= Navigation ============================================================================= */ .cf-nav { background: var(--cf-bg); border-bottom: 1px solid var(--cf-border); position: sticky; top: 0; z-index: 100; } .cf-nav-inner { max-width: var(--cf-max-width); margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .cf-wordmark { font-family: var(--cf-serif); font-size: 22px; font-weight: 600; color: var(--cf-text); letter-spacing: -0.01em; text-decoration: none; } .cf-wordmark em { font-style: italic; color: var(--cf-brand-green); font-weight: 500; } .cf-nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .cf-nav-links > li { position: relative; } .cf-nav-links a { font-family: var(--cf-sans); font-size: 14px; font-weight: 500; color: var(--cf-text); text-decoration: none; padding: 6px 0; transition: color 0.15s; display: inline-flex; align-items: center; gap: 4px; } .cf-nav-links a:hover { color: var(--cf-brand-gold); } .cf-nav-links .caret { font-size: 9px; color: var(--cf-text-muted); transition: transform 0.15s; } /* Nav dropdown (Daily Brief) */ .cf-nav-dropdown { display: none; position: absolute; top: 100%; left: -8px; background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 8px 0; min-width: 180px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); z-index: 110; } .cf-nav-links > li:hover .cf-nav-dropdown, .cf-nav-links > li:focus-within .cf-nav-dropdown { display: block; } .cf-nav-dropdown a { display: block; padding: 8px 18px; font-size: 13px; color: var(--cf-text-body); } .cf-nav-dropdown a:hover { background: var(--cf-bg); color: var(--cf-brand-gold); } .cf-nav-cta { background: var(--cf-text); color: #fff !important; padding: 9px 18px; border-radius: 4px; font-weight: 600 !important; font-size: 13px !important; transition: background 0.15s; } .cf-nav-cta:hover { background: var(--cf-brand-green) !important; color: #fff !important; } /* ============================================================================= Pill bar (category filter row) ============================================================================= */ .cf-pillbar-wrap { background: var(--cf-bg); border-bottom: 1px solid var(--cf-border-soft); } .cf-pillbar { max-width: var(--cf-max-width); margin: 0 auto; padding: 14px 24px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .cf-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--cf-sans); font-size: 12.5px; font-weight: 500; padding: 6px 14px; border-radius: 20px; background: transparent; color: var(--cf-text-body); border: 1px solid var(--cf-border); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .cf-pill:hover { background: var(--cf-accent-soft); color: var(--cf-text); border-color: var(--cf-accent); } .cf-pill.active { background: var(--cf-accent); color: #fff; border-color: var(--cf-accent); font-weight: 600; } .cf-pill .caret { font-size: 8px; opacity: 0.6; } /* Dropdown variant (Memorabilia / Vintage with subcategories) */ .cf-pill-drop { position: relative; } .cf-pill-drop-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 6px 0; min-width: 180px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); z-index: 90; } .cf-pill-drop:hover .cf-pill-drop-menu, .cf-pill-drop:focus-within .cf-pill-drop-menu { display: block; } .cf-pill-drop-menu a { display: block; padding: 7px 16px; font-size: 13px; color: var(--cf-text-body); text-decoration: none; } .cf-pill-drop-menu a:hover { background: var(--cf-accent-soft); color: var(--cf-accent); } /* ============================================================================= Page layout — main container ============================================================================= */ .cf-page { max-width: var(--cf-max-width); margin: 0 auto; padding: 40px 24px 72px; } .cf-page-hub { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; } .cf-page-narrow { max-width: var(--cf-max-width-narrow); margin: 0 auto; padding: 40px 24px 72px; } /* ============================================================================= Hero + page headers ============================================================================= */ .cf-hero { padding: 28px 0 32px; border-bottom: 1px solid var(--cf-border-soft); margin-bottom: 32px; } .cf-eyebrow { font-family: var(--cf-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cf-brand-gold); margin-bottom: 14px; font-weight: 600; } .cf-h1 { font-family: var(--cf-serif); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; color: var(--cf-text); margin: 0 0 16px; max-width: 780px; } .cf-h1 em { font-style: italic; color: var(--cf-accent); font-weight: 500; } .cf-h1-sub { font-size: 16.5px; color: var(--cf-text-body); max-width: 640px; line-height: 1.6; margin: 0; } .cf-section-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--cf-border-soft); margin: 48px 0 24px; } .cf-section-head h2 { font-family: var(--cf-serif); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; margin: 0; color: var(--cf-text); } .cf-section-head h2 em { font-style: italic; color: var(--cf-accent); } .cf-section-head .count { font-family: var(--cf-mono); font-size: 11px; color: var(--cf-text-muted); letter-spacing: 0.1em; } /* ============================================================================= Hub sidebar (filters) ============================================================================= */ .cf-sidebar { position: sticky; top: 90px; align-self: start; } .cf-sidebar-block { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--cf-border); } .cf-sidebar-block:last-child { border-bottom: none; } .cf-sidebar-label { font-family: var(--cf-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cf-brand-gold); margin-bottom: 12px; font-weight: 700; } .cf-sidebar-list { list-style: none; padding: 0; margin: 0; } .cf-sidebar-item { padding: 5px 0; font-size: 13px; } .cf-sidebar-item label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--cf-text-body); transition: color 0.15s; } .cf-sidebar-item label:hover { color: var(--cf-accent); } .cf-sidebar-item input[type="checkbox"], .cf-sidebar-item input[type="radio"] { accent-color: var(--cf-accent); width: 14px; height: 14px; } .cf-sidebar-item .count { margin-left: auto; font-family: var(--cf-mono); font-size: 10.5px; color: var(--cf-text-muted); } .cf-sidebar-link { display: block; padding: 5px 0; font-size: 13px; color: var(--cf-text-body); text-decoration: none; } .cf-sidebar-link:hover { color: var(--cf-accent); } .cf-sidebar-link.active { color: var(--cf-accent); font-weight: 600; } /* ============================================================================= Creator cards ============================================================================= */ .cf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .cf-card { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 22px 22px 20px; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; display: flex; flex-direction: column; } .cf-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); border-color: var(--cf-accent); } .cf-card.featured { background: var(--cf-featured-bg); border-color: var(--cf-brand-gold); box-shadow: 0 0 0 1px rgba(184,135,42,0.15); } .cf-card-tag { font-family: var(--cf-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-text-muted); margin-bottom: 8px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .cf-card.featured .cf-card-tag { color: var(--cf-brand-gold); } .cf-card-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .cf-card-name { font-family: var(--cf-serif); font-size: 19px; font-weight: 600; color: var(--cf-text); letter-spacing: -0.01em; margin: 0 0 2px; line-height: 1.2; } .cf-card-handle { font-family: var(--cf-mono); font-size: 12px; color: var(--cf-text-muted); margin-bottom: 12px; } .cf-card-bio { font-size: 13.5px; color: var(--cf-text-body); line-height: 1.55; margin-bottom: 14px; flex-grow: 1; } .cf-card-stats { display: flex; gap: 16px; font-family: var(--cf-mono); font-size: 11px; color: var(--cf-text-muted); letter-spacing: 0.04em; margin-bottom: 14px; flex-wrap: wrap; } .cf-card-stat strong { color: var(--cf-text); font-weight: 700; } .cf-card-actions { display: flex; gap: 8px; flex-wrap: wrap; } .cf-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; font-family: var(--cf-sans); font-size: 12.5px; font-weight: 600; border-radius: 4px; text-decoration: none; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; cursor: pointer; } .cf-btn-primary { background: var(--cf-brand-green); color: #fff; } .cf-btn-primary:hover { background: #153527; color: #fff; } .cf-card.featured .cf-btn-primary { background: var(--cf-brand-gold); color: #fff; } .cf-card.featured .cf-btn-primary:hover { background: var(--cf-brand-gold-dark); color: #fff; } .cf-btn-ghost { background: transparent; color: var(--cf-text-body); border-color: var(--cf-border); } .cf-btn-ghost:hover { border-color: var(--cf-accent); color: var(--cf-accent); } .cf-btn-sm { padding: 5px 10px; font-size: 11px; } /* ============================================================================= Editorial strip (Daily Brief teasers on homepage) ============================================================================= */ .cf-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .cf-strip-item { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 18px 20px; transition: border-color 0.15s, transform 0.15s; text-decoration: none; color: inherit; display: block; } .cf-strip-item:hover { border-color: var(--cf-accent); transform: translateY(-2px); } .cf-strip-kicker { font-family: var(--cf-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-brand-gold); margin-bottom: 10px; font-weight: 700; } .cf-strip-title { font-family: var(--cf-serif); font-size: 17px; font-weight: 600; color: var(--cf-text); margin: 0 0 8px; line-height: 1.3; letter-spacing: -0.005em; } .cf-strip-meta { font-family: var(--cf-mono); font-size: 11px; color: var(--cf-text-muted); } /* ============================================================================= Footer ============================================================================= */ .cf-footer { background: var(--cf-brand-green-dark); color: var(--cf-text-inverse); padding: 56px 24px 30px; margin-top: 80px; } .cf-footer-inner { max-width: var(--cf-max-width); margin: 0 auto; } .cf-footer-top { display: grid; grid-template-columns: 1.2fr 1.8fr 1fr 1fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(184,135,42,0.2); } .cf-footer-brand h3 { font-family: var(--cf-serif); font-size: 24px; font-weight: 600; margin: 0 0 10px; color: var(--cf-text-inverse); letter-spacing: -0.01em; } .cf-footer-brand h3 em { font-style: italic; color: var(--cf-brand-gold); font-weight: 400; } .cf-footer-brand p { font-size: 13px; color: rgba(247,243,236,0.65); line-height: 1.6; margin: 0 0 18px; max-width: 280px; } .cf-footer-news { display: flex; max-width: 280px; background: rgba(255,255,255,0.08); border: 1px solid rgba(184,135,42,0.3); border-radius: 4px; overflow: hidden; } .cf-footer-news input { flex: 1; background: transparent; border: none; color: var(--cf-text-inverse); padding: 10px 12px; font-size: 12px; outline: none; font-family: inherit; } .cf-footer-news input::placeholder { color: rgba(247,243,236,0.4); } .cf-footer-news button { background: var(--cf-brand-gold); color: var(--cf-brand-green); padding: 10px 14px; font-family: var(--cf-serif); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; border: none; cursor: pointer; transition: background 0.15s; } .cf-footer-news button:hover { background: var(--cf-brand-gold-dark); } .cf-footer-col h4 { font-family: var(--cf-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cf-brand-gold); margin: 0 0 16px; font-weight: 700; } .cf-footer-col ul { list-style: none; padding: 0; margin: 0; } .cf-footer-col li { padding: 4px 0; font-size: 13px; color: rgba(247,243,236,0.8); display: flex; align-items: center; gap: 7px; line-height: 1.4; } .cf-footer-col li .glyph { opacity: 0.75; font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; } .cf-footer-col li.sub { padding-left: 18px; font-size: 11.5px; color: rgba(247,243,236,0.55); } .cf-footer-col a { color: inherit; text-decoration: none; transition: color 0.15s; } .cf-footer-col a:hover { color: var(--cf-brand-gold); } .cf-footer-cat-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cf-footer-parent { font-weight: 600; color: rgba(247,243,236,0.95); } .cf-footer-parent:not(:first-child) { margin-top: 6px; } .cf-footer-copy { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; font-family: var(--cf-mono); font-size: 10.5px; color: rgba(247,243,236,0.45); letter-spacing: 0.04em; flex-wrap: wrap; gap: 12px; } /* ============================================================================= Network Band (Coastal Directory portfolio, below footer) ============================================================================= */ .cf-netband { background: var(--cf-brand-green-darker); color: rgba(247,243,236,0.85); padding: 28px 24px 30px; border-top: 1px solid rgba(184,135,42,0.15); } .cf-netband-inner { max-width: var(--cf-max-width); margin: 0 auto; } .cf-netband-title { font-family: var(--cf-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cf-brand-gold); margin-bottom: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .cf-netband-title::before, .cf-netband-title::after { content: ''; flex: 1; height: 1px; background: rgba(184,135,42,0.2); } .cf-netband-groups { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .cf-netband-group summary { list-style: none; cursor: pointer; padding: 10px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(184,135,42,0.15); border-radius: 4px; display: flex; align-items: center; justify-content: space-between; font-family: var(--cf-serif); font-size: 14px; font-weight: 600; color: var(--cf-text-inverse); letter-spacing: -0.005em; transition: background 0.15s, border-color 0.15s; } .cf-netband-group summary::-webkit-details-marker { display: none; } .cf-netband-group summary:hover { background: rgba(255,255,255,0.07); border-color: rgba(184,135,42,0.35); } .cf-netband-group summary .caret { font-size: 10px; color: var(--cf-brand-gold); transition: transform 0.2s; } .cf-netband-group[open] summary .caret { transform: rotate(180deg); } .cf-netband-group[open] summary { background: rgba(255,255,255,0.07); border-color: rgba(184,135,42,0.4); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .cf-netband-body { background: rgba(255,255,255,0.03); border: 1px solid rgba(184,135,42,0.15); border-top: none; padding: 8px 0; border-radius: 0 0 4px 4px; } .cf-netband-site { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; color: rgba(247,243,236,0.85); text-decoration: none; border-top: 1px solid rgba(247,243,236,0.04); transition: background 0.12s; } .cf-netband-site:first-child { border-top: none; } .cf-netband-site:hover { background: rgba(184,135,42,0.08); color: var(--cf-text-inverse); } .cf-netband-site .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cf-netband-site .meta { flex: 1; min-width: 0; } .cf-netband-site .name { font-weight: 600; font-size: 12.5px; line-height: 1.2; color: var(--cf-text-inverse); } .cf-netband-site .desc { font-size: 10.5px; color: rgba(247,243,236,0.5); margin-top: 2px; line-height: 1.3; } .cf-netband-site .arrow { font-size: 11px; color: rgba(184,135,42,0.6); flex-shrink: 0; } .cf-netband-footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(184,135,42,0.1); font-family: var(--cf-mono); font-size: 10px; color: rgba(247,243,236,0.4); letter-spacing: 0.08em; text-align: center; } /* ============================================================================= About page — network properties section ============================================================================= */ .cf-prop-group-label { font-family: var(--cf-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cf-brand-gold); margin: 36px 0 14px; font-weight: 700; display: flex; align-items: center; gap: 12px; } .cf-prop-group-label::after { content: ''; flex: 1; height: 1px; background: var(--cf-border); } .cf-prop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cf-prop-card { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 20px 22px; transition: box-shadow 0.15s, transform 0.15s; } .cf-prop-card.current { background: var(--cf-featured-bg); border-color: var(--cf-brand-gold); box-shadow: 0 0 0 1px rgba(184,135,42,0.15); } .cf-prop-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.05); } .cf-prop-accent { width: 32px; height: 3px; background: currentColor; margin-bottom: 14px; border-radius: 2px; } .cf-prop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .cf-prop-name { font-family: var(--cf-serif); font-size: 19px; font-weight: 600; color: var(--cf-text); letter-spacing: -0.01em; line-height: 1.2; } .cf-prop-status { font-family: var(--cf-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; font-weight: 600; white-space: nowrap; flex-shrink: 0; margin-top: 3px; } .cf-prop-status.live { background: #E8F0E9; color: var(--cf-brand-green); } .cf-prop-status.dev { background: #FDF6E8; color: #92400e; } .cf-prop-status.home { background: var(--cf-brand-gold); color: #fff; } .cf-prop-tag { font-family: var(--cf-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--cf-text-muted); margin-bottom: 10px; } .cf-prop-desc { font-size: 13.5px; line-height: 1.55; color: var(--cf-text-strong-muted); margin-bottom: 14px; } .cf-prop-link { font-family: var(--cf-mono); font-size: 11.5px; font-weight: 600; color: var(--cf-brand-green); text-decoration: none; border-bottom: 1px dotted var(--cf-brand-gold); letter-spacing: 0.02em; } .cf-prop-link:hover { color: var(--cf-brand-gold); } .cf-prop-link.none { color: var(--cf-text-muted); border-bottom: none; cursor: default; font-style: italic; } .cf-prop-single-wrap { display: flex; justify-content: center; } .cf-prop-single { max-width: 420px; width: 100%; } /* ============================================================================= Editorial article body (for blog / landing pages) ============================================================================= */ .cf-article { max-width: 720px; margin: 0 auto; } .cf-article h1 { font-family: var(--cf-serif); font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--cf-text); margin: 0 0 16px; } .cf-article h1 em { font-style: italic; color: var(--cf-accent); } .cf-article h2 { font-family: var(--cf-serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin: 40px 0 14px; color: var(--cf-text); } .cf-article h3 { font-family: var(--cf-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cf-brand-gold); font-weight: 700; margin: 28px 0 12px; } .cf-article p { font-size: 16px; line-height: 1.7; color: var(--cf-text-body); margin-bottom: 16px; } .cf-article ul, .cf-article ol { font-size: 16px; line-height: 1.7; color: var(--cf-text-body); padding-left: 22px; margin-bottom: 16px; } .cf-article li { margin-bottom: 6px; } .cf-article strong { color: var(--cf-text); } .cf-article .lede { font-size: 18px; line-height: 1.6; color: var(--cf-text-body); margin-bottom: 24px; } .cf-article a { color: var(--cf-brand-green); border-bottom: 1px dotted var(--cf-brand-gold); } /* ============================================================================= Utility ============================================================================= */ .cf-loading { padding: 48px 24px; text-align: center; color: var(--cf-text-muted); font-family: var(--cf-mono); font-size: 13px; letter-spacing: 0.08em; } .cf-empty { padding: 48px 24px; text-align: center; color: var(--cf-text-muted); font-family: var(--cf-serif); font-style: italic; font-size: 16px; background: var(--cf-surface); border: 1px dashed var(--cf-border); border-radius: var(--cf-radius); } /* ============================================================================= Responsive ============================================================================= */ @media (max-width: 900px) { .cf-page-hub { grid-template-columns: 1fr; gap: 24px; } .cf-sidebar { position: static; } .cf-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } .cf-footer-brand { grid-column: span 2; } .cf-netband-groups { grid-template-columns: 1fr; gap: 14px; } .cf-prop-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cf-nav-links { gap: 16px; } .cf-nav-links > li:not(.cf-nav-cta-li) { font-size: 13px; } .cf-pillbar { padding: 10px 16px; } .cf-pill { font-size: 11.5px; padding: 5px 11px; } .cf-page { padding: 28px 16px 56px; } .cf-footer-top { grid-template-columns: 1fr; } .cf-footer-brand { grid-column: span 1; } .cf-footer-cat-split { grid-template-columns: 1fr; } .cf-footer-copy { flex-direction: column; align-items: flex-start; } .cf-h1 { font-size: 28px; } .cf-grid { grid-template-columns: 1fr; } } /* ============================================================================= Legacy compatibility shim — for SEO landing pages that still use old classes Maps old class names to new design tokens so they render cleanly ============================================================================= */ .cf-refresh .hero { background: var(--cf-bg); padding: 32px 0 36px; border-bottom: 1px solid var(--cf-border-soft); margin-bottom: 32px; } .cf-refresh .hero h1 { font-family: var(--cf-serif); font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; font-style: normal; line-height: 1.05; letter-spacing: -0.02em; color: var(--cf-text); margin: 0 0 14px; } .cf-refresh .hero h1 span { color: var(--cf-accent); font-style: italic; } .cf-refresh .hero-label { font-family: var(--cf-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cf-brand-gold); margin-bottom: 14px; font-weight: 600; display: block; } .cf-refresh .hero-desc { font-size: 16px; color: var(--cf-text-body); line-height: 1.6; max-width: 680px; } .cf-refresh .hero-meta { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; font-family: var(--cf-mono); font-size: 11.5px; color: var(--cf-text-muted); } .cf-refresh .hero-meta-item strong { color: var(--cf-text); } .cf-refresh .content-wrap { max-width: var(--cf-max-width); margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; } @media (max-width: 900px) { .cf-refresh .content-wrap { grid-template-columns: 1fr; } } .cf-refresh .article h2 { font-family: var(--cf-serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin: 40px 0 14px; color: var(--cf-text); } .cf-refresh .article h3 { font-family: var(--cf-serif); font-size: 20px; font-weight: 600; margin: 24px 0 10px; color: var(--cf-text); } .cf-refresh .article p, .cf-refresh .article ul, .cf-refresh .article ol { font-size: 16px; line-height: 1.7; color: var(--cf-text-body); margin-bottom: 14px; } .cf-refresh .article a { color: var(--cf-brand-green); border-bottom: 1px dotted var(--cf-brand-gold); } .cf-refresh .callout { background: var(--cf-surface-warm); border: 1px solid var(--cf-brand-gold); border-radius: var(--cf-radius); padding: 20px 24px; margin: 24px 0; box-shadow: 0 0 0 1px rgba(184,135,42,0.1); } .cf-refresh .creator-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 20px 0; } .cf-refresh .creator-card { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 20px; transition: transform 0.15s, box-shadow 0.15s; } .cf-refresh .creator-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); } .cf-refresh .creator-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cf-refresh .creator-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cf-brand-green); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--cf-serif); font-weight: 700; font-size: 14px; flex-shrink: 0; } .cf-refresh .creator-name { font-family: var(--cf-serif); font-weight: 600; font-size: 16px; color: var(--cf-text); line-height: 1.2; } .cf-refresh .creator-handle { font-family: var(--cf-mono); font-size: 11.5px; color: var(--cf-text-muted); } .cf-refresh .creator-bio { font-size: 13.5px; color: var(--cf-text-body); line-height: 1.55; margin-bottom: 10px; } .cf-refresh .creator-stats { display: flex; gap: 12px; font-family: var(--cf-mono); font-size: 11px; color: var(--cf-text-muted); margin-bottom: 10px; flex-wrap: wrap; } .cf-refresh .creator-btn { display: inline-block; background: var(--cf-brand-green); color: #fff !important; padding: 6px 14px; border-radius: 4px; font-size: 12px; font-weight: 600; text-decoration: none !important; border-bottom: none !important; } .cf-refresh .creator-btn:hover { background: #153527; } .cf-refresh .sidebar { position: sticky; top: 90px; align-self: start; } .cf-refresh .sidebar-card { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 20px; margin-bottom: 16px; } .cf-refresh .sidebar-title { font-family: var(--cf-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cf-brand-gold); margin-bottom: 12px; font-weight: 700; } .cf-refresh .sidebar-link { display: block; padding: 5px 0; font-size: 13px; color: var(--cf-text-body); text-decoration: none !important; border-bottom: none !important; } .cf-refresh .sidebar-link:hover { color: var(--cf-brand-gold); } .cf-refresh .sidebar-cta { background: var(--cf-brand-green); color: var(--cf-text-inverse); border-radius: var(--cf-radius); padding: 20px; margin-bottom: 16px; } .cf-refresh .sidebar-cta-title { font-family: var(--cf-serif); font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--cf-text-inverse); } .cf-refresh .sidebar-cta-body { font-size: 13px; line-height: 1.5; color: rgba(247,243,236,0.8); margin-bottom: 14px; } .cf-refresh .sidebar-cta-btn { display: inline-block; background: var(--cf-brand-gold); color: var(--cf-brand-green) !important; padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 700; font-family: var(--cf-serif); text-decoration: none !important; border-bottom: none !important; } .cf-refresh .sidebar-cta-btn:hover { background: var(--cf-brand-gold-dark); color: var(--cf-brand-green) !important; } .cf-refresh .toc { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 20px; margin: 20px 0; } .cf-refresh .faq-section { margin: 32px 0; } .cf-refresh .faq-item { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 20px; margin-bottom: 12px; } .cf-refresh .faq-q { font-family: var(--cf-serif); font-size: 17px; font-weight: 600; color: var(--cf-text); margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; } .cf-refresh .faq-icon { color: var(--cf-brand-gold); flex-shrink: 0; } .cf-refresh .faq-a { font-size: 14.5px; color: var(--cf-text-body); line-height: 1.6; } /* Kill any leftover old nav/breadcrumb just in case */ .cf-refresh > nav:not(.cf-nav) { display: none; } .cf-refresh > .breadcrumb { display: none; } /* ============================================================================= TEASER BAND — rotating "Today's Brief" line between hero and creators ============================================================================= */ .cf-teaser-band { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 20px; margin: 24px 0 32px; background: linear-gradient(to right, var(--cf-surface-warm), var(--cf-bg)); border: 1px solid var(--cf-border); border-left: 3px solid var(--cf-brand-gold); border-radius: 4px; text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.15s; } .cf-teaser-band:hover { border-left-color: var(--cf-brand-green); color: inherit; } .cf-teaser-left { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } .cf-teaser-title { font-family: var(--cf-serif); font-size: 13px; font-weight: 600; font-style: italic; color: var(--cf-brand-green); letter-spacing: -0.005em; line-height: 1.1; } .cf-teaser-date { font-family: var(--cf-mono); font-size: 9.5px; color: var(--cf-text-muted); letter-spacing: 0.08em; } .cf-teaser-sep { width: 1px; background: var(--cf-border); align-self: stretch; flex-shrink: 0; } .cf-teaser-body { flex: 1; font-size: 14px; color: var(--cf-text); line-height: 1.4; min-height: 20px; position: relative; overflow: hidden; } .cf-teaser-item { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cf-teaser-item.active { opacity: 1; transform: translateY(0); position: relative; } .cf-teaser-kicker { display: inline-block; font-family: var(--cf-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 3px; margin-right: 8px; vertical-align: middle; flex-shrink: 0; } .cf-teaser-kicker.news { background: #FEECEA; color: #b43224; } .cf-teaser-kicker.social { background: #E7F3FC; color: #0c6aa7; } .cf-teaser-kicker.video { background: #F2EDF7; color: #5a3d7a; } .cf-teaser-kicker.blog { background: #E8F0E9; color: #1B4332; } .cf-teaser-item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cf-teaser-arrow { font-family: var(--cf-mono); font-size: 11px; color: var(--cf-brand-gold); letter-spacing: 0.1em; font-weight: 700; flex-shrink: 0; text-transform: uppercase; } /* ============================================================================= MOBILE — comprehensive responsive pass ============================================================================= */ /* Hamburger toggle (hidden by default, shown on mobile) */ .cf-nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; margin-left: auto; } .cf-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--cf-text); margin: 4px 0; transition: all 0.2s; border-radius: 1px; } .cf-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .cf-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .cf-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ---- Tablets & below (≤ 900px) ---- */ @media (max-width: 900px) { /* Hub page grid: sidebar stacks above */ .cf-page-hub { grid-template-columns: 1fr; gap: 24px; } .cf-sidebar { position: static; } /* Sidebar becomes a collapsible band on mobile */ .cf-sidebar { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 16px 18px; } .cf-sidebar-block { padding-bottom: 14px; margin-bottom: 14px; } /* Footer: 2 columns on tablet */ .cf-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } .cf-footer-brand { grid-column: span 2; } /* Network band: stack */ .cf-netband-groups { grid-template-columns: 1fr; gap: 14px; } /* About page property grid */ .cf-prop-grid { grid-template-columns: 1fr; } } /* ---- Phones (≤ 640px) ---- */ @media (max-width: 640px) { /* -- NAV: hamburger + slide-down menu -- */ .cf-nav-inner { padding: 14px 18px; flex-wrap: wrap; } .cf-nav-toggle { display: block; } .cf-nav-links { display: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cf-border); } .cf-nav-links.cf-nav-open { display: flex; } .cf-nav-links > li { width: 100%; padding: 2px 0; } .cf-nav-links a { display: block; padding: 11px 4px; font-size: 15px; width: 100%; } .cf-nav-links .caret { display: none; } .cf-nav-dropdown { display: block !important; position: static; background: transparent; border: none; box-shadow: none; padding: 0 0 0 16px; margin: 0; border-left: 2px solid var(--cf-border); } .cf-nav-dropdown a { padding: 8px 4px; font-size: 13.5px; } .cf-nav-cta { display: inline-block !important; width: auto; margin-top: 4px; } /* -- PILL BAR: horizontal scroll, contained (no infinite page scroll) -- */ .cf-pillbar-wrap { /* Contain overflow at this wrapper so page never horizontally scrolls */ overflow: hidden; max-width: 100vw; } .cf-pillbar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 10px 18px; gap: 8px; /* Hide scrollbar but keep scrollable */ scrollbar-width: none; -ms-overflow-style: none; /* Mask edges to hint at more content */ -webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%); } .cf-pillbar::-webkit-scrollbar { display: none; } .cf-pill { flex-shrink: 0; font-size: 12px; padding: 6px 13px; } /* Dropdown pills on mobile: tap opens the dropdown instead of hover */ .cf-pill-drop { position: relative; } .cf-pill-drop-menu { left: 50%; transform: translateX(-50%); min-width: 160px; } /* -- PAGE -- */ .cf-page { padding: 24px 16px 56px; } .cf-page-narrow { padding: 24px 16px 56px; } /* -- HERO -- */ .cf-hero { padding: 20px 0 24px; margin-bottom: 24px; } .cf-h1 { font-size: 30px; line-height: 1.1; } .cf-h1-sub { font-size: 15px; } .cf-eyebrow { font-size: 10px; margin-bottom: 10px; } /* -- TEASER BAND on mobile -- */ .cf-teaser-band { padding: 12px 14px; gap: 10px; flex-wrap: wrap; margin: 20px 0 24px; } .cf-teaser-sep { display: none; } .cf-teaser-date { display: none; } .cf-teaser-title { font-size: 12px; } .cf-teaser-body { font-size: 13px; width: 100%; } .cf-teaser-arrow { font-size: 10px; } /* -- SECTION HEADS -- */ .cf-section-head { margin: 32px 0 16px; padding-bottom: 10px; } .cf-section-head h2 { font-size: 20px; } /* -- GRID -- */ .cf-grid { grid-template-columns: 1fr; gap: 14px; } .cf-card { padding: 18px 18px 16px; } .cf-card-name { font-size: 17px; } .cf-strip { grid-template-columns: 1fr; gap: 12px; } /* -- FOOTER -- */ .cf-footer { padding: 40px 18px 24px; margin-top: 56px; } .cf-footer-top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; } .cf-footer-brand { grid-column: span 1; } .cf-footer-cat-split { grid-template-columns: 1fr 1fr; gap: 10px; } .cf-footer-col li { font-size: 12.5px; } .cf-footer-col li.sub { font-size: 11.5px; } .cf-footer-col h4 { font-size: 10px; } .cf-footer-copy { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 10px; } /* -- NETWORK BAND on mobile -- */ .cf-netband { padding: 22px 18px 22px; } .cf-netband-groups { grid-template-columns: 1fr; gap: 10px; } .cf-netband-title { font-size: 9.5px; margin-bottom: 14px; } /* -- ABOUT PAGE PROPERTY CARDS -- */ .cf-prop-grid { grid-template-columns: 1fr; } .cf-prop-card { padding: 18px 20px; } /* -- HUB SIDEBAR on phone: collapsed by default -- */ .cf-sidebar { padding: 14px 16px; } .cf-sidebar-label { font-size: 10px; } .cf-sidebar-item { font-size: 12.5px; } /* -- Get Listed / For Shops page two-card row -- */ /* Stack tier cards on phone */ /* -- Article body -- */ .cf-article h1 { font-size: 26px; } .cf-article h2 { font-size: 22px; } .cf-article p { font-size: 15.5px; } /* -- Prevent horizontal overflow anywhere -- */ body, html { overflow-x: hidden; max-width: 100vw; } } /* ---- Very narrow phones (≤ 380px) ---- */ @media (max-width: 380px) { .cf-pillbar { padding: 10px 14px; } .cf-pill { font-size: 11.5px; padding: 5px 11px; } .cf-h1 { font-size: 26px; } .cf-nav-inner { padding: 12px 14px; } .cf-wordmark { font-size: 19px; } } /* Tap-to-open for pill dropdowns on touch devices — uses :focus-within which triggers on tap */ @media (hover: none) { .cf-pill-drop:focus-within .cf-pill-drop-menu { display: block; } .cf-nav-links > li:focus-within .cf-nav-dropdown { display: block; } } /* ============================================================= HOMEPAGE v2: pill counts, category accents, compact cards, Browse by Category grid ============================================================= */ /* Balanced pillbar — center aligned so wraps look even */ .cf-pillbar { justify-content: center; } /* Count badge inside each pill */ .cf-pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--cf-border); color: var(--cf-text-muted); font-family: var(--cf-mono); font-size: 10px; font-weight: 600; line-height: 1; } .cf-pill.active .cf-pill-count { background: rgba(255,255,255,0.2); color: #fff; } .cf-pill:hover .cf-pill-count { background: rgba(27,67,50,0.15); } @media (max-width: 640px) { .cf-pill-count { font-size: 9.5px; min-width: 18px; height: 16px; padding: 0 5px; } } /* Per-category accent color variables — applied to individual cards */ .cat-sports-cards { --cat-accent: #2c7c5a; --cat-accent-soft: rgba(44,124,90,0.12); } .cat-trading-cards { --cat-accent: #0ea5e9; --cat-accent-soft: rgba(14,165,233,0.12); } .cat-coins { --cat-accent: #1a1a1a; --cat-accent-soft: rgba(26,26,26,0.08); } .cat-stamps { --cat-accent: #8B2626; --cat-accent-soft: rgba(139,38,38,0.12); } .cat-toys { --cat-accent: #6b4a82; --cat-accent-soft: rgba(107,74,130,0.12); } .cat-comics { --cat-accent: #c8341f; --cat-accent-soft: rgba(200,52,31,0.12); } .cat-antiques-art { --cat-accent: #6B7A3F; --cat-accent-soft: rgba(107,122,63,0.14); } .cat-memorabilia { --cat-accent: #92400e; --cat-accent-soft: rgba(146,64,14,0.12); } .cat-vintage { --cat-accent: #78543c; --cat-accent-soft: rgba(120,84,60,0.14); } .cat-sneakers { --cat-accent: #ff6b1a; --cat-accent-soft: rgba(255,107,26,0.12); } .cat-jewelry { --cat-accent: #b83260; --cat-accent-soft: rgba(184,50,96,0.12); } .cat-watches { --cat-accent: #0F2A4A; --cat-accent-soft: rgba(15,42,74,0.12); } .cat-default { --cat-accent: var(--cf-brand-green); --cat-accent-soft: var(--cf-accent-soft, rgba(27,67,50,0.08)); } /* Non-featured cards get the category accent top bar + colored chip (Option 4) */ .cf-card:not(.featured) { border-top: 3px solid var(--cat-accent, var(--cf-brand-green)); padding-top: 19px; } .cf-card:not(.featured):hover { border-color: var(--cat-accent, var(--cf-brand-green)); border-top-color: var(--cat-accent, var(--cf-brand-green)); } .cf-card:not(.featured) .cf-card-tag { background: var(--cat-accent-soft, rgba(27,67,50,0.08)); color: var(--cat-accent, var(--cf-brand-green)); padding: 3px 10px; border-radius: 10px; font-weight: 700; align-self: flex-start; } .cf-card:not(.featured) .cf-card-tag .dot { display: none; } /* Compact card for non-featured (smaller overall) */ .cf-card.compact { padding: 16px 16px 14px; padding-top: 13px; /* accommodate the border-top */ } .cf-card.compact.featured { padding-top: 16px; } .cf-card.compact .cf-card-name { font-size: 16.5px; } .cf-card.compact .cf-card-handle { font-size: 11px; margin-bottom: 10px; } .cf-card.compact .cf-card-bio { font-size: 12.5px; margin-bottom: 12px; } .cf-card.compact .cf-card-stats { font-size: 10px; gap: 12px; margin-bottom: 12px; } .cf-card.compact .cf-btn-sm { padding: 5px 10px; font-size: 11.5px; } /* Compact grid has tighter gap and more columns per row */ .cf-grid-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } /* Browse by category grid */ .cf-browse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 960px) { .cf-browse-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .cf-browse-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .cf-browse-grid { grid-template-columns: 1fr; } } .cf-browse-card { display: block; background: var(--cf-surface, #FFFDF8); border: 1px solid var(--cf-border); border-top: 3px solid var(--cat-accent, var(--cf-brand-green)); border-radius: 8px; padding: 20px 18px 18px; text-decoration: none; color: inherit; position: relative; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .cf-browse-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); border-color: var(--cat-accent, var(--cf-brand-green)); border-top-color: var(--cat-accent, var(--cf-brand-green)); } .cf-browse-card-name { font-family: var(--cf-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--cf-text, #1a1a1a); } .cf-browse-card-desc { font-size: 12.5px; color: var(--cf-text-muted, #8C7B5E); line-height: 1.45; margin: 0 0 10px; } .cf-browse-card-count { font-family: var(--cf-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cat-accent, var(--cf-brand-green)); font-weight: 700; } /* Intro blurb above Browse by Category */ .cf-browse-intro { font-size: 14.5px; color: var(--cf-text-body); margin: -6px 0 22px; max-width: 640px; } /* ============================================================= HOMEPAGE v3 / DIRECTORY / FULL ROLLOUT Smaller pills, Daily Brief top band, standalone copyright strip ============================================================= */ /* Smaller pills with natural wrapping */ .cf-pillbar { gap: 5px; padding: 11px 24px; } .cf-pill { font-size: 12px; padding: 5px 11px; } .cf-pill-count { min-width: 18px; height: 16px; font-size: 9.5px; margin-left: 3px; padding: 0 5px; } @media (max-width: 640px) { .cf-pillbar { padding: 9px 12px; gap: 4px; } .cf-pill { font-size: 11px; padding: 4px 9px; } .cf-pill-count { font-size: 9px; min-width: 16px; height: 14px; padding: 0 4px; } } /* Daily Brief top band — dark strip above the hero */ .cf-teaser-top-wrap { background: #0f1f17; border-bottom: 1px solid #1f3a2e; } .cf-teaser-top-wrap .cf-teaser-band { max-width: var(--cf-max-width, 1280px); margin: 0 auto; background: transparent; border: none; padding: 10px 24px; box-shadow: none; border-radius: 0; } .cf-teaser-top-wrap .cf-teaser-title { color: #b8872a; } .cf-teaser-top-wrap .cf-teaser-date { color: #8C7B5E; } .cf-teaser-top-wrap .cf-teaser-body { color: #e8e3d6; } .cf-teaser-top-wrap .cf-teaser-kicker { color: #b8872a; border-color: #b8872a; } .cf-teaser-top-wrap .cf-teaser-arrow { color: #b8872a; } .cf-teaser-top-wrap .cf-teaser-sep { background: #2a3f35; } /* "See all creators" CTA at end of homepage grid */ .cf-see-all-row { text-align: center; margin: 28px 0 0; padding: 20px 0; border-top: 1px solid var(--cf-border); } .cf-see-all-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; font-family: var(--cf-serif, Fraunces, Georgia, serif); font-size: 16px; font-weight: 500; color: var(--cf-brand-green, #1B4332); background: transparent; border: 1px solid var(--cf-brand-green, #1B4332); border-radius: 999px; text-decoration: none; transition: all 0.15s; } .cf-see-all-btn:hover { background: var(--cf-brand-green, #1B4332); color: #fff; } .cf-see-all-btn em { font-style: italic; color: var(--cf-brand-gold, #B8872A); font-weight: 600; } .cf-see-all-btn:hover em { color: #FFD47A; } /* Standalone copyright strip — very last thing on every page */ .cf-copy-strip { background: #0B1F17; color: #4d5a51; text-align: center; padding: 8px 20px; font-family: var(--cf-mono, 'IBM Plex Mono', monospace); font-size: 9.5px; font-weight: 400; letter-spacing: 0.03em; line-height: 1.4; border-top: none; opacity: 0.75; } /* Directory page — filter controls */ .cf-directory-intro { max-width: 680px; margin: 10px 0 28px; color: var(--cf-text-body, #3a3a3a); font-size: 15px; line-height: 1.55; } .cf-dir-filters { background: var(--cf-surface, #FFFDF8); border: 1px solid var(--cf-border, #e2d9c8); border-radius: 8px; padding: 16px 18px; margin-bottom: 24px; display: grid; grid-template-columns: 1fr 180px 180px; gap: 12px; align-items: center; } @media (max-width: 720px) { .cf-dir-filters { grid-template-columns: 1fr; } } .cf-dir-search { width: 100%; padding: 10px 14px; font-family: var(--cf-sans, Inter, system-ui, sans-serif); font-size: 14px; border: 1px solid var(--cf-border, #e2d9c8); border-radius: 6px; background: #fff; color: var(--cf-text, #1a1a1a); } .cf-dir-search:focus { outline: none; border-color: var(--cf-brand-green, #1B4332); box-shadow: 0 0 0 3px rgba(27,67,50,0.12); } .cf-dir-select { padding: 10px 12px; font-family: var(--cf-sans, Inter, system-ui, sans-serif); font-size: 13.5px; border: 1px solid var(--cf-border, #e2d9c8); border-radius: 6px; background: #fff; color: var(--cf-text, #1a1a1a); cursor: pointer; } .cf-dir-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-family: var(--cf-mono, 'IBM Plex Mono', monospace); font-size: 11.5px; color: var(--cf-text-muted, #8C7B5E); letter-spacing: 0.05em; } .cf-dir-reset { font-family: var(--cf-mono, 'IBM Plex Mono', monospace); font-size: 11px; color: var(--cf-brand-green, #1B4332); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; } .cf-dir-empty { text-align: center; padding: 60px 20px; font-family: var(--cf-serif, Fraunces, Georgia, serif); font-size: 18px; color: var(--cf-text-muted, #8C7B5E); font-style: italic; background: var(--cf-surface, #FFFDF8); border: 1px dashed var(--cf-border, #e2d9c8); border-radius: 8px; } /* ============================================================= MOBILE PILL DROPDOWN (≤ 640px) On phones, pills collapse into a "Browse categories ▾" button. Tap to reveal the pill list as a vertical dropdown. ============================================================= */ .cf-pill-mobile-toggle { display: none; /* hidden on desktop/tablet */ } @media (max-width: 640px) { /* Hide the full pill row by default on phones */ .cf-pillbar-wrap .cf-pillbar { display: none; } /* Show the toggle button instead */ .cf-pill-mobile-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--cf-max-width, 1280px); margin: 0 auto; padding: 12px 16px; background: transparent; border: none; border-bottom: 1px solid var(--cf-border-soft); font-family: var(--cf-sans); font-size: 13px; font-weight: 600; color: var(--cf-text); cursor: pointer; text-align: left; } .cf-pill-mobile-toggle:hover { background: var(--cf-accent-soft); } .cf-pill-mobile-toggle .label { display: flex; align-items: center; gap: 6px; } .cf-pill-mobile-toggle .active-label { color: var(--cf-brand-green, #1B4332); font-weight: 700; } .cf-pill-mobile-toggle .caret { font-size: 10px; color: var(--cf-muted); transition: transform 0.2s; } .cf-pill-mobile-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); } .cf-pill-mobile-toggle .total-count { font-family: var(--cf-mono); font-size: 11px; color: var(--cf-muted); letter-spacing: 0.05em; } /* When the toggle is expanded, show the pills as a vertical dropdown */ .cf-pillbar-wrap.cf-pillbar-open .cf-pillbar { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: var(--cf-paper, #FFFDF8); border-bottom: 1px solid var(--cf-border); } .cf-pillbar-wrap.cf-pillbar-open .cf-pill { justify-content: space-between; border-radius: 0; border: none; border-bottom: 1px solid var(--cf-border-soft); padding: 12px 18px; font-size: 14px; font-weight: 500; background: transparent; } .cf-pillbar-wrap.cf-pillbar-open .cf-pill:hover { background: var(--cf-accent-soft); } .cf-pillbar-wrap.cf-pillbar-open .cf-pill.active { background: var(--cf-accent); color: #fff; border-bottom-color: var(--cf-accent); } .cf-pillbar-wrap.cf-pillbar-open .cf-pill .cf-pill-count { min-width: 28px; height: 20px; font-size: 11px; background: var(--cf-border); } .cf-pillbar-wrap.cf-pillbar-open .cf-pill.active .cf-pill-count { background: rgba(255,255,255,0.2); color: #fff; } /* Memorabilia / Vintage dropdown parents — hide the ▾ caret, show subcategories inline */ .cf-pillbar-wrap.cf-pillbar-open .cf-pill-drop { display: block; } .cf-pillbar-wrap.cf-pillbar-open .cf-pill-drop > .cf-pill .caret { display: none; /* nested caret not needed on mobile */ } .cf-pillbar-wrap.cf-pillbar-open .cf-pill-drop-menu { display: block !important; position: static; box-shadow: none; background: var(--cf-bg, #faf9f6); padding: 0; border: none; } .cf-pillbar-wrap.cf-pillbar-open .cf-pill-drop-menu a { display: block; padding: 10px 18px 10px 36px; font-size: 13px; color: var(--cf-text-body); text-decoration: none; border-bottom: 1px solid var(--cf-border-soft); } .cf-pillbar-wrap.cf-pillbar-open .cf-pill-drop-menu a:hover { background: var(--cf-accent-soft); } } /* ============================================================= TABLET POLISH (641px – 1024px) Slightly reduce pill spacing so 13 fit cleanly in 2 rows max ============================================================= */ @media (min-width: 641px) and (max-width: 1024px) { .cf-pillbar { padding: 10px 20px; gap: 4px; } .cf-pill { font-size: 11.5px; padding: 5px 10px; } .cf-pill-count { font-size: 9.5px; min-width: 17px; height: 15px; } } /* ============================================================= HUB PAGE SECTIONS — shared across /hubs.html and 12 category hubs ============================================================= */ .cf-hub-section { margin: 44px 0; } .cf-hub-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--cf-border); padding-bottom: 10px; } .cf-hub-section-head h2 { font-family: var(--cf-serif); font-weight: 400; font-size: 26px; margin: 0; letter-spacing: -0.01em; } .cf-hub-section-head h2 em { font-style: italic; color: var(--cf-brand-green, #1B4332); font-weight: 500; } .cf-hub-section-head .count { font-family: var(--cf-mono); font-size: 11px; color: var(--cf-text-muted); letter-spacing: 0.08em; text-transform: uppercase; } .cf-hub-section-head .see-all { font-family: var(--cf-mono); font-size: 10.5px; color: var(--cf-brand-green); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--cf-brand-green); padding-bottom: 1px; white-space: nowrap; } .cf-hub-section-head .see-all:hover { color: var(--cf-brand-gold); border-color: var(--cf-brand-gold); } /* -------- Daily Brief grid (4 columns) -------- */ .cf-brief-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .cf-brief-item { display: block; background: var(--cf-surface, #FFFDF8); border: 1px solid var(--cf-border); border-left: 3px solid var(--cf-brand-green); border-radius: 6px; padding: 16px 16px 14px; text-decoration: none; color: inherit; transition: all 0.15s; } .cf-brief-item:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); border-color: var(--cf-brand-green); } .cf-brief-news { border-left-color: #8B2626; } .cf-brief-social { border-left-color: #0ea5e9; } .cf-brief-video { border-left-color: #c8341f; } .cf-brief-blog { border-left-color: #92400e; } .cf-brief-kicker { font-family: var(--cf-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-text-muted); margin-bottom: 6px; } .cf-brief-news .cf-brief-kicker { color: #8B2626; } .cf-brief-social .cf-brief-kicker { color: #0ea5e9; } .cf-brief-video .cf-brief-kicker { color: #c8341f; } .cf-brief-blog .cf-brief-kicker { color: #92400e; } .cf-brief-title { font-family: var(--cf-serif); font-size: 16px; font-weight: 500; letter-spacing: -0.005em; margin: 0 0 6px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cf-brief-dek { font-size: 13px; line-height: 1.45; color: var(--cf-text-body); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cf-brief-source { font-family: var(--cf-mono); font-size: 10px; color: var(--cf-text-muted); letter-spacing: 0.05em; } /* -------- Affiliate grid (3 columns, scrollable on mobile) -------- */ .cf-affiliate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .cf-affiliate-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .cf-affiliate-grid { grid-template-columns: 1fr; } } .cf-affiliate-card { display: flex; gap: 12px; background: var(--cf-surface, #FFFDF8); border: 1px solid var(--cf-border); border-top: 3px solid var(--cat-accent, var(--cf-brand-green)); border-radius: 6px; padding: 14px; text-decoration: none; color: inherit; transition: all 0.15s; } .cf-affiliate-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); border-color: var(--cat-accent, var(--cf-brand-green)); border-top-color: var(--cat-accent, var(--cf-brand-green)); } .cf-aff-img { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 4px; overflow: hidden; background: var(--cf-border-soft, #efe8d8); display: flex; align-items: center; justify-content: center; } .cf-aff-img img { max-width: 100%; max-height: 100%; object-fit: contain; } .cf-aff-img-placeholder::before { content: '◆'; font-size: 28px; color: var(--cf-border); } .cf-aff-body { flex: 1; min-width: 0; } .cf-aff-vendor { font-family: var(--cf-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cat-accent, var(--cf-brand-green)); margin-bottom: 4px; } .cf-aff-title { font-family: var(--cf-serif); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; margin: 0 0 4px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cf-aff-blurb { font-size: 12px; line-height: 1.4; color: var(--cf-text-body); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cf-aff-price { font-family: var(--cf-mono); font-size: 11px; color: var(--cf-brand-gold, #B8872A); font-weight: 700; } /* -------- Local store cards -------- */ .cf-stores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .cf-store-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--cf-surface, #FFFDF8); border: 1px solid var(--cf-border); border-left: 3px solid var(--cat-accent, var(--cf-brand-green)); border-radius: 6px; padding: 12px 14px; text-decoration: none; color: inherit; transition: all 0.15s; } .cf-store-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-color: var(--cat-accent, var(--cf-brand-green)); } .cf-store-name { font-family: var(--cf-serif); font-size: 16px; font-weight: 500; letter-spacing: -0.005em; margin: 0 0 2px; } .cf-store-loc { font-size: 12.5px; color: var(--cf-text-body); margin-bottom: 2px; } .cf-store-source { font-family: var(--cf-mono); font-size: 10px; color: var(--cf-text-muted); letter-spacing: 0.04em; } .cf-store-arrow { color: var(--cat-accent, var(--cf-brand-green)); font-size: 18px; font-weight: 500; } .cf-store-nolink { cursor: default; } .cf-store-nolink:hover { transform: none; box-shadow: none; } /* -------- Hub hero (subtle variant) -------- */ .cf-hub-hero { text-align: center; padding: 36px 0 24px; } .cf-hub-eyebrow { font-family: var(--cf-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-text-muted); margin-bottom: 14px; } .cf-hub-h1 { font-family: var(--cf-serif); font-weight: 400; font-size: 42px; line-height: 1.1; letter-spacing: -0.015em; margin: 0 auto 14px; max-width: 820px; } .cf-hub-h1 em { font-style: italic; color: var(--cf-brand-green, #1B4332); font-weight: 500; } .cf-hub-sub { font-size: 15.5px; color: var(--cf-text-body); max-width: 620px; margin: 0 auto; line-height: 1.55; } @media (max-width: 640px) { .cf-hub-h1 { font-size: 28px; } .cf-hub-section-head h2 { font-size: 21px; } .cf-hub-section { margin: 32px 0; } } /* ============================================================= HUB v2 — shopfinder CTA, signup form, sort/load-more controls ============================================================= */ /* --- Shopfinder CTA (Coins, Comics) --- */ .cf-shopfinder-cta { background: var(--cf-surface, #FFFDF8); border: 1px solid var(--cf-border); border-top: 3px solid var(--cat-accent, var(--cf-brand-green)); border-radius: 8px; padding: 28px 28px 26px; text-align: center; } .cf-shopfinder-kicker { font-family: var(--cf-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cat-accent, var(--cf-brand-green)); font-weight: 700; margin-bottom: 10px; } .cf-shopfinder-title { font-family: var(--cf-serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 10px; line-height: 1.2; } .cf-shopfinder-sub { font-size: 14.5px; color: var(--cf-text-body); margin: 0 auto 20px; max-width: 560px; line-height: 1.55; } .cf-shopfinder-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; font-family: var(--cf-sans); font-size: 14.5px; font-weight: 600; background: var(--cat-accent, var(--cf-brand-green)); color: #fff; border-radius: 999px; text-decoration: none; transition: all 0.15s; } .cf-shopfinder-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); opacity: 0.95; color: #fff; } .cf-shopfinder-btn .arrow { font-size: 16px; } .cf-shopfinder-note { margin-top: 14px; font-family: var(--cf-mono); font-size: 10.5px; color: var(--cf-text-muted); letter-spacing: 0.04em; } /* --- Shop signup form (10 other categories) --- */ .cf-signup-card { background: var(--cf-surface, #FFFDF8); border: 1px solid var(--cf-border); border-top: 3px solid var(--cat-accent, var(--cf-brand-green)); border-radius: 8px; padding: 24px 24px 22px; max-width: 720px; margin: 0 auto; } .cf-signup-kicker { font-family: var(--cf-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cat-accent, var(--cf-brand-green)); font-weight: 700; margin-bottom: 8px; } .cf-signup-title { font-family: var(--cf-serif); font-size: 22px; font-weight: 500; margin: 0 0 8px; line-height: 1.2; } .cf-signup-sub { font-size: 13.5px; color: var(--cf-text-body); margin: 0 0 18px; line-height: 1.5; } .cf-signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } @media (max-width: 540px) { .cf-signup-grid { grid-template-columns: 1fr; } } .cf-signup-field { display: flex; flex-direction: column; gap: 4px; } .cf-signup-field label { font-family: var(--cf-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-text-muted); font-weight: 600; } .cf-signup-field input, .cf-signup-field textarea { padding: 9px 12px; font-family: var(--cf-sans); font-size: 13.5px; background: #fff; border: 1px solid var(--cf-border); border-radius: 5px; color: var(--cf-text); transition: border 0.15s; } .cf-signup-field input:focus, .cf-signup-field textarea:focus { outline: none; border-color: var(--cat-accent, var(--cf-brand-green)); box-shadow: 0 0 0 3px rgba(27,67,50,0.08); } .cf-signup-field.full { grid-column: 1 / -1; } .cf-signup-submit { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-family: var(--cf-sans); font-size: 13.5px; font-weight: 600; background: var(--cat-accent, var(--cf-brand-green)); color: #fff; border: none; border-radius: 999px; cursor: pointer; transition: all 0.15s; margin-top: 6px; } .cf-signup-submit:hover { opacity: 0.9; transform: translateY(-1px); } .cf-signup-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .cf-signup-msg { margin-top: 12px; padding: 10px 14px; border-radius: 5px; font-size: 13.5px; display: none; } .cf-signup-msg.show { display: block; } .cf-signup-msg.success { background: rgba(27,67,50,0.08); color: #1B4332; border: 1px solid rgba(27,67,50,0.2); } .cf-signup-msg.error { background: rgba(200,52,31,0.08); color: #8a2414; border: 1px solid rgba(200,52,31,0.25); } /* --- All Influencers: sort dropdown + load more --- */ .cf-hub-sort-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 14px; font-family: var(--cf-mono); font-size: 11px; color: var(--cf-text-muted); letter-spacing: 0.04em; } .cf-hub-sort-bar label { text-transform: uppercase; font-weight: 600; letter-spacing: 0.08em; } .cf-hub-sort-select { padding: 5px 10px; font-family: var(--cf-sans); font-size: 12.5px; background: #fff; border: 1px solid var(--cf-border); border-radius: 5px; color: var(--cf-text); cursor: pointer; } .cf-load-more-row { text-align: center; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--cf-border); } .cf-load-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; font-family: var(--cf-sans); font-size: 13px; font-weight: 600; background: transparent; color: var(--cf-brand-green); border: 1px solid var(--cf-brand-green); border-radius: 999px; cursor: pointer; transition: all 0.15s; } .cf-load-more-btn:hover { background: var(--cf-brand-green); color: #fff; } .cf-load-more-btn:disabled { opacity: 0.4; cursor: not-allowed; }