/* ============================================================================= Arabic Casinos — theme stylesheet (v2.8.13, consolidated) One pass, top to bottom. Sections: 1. Tokens & reset 6. Article / page column 2. Layout & section chrome 7. Page-template chrome (templates/*.php) 3. Buttons 8. In-content components (TOC, mini-reviews, 4. Header & navigation pros/cons, FAQ, tables, images, widgets) 5. Homepage sections 9. Responsive, LTR Arabic typography rule: no letter-spacing anywhere text can be Arabic. Tracking breaks the joins of the cursive script. Latin-only chrome (language pill, payment tile lettering) is the only exception. ============================================================================= */ /* ---------- 1. Tokens & reset ---------------------------------------------- */ :root { --ac-bg: #ffffff; --ac-surface: #ffffff; --ac-surface-alt: #f7f4f4; --ac-text: #000000; --ac-text-muted: #2e2e33; --ac-border: #e6e0e0; --ac-primary: #d61228; --ac-primary-text: #ffffff; --ac-accent: #c30f22; --ac-light-bg: #ffffff; --ac-light-surface: #ffffff; --ac-light-text: #000000; --ac-light-muted: #2e2e33; --ac-light-border: #e6e0e0; --ac-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ac-font-serif: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ac-container: 1280px; --ac-pad: 56px; --ac-article: 860px; /* reading column */ --ac-widget: 1140px; /* affiliate widget desktop canvas */ } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ac-font-body); font-weight: 450; font-size: 15.5px; line-height: 1.9; color: var(--ac-text); background: var(--ac-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* The affiliate widget's stylesheet (widget.css) restyles once it loads (18px / #171717). Re-assert the theme's reading typography at higher specificity. */ html body { font-size: 15.5px; line-height: 1.9; color: var(--ac-text); } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; } p { margin: 0; } ul { list-style: none; margin: 0; padding: 0; } .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important; } .ac-skip-link:focus { left: auto; top: 16px; right: 16px; padding: 12px 16px; background: var(--ac-primary); color: #fff; z-index: 100000; } /* ---------- 2. Layout & section chrome ------------------------------------ */ .ac-container { max-width: var(--ac-container); margin: 0 auto; padding: 0 var(--ac-pad); } .ac-main { min-height: 60vh; } .ac-section { padding: 72px 0; position: relative; } .ac-section__head { margin-bottom: 36px; } .ac-section__head--with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .ac-section__kicker { font-size: 12px; font-weight: 800; color: var(--ac-accent); margin-bottom: 10px; } .ac-section__title { font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--ac-text); margin: 0; } .ac-section__title--md { font-size: 25px; } .ac-section__sub { color: var(--ac-text-muted); font-size: 16px; font-weight: 500; line-height: 1.7; margin-top: 12px; max-width: 640px; text-wrap: pretty; } /* ---------- 3. Buttons ----------------------------------------------------- */ .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 8px; border: 1px solid transparent; font-family: var(--ac-font-body); font-weight: 700; font-size: 14px; line-height: 1; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease; cursor: pointer; white-space: nowrap; } .ac-btn:hover { transform: translateY(-1px); } .ac-btn--primary { background: var(--ac-primary); color: var(--ac-primary-text); } .ac-btn--primary:hover { background: #c2152a; } .ac-btn--ghost { background: transparent; color: var(--ac-text); border-color: var(--ac-border); } .ac-btn--ghost:hover { border-color: var(--ac-accent); color: var(--ac-accent); } .ac-btn--lg { padding: 16px 26px; font-size: 15px; font-weight: 800; border-radius: 10px; } .ac-btn--sm { padding: 11px 16px; font-size: 13px; } .ac-btn--block { display: flex; width: 100%; padding: 14px; } /* ---------- 4. Header & navigation ---------------------------------------- */ .ac-header { background: var(--ac-bg); border-bottom: 1px solid var(--ac-border); padding: 20px 0; } .ac-header__inner { max-width: var(--ac-container); margin: 0 auto; padding: 0 var(--ac-pad); display: flex; align-items: center; gap: 32px; } /* Logo: uploaded image (Customize → Site Identity) or the text mark fallback */ .ac-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .ac-logo img.ac-logo__img { height: 48px; width: auto; display: block; } .ac-logo__mark { width: 44px; height: 44px; border-radius: 10px; background: var(--ac-primary); color: var(--ac-primary-text); display: grid; place-items: center; font-size: 24px; font-weight: 800; } .ac-logo__text { display: flex; flex-direction: column; line-height: 1; gap: 5px; } .ac-logo__title { font-size: 22px; font-weight: 700; color: var(--ac-text); } .ac-logo__tld { color: var(--ac-accent); } .ac-logo__tagline { font-size: 12px; font-weight: 600; color: var(--ac-text-muted); } /* Primary nav */ .ac-nav { margin-inline-start: 24px; } .ac-nav__list { display: flex; gap: 26px; font-size: 14px; font-weight: 700; } .ac-nav__list li { position: relative; } .ac-nav__list > li { padding-block: 14px; } .ac-nav__list > li > a { white-space: nowrap; } .ac-nav__list a { color: var(--ac-text); transition: color 0.15s; } .ac-nav__list a:hover, .ac-nav__list .current-menu-item > a, .ac-nav__list .current-menu-ancestor > a { color: var(--ac-accent); } /* Dropdown indicator: small triangle after the label, red + flipped when open */ .ac-nav__list > li.menu-item-has-children > a::after { content: '▾'; font-size: 11px; margin-inline-start: 6px; display: inline-block; opacity: 0.8; transition: transform 0.15s, color 0.15s; } .ac-nav__list > li.menu-item-has-children:hover > a, .ac-nav__list > li.menu-item-has-children:focus-within > a { color: var(--ac-accent); } .ac-nav__list > li.menu-item-has-children:hover > a::after, .ac-nav__list > li.menu-item-has-children:focus-within > a::after { color: var(--ac-accent); transform: rotate(180deg); opacity: 1; } /* Dropdown panel: white, 14px radius, soft floating shadow */ .ac-nav__list .sub-menu { position: absolute; top: 100%; inset-inline-start: -14px; min-width: 270px; padding: 16px 14px; background: #fff; border: 0; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 4px 14px rgba(0, 0, 0, 0.06); opacity: 0; visibility: hidden; transform: translate(var(--ac-nav-shift, 0px), 6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; z-index: 120; } .ac-nav__list > li:hover > .sub-menu, .ac-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(var(--ac-nav-shift, 0px), 0); } .ac-nav__list .sub-menu li { display: block; } .ac-nav__list .sub-menu a { display: block; padding: 12px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 700; white-space: nowrap; color: var(--ac-text); } .ac-nav__list .sub-menu a:hover { background: none; color: var(--ac-accent); } /* long lists (10+ children, e.g. countries) flow into two columns */ .ac-nav__list .sub-menu:has(> li:nth-child(10)) { column-count: 2; column-gap: 6px; min-width: 560px; } .ac-nav__list .sub-menu:has(> li:nth-child(10)) li { break-inside: avoid; } /* 2.8.20: very long lists (20+ children, e.g. the 27 payment methods) flow into three columns, centred under their menu item so the 800px panel stays inside the viewport in both directions */ .ac-nav__list .sub-menu:has(> li:nth-child(20)) { column-count: 3; min-width: 800px; } .ac-nav__list > li > .sub-menu:has(> li:nth-child(20)) { inset-inline-start: 50%; inset-inline-end: auto; margin-inline-start: -400px; } /* 2.8.20: desktop dropdowns never grow past the viewport; they scroll instead */ .ac-nav__list > li > .sub-menu, .ac-nav__list > li > .ac-nav__panel { max-height: calc(100vh - 120px); overflow-y: auto; } /* 2.8.21 (F44): panel width is clamped to the viewport (16px gutters) and the wide panels' min-width / centring offset follow that clamp, so no dropdown can extend past either viewport edge between 1101px and 1280px; overflow scrolls inside the panel */ .ac-nav__list > li > .sub-menu, .ac-nav__list > li > .ac-nav__panel { max-width: calc(100vw - 32px); overflow-x: auto; box-sizing: border-box; } .ac-nav__list .sub-menu:has(> li:nth-child(10)) { min-width: min(560px, calc(100vw - 32px)); } .ac-nav__list .sub-menu:has(> li:nth-child(20)) { min-width: min(800px, calc(100vw - 32px)); } .ac-nav__list > li > .sub-menu:has(> li:nth-child(20)) { margin-inline-start: calc(-1 * min(400px, (100vw - 32px) / 2)); } .ac-nav__panel > .sub-menu:has(> li:nth-child(10)) { min-width: min(520px, calc(100vw - 32px - 28px)); } .ac-nav__panel > .sub-menu:has(> li:nth-child(20)) { min-width: min(760px, calc(100vw - 32px - 28px)); } .ac-nav__list > li > .ac-nav__panel { flex-wrap: wrap; } .ac-nav__promo { max-width: 100%; } /* 2.8.21 (F44): --ac-nav-shift is set by nav.js when an open panel would cross a viewport edge (the transform above applies it); without JS, narrow desktops anchor the widest panel to its item's inline-end edge instead of centring it, which keeps it on screen for the 5th/6th items */ @media (max-width: 1240px) { .ac-nav__list > li > .sub-menu:has(> li:nth-child(20)) { inset-inline-start: auto; inset-inline-end: -14px; margin-inline-start: 0; } } /* keep the last panels on-screen at the inline-end edge */ .ac-nav__list > li:nth-last-child(-n+2) :is(.sub-menu, .ac-nav__panel) { inset-inline-start: auto; inset-inline-end: -14px; } /* Dropdown with affiliate promo cards (mega panel: links column + widget column) */ .ac-nav__list > li > .ac-nav__panel { position: absolute; top: 100%; inset-inline-start: -14px; display: flex; align-items: flex-start; gap: 22px; padding: 16px 14px; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 4px 14px rgba(0, 0, 0, 0.06); opacity: 0; visibility: hidden; transform: translate(var(--ac-nav-shift, 0px), 6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; z-index: 120; } .ac-nav__list > li:hover > .ac-nav__panel, .ac-nav__list > li:focus-within > .ac-nav__panel { opacity: 1; visibility: visible; transform: translate(var(--ac-nav-shift, 0px), 0); } .ac-nav__panel > .sub-menu { /* 2.8.19: `visibility: inherit` (not `visible`) so the links inside a CLOSED mega panel stay hidden with it. With `visible` they were rendered-but- transparent (the panel's opacity:0 hid them), yet still hit-testable and focusable, so the panel's 900x496 box acted as an invisible hover trap over the hero and any mouse move there opened the dropdown. `transition: none` keeps the inherited flip in step with the panel. */ position: static; opacity: 1; visibility: inherit; transform: none; transition: none; box-shadow: none; padding: 0; border-radius: 0; min-width: 250px; } .ac-nav__panel > .sub-menu:has(> li:nth-child(10)) { min-width: 520px; } .ac-nav__panel > .sub-menu:has(> li:nth-child(20)) { min-width: 760px; } .ac-nav__promo { flex: 0 0 330px; width: 330px; min-height: 100%; border-inline-start: 1px solid var(--ac-border); padding-inline-start: 20px; font-size: 14px; font-weight: 400; white-space: normal; } .ac-nav__promo :is(p, ul, ol, li, h1, h2, h3, h4, h5) { margin: 0; font-size: unset; line-height: unset; font-weight: unset; } .ac-nav__promo img { max-width: 100%; } /* Header actions: language pill + CTA */ .ac-header__actions { margin-inline-start: auto; display: flex; gap: 10px; align-items: center; } .ac-lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 7px 12px; border: 1.5px solid var(--ac-border); border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; /* Latin label */ color: var(--ac-text); transition: border-color 0.15s, color 0.15s; } .ac-lang-switch:hover { border-color: var(--ac-accent); color: var(--ac-accent); } /* Mobile drawer toggle (shown ≤1100px, see §9) */ .ac-nav-toggle { display: none; } /* ---------- 5. Homepage sections ------------------------------------------ */ /* Hero */ .ac-hero { position: relative; padding: 72px 0 64px; overflow: hidden; } .ac-hero__grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; } .ac-hero__headline { font-size: 44px; line-height: 1.15; color: var(--ac-text); margin: 22px 0 22px; text-wrap: balance; } .ac-hero__headline > span { display: block; } .ac-hero__headline-accent { color: var(--ac-accent); } .ac-hero__sub { font-size: 16px; line-height: 1.85; font-weight: 500; color: var(--ac-text-muted); max-width: 560px; margin: 0 0 30px; text-wrap: pretty; } .ac-hero__ctas { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; } .ac-hero__trust { display: flex; flex-wrap: wrap; gap: 28px; color: var(--ac-text-muted); font-size: 14px; font-weight: 500; } .ac-trust { display: flex; gap: 6px; align-items: center; } .ac-trust__check { color: var(--ac-accent); font-weight: 800; } /* Badge (hero + block patterns) */ .ac-badge { display: inline-block; padding: 8px 14px; border-radius: 99px; font-size: 12px; font-weight: 800; margin: 0 0 18px; white-space: nowrap; } .ac-badge--accent { background: rgba(214,18,40,0.07); color: var(--ac-accent); border: 1px solid rgba(214,18,40,0.22); } /* 2.8.21 (F03): affiliate commission disclosure — muted single line, not a banner */ .ac-disclosure { font-size: 12.5px; line-height: 1.6; font-weight: 500; color: var(--ac-text-muted); margin: 8px 0 16px; } .ac-disclosure__link { color: var(--ac-text-muted); text-decoration: underline; text-underline-offset: 2px; } .ac-disclosure__link:hover { color: var(--ac-accent); } .ac-top-casinos .ac-disclosure { margin: 0 0 12px; } /* Hero deal card */ .ac-deal-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px -30px rgba(13,13,15,0.22); } .ac-deal-card__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .ac-deal-card__badge { font-size: 11px; font-weight: 800; color: var(--ac-primary-text); background: var(--ac-primary); padding: 5px 9px; border-radius: 4px; } .ac-deal-card__expiry { font-size: 13px; font-weight: 500; color: var(--ac-text-muted); direction: ltr; } .ac-deal-card__casino { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .ac-deal-card__mark { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--ac-primary), var(--ac-accent)); color: var(--ac-primary-text); display: grid; place-items: center; font-size: 28px; font-weight: 700; } .ac-deal-card__name { font-size: 18px; font-weight: 700; color: var(--ac-text); } .ac-deal-card__rating { font-size: 13px; font-weight: 500; color: var(--ac-text-muted); margin-top: 3px; display: flex; gap: 6px; align-items: center; } .ac-stars { color: var(--ac-accent); letter-spacing: 1px; } .ac-deal-card__offer { font-size: 28px; line-height: 1.2; color: var(--ac-text); font-weight: 700; margin-bottom: 8px; } .ac-deal-card__sub { font-size: 14px; font-weight: 500; color: var(--ac-text-muted); margin-bottom: 18px; line-height: 1.6; } .ac-deal-card__fine { font-size: 12px; font-weight: 500; color: var(--ac-text-muted); margin-top: 12px; text-align: center; } /* Top Casinos — affiliate widget slot */ .ac-top-casinos { padding: 80px 0 64px; background: linear-gradient(180deg, #fdf6f6 0%, var(--ac-bg) 100%); position: relative; overflow: hidden; color: var(--ac-text); } .ac-top-casinos .ac-container { position: relative; } .ac-plugin-slot { margin-top: 8px; position: relative; } .ac-plugin-slot__placeholder { border: 1px solid var(--ac-border); border-radius: 16px; background: var(--ac-surface-alt); padding: 48px 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 280px; text-align: center; box-shadow: 0 24px 60px -30px rgba(13,13,15,0.14); } .ac-plugin-slot__tag { padding: 6px 12px; background: rgba(214,18,40,0.08); border: 1px solid rgba(214,18,40,0.28); border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; /* Latin tag */ color: var(--ac-accent); font-family: ui-monospace, 'SF Mono', Menlo, monospace; direction: ltr; } .ac-plugin-slot__heading { font-size: 26px; color: var(--ac-text); font-weight: 700; } .ac-plugin-slot__hint { font-size: 14px; font-weight: 500; color: var(--ac-text-muted); max-width: 540px; line-height: 1.6; } .ac-plugin-slot__hint code { background: var(--ac-surface-alt); padding: 2px 6px; border-radius: 3px; color: var(--ac-accent); font-size: 12px; direction: ltr; display: inline-block; } .ac-plugin-slot img { mix-blend-mode: normal; } /* Games */ .ac-games__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .ac-game-tile { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 14px; padding: 26px 18px 20px; text-align: center; color: var(--ac-text); transition: transform 0.15s ease, border-color 0.15s ease; } .ac-game-tile:hover { transform: translateY(-2px); border-color: var(--ac-accent); } .ac-game-tile__icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 14px; background: var(--ac-surface-alt); display: grid; place-items: center; color: var(--ac-text); overflow: hidden; } .ac-game-tile__icon:has(img) { background: transparent; } .ac-game-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; } .ac-game-tile__name { font-size: 15px; font-weight: 700; color: var(--ac-text); } .ac-game-tile__count { font-size: 12px; font-weight: 500; color: var(--ac-text-muted); margin-top: 4px; } /* Payments */ .ac-payments { background: var(--ac-surface-alt); border-top: 1px solid var(--ac-border); border-bottom: 1px solid var(--ac-border); } .ac-payments__groups { display: flex; flex-direction: column; gap: 28px; } .ac-pay-group__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ac-pay-group__name { font-size: 12px; font-weight: 800; color: var(--ac-text); background: var(--ac-surface); border: 1px solid var(--ac-border); padding: 7px 14px; border-radius: 99px; flex-shrink: 0; } .ac-pay-group__rule { flex: 1; height: 1px; background: var(--ac-border); } .ac-pay-group__count { font-size: 12px; font-weight: 600; color: var(--ac-text-muted); flex-shrink: 0; } .ac-pay-group__grid { display: flex; flex-wrap: wrap; gap: 12px 10px; } .ac-pay-method { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 84px; color: inherit; } .ac-pay-method__label { font-size: 10px; font-weight: 600; color: var(--ac-text-muted); text-align: center; line-height: 1.3; } .ac-pay-method__sub { font-size: 9px; font-weight: 500; color: var(--ac-text-muted); opacity: 0.7; text-align: center; line-height: 1.3; } .ac-pay-tile { width: 84px; height: 50px; border-radius: 8px; display: grid; place-items: center; font-family: 'Helvetica Neue', system-ui, sans-serif; font-weight: 800; font-size: 14px; /* tracking only on .ac-pay-letter (Latin) */ border: 1px solid rgba(255,255,255,0.06); overflow: hidden; } .ac-pay-tile--img { background: transparent; border: 1px solid var(--ac-border); padding: 4px; } .ac-pay-tile--img img { max-width: 100%; max-height: 100%; object-fit: contain; } .ac-pay-letter { font-weight: 900; color: #fff; letter-spacing: -0.5px; } .ac-pay-italic { font-style: italic; } .ac-pay-mc { display: flex; } .ac-pay-mc i { width: 22px; height: 22px; border-radius: 50%; display: inline-block; } .ac-pay-mc i + i { margin-inline-start: -8px; } /* Experts (article cards) */ .ac-experts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ac-expert-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.15s ease, border-color 0.15s ease; } .ac-expert-card:hover { transform: translateY(-2px); border-color: var(--ac-accent); } .ac-expert-card__thumb { display: block; height: 160px; background: linear-gradient(135deg, var(--ac-surface-alt) 0%, var(--ac-surface) 100%); border-bottom: 1px solid var(--ac-border); position: relative; overflow: hidden; } .ac-expert-card__thumb::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 12px, var(--ac-surface-alt) 12px 13px); opacity: 0.5; } .ac-expert-card__img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } .ac-expert-card__thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ac-text-muted); font-family: ui-monospace, monospace; font-size: 11px; } .ac-expert-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .ac-expert-card__kicker { font-size: 11px; font-weight: 800; color: var(--ac-accent); margin-bottom: 10px; } .ac-expert-card__title { font-size: 20px; line-height: 1.35; color: var(--ac-text); font-weight: 700; margin: 0 0 18px; text-wrap: pretty; } .ac-expert-card__title a { color: inherit; } .ac-expert-card__title a:hover { color: var(--ac-accent); } .ac-expert-card__meta { margin-top: auto; display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; color: var(--ac-text-muted); padding-top: 14px; border-top: 1px solid var(--ac-border); } /* Theme images blend onto the light surfaces (never affects the affiliate widget) */ .ac-game-tile__img, .ac-game-tile__icon img, .ac-pay-tile--img img, .ac-expert-card__img, .ac-post-card__thumb img { mix-blend-mode: multiply; } /* Footer */ .ac-footer { padding: 48px 0 32px; background: var(--ac-surface-alt); border-top: 1px solid var(--ac-border); color: var(--ac-text-muted); font-size: 13px; font-weight: 500; } .ac-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 28px; } .ac-footer__logo { font-size: 22px; font-weight: 700; color: var(--ac-text); margin-bottom: 12px; } .ac-footer__logo img.ac-footer__logo-img { height: 60px; width: auto; display: block; margin-bottom: 14px; } .ac-footer__logo-tld { color: var(--ac-accent); } .ac-footer__about-text { line-height: 1.7; max-width: 320px; } .ac-footer__col-h { font-size: 12px; font-weight: 800; color: var(--ac-text); margin-bottom: 14px; } .ac-footer__menu { display: flex; flex-direction: column; gap: 10px; } .ac-footer__menu a { color: var(--ac-text-muted); transition: color 0.15s; } .ac-footer__menu a:hover { color: var(--ac-accent); } .ac-footer__bar { border-top: 1px solid var(--ac-border); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* ---------- 6. Article / page column -------------------------------------- */ .ac-page-header { padding: 64px 0 32px; } .ac-page-header--center { text-align: center; } .ac-page-header__title { font-size: 48px; font-weight: 700; color: var(--ac-text); } .ac-page-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 24px 0 48px; } .ac-article { max-width: var(--ac-article); margin: 0 auto; padding: 64px 0; } .ac-article__kicker { font-size: 12px; font-weight: 800; color: var(--ac-accent); margin-bottom: 16px; } .ac-article__title { font-size: 37px; line-height: 1.3; font-weight: 700; margin-bottom: 18px; text-wrap: balance; } .ac-article__meta { display: flex; gap: 10px; color: var(--ac-text-muted); font-size: 14px; margin-bottom: 32px; } .ac-article__hero { margin: 32px 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--ac-border); } /* Reading typography — shared by articles (.ac-article__content) and templates (.ac-tpl-body). Wrapped in :where() so these editorial defaults never out-rank a component's own typography in blocks.css (author photo, casino-entry heading, FAQ block heading…). */ .ac-article__content, .ac-tpl-body { font-size: 15.5px; line-height: 1.95; font-weight: 400; color: var(--ac-text); } :where(.ac-article__content, .ac-tpl-body) :is(p, li) { font-size: 15.5px; line-height: 1.95; } :where(.ac-tpl-body) h1 { font-size: 37px; line-height: 1.3; font-weight: 700; } :where(.ac-article__content, .ac-tpl-body) h2 { font-size: 22px; line-height: 1.4; font-weight: 700; margin: 26px 0 10px; } :where(.ac-article__content, .ac-tpl-body) h3 { font-size: 17px; line-height: 1.5; font-weight: 700; margin: 20px 0 8px; } :where(.ac-article__content, .ac-tpl-body) h4 { font-size: 16px; font-weight: 700; margin: 20px 0 10px; } :where(.ac-article__content, .ac-tpl-body) :is(p, ul, ol) { margin-bottom: 20px; } /* (0,0,1): outranks the global p/ul reset, never a component */ /* inside editor layout groups WordPress already spaces blocks with its block gap */ :is(.ac-article__content, .ac-tpl-body) .is-layout-flow > :is(p, ul, ol) { margin-bottom: 0; } /* Editorial lists get their markers back (the global reset is for chrome/component lists) */ :where(.ac-article__content, .ac-tpl-body) :is(ul:not([class]), ul.wp-block-list) { list-style: disc; padding-inline-start: 24px; } :where(.ac-article__content, .ac-tpl-body) :is(ol:not([class]), ol.wp-block-list) { list-style: decimal; padding-inline-start: 26px; } :where(.ac-article__content, .ac-tpl-body) :is(ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list) > li { margin-bottom: 6px; } :where(.ac-article__content, .ac-tpl-body) :is(ul:not([class]), ul.wp-block-list, ol:not([class]), ol.wp-block-list) :is(ul, ol) { margin: 6px 0 0; } /* Page-break navigation () */ .ac-page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0; font-size: 14px; font-weight: 700; } .ac-page-links__item, .ac-page-links > a { display: inline-flex; min-width: 34px; padding: 6px 10px; justify-content: center; border: 1px solid var(--ac-border); border-radius: 8px; } .ac-page-links > a { color: var(--ac-text); } .ac-page-links > a:hover, .ac-page-links > .ac-page-links__item { color: var(--ac-accent); border-color: var(--ac-accent); } .ac-page-links > a .ac-page-links__item { border: 0; padding: 0; min-width: 0; } .ac-tpl-head--fallback { padding-top: 40px; padding-bottom: 8px; } /* Links inside running text only — component links (cards, TOC, FAQ) keep their own styling */ :is(.ac-article__content, .ac-tpl-body) :is(p, li:not(.ac-toc__list li), td, blockquote, h2, h3, h4) a:not([class]) { color: var(--ac-accent); text-decoration: underline; } :is(.ac-article__content, .ac-tpl-body) blockquote:not(.wp-block-pullquote blockquote) { border-inline-start: 3px solid var(--ac-accent); padding: 8px 0; padding-inline-start: 20px; margin: 24px 0; color: var(--ac-text-muted); font-weight: 500; } .ac-article__content h2[id], .ac-tpl-body h2[id], .ac-faq__heading[id] { scroll-margin-top: 24px; } /* Blog index (index.php / archives) */ .ac-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 64px; } .ac-post-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 14px; overflow: hidden; } .ac-post-card__thumb img { width: 100%; height: 200px; object-fit: cover; } .ac-post-card__body { padding: 20px; } .ac-post-card__title { font-size: 20px; line-height: 1.35; margin-bottom: 10px; } .ac-post-card__title a { color: var(--ac-text); } .ac-post-card__title a:hover { color: var(--ac-accent); } .ac-post-card__meta { display: flex; gap: 12px; color: var(--ac-text-muted); font-size: 13px; margin-bottom: 12px; } .ac-post-card__excerpt { color: var(--ac-text-muted); font-size: 14px; line-height: 1.7; font-weight: 450; } .ac-pagination { padding: 24px 0 64px; display: flex; justify-content: center; } .ac-empty { padding: 80px 0; text-align: center; color: var(--ac-text-muted); } /* ---------- 7. Page-template chrome --------------------------------------- */ .ac-breadcrumb { border-bottom: 1px solid var(--ac-border); background: var(--ac-surface-alt); padding: 14px 0; } .ac-breadcrumb__nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 500; color: var(--ac-text-muted); } .ac-breadcrumb__link { color: var(--ac-text-muted); transition: color 0.15s; } .ac-breadcrumb__link:hover { color: var(--ac-accent); } .ac-breadcrumb__sep { opacity: 0.45; } .ac-breadcrumb__current { color: var(--ac-text); font-weight: 700; } .ac-template { background: var(--ac-bg); } .ac-tpl-head { padding: 64px 0 40px; position: relative; overflow: hidden; } .ac-tpl-head--centered .ac-container { max-width: 880px; } .ac-tpl-head__kicker { font-size: 12px; font-weight: 800; color: var(--ac-accent); margin-bottom: 20px; } .ac-tpl-head__title { font-size: 48px; line-height: 1.1; font-weight: 700; color: var(--ac-text); margin: 0 0 18px; text-wrap: balance; } .ac-tpl-head__title--lg { font-size: 60px; line-height: 1.05; } .ac-tpl-head__excerpt { font-size: 18px; line-height: 1.7; font-weight: 500; color: var(--ac-text-muted); max-width: 720px; margin: 0 0 22px; text-wrap: pretty; } .ac-tpl-head__excerpt--lg { font-size: 20px; } .ac-tpl-head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; row-gap: 6px; font-size: 14px; font-weight: 500; color: var(--ac-text-muted); } .ac-tpl-head__meta strong { color: var(--ac-text); font-weight: 700; } .ac-tpl-head__meta > span { white-space: nowrap; } .ac-tpl-head__sep { opacity: 0.45; } /* Payment-method two-column hero */ .ac-tpl-head--two-col .ac-tpl-head__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; } .ac-tpl-head__visual img { max-width: 220px; margin-inline-start: auto; display: block; border-radius: 24px; background: var(--ac-surface); padding: 24px; border: 1px solid var(--ac-border); } /* Responsible-gambling hero */ .ac-tpl-head--responsible { background: linear-gradient(180deg, var(--ac-surface-alt) 0%, var(--ac-bg) 100%); border-bottom: 1px solid var(--ac-border); } .ac-tpl-head__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: rgba(13, 13, 15, 0.05); border: 1px solid var(--ac-border); color: var(--ac-text-muted); font-size: 12px; font-weight: 800; margin-bottom: 24px; } .ac-tpl-head--listicle { padding-bottom: 32px; } /* Template body wrapper around the_content() */ .ac-tpl-body { padding: 40px 0 80px; } .ac-tpl-body--bare { padding: 0 0 80px; } .ac-tpl-body__inner { max-width: 1080px; } /* Hero blocks rendered inside the_content() by the prefilled patterns */ .ac-hero-block { position: relative; overflow: hidden; padding: 56px 0 40px; margin-block: 0 32px; border-bottom: 1px solid var(--ac-border); } .ac-hero-block > * { position: relative; } .ac-hero-block h1 { margin: 12px 0 18px; text-wrap: balance; } /* size comes from the shared h1 rule (37px / 30px mobile) */ .ac-hero-block p { font-size: 18px; line-height: 1.7; font-weight: 450; } .ac-tpl-body .ac-byline, .ac-article__content .ac-byline { font-size: 14px; color: var(--ac-text-muted); font-weight: 500; margin-top: 18px; } .ac-byline strong { color: var(--ac-text); } /* ---------- 8. In-content components -------------------------------------- */ /* Components carry their own rhythm: article list/paragraph margins stop at their edge */ :is(.ac-article__content, .ac-tpl-body) :is(.ac-toc__list, .ac-pros-cons__list, .ac-faq-item__a > :last-child) { margin-bottom: 0; } :is(.ac-article__content, .ac-tpl-body) :is(h2, h3, .ac-pros-cons, .ac-faq-section, .ac-toc) { clear: both; } /* Auto TOC bar (محتويات) — one row of numbered anchors. (.ac-toc.ac-toc--auto outranks the editor block's .ac-toc base in blocks.css) */ .ac-toc.ac-toc--auto { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap; margin: 26px 0 30px; padding: 18px 22px; background: var(--ac-surface-alt); border: 0; border-radius: 12px; } .ac-toc--auto .ac-toc__heading { flex: 0 0 auto; color: var(--ac-primary); font-size: 12.5px; font-weight: 800; margin: 0; padding-inline-end: 16px; border-inline-end: 1px solid var(--ac-border); } .ac-toc--auto .ac-toc__list { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; counter-reset: actoc; font-size: 13.5px; font-weight: 700; } .ac-toc--auto .ac-toc__list li { counter-increment: actoc; margin: 0; padding: 0; position: static; white-space: nowrap; font-size: 13.5px; line-height: 1.4; } .ac-toc--auto .ac-toc__list li::before { content: counter(actoc, decimal-leading-zero) "."; position: static; display: inline; color: var(--ac-primary); font-weight: 800; margin-inline-end: 5px; } .ac-toc--auto .ac-toc__list li::after { display: none; } .ac-toc.ac-toc--auto .ac-toc__list li a { color: var(--ac-text); text-decoration: none; } .ac-toc.ac-toc--auto .ac-toc__list li a:hover { color: var(--ac-accent); } /* Numbered mini-review headings (badge sits at the inline-start of the name) */ .ac-article__content, .ac-tpl-body { counter-reset: acminirev; } .ac-article__content h3.ac-minireview, .ac-tpl-body h3.ac-minireview { counter-increment: acminirev; display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 34px; } h3.ac-minireview::before { content: counter(acminirev); order: -1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ac-primary); color: #fff; font-size: 14px; font-weight: 800; line-height: 1; } h3.ac-subhead { margin-top: 26px; } /* Pros / cons — base component style (plain stacked lists) lives in blocks.css; only reading-column tweaks here */ .ac-article__content .ac-pros-cons__heading-row, .ac-tpl-body .ac-pros-cons__heading-row { margin-bottom: 12px; } .ac-article__content .ac-pros-cons__list li, .ac-tpl-body .ac-pros-cons__list li { font-size: 14px; line-height: 1.7; margin-bottom: 8px; } .ac-article__content .ac-pros-cons__list li:last-child, .ac-tpl-body .ac-pros-cons__list li:last-child { margin-bottom: 0; } /* FAQ section (auto-built from the article's أسئلة شائعة block) */ .ac-faq-section { margin: 44px 0; padding: 36px 32px; background: var(--ac-surface-alt); border-radius: 16px; } .ac-faq-section .ac-section__kicker { margin-bottom: 8px; } .ac-faq-section .ac-faq__heading { font-size: 25px; margin: 0 0 20px; } .ac-faq-section .ac-faq { margin: 0; } .ac-faq-section .ac-faq-item { background: #fff; } .ac-faq-section .ac-faq-item__q { padding: 16px 20px; line-height: 1.6; } .ac-faq-section .ac-faq-item__a { padding: 0 20px 18px; } /* Tables — one card per table: the figure draws the frame, the table draws the rows */ :is(.ac-article__content, .ac-tpl-body) figure.wp-block-table { margin: 26px 0; border: 1px solid var(--ac-border); border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--ac-surface); } :is(.ac-article__content, .ac-tpl-body) figure.wp-block-table table { width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0; border: 0; border-radius: 0; font-size: 14px; table-layout: auto; overflow: visible; background: transparent; } :is(.ac-article__content, .ac-tpl-body) table th, :is(.ac-article__content, .ac-tpl-body) table td { padding: 13px 16px; border: 0; border-top: 1px solid var(--ac-border); text-align: start; vertical-align: top; line-height: 1.7; word-break: normal; overflow-wrap: anywhere; min-width: 90px; } :is(.ac-article__content, .ac-tpl-body) table :is(thead, tbody, tfoot) { border: 0; } :is(.ac-article__content, .ac-tpl-body) table tr:first-child > :is(th, td) { border-top: 0; } :is(.ac-article__content, .ac-tpl-body) table th, :is(.ac-article__content, .ac-tpl-body) table:not(:has(thead)) tr:first-child td { background: var(--ac-surface-alt); color: var(--ac-text-muted); font-size: 12.5px; font-weight: 800; white-space: nowrap; border-bottom: 2px solid var(--ac-accent); } :is(.ac-article__content, .ac-tpl-body) table td:first-child { font-weight: 800; color: var(--ac-text); } :is(.ac-article__content, .ac-tpl-body) table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.02); } :is(.ac-article__content, .ac-tpl-body) table tbody tr:hover td { background: rgba(225, 29, 46, 0.035); } :is(.ac-article__content, .ac-tpl-body) .wp-block-table figcaption { margin-top: 10px; font-size: 12.5px; color: var(--ac-text-muted); text-align: center; } /* Images & embeds — any editor image stays in the column, centered, rounded */ :where(.ac-article__content, .ac-tpl-body) :where(img:not(.widget-card img, .widget-promo img)) { max-width: 100%; height: auto; } /* (0,0,0): the global img reset already sets these; components keep their own sizes */ :is(.ac-article__content, .ac-tpl-body) figure.wp-block-image { margin: 24px auto; text-align: center; } :is(.ac-article__content, .ac-tpl-body) figure.wp-block-image img { display: block; margin-inline: auto; border-radius: 12px; } :is(.ac-article__content, .ac-tpl-body) figcaption { font-size: 12.5px; color: var(--ac-text-muted); text-align: center; margin-top: 8px; } :is(.ac-article__content, .ac-tpl-body) :is(figure, img).alignleft { float: inline-start; margin: 6px 0 16px; margin-inline-end: 22px; max-width: min(46%, 360px); } :is(.ac-article__content, .ac-tpl-body) :is(figure, img).alignright { float: inline-end; margin: 6px 0 16px; margin-inline-start: 22px; max-width: min(46%, 360px); } :is(.ac-article__content, .ac-tpl-body) :is(.alignwide, .alignfull) { max-width: 100%; width: auto; margin-inline: 0; } :is(.ac-article__content, .ac-tpl-body) .wp-block-gallery { margin: 24px 0; gap: 12px; } :is(.ac-article__content, .ac-tpl-body) .wp-block-gallery img { border-radius: 12px; width: 100%; object-fit: cover; } :is(.ac-article__content, .ac-tpl-body) figure.wp-block-embed { margin: 24px auto; } :is(.ac-article__content, .ac-tpl-body) figure.wp-block-embed iframe { max-width: 100%; border-radius: 12px; } /* Affiliate widgets — isolated from reading typography; break out to their desktop canvas on wide screens, centered on the reading column */ :is(.ac-article__content, .ac-tpl-body) :is(.widget-card, .widget-promo) { max-width: 100%; overflow-x: hidden; } :is(.ac-article__content, .ac-tpl-body) :is(.widget-card, .widget-promo) :is(p, ul, ol, li) { margin: 0; font-size: unset; line-height: unset; font-weight: unset; } :is(.ac-article__content, .ac-tpl-body) :is(.widget-card, .widget-promo) :is(h1, h2, h3, h4, h5) { margin: 0; font-size: unset; line-height: unset; font-weight: unset; display: revert; counter-increment: none; } :is(.ac-article__content, .ac-tpl-body) :is(.widget-card, .widget-promo) img { mix-blend-mode: normal; max-width: 100%; } @media (min-width: 1240px) { .ac-article__content :is(.widget-card, .widget-promo) { width: min(var(--ac-widget), calc(100vw - 64px)); max-width: none; margin-inline: calc((100% - min(var(--ac-widget), calc(100vw - 64px))) / 2); } } /* ---------- 9. Responsive & LTR ------------------------------------------- */ @media (max-width: 1100px) { :root { --ac-pad: 32px; } .ac-section { padding: 56px 0; } .ac-hero { padding: 56px 0 48px; } .ac-top-casinos { padding: 64px 0 48px; } .ac-games__grid { grid-template-columns: repeat(4, 1fr); } .ac-experts__grid { grid-template-columns: repeat(2, 1fr); } .ac-post-grid { grid-template-columns: repeat(2, 1fr); } .ac-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } .ac-footer__about { grid-column: 1 / -1; } .ac-header__inner { gap: 16px; } /* Mobile navigation: hamburger + full-height drawer */ .ac-nav { display: none; } .ac-nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 1.5px solid var(--ac-border); border-radius: 10px; cursor: pointer; } .ac-nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ac-text); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } body.ac-nav-open .ac-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.ac-nav-open .ac-nav-toggle span:nth-child(2) { opacity: 0; } body.ac-nav-open .ac-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.ac-nav-open .ac-nav { display: block; position: fixed; top: 72px; inset-inline: 0; bottom: 0; margin: 0; padding: 18px 22px 40px; background: #fff; overflow-y: auto; z-index: 200; border-top: 1px solid var(--ac-border); } body.ac-nav-open .ac-nav__list { display: block; font-size: 16px; } body.ac-nav-open .ac-nav__list > li { padding: 4px 0; border-bottom: 1px solid var(--ac-border); } body.ac-nav-open .ac-nav__list > li > a { display: block; padding: 12px 0; font-size: 16px; } body.ac-nav-open .ac-nav__list > li.menu-item-has-children > a::after { content: none; } body.ac-nav-open .ac-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; background: none; min-width: 0; padding: 0 0 10px; padding-inline-start: 18px; column-count: 1; max-height: none; overflow: visible; margin-inline-start: 0; /* 2.8.20: the drawer scrolls as a whole */ } body.ac-nav-open .ac-nav__list .sub-menu a { padding: 9px 0; font-size: 14.5px; font-weight: 600; white-space: normal; } body.ac-nav-open .ac-nav__list > li > .ac-nav__panel { position: static; display: block; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0; border-radius: 0; max-height: none; overflow: visible; } body.ac-nav-open .ac-nav__promo { display: none; } } @media (max-width: 980px) { .ac-tpl-head { padding: 48px 0 32px; } .ac-tpl-head__title { font-size: 36px; } .ac-tpl-head__title--lg { font-size: 44px; } .ac-tpl-head--two-col .ac-tpl-head__grid { grid-template-columns: 1fr; } .ac-tpl-head__visual img { max-width: 140px; margin: 0 auto; } .ac-tpl-body { padding: 32px 0 60px; } .ac-tpl-body--bare { padding: 0 0 60px; } } @media (max-width: 720px) { :root { --ac-pad: 20px; } .ac-section { padding: 48px 0; } .ac-hero { padding: 40px 0 40px; } .ac-top-casinos { padding: 56px 0 40px; } .ac-hero__grid { grid-template-columns: 1fr; gap: 32px; } .ac-hero__headline { font-size: 34px; } .ac-section__head--with-action { flex-direction: column; align-items: flex-start; gap: 16px; } .ac-games__grid { grid-template-columns: repeat(2, 1fr); } .ac-experts__grid { grid-template-columns: 1fr; } .ac-post-grid { grid-template-columns: 1fr; } .ac-footer__grid { grid-template-columns: 1fr; } .ac-footer__bar { flex-direction: column; align-items: flex-start; } .ac-header__inner { flex-wrap: wrap; gap: 12px; } .ac-header__actions { width: 100%; } .ac-header__cta { flex: 1; } .ac-article__title, .ac-tpl-body h1 { font-size: 30px; } .ac-page-header__title { font-size: 34px; } .ac-toc.ac-toc--auto { gap: 10px 14px; padding: 14px 16px; } .ac-toc.ac-toc--auto .ac-toc__list { gap: 8px 14px; } .ac-faq-section { padding: 26px 18px; } } @media (max-width: 560px) { .ac-tpl-head__title { font-size: 30px; } .ac-tpl-head__title--lg { font-size: 34px; } .ac-tpl-head__excerpt, .ac-tpl-head__excerpt--lg { font-size: 16px; } .ac-hero-block p { font-size: 16px; } } /* LTR (English) — logical properties handle layout; only Latin tracking differs */ [dir="ltr"] .ac-toc__list li::before { content: '\203A'; } [dir="ltr"] .ac-hero-block h1, [dir="ltr"] .ac-tpl-head__title { letter-spacing: -1px; } [dir="ltr"] :is(.ac-section__kicker, .ac-tpl-head__kicker, .ac-article__kicker, .ac-expert-card__kicker) { letter-spacing: 1.5px; } /* 2.8.20: the Latin type rules are scoped to the content column. Header, nav, dropdown panels, language pill, CTA and footer keep the exact font-family, sizes, weights and spacing of the Arabic pages. */ [dir="ltr"] .ac-main .ac-btn { unicode-bidi: plaintext; } [dir="ltr"] .ac-main, [dir="ltr"] .ac-main .ac-btn, [dir="ltr"] .ac-main :is(input, textarea, select) { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ---------- 2.8.20: author card + author archive ---------------------------- */ .ac-author--card { margin-top: 48px; } .ac-author--card .ac-author__photo, .ac-author--profile .ac-author__photo { width: 96px; height: 96px; } .ac-author__photo img { border-radius: 50%; } .ac-author__body { min-width: 0; flex: 1; } .ac-author__kicker { font-size: 12px; font-weight: 800; color: var(--ac-text-muted); text-transform: uppercase; margin-bottom: 6px; } .ac-author__name a { color: inherit; text-decoration: none; } .ac-author__name a:hover { color: var(--ac-accent); } .ac-author__bio { margin: 0; } .ac-author__badges { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ac-author__badge { font-size: 12.5px; font-weight: 700; color: var(--ac-text); background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 999px; padding: 5px 12px; } .ac-author-page__inner { max-width: var(--ac-article); margin: 0 auto; padding: 48px 0 64px; } .ac-author-page__title { font-size: 40px; font-weight: 800; line-height: 1.25; } .ac-author-page__lead { margin: 14px 0 0; font-size: 17px; line-height: 1.8; color: var(--ac-text-muted); } .ac-author-page .ac-author--profile { margin-top: 32px; } .ac-author-page__section { margin-top: 40px; } .ac-author-page__h2 { font-size: 26px; font-weight: 800; margin-bottom: 12px; } .ac-author-page__section p { margin: 0; font-size: 16px; line-height: 1.85; } .ac-author-page__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ac-author-page__item { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 16px; border: 1px solid var(--ac-border); border-radius: 10px; background: var(--ac-surface); } .ac-author-page__item-link { font-weight: 700; color: var(--ac-text); } .ac-author-page__item-link:hover { color: var(--ac-accent); } .ac-author-page__item-date { flex-shrink: 0; font-size: 12.5px; color: var(--ac-text-muted); white-space: nowrap; } @media (max-width: 720px) { .ac-author-page__title { font-size: 30px; } .ac-author-page__item { flex-direction: column; gap: 4px; } }