/** * We The Loud — page styles for the Gutenberg rebuilds. * * Replaces the per-element CSS Elementor used to generate into * uploads/elementor/css/post-*.css. Tokens mirror the old Elementor * global kit (post 55) so the pages keep their existing look. */ :root { /* Brand constants — these never flip. From the old Elementor kit (post 55). */ --wtl-ink: #0E0D0D; --wtl-red: #C8311E; --wtl-red-dark: #97220F; --wtl-bone: #F4EFE6; --wtl-paper: #FAF7F0; --wtl-stone: #6B6460; --wtl-display: "Anton", "Arial Narrow", Impact, sans-serif; --wtl-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --wtl-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --wtl-max: 1320px; --wtl-pad: 24px; /* Semantic tokens — these DO flip. Light mode defaults. */ --wtl-fg: var(--wtl-ink); /* body + heading text */ --wtl-fg-muted: var(--wtl-stone); /* secondary copy */ --wtl-on-fg: var(--wtl-paper); /* text on a --wtl-fg fill */ --wtl-rule: rgba(14, 13, 13, 0.15); --wtl-zebra: rgba(14, 13, 13, 0.025); } /* Dark mode. Reign/BuddyNext set the mode on and accept three attribute spellings, so match all three exactly as BuddyNext's own CSS does. The palette inverts: Ink Black becomes the ground, Bone becomes the text. */ [data-bx-mode="dark"], [data-theme="dark"], [data-bn-theme="dark"] { --wtl-fg: var(--wtl-bone); --wtl-fg-muted: #A8A19B; --wtl-on-fg: var(--wtl-ink); --wtl-rule: rgba(244, 239, 230, 0.18); --wtl-zebra: rgba(244, 239, 230, 0.04); } /* ---------- Typography ---------- */ .wtl-h1, .wtl-h-lg, .wtl-h-md { font-family: var(--wtl-display); font-weight: 400; text-transform: uppercase; line-height: 1.02; letter-spacing: -0.01em; color: var(--wtl-fg); margin: 0 0 0.4em; } .wtl-h1 { font-size: clamp(3rem, 9vw, 5.5rem); } .wtl-h-lg { font-size: clamp(1.9rem, 4.4vw, 2.7rem); } .wtl-h-md { font-size: clamp(1.4rem, 2.8vw, 1.875rem); } /* Vertical rhythm. Elementor used explicit spacer widgets between these sections; spacing belongs in CSS, so the spacers were dropped on conversion. */ .wtl-h-lg { margin-top: 3rem; } .wtl-h-md { margin-top: 2.5rem; } .wtl-h1:first-child, .wtl-h-lg:first-child, .wtl-h-md:first-child { margin-top: 0; } .wtl-faq + .wtl-h-md { margin-top: 3rem; } .wtl-eyebrow { font-family: var(--wtl-mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wtl-fg-muted); } /* ---------- Tabs (the toggle switcher) ---------- CSS-only: radio inputs drive sibling panels. No JS, no plugin. The radios stay in the DOM and focusable, so arrow keys switch tabs natively and screen readers announce them as a radio group. ponytail: swap for a real tabs block only if these ever need deep-linking. */ .wtl-tabs { margin: 2.5rem 0; } .wtl-tabs__radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .wtl-tabs__nav { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--wtl-fg); margin-bottom: 2rem; } .wtl-tabs__label { font-family: var(--wtl-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.85rem 1.6rem; cursor: pointer; border: 1px solid var(--wtl-fg); border-bottom: 0; background: transparent; color: var(--wtl-fg); transition: background-color 0.15s ease, color 0.15s ease; user-select: none; } .wtl-tabs__label + .wtl-tabs__label { border-left: 0; } .wtl-tabs__label:hover { background: var(--wtl-red-dark); color: var(--wtl-paper); } .wtl-tabs__panel { display: none; } /* Active panel + active tab. One pair per tab. */ .wtl-tabs__radio:nth-of-type(1):checked ~ .wtl-tabs__panel.is-1, .wtl-tabs__radio:nth-of-type(2):checked ~ .wtl-tabs__panel.is-2, .wtl-tabs__radio:nth-of-type(3):checked ~ .wtl-tabs__panel.is-3 { display: block; } .wtl-tabs__radio:nth-of-type(1):checked ~ .wtl-tabs__nav .wtl-tabs__label:nth-child(1), .wtl-tabs__radio:nth-of-type(2):checked ~ .wtl-tabs__nav .wtl-tabs__label:nth-child(2), .wtl-tabs__radio:nth-of-type(3):checked ~ .wtl-tabs__nav .wtl-tabs__label:nth-child(3) { background: var(--wtl-red); color: var(--wtl-paper); border-color: var(--wtl-red); } /* Keyboard focus ring, mirrored onto the label the radio controls. */ .wtl-tabs__radio:nth-of-type(1):focus-visible ~ .wtl-tabs__nav .wtl-tabs__label:nth-child(1), .wtl-tabs__radio:nth-of-type(2):focus-visible ~ .wtl-tabs__nav .wtl-tabs__label:nth-child(2), .wtl-tabs__radio:nth-of-type(3):focus-visible ~ .wtl-tabs__nav .wtl-tabs__label:nth-child(3) { outline: 3px solid var(--wtl-red); outline-offset: 2px; } @media (max-width: 640px) { .wtl-tabs__nav { flex-direction: column; } .wtl-tabs__label { border: 1px solid var(--wtl-fg); border-bottom: 0; } .wtl-tabs__label + .wtl-tabs__label { border-left: 1px solid var(--wtl-fg); } } /* ---------- FAQ accordions (core/details) ---------- */ .wtl-faq { border-bottom: 1px solid var(--wtl-rule); padding: 0; margin: 0; } .wtl-faq > summary { font-family: var(--wtl-body); font-size: 1.0625rem; font-weight: 600; color: var(--wtl-fg); cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; list-style: none; transition: color 0.15s ease; } .wtl-faq > summary::-webkit-details-marker { display: none; } .wtl-faq > summary:hover { color: var(--wtl-red); } .wtl-faq > summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-family: var(--wtl-mono); font-size: 1.5rem; line-height: 1; color: var(--wtl-red); transition: transform 0.2s ease; } .wtl-faq[open] > summary::after { content: "\2212"; } .wtl-faq > summary:focus-visible { outline: 3px solid var(--wtl-red); outline-offset: -3px; } .wtl-faq > *:not(summary) { margin: 0 0 1rem; padding-right: 2.5rem; color: var(--wtl-fg-muted); line-height: 1.7; } .wtl-faq > *:not(summary):last-child { padding-bottom: 1.25rem; } /* ---------- Data tables ---------- */ .wtl-table table { border-collapse: collapse; width: 100%; font-family: var(--wtl-body); font-size: 0.9375rem; } .wtl-table th { font-family: var(--wtl-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; background: var(--wtl-fg); color: var(--wtl-on-fg); padding: 0.7rem 0.9rem; border: 0; } .wtl-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--wtl-rule); color: var(--wtl-fg); } .wtl-table tbody tr:nth-child(even) { background: var(--wtl-zebra); }