/* ========================================================================= Acamedia — theme stylesheet Design tokens are generated by theme.json as --wp--preset--color--*, etc. This file aliases them to friendly custom properties and adds the components/utilities theme.json can't express (buttons variants, badges, cards, nav, RTL-aware logical properties). ========================================================================= */ :root{ /* Color aliases (kept in sync with theme.json — do not hardcode hex anywhere else in this file; change values in theme.json only). */ --acamedia-paper: var(--wp--preset--color--paper); --acamedia-ink: var(--wp--preset--color--ink); --acamedia-signal: var(--wp--preset--color--signal); --acamedia-atlas: var(--wp--preset--color--atlas); --acamedia-verdant: var(--wp--preset--color--verdant); --acamedia-clay: var(--wp--preset--color--clay); --acamedia-stone: var(--wp--preset--color--stone); --acamedia-stone-100: var(--wp--preset--color--stone-100); --acamedia-stone-900: var(--wp--preset--color--stone-900); --acamedia-font-latin: var(--wp--preset--font-family--general-sans); --acamedia-font-arabic: var(--wp--preset--font-family--ibm-plex-arabic); --acamedia-radius-sm: 4px; --acamedia-radius-md: 8px; --acamedia-radius-lg: 16px; --acamedia-shadow-card: 0 1px 2px rgba(14,17,22,0.04), 0 4px 12px rgba(14,17,22,0.06); } body{ background: var(--acamedia-paper); color: var(--acamedia-ink); } /* Arabic content automatically picks up IBM Plex Sans Arabic via [lang="ar"] set on by Polylang, independent of the RTL swap. */ html[lang^="ar"] body, html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3, html[lang^="ar"] p, html[lang^="ar"] a, html[lang^="ar"] button{ font-family: var(--acamedia-font-arabic); } /* ---- Wordmark ---------------------------------------------------------- */ .acamedia-wordmark{ height: 28px; width: auto; display: block; } .site-header a:has(.acamedia-wordmark){ line-height: 0; } /* ---- Buttons ------------------------------------------------------------ Signal is the primary CTA color. Per brand doctrine, Signal must never cover more than ~5% of a composition — use it for buttons/CTAs/the dot only, never as a large fill or background. */ .acamedia-btn{ display: inline-flex; align-items: center; gap: 0.5em; padding: 0.85em 1.6em; border-radius: var(--acamedia-radius-md); font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .acamedia-btn--primary{ background: var(--acamedia-signal); color: var(--acamedia-paper); } .acamedia-btn--primary:hover{ background: var(--acamedia-ink); color: var(--acamedia-paper); } .acamedia-btn--secondary{ background: transparent; color: var(--acamedia-ink); border-color: var(--acamedia-stone); } .acamedia-btn--secondary:hover{ border-color: var(--acamedia-ink); } .acamedia-btn--atlas{ background: var(--acamedia-atlas); color: var(--acamedia-paper); } .acamedia-btn--atlas:hover{ background: var(--acamedia-ink); } /* ---- Badges (semantic only: mastery state, never decorative) ---------- */ .acamedia-badge{ display: inline-flex; align-items: center; gap: 0.4em; padding: 0.25em 0.75em; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; } .acamedia-badge--verdant{ background: color-mix(in srgb, var(--acamedia-verdant) 14%, white); color: var(--acamedia-verdant); } .acamedia-badge--clay{ background: color-mix(in srgb, var(--acamedia-clay) 14%, white); color: var(--acamedia-clay); } .acamedia-badge--atlas{ background: color-mix(in srgb, var(--acamedia-atlas) 10%, white); color: var(--acamedia-atlas); } /* ---- Cards --------------------------------------------------------------*/ .acamedia-card{ background: var(--acamedia-stone-100); border-radius: var(--acamedia-radius-lg); padding: 2rem; } .acamedia-card--paper{ background: var(--acamedia-paper); border: 1px solid var(--acamedia-stone-100); box-shadow: var(--acamedia-shadow-card); } /* ---- The directional dot, used as a standalone accent ------------------*/ .acamedia-dot{ display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--acamedia-signal); } /* ---- Header / nav ------------------------------------------------------*/ .site-header{ display: flex; align-items: center; justify-content: space-between; padding-inline: clamp(1.25rem, 4vw, 3rem); padding-block: 1.25rem; border-block-end: 1px solid var(--acamedia-stone-100); } .site-header nav ul{ display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } .site-header nav a{ color: var(--acamedia-ink); text-decoration: none; font-weight: 500; font-size: 0.9375rem; } .site-header nav a:hover{ color: var(--acamedia-signal); } .acamedia-lang-switch{ display: flex; gap: 0.75rem; font-size: 0.875rem; } .acamedia-lang-switch a{ color: var(--acamedia-stone); text-decoration: none; } .acamedia-lang-switch a[aria-current="true"]{ color: var(--acamedia-ink); font-weight: 600; } /* ---- Footer --------------------------------------------------------------*/ .site-footer{ padding-inline: clamp(1.25rem, 4vw, 3rem); padding-block: 3rem 2rem; border-block-start: 1px solid var(--acamedia-stone-100); color: var(--acamedia-stone); font-size: 0.875rem; } .site-footer a{ color: inherit; } .site-footer a:hover{ color: var(--acamedia-ink); } .acamedia-footer-links{ display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block-start: 1rem; } /* ---- Mastery bar (semantic Verdant/Clay only, never decorative) --------*/ .acamedia-mastery-bar{ height: 8px; border-radius: 999px; background: var(--acamedia-stone-100); overflow: hidden; } .acamedia-mastery-bar > span{ display: block; height: 100%; border-radius: 999px; } /* ---- Utility -------------------------------------------------------------*/ .acamedia-eyebrow{ color: var(--acamedia-signal); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .acamedia-lede{ font-size: 1.25rem; line-height: 1.6; color: var(--acamedia-stone-900); } .acamedia-max-prose{ max-width: 68ch; } /* Style guide only */ .acamedia-swatch{ border-radius: var(--acamedia-radius-md); aspect-ratio: 3 / 2; display: flex; align-items: flex-end; padding: 1rem; font-size: 0.8125rem; font-weight: 600; }