/* Theme Name: WebTechAdda Theme URI: https://webtechadda.com/ Author: WebTechAdda Author URI: https://webtechadda.com/ Description: A fast, modern magazine theme built for WebTechAdda.com — web, technology, business, how-to and AI tools coverage. Ships with a light/dark toggle, server-side table of contents with readable slug anchors, a floating WhatsApp button, author profiles with bios, a complete guest-post service page with its own pitch inbox, a newsletter subscriber store, JSON-LD schema and a one-click content importer. No advertising code of any kind. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: webtechadda Tags: blog, news, magazine, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks */ /* ========================================================================= 1. Tokens ========================================================================= */ :root { --wta-indigo: #4F46E5; --wta-indigo-600: #4338CA; --wta-indigo-700: #3730A3; --wta-indigo-300: #A5B4FC; --wta-amber: #F59E0B; --wta-amber-600: #D97706; --wta-amber-soft: #FEF3C7; --wta-bg: #FFFFFF; --wta-bg-alt: #F5F6FB; --wta-bg-sunk: #EEF0F9; --wta-surface: #FFFFFF; --wta-ink: #14162B; --wta-ink-2: #3B3F58; --wta-muted: #6B7089; --wta-faint: #9AA0B8; --wta-line: #E4E7F2; --wta-line-soft: #EDEFF7; --wta-dark: #14162B; --wta-dark-2: #1D2040; --wta-accent: var(--wta-indigo); --wta-accent-ink: #FFFFFF; --wta-on-dark: #E7E9F5; --wta-on-dark-muted: #A6ABC9; --wta-shadow-sm: 0 1px 2px rgba(20, 22, 43, .06), 0 1px 3px rgba(20, 22, 43, .05); --wta-shadow: 0 2px 6px rgba(20, 22, 43, .06), 0 12px 28px -12px rgba(20, 22, 43, .18); --wta-shadow-lg: 0 8px 20px rgba(20, 22, 43, .10), 0 30px 60px -24px rgba(20, 22, 43, .30); --wta-r-sm: 8px; --wta-r: 14px; --wta-r-lg: 20px; --wta-r-pill: 999px; --wta-font-head: "Space Grotesk", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wta-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wta-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --wta-wrap: 1240px; --wta-wrap-nr: 1080px; --wta-gutter: 24px; /* measured live by theme.js; this is the fallback */ --wta-sticky: 118px; } html[data-scheme="dark"] { --wta-bg: #0E1020; --wta-bg-alt: #14162B; --wta-bg-sunk: #191C35; --wta-surface: #171A31; --wta-ink: #EEF0FA; --wta-ink-2: #C7CBE2; --wta-muted: #9BA1BF; --wta-faint: #767D9C; --wta-line: #2A2E4D; --wta-line-soft: #23273F; --wta-dark: #090B18; --wta-dark-2: #12142A; --wta-indigo: #7C7BF5; --wta-indigo-600:#6B6AF0; --wta-indigo-700:#5B5AE6; --wta-amber-soft:#3A2E10; --wta-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --wta-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 12px 28px -12px rgba(0, 0, 0, .6); --wta-shadow-lg: 0 8px 20px rgba(0, 0, 0, .45), 0 30px 60px -24px rgba(0, 0, 0, .7); color-scheme: dark; } /* ========================================================================= 2. Reset / base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The off-canvas drawer parks itself at translateX(100%), just past the right edge of the viewport. `clip` stops that creating a horizontal scrollbar. It has to be `clip` and it has to be here: `overflow-x: hidden` on also computes overflow-y to `auto`, which makes the scroll container — and a sticky header inside a scroll container that never scrolls simply never sticks. `clip` creates no scroll container, so the viewport keeps scrolling and the header behaves. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--wta-bg); color: var(--wta-ink); font-family: var(--wta-font-body); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video, iframe, embed, object { max-width: 100%; } img, video { height: auto; } /* Belt-and-braces: any icon drawn on a 24-unit viewBox defaults to 24px so a missing size rule can never blow one up to fill its parent. */ :where(svg[viewBox="0 0 24 24"]) { width: 24px; height: 24px; } a { color: var(--wta-indigo); text-decoration: none; transition: color .16s ease; } a:hover { color: var(--wta-indigo-700); } h1, h2, h3, h4, h5, h6 { font-family: var(--wta-font-head); color: var(--wta-ink); line-height: 1.22; letter-spacing: -.02em; margin: 0 0 .6em; font-weight: 700; } h1 { font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.9rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem); } h3 { font-size: clamp(1.2rem, 1.06rem + .6vw, 1.5rem); } h4 { font-size: 1.15rem; } p, ul, ol, dl, table, pre, blockquote, figure { margin: 0 0 1.15em; } hr { border: 0; border-top: 1px solid var(--wta-line); margin: 2rem 0; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--wta-indigo); color: #fff; } :focus-visible { outline: 3px solid var(--wta-amber); outline-offset: 2px; border-radius: 4px; } .wta-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .wta-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--wta-indigo); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--wta-r-sm) 0; font-weight: 600; } .wta-skip:focus { left: 0; color: #fff; } /* ========================================================================= 3. Layout primitives ========================================================================= */ .wta-wrap { width: 100%; max-width: var(--wta-wrap); margin-inline: auto; padding-inline: var(--wta-gutter); } .wta-wrap--narrow { max-width: var(--wta-wrap-nr); } .wta-section { padding-block: clamp(38px, 5vw, 64px); } .wta-section--tight { padding-block: clamp(26px, 3.4vw, 42px); } .wta-section--sunk { background: var(--wta-bg-alt); } .wta-section--dark { background: var(--wta-dark); color: var(--wta-on-dark); } .wta-section--dark h1, .wta-section--dark h2, .wta-section--dark h3, .wta-section--dark h4 { color: #fff; } .wta-shell { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: clamp(28px, 3.2vw, 46px); align-items: start; } @media (max-width: 1040px) { .wta-shell { grid-template-columns: minmax(0, 1fr); } } .wta-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: clamp(18px, 2vw, 28px); flex-wrap: wrap; } .wta-sechead__t { margin: 0; font-size: clamp(1.28rem, 1.1rem + .7vw, 1.65rem); display: flex; align-items: center; gap: 11px; } .wta-sechead__t::before { content: ""; width: 6px; height: 1.05em; border-radius: 3px; background: var(--wta-sec, var(--wta-indigo)); flex: none; } .wta-sechead__sub { margin: 4px 0 0; color: var(--wta-muted); font-size: .93rem; } .wta-sechead__more { font-family: var(--wta-font-head); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; color: var(--wta-ink-2); white-space: nowrap; } .wta-sechead__more:hover { color: var(--wta-indigo); } .wta-sechead__more svg { width: 16px; height: 16px; } /* ========================================================================= 4. Buttons / chips / badges ========================================================================= */ .wta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--wta-r-pill); border: 1px solid transparent; background: var(--wta-indigo); color: #fff; font-family: var(--wta-font-head); font-weight: 600; font-size: .94rem; line-height: 1.2; cursor: pointer; text-align: center; transition: transform .14s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; } .wta-btn:hover { background: var(--wta-indigo-600); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(79, 70, 229, .7); } .wta-btn:active { transform: translateY(0); } .wta-btn svg { width: 18px; height: 18px; flex: none; } .wta-btn--amber { background: var(--wta-amber); color: #2B1D02; } .wta-btn--amber:hover { background: var(--wta-amber-600); color: #2B1D02; box-shadow: 0 8px 18px -8px rgba(217, 119, 6, .75); } .wta-btn--ghost { background: transparent; border-color: var(--wta-line); color: var(--wta-ink); } .wta-btn--ghost:hover { background: var(--wta-bg-alt); border-color: var(--wta-indigo); color: var(--wta-indigo); box-shadow: none; } .wta-btn--onDark { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; } .wta-btn--onDark:hover { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; } .wta-btn--sm { padding: 8px 15px; font-size: .86rem; } .wta-btn--lg { padding: 14px 28px; font-size: 1rem; } .wta-btn--block { width: 100%; } .wta-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--wta-r-pill); background: var(--wta-bg-sunk); color: var(--wta-ink-2); font-family: var(--wta-font-head); font-weight: 600; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.6; } .wta-chip svg { width: 13px; height: 13px; } .wta-chip--sec { background: color-mix(in srgb, var(--wta-sec, var(--wta-indigo)) 13%, transparent); color: var(--wta-sec, var(--wta-indigo)); } .wta-chip--solid { background: var(--wta-sec, var(--wta-indigo)); color: #fff; } .wta-chip--onDark { background: rgba(255,255,255,.14); color: #fff; } .wta-eyebrow { font-family: var(--wta-font-head); font-weight: 700; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wta-amber-600); margin: 0 0 10px; display: block; } html[data-scheme="dark"] .wta-eyebrow { color: var(--wta-amber); } .wta-eyebrow--onDark { color: var(--wta-amber); } /* ========================================================================= 5. Header ========================================================================= */ .wta-topbar { background: var(--wta-dark); color: var(--wta-on-dark-muted); font-size: .82rem; } .wta-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; flex-wrap: wrap; } .wta-topbar__l, .wta-topbar__r { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .wta-topbar a { color: var(--wta-on-dark-muted); } .wta-topbar a:hover { color: #fff; } .wta-topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .wta-topbar__item svg { width: 15px; height: 15px; } .wta-topbar__date { color: var(--wta-faint); } .wta-social { display: inline-flex; align-items: center; gap: 4px; } .wta-social a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; transition: background-color .16s ease; } .wta-social a:hover { background: rgba(255,255,255,.14); } .wta-social svg { width: 15px; height: 15px; } .wta-header { background: var(--wta-bg); border-bottom: 1px solid var(--wta-line); position: relative; z-index: 60; } .wta-header--sticky { position: sticky; top: 0; } body.admin-bar .wta-header--sticky { top: 32px; } @media (max-width: 782px) { body.admin-bar .wta-header--sticky { top: 46px; } } .wta-header.is-stuck { box-shadow: var(--wta-shadow); } .wta-header__in { display: flex; align-items: center; gap: 18px; min-height: 72px; } .wta-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--wta-ink); max-width: 300px; } .wta-brand:hover { color: var(--wta-ink); } /* No `display` here: the light/dark switch below is a single-class selector and `.wta-brand img` would out-specify it, leaving both lockups laid out. */ .wta-brand img, .wta-brand svg { max-height: 44px; width: auto; } .wta-brand__txt { display: flex; flex-direction: column; } .wta-brand__name { font-family: var(--wta-font-head); font-weight: 700; font-size: 1.32rem; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; } .wta-brand__name b { color: var(--wta-indigo); font-weight: 700; } .wta-brand__tag { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wta-faint); line-height: 1.3; margin-top: 2px; } .wta-brand__logo { display: none; } html:not([data-scheme="dark"]) .wta-brand__logo--light { display: block; } html[data-scheme="dark"] .wta-brand__logo--dark { display: block; } @media (max-width: 420px) { .wta-brand { max-width: 178px; } .wta-brand img { max-height: 38px; } } .wta-nav { margin-left: auto; } .wta-nav ul { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; } .wta-nav li { position: relative; } .wta-nav a { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-radius: var(--wta-r-sm); font-family: var(--wta-font-head); font-weight: 600; font-size: .94rem; color: var(--wta-ink-2); white-space: nowrap; } .wta-nav a:hover, .wta-nav .current-menu-item > a, .wta-nav .current-menu-ancestor > a, .wta-nav .current_page_item > a { background: var(--wta-bg-alt); color: var(--wta-indigo); } .wta-nav .menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; } .wta-nav .sub-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 208px; flex-direction: column; align-items: stretch; gap: 0; background: var(--wta-surface); border: 1px solid var(--wta-line); border-radius: var(--wta-r); box-shadow: var(--wta-shadow); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 20; } .wta-nav li:hover > .sub-menu, .wta-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .wta-nav .sub-menu .sub-menu { top: -7px; left: calc(100% + 4px); } .wta-nav .sub-menu a { font-weight: 500; font-size: .9rem; } .wta-hactions { display: flex; align-items: center; gap: 6px; flex: none; } .wta-iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--wta-r-sm); border: 1px solid var(--wta-line); background: var(--wta-surface); color: var(--wta-ink-2); cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease; } .wta-iconbtn:hover { background: var(--wta-bg-alt); color: var(--wta-indigo); border-color: var(--wta-indigo-300); } .wta-iconbtn svg { width: 19px; height: 19px; } .wta-scheme__sun { display: none; } html[data-scheme="dark"] .wta-scheme__sun { display: block; } html[data-scheme="dark"] .wta-scheme__moon { display: none; } .wta-burger { display: none; } /* Nine primary items plus the logo and four actions need about 1200px. Below that the nav moves into the off-canvas menu rather than wrapping or overflowing. */ @media (max-width: 1200px) { .wta-nav { display: none; } .wta-burger { display: grid; } } @media (max-width: 640px) { .wta-header__in { min-height: 62px; gap: 10px; } .wta-brand__tag { display: none; } .wta-brand__name { font-size: 1.14rem; } .wta-hactions .wta-btn { display: none; } } /* Topic rail */ .wta-rail { background: var(--wta-bg-alt); border-bottom: 1px solid var(--wta-line); position: relative; z-index: 50; } .wta-rail__in { display: flex; align-items: center; gap: 10px; min-height: 46px; overflow-x: auto; scrollbar-width: none; } .wta-rail__in::-webkit-scrollbar { display: none; } .wta-rail__lbl { font-family: var(--wta-font-head); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wta-faint); flex: none; padding-right: 4px; } .wta-rail a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--wta-r-pill); background: var(--wta-surface); border: 1px solid var(--wta-line); color: var(--wta-ink-2); font-family: var(--wta-font-head); font-weight: 600; font-size: .84rem; white-space: nowrap; } .wta-rail a:hover { border-color: var(--wta-sec, var(--wta-indigo)); color: var(--wta-sec, var(--wta-indigo)); } .wta-rail a .wta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wta-sec, var(--wta-indigo)); flex: none; } /* Search drawer */ .wta-searchdrawer { position: fixed; inset: 0; z-index: 200; background: rgba(14, 16, 32, .6); backdrop-filter: blur(3px); display: grid; place-items: start center; padding: clamp(60px, 14vh, 150px) var(--wta-gutter) 20px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; } .wta-searchdrawer.is-open { opacity: 1; visibility: visible; } .wta-searchdrawer__box { width: min(660px, 100%); /* Without this the grid item takes its min-content width, which a text input plus a button pushes to ~375px — wider than a 360px phone. */ min-width: 0; background: var(--wta-surface); border-radius: var(--wta-r-lg); box-shadow: var(--wta-shadow-lg); padding: 26px; transform: translateY(-14px); transition: transform .22s ease; } .wta-searchdrawer.is-open .wta-searchdrawer__box { transform: translateY(0); } .wta-searchdrawer__t { font-size: 1.1rem; margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; } .wta-searchdrawer__hint { margin: 12px 0 0; font-size: .84rem; color: var(--wta-muted); } .wta-searchform { display: flex; gap: 8px; min-width: 0; } .wta-searchform input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 12px 16px; border-radius: var(--wta-r-pill); border: 1px solid var(--wta-line); background: var(--wta-bg-alt); color: var(--wta-ink); } .wta-searchform input[type="search"]:focus { background: var(--wta-surface); border-color: var(--wta-indigo); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wta-indigo) 20%, transparent); } /* Off-canvas */ .wta-oc { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--wta-surface); z-index: 220; transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; box-shadow: var(--wta-shadow-lg); } .wta-oc.is-open { transform: translateX(0); } .wta-oc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--wta-line); flex: none; } .wta-oc__body { padding: 18px; overflow-y: auto; flex: 1 1 auto; } .wta-oc__body ul { list-style: none; margin: 0 0 18px; padding: 0; } .wta-oc__body li { border-bottom: 1px solid var(--wta-line-soft); } .wta-oc__body .sub-menu { margin: 0 0 0 14px; border-left: 2px solid var(--wta-line); } .wta-oc__body .sub-menu li:last-child { border-bottom: 0; } .wta-oc__body a { display: block; padding: 11px 2px; font-family: var(--wta-font-head); font-weight: 600; color: var(--wta-ink); } .wta-oc__body a:hover { color: var(--wta-indigo); } .wta-oc__foot { padding: 16px 18px; border-top: 1px solid var(--wta-line); display: grid; gap: 10px; flex: none; } .wta-overlay { position: fixed; inset: 0; background: rgba(14, 16, 32, .55); z-index: 210; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s; } .wta-overlay.is-open { opacity: 1; visibility: visible; } body.wta-locked { overflow: hidden; } /* ========================================================================= 6. Cards ========================================================================= */ .wta-card { position: relative; display: flex; flex-direction: column; background: var(--wta-surface); border: 1px solid var(--wta-line); border-radius: var(--wta-r); overflow: hidden; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .wta-card:hover { transform: translateY(-3px); box-shadow: var(--wta-shadow); border-color: var(--wta-line); } .wta-card__media { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--wta-bg-sunk); overflow: hidden; } .wta-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .wta-card:hover .wta-card__media img { transform: scale(1.04); } /* The chip sits beside the media link rather than inside it — see the note in wta_card(). It is positioned against the card, whose top edge is the image. */ .wta-card > .wta-chip { position: absolute; left: 12px; top: 12px; z-index: 3; } .wta-card--flat > .wta-chip { left: 10px; top: 10px; } .wta-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; } .wta-card__t { font-size: 1.08rem; margin: 0; line-height: 1.32; } .wta-card__t a { color: var(--wta-ink); } .wta-card__t a:hover { color: var(--wta-indigo); } .wta-card__x { margin: 0; color: var(--wta-muted); font-size: .92rem; line-height: 1.6; } .wta-card__meta { margin-top: auto; padding-top: 4px; } .wta-card--lg .wta-card__t { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); } .wta-card--flat { border: 0; background: transparent; } .wta-card--flat:hover { transform: none; box-shadow: none; } .wta-card--flat .wta-card__media { border-radius: var(--wta-r); } .wta-card--flat .wta-card__body { padding: 14px 0 0; } .wta-ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--wta-bg-sunk), var(--wta-bg-alt)); color: var(--wta-faint); } .wta-ph svg { width: 34px; height: 34px; opacity: .55; } .wta-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--wta-muted); font-size: .83rem; line-height: 1.5; } .wta-meta > * { display: inline-flex; align-items: center; gap: 5px; } .wta-meta svg { width: 14px; height: 14px; opacity: .75; } .wta-meta a { color: var(--wta-muted); } .wta-meta a:hover { color: var(--wta-indigo); } /* Separator hangs off the *preceding* item, so a wrapped line never starts with a stray dot. */ .wta-meta > *:not(:last-child):after { content: "\00B7"; margin-left: 8px; color: var(--wta-faint); opacity: .8; } .wta-meta__avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; } /* Grid and flex children default to min-width:auto, i.e. their min-content width. A search input's min-content is ~310px, which is how a 336px sidebar track ends up holding a 420px widget. Zero-specificity so any rule can win. */ :where( .wta-shell, .wta-sidebar, .wta-grid, .wta-split, .wta-hero, .wta-hero__side, .wta-topics, .wta-tiers, .wta-steps, .wta-dos, .wta-nlband, .wta-prevnext, .wta-authorcards, .wta-gp-stats, .wta-gp-hero, .wta-authorhead, .wta-authorbox, .wta-li, .wta-num li, .wta-card, .wta-widget, .wta-form__row, .wta-field ) > * { min-width: 0; } /* Grids */ .wta-grid { display: grid; gap: clamp(18px, 2.2vw, 28px); } .wta-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wta-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wta-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 980px) { .wta-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wta-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .wta-grid--2, .wta-grid--3, .wta-grid--4 { grid-template-columns: minmax(0, 1fr); } } /* Horizontal list item */ .wta-li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--wta-line-soft); } .wta-li:last-child { border-bottom: 0; } .wta-li__media { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--wta-r-sm); overflow: hidden; background: var(--wta-bg-sunk); } .wta-li__media img { width: 100%; height: 100%; object-fit: cover; } .wta-li__t { font-size: 1rem; margin: 0 0 6px; line-height: 1.35; } .wta-li__t a { color: var(--wta-ink); } .wta-li__t a:hover { color: var(--wta-indigo); } .wta-li--wide { grid-template-columns: 150px minmax(0, 1fr); } .wta-li--wide .wta-li__t { font-size: 1.1rem; } @media (max-width: 480px) { .wta-li, .wta-li--wide { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; } .wta-li__t, .wta-li--wide .wta-li__t { font-size: .96rem; } } /* Numbered list */ .wta-num { list-style: none; margin: 0; padding: 0; counter-reset: wtanum; display: grid; gap: 2px; } .wta-num li { counter-increment: wtanum; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--wta-line-soft); } .wta-num li:last-child { border-bottom: 0; } .wta-num li::before { content: counter(wtanum, decimal-leading-zero); font-family: var(--wta-font-head); font-weight: 700; font-size: 1.12rem; color: var(--wta-amber-600); line-height: 1.2; } html[data-scheme="dark"] .wta-num li::before { color: var(--wta-amber); } .wta-num h3 { font-size: 1.02rem; margin: 0 0 5px; line-height: 1.35; } .wta-num h3 a { color: var(--wta-ink); } .wta-num h3 a:hover { color: var(--wta-indigo); } /* ========================================================================= 7. Front page blocks ========================================================================= */ .wta-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(18px, 2.2vw, 26px); align-items: stretch; } @media (max-width: 900px) { .wta-hero { grid-template-columns: minmax(0, 1fr); } } .wta-hero__lead { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(320px, 42vw, 470px); border-radius: var(--wta-r-lg); overflow: hidden; background: linear-gradient(135deg, var(--wta-indigo-700), var(--wta-indigo) 55%, #6D28D9); color: #fff; isolation: isolate; } .wta-hero__lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .wta-hero__lead::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 12, 26, 0) 22%, rgba(10, 12, 26, .55) 58%, rgba(10, 12, 26, .92) 100%); } .wta-hero__leadbody { position: relative; z-index: 2; padding: clamp(20px, 3vw, 34px); display: grid; gap: 10px; } /* The lead body is a grid, so an inline-flex chip would stretch to the full column width. */ .wta-hero__leadbody > .wta-chip { justify-self: start; } .wta-hero__leadbody h2 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.2rem); margin: 0; color: #fff; text-wrap: balance; } .wta-hero__leadbody h2 a { color: #fff; } .wta-hero__leadbody h2 a:hover { color: var(--wta-amber); } .wta-hero__leadbody .wta-meta { color: rgba(255,255,255,.8); } .wta-hero__leadbody .wta-meta a { color: rgba(255,255,255,.8); } .wta-hero__leadbody .wta-meta a:hover { color: #fff; } .wta-hero__leadbody .wta-meta > *:not(:last-child):after { color: rgba(255,255,255,.5); } .wta-hero__x { margin: 0; color: rgba(255,255,255,.85); font-size: .96rem; max-width: 60ch; } @media (max-width: 560px) { .wta-hero__x { display: none; } } .wta-hero__side { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-auto-rows: 1fr; } .wta-hero__side .wta-card { height: 100%; } .wta-spot { background: radial-gradient(900px 340px at 15% 0%, rgba(124, 123, 245, .28), transparent 65%), radial-gradient(700px 320px at 90% 100%, rgba(245, 158, 11, .22), transparent 60%), var(--wta-dark); color: var(--wta-on-dark); } .wta-spot .wta-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } .wta-spot .wta-card__t a { color: #fff; } .wta-spot .wta-card__t a:hover { color: var(--wta-amber); } .wta-spot .wta-card__x, .wta-spot .wta-meta, .wta-spot .wta-meta a { color: var(--wta-on-dark-muted); } .wta-spot .wta-sechead__t { color: #fff; } .wta-spot .wta-sechead__sub { color: var(--wta-on-dark-muted); } .wta-spot .wta-sechead__more { color: var(--wta-on-dark); } .wta-spot .wta-sechead__more:hover { color: var(--wta-amber); } .wta-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; } @media (max-width: 900px) { .wta-split { grid-template-columns: minmax(0, 1fr); } } .wta-plate { background: var(--wta-surface); border: 1px solid var(--wta-line); border-radius: var(--wta-r-lg); padding: clamp(18px, 2.4vw, 28px); } /* Newsletter band */ .wta-nlband { background: linear-gradient(120deg, var(--wta-indigo-700), var(--wta-indigo) 58%, #7C3AED); color: #fff; border-radius: var(--wta-r-lg); padding: clamp(24px, 3.4vw, 42px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(20px, 3vw, 40px); align-items: center; } @media (max-width: 860px) { .wta-nlband { grid-template-columns: minmax(0, 1fr); } } .wta-nlband h2 { color: #fff; margin: 0 0 8px; } .wta-nlband p { margin: 0; color: rgba(255,255,255,.86); } .wta-nl__form { display: grid; gap: 10px; min-width: 0; } .wta-nl__row { display: flex; gap: 8px; min-width: 0; } .wta-nl__row > * { min-width: 0; } /* In a 336px sidebar an input beside a full-width button cannot fit; stack them. */ .wta-nl--sidebar .wta-nl__row { flex-direction: column; } .wta-nl__row input[type="email"] { flex: 1 1 auto; min-width: 0; padding: 12px 16px; border-radius: var(--wta-r-pill); border: 1px solid var(--wta-line); background: var(--wta-bg-alt); color: var(--wta-ink); } .wta-nl__row input[type="email"]:focus { outline: none; border-color: var(--wta-indigo); background: var(--wta-surface); } .wta-nl__fine { margin: 0; font-size: .78rem; opacity: .8; line-height: 1.5; } /* In the wide band the button must not stretch to full width. */ .wta-nlband .wta-nl__row .wta-btn { flex: 0 0 auto; width: auto; } .wta-nlband .wta-nl__row input[type="email"] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; } .wta-nlband .wta-nl__row input[type="email"]::placeholder { color: rgba(255,255,255,.7); } .wta-nlband .wta-nl__row input[type="email"]:focus { background: rgba(255,255,255,.22); border-color: #fff; } @media (max-width: 480px) { .wta-nl__row { flex-direction: column; } .wta-nlband .wta-nl__row .wta-btn { width: 100%; } } .wta-notice { padding: 11px 15px; border-radius: var(--wta-r-sm); font-size: .9rem; border: 1px solid transparent; margin: 0 0 14px; } .wta-notice--ok { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; } .wta-notice--err { background: #FEF2F2; border-color: #FECACA; color: #991B1B; } html[data-scheme="dark"] .wta-notice--ok { background: #06281D; border-color: #10603F; color: #6EE7B7; } html[data-scheme="dark"] .wta-notice--err { background: #2C1113; border-color: #7F2225; color: #FCA5A5; } .wta-nlband .wta-notice { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); color: #fff; } /* ========================================================================= 8. Page head / breadcrumbs ========================================================================= */ .wta-pagehead { background: radial-gradient(700px 260px at 12% -20%, rgba(124, 123, 245, .3), transparent 62%), var(--wta-dark); color: var(--wta-on-dark); padding-block: clamp(30px, 4vw, 52px); } .wta-pagehead h1 { color: #fff; margin: 0 0 10px; } .wta-pagehead__x { margin: 0; color: var(--wta-on-dark-muted); max-width: 68ch; } .wta-crumbs { font-size: .82rem; color: var(--wta-muted); padding-block: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; } .wta-crumbs a { color: var(--wta-muted); } .wta-crumbs a:hover { color: var(--wta-indigo); } .wta-crumbs__sep { opacity: .5; } .wta-crumbs [aria-current] { color: var(--wta-ink-2); } .wta-pagehead .wta-crumbs, .wta-pagehead .wta-crumbs a { color: var(--wta-on-dark-muted); } .wta-pagehead .wta-crumbs a:hover { color: #fff; } .wta-pagehead .wta-crumbs [aria-current] { color: #fff; } /* ========================================================================= 9. Single post ========================================================================= */ .wta-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--wta-indigo), var(--wta-amber)); z-index: 300; transition: width .1s linear; pointer-events: none; } .wta-article__head { margin-bottom: 22px; } .wta-article__title { margin: 0 0 14px; text-wrap: balance; } .wta-article__lede { font-size: 1.12rem; color: var(--wta-ink-2); line-height: 1.65; margin: 0 0 16px; max-width: 70ch; } .wta-article__byline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--wta-line); border-bottom: 1px solid var(--wta-line); } .wta-article__byavatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; } .wta-article__byname { font-family: var(--wta-font-head); font-weight: 600; color: var(--wta-ink); } .wta-article__byname a { color: var(--wta-ink); } .wta-article__byname a:hover { color: var(--wta-indigo); } .wta-figure { margin: 0 0 26px; border-radius: var(--wta-r); overflow: hidden; background: var(--wta-bg-sunk); } .wta-figure img { width: 100%; display: block; } .wta-figure figcaption { padding: 9px 4px 0; font-size: .83rem; color: var(--wta-muted); } .wta-content { font-size: 1.05rem; line-height: 1.78; } .wta-content > *:first-child { margin-top: 0; } .wta-content h2 { margin: 1.9em 0 .6em; font-size: clamp(1.36rem, 1.15rem + .8vw, 1.72rem); } .wta-content h3 { margin: 1.6em 0 .5em; font-size: clamp(1.14rem, 1.03rem + .5vw, 1.34rem); } .wta-content h4 { margin: 1.4em 0 .45em; } .wta-content a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .wta-content a:hover { text-decoration-thickness: 2px; } .wta-content ul, .wta-content ol { padding-left: 1.35em; } .wta-content li { margin-bottom: .5em; } .wta-content img { border-radius: var(--wta-r); } .wta-content figure { margin: 1.8em 0; } .wta-content figcaption { font-size: .84rem; color: var(--wta-muted); text-align: center; margin-top: 8px; } .wta-content blockquote { margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--wta-amber); font-size: 1.1rem; color: var(--wta-ink-2); font-style: italic; } .wta-content blockquote p:last-child { margin-bottom: 0; } .wta-content pre { background: var(--wta-dark); color: #E7E9F5; padding: 16px 18px; border-radius: var(--wta-r); overflow-x: auto; font-family: var(--wta-font-mono); font-size: .88rem; line-height: 1.6; } .wta-content code { font-family: var(--wta-font-mono); font-size: .89em; background: var(--wta-bg-sunk); padding: .14em .4em; border-radius: 5px; } .wta-content pre code { background: none; padding: 0; } .wta-content table { width: 100%; border-collapse: collapse; font-size: .95rem; } .wta-content table th, .wta-content table td { border: 1px solid var(--wta-line); padding: 10px 13px; text-align: left; } .wta-content table th { background: var(--wta-bg-alt); font-family: var(--wta-font-head); } .wta-tablewrap { overflow-x: auto; margin: 0 0 1.4em; } /* Heading anchor links */ .wta-h-anchor { position: relative; scroll-margin-top: var(--wta-sticky); } .wta-anchorlink { opacity: 0; margin-left: .35em; font-size: .72em; color: var(--wta-faint); text-decoration: none !important; transition: opacity .15s ease, color .15s ease; vertical-align: middle; } .wta-h-anchor:hover .wta-anchorlink, .wta-anchorlink:focus { opacity: 1; color: var(--wta-indigo); } @media (hover: none) { .wta-anchorlink { display: none; } } /* Table of contents */ .wta-toc { background: var(--wta-bg-alt); border: 1px solid var(--wta-line); border-left: 4px solid var(--wta-indigo); border-radius: var(--wta-r); padding: 16px 20px; margin: 0 0 26px; font-size: .96rem; line-height: 1.6; } .wta-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* It lives inside .wta-content, so it must opt out of long-form styles. */ .wta-toc__t { margin: 0; font-size: 1rem !important; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; } .wta-content .wta-toc__t { margin: 0; } .wta-toc__t svg { width: 18px; height: 18px; color: var(--wta-indigo); } .wta-toc__toggle { background: none; border: 0; color: var(--wta-muted); cursor: pointer; font-family: var(--wta-font-head); font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 6px; } .wta-toc__toggle:hover { color: var(--wta-indigo); background: var(--wta-bg-sunk); } .wta-toc__toggle svg { width: 15px; height: 15px; transition: transform .2s ease; } .wta-toc.is-collapsed .wta-toc__toggle svg { transform: rotate(-90deg); } .wta-toc.is-collapsed .wta-toc__list { display: none; } .wta-toc__list { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: wtatoc; } .wta-content .wta-toc__list { padding-left: 0; margin-left: 0; } .wta-toc__list li { margin: 0 0 7px; counter-increment: wtatoc; } .wta-toc__list > li > a::before { content: counter(wtatoc) ". "; color: var(--wta-faint); font-variant-numeric: tabular-nums; } .wta-content .wta-toc__list a { color: var(--wta-ink-2); text-decoration: none; font-weight: 500; } .wta-content .wta-toc__list a:hover { color: var(--wta-indigo); text-decoration: underline; } .wta-toc__sub { list-style: none; margin: 6px 0 8px 18px; padding: 0; counter-reset: none; border-left: 2px solid var(--wta-line); } .wta-content .wta-toc__sub { padding-left: 12px; } .wta-toc__sub li { font-size: .91rem; } .wta-toc__sub li::marker { content: none; } .wta-toc__sub > li > a::before { content: "– "; color: var(--wta-faint); } /* Share */ .wta-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 28px 0; padding: 16px 0; border-top: 1px solid var(--wta-line); border-bottom: 1px solid var(--wta-line); } .wta-share__lbl { font-family: var(--wta-font-head); font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wta-faint); margin-right: 4px; } .wta-share a, .wta-share button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--wta-line); background: var(--wta-surface); color: var(--wta-ink-2); cursor: pointer; transition: transform .14s ease, background-color .16s ease, color .16s ease, border-color .16s ease; } .wta-share a:hover, .wta-share button:hover { transform: translateY(-2px); color: #fff; border-color: transparent; } .wta-share svg { width: 17px; height: 17px; } .wta-share .s-x:hover { background: #14171A; } .wta-share .s-fb:hover { background: #1877F2; } .wta-share .s-li:hover { background: #0A66C2; } .wta-share .s-wa:hover { background: #25D366; } .wta-share .s-tg:hover { background: #229ED9; } .wta-share .s-cp:hover { background: var(--wta-indigo); } .wta-share .s-cp.is-done { background: #10B981; color: #fff; border-color: transparent; } .wta-rail-share { position: sticky; top: calc(var(--wta-sticky) + 12px); display: none; flex-direction: column; gap: 8px; align-items: center; } /* The rail reuses the share row markup, so the row itself has to be turned from a bordered horizontal strip into a bare vertical stack — otherwise it keeps its full width and lies across the article text. */ .wta-share--rail { flex-direction: column; gap: 8px; width: 44px; margin: 0; padding: 0; border: 0; } .wta-share--rail .wta-share__lbl { display: none; } @media (min-width: 1320px) { .wta-single--rail { position: relative; } .wta-single--rail .wta-rail-share { display: flex; position: absolute; left: -62px; top: 0; width: 44px; height: 100%; } .wta-rail-share__in { position: sticky; top: calc(var(--wta-sticky) + 16px); display: flex; flex-direction: column; gap: 8px; } } .wta-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0; } .wta-tags a { display: inline-flex; padding: 5px 12px; border-radius: var(--wta-r-pill); background: var(--wta-bg-alt); border: 1px solid var(--wta-line); color: var(--wta-ink-2); font-size: .84rem; } .wta-tags a:hover { background: var(--wta-indigo); border-color: var(--wta-indigo); color: #fff; } .wta-authorbox { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 18px; padding: 22px; border: 1px solid var(--wta-line); border-radius: var(--wta-r); background: var(--wta-bg-alt); margin: 30px 0; } .wta-authorbox img, .wta-authorbox .wta-initials { width: 82px; height: 82px; border-radius: 50%; object-fit: cover; } .wta-authorbox__name { margin: 0 0 3px; font-size: 1.14rem; } .wta-authorbox__role { font-size: .84rem; color: var(--wta-amber-600); font-family: var(--wta-font-head); font-weight: 600; margin: 0 0 8px; } html[data-scheme="dark"] .wta-authorbox__role { color: var(--wta-amber); } .wta-authorbox__bio { margin: 0 0 10px; color: var(--wta-ink-2); font-size: .95rem; } .wta-authorbox__links { display: flex; gap: 12px; flex-wrap: wrap; font-size: .86rem; } @media (max-width: 520px) { .wta-authorbox { grid-template-columns: minmax(0, 1fr); } .wta-authorbox img, .wta-authorbox .wta-initials { width: 66px; height: 66px; } } .wta-initials { display: grid; place-items: center; background: linear-gradient(135deg, var(--wta-indigo), #7C3AED); color: #fff; font-family: var(--wta-font-head); font-weight: 700; letter-spacing: .02em; flex: none; } .wta-prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 28px 0; } @media (max-width: 620px) { .wta-prevnext { grid-template-columns: minmax(0, 1fr); } } .wta-prevnext a { display: block; padding: 16px 18px; border: 1px solid var(--wta-line); border-radius: var(--wta-r); background: var(--wta-surface); color: var(--wta-ink); } .wta-prevnext a:hover { border-color: var(--wta-indigo); color: var(--wta-ink); } .wta-prevnext__lbl { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wta-faint); font-family: var(--wta-font-head); font-weight: 700; margin-bottom: 6px; } .wta-prevnext__t { font-family: var(--wta-font-head); font-weight: 600; line-height: 1.35; } .wta-prevnext .is-next { text-align: right; } .wta-sponsored { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--wta-r); background: var(--wta-amber-soft); border: 1px solid color-mix(in srgb, var(--wta-amber) 45%, transparent); font-size: .9rem; color: var(--wta-ink-2); margin: 0 0 22px; } .wta-sponsored svg { width: 20px; height: 20px; color: var(--wta-amber-600); flex: none; } .wta-sponsored p { margin: 0; } /* ========================================================================= 10. Sidebar ========================================================================= */ .wta-sidebar { position: sticky; top: calc(var(--wta-sticky) + 16px); display: grid; gap: 22px; align-self: start; } @media (max-width: 1040px) { .wta-sidebar { position: static; } } .wta-widget { background: var(--wta-surface); border: 1px solid var(--wta-line); border-radius: var(--wta-r); padding: 18px 20px; } .wta-widget__t, .wta-widget .widget-title, .wta-widget .wp-block-heading { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--wta-font-head); font-weight: 700; color: var(--wta-faint); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--wta-line-soft); } .wta-widget ul { list-style: none; margin: 0; padding: 0; } .wta-widget li { padding: 7px 0; } .wta-widget li a { color: var(--wta-ink-2); font-size: .94rem; } .wta-widget li a:hover { color: var(--wta-indigo); } .wta-widget .wta-li { padding: 12px 0; } .wta-widget p:last-child { margin-bottom: 0; } .wta-widget select { width: 100%; padding: 9px 11px; border-radius: var(--wta-r-sm); border: 1px solid var(--wta-line); background: var(--wta-bg-alt); } .wta-widget--wa { background: linear-gradient(140deg, #0F8B4C, #25D366); border-color: transparent; color: #fff; } .wta-widget--wa .wta-widget__t { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25); } .wta-widget--wa p { color: rgba(255,255,255,.9); font-size: .92rem; } .wta-widget--wa .wta-btn { background: #fff; color: #0F6B3C; } .wta-widget--wa .wta-btn:hover { background: #F0FFF6; color: #0F6B3C; } .wta-widget--gp { background: linear-gradient(140deg, var(--wta-indigo-700), #7C3AED); border-color: transparent; color: #fff; } .wta-widget--gp .wta-widget__t { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25); } .wta-widget--gp p { color: rgba(255,255,255,.9); font-size: .92rem; } .wta-widget--gp .wta-btn { background: var(--wta-amber); color: #2B1D02; } .wta-widget--gp .wta-btn:hover { background: #FBBF24; color: #2B1D02; } .wta-seclist { display: grid; gap: 6px; } .wta-seclist a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--wta-r-sm); background: var(--wta-bg-alt); color: var(--wta-ink-2); font-family: var(--wta-font-head); font-weight: 600; font-size: .92rem; } .wta-seclist a:hover { background: var(--wta-sec, var(--wta-indigo)); color: #fff; } .wta-seclist a:hover .wta-seclist__n { color: rgba(255,255,255,.85); } .wta-seclist__ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--wta-sec, var(--wta-indigo)) 15%, transparent); color: var(--wta-sec, var(--wta-indigo)); flex: none; } .wta-seclist__ico svg { width: 16px; height: 16px; } .wta-seclist a:hover .wta-seclist__ico { background: rgba(255,255,255,.2); color: #fff; } .wta-seclist__n { margin-left: auto; font-size: .8rem; color: var(--wta-faint); font-variant-numeric: tabular-nums; } /* ========================================================================= 11. Footer ========================================================================= */ .wta-footer { background: var(--wta-dark); color: var(--wta-on-dark-muted); font-size: .93rem; } .wta-footer a { color: var(--wta-on-dark-muted); } .wta-footer a:hover { color: #fff; } .wta-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); padding-block: clamp(34px, 4.5vw, 58px); } @media (max-width: 980px) { .wta-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .wta-footer__top { grid-template-columns: minmax(0, 1fr); } } .wta-footer__t { font-family: var(--wta-font-head); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 14px; } .wta-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .wta-footer__about { max-width: 42ch; } .wta-footer__brand { margin-bottom: 14px; display: inline-flex; } .wta-footer__brand img, .wta-footer__brand svg { max-height: 46px; width: auto; } .wta-footer__contact li { display: flex; align-items: flex-start; gap: 9px; } .wta-footer__contact svg { width: 17px; height: 17px; flex: none; margin-top: 3px; opacity: .8; } .wta-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .86rem; color: var(--wta-faint); } .wta-footer__bottom nav { display: flex; gap: 16px; flex-wrap: wrap; } .wta-footer__bottom .wta-legal { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .wta-fwidget { margin-bottom: 18px; } .wta-fwidget:last-child { margin-bottom: 0; } .wta-fwidget ul { display: grid; gap: 9px; } .wta-footer .wta-social a { color: var(--wta-on-dark-muted); } .wta-footer .wta-social a:hover { color: #fff; } .wta-top { position: fixed; right: 22px; bottom: 96px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--wta-line); background: var(--wta-surface); color: var(--wta-ink-2); display: grid; place-items: center; cursor: pointer; z-index: 90; box-shadow: var(--wta-shadow-sm); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .wta-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); } .wta-top:hover { background: var(--wta-indigo); color: #fff; border-color: transparent; } /* ========================================================================= 12. WhatsApp float ========================================================================= */ .wta-wa { position: fixed; right: 20px; bottom: 22px; z-index: 95; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 15px; border-radius: var(--wta-r-pill); background: #25D366; color: #fff; box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .8); font-family: var(--wta-font-head); font-weight: 600; overflow: hidden; max-width: 54px; transition: max-width .32s cubic-bezier(.4, 0, .2, 1), background-color .2s ease; } .wta-wa:hover, .wta-wa:focus-visible { max-width: 280px; background: #1EBE5A; color: #fff; } .wta-wa__ico { width: 24px; height: 24px; flex: none; margin-left: -.5px; } .wta-wa__txt { white-space: nowrap; font-size: .93rem; opacity: 0; transition: opacity .2s ease .06s; } .wta-wa:hover .wta-wa__txt, .wta-wa:focus-visible .wta-wa__txt { opacity: 1; } .wta-wa::before { content: ""; position: absolute; left: 15px; top: 15px; width: 24px; height: 24px; border-radius: 50%; background: #25D366; animation: wta-halo 2.4s ease-out infinite; z-index: -1; } @keyframes wta-halo { 0% { transform: scale(1); opacity: .65; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } @media (max-width: 640px) { .wta-wa { right: 14px; bottom: 16px; } .wta-top { right: 16px; bottom: 82px; } } /* ========================================================================= 13. Guest post page ========================================================================= */ .wta-gp-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 44px); align-items: center; } @media (max-width: 900px) { .wta-gp-hero { grid-template-columns: minmax(0, 1fr); } } .wta-gp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wta-gp-stat { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--wta-r); padding: 16px 18px; } .wta-gp-stat__n { font-family: var(--wta-font-head); font-weight: 700; font-size: 1.7rem; color: #fff; line-height: 1.1; } .wta-gp-stat__l { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wta-on-dark-muted); margin-top: 4px; } .wta-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 860px) { .wta-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .wta-topics { grid-template-columns: minmax(0, 1fr); } } .wta-topic { display: flex; gap: 13px; padding: 17px; border: 1px solid var(--wta-line); border-radius: var(--wta-r); background: var(--wta-surface); } .wta-topic__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--wta-sec, var(--wta-indigo)) 14%, transparent); color: var(--wta-sec, var(--wta-indigo)); flex: none; } .wta-topic__ico svg { width: 20px; height: 20px; } .wta-topic h3 { font-size: 1.02rem; margin: 0 0 5px; } .wta-topic p { margin: 0; font-size: .9rem; color: var(--wta-muted); } .wta-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } @media (max-width: 900px) { .wta-tiers { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } } .wta-tier { border: 1px solid var(--wta-line); border-radius: var(--wta-r-lg); background: var(--wta-surface); padding: 24px; display: flex; flex-direction: column; gap: 14px; position: relative; } .wta-tier--feat { border-color: var(--wta-indigo); box-shadow: 0 18px 42px -22px rgba(79, 70, 229, .55); } .wta-tier__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--wta-amber); color: #2B1D02; padding: 4px 14px; border-radius: var(--wta-r-pill); font-family: var(--wta-font-head); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .wta-tier__n { font-size: 1.18rem; margin: 0; } .wta-tier__p { font-family: var(--wta-font-head); font-weight: 700; font-size: 2rem; color: var(--wta-indigo); line-height: 1.1; } .wta-tier__p small { font-size: .9rem; color: var(--wta-muted); font-weight: 500; } .wta-tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .93rem; } .wta-tier li { display: flex; gap: 9px; align-items: flex-start; color: var(--wta-ink-2); } .wta-tier li svg { width: 17px; height: 17px; color: #10B981; flex: none; margin-top: 3px; } .wta-tier .wta-btn { margin-top: auto; } .wta-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } @media (max-width: 760px) { .wta-dos { grid-template-columns: minmax(0, 1fr); } } .wta-do { border: 1px solid var(--wta-line); border-radius: var(--wta-r); padding: 20px 22px; background: var(--wta-surface); } .wta-do h3 { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; margin: 0 0 12px; } .wta-do h3 svg { width: 20px; height: 20px; flex: none; } .wta-do--yes { border-left: 4px solid #10B981; } .wta-do--yes h3 svg { color: #10B981; } .wta-do--no { border-left: 4px solid #EF4444; } .wta-do--no h3 svg { color: #EF4444; } .wta-do ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .94rem; color: var(--wta-ink-2); } .wta-do li { display: flex; gap: 9px; align-items: flex-start; } .wta-do li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wta-faint); flex: none; margin-top: .58em; } .wta-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: wtastep; } @media (max-width: 900px) { .wta-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .wta-steps { grid-template-columns: minmax(0, 1fr); } } .wta-step { counter-increment: wtastep; } .wta-step__n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--wta-indigo); color: #fff; font-family: var(--wta-font-head); font-weight: 700; margin-bottom: 12px; } .wta-step__n::before { content: counter(wtastep); } .wta-step h3 { font-size: 1.02rem; margin: 0 0 6px; } .wta-step p { margin: 0; font-size: .92rem; color: var(--wta-muted); } .wta-faq { display: grid; gap: 10px; } .wta-faq details { border: 1px solid var(--wta-line); border-radius: var(--wta-r); background: var(--wta-surface); overflow: hidden; } .wta-faq summary { cursor: pointer; padding: 15px 18px; font-family: var(--wta-font-head); font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .wta-faq summary::-webkit-details-marker { display: none; } .wta-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--wta-indigo); flex: none; } .wta-faq details[open] summary::after { content: "\2212"; } .wta-faq details > div { padding: 0 18px 16px; color: var(--wta-ink-2); font-size: .96rem; } .wta-faq details > div p:last-child { margin-bottom: 0; } .wta-form { display: grid; gap: 14px; } .wta-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 620px) { .wta-form__row { grid-template-columns: minmax(0, 1fr); } } .wta-field { display: grid; gap: 6px; } .wta-field label { font-family: var(--wta-font-head); font-weight: 600; font-size: .88rem; color: var(--wta-ink-2); } .wta-field .req { color: #EF4444; } .wta-field input, .wta-field select, .wta-field textarea { width: 100%; padding: 11px 14px; border-radius: var(--wta-r-sm); border: 1px solid var(--wta-line); background: var(--wta-bg-alt); color: var(--wta-ink); } .wta-field textarea { min-height: 130px; resize: vertical; } .wta-field input:focus, .wta-field select:focus, .wta-field textarea:focus { outline: none; border-color: var(--wta-indigo); background: var(--wta-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wta-indigo) 18%, transparent); } .wta-field__hint { font-size: .8rem; color: var(--wta-muted); } .wta-hp { position: absolute; left: -9999px; } /* ========================================================================= 14. Authors page / archive ========================================================================= */ .wta-authorhead { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 22px; align-items: center; } @media (max-width: 620px) { .wta-authorhead { grid-template-columns: minmax(0, 1fr); } } .wta-authorhead img, .wta-authorhead .wta-initials { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.2); } .wta-authorhead h1 { margin: 0 0 6px; } .wta-authorhead__role { color: var(--wta-amber); font-family: var(--wta-font-head); font-weight: 600; margin: 0 0 10px; } .wta-authorhead__bio { color: var(--wta-on-dark-muted); max-width: 70ch; margin: 0 0 12px; } .wta-authorhead__facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: .87rem; color: var(--wta-on-dark-muted); } .wta-authorhead__facts span { display: inline-flex; align-items: center; gap: 6px; } .wta-authorhead__facts svg { width: 15px; height: 15px; } .wta-authorcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } .wta-authorcard { border: 1px solid var(--wta-line); border-radius: var(--wta-r-lg); background: var(--wta-surface); padding: 26px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; } .wta-authorcard img, .wta-authorcard .wta-initials { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; font-size: 1.7rem; } .wta-authorcard h3 { margin: 0; font-size: 1.16rem; } .wta-authorcard__role { font-family: var(--wta-font-head); font-weight: 600; font-size: .86rem; color: var(--wta-amber-600); } html[data-scheme="dark"] .wta-authorcard__role { color: var(--wta-amber); } .wta-authorcard p { margin: 0; font-size: .93rem; color: var(--wta-muted); } .wta-authorcard__tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .wta-authorcard__links { display: flex; gap: 10px; justify-content: center; margin-top: 2px; } .wta-authorcard__links a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--wta-line); color: var(--wta-ink-2); } .wta-authorcard__links a:hover { background: var(--wta-indigo); color: #fff; border-color: transparent; } .wta-authorcard__links svg { width: 16px; height: 16px; } /* ========================================================================= 15. Pagination, comments, search ========================================================================= */ .wta-pagination { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 34px; } .wta-pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: var(--wta-r-sm); border: 1px solid var(--wta-line); background: var(--wta-surface); color: var(--wta-ink-2); font-family: var(--wta-font-head); font-weight: 600; font-size: .92rem; } .wta-pagination a.page-numbers:hover { border-color: var(--wta-indigo); color: var(--wta-indigo); } .wta-pagination .page-numbers.current { background: var(--wta-indigo); border-color: var(--wta-indigo); color: #fff; } .wta-pagination .page-numbers.dots { border-color: transparent; background: none; } .wta-comments { margin-top: 40px; } .wta-comments__t { font-size: 1.3rem; margin: 0 0 20px; } .wta-comments ol.comment-list { list-style: none; margin: 0 0 26px; padding: 0; } .wta-comments ol.children { list-style: none; margin: 0 0 0 26px; padding: 0; } @media (max-width: 560px) { .wta-comments ol.children { margin-left: 12px; } } .wta-comments .comment-body { padding: 16px 18px; border: 1px solid var(--wta-line); border-radius: var(--wta-r); background: var(--wta-surface); margin-bottom: 14px; } .wta-comments .comment-author { display: flex; align-items: center; gap: 10px; font-family: var(--wta-font-head); font-weight: 600; } .wta-comments .comment-author img { border-radius: 50%; } .wta-comments .comment-meta { font-size: .82rem; color: var(--wta-muted); margin: 4px 0 10px; } .wta-comments .reply a { font-size: .84rem; font-family: var(--wta-font-head); font-weight: 600; } .comment-respond { margin-top: 26px; } .comment-respond .comment-reply-title { font-size: 1.15rem; } .comment-form { display: grid; gap: 14px; } .comment-form p { margin: 0; } .comment-form label { display: block; font-family: var(--wta-font-head); font-weight: 600; font-size: .88rem; margin-bottom: 6px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 11px 14px; border-radius: var(--wta-r-sm); border: 1px solid var(--wta-line); background: var(--wta-bg-alt); color: var(--wta-ink); } .comment-form textarea { min-height: 130px; resize: vertical; } .comment-form .form-submit input[type="submit"], .wta-form input[type="submit"] { padding: 12px 24px; border-radius: var(--wta-r-pill); border: 0; background: var(--wta-indigo); color: #fff; font-family: var(--wta-font-head); font-weight: 600; cursor: pointer; } .comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: .88rem; } .comment-form .comment-form-cookies-consent input { width: auto; } .wta-empty { text-align: center; padding: clamp(36px, 6vw, 70px) 20px; border: 1px dashed var(--wta-line); border-radius: var(--wta-r-lg); background: var(--wta-bg-alt); } .wta-empty svg { width: 46px; height: 46px; color: var(--wta-faint); margin-bottom: 14px; } .wta-empty h2 { font-size: 1.3rem; margin: 0 0 8px; } .wta-empty p { color: var(--wta-muted); max-width: 52ch; margin-inline: auto; } .wta-empty__form { max-width: 420px; margin: 18px auto 0; } .wta-404 { text-align: center; padding: clamp(40px, 7vw, 90px) 0; } .wta-404__n { font-family: var(--wta-font-head); font-weight: 700; font-size: clamp(4.5rem, 3rem + 10vw, 9rem); line-height: 1; background: linear-gradient(120deg, var(--wta-indigo), var(--wta-amber)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } .wta-404__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } /* ========================================================================= 16. Gutenberg / core block compatibility ========================================================================= */ .wta-content .alignwide { margin-inline: calc(-1 * clamp(0px, 4vw, 70px)); max-width: none; } .wta-content .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; } @media (max-width: 900px) { .wta-content .alignwide { margin-inline: 0; } } .wta-content .alignleft { float: left; margin: .3em 1.4em 1em 0; } .wta-content .alignright { float: right; margin: .3em 0 1em 1.4em; } .wta-content .aligncenter { margin-inline: auto; display: block; } .wta-content .wp-caption { max-width: 100%; } .wta-content .wp-block-embed__wrapper { position: relative; } .wta-content .wp-block-embed iframe { max-width: 100%; } .wta-content .wp-block-button__link { background: var(--wta-indigo); color: #fff; border-radius: var(--wta-r-pill); padding: 11px 22px; text-decoration: none; font-family: var(--wta-font-head); font-weight: 600; } .wta-content .wp-block-separator { border-top: 1px solid var(--wta-line); } .wta-content .wp-block-pullquote { border-top: 3px solid var(--wta-amber); border-bottom: 3px solid var(--wta-amber); padding: 22px 0; } .wta-content .wp-block-table table { width: 100%; } .wta-content .sticky-badge { display: none; } /* Block widgets, for anyone who keeps the default widget set */ .wta-widget .wp-block-group__inner-container > *:last-child { margin-bottom: 0; } .wta-widget .wp-block-latest-posts, .wta-widget .wp-block-categories, .wta-widget .wp-block-archives, .wta-widget .wp-block-page-list { list-style: none; padding-left: 0; } .wta-widget .wp-block-latest-posts li, .wta-widget .wp-block-categories li, .wta-widget .wp-block-archives li { padding: 7px 0; } .wta-widget .wp-block-search__inside-wrapper { display: flex; gap: 8px; } .wta-widget .wp-block-search__input { flex: 1 1 auto; min-width: 0; padding: 10px 14px; border-radius: var(--wta-r-pill); border: 1px solid var(--wta-line); background: var(--wta-bg-alt); color: var(--wta-ink); } .wta-widget .wp-block-search__button { border: 0; border-radius: var(--wta-r-pill); background: var(--wta-indigo); color: #fff; padding: 10px 18px; font-family: var(--wta-font-head); font-weight: 600; cursor: pointer; } /* WP core classes */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } .wp-caption-text { font-size: .84rem; color: var(--wta-muted); } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .gallery-item { margin: 0; } /* ========================================================================= 17. Print ========================================================================= */ @media print { .wta-topbar, .wta-header, .wta-rail, .wta-footer, .wta-wa, .wta-top, .wta-share, .wta-sidebar, .wta-progress, .wta-oc, .wta-overlay, .wta-searchdrawer, .wta-prevnext, .wta-comments { display: none !important; } body { font-size: 12pt; background: #fff; color: #000; } .wta-shell { display: block; } a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; } .wta-content a[href^="#"]::after { content: ""; } }