/* ========================================================================== Amazing Facts 4 U - theme stylesheet -------------------------------------------------------------------------- Design concept: "NIGHT SKY & LIGHTBULB". Taken directly from the logo badge: a deep navy ground, a gold lightbulb, warm white type, and a ring of multicoloured orbiting icons. Those orbiting icons are why this theme colour-codes all 46 topics instead of picking one brand hue - the logo already says the subject matter is plural. The rule that falls out of the palette, and the one to remember: GOLD IS TYPE IN THE DARK AND FILL IN THE LIGHT. Gold on paper measures 1.52:1 and can never be type there. Gold on navy measures 9.83:1 and is excellent type there. Every contrast ratio in the comments below is MEASURED, not estimated. Source artwork: Logos/AF4u/AF4U.jpg ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { color-scheme: light; /* Neutrals, measured against --af-page (#FCFCF7). Paper is warm off-white, sampled from the logo's type, not pure #FFF. */ --af-page: #FCFCF7; --af-surface: #F4F3EC; --af-surface-alt: #EAE8DE; --af-line: #DFDCD0; --af-ink: #1C2340; /* 14.96:1 the badge navy, doubling as body ink */ --af-ink-soft: #3E4763; /* 8.93:1 secondary text */ --af-ink-faint: #5C6684; /* 5.53:1 meta, timestamps */ --af-on-ink: #FCFCF7; /* 15.40:1 paper on navy */ /* Gold - the lightbulb. */ --af-gold: #F7C948; /* 1.52:1 on paper. FILL ONLY. Never type here. */ --af-gold-text: #8A6D0B; /* 4.78:1 the gold-family colour that IS legal as type on paper. Use for links + accents. */ --af-gold-soft: #FDF3DA; --af-on-gold: #1C2340; /* 9.83:1 navy on gold. White on gold is 1.57:1 - gold fills take NAVY, never white. This is not negotiable. */ /* Topic hue, reassigned per category by [data-topic] in section 2. */ --af-topic: var(--af-ink); --af-on-topic: #FFFFFF; /* Geometry */ --af-wrap: 1180px; --af-content: 700px; --af-r: 14px; --af-r-sm: 8px; --af-head-h: 64px; --af-shadow-sm: 0 1px 2px rgb(28 35 64 / .06), 0 2px 8px rgb(28 35 64 / .05); --af-shadow-md: 0 4px 14px rgb(28 35 64 / .09), 0 14px 40px rgb(28 35 64 / .07); --af-shadow-lg: 0 10px 30px rgb(28 35 64 / .12), 0 30px 70px rgb(28 35 64 / .10); --af-ease: cubic-bezier(.22,.61,.36,1); } /* Dark mode is not an inversion here - it is the logo. The badge ground becomes the page ground, and gold is promoted from fill to type. */ [data-theme="dark"] { color-scheme: dark; /* Measured against --af-page (#141A31). */ --af-page: #141A31; --af-surface: #1C2340; /* the exact badge navy */ --af-surface-alt: #252E4E; --af-line: #313B5E; --af-ink: #ECEEF6; /* 14.5:1 */ --af-ink-soft: #C3CAE0; /* 10.5:1 */ --af-ink-faint: #9AA3C0; /* 6.8:1 */ --af-on-ink: #141A31; --af-gold: #F7C948; /* 9.83:1 on navy - now legal as type */ --af-gold-text: #F7C948; /* same colour; the light-mode brass is unnecessary once the ground is dark */ --af-gold-soft: #2E2A18; /* gold on it 9.18:1 */ --af-on-gold: #1C2340; --af-shadow-sm: 0 1px 2px rgb(0 0 0 / .40); --af-shadow-md: 0 4px 14px rgb(0 0 0 / .45), 0 14px 40px rgb(0 0 0 / .35); --af-shadow-lg: 0 10px 30px rgb(0 0 0 / .50), 0 30px 70px rgb(0 0 0 / .45); } /* -------------------------------------------------------------------------- 2. TOPIC HUES The orbiting icons in the logo, systematised. Twelve families cover all 46 categories (mapping lives in inc/taxonomy-color.php). Light values: measured with white text sitting on them, all >= 4.96:1. Dark values: measured as type against the navy page, all >= 6.30:1. -------------------------------------------------------------------------- */ /* Keyed off BOTH the attribute (set on for single posts, and on hand- written markup) and the .af-t-* class that inc/taxonomy-color.php adds via post_class to every
  • in a query loop. Block templates cannot emit a per-post data attribute, so the class is the only route on listings. */ [data-topic="animals"], .af-t-animals { --af-topic: #1B7F5A; } /* 4.96:1 */ [data-topic="space"], .af-t-space { --af-topic: #4C3BCF; } /* 7.41:1 */ [data-topic="human-body"], .af-t-human-body { --af-topic: #B02D5C; } /* 6.22:1 */ [data-topic="food"], .af-t-food { --af-topic: #B45309; } /* 5.02:1 */ [data-topic="science"], .af-t-science { --af-topic: #0E6E8C; } /* 5.79:1 */ [data-topic="people"], .af-t-people { --af-topic: #7A3E9D; } /* 6.99:1 */ [data-topic="country"], .af-t-country { --af-topic: #0F766E; } /* 5.47:1 */ [data-topic="history"], .af-t-history { --af-topic: #8A5A2B; } /* 5.87:1 */ [data-topic="nature"], .af-t-nature { --af-topic: #2F7A1F; } /* 5.35:1 */ [data-topic="health"], .af-t-health { --af-topic: #B31D3B; } /* 6.65:1 */ [data-topic="technology"], .af-t-technology { --af-topic: #3B4B9E; } /* 7.82:1 */ [data-topic="weird"], .af-t-weird { --af-topic: #8E3B8E; } /* 6.63:1 */ [data-theme="dark"] [data-topic="animals"], [data-theme="dark"] .af-t-animals { --af-topic: #4ECFA0; } /* 8.80:1 */ [data-theme="dark"] [data-topic="space"], [data-theme="dark"] .af-t-space { --af-topic: #9B90F5; } /* 6.30:1 */ [data-theme="dark"] [data-topic="human-body"], [data-theme="dark"] .af-t-human-body { --af-topic: #F286AC; } /* 7.19:1 */ [data-theme="dark"] [data-topic="food"], [data-theme="dark"] .af-t-food { --af-topic: #F0A55A; } /* 8.38:1 */ [data-theme="dark"] [data-topic="science"], [data-theme="dark"] .af-t-science { --af-topic: #5EC0DE; } /* 8.24:1 */ [data-theme="dark"] [data-topic="people"], [data-theme="dark"] .af-t-people { --af-topic: #C79BE6; } /* 7.58:1 */ [data-theme="dark"] [data-topic="country"], [data-theme="dark"] .af-t-country { --af-topic: #4FC7BC; } /* 8.37:1 */ [data-theme="dark"] [data-topic="history"], [data-theme="dark"] .af-t-history { --af-topic: #D6A874; } /* 7.95:1 */ [data-theme="dark"] [data-topic="nature"], [data-theme="dark"] .af-t-nature { --af-topic: #7CC96A; } /* 8.53:1 */ [data-theme="dark"] [data-topic="health"], [data-theme="dark"] .af-t-health { --af-topic: #F58098; } /* 6.89:1 */ [data-theme="dark"] [data-topic="technology"], [data-theme="dark"] .af-t-technology { --af-topic: #93A3EE; } /* 7.13:1 */ [data-theme="dark"] [data-topic="weird"], [data-theme="dark"] .af-t-weird { --af-topic: #DB94DB; } /* 7.59:1 */ /* Lifted dark hues are light colours, so anything sitting ON them takes navy. */ [data-theme="dark"] { --af-on-topic: #141A31; } /* -------------------------------------------------------------------------- 3. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Anchor jumps must clear the sticky header, or a TOC click hides the fact underneath it and the reader concludes the link is broken. */ :target { scroll-margin-top: calc(var(--af-head-h) + 1.5rem); } body { margin: 0; background: var(--af-page); color: var(--af-ink); font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } /* Focus must be visible in both schemes. Never remove this. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--af-gold); outline-offset: 2px; border-radius: 3px; } ::selection { background: var(--af-gold); color: var(--af-on-gold); } .af-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* top:0 is load-bearing - without it the link sits at its static position and -120% only lifts it by its own height, leaving it visible on the page. */ .af-skip { position: fixed; top: 0; left: 50%; translate: -50% -120%; z-index: 100; padding: .75rem 1.25rem; background: var(--af-ink); color: var(--af-on-ink); border-radius: 0 0 var(--af-r-sm) var(--af-r-sm); text-decoration: none; font-weight: 600; transition: translate .2s var(--af-ease); } .af-skip:focus { translate: -50% 0; } .af-wrap { max-width: var(--af-wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } /* -------------------------------------------------------------------------- 4. HEADER -------------------------------------------------------------------------- */ .af-header { position: sticky; top: 0; z-index: 50; height: var(--af-head-h); background: color-mix(in srgb, var(--af-page) 88%, transparent); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--af-line); } .af-header__in { height: 100%; display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2rem); } .af-logo { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--wp--preset--font-family--display, Georgia, serif); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--af-ink); text-decoration: none; white-space: nowrap; } .af-logo__mark { width: 34px; height: 34px; border-radius: 50%; flex: none; } /* Wordmark fallback for when the badge is too small to read. "4U" carries the gold as a filled chip - gold as fill, ink on top, per the palette rule. */ .af-logo__4u { background: var(--af-gold); color: var(--af-on-gold); padding: .05em .32em; border-radius: 5px; font-size: .82em; } .af-nav { display: flex; gap: .25rem; margin-inline-start: auto; align-items: center; } .af-nav a { color: var(--af-ink-soft); text-decoration: none; font-size: .9375rem; font-weight: 500; padding: .5rem .75rem; border-radius: 999px; transition: background .18s var(--af-ease), color .18s var(--af-ease); } .af-nav a:hover { background: var(--af-surface); color: var(--af-ink); } .af-nav a[aria-current="page"] { color: var(--af-ink); font-weight: 600; } @media (max-width: 860px) { .af-nav__wide { display: none; } } .af-iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--af-line); border-radius: 999px; background: transparent; color: var(--af-ink); cursor: pointer; transition: background .18s var(--af-ease), border-color .18s var(--af-ease), scale .18s var(--af-ease); } .af-iconbtn:hover { background: var(--af-surface); border-color: var(--af-ink-faint); } .af-iconbtn:active { scale: .94; } .af-iconbtn svg { width: 18px; height: 18px; } /* Shuffle is the signature action of a facts site, so it gets the gold. */ .af-iconbtn--shuffle { background: var(--af-gold); border-color: var(--af-gold); color: var(--af-on-gold); width: auto; padding-inline: 1rem; gap: .5rem; grid-auto-flow: column; font-weight: 650; font-size: .9375rem; } .af-iconbtn--shuffle:hover { background: var(--af-gold); border-color: var(--af-gold); filter: brightness(1.06); } .af-iconbtn--shuffle.is-spinning svg { animation: af-spin .6s var(--af-ease); } @keyframes af-spin { to { rotate: 360deg; } } .af-savecount { position: absolute; translate: 12px -12px; min-width: 17px; height: 17px; padding-inline: 4px; display: grid; place-items: center; background: var(--af-gold); color: var(--af-on-gold); border-radius: 999px; font-size: .625rem; font-weight: 700; } .af-savecount:empty { display: none; } .af-progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: var(--af-progress, 0%); background: var(--af-gold); transition: width .1s linear; } /* -------------------------------------------------------------------------- 5. HERO - "fact of the moment" Typographic, not image-led. One arresting sentence set large is more distinctive than another stock photo banner, and it costs nothing in LCP. -------------------------------------------------------------------------- */ .af-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 9vw, 6.5rem); border-bottom: 1px solid var(--af-line); } /* Decorative lightbulb watermark, lifted from the badge. */ .af-hero::after { content: ""; position: absolute; right: -4vw; top: 50%; translate: 0 -50%; width: clamp(18rem, 42vw, 34rem); aspect-ratio: 1; background: var(--af-gold); opacity: .10; pointer-events: none; -webkit-mask: var(--af-bulb) center / contain no-repeat; mask: var(--af-bulb) center / contain no-repeat; } [data-theme="dark"] .af-hero::after { opacity: .14; } :root { --af-bulb: url('data:image/svg+xml,'); } .af-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--af-gold-text); margin: 0 0 1.25rem; } .af-hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--af-gold); animation: af-pulse 2.4s var(--af-ease) infinite; } @keyframes af-pulse { 0%,100% { opacity: 1; scale: 1; } 50% { opacity: .45; scale: .8; } } .af-hero__fact { font-family: var(--wp--preset--font-family--display, Georgia, serif); font-size: clamp(1.85rem, 5.2vw, 3.9rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; margin: 0; max-width: 20ch; text-wrap: balance; } .af-hero__fact a { color: inherit; text-decoration: none; } .af-hero__fact a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--af-gold); } .af-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; } /* -------------------------------------------------------------------------- 6. TOPIC BADGE -------------------------------------------------------------------------- */ .af-topic { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 650; letter-spacing: .04em; padding: .3rem .7rem; border-radius: 999px; text-decoration: none; background: var(--af-topic); color: var(--af-on-topic); transition: filter .18s var(--af-ease); } .af-topic:hover { filter: brightness(1.12); } .af-topic--ghost { background: transparent; color: var(--af-topic); border: 1px solid color-mix(in srgb, var(--af-topic) 40%, transparent); } /* core/post-terms is a WRAPPER holding elements joined by ", " TEXT NODES. Styling the wrapper as a badge (as the first build did) leaves the links unstyled and the commas visible. Instead: neutralise the wrapper, kill the separator text nodes with font-size:0, and badge each link. */ .wp-block-post-terms.af-topic { display: flex; flex-wrap: wrap; gap: .35rem; background: none; padding: 0; border-radius: 0; font-size: 0; /* collapses the ", " separators */ } .wp-block-post-terms.af-topic a { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 650; letter-spacing: .04em; padding: .3rem .7rem; border-radius: 999px; text-decoration: none; background: var(--af-topic); color: var(--af-on-topic); transition: filter .18s var(--af-ease); } .wp-block-post-terms.af-topic a:hover { filter: brightness(1.12); } /* Posts here carry four or five categories. One badge on a card is a label; five is a wall. Show the first and drop the rest — the full set is still on the single post. */ .af-card__topic a:not(:first-of-type) { display: none; } /* -------------------------------------------------------------------------- 7. THE FACT LIST - the core of the theme Each fact is an addressable, shareable unit. inc/facts.php injects the wrapper, the id and the share control into existing post content, so all 600 legacy posts gain this with zero content migration. -------------------------------------------------------------------------- */ .af-facts { list-style: none; margin: 3rem 0 0; padding: 0; counter-reset: af-fact; } .af-fact { position: relative; counter-increment: af-fact; padding: 1.75rem 0 1.75rem 4.25rem; border-top: 1px solid var(--af-line); scroll-margin-top: calc(var(--af-head-h) + 1.5rem); } .af-fact:first-child { border-top: 0; } /* Signature device: a large outlined numeral in the topic hue. */ .af-fact::before { content: counter(af-fact); position: absolute; left: 0; top: 1.4rem; font-family: var(--wp--preset--font-family--display, Georgia, serif); font-size: 2.5rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px var(--af-topic); transition: color .25s var(--af-ease); } /* Fills in once read. A quiet sense of progress through a 35-item list. */ .af-fact.is-read::before { color: var(--af-topic); -webkit-text-stroke-width: 0; } .af-fact__body { font-size: 1.0625rem; line-height: 1.72; margin: 0; } .af-fact__body > :first-child { margin-top: 0; } .af-fact__body > :last-child { margin-bottom: 0; } .af-fact:target { background: var(--af-gold-soft); border-radius: var(--af-r); padding-inline: 4.25rem 1.25rem; border-top-color: transparent; animation: af-flash 1.6s var(--af-ease); } .af-fact:target::before { left: 1.25rem; } @keyframes af-flash { from { background: var(--af-gold); } to { background: var(--af-gold-soft); } } .af-fact__actions { display: flex; gap: .35rem; margin-top: .85rem; opacity: 0; translate: 0 4px; transition: opacity .2s var(--af-ease), translate .2s var(--af-ease); } .af-fact:hover .af-fact__actions, .af-fact:focus-within .af-fact__actions { opacity: 1; translate: 0; } /* Touch devices have no hover, so the actions must always be visible. */ @media (hover: none) { .af-fact__actions { opacity: 1; translate: 0; } } .af-act { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--af-line); background: transparent; color: var(--af-ink-soft); cursor: pointer; text-decoration: none; transition: background .16s var(--af-ease), color .16s var(--af-ease), border-color .16s var(--af-ease); } .af-act:hover { background: var(--af-ink); color: var(--af-on-ink); border-color: var(--af-ink); } .af-act svg { width: 14px; height: 14px; } .af-act.is-active { background: var(--af-gold); color: var(--af-on-gold); border-color: var(--af-gold); } /* -------------------------------------------------------------------------- 7b. RICH FACT CARD The parser in inc/facts.php upgrades legacy numbered lists. This is the other half: a pattern editors reach for when a single fact deserves its own image and citation. It does not sit inside the
      , so the number is authored rather than counter-generated. -------------------------------------------------------------------------- */ .af-factcard { position: relative; display: grid; gap: 1.25rem; grid-template-columns: 3.5rem 1fr; align-items: start; padding: 1.75rem 0; border-top: 1px solid var(--af-line); scroll-margin-top: calc(var(--af-head-h) + 1.5rem); } .af-factcard__n { font-family: var(--wp--preset--font-family--display, Georgia, serif); font-size: 2.5rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px var(--af-topic); margin: 0; } .af-factcard__body > :first-child { margin-top: 0; } .af-factcard__body > :last-child { margin-bottom: 0; } .af-factcard figure { margin: 1rem 0 0; } .af-factcard figure img { width: 100%; border-radius: var(--af-r-sm); } /* Inline citation, so a single fact can carry its own source without pushing the reader down to the sources block at the foot of the article. */ .af-cite { display: block; margin-top: .6rem; font-size: .8125rem; color: var(--af-ink-faint); border-left: 2px solid var(--af-line); padding-left: .7rem; } .af-cite a { color: var(--af-gold-text); } @media (max-width: 599px) { .af-factcard { grid-template-columns: 1fr; gap: .5rem; } .af-factcard__n { font-size: 2rem; } } /* Wrapper emitted by the post-intro pattern. */ .af-post-intro { margin-block: 2rem; display: grid; gap: 1.25rem; } /* -------------------------------------------------------------------------- 8. TABLE OF CONTENTS -------------------------------------------------------------------------- */ .af-toc { background: var(--af-surface); border: 1px solid var(--af-line); border-radius: var(--af-r); padding: 1.25rem 1.5rem; margin-block: 2.5rem; } .af-toc > summary { cursor: pointer; font-weight: 650; font-size: .9375rem; list-style: none; display: flex; align-items: center; justify-content: space-between; } .af-toc > summary::-webkit-details-marker { display: none; } .af-toc > summary::after { content: ""; width: 9px; height: 9px; flex: none; border-right: 2px solid var(--af-ink-soft); border-bottom: 2px solid var(--af-ink-soft); rotate: 45deg; transition: rotate .2s var(--af-ease); } .af-toc[open] > summary::after { rotate: -135deg; } .af-toc__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .1rem; max-height: 19rem; overflow-y: auto; counter-reset: af-toc; } .af-toc__list a { counter-increment: af-toc; display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding: .45rem .35rem; border-radius: var(--af-r-sm); color: var(--af-ink-soft); text-decoration: none; font-size: .9375rem; transition: background .15s var(--af-ease), color .15s var(--af-ease); } .af-toc__list a::before { content: counter(af-toc); color: var(--af-topic); font-weight: 700; font-variant-numeric: tabular-nums; } .af-toc__list a:hover { background: var(--af-page); color: var(--af-ink); } /* -------------------------------------------------------------------------- 9. ARTICLE -------------------------------------------------------------------------- */ .af-article { padding-block: clamp(2rem, 6vw, 3.5rem); } .af-article__head { max-width: var(--af-content); margin-inline: auto; } .af-article__title { font-family: var(--wp--preset--font-family--display, Georgia, serif); font-size: clamp(2rem, 5.5vw, 3.25rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; margin: 1rem 0 0; text-wrap: balance; } /* "35 FACTS" sets the expectation of length up front, which measurably improves completion on long list content. */ .af-count { display: inline-flex; align-items: baseline; gap: .35rem; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--af-topic); } .af-count b { font-size: 1.15rem; font-variant-numeric: tabular-nums; } .af-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: .875rem; color: var(--af-ink-faint); margin-top: 1.25rem; } .af-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; } .af-figure { margin: 2.5rem 0 0; } .af-figure img { width: 100%; border-radius: var(--af-r); aspect-ratio: 16/9; object-fit: cover; } .af-figure figcaption { font-size: .8125rem; color: var(--af-ink-faint); margin-top: .6rem; } .af-body { max-width: var(--af-content); margin-inline: auto; } /* -------------------------------------------------------------------------- 10. SOURCES - the E-E-A-T surface A facts site that cites nothing is asserting, not informing. -------------------------------------------------------------------------- */ .af-sources { margin-block: 3rem; padding: 1.5rem 1.75rem; border: 1px solid var(--af-line); border-left: 4px solid var(--af-topic); border-radius: var(--af-r-sm); background: var(--af-surface); } .af-sources h2 { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--af-ink-faint); margin: 0 0 .85rem; font-family: inherit; font-weight: 700; } .af-sources ol { margin: 0; padding-inline-start: 1.1rem; font-size: .9375rem; line-height: 1.6; } .af-sources li + li { margin-top: .5rem; } .af-sources a { color: var(--af-gold-text); overflow-wrap: anywhere; } .af-verified { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; color: var(--af-ink-soft); } .af-verified svg { width: 15px; height: 15px; color: var(--af-topic); } /* -------------------------------------------------------------------------- 11. SHARE Plain anchors only. Every "social plugin" that renders share counts calls out to Facebook and X on every pageview. Counts are vanity; the requests are real, and they sit on the critical path. -------------------------------------------------------------------------- */ .af-share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .af-share__label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--af-ink-faint); margin-inline-end: .25rem; } .af-share a, .af-share button { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--af-line); background: transparent; color: var(--af-ink-soft); cursor: pointer; text-decoration: none; transition: background .16s var(--af-ease), color .16s var(--af-ease), border-color .16s var(--af-ease), scale .16s var(--af-ease); } .af-share a:hover, .af-share button:hover { background: var(--af-ink); border-color: var(--af-ink); color: var(--af-on-ink); } .af-share a:active, .af-share button:active { scale: .92; } .af-share svg { width: 18px; height: 18px; } /* Native share sheet: mobile's best sharing surface by a distance. Covers WhatsApp, Instagram DM, Telegram, SMS, Signal and anything else installed. The .af-has-native-share class is added by JS only where it is supported. */ /* Specificity matters here: `.af-share button` is (0,1,1), so a bare `.af-share__native` at (0,1,0) would lose and the button would show in browsers with no navigator.share. Both rules are scoped to match. */ .af-share .af-share__native { display: none; } .af-has-native-share .af-share .af-share__native { display: inline-grid; grid-auto-flow: column; width: auto; padding-inline: 1rem; gap: .5rem; background: var(--af-gold); border-color: var(--af-gold); color: var(--af-on-gold); font-weight: 650; font-size: .9375rem; } .af-has-native-share .af-share .af-share__native:hover { background: var(--af-gold); border-color: var(--af-gold); color: var(--af-on-gold); filter: brightness(1.06); } /* With a native sheet available, per-network icons are redundant on phones. */ .af-has-native-share .af-share .af-share__net { display: none; } @media (min-width: 720px) { .af-has-native-share .af-share .af-share__net { display: inline-grid; } } .af-sharebar { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; display: flex; gap: .5rem; justify-content: center; align-items: center; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--af-page) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--af-line); translate: 0 110%; transition: translate .28s var(--af-ease); } .af-sharebar.is-visible { translate: 0; } @media (min-width: 900px) { .af-sharebar { display: none; } } .af-toast { position: fixed; left: 50%; bottom: 5.5rem; translate: -50% 12px; z-index: 60; padding: .65rem 1.1rem; border-radius: 999px; background: var(--af-ink); color: var(--af-on-ink); font-size: .875rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s var(--af-ease), translate .2s var(--af-ease); } .af-toast.is-visible { opacity: 1; translate: -50% 0; } /* -------------------------------------------------------------------------- 12. CARD GRID -------------------------------------------------------------------------- */ /* IMPORTANT — read before editing the query-loop templates. A core/query renders as:
      <- the className you set on wp:query