/** * Real ARMPIN design system, ported from source/codebase/src/styles.css - exact oklch color * values, exact font stacks (Oswald for headings/"display", Inter for body, IBM Plex Mono for * numbers), exact border-radius token. Fonts are already loaded site-wide by the theme (Google * Fonts link tags on every page) - this file only declares font-family, it does not load fonts. * * Strategy: rather than hand-writing a rule per BEM class across ~15 PHP files (200+ class * names), this uses CSS attribute-selector patterns keyed to the SAME naming convention already * used throughout (block-root, __part, --state) so one set of rules skins every block built so * far and every block built the same way going forward. Logical properties (margin-inline, * padding-inline, text-align: start) are used throughout so RTL (the site's real, default * direction) is handled automatically, not special-cased. */ :root { --ap-radius: 0.375rem; --ap-background: oklch(0.976 0.004 250); --ap-foreground: oklch(0.22 0.03 258); --ap-panel: oklch(1 0 0); --ap-line: oklch(0.912 0.008 250); --ap-primary: oklch(0.22 0.03 258); --ap-primary-foreground: oklch(0.976 0.004 250); --ap-accent: oklch(0.22 0.03 258); --ap-accent-foreground: oklch(0.976 0.004 250); --ap-action: oklch(0.66 0.17 132); --ap-action-foreground: oklch(0.19 0.03 258); --ap-secondary: oklch(0.955 0.006 250); --ap-secondary-foreground: oklch(0.28 0.03 258); --ap-muted: oklch(0.955 0.006 250); --ap-muted-foreground: oklch(0.53 0.02 256); --ap-up: oklch(0.58 0.16 145); --ap-down: oklch(0.58 0.2 25); --ap-warning: oklch(0.8 0.16 80); --ap-warning-foreground: oklch(0.2 0.03 80); --ap-destructive: oklch(0.58 0.2 25); --ap-destructive-foreground: oklch(0.99 0.003 248); --ap-border: oklch(0.912 0.008 250); --ap-font-display: "Oswald", "Heebo", sans-serif; --ap-font-sans: "Inter", "Heebo", sans-serif; --ap-font-num: "IBM Plex Mono", monospace; /* Admin-controllable typography (2026-10-12) - defaults match the real original ADMIN screen's documented TYPOGRAPHY_TOKENS defaults (admin/screens/system.php ap_adm_typography_tokens()). --font-size-body anchors html's own font-size, so it scales every rem-sized element site- wide proportionally (there is no per-component typography system to hook into otherwise - this codebase sizes everything in hardcoded rem, not var()). heading/form are narrower, real hooks into the one shared heading rule + a new shared form-field rule below. */ --font-size-body: 16px; --font-weight-body: 400; --font-size-heading: 30px; --font-weight-heading: 700; --font-size-form: 14px; --font-weight-form: 400; } html { font-size: var(--font-size-body); } body { font-weight: var(--font-weight-body); } :root { --ap-heading-scale: calc(var(--font-size-heading, 30px) / 30px); } /* :where() wrapper = zero specificity on purpose - this must never outrank a single real component class (e.g. .armpin-pro-shell__topbtn's own font-size), only fill in a baseline for form fields/buttons that don't set their own size at all. A plain [class^=] version here would actually OUTRANK those component classes (attribute selector + element > single class) and silently resize buttons site-wide - confirmed by specificity math before writing this, not after. */ :where([class^="armpin-"], [class*=" armpin-"]) :where(input, select, textarea, button) { font-size: var(--font-size-form, 14px); font-weight: var(--font-weight-form, 400); } /* Global phantom-horizontal-scroll guard (2026-10-12 overnight pass): several real, individually-harmless-when-visible components (CSS-only hover tooltips like .armpin-help-ico__bubble, absolutely-positioned dropdowns) still contribute to document.body.scrollWidth even while invisible (opacity:0) or correctly clipped by a nearer ancestor, because their own layout box can extend past the viewport edge depending on where their trigger sits on a narrow screen. Confirmed live: hiding every .armpin-help-ico on a mobile pro-athlete/pro-program page dropped body.scrollWidth from 437px/464px to 375px (a 390px viewport) with zero visible difference, since the tooltip itself was opacity:0 the whole time - this made the PAGE itself horizontally draggable/swipeable into blank space on a phone, which is the real (if subtle) bug. overflow-x:hidden on body is the standard fix for exactly this shape of problem and does not affect vertical scrolling or clip anything actually visible within the viewport - it only prevents scrolling to content that was already outside the horizontal viewport (i.e. not visible regardless). */ body { overflow-x: hidden; } @media (prefers-color-scheme: dark) { :root { --ap-background: oklch(0.19 0.02 258); --ap-foreground: oklch(0.96 0.004 250); --ap-panel: oklch(0.24 0.02 258); --ap-line: oklch(0.32 0.02 258); --ap-primary: oklch(0.96 0.004 250); --ap-primary-foreground: oklch(0.19 0.02 258); --ap-accent: oklch(0.96 0.004 250); --ap-accent-foreground: oklch(0.19 0.02 258); --ap-action: oklch(0.88 0.2 128); --ap-action-foreground: oklch(0.19 0.02 258); --ap-secondary: oklch(0.3 0.02 258); --ap-secondary-foreground: oklch(0.96 0.004 250); --ap-muted: oklch(0.3 0.02 258); --ap-muted-foreground: oklch(0.72 0.02 256); --ap-up: oklch(0.78 0.17 145); --ap-down: oklch(0.7 0.19 22); --ap-border: oklch(0.32 0.02 258); } } /* ---------- global safety net: every widget's content, site-wide, centered by default ---------- Owner (2026-10-15), after this exact "stretched to one edge, not centered" bug kept recurring page by page (organizations, org-manage, profile, events-admin, ...) with a DIFFERENT specific root cause each time (a heading sitting outside its own wrapper, a widget never given a max- width class at all, a dead-code render path): "תמרכז עכשיו את כל הדפים באתר... תסדר את הכל מההתחלה" - center every page on the site now, once, instead of chasing this one widget at a time. Every armpin_* widget's PHP output is wrapped by Elementor itself in a generic .elementor-widget-container div (confirmed via raw HTML on multiple pages) - centering THAT generic wrapper retroactively fixes every widget at once, site-wide, regardless of whether its own markup remembers to wrap itself correctly. site_header/site_footer are the one deliberate exception (they need their own full-bleed background band; their actual content already centers itself internally via .armpin-site-header__bar etc.) so they opt back out of this constraint. */ .elementor-widget-container { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; box-sizing: border-box; } .elementor-widget-armpin_site_header > .elementor-widget-container, .elementor-widget-armpin_site_footer > .elementor-widget-container { max-width: none; margin-inline: 0; padding-inline: 0; } /* ---------- base: every armpin- block ---------- */ [class^="armpin-"], [class*=" armpin-"] { box-sizing: border-box; font-family: var(--ap-font-sans); color: var(--ap-foreground); } [class^="armpin-"] *, [class*=" armpin-"] * { box-sizing: border-box; } [class^="armpin-"] h1, [class^="armpin-"] h2, [class^="armpin-"] h3, [class*=" armpin-"] h1, [class*=" armpin-"] h2, [class*=" armpin-"] h3 { font-family: var(--ap-font-display); font-weight: var(--font-weight-heading, 700); text-transform: uppercase; letter-spacing: 0.01em; margin-block: 0.6em 0.4em; } [class^="armpin-"] h1 { font-size: calc(clamp(1.5rem, 1.1rem + 1.2vw, 2rem) * var(--ap-heading-scale, 1)); color: var(--ap-foreground); } /* Owner (2026-10-15): the plain page-title block on 35 pages (/profile, /about, /organizations, ...) sits OUTSIDE any [class^="armpin-"] wrapper, so it never matched the generic branded-heading rule above and fell back to the theme's bare default h1 font - "הפונט לא מתאים". Also corrected per the owner, 2026-10-15: NOT centered - right-aligned (RTL default) and confined to the same max-width/inset as the page's own content below it (.armpin-pro-shell etc. all already use this exact max-width:80rem;margin-inline:auto;padding- inline:1.25rem idiom), so the title lines up with "אדי שטורם" and the rest of the page instead of sitting flush at the physical viewport edge or floating independently centered. */ .armpin-page-h1 { font-family: var(--ap-font-display); font-weight: var(--font-weight-heading, 700); text-transform: uppercase; letter-spacing: 0.01em; color: var(--ap-foreground); font-size: calc(clamp(1.5rem, 1.1rem + 1.2vw, 2rem) * var(--ap-heading-scale, 1)); max-width: 80rem; margin: 0.6em auto 0.4em; padding-inline: 1.25rem; box-sizing: border-box; text-align: right; } /* Owner (2026-10-14): every page's Elementor title widget ("הפרופיל שלי" etc.) renders teal - traced to post-.css's own `.elementor-widget-heading .elementor-heading-title{color:var( --e-global-color-primary)}`, which is just Elementor's untouched factory default kit color (#6EC1E4), never a deliberate brand choice (secondary/text/accent are likewise still exactly Elementor's factory defaults - nothing in this codebase has ever customized them). Owner then asked to integrate this with the branding admin panel "בכל הדפים" - so instead of a one-off color on the heading widget, the kit's OWN color variables are redefined here to real var(--ap- *) tokens, on the `.elementor-kit-` class Elementor itself stamps on (id varies per install, hence the attribute-contains selector rather than hardcoding elementor-kit-7). Same specificity as Elementor's own `.elementor-kit-N` rule - but this stylesheet is actually enqueued BEFORE Elementor's kit CSS (confirmed live: our is #1, Elementor's post-7.css is #7), so a tied specificity would lose on source order. Adding the `body` type selector bumps us to (0,1,1) vs their (0,1,0), winning outright without touching load order or !important - and since the values are var() references rather than copied literals, editing Foreground/Muted-foreground/Primary in the branding panel (wp-admin -> armpin-system -> tool=branding) updates every Elementor-built page too, not just the armpin-* components. Accent (#61CE70) is left as Elementor's own default - no evidence yet anything on the site deliberately uses it, but remapping every one of Elementor's 4 global slots without auditing each page first is unnecessary risk for today's actual bug. */ body[class*="elementor-kit-"] { --e-global-color-primary: var(--ap-foreground); --e-global-color-secondary: var(--ap-muted-foreground); --e-global-color-text: var(--ap-foreground); } [class^="armpin-"] h2 { font-size: calc(1.1rem * var(--ap-heading-scale, 1)); } [class^="armpin-"] h3 { font-size: calc(0.95rem * var(--ap-heading-scale, 1)); } [class^="armpin-"] a { color: var(--ap-foreground); text-decoration: none; } [class^="armpin-"] a:hover { text-decoration: underline; } [class^="armpin-"] p { line-height: 1.6; margin-block: 0.3em; } /* ---------- empty / denied / not-found / placeholder / notice states ---------- */ [class$="__empty"], [class$="__denied"], [class$="__not-found"], [class*="--placeholder"], [class$="__notice"], [class$="__no-coords"], [class$="__no-federation"], [class$="--already"], [class$="__signin-notice"] { background: var(--ap-secondary); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.25rem; text-align: center; color: var(--ap-muted-foreground); font-size: 0.9rem; } /* ---------- cards: every "__item" / "__card" in a list/grid ---------- */ [class$="__item"], [class$="__card"] { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.85rem 1rem; margin-block-end: 0.6rem; list-style: none; transition: box-shadow .15s ease; } [class$="__item"]:hover, [class$="__card"]:hover { box-shadow: 0 1px 8px oklch(0 0 0 / 0.06); border-color: var(--ap-foreground); } [class$="__item"] img, [class$="__card"] img { border-radius: calc(var(--ap-radius) - 2px); max-width: 100%; height: auto; display: block; margin-block-end: 0.5rem; } [class$="__item"].is-decided, [class$="__item"].is-unread { border-inline-start: 3px solid var(--ap-foreground); } /* lists/grids that hold cards wrap and go responsive automatically */ [class$="__list"], [class$="__grid"], [class$="__items"], [class$="__order"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem; padding: 0; margin: 0.5rem 0; } ol[class$="__order"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); } [class$="__order"] li { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.5rem 0.75rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } /* ---------- buttons / primary actions ---------- */ [class^="armpin-"] button, [class^="armpin-"] button[type="submit"], [class$="__open"], [class$="__watch"], [class$="__reg"], [class$="__toggle"] { display: inline-flex; align-items: center; gap: 0.35em; justify-content: center; background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity .15s ease; } [class^="armpin-"] button:hover { opacity: 0.88; } [class^="armpin-"] button:disabled { opacity: 0.5; cursor: not-allowed; } [class$="__danger"], button.armpin-admin-crud__danger { background: var(--ap-destructive); color: var(--ap-destructive-foreground); } [class$="__clear"], a.button, .button { background: var(--ap-secondary); color: var(--ap-secondary-foreground); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.8rem; font-size: 0.82rem; font-weight: 600; display: inline-flex; cursor: pointer; } .button.button-primary { background: var(--ap-action); color: var(--ap-action-foreground); border-color: transparent; } /* ---------- forms ---------- */ [class^="armpin-"] input[type="text"], [class^="armpin-"] input[type="email"], [class^="armpin-"] input[type="password"], [class^="armpin-"] input[type="search"], [class^="armpin-"] input[type="number"], [class^="armpin-"] input[type="date"], [class^="armpin-"] select, [class^="armpin-"] textarea { background: var(--ap-panel); color: var(--ap-foreground); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.45rem 0.7rem; font-size: 0.88rem; font-family: var(--ap-font-sans); max-width: 100%; } [class^="armpin-"] input:focus, [class^="armpin-"] select:focus, [class^="armpin-"] textarea:focus { outline: 2px solid var(--ap-foreground); outline-offset: 1px; border-color: var(--ap-foreground); } [class^="armpin-"] label { font-size: 0.85rem; font-weight: 600; display: inline-block; margin-inline-end: 0.4em; } .form-table { width: 100%; border-collapse: collapse; margin-block: 0.75rem; } .form-table th { text-align: start; padding: 0.5rem 0.75rem; font-size: 0.85rem; color: var(--ap-muted-foreground); vertical-align: top; width: 1%; white-space: nowrap; } .form-table td { padding: 0.4rem 0.5rem; } /* ---------- controls bars (filters, tabs, auth tabs) ---------- */ [class$="__controls"], [class$="__tabs"], [class$="__bar"], [class$="__cats"] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block-end: 0.75rem; } [class$="__tabs"] button, [class$="__tabs"] a, [class$="__cats"] a { background: var(--ap-secondary); color: var(--ap-secondary-foreground); border: 1px solid var(--ap-line); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 600; } [class$="__tabs"] a.is-active, [class$="__tabs"] button.is-active, [class$="__cats"] a.is-active { background: var(--ap-foreground); color: var(--ap-background); border-color: transparent; } /* ---------- tables (admin CRUD, standings, detail dl) ---------- */ table.armpin-admin-crud__table, table[class$="__standings"], table.armpin-admin-crud__detail, dl[class$="__fields"], dl[class$="__detail"] { width: 100%; border-collapse: collapse; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); overflow: hidden; } table.armpin-admin-crud__table th, table[class$="__standings"] th { background: var(--ap-secondary); text-align: start; padding: 0.55rem 0.75rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ap-muted-foreground); } table.armpin-admin-crud__table td, table[class$="__standings"] td, table.armpin-admin-crud__detail td, table.armpin-admin-crud__detail th { padding: 0.5rem 0.75rem; border-top: 1px solid var(--ap-line); font-size: 0.88rem; vertical-align: top; } table.armpin-admin-crud__table tr:hover td { background: var(--ap-secondary); } dl[class$="__fields"], dl[class$="__detail"] { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; padding: 1rem; } dl[class$="__fields"] dt, dl[class$="__detail"] dt { color: var(--ap-muted-foreground); font-size: 0.82rem; } /* ---------- status / badges / pills ---------- */ [class$="__status"], [class$="__pay"], [class$="__type"], [class$="__side"], [class$="__label"], [class$="__roles"], [class$="__perms"] { display: inline-block; background: var(--ap-secondary); color: var(--ap-secondary-foreground); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } [class$="__status--open"], .armpin-events-list__status--open { background: var(--ap-up); color: oklch(0.19 0.03 258); } /* ---------- numbers (scores, prices, counts) get the real tabular mono font ---------- */ [class$="__score"], [class$="__amount"], [class$="__number"], [class$="__count"], [class$="__record"], [class$="__members"], [class$="__num"] { font-family: var(--ap-font-num); font-variant-numeric: tabular-nums; } /* ---------- live indicator (real @keyframes from the original) ---------- */ @keyframes armpin-livepulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } .armpin-live-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--ap-down); animation: armpin-livepulse 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .armpin-live-dot { animation: none; } } /* ---------- /my dashboard (routes/my.tsx) - layout not covered by the generic patterns above: a rich header, a next-action hero, a progress bar, responsive multi-column grids and a career timeline. Real oklch tokens reused throughout, nothing new invented. ---------- */ .armpin-my { display: flex; flex-direction: column; gap: 1rem; max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; } /* Owner, 2026-10-14: avatar+title used to share one flat flex-wrap row with the context badge and 2 action buttons - on a narrow phone that squeezed the title down to one word per line ("הבית של אדי" over 2-3 lines). Two clear sub-rows instead: identity (avatar+title+welcome) always gets the full row to itself; badge+buttons form their own compact row underneath. Owner, 2026-10-15: that fix was shipped unscoped and silently broke the already-approved desktop header (which must stay the original single flex-wrap row untouched). Desktop/tablet and mobile are separate surfaces now - the two wrapper divs below are desktop-invisible (display:contents, so their children rejoin the parent row exactly like before this round ever happened) and only become real stacked sub-rows inside the mobile media query. */ .armpin-my__header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-block-end: 0.25rem; } .armpin-my__header-identity, .armpin-my__header-actions { display: contents; } @media (max-width: 56rem) { .armpin-my__header { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.4rem; } .armpin-my__header-identity { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .armpin-my__header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } } .armpin-my__avatar { width: 3rem; height: 3rem; border-radius: 999px; object-fit: cover; border: 1px solid var(--ap-line); flex-shrink: 0; } .armpin-my__avatar--fallback { display: grid; place-items: center; background: var(--ap-secondary); font-family: var(--ap-font-display); font-size: 1.1rem; font-weight: 700; } .armpin-my__header-text { min-width: 0; flex: 1; } .armpin-my__title { margin: 0; font-size: 1.4rem; overflow-wrap: normal; } .armpin-my__welcome { margin: 0; font-size: 0.85rem; color: var(--ap-muted-foreground); } .armpin-my__ctx-badge { background: var(--ap-secondary); color: var(--ap-secondary-foreground); border-radius: calc(var(--ap-radius) - 2px); padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 700; } .armpin-my__header-link { font-size: 0.85rem; } a.armpin-my__header-icon { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.75rem; font-size: 0.85rem; } a.armpin-my__header-icon:hover { background: var(--ap-secondary); text-decoration: none; } /* Owner (2026-10-15): "תהפוך את זה לכפתור ותשים אותו לימין הרשתות שלי" - armpin_widgets_ render_customize_form() (widget-registry.php, shared/reusable by future pages) renders a plain
with no class of its own to hook; styled entirely via this scoped selector (only applies when embedded in /my's header row) instead of hardcoding any /my-specific class into that shared, page-agnostic function. Button look matches a.armpin-my__header-icon's values directly (can't share the class - markup has none to add it to without touching widget-registry.php). The body becomes a floating dropdown panel (position:absolute) instead of pushing header content down when opened - the header row stays a fixed height either way. */ .armpin-my__header-actions .armpin-widgets__customize { position: relative; margin-block-end: 0; background: none; border: none; } .armpin-my__header-actions .armpin-widgets__customize > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.75rem; font-size: 0.85rem; font-weight: 400; } .armpin-my__header-actions .armpin-widgets__customize > summary:hover { background: var(--ap-secondary); } .armpin-my__header-actions .armpin-widgets__customize > summary::-webkit-details-marker { display: none; } .armpin-my__header-actions .armpin-widgets__customize-body { position: absolute; inset-inline-start: 0; top: calc(100% + 0.4rem); z-index: 20; width: max(16rem, 100%); padding: 0.9rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.14); } .armpin-my__panel { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-my__panel-title { margin-block-start: 0; font-size: 0.85rem; text-transform: none; color: var(--ap-muted-foreground); font-family: var(--ap-font-sans); font-weight: 700; letter-spacing: 0; } /* Real bug, found live (2026-10-12): [class^="armpin-"] a (the sitewide default link-color reset) is (0,1,1) specificity - a bare single-class selector like the one this rule used to be is only (0,1,0) and silently loses, so this 's text rendered in --ap-foreground regardless of what color was declared here. Harmless before the green-token rework (both colors were dark by coincidence); invisible now that this element's background is also dark. Tag-qualified to win on specificity, matching every other color-bearing rule in this file. */ a.armpin-my__next-primary { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; border-radius: calc(var(--ap-radius) - 2px); background: var(--ap-accent); color: var(--ap-accent-foreground); padding-inline: 1rem; font-weight: 700; } .armpin-my__next-status { font-size: 0.75rem; font-weight: 400; opacity: 0.85; } .armpin-my__next-list { list-style: none; margin: 0.75rem 0 0; padding: 0; border-top: 1px solid var(--ap-line); } .armpin-my__next-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-block: 0.4rem; border-bottom: 1px solid var(--ap-line); font-size: 0.88rem; } .armpin-my__next-item-done { color: var(--ap-muted-foreground); } .armpin-my__next-note, .armpin-my__next-meta { font-size: 0.78rem; color: var(--ap-muted-foreground); } button.armpin-my__skip { background: none; border: none; color: var(--ap-muted-foreground); text-decoration: underline; padding: 0; font-size: 0.75rem; font-weight: 400; } .armpin-my__layout { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .armpin-my__leftcol { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; } .armpin-my__mainarea { min-width: 0; width: 100%; } @media (min-width: 64rem) { .armpin-my__layout { flex-direction: row; } .armpin-my__leftcol { flex: 0 0 17rem; } .armpin-my__mainarea { flex: 1 1 auto; } } .armpin-my__panel--compact { padding: 0.75rem; } .armpin-my__panel--compact .armpin-my__panel-title { font-size: 0.78rem; margin-block-end: 0.4rem; } .armpin-my__panel--compact .armpin-my__next-primary { min-height: 2.25rem; font-size: 0.85rem; padding-inline: 0.75rem; } .armpin-my__panel--compact .armpin-my__opp-item { padding-block: 0.35rem; font-size: 0.82rem; } details.armpin-my__next-more { margin-block-start: 0.5rem; font-size: 0.78rem; } details.armpin-my__next-more summary { cursor: pointer; color: var(--ap-muted-foreground); } .armpin-my__columns { display: grid; gap: 1rem; grid-template-columns: 1fr; } .armpin-my__grid3, .armpin-my__grid4 { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 64rem) { .armpin-my__columns { grid-template-columns: 2fr 1fr; } .armpin-my__grid3 { grid-template-columns: repeat(3, 1fr); } .armpin-my__grid4 { grid-template-columns: repeat(2, 1fr); } } /* Widget registry main area (/my, Phase 3) - each widget is self-contained so hide/reorder never produces unbalanced markup; --third siblings wrap 3-up instead of relying on a shared grid div spanning multiple widgets (which would break the moment one of them is hidden or reordered). */ .armpin-my__widgets { display: flex; flex-wrap: wrap; gap: 1rem; } .armpin-my__widget--full { flex: 1 1 100%; min-width: 0; } .armpin-my__widget--third { flex: 1 1 100%; min-width: 0; } @media (min-width: 64rem) { .armpin-my__widget--third { flex: 1 1 calc(33.333% - 0.67rem); } } .armpin-widgets__customize { margin-block-end: 1rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); } .armpin-widgets__customize > summary { list-style: none; cursor: pointer; padding: 0.6rem 0.9rem; font-size: 0.85rem; font-weight: 600; } .armpin-widgets__customize > summary::-webkit-details-marker { display: none; } .armpin-widgets__customize-body { padding: 0 0.9rem 0.9rem; } .armpin-widgets__list { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .armpin-widgets__item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); font-size: 0.85rem; } .armpin-widgets__item--required { color: var(--ap-muted-foreground); } .armpin-widgets__item-tag { font-size: 0.7rem; background: var(--ap-background); border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap; } .armpin-widgets__item-move button { background: none; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.1rem 0.5rem; cursor: pointer; font-size: 0.85rem; margin-inline-start: 0.2rem; } .armpin-widgets__item-move button:hover { background: var(--ap-background); } .armpin-widgets__save { background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 1rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; } .armpin-notifications { max-width: 48rem; margin-inline: auto; padding-block: 1rem 2rem; } .armpin-notifications__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1.25rem; font-weight: 600; } .armpin-notifications__bar form { margin: 0; } .armpin-notifications__unread-label { font-family: var(--ap-font-sans); } .armpin-notifications__empty { color: var(--ap-muted-foreground); padding: 2rem 0; text-align: center; } .armpin-notifications__group + .armpin-notifications__group { margin-block-start: 2rem; } .armpin-notifications__group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 0.5rem; } .armpin-notifications__group-head h2 { font-family: var(--ap-font-display); font-size: 1rem; font-weight: 600; margin: 0; } .armpin-notifications__select-all { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ap-muted-foreground); cursor: pointer; } .armpin-notifications__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .armpin-notifications__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 1rem; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); background: var(--ap-panel); } .armpin-notifications__item.is-unread { border-color: var(--ap-action); background: color-mix(in srgb, var(--ap-action) 6%, var(--ap-panel)); font-weight: 600; } .armpin-notifications__item:not(.is-unread) { opacity: 0.75; } .armpin-notifications__item-select { display: flex; align-items: center; flex-shrink: 0; } .armpin-notifications__text { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.88rem; } .armpin-notifications__msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .armpin-notifications__msg a { color: inherit; text-decoration: none; } .armpin-notifications__msg a:hover { text-decoration: underline; } .armpin-notifications__date { flex-shrink: 0; font-size: 0.75rem; font-weight: 400; color: var(--ap-muted-foreground); } .armpin-notifications__bulk-actions { display: flex; gap: 0.6rem; margin-block-start: 1.5rem; } .armpin-my__cards { display: grid; gap: 0.75rem; grid-template-columns: 1fr; align-content: start; } @media (min-width: 40rem) { .armpin-my__cards { grid-template-columns: repeat(2, 1fr); } } .armpin-my__card { display: block; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-my__card-title { font-family: var(--ap-font-display); font-weight: 600; font-size: 0.95rem; text-transform: none; } .armpin-my__card-value { margin-block-start: 0.25rem; font-size: 0.85rem; color: var(--ap-muted-foreground); } .armpin-my__side { display: flex; flex-direction: column; gap: 1rem; } .armpin-my__progress { height: 0.5rem; border-radius: 999px; background: var(--ap-secondary); overflow: hidden; margin-block: 0.5rem; } .armpin-my__progress-bar { height: 100%; background: var(--ap-foreground); } .armpin-my__steps-label { font-size: 0.75rem; font-weight: 700; color: var(--ap-muted-foreground); margin-block: 0.5rem 0.2rem; } .armpin-my__steps { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; } .armpin-my__steps li { padding-block: 0.15rem; } .armpin-my__bullets { list-style: none; margin: 0.5rem 0; padding: 0; font-size: 0.85rem; color: var(--ap-muted-foreground); } .armpin-my__hint { font-size: 0.75rem; color: var(--ap-muted-foreground); } .armpin-my__opp-list { list-style: none; margin: 0.5rem 0; padding: 0; } /* Owner (2026-10-15): "הכפתור לא עכשיו... לא מתאים בגודל שלו, הכל צריך להיות מועמד לשמאל באותה מסגרת" - two real bugs: (1) justify-content:space-between stretched the label and the dismiss button to the two far edges of the card instead of grouping them together; (2) the dismiss button had no background/border of its own at all, so [class^="armpin-"] button[type="submit"] (specificity 0,2,1 - same site-wide default-button collision documented a few hundred lines up for .armpin-profile-form__verify-btn) filled it in with the big green hero-CTA look instead of a small secondary pill - confirmed live via screenshot, not guessed. */ .armpin-my__opp-item { display: flex; justify-content: flex-start; align-items: center; gap: 0.6rem; padding-block: 0.5rem; border-bottom: 1px solid var(--ap-line); font-size: 0.88rem; } .armpin-my__opp-benefit { display: block; font-size: 0.75rem; color: var(--ap-muted-foreground); } .armpin-my__panel .armpin-my__opp-item .armpin-my__opp-dismiss { font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px; border: none; background: var(--ap-secondary); color: var(--ap-muted-foreground); cursor: pointer; white-space: nowrap; flex-shrink: 0; } .armpin-my__panel .armpin-my__opp-item .armpin-my__opp-dismiss:hover { background: var(--ap-line); } .armpin-my__listings, .armpin-my__reach { font-size: 0.82rem; margin-block: 0.5rem 0; } .armpin-my__reach { color: var(--ap-muted-foreground); } .armpin-my__drafts, .armpin-my__notes, .armpin-my__orgs-mini, .armpin-my__following { list-style: none; margin: 0.5rem 0; padding: 0; font-size: 0.88rem; } .armpin-my__drafts li, .armpin-my__orgs-mini li, .armpin-my__following li { padding-block: 0.3rem; border-bottom: 1px solid var(--ap-line); } .armpin-my__notes li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding-block: 0.3rem; border-bottom: 1px solid var(--ap-line); } .armpin-my__notes-unread { font-weight: 700; } .armpin-my__notes-read { color: var(--ap-muted-foreground); } /* Owner (2026-10-15): "אם הוא ראה אותם, הוא יכול לעשות אישור או וי" - same site-wide button[type= submit] collision as the opportunity-dismiss button above, same proven fix (2 ancestor class levels + the button class = specificity 0,3,1, safely above the generic rule's 0,2,1). */ .armpin-my__panel .armpin-my__notes .armpin-my__note-read { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; padding: 0; border-radius: 999px; border: 1px solid var(--ap-line); background: var(--ap-secondary); color: var(--ap-muted-foreground); cursor: pointer; } .armpin-my__panel .armpin-my__notes .armpin-my__note-read:hover { background: var(--ap-action); color: var(--ap-action-foreground); border-color: var(--ap-action); } .armpin-my__invited, .armpin-my__following-type, .armpin-my__drafts-status, .armpin-my__links-meta { font-size: 0.75rem; color: var(--ap-foreground); } .armpin-my__following-type, .armpin-my__drafts-status { color: var(--ap-muted-foreground); } .armpin-my__timeline { list-style: none; margin: 0.5rem 0; padding-inline-start: 1rem; border-inline-start: 1px solid var(--ap-line); display: flex; flex-direction: column; gap: 0.75rem; } .armpin-my__timeline-item { position: relative; } .armpin-my__timeline-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .armpin-my__badge { border-radius: calc(var(--ap-radius) - 2px); padding: 0.1rem 0.45rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--ap-muted); color: var(--ap-muted-foreground); } .armpin-my__badge--official { background: var(--ap-foreground); color: var(--ap-background); } .armpin-my__badge--external { background: var(--ap-secondary); color: var(--ap-secondary-foreground); border: 1px solid var(--ap-line); } .armpin-my__timeline-date { font-family: var(--ap-font-num); font-size: 0.75rem; color: var(--ap-muted-foreground); } .armpin-my__timeline-title { margin-block: 0.3rem 0; font-weight: 600; } .armpin-my__timeline-detail { margin: 0; font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-my__links { list-style: none; margin: 0.5rem 0; padding: 0; } .armpin-my__links-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding-block: 0.5rem; border-bottom: 1px solid var(--ap-line); font-size: 0.88rem; } .armpin-my__coach-edit { margin-block-start: 0.75rem; padding-block-start: 0.75rem; border-top: 1px solid var(--ap-line); display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.88rem; } .armpin-my__coach-edit textarea { width: 100%; } /* ---------- gap-closing pass, 2026-10-05: suffixes in real use across the blocks that the patterns above didn't reach yet, found by diffing every armpin-*__suffix actually emitted in PHP against every selector already defined here. Owner-requested: real system states (loading/error/success/empty) and real mobile overflow handling, not just desktop. ---------- */ [class$="__loading"] { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; color: var(--ap-muted-foreground); font-size: 0.88rem; } [class$="__loading"]::before { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 999px; border: 2px solid var(--ap-line); border-top-color: var(--ap-foreground); animation: armpin-spin 0.7s linear infinite; flex-shrink: 0; } @keyframes armpin-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { [class$="__loading"]::before { animation: none; } } [class$="__error"] { background: var(--ap-secondary); border: 1px solid var(--ap-destructive); color: var(--ap-destructive); border-radius: var(--ap-radius); padding: 0.85rem 1rem; font-size: 0.88rem; } [class$="__success"], [class$="__message--success"] { background: var(--ap-secondary); border: 1px solid var(--ap-up); color: var(--ap-up); border-radius: var(--ap-radius); padding: 0.85rem 1rem; font-size: 0.88rem; } /* table/grid wrappers scroll horizontally on narrow screens instead of breaking the page layout */ [class$="__table-wrap"], [class$="__tables"] { max-width: 100%; overflow-x: auto; } /* secondary metadata text (dates, places, categories) across listing/detail cards */ [class$="__meta"], [class$="__date"], [class$="__category"], [class$="__city"], [class$="__club"], [class$="__federation"], [class$="__venue"], [class$="__byline"], [class$="__sub"], [class$="__name"] { font-size: 0.8rem; color: var(--ap-muted-foreground); } [class$="__date"] { font-family: var(--ap-font-num); } [class$="__price"] { font-family: var(--ap-font-num); font-weight: 700; color: var(--ap-foreground); } [class$="__heading"] { font-family: var(--ap-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; } [class$="__pager"] { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-block: 1rem; flex-wrap: wrap; } [class$="__form"] { display: flex; flex-direction: column; gap: 0.6rem; max-width: 32rem; } [class$="__group"] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } [class$="__box"] { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; margin-block-end: 0.75rem; } /* out-of-stock / already-done / no-data micro-states (map onto the empty/notice look) */ [class$="__oos"], [class$="__already"], [class$="__beaten"], [class$="__no-stream"] { display: inline-block; font-size: 0.78rem; color: var(--ap-muted-foreground); font-style: italic; } /* raw json/null values inside admin-crud detail views */ [class$="__json"] { font-family: var(--ap-font-num); font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; } [class$="__null"] { color: var(--ap-muted-foreground); font-style: italic; } /* ---------- home page (/) ---------- */ .armpin-home { display: flex; flex-direction: column; gap: 1rem; } .armpin-home__topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } .armpin-home__date { color: var(--ap-muted-foreground); font-size: 0.85rem; margin: 0; } .armpin-home__search input { width: 100%; min-width: 14rem; } .armpin-home__socials { display: flex; gap: 0.4rem; } a.armpin-home__social-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: calc(var(--ap-radius) - 2px); background: var(--ap-panel); border: 1px solid var(--ap-line); font-weight: 700; color: var(--ap-muted-foreground); transition: color 0.15s, background-color 0.15s; } a.armpin-home__social-icon:hover { color: var(--ap-foreground); background: var(--ap-secondary); } .armpin-home__social-icon svg { width: 1.05rem; height: 1.05rem; fill: currentColor; } /* Mobile fix (2026-10-12): .armpin-home__topbar's 3 children (date / search form with its own min-width:14rem input / the 11-icon .armpin-home__socials row, which has no shrink room since every icon is a fixed 2rem box) never fit side by side on a narrow screen - flex-wrap alone doesn't save it because .armpin-home__socials alone is already wider than the whole container (measured live: 416px row inside a ~355px-wide mobile page), so space-between's leftover-space math pushes it to a negative x offset instead of wrapping cleanly - confirmed via a same-origin iframe layout probe (see project_i18n_mechanism memory for the technique), this is what the owner saw as the menu/row "coming out in the wrong direction". Fix: stack the three rows full- width on mobile and let the social-icon row scroll horizontally within its own bounds instead of overflowing the page. */ @media (max-width: 640px) { .armpin-home__topbar { flex-direction: column; align-items: stretch; } .armpin-home__date { display: none; } .armpin-home__search { width: 100%; } .armpin-home__search input { width: 100%; min-width: 0; } .armpin-home__socials { max-width: 100%; overflow-x: auto; padding-block-end: 0.15rem; } } .armpin-home__ticker { display: flex; align-items: center; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); overflow: hidden; } a.armpin-home__ticker-tag { flex-shrink: 0; background: var(--ap-accent); color: var(--ap-accent-foreground); padding: 0.5rem 0.9rem; font-size: 0.75rem; font-weight: 700; } .armpin-home__ticker-viewport { flex: 1; min-width: 0; overflow: hidden; } .armpin-home__ticker-track { display: flex; align-items: center; gap: 1.5rem; width: max-content; white-space: nowrap; padding: 0.5rem 1rem; animation: armpin-ticker-scroll 35s linear infinite; } .armpin-home__ticker-viewport:hover .armpin-home__ticker-track { animation-play-state: paused; } @keyframes armpin-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .armpin-home__ticker-track { animation: none; } } .armpin-home__section-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 0.75rem; } .armpin-home__news-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); } .armpin-home__news-card { display: block; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); overflow: hidden; } .armpin-home__news-thumb { aspect-ratio: 16/9; background: var(--ap-secondary); overflow: hidden; } .armpin-home__news-thumb img { width: 100%; height: 100%; object-fit: cover; } .armpin-home__news-thumb--plain { display: grid; place-items: center; font-family: var(--ap-font-display); text-transform: uppercase; color: var(--ap-muted-foreground); padding: 0.5rem; } .armpin-home__news-thumb--plain img { width: 100%; height: 100%; object-fit: contain; } .armpin-home__news-meta { padding: 0.6rem 0.75rem 0; margin: 0; font-size: 0.72rem; color: var(--ap-muted-foreground); text-transform: uppercase; } .armpin-home__news-title { padding: 0.2rem 0.75rem 0; margin: 0; font-weight: 600; font-size: 0.9rem; } .armpin-home__news-summary { padding: 0 0.75rem 0.75rem; margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-home__results-ticker { display: flex; align-items: center; gap: 1rem; overflow-x: auto; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.5rem 0.75rem; } .armpin-home__results-tag { flex-shrink: 0; background: var(--ap-destructive); color: var(--ap-destructive-foreground); border-radius: calc(var(--ap-radius) - 2px); padding: 0.2rem 0.5rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; gap: 0.3em; } .armpin-home__columns { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 64rem) { .armpin-home__columns { grid-template-columns: 7fr 5fr; } } .armpin-home__panel-title { margin-block-start: 0; text-transform: none; letter-spacing: 0; } .armpin-home__rankings, .armpin-home__streams, .armpin-home__panel { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-home__rankings-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; } .armpin-home__rankings-tabs { display: flex; background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.15rem; } .armpin-home__rankings-tabs a { padding: 0.3rem 0.7rem; font-size: 0.75rem; font-weight: 600; color: var(--ap-muted-foreground); border-radius: calc(var(--ap-radius) - 3px); } .armpin-home__rankings-tabs a.is-active { background: var(--ap-foreground); color: var(--ap-background); } /* Restructured (2026-10-12, owner: search button cramped into the same wrapping row as the filters on mobile) - the button is now its own form-level child, sibling to a .armpin-home__rankings-fields wrapper holding just the text/select inputs, so it can sit on its own row (column flex) instead of wrapping awkwardly mid-row. */ .armpin-home__rankings-filters { display: flex; flex-direction: column; gap: 0.5rem; margin-block: 0.75rem; } .armpin-home__rankings-search-btn { align-self: flex-end; } .armpin-home__rankings-fields { display: flex; flex-wrap: wrap; gap: 0.5rem; } .armpin-home__rankings-fields input[type="text"] { flex: 1 1 10rem; min-width: 0; } .armpin-home__rankings-group { color: var(--ap-muted-foreground); text-transform: none; font-size: 0.85rem; } .armpin-home__rankings-list { list-style: none; margin: 0; padding: 0; } .armpin-home__rankings-row a, .armpin-home__rankings-static { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.4rem; border-block-end: 1px solid var(--ap-line); } .armpin-home__rankings-rank { font-family: var(--ap-font-num); color: var(--ap-muted-foreground); width: 1.5rem; } .armpin-home__rankings-avatar { width: 2.5rem; height: 2.5rem; border-radius: 999px; object-fit: cover; } .armpin-home__rankings-avatar--fallback { display: grid; place-items: center; background: var(--ap-secondary); font-size: 0.75rem; font-weight: 700; } .armpin-home__rankings-avatar--xl { width: 4rem; height: 4rem; } .armpin-home__rankings-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; } .armpin-home__rankings-sub { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ap-muted-foreground); } .armpin-home__rankings-delta, .armpin-home__rankings-points { font-family: var(--ap-font-num); font-size: 0.8rem; } .armpin-home__streams-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; justify-content: space-between; } .armpin-home__streams-count { font-size: 0.78rem; color: var(--ap-muted-foreground); display: flex; align-items: center; gap: 0.3em; } .armpin-home__streams-all { font-size: 0.78rem; } .armpin-home__streams-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr); margin-block-start: 0.75rem; } .armpin-home__streams-grid.is-full-mode { grid-template-columns: 1fr; } .armpin-home__stream-cell.is-hidden { display: none; } .armpin-home__stream-frame { width: 100%; aspect-ratio: 16/9; border: none; background: #000; } .armpin-home__stream-frame--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; color: #fff; text-align: center; } .armpin-home__stream-bar { display: flex; justify-content: space-between; gap: 0.5rem; background: var(--ap-secondary); padding: 0.3rem 0.6rem; font-size: 0.72rem; } button.armpin-home__streams-toggle, .armpin-home__streams-back { margin-block-start: 0.6rem; background: var(--ap-secondary); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.8rem; font-size: 0.78rem; cursor: pointer; } .armpin-home__athletes-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(4, 1fr); } .armpin-home__athlete-card { display: block; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.5rem; text-align: center; } .armpin-home__athlete-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: calc(var(--ap-radius) - 2px); display: block; background: var(--ap-secondary); } .armpin-home__athlete-fallback { width: 100%; aspect-ratio: 4/5; border-radius: calc(var(--ap-radius) - 2px); background: var(--ap-secondary); display: grid; place-items: center; font-family: var(--ap-font-display); font-size: 1.3rem; font-weight: 700; color: var(--ap-muted-foreground); } .armpin-home__athlete-name { margin: 0.4rem 0 0; font-size: 0.8rem; font-weight: 600; } .armpin-home__athlete-meta { margin: 0; font-size: 0.7rem; color: var(--ap-muted-foreground); } .armpin-home__athlete-record { margin: 0.2rem 0 0; font-size: 0.8rem; } .armpin-home__hero { display: grid; gap: 1rem; grid-template-columns: 1fr; border-radius: var(--ap-radius); overflow: hidden; } @media (min-width: 40rem) { .armpin-home__hero { grid-template-columns: 7fr 5fr; } } .armpin-home__hero-media img { width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; } .armpin-home__hero-body { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; } .armpin-home__hero-eyebrow { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.7rem; color: var(--ap-muted-foreground); margin: 0; } .armpin-home__hero-title { font-size: 1.8rem; margin: 0.4rem 0; text-transform: uppercase; } .armpin-home__hero-sub { color: var(--ap-muted-foreground); margin: 0; } .armpin-home__hero-cta { display: flex; align-items: center; gap: 0.75rem; margin-block-start: 1rem; } .armpin-home__hero-cta a { background: var(--ap-accent); color: var(--ap-accent-foreground); padding: 0.5rem 1rem; border-radius: calc(var(--ap-radius) - 2px); font-weight: 600; font-size: 0.85rem; } .armpin-home__clubs-filters { display: flex; gap: 0.5rem; margin-block-end: 0.75rem; } .armpin-home__clubs-list { list-style: none; margin: 0; padding: 0; } .armpin-home__clubs-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-block-end: 1px solid var(--ap-line); } .armpin-home__clubs-meta { flex: 1; font-size: 0.75rem; color: var(--ap-muted-foreground); } .armpin-home__blog-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); } .armpin-home__blog-card { display: block; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.85rem; } .armpin-home__blog-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: calc(var(--ap-radius) - 2px); margin-block-end: 0.5rem; } .armpin-home__blog-title { font-size: 1rem; margin: 0; } .armpin-home__blog-excerpt { font-size: 0.8rem; color: var(--ap-muted-foreground); margin: 0.3rem 0; } .armpin-home__blog-author { font-size: 0.75rem; font-weight: 600; margin: 0; } .armpin-home__shop { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 64rem) { .armpin-home__shop { grid-template-columns: 8fr 4fr; } } .armpin-home__shop-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block: 0.5rem; } .armpin-home__shop-chips a { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.3rem 0.7rem; font-size: 0.75rem; } .armpin-home__shop-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, 1fr); margin-block-start: 0.75rem; } @media (min-width: 40rem) { .armpin-home__shop-grid { grid-template-columns: repeat(4, 1fr); } } .armpin-home__shop-item { display: block; text-align: center; } .armpin-home__shop-item img, .armpin-home__shop-fallback { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--ap-radius) - 2px); background: var(--ap-secondary); display: block; } .armpin-home__shop-fallback { display: grid; place-items: center; padding: 0.5rem; } .armpin-home__shop-fallback img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: none; } .armpin-home__shop-name { font-size: 0.78rem; margin: 0.3rem 0 0; } .armpin-home__shop-price { font-size: 0.75rem; color: var(--ap-muted-foreground); margin: 0; } .armpin-home__sponsor { background: var(--ap-secondary); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.25rem; display: flex; flex-direction: column; } .armpin-home__sponsor img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: calc(var(--ap-radius) - 2px); margin-block-end: 0.75rem; } .armpin-home__sponsor-label { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.65rem; color: var(--ap-muted-foreground); margin: 0; } .armpin-home__sponsor-title { font-family: var(--ap-font-display); font-size: 1.3rem; text-transform: uppercase; margin: 0.4rem 0; } a.armpin-home__sponsor-cta { margin-block-start: 0.75rem; align-self: flex-start; background: var(--ap-accent); color: var(--ap-accent-foreground); padding: 0.5rem 1rem; border-radius: calc(var(--ap-radius) - 2px); font-weight: 600; font-size: 0.85rem; } /* ---------- /rankings, /ratings ---------- */ .armpin-ratings__title { margin-block-start: 0; } .armpin-ratings__links { display: flex; gap: 0.5rem; margin-block-end: 1rem; } .armpin-ratings__links a { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.9rem; font-size: 0.8rem; font-weight: 600; } .armpin-ratings__panel { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; } .armpin-ratings__seg { display: flex; background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.15rem; width: fit-content; } .armpin-ratings__seg a { padding: 0.4rem 0.9rem; font-size: 0.78rem; font-weight: 600; color: var(--ap-muted-foreground); border-radius: calc(var(--ap-radius) - 3px); } .armpin-ratings__seg a.is-active { background: var(--ap-foreground); color: var(--ap-background); } .armpin-ratings__filters select { min-width: 10rem; } .armpin-ratings__list { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); margin-block-start: 1rem; } .armpin-ratings__list ul { list-style: none; margin: 0; padding: 0; } .armpin-ratings__list li > a, .armpin-ratings__list li > div { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border-block-end: 1px solid var(--ap-line); } .armpin-ratings__place { font-family: var(--ap-font-num); font-weight: 700; width: 2rem; } .armpin-ratings__avatar { width: 2.5rem; height: 2.5rem; border-radius: 999px; object-fit: cover; } .armpin-ratings__avatar--fallback { display: grid; place-items: center; background: var(--ap-secondary); font-size: 0.75rem; font-weight: 700; } .armpin-ratings__name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; } .armpin-ratings__last { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ap-muted-foreground); } .armpin-ratings__inactive { font-size: 0.72rem; color: var(--ap-muted-foreground); } .armpin-ratings__move { font-family: var(--ap-font-num); font-size: 0.8rem; color: var(--ap-muted-foreground); width: 2.5rem; } .armpin-ratings__rating { font-weight: 700; width: 3.5rem; text-align: end; } /* ---------- competition-management cluster (/manage/*) ---------- */ .armpin-comp-nav { overflow-x: auto; margin-block-end: 1rem; } .armpin-comp-nav ul { display: flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0.25rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); width: max-content; min-width: 100%; } .armpin-comp-nav a { display: block; white-space: nowrap; padding: 0.5rem 0.8rem; border-radius: calc(var(--ap-radius) - 2px); font-size: 0.82rem; font-weight: 600; color: var(--ap-muted-foreground); } .armpin-comp-nav a.is-active { background: var(--ap-foreground); color: var(--ap-background); } .armpin-manage-comp__title, .armpin-manage-results__title { margin-block-start: 0; } .armpin-manage-comp__flow { font-size: 0.8rem; color: var(--ap-muted-foreground); } .armpin-manage-comp__sourcenote { font-size: 0.75rem; color: var(--ap-muted-foreground); margin-block-end: 1rem; } .armpin-manage-comp__state-badge { display: inline-block; border-radius: calc(var(--ap-radius) - 2px); padding: 0.1rem 0.5rem; font-size: 0.68rem; font-weight: 700; background: var(--ap-secondary); } .armpin-manage-comp__state-badge--entered { background: var(--ap-foreground); color: var(--ap-background); opacity: 0.7; } .armpin-manage-comp__state-badge--approved { background: var(--ap-up); color: var(--ap-background); } .armpin-manage-comp__state-badge--locked { background: var(--ap-foreground); color: var(--ap-background); } .armpin-manage-comp__bracket, .armpin-manage-comp__standalone { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; margin-block-end: 1rem; } .armpin-manage-comp__sub { font-size: 0.78rem; text-transform: uppercase; color: var(--ap-muted-foreground); margin-block: 0.75rem 0.3rem; } .armpin-manage-comp__participants, .armpin-manage-comp__matches { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; } .armpin-manage-comp__participants li, .armpin-manage-comp__matches li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-block: 0.4rem; border-block-end: 1px solid var(--ap-line); } .armpin-manage-comp__linked { color: var(--ap-muted-foreground); } .armpin-manage-comp__unlinked { background: var(--ap-destructive); color: var(--ap-destructive-foreground); border-radius: calc(var(--ap-radius) - 3px); padding: 0.1rem 0.4rem; font-size: 0.72rem; } button.armpin-manage-comp__unlink { background: none; border: none; color: var(--ap-down); cursor: pointer; text-decoration: underline; font-size: 0.78rem; } .armpin-manage-comp__mid { color: var(--ap-muted-foreground); font-size: 0.75rem; } .armpin-manage-comp__needslink { color: var(--ap-down); font-size: 0.78rem; } .armpin-manage-comp__matches .is-winner { font-weight: 700; } button.armpin-manage-comp__clear { background: none; border: none; color: var(--ap-muted-foreground); text-decoration: underline; cursor: pointer; } .armpin-manage-comp__empty, .armpin-manage-results__empty { background: var(--ap-secondary); border-radius: var(--ap-radius); padding: 1rem; text-align: center; color: var(--ap-muted-foreground); font-size: 0.88rem; } .armpin-manage-results__sub { color: var(--ap-muted-foreground); margin-block-start: 0; } .armpin-manage-results__note { font-size: 0.82rem; color: var(--ap-muted-foreground); } .armpin-manage-results__grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .armpin-manage-results__cat-wrap { border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.6rem 0.8rem; align-self: start; } .armpin-manage-results__cat-wrap > summary { cursor: pointer; font-weight: 600; } .armpin-manage-results__cat-wrap .armpin-manage-results__cat { margin-block-start: 0.6rem; border: none; padding: 0; background: none; } .armpin-manage-results__cat { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-manage-results__cat-head { display: flex; justify-content: space-between; align-items: center; } .armpin-manage-results__badge { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.1rem 0.5rem; font-size: 0.72rem; font-weight: 700; } .armpin-manage-results__badge.is-official { background: var(--ap-foreground); color: var(--ap-background); } .armpin-manage-results__list { display: block; list-style: none; margin: 0.6rem 0 0; padding: 0; } .armpin-manage-results__list li { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.4rem; border-block-end: 1px solid var(--ap-line); } .armpin-manage-results__place { width: 2rem; font-weight: 700; font-size: 1.1rem; text-align: center; } .armpin-manage-results__place.is-top3 { color: var(--ap-foreground); } .armpin-manage-results__list img, .armpin-manage-results__img-fallback { width: 2.5rem; height: 2.5rem; border-radius: calc(var(--ap-radius) - 3px); object-fit: cover; background: var(--ap-secondary); } .armpin-manage-results__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .armpin-manage-results__flag { width: 1.25rem; height: auto; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--ap-line); object-fit: cover; } .armpin-manage-results__country { font-size: 0.75rem; font-weight: 700; } .armpin-manage-results__podium-link { display: inline-block; margin-block-start: 0.4rem; font-size: 0.78rem; } /* ---------- /manage/competition-draw ---------- */ .armpin-draw { max-width: 72rem; margin-inline: auto; } .armpin-draw__titlebar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .armpin-draw__title { margin-block-start: 0; } .armpin-draw__titlebar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .armpin-draw__fullscreen-toggle, .armpin-draw__jump-picker { white-space: nowrap; } .armpin-draw__day-display { font-size: 0.85rem; color: var(--ap-muted-foreground); margin-block-end: 0.5rem; } .armpin-draw__day-edit { font-size: 0.78rem; } .armpin-draw__day { margin-block-end: 0.5rem; } .armpin-draw__hint { font-size: 0.75rem; color: var(--ap-muted-foreground); margin-block-end: 0.75rem; } .armpin-draw__champions { border: 2px solid var(--ap-primary); border-radius: var(--ap-radius); padding: 0.6rem 0.8rem; margin-block-end: 1rem; background: var(--ap-panel); } .armpin-draw__champions > summary { cursor: pointer; font-weight: 800; font-size: 1.05rem; } .armpin-draw__champions-body { margin-block-start: 0.6rem; display: flex; flex-direction: column; gap: 0.75rem; } .armpin-draw__champions-group { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; } .armpin-draw__champions-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.4rem; } .armpin-draw__champions-overwrite { font-weight: 600; color: var(--ap-destructive); } .armpin-draw__tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-block: 0.75rem 0; border-bottom: 1px solid var(--ap-line); } .armpin-draw__tab-wrap { display: inline-flex; align-items: center; gap: 0.15rem; } .armpin-draw__tab { background: none; border: none; border-block-end: 3px solid transparent; padding: 0.55rem 0.4rem; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ap-muted-foreground); cursor: pointer; } .armpin-draw__tab.is-active { color: var(--ap-foreground); border-block-end-color: var(--ap-action); } .armpin-draw__tab-close { font-size: 0.75rem; color: var(--ap-muted-foreground); opacity: 0.55; padding: 0.2rem 0.3rem; } .armpin-draw__tab-close:hover { opacity: 1; } .armpin-draw__tabpanes { margin-block-start: 0.75rem; } .armpin-draw__tabpane.is-active { display: flex; } .armpin-draw__tabpane:not(.is-active) { display: none; } .armpin-draw__cats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); margin-block-end: 1rem; } .armpin-draw__cat { display: block; cursor: pointer; background: var(--ap-panel); border: 2px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; font-size: 0.85rem; } .armpin-draw__cat.is-open { border-color: var(--ap-action); } .armpin-draw__cat.is-open .armpin-draw__cat-name::before { content: "\2713 "; color: var(--ap-action); } .armpin-draw__cat-name { font-weight: 600; } .armpin-draw__cat-meta { font-size: 0.72rem; opacity: 0.85; } .armpin-draw__cat.is-empty { opacity: 0.5; } .armpin-draw__cat.has-entrants { border-inline-start-width: 4px; } .armpin-draw__cat.has-entrants .armpin-draw__cat-meta { font-weight: 700; opacity: 1; color: var(--ap-foreground); } .armpin-draw__picker { margin: auto; max-width: 48rem; width: calc(100% - 2rem); max-height: calc(100vh - 4rem); overflow-y: auto; border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; background: var(--ap-background); color: var(--ap-foreground); } .armpin-draw__picker::backdrop { background: oklch(0 0 0 / 0.5); } .armpin-draw__picker-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 0.75rem; } .armpin-draw__picker-head h2 { margin: 0; font-size: 1.1rem; } .armpin-draw__picker-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--ap-muted-foreground); line-height: 1; padding: 0.25rem; } .armpin-cd__photo-dialog { margin: auto; max-width: 28rem; width: calc(100% - 2rem); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; background: var(--ap-background); color: var(--ap-foreground); } .armpin-cd__photo-dialog::backdrop { background: oklch(0 0 0 / 0.6); } .armpin-cd__photo-dialog video { width: 100%; border-radius: calc(var(--ap-radius) - 2px); background: #000; } .armpin-cd__photo-err { color: var(--ap-destructive); font-size: 0.85rem; } .armpin-cd__photo-actions { display: flex; gap: 0.5rem; margin-block-start: 0.75rem; } .armpin-cd__photo-actions button { flex: 1; padding: 0.5rem; border-radius: calc(var(--ap-radius) - 2px); cursor: pointer; } .armpin-cd__photo-actions [data-armpin-photo-capture] { background: var(--ap-primary); color: var(--ap-primary-foreground); border: none; font-weight: 700; } .armpin-cd__photo-actions [data-armpin-photo-cancel] { background: var(--ap-secondary); border: none; } .armpin-cd__photo-form [data-armpin-photo-open] { background: var(--ap-secondary); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.3rem 0.6rem; cursor: pointer; font-size: 0.85rem; } .armpin-draw__picker-close:hover { color: var(--ap-foreground); } .armpin-draw__age-group { margin-block-end: 0.6rem; } .armpin-draw__age-group > summary { font-weight: 600; cursor: pointer; padding-block: 0.4rem; } .armpin-draw__arm-title { font-size: 0.8rem; font-weight: 700; color: var(--ap-muted-foreground); margin-block: 0.5rem 0.4rem; } .armpin-draw__cat-manage { margin-block: 0.3rem 0.75rem; } .armpin-draw__cat-manage > summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; color: var(--ap-muted-foreground); padding-block: 0.3rem; } .armpin-draw__cat-manage > *:not(summary) { margin-block-start: 0.6rem; } .armpin-draw__quick-approve { margin-block: 0.5rem 1rem; padding: 0.6rem 0.8rem; background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); } .armpin-draw__quick-approve .description { margin-block-end: 0.5rem; font-size: 0.78rem; } .armpin-draw__empty { background: var(--ap-secondary); border-radius: var(--ap-radius); padding: 1rem; text-align: center; color: var(--ap-muted-foreground); } .armpin-draw__cat-detail { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; flex-direction: column; gap: 0.75rem; } .armpin-draw__stage { font-weight: 700; } .armpin-draw__counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; } @media (min-width: 40rem) { .armpin-draw__counts { grid-template-columns: repeat(6, 1fr); } } .armpin-draw__count { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem; text-align: center; } .armpin-draw__count div:first-child { font-size: 1.1rem; font-weight: 700; } .armpin-draw__count div:last-child { font-size: 0.65rem; } .armpin-draw__sub { font-size: 0.82rem; font-weight: 600; margin-block: 0.3rem; } .armpin-draw__people { list-style: none; margin: 0.3rem 0; padding: 0; font-size: 0.8rem; } .armpin-draw__toggle-all { font-size: 0.78rem; } .armpin-draw__locked { font-weight: 600; } .armpin-draw__podium-wrap { margin-block-start: 0.5rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-draw__podium-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--ap-muted-foreground); } .armpin-draw__podium { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "first first" "third second"; gap: 0.5rem; margin-block: 0.75rem; text-align: center; } .armpin-draw__podium-col--1 { grid-area: first; } .armpin-draw__podium-col--2 { grid-area: second; } .armpin-draw__podium-col--3 { grid-area: third; } .armpin-draw__podium-rank { font-weight: 800; font-size: 1.5rem; margin-block-end: 0.25rem; } .armpin-draw__podium-slot--1 { width: 50%; margin-inline: auto; } .armpin-draw__podium-slot { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; } .armpin-draw__podium-slot--1 { background: var(--ap-action); color: var(--ap-action-foreground); } .armpin-draw__podium-slot div:first-child { font-size: 1.6rem; } .armpin-draw__podium-slot bdi { display: block; font-weight: 600; margin-block-start: 0.2rem; } .armpin-draw__podium-slot span { display: block; font-size: 0.75rem; opacity: 0.75; margin-block-start: 0.15rem; } .armpin-draw__podium-missing { color: var(--ap-down); font-size: 0.82rem; margin-block-start: 0.5rem; } .armpin-draw__podium-approve { margin-block-start: 0.75rem; } .armpin-draw__tree-wrap > summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; color: var(--ap-muted-foreground); padding-block: 0.4rem; margin-block-start: 0.5rem; } .armpin-draw__standings .armpin-manage-results__list li { padding-block: 0.25rem; gap: 0.4rem; font-size: 0.72rem; } .armpin-draw__standings .armpin-manage-results__place { width: 1.3rem; font-size: 0.8rem; } .armpin-draw__standings .armpin-manage-results__list img, .armpin-draw__standings .armpin-manage-results__img-fallback { width: 1.5rem; height: 1.5rem; } .armpin-draw__standings .armpin-manage-results__flag { width: 0.9rem; } .armpin-draw__standings .armpin-manage-results__country { font-size: 0.65rem; } .armpin-draw__fmt, .armpin-draw__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .armpin-draw__reason-label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--ap-muted-foreground); flex-basis: 100%; } .armpin-draw__reason-label input { font-size: 0.85rem; } .armpin-draw__primary-action { margin-block: 0.5rem; } .armpin-draw__meta { font-size: 0.78rem; color: var(--ap-muted-foreground); background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; } .armpin-draw__bracket-side { margin-block-start: 0.5rem; } .armpin-draw__bracket-side-title { font-weight: 700; margin-block-end: 0.3rem; } .armpin-draw__rounds { display: flex; gap: 0.75rem; overflow-x: auto; padding-block-end: 0.5rem; direction: ltr; } .armpin-draw__round { min-width: 13rem; display: flex; flex-direction: column; gap: 0.4rem; } .armpin-draw__round-title { font-size: 0.75rem; font-weight: 700; color: var(--ap-muted-foreground); } .armpin-draw__node { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 3px); font-size: 0.75rem; padding: 0; overflow: hidden; } .armpin-draw__node.is-bye { background: var(--ap-secondary); opacity: 0.7; } .armpin-draw__node.is-pending { border-style: dashed; opacity: 0.8; } .armpin-draw__node-title { font-weight: 600; background: var(--ap-secondary); padding: 0.15rem 0.5rem; color: var(--ap-muted-foreground); font-size: 0.68rem; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .armpin-draw__undo-link { font-size: 0.8rem; font-weight: 700; color: var(--ap-muted-foreground); } .armpin-draw__undo-link:hover { color: var(--ap-foreground); } .armpin-draw__undo { background: var(--ap-panel); border: 2px solid var(--ap-destructive); border-radius: var(--ap-radius); padding: 1rem; margin-block-end: 1rem; } .armpin-draw__undo-label { font-weight: 700; font-size: 0.82rem; margin-block: 0.5rem 0.2rem; } .armpin-draw__undo-list { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; } .armpin-draw__undo-list li { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 3px); padding: 0.3rem 0.5rem; margin-block-end: 0.2rem; } .armpin-draw__warn { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem; font-weight: 600; margin-block: 0.5rem; } .armpin-draw__warn--official { background: var(--ap-down); color: var(--ap-background); } .armpin-draw__undo-official-check { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; margin-block: 0.4rem; } .armpin-draw__undo-form { display: flex; flex-direction: column; gap: 0.5rem; margin-block-start: 0.75rem; } .armpin-draw__undo-actions { display: flex; gap: 0.5rem; align-items: center; } button.armpin-draw__undo-confirm { background: var(--ap-destructive); color: var(--ap-destructive-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 1rem; font-weight: 700; cursor: pointer; } .armpin-draw__muted { color: var(--ap-muted-foreground); font-size: 0.85rem; } .armpin-draw__slot { padding: 0.35rem 0.5rem; border-block-start: 1px solid var(--ap-line); } .armpin-draw__slot:first-of-type { border-block-start: none; } .armpin-draw__slot.is-winner { background: var(--ap-action); color: var(--ap-action-foreground); font-weight: 700; } .armpin-draw__pick-form { display: block; margin: 0; } .armpin-draw__node .armpin-draw__pick-form button.armpin-draw__slot { display: block; width: 100%; border: none; border-block-start: 1px solid var(--ap-line); background: none; font: inherit; text-align: start; cursor: pointer; color: inherit; } .armpin-draw__pick-form:first-of-type .armpin-draw__slot { border-block-start: none; } .armpin-draw__node .armpin-draw__pick-form button.armpin-draw__slot:hover { background: var(--ap-secondary); } .armpin-draw__slot-wrap { position: relative; display: block; } .armpin-draw__name-edit { position: absolute; inset-inline-end: 0.3rem; inset-block-start: 0.3rem; font-size: 0.7rem; opacity: 0.5; text-decoration: none; } .armpin-draw__name-edit:hover { opacity: 1; } .armpin-draw__name-form:not([hidden]) { display: flex; gap: 0.3rem; padding: 0.3rem; background: var(--ap-secondary); } .armpin-draw__name-form input { flex: 1; min-width: 0; font-size: 0.75rem; } .armpin-draw__bracket-side.has-divider { border-block-start: 1px dashed var(--ap-line); margin-block-start: 1.25rem; padding-block-start: 1.25rem; } .armpin-draw__order { display: block; margin-block-start: 1.25rem; } .armpin-draw__order-title { font-size: 0.78rem; font-weight: 700; color: var(--ap-muted-foreground); cursor: pointer; padding-block: 0.3rem; } .armpin-draw__order ol { list-style: none; margin: 0.5rem 0 0; padding: 0; display: block; } .armpin-draw__order li { display: flex; align-items: center; gap: 0.4rem; border-block-end: 1px solid var(--ap-line); padding: 0.25rem 0.1rem; font-size: 0.72rem; } .armpin-draw__order li.is-done { opacity: 0.65; } .armpin-draw__order-num { font-weight: 700; color: var(--ap-muted-foreground); flex: 0 0 auto; } html.armpin-draw-fullscreen .armpin-site-header, html.armpin-draw-fullscreen .armpin-site-footer, html.armpin-draw-fullscreen .armpin-comp-nav, html.armpin-draw-fullscreen .armpin-events-admin__title, html.armpin-draw-fullscreen .armpin-events-admin__subtitle, html.armpin-draw-fullscreen .armpin-events-admin__selector, html.armpin-draw-fullscreen .armpin-events-admin__actions-row, html.armpin-draw-fullscreen .armpin-events-admin__back, html.armpin-draw-fullscreen .armpin-events-admin__sidebar { display: none !important; } html.armpin-draw-fullscreen .armpin-events-admin__layout { grid-template-columns: 1fr !important; } html.armpin-draw-fullscreen .armpin-draw { max-width: 100% !important; } /* ---------- /manage/bracket ---------- */ .armpin-bracket-mgmt { max-width: 64rem; margin-left: 0; margin-right: auto; } .armpin-bracket-mgmt__title { margin-block-start: 0; display: inline-block; margin-inline-end: 0.5rem; } .armpin-bracket-mgmt__event { color: var(--ap-muted-foreground); } .armpin-bracket-mgmt__cats ul { display: flex; gap: 0.25rem; list-style: none; margin: 0 0 1rem; padding: 0.25rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); overflow-x: auto; width: max-content; max-width: 100%; } .armpin-bracket-mgmt__cats a { display: block; white-space: nowrap; padding: 0.4rem 0.8rem; border-radius: calc(var(--ap-radius) - 2px); font-size: 0.82rem; font-weight: 600; color: var(--ap-muted-foreground); } .armpin-bracket-mgmt__cats a.is-active { background: var(--ap-foreground); color: var(--ap-background); } .armpin-bracket-mgmt__empty, .armpin-bracket-mgmt__loading { background: var(--ap-secondary); border-radius: var(--ap-radius); padding: 1rem; text-align: center; color: var(--ap-muted-foreground); } .armpin-bracket-mgmt__hold { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem; font-weight: 700; margin-block-end: 0.75rem; } .armpin-bracket-mgmt__format { font-size: 0.75rem; color: var(--ap-muted-foreground); } .armpin-bracket-mgmt__side { margin-block-start: 1rem; } .armpin-bracket-mgmt__side.has-divider { border-top: 2px dashed var(--ap-line); padding-block-start: 1rem; } .armpin-bracket-mgmt__side-title { font-size: 0.75rem; text-transform: uppercase; color: var(--ap-muted-foreground); margin-block-end: 0.5rem; } .armpin-bracket-mgmt__rounds { display: flex; gap: 0.75rem; overflow-x: auto; padding-block-end: 0.5rem; direction: ltr; } .armpin-bracket-mgmt__round { min-width: 11rem; display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; } .armpin-bracket-mgmt__round-title { text-align: center; font-size: 0.68rem; color: var(--ap-muted-foreground); } .armpin-bracket-mgmt__box { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); overflow: hidden; } .armpin-bracket-mgmt__box.is-next { border-color: var(--ap-foreground); border-width: 2px; } .armpin-bracket-mgmt__box.is-live { border-color: var(--ap-foreground); } .armpin-bracket-mgmt__box-head { display: flex; justify-content: space-between; background: var(--ap-secondary); padding: 0.1rem 0.5rem; font-size: 0.65rem; color: var(--ap-muted-foreground); } .armpin-bracket-mgmt__box-head a { font-weight: 700; } .armpin-bracket-mgmt__competitor { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.3rem 0.5rem; font-size: 0.8rem; text-align: start; border: none; background: none; cursor: default; border-block-end: 1px solid var(--ap-line); } .armpin-bracket-mgmt__competitor:last-child { border-block-end: none; } form.armpin-bracket-mgmt__pick-form { display: block; } form.armpin-bracket-mgmt__pick-form button.armpin-bracket-mgmt__competitor { cursor: pointer; width: 100%; } form.armpin-bracket-mgmt__pick-form button.armpin-bracket-mgmt__competitor:hover { background: var(--ap-secondary); } .armpin-bracket-mgmt__competitor.is-winner { background: var(--ap-foreground); color: var(--ap-background); font-weight: 700; } .armpin-bracket-mgmt__order { margin-block-start: 1rem; } .armpin-bracket-mgmt__order-title { font-size: 0.75rem; font-weight: 700; color: var(--ap-muted-foreground); } .armpin-bracket-mgmt__order ol { list-style: none; margin: 0.4rem 0; padding: 0; display: grid; gap: 0.3rem; direction: ltr; } @media (min-width: 40rem) { .armpin-bracket-mgmt__order ol { grid-template-columns: repeat(2, 1fr); } } .armpin-bracket-mgmt__order li { display: flex; align-items: center; gap: 0.5rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 3px); padding: 0.3rem 0.6rem; font-size: 0.78rem; } .armpin-bracket-mgmt__order li.is-next { border-color: var(--ap-foreground); } .armpin-bracket-mgmt__order li.is-done { opacity: 0.6; } .armpin-bracket-mgmt__done { margin-inline-start: auto; font-weight: 700; color: var(--ap-foreground); } .armpin-bracket-mgmt__next-tag { margin-inline-start: auto; font-weight: 700; } .armpin-bracket-mgmt__waiting { margin-inline-start: auto; color: var(--ap-muted-foreground); } .armpin-bracket-mgmt__results { margin-block-start: 1rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-bracket-mgmt__results-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--ap-muted-foreground); } .armpin-bracket-mgmt__official { background: var(--ap-up); color: var(--ap-background); display: inline-block; padding: 0.3rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); font-weight: 700; } .armpin-bracket-mgmt__unofficial { border: 2px dashed var(--ap-destructive); color: var(--ap-destructive); display: inline-block; padding: 0.3rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); font-weight: 700; } .armpin-bracket-mgmt__podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-block: 0.75rem; text-align: center; } .armpin-bracket-mgmt__podium-slot { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; } .armpin-bracket-mgmt__podium-slot--1 { background: var(--ap-foreground); color: var(--ap-background); } .armpin-bracket-mgmt__podium-slot div:first-child { font-size: 1.5rem; } .armpin-bracket-mgmt__approve { margin-block-start: 0.75rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.75rem; } .armpin-bracket-mgmt__approve ul { color: var(--ap-down); font-size: 0.82rem; } .armpin-bracket-mgmt__undo { background: var(--ap-panel); border: 2px solid var(--ap-destructive); border-radius: var(--ap-radius); padding: 1rem; margin-block-end: 1rem; } .armpin-bracket-mgmt__undo-label { font-weight: 700; font-size: 0.82rem; margin-block: 0.5rem 0.2rem; } .armpin-bracket-mgmt__undo-list { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; } .armpin-bracket-mgmt__undo-list li { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 3px); padding: 0.3rem 0.5rem; margin-block-end: 0.2rem; } .armpin-bracket-mgmt__warn { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem; font-weight: 600; margin-block: 0.5rem; } .armpin-bracket-mgmt__undo-form { display: flex; flex-direction: column; gap: 0.5rem; margin-block-start: 0.75rem; } .armpin-bracket-mgmt__undo-actions { display: flex; gap: 0.5rem; align-items: center; } button.armpin-bracket-mgmt__undo-confirm { background: var(--ap-destructive); color: var(--ap-destructive-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 1rem; font-weight: 700; cursor: pointer; } .armpin-bracket-mgmt__muted { color: var(--ap-muted-foreground); font-size: 0.85rem; } /* ---------- /bracket/$categoryId (public read-only view) ---------- */ .armpin-bracket-view { max-width: 64rem; margin-left: 0; margin-right: auto; } .armpin-bracket-view__meta, .armpin-bracket-view__format { font-size: 0.82rem; color: var(--ap-muted-foreground); margin-block: 0.2rem; } .armpin-pubshare { display: flex; gap: 0.4rem; margin-block: 0.5rem; } .armpin-pubshare__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--ap-secondary); border: none; cursor: pointer; font-size: 1rem; line-height: 1; text-decoration: none; color: var(--ap-foreground); } .armpin-pubshare__btn:hover { background: var(--ap-primary); color: var(--ap-primary-foreground); } .armpin-pubshare__btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; } .armpin-bracket-view__empty { background: var(--ap-secondary); border-radius: var(--ap-radius); padding: 1rem; text-align: center; color: var(--ap-muted-foreground); } .armpin-bracket-view__order { list-style: none; margin: 0.4rem 0; padding: 0; display: grid; gap: 0.3rem; direction: ltr; } @media (min-width: 40rem) { .armpin-bracket-view__order { grid-template-columns: repeat(2, 1fr); } } .armpin-bracket-view__order li { display: flex; align-items: center; gap: 0.5rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 3px); padding: 0.3rem 0.6rem; font-size: 0.78rem; } .armpin-bracket-view__order li.is-decided { opacity: 0.6; } .armpin-bracket-view__num { font-weight: 700; } .armpin-bracket-view__table { background: var(--ap-primary); color: var(--ap-primary-foreground); border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.72rem; font-weight: 700; } .armpin-bracket-view__side { color: var(--ap-muted-foreground); } .armpin-bracket-view__standings { width: 100%; margin-block-start: 0.75rem; font-size: 0.85rem; border-collapse: collapse; } .armpin-bracket-view__standings th, .armpin-bracket-view__standings td { padding: 0.3rem 0.5rem; text-align: start; border-block-end: 1px solid var(--ap-line); } .armpin-bracket-view__note { font-size: 0.78rem; color: var(--ap-muted-foreground); margin-block-start: 0.75rem; } /* ---------- /my-training ---------- */ .armpin-training__title { margin-block-start: 0; } .armpin-training__program-label { color: var(--ap-muted-foreground); font-size: 0.8rem; } .armpin-training__calendar { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.75rem; } .armpin-training__cal-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; align-items: center; } .armpin-training__cal-tabs { display: flex; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); overflow: hidden; } .armpin-training__cal-tabs a { padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 600; color: var(--ap-muted-foreground); } .armpin-training__cal-tabs a.is-active { background: var(--ap-foreground); color: var(--ap-background); } .armpin-training__cal-nav { display: flex; gap: 0.3rem; align-items: center; } .armpin-training__cal-nav a { padding: 0.3rem 0.6rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); font-size: 0.78rem; } .armpin-training__cal-title { font-weight: 600; margin: 0.5rem 0; } .armpin-training__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .armpin-training__cal-dow { font-size: 0.68rem; color: var(--ap-muted-foreground); padding-block-end: 0.2rem; } .armpin-training__cal-cell { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.25rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 3px); min-height: 2.5rem; } .armpin-training__cal-grid--week .armpin-training__cal-cell { min-height: 3.5rem; } .armpin-training__cal-cell.is-today { border-color: var(--ap-foreground); border-width: 2px; } .armpin-training__cal-cell.is-sel { border-color: var(--ap-foreground); } .armpin-training__cal-cell.is-out { opacity: 0.4; } .armpin-training__cal-daynum { font-size: 0.7rem; color: var(--ap-muted-foreground); } .armpin-training__cal-chip { font-size: 0.6rem; font-weight: 700; background: var(--ap-secondary); border-radius: 3px; padding: 0 0.2rem; } .armpin-training__day-picker { display: flex; gap: 0.4rem; margin-block-start: 0.5rem; } .armpin-training__day-picker a { padding: 0.3rem 0.6rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); font-size: 0.78rem; } .armpin-training__day-picker a.is-active { background: var(--ap-foreground); color: var(--ap-background); } .armpin-training__rest, .armpin-training__empty { background: var(--ap-secondary); border-radius: var(--ap-radius); padding: 1rem; text-align: center; color: var(--ap-muted-foreground); font-size: 0.88rem; } .armpin-training__workout { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; margin-block-start: 0.75rem; } .armpin-training__workout-date { font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-training__workout-title { margin: 0.3rem 0; } .armpin-training__workout-cues { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem; font-size: 0.85rem; } .armpin-training__completed-badge { color: var(--ap-foreground); font-weight: 700; } button.armpin-training__start-btn, button.armpin-training__finish-btn { background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem 1.2rem; font-weight: 700; width: 100%; cursor: pointer; } .armpin-training__actuals { margin-block: 0.75rem; } .armpin-training__actuals ul { list-style: none; margin: 0.4rem 0; padding: 0; font-size: 0.85rem; } .armpin-training__actuals li { padding-block: 0.3rem; border-block-end: 1px solid var(--ap-line); } .armpin-training__runner { margin-block-start: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; } .armpin-training__unit { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.7rem; } .armpin-training__unit-label { font-weight: 700; } .armpin-training__unit-sub, .armpin-training__unit-asked { font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-training__unit-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; margin-block-start: 0.5rem; } .armpin-training__unit-note { grid-column: 1 / -1; } .armpin-training__unit-reply { grid-column: 1 / -1; font-size: 0.8rem; display: flex; align-items: flex-start; gap: 0.4em; } .armpin-training__runner-actions { display: flex; gap: 0.5rem; position: sticky; bottom: 0.5rem; } .armpin-training__runner-actions button { flex: 1; border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; font-weight: 700; cursor: pointer; border: 1px solid var(--ap-line); background: var(--ap-panel); } .armpin-training__progress { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; margin-block-start: 1rem; } .armpin-training__progress-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-block: 0.5rem; } .armpin-training__progress-stats > div { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; text-align: center; } .armpin-training__progress-stats span:first-child { display: block; font-size: 1.4rem; font-weight: 700; } .armpin-training__progress-stats span:last-child { font-size: 0.72rem; color: var(--ap-muted-foreground); } .armpin-training__progress-table-wrap { overflow-x: auto; } .armpin-training__progress-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .armpin-training__progress-table th { text-align: center; padding: 0.4rem; color: var(--ap-muted-foreground); font-size: 0.72rem; } .armpin-training__progress-table td { text-align: center; padding: 0.4rem; border-top: 1px solid var(--ap-line); } .armpin-training__reports, .armpin-training__messages { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; margin-block-start: 1rem; } .armpin-training__report { border-top: 1px solid var(--ap-line); padding-block-start: 0.5rem; margin-block-start: 0.5rem; font-size: 0.85rem; } .armpin-training__report-label { color: var(--ap-muted-foreground); } .armpin-training__message { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; margin-block-end: 0.3rem; font-size: 0.85rem; max-width: 80%; } .armpin-training__message.is-mine { margin-inline-start: auto; background: var(--ap-foreground); color: var(--ap-background); } .armpin-training__message-form { display: flex; gap: 0.5rem; margin-block-start: 0.5rem; } /* ---------- /community ---------- */ .armpin-community__title { margin-block-start: 0; } .armpin-community__sub { color: var(--ap-muted-foreground); } .armpin-community__layout { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 64rem) { .armpin-community__layout { grid-template-columns: 1fr 16rem; } } .armpin-community__feed { display: flex; flex-direction: column; gap: 0.75rem; } .armpin-community__composer { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-community__composer-bar { display: flex; justify-content: space-between; align-items: center; } .armpin-community__composer-name { font-size: 0.8rem; color: var(--ap-muted-foreground); } .armpin-community__share-prompt { background: var(--ap-secondary); border-radius: var(--ap-radius); padding: 0.85rem; } .armpin-community__share-links { display: flex; gap: 0.5rem; margin-block-start: 0.5rem; flex-wrap: wrap; } .armpin-community__share-links a { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.3rem 0.7rem; font-size: 0.78rem; } .armpin-community__post { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-community__post-head { display: flex; align-items: center; gap: 0.6rem; } .armpin-community__avatar { width: 2.25rem; height: 2.25rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; } .armpin-community__avatar--fallback { display: grid; place-items: center; background: var(--ap-secondary); font-size: 0.75rem; font-weight: 700; } .armpin-community__post-meta { flex: 1; min-width: 0; } .armpin-community__author { margin: 0; font-size: 0.88rem; font-weight: 600; } .armpin-community__author span { font-weight: 400; color: var(--ap-muted-foreground); font-size: 0.78rem; } .armpin-community__time { margin: 0; font-size: 0.72rem; color: var(--ap-muted-foreground); } .armpin-community__delete button { background: none; border: none; color: var(--ap-muted-foreground); cursor: pointer; font-size: 1rem; } .armpin-community__post-title { margin-block: 0.6rem 0.2rem; font-size: 1rem; } .armpin-community__post-text { white-space: pre-line; margin: 0.4rem 0; font-size: 0.9rem; } .armpin-community__post-image { width: 100%; max-height: 24rem; object-fit: cover; border-radius: calc(var(--ap-radius) - 2px); margin-block-start: 0.6rem; } .armpin-community__actions { display: flex; gap: 1rem; margin-block-start: 0.75rem; padding-block-start: 0.75rem; border-top: 1px solid var(--ap-line); } .armpin-community__action { background: none; border: none; color: var(--ap-muted-foreground); font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3em; } .armpin-community__action.is-liked { color: var(--ap-down); } .armpin-community__comments { margin-block-start: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-community__comment { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; } .armpin-community__comment-head { display: flex; align-items: center; gap: 0.5rem; } .armpin-community__comment-avatar { width: 1.5rem; height: 1.5rem; border-radius: 999px; object-fit: cover; background: var(--ap-panel); } .armpin-community__comment-author { flex: 1; min-width: 0; margin: 0; font-size: 0.78rem; font-weight: 600; } .armpin-community__comment-time { color: var(--ap-muted-foreground); font-size: 0.7rem; } .armpin-community__comment-body { margin: 0.3rem 0 0; font-size: 0.82rem; } .armpin-community__comment-form { display: flex; gap: 0.5rem; } .armpin-community__about { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; height: fit-content; font-size: 0.85rem; } /* ---------- /h2h ---------- */ .armpin-h2h { max-width: 60rem; margin-inline: auto; padding-inline: 1.25rem; padding-block: 1.5rem; } .armpin-h2h__title { margin-block-start: 0; } .armpin-h2h__panel { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.25rem; } .armpin-h2h__sides { display: flex; flex-direction: column; gap: 1.5rem; align-items: stretch; } @media (min-width: 40rem) { .armpin-h2h__sides { flex-direction: row; align-items: flex-start; } } .armpin-h2h__side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; } .armpin-h2h__picker { display: flex; gap: 0.4rem; width: 100%; max-width: 18rem; } .armpin-h2h__input { flex: 1; min-width: 0; } button.armpin-h2h__pick-btn { background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.45rem 0.8rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .armpin-h2h__avatar { width: 8rem; height: 10.667rem; border-radius: 0.3rem; object-fit: cover; box-shadow: 0 0 0 1px var(--ap-line), 0 4px 14px rgba(0,0,0,0.12); } .armpin-h2h__avatar--fallback { display: grid; place-items: center; background: var(--ap-secondary); font-size: 1.8rem; font-weight: 700; } .armpin-h2h__name { font-family: var(--ap-font-display); font-size: 1.25rem; margin: 0; } .armpin-h2h__wins { font-size: 2.2rem; font-weight: 700; margin: 0; } .armpin-h2h__wins-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ap-muted-foreground); margin: 0; } .armpin-h2h__stats { width: 100%; max-width: 18rem; margin: 0; } .armpin-h2h__stats div { display: flex; justify-content: space-between; gap: 0.5rem; padding-block: 0.2rem; font-size: 0.85rem; } .armpin-h2h__stats dt { color: var(--ap-muted-foreground); } .armpin-h2h__profile-link { font-size: 0.78rem; font-weight: 600; } .armpin-h2h__vs { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; align-self: center; } .armpin-h2h__vs span { font-family: var(--ap-font-display); font-size: 1.3rem; font-weight: 700; color: var(--ap-muted-foreground); } .armpin-h2h__swap { font-size: 0.75rem; padding: 0.25rem 0.6rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); } .armpin-h2h__matches { margin-block-start: 1rem; } .armpin-h2h__matches ul { list-style: none; margin: 0.75rem 0 0; padding: 0; } .armpin-h2h__matches li { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.6rem; border-block-end: 1px solid var(--ap-line); } .armpin-h2h__score { font-family: var(--ap-font-display); font-size: 1.1rem; font-weight: 700; width: 3.5rem; } .armpin-h2h__score.is-up { color: var(--ap-up); } .armpin-h2h__score.is-down { color: var(--ap-down); } .armpin-h2h__match-info { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; } .armpin-h2h__match-meta { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ap-muted-foreground); } /* ---------- WorldShell hubs (/coaching, /training) ---------- */ .armpin-world__title { margin-block-start: 0; } .armpin-world__sub { color: var(--ap-muted-foreground); max-width: 40rem; } .armpin-world__section { margin-block-start: 1.5rem; } .armpin-world__section-title { margin-block-end: 0.75rem; text-transform: none; letter-spacing: 0; } .armpin-world__cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .armpin-world__card { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; display: block; } /* ---------- /manage/control-center ---------- */ .armpin-cc__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .armpin-cc__head h1 { margin-block-start: 0; } .armpin-cc__event { color: var(--ap-muted-foreground); } .armpin-cc__empty, .armpin-cc__viewonly, .armpin-cc__muted { color: var(--ap-muted-foreground); } .armpin-cc__viewonly { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; font-size: 0.85rem; } .armpin-cc__attn { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; margin-block-start: 1rem; } .armpin-cc__attn-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-cc__attn-item { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; font-size: 0.85rem; } .armpin-cc__attn-item--hold { border: 1px solid var(--ap-destructive); } .armpin-cc__attn-item--finish { border: 1px solid var(--ap-foreground); } .armpin-cc__hold-tag { background: var(--ap-destructive); color: var(--ap-destructive-foreground); font-weight: 700; font-size: 0.68rem; border-radius: 3px; padding: 0.1rem 0.4rem; } .armpin-cc__inline-form { display: inline-flex; gap: 0.3rem; align-items: center; } .armpin-cc__finish { background: var(--ap-panel); border: 2px solid var(--ap-foreground); border-radius: var(--ap-radius); padding: 1rem; margin-block-start: 1rem; } .armpin-cc__finish-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); margin-block: 0.75rem; } .armpin-cc__finish-actions { margin-block-start: 0.75rem; } .armpin-cc__tables { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-block-start: 1rem; } @media (min-width: 56rem) { .armpin-cc__tables { grid-template-columns: repeat(2, 1fr); } } .armpin-cc__table { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; } .armpin-cc__table-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .armpin-cc__table-head h3 { margin: 0; } .armpin-cc__main-tag { background: var(--ap-foreground); color: var(--ap-background); font-size: 0.65rem; font-weight: 700; border-radius: 3px; padding: 0.1rem 0.4rem; } .armpin-cc__table-cat { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem; } .armpin-cc__current { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.7rem; } .armpin-cc__current-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.8rem; } .armpin-cc__stage { color: var(--ap-muted-foreground); } .armpin-cc__vs { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-start: 0.5rem; } .armpin-cc__vs-label { font-family: var(--ap-font-display); font-weight: 700; color: var(--ap-muted-foreground); } .armpin-cc__athlete-img { width: 2.25rem; height: 2.25rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; } .armpin-cc__athlete-img--empty { background: var(--ap-panel); display: inline-block; } .armpin-cc__athlete-info { display: flex; flex-direction: column; min-width: 0; } .armpin-cc__athlete-name { font-weight: 600; font-size: 0.85rem; } .armpin-cc__athlete-country { font-size: 0.65rem; color: var(--ap-muted-foreground); } .armpin-cc__winner-row { display: flex; gap: 0.5rem; margin-block-start: 0.6rem; } button.armpin-cc__winner-btn { flex: 1; background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem; font-weight: 700; cursor: pointer; } .armpin-cc__intro-link { display: inline-block; margin-block-start: 0.5rem; font-size: 0.78rem; } .armpin-cc__next h4 { font-size: 0.75rem; color: var(--ap-muted-foreground); margin-block-end: 0.3rem; } .armpin-cc__next ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .armpin-cc__next li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 3px); padding: 0.3rem 0.5rem; } .armpin-cc__next .num { color: var(--ap-muted-foreground); } .armpin-cc__settings { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; margin-block-start: 1rem; } .armpin-cc__settings-body { margin-block-start: 0.75rem; display: flex; flex-direction: column; gap: 1rem; } .armpin-cc__settings-form { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: end; } .armpin-cc__settings-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-cc__sponsor { border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; } .armpin-cc__sponsor-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .armpin-cc__sponsor-surfaces { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block-start: 0.5rem; font-size: 0.75rem; } /* ---------- /manage/competition-day ---------- */ .armpin-cd__event { color: var(--ap-muted-foreground); } .armpin-cd__empty, .armpin-cd__muted { color: var(--ap-muted-foreground); } .armpin-cd__walkin-note { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem 0.8rem; font-size: 0.8rem; color: var(--ap-muted-foreground); } .armpin-cd__settings { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.75rem; margin-block: 0.75rem; } .armpin-cd__settings-body { margin-block-start: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-cd__inline-form { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .armpin-cd__filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block: 0.75rem; } .armpin-cd__filters input[type=text] { flex: 1; min-width: 12rem; } .armpin-cd__tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-block-end: 0.75rem; } .armpin-cd__tabs a { padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); color: var(--ap-muted-foreground); } .armpin-cd__tabs a.is-active { background: var(--ap-foreground); color: var(--ap-background); border-color: transparent; } .armpin-cd__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-cd__row { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.1rem 0.8rem; } .armpin-cd__row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.6rem 0; cursor: pointer; } .armpin-cd__row-main { flex: 1; min-width: 10rem; } .armpin-cd__row-sub { display: block; font-size: 0.72rem; color: var(--ap-muted-foreground); } .armpin-cd__row-src { font-size: 0.68rem; color: var(--ap-muted-foreground); } .armpin-cd__row-status { font-size: 0.78rem; font-weight: 600; } .armpin-cd__pay-warn { font-weight: 700; color: var(--ap-destructive); } .armpin-cd__blockers { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.6rem; } .armpin-cd__blockers span { background: color-mix(in srgb, var(--ap-destructive) 15%, transparent); color: var(--ap-destructive); font-size: 0.68rem; font-weight: 600; border-radius: 3px; padding: 0.1rem 0.4rem; } .armpin-cd__detail { border-top: 1px solid var(--ap-line); padding-block: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.85rem; } .armpin-cd__dl { display: grid; grid-template-columns: repeat(2, auto 1fr); gap: 0.2rem 0.6rem; font-size: 0.75rem; } @media (min-width: 40rem) { .armpin-cd__dl { grid-template-columns: repeat(4, auto 1fr); } } .armpin-cd__dl dt { color: var(--ap-muted-foreground); } .armpin-cd__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; } .armpin-cd__actions button, .armpin-cd__btn-primary, .armpin-cd__btn-strong { border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; background: var(--ap-panel); } .armpin-cd__btn-primary { background: var(--ap-action); color: var(--ap-action-foreground); } .armpin-cd__btn-strong { background: var(--ap-foreground); color: var(--ap-background); } .armpin-cd__attempts { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; } .armpin-cd__attempts li { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 3px); padding: 0.4rem 0.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .armpin-cd__correct-form { display: inline-flex; gap: 0.3rem; margin-inline-start: auto; } .armpin-cd__readings { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem; font-size: 0.8rem; } .armpin-cd__weigh-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .armpin-cd__cat-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; } .armpin-cd__cat-table th { text-align: start; color: var(--ap-muted-foreground); font-size: 0.72rem; padding-block-end: 0.3rem; } .armpin-cd__cat-table td { border-top: 1px solid var(--ap-line); padding: 0.4rem 0.2rem; vertical-align: top; } .armpin-cd__over { font-weight: 700; color: var(--ap-destructive); } /* ---------- /manage/competition-ops ---------- */ .armpin-ops__empty, .armpin-ops__muted, .armpin-ops__noManage { color: var(--ap-muted-foreground); } .armpin-ops__tabs { display: flex; gap: 0.3rem; margin-block: 0.75rem; } .armpin-ops__tabs a { padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); color: var(--ap-muted-foreground); } .armpin-ops__tabs a.is-active { background: var(--ap-foreground); color: var(--ap-background); border-color: transparent; } .armpin-ops__managerbar { display: flex; flex-wrap: wrap; gap: 1rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.75rem; margin-block-end: 1rem; align-items: flex-end; } .armpin-ops__inline-form { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .armpin-ops__inline-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; color: var(--ap-muted-foreground); } .armpin-ops__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { .armpin-ops__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 80rem) { .armpin-ops__grid { grid-template-columns: repeat(3, 1fr); } } .armpin-ops__table { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-ops__table-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .armpin-ops__table-head h2 { margin: 0; font-size: 1rem; } .armpin-ops__status-tag { background: var(--ap-secondary); font-size: 0.68rem; border-radius: 3px; padding: 0.1rem 0.4rem; } .armpin-ops__ms-auto { margin-inline-start: auto; } .armpin-ops__staff { display: flex; flex-direction: column; gap: 0.3rem; } .armpin-ops__staff-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; } .armpin-ops__staff-row > span:first-child { width: 6rem; flex-shrink: 0; color: var(--ap-muted-foreground); } .armpin-ops__current { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; } .armpin-ops__label { font-size: 0.75rem; font-weight: 700; margin: 0 0 0.3rem; } .armpin-ops__meta { font-size: 0.72rem; color: var(--ap-muted-foreground); margin: 0.2rem 0; } .armpin-ops__sides { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem; font-size: 0.78rem; } .armpin-ops__sides .is-left { background: var(--ap-panel); border-radius: calc(var(--ap-radius) - 3px); padding: 0.3rem 0.5rem; text-align: left; } .armpin-ops__sides .is-right { background: var(--ap-panel); border-radius: calc(var(--ap-radius) - 3px); padding: 0.3rem 0.5rem; text-align: right; } .armpin-ops__countdown { text-align: center; font-size: 1.2rem; font-weight: 700; margin: 0.4rem 0; } .armpin-ops__expired { background: var(--ap-destructive); color: var(--ap-destructive-foreground); text-align: center; font-weight: 700; font-size: 0.78rem; border-radius: calc(var(--ap-radius) - 3px); padding: 0.3rem; margin: 0.4rem 0; } .armpin-ops__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.5rem; } .armpin-ops__actions button, .armpin-ops__actions select { font-size: 0.75rem; } button.armpin-ops__btn-danger { background: var(--ap-destructive); color: var(--ap-destructive-foreground); border: none; border-radius: calc(var(--ap-radius) - 3px); padding: 0.35rem 0.6rem; font-weight: 600; cursor: pointer; } .armpin-ops__queue ol { list-style: none; margin: 0.3rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .armpin-ops__queue li { background: color-mix(in srgb, var(--ap-secondary) 60%, transparent); border-radius: calc(var(--ap-radius) - 3px); padding: 0.4rem; } .armpin-ops__queue-meta { font-size: 0.7rem; color: var(--ap-muted-foreground); margin-block-end: 0.3rem; } .armpin-ops__done summary { cursor: pointer; font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-ops__done ul { list-style: none; margin: 0.3rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .armpin-ops__presence-list { list-style: none; margin: 0; padding: 0; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); } .armpin-ops__presence-row { border-block-end: 1px solid var(--ap-line); } .armpin-ops__presence-row:last-child { border-block-end: none; } .armpin-ops__presence-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; } .armpin-ops__presence-participants { list-style: none; margin: 0; padding: 0 0.8rem 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; } .armpin-ops__presence-participants li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* ---------- /blog/new ---------- */ .armpin-blognew__sub { color: var(--ap-muted-foreground); } .armpin-blognew__form { display: grid; gap: 0.75rem; max-width: 42rem; margin: 1rem auto 0; } .armpin-blognew__form input, .armpin-blognew__form select, .armpin-blognew__form textarea { width: 100%; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; font-size: 0.9rem; } .armpin-blognew__row3 { display: grid; gap: 0.5rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .armpin-blognew__row3 { grid-template-columns: repeat(3, 1fr); } } .armpin-blognew__row2 { display: grid; gap: 0.5rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .armpin-blognew__row2 { grid-template-columns: repeat(2, 1fr); } } .armpin-blognew__body { min-height: 16rem; } .armpin-blognew__form button { background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.7rem; font-weight: 700; cursor: pointer; } /* ---------- /creator-studio ---------- */ .armpin-my__creator-embed { padding-block-start: 0.75rem; } .armpin-my__creator-embed .armpin-cs h1 { font-size: 1.1rem; margin-block-start: 0; } .armpin-my__creator-embed .armpin-cs__back-link { display: none; } .armpin-cs__sub { color: var(--ap-muted-foreground); } .armpin-cs__empty, .armpin-cs__hint, a.armpin-cs__hint { color: var(--ap-muted-foreground); font-size: 0.82rem; } .armpin-cs__topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block: 1rem; } .armpin-cs__back-link { font-size: 0.82rem; color: var(--ap-muted-foreground); text-decoration: none; } .armpin-cs__back-link:hover { color: var(--ap-foreground); text-decoration: underline; } .armpin-cs__owner-form label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; } .armpin-cs__owner-form select { font-weight: 700; padding: 0.4rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); border: 1px solid var(--ap-line); background: var(--ap-background); } .armpin-cs__socials-note { font-size: 0.75rem; color: var(--ap-muted-foreground); } .armpin-cs__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 64rem) { .armpin-cs__grid { grid-template-columns: 2fr 1fr; } } .armpin-cs__picker, .armpin-cs__mylist { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-cs__picker h2, .armpin-cs__mylist h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.75rem; } .armpin-cs__tpl-grid { display: grid; gap: 0.6rem; grid-template-columns: 1fr; } @media (min-width: 36rem) { .armpin-cs__tpl-grid { grid-template-columns: repeat(2, 1fr); } } button.armpin-cs__tpl-btn { width: 100%; text-align: start; background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.75rem; font-weight: 600; cursor: pointer; } button.armpin-cs__tpl-btn:hover { border-color: var(--ap-action); } .armpin-cs__item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .armpin-cs__item-list li { border-block-end: 1px solid var(--ap-line); } .armpin-cs__item-list a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.85rem; } .armpin-cs__item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .armpin-cs__status-tag { flex-shrink: 0; background: var(--ap-secondary); border-radius: 3px; padding: 0.1rem 0.4rem; font-size: 0.72rem; } .armpin-cs__editor { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 64rem) { .armpin-cs__editor { grid-template-columns: repeat(2, 1fr); } } .armpin-cs__edit-panel, .armpin-cs__preview-box, .armpin-cs__distribute { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-cs__preview-col { display: flex; flex-direction: column; gap: 1rem; align-content: start; } .armpin-cs__edit-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-end: 0.75rem; } .armpin-cs__edit-form { display: flex; flex-direction: column; gap: 0.75rem; } .armpin-cs__edit-form input, .armpin-cs__edit-form select, .armpin-cs__edit-form textarea { width: 100%; background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; font-size: 0.88rem; } .armpin-cs__field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; } .armpin-cs__field span { color: var(--ap-muted-foreground); } .armpin-cs__media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-block-start: 0.4rem; } .armpin-cs__media-item { position: relative; display: block; aspect-ratio: 1; border-radius: calc(var(--ap-radius) - 3px); overflow: hidden; background: var(--ap-secondary); cursor: pointer; outline: 2px solid transparent; } .armpin-cs__media-item.is-on { outline-color: var(--ap-foreground); } .armpin-cs__media-item input { position: absolute; inset-inline-start: 0.3rem; inset-block-start: 0.3rem; } .armpin-cs__media-item img { width: 100%; height: 100%; object-fit: cover; } .armpin-cs__media-thumb { display: grid; place-items: center; width: 100%; height: 100%; font-size: 0.72rem; color: var(--ap-muted-foreground); text-align: center; padding: 0.2rem; } .armpin-cs__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.5rem; } button.armpin-cs__btn, button.armpin-cs__btn-outline, a.armpin-cs__btn-ghost, button.armpin-cs__btn-ghost, button.armpin-cs__btn-strong { border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; border: 1px solid var(--ap-line); background: var(--ap-panel); display: inline-flex; align-items: center; } button.armpin-cs__btn { background: var(--ap-action); color: var(--ap-action-foreground); border-color: transparent; } button.armpin-cs__btn-strong { background: var(--ap-action); color: var(--ap-action-foreground); border-color: transparent; } a.armpin-cs__btn-ghost, button.armpin-cs__btn-ghost { background: transparent; border-color: transparent; color: var(--ap-muted-foreground); } .armpin-cs__preview-card { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); overflow: hidden; } .armpin-cs__preview-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .armpin-cs__preview-body { padding: 1rem; } .armpin-cs__badge { background: var(--ap-primary); color: var(--ap-primary-foreground); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; border-radius: 3px; padding: 0.15rem 0.4rem; } .armpin-cs__preview-heading { font-size: 1.2rem; font-weight: 700; margin: 0.4rem 0 0; } .armpin-cs__preview-title { font-weight: 600; margin: 0.6rem 0 0; } .armpin-cs__preview-text { font-size: 0.85rem; white-space: pre-line; margin: 0.2rem 0 0; } .armpin-cs__preview-foot { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ap-muted-foreground); margin: 0.6rem 0 0; } .armpin-cs__copy-row { display: flex; gap: 0.5rem; margin-block-end: 0.75rem; flex-wrap: wrap; } .armpin-cs__dest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-cs__dest-list li { border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem; } .armpin-cs__dest-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; } .armpin-cs__caption-form { display: flex; gap: 0.4rem; margin-block-start: 0.4rem; } /* ---------- /onboarding ---------- */ .armpin-onb__sub { color: var(--ap-muted-foreground); } .armpin-onb__card { max-width: 36rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.25rem; margin-block-start: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .armpin-onb__hint { color: var(--ap-muted-foreground); font-size: 0.82rem; } .armpin-onb__intent-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr; margin-block: 0.5rem; } @media (min-width: 36rem) { .armpin-onb__intent-grid { grid-template-columns: repeat(2, 1fr); } } .armpin-onb__intent { display: flex; flex-direction: column; gap: 0.1rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem 0.8rem; cursor: pointer; } .armpin-onb__intent.is-on { background: var(--ap-foreground); color: var(--ap-background); border-color: transparent; } .armpin-onb__intent input { margin-inline-end: 0.4rem; } .armpin-onb__intent-name { font-weight: 700; } .armpin-onb__intent-hint { font-size: 0.75rem; opacity: 0.85; } .armpin-onb__buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .armpin-onb__buttons button, .armpin-onb__buttons a { background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem 1.2rem; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; } .armpin-onb__btn-ghost { background: transparent !important; color: var(--ap-muted-foreground) !important; } .armpin-onb__form { display: flex; flex-direction: column; gap: 0.75rem; } .armpin-onb__form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--ap-muted-foreground); } .armpin-onb__form input, .armpin-onb__form select, .armpin-onb__form textarea { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; font-size: 0.9rem; color: var(--ap-foreground); } .armpin-onb__row2 { display: grid; gap: 0.5rem; grid-template-columns: 1fr; } @media (min-width: 36rem) { .armpin-onb__row2 { grid-template-columns: repeat(2, 1fr); } } .armpin-onb__flag { display: inline-block; width: 1.4rem; height: auto; border-radius: 2px; margin-inline-start: 0.4rem; vertical-align: middle; } .armpin-onb__radio-row { display: flex; gap: 0.5rem; } .armpin-onb__radio { flex-direction: row !important; align-items: center; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.8rem; cursor: pointer; } .armpin-onb__radio.is-on { background: var(--ap-foreground); color: var(--ap-background); border-color: transparent; } .armpin-onb__club-search { display: flex; gap: 0.5rem; } .armpin-onb__club-search input { flex: 1; } .armpin-onb__club-hits { list-style: none; margin: 0.4rem 0 0; padding: 0; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); overflow: hidden; } .armpin-onb__club-hits li button { width: 100%; text-align: start; padding: 0.5rem 0.7rem; border: none; background: var(--ap-panel); cursor: pointer; font-size: 0.85rem; } .armpin-onb__club-hits li button:hover { background: var(--ap-secondary); } .armpin-onb__club-linked { color: var(--ap-up); font-size: 0.82rem; } .armpin-onb__missing { color: var(--ap-destructive); font-size: 0.82rem; } /* ---------- /marketplace/manage ---------- */ .armpin-mkt__sub { color: var(--ap-muted-foreground); } .armpin-mkt__empty, .armpin-mkt__hint, a.armpin-mkt__hint { color: var(--ap-muted-foreground); font-size: 0.82rem; } .armpin-mkt__topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block: 1rem; } .armpin-mkt__topbar label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; } .armpin-mkt__topbar select { font-weight: 700; padding: 0.4rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); border: 1px solid var(--ap-line); background: var(--ap-background); } .armpin-mkt__btn, a.armpin-mkt__btn-ghost, button.armpin-mkt__btn-danger { border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 1rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; border: 1px solid var(--ap-line); display: inline-flex; align-items: center; text-decoration: none; } a.armpin-mkt__btn { background: var(--ap-action); color: var(--ap-action-foreground); border-color: transparent; } a.armpin-mkt__btn-ghost { background: transparent; color: var(--ap-muted-foreground); } button.armpin-mkt__btn-danger { background: var(--ap-destructive); color: var(--ap-destructive-foreground); border-color: transparent; } .armpin-mkt__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-mkt__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.85rem; } .armpin-mkt__row-title { font-weight: 700; margin: 0; } .armpin-mkt__row-meta, .armpin-mkt__row-stats { font-size: 0.75rem; color: var(--ap-muted-foreground); margin: 0.2rem 0 0; } .armpin-mkt__row-mod { font-size: 0.75rem; color: var(--ap-destructive); margin: 0.2rem 0 0; } .armpin-mkt__row-actions { display: flex; gap: 0.5rem; align-items: center; } .armpin-mkt__row-actions a { font-size: 0.8rem; font-weight: 600; } .armpin-mkt__editor { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-mkt__form { display: flex; flex-direction: column; gap: 0.75rem; } .armpin-mkt__form input, .armpin-mkt__form select, .armpin-mkt__form textarea { width: 100%; background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; font-size: 0.88rem; } .armpin-mkt__row2 { display: grid; gap: 0.5rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .armpin-mkt__row2 { grid-template-columns: repeat(2, 1fr); } } .armpin-mkt__media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin-block-start: 0.4rem; } @media (min-width: 40rem) { .armpin-mkt__media-grid { grid-template-columns: repeat(6, 1fr); } } .armpin-mkt__media-item { position: relative; display: block; aspect-ratio: 1; border-radius: calc(var(--ap-radius) - 3px); overflow: hidden; background: var(--ap-secondary); outline: 2px solid transparent; } .armpin-mkt__media-item.is-on { outline-color: var(--ap-foreground); } .armpin-mkt__media-item input { position: absolute; inset-inline-start: 0.3rem; inset-block-start: 0.3rem; } .armpin-mkt__media-item img { width: 100%; height: 100%; object-fit: cover; } .armpin-mkt__media-thumb { display: grid; place-items: center; width: 100%; height: 100%; font-size: 0.68rem; color: var(--ap-muted-foreground); text-align: center; padding: 0.2rem; } .armpin-mkt__private-tag { position: absolute; inset-block-end: 0; inset-inline-start: 0; background: color-mix(in srgb, var(--ap-background) 80%, transparent); font-size: 0.6rem; padding: 0.1rem 0.3rem; } .armpin-mkt__status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .armpin-mkt__status-row select { width: auto; } .armpin-mkt__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .armpin-mkt__delete-form { display: inline-flex; gap: 0.4rem; align-items: center; } .armpin-mkt__delete-form input { width: 12rem; } /* ---------- /organizations/$slug/manage ---------- */ .armpin-orgm__back { font-size: 0.78rem; color: var(--ap-muted-foreground); display: inline-block; margin-block-end: 0.5rem; } .armpin-orgm__sub { color: var(--ap-muted-foreground); } .armpin-orgm__empty, .armpin-orgm__hint, a.armpin-orgm__hint { color: var(--ap-muted-foreground); font-size: 0.82rem; } .armpin-orgm__home { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-block: 1rem; } @media (min-width: 40rem) { .armpin-orgm__home { grid-template-columns: repeat(3, 1fr); } } .armpin-orgm__home a { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.7rem; font-size: 0.85rem; font-weight: 600; } .armpin-orgm__home a:hover { border-color: var(--ap-foreground); } .armpin-orgm__card { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.25rem; margin-block-end: 1rem; } .armpin-orgm__card h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ap-muted-foreground); margin: 0 0 0.75rem; } .armpin-orgm__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 64rem) { .armpin-orgm__grid { grid-template-columns: repeat(2, 1fr); } } .armpin-orgm__col2 { grid-column: 1 / -1; } .armpin-orgm__form { display: flex; flex-direction: column; gap: 0.75rem; } .armpin-orgm__form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--ap-muted-foreground); } .armpin-orgm__form input, .armpin-orgm__form textarea, .armpin-orgm__form select { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; font-size: 0.88rem; color: var(--ap-foreground); } .armpin-orgm__form button { align-self: flex-start; background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.55rem 1.2rem; font-weight: 700; cursor: pointer; } .armpin-orgm__row2 { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr); } .armpin-orgm__color-row { flex-direction: row !important; align-items: center; gap: 0.5rem !important; } .armpin-orgm__brand-preview { border-radius: calc(var(--ap-radius) - 2px); overflow: hidden; } .armpin-orgm__brand-strip { height: 0.4rem; } .armpin-orgm__brand-preview p { padding: 1rem; font-weight: 700; text-transform: uppercase; margin: 0; } .armpin-orgm__warn { color: var(--ap-destructive); font-size: 0.78rem; } .armpin-orgm__autosave-status { align-self: flex-start; color: var(--ap-muted-foreground); font-size: 0.82rem; } .armpin-orgm__member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .armpin-orgm__member { display: grid; gap: 0.75rem; grid-template-columns: 1fr; padding-block: 0.75rem; border-top: 1px solid var(--ap-line); } @media (min-width: 56rem) { .armpin-orgm__member { grid-template-columns: 1fr 1.2fr 1.2fr 9rem; } } .armpin-orgm__member:first-child { border-top: none; } .armpin-orgm__member-name { font-weight: 700; margin: 0; } .armpin-orgm__member-box { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 3px); padding: 0.5rem; } .armpin-orgm__member-box--admin { border-color: color-mix(in srgb, var(--ap-foreground) 40%, var(--ap-line)); } .armpin-orgm__box-label { font-size: 0.68rem; text-transform: uppercase; color: var(--ap-muted-foreground); margin: 0 0 0.3rem; font-weight: 700; } .armpin-orgm__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; } .armpin-orgm__tag { display: inline-flex; align-items: center; gap: 0.3em; background: var(--ap-secondary); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; } /* Owner (2026-10-15): self-service "הצטרפות" request on /organizations + its admin review on organizations-manage.php (inc/blocks/organization-join.php). Button selectors use a 3-class- chain from the start (0,3,0 specificity) to pre-empt the generic [class^="armpin-"] button[type="submit"] collision (0,2,1) that had to be fixed reactively four separate times earlier today - see project_button_cascade_collision memory. */ .armpin-org-join { margin-block-start: 0.4rem; } .armpin-orgs-list__join-form { margin: 0; } .armpin-org-join .armpin-orgs-list__join-form .armpin-orgs-list__join-btn { font-size: 0.78rem; font-weight: 700; padding: 0.35rem 0.9rem; border-radius: 999px; border: none; background: var(--ap-action); color: var(--ap-action-foreground); cursor: pointer; } .armpin-org-join .armpin-orgs-list__join-form .armpin-orgs-list__join-btn:hover { opacity: 0.88; } .armpin-orgs-list__join-status { display: block; font-size: 0.75rem; color: var(--ap-muted-foreground); } .armpin-orgs-list__join-status a { color: var(--ap-foreground); text-decoration: underline; } /* class-armpin-list-grid.php - the generic widget actually live on /organizations (and every other listing route sharing it). .armpin-list-grid__card is now the real grid cell (was the itself before an image + the join widget needed to sit outside it); .armpin-list-grid__item keeps its existing rule unchanged for the 's own internal field stacking. */ .armpin-list-grid__card { display: flex; flex-direction: column; } .armpin-list-grid__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ap-radius); margin-block-end: 0.4rem; } .armpin-orgm__join-req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .armpin-orgm__join-req { padding-block: 0.75rem; border-top: 1px solid var(--ap-line); } .armpin-orgm__join-req:first-child { border-top: none; } .armpin-orgm__join-req-actions { display: flex; gap: 0.5rem; margin-block-start: 0.5rem; } .armpin-orgm__join-req .armpin-orgm__join-req-actions .armpin-orgm__join-approve-btn { font-size: 0.82rem; font-weight: 700; padding: 0.35rem 0.9rem; border-radius: calc(var(--ap-radius) - 2px); border: none; background: var(--ap-action); color: var(--ap-action-foreground); cursor: pointer; } .armpin-orgm__join-req .armpin-orgm__join-req-actions .armpin-orgm__join-decline-btn { font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.9rem; border-radius: calc(var(--ap-radius) - 2px); border: 1px solid var(--ap-line); background: none; color: var(--ap-muted-foreground); cursor: pointer; } .armpin-orgm__join-req .armpin-orgm__join-req-actions .armpin-orgm__join-decline-btn:hover { background: var(--ap-secondary); } .armpin-orgm__tag--admin { background: transparent; border: 1px solid color-mix(in srgb, var(--ap-foreground) 50%, var(--ap-line)); font-weight: 600; border-radius: calc(var(--ap-radius) - 4px); } .armpin-orgm__tag button { background: none; border: none; cursor: pointer; color: var(--ap-muted-foreground); font-size: 0.9em; line-height: 1; padding: 0; } .armpin-orgm__member-box select { margin-block-start: 0.4rem; width: 100%; font-size: 0.78rem; } .armpin-orgm__member-end button { background: none; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 3px); padding: 0.35rem 0.7rem; font-size: 0.78rem; cursor: pointer; } .armpin-orgm__rel-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 48rem) { .armpin-orgm__rel-grid { grid-template-columns: repeat(3, 1fr); } } .armpin-orgm__rel-grid h3 { font-size: 0.72rem; text-transform: uppercase; color: var(--ap-muted-foreground); margin: 0 0 0.3rem; } .armpin-orgm { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; } .armpin-orgm__rel-list { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.3rem; } .armpin-orgm__rel-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .armpin-orgm__rel-list form button { font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.55rem; } .armpin-orgm__relate { margin-block-end: 1rem; padding: 0.75rem; background: var(--ap-secondary); border-radius: var(--ap-radius); } .armpin-orgm__oversight-club { padding: 0.6rem 0.75rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); margin-block-end: 0.75rem; } .armpin-orgm__oversight-club h3 { margin: 0 0 0.4rem; font-size: 0.88rem; } .armpin-orgm__rel-search { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .armpin-orgm__rel-hits { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .armpin-orgm__rel-hits li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); font-size: 0.85rem; } .armpin-orgm__ev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .armpin-orgm__ev-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.85rem; padding-block: 0.3rem; border-top: 1px solid var(--ap-line); } .armpin-orgm__ev-list li:first-child { border-top: none; } .armpin-orgm__ev-list a { font-size: 0.78rem; font-weight: 600; } .armpin-orgm__invite-form { display: grid; gap: 0.5rem; grid-template-columns: 1fr; align-items: end; margin-block-end: 0.5rem; } @media (min-width: 56rem) { .armpin-orgm__invite-form { grid-template-columns: 1fr 10rem 10rem auto; } } .armpin-orgm__invite-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--ap-muted-foreground); } .armpin-orgm__inv-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-orgm__inv-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding-block: 0.4rem; border-top: 1px solid var(--ap-line); font-size: 0.85rem; } .armpin-orgm__inv-list li:first-child { border-top: none; } .armpin-orgm__inv-list form button, a.armpin-orgm-copy { font-size: 0.78rem; font-weight: 600; background: none; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 3px); padding: 0.25rem 0.6rem; cursor: pointer; color: var(--ap-foreground); } /* ---------- coach workspace persistent side nav (/pro, /pro-athlete, /pro-program, /coaching, /training share this shell) ---------- */ .armpin-pro-shell { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; } /* Owner, 2026-10-14: the nav is first in the HTML (needed so it renders on the right at desktop width, see armpin-pro-shell__nav below), but on mobile (column layout) that meant the full section list rendered ABOVE any real page content - visually first, pushing the actual page down. Real content should come first on a phone; the section list - now always visible, not hidden behind a toggle (see armpin-pro-shell__nav-collapse-body) - follows right after it, reachable by scrolling, not hidden and not blocking the top of the page. Desktop (row layout) is unaffected - `order` only changes visual position, and at min-width:56rem the browser is already laying nav/main out side by side, not stacked, so there's nothing to reorder there. */ @media (max-width: 56rem) { .armpin-pro-shell__main { order: -1; } } /* News list sat in a content_width:full Elementor container with no width cap of its own, so its card grid stretched edge-to-edge across the whole viewport - same 80rem/centered/padded convention as .armpin-pro-shell above, applied here since this page has no shell nav. */ .armpin-news-list, .armpin-comp-list { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; } .armpin-news-list__item-logo { aspect-ratio: 16/9; background: var(--ap-secondary); display: grid; place-items: center; padding: 0.5rem; border-radius: var(--ap-radius); } .armpin-news-list__item-logo img { width: 100%; height: 100%; object-fit: contain; } .armpin-comp-list__group { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; } .armpin-comp-list__item { background: transparent; border: none; border-block-end: 1px solid var(--ap-line); border-radius: 0.3rem; padding: 0.7rem 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; transition: background 0.15s; } .armpin-comp-list__item:hover { background: var(--ap-panel); } a.armpin-comp-list__link { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; flex: 1; color: inherit; text-decoration: none; } .armpin-comp-list__meta { color: var(--ap-muted-foreground); font-size: 0.85rem; } .armpin-comp-list__tables { background: var(--ap-secondary); color: var(--ap-secondary-foreground); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.78rem; font-weight: 600; } .armpin-comp-list__reg { font-size: 0.85rem; white-space: nowrap; } /* ---------- competition-schedule.php: contest order grouped by table (judotv "TATAMI" analogue) ---------- */ .armpin-comp-sched { max-width: 60rem; margin-inline: auto; padding-inline: 1.25rem; } .armpin-comp-sched__meta { color: var(--ap-muted-foreground); margin-top: -0.5rem; } .armpin-comp-sched__table { margin-block: 1.5rem; } .armpin-comp-sched__table h2 { background: var(--ap-foreground); color: var(--ap-background); display: inline-block; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.95rem; margin-bottom: 0.6rem; } .armpin-comp-sched__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-comp-sched__item { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.6rem 0.9rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; font-size: 0.88rem; } .armpin-comp-sched__item--completed { opacity: 0.65; } .armpin-comp-sched__cat { color: var(--ap-muted-foreground); font-size: 0.78rem; flex: 0 0 auto; } .armpin-comp-sched__names { font-weight: 600; flex: 1; } .armpin-comp-sched__time { font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-comp-sched__status { background: var(--ap-secondary); color: var(--ap-secondary-foreground); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; font-weight: 600; } /* ---------- events-admin.php (the "מחולל תחרויות" launcher page) - had ZERO styling of its own before 2026-10-10, only the generic [class$="__box"]/[class$="__form"]/[class$="__notice"] wildcards above happened to apply - no width cap, no table styling, no 2-col grid. Owner- reported "there's nothing, not the right width" - this was the real cause. ---------- */ .armpin-events-admin { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; padding-block: 1.5rem; } .armpin-events-admin__table { width: 100%; border-collapse: collapse; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); overflow: hidden; margin-block-end: 1.5rem; } .armpin-events-admin__table th { text-align: start; padding: 0.5rem 0.75rem; font-size: 0.78rem; color: var(--ap-muted-foreground); background: var(--ap-secondary); } .armpin-events-admin__table td { padding: 0.6rem 0.75rem; border-top: 1px solid var(--ap-line); font-size: 0.88rem; vertical-align: top; } .armpin-events-admin__table tr:hover td { background: var(--ap-secondary); } .armpin-events-admin__table a { margin-inline-end: 0.5rem; font-size: 0.82rem; } .armpin-events-admin__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-block-end: 1.5rem; } @media (max-width: 48rem) { .armpin-events-admin__grid2 { grid-template-columns: 1fr; } } .armpin-events-admin__search { display: flex; gap: 0.5rem; margin-block-end: 1rem; } .armpin-events-admin__search input { flex: 1; max-width: 24rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; } .armpin-events-admin__form { flex-direction: row !important; flex-wrap: wrap; align-items: center; max-width: none !important; } .armpin-events-admin__form input { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; } /* Owner (2026-10-13): the "שמירת נתונים" button was rendering mid-height to the side of the fields instead of below them - root cause is the generic [class$="__form"] rule (display:flex) catching this big multi-section form too, meant only for the small single-row inline forms (create-event, search, etc.) that also use this class. #ap-ev-details id selector (specificity 1,0,0) overrides it back to a normal stacked block without touching that generic rule. */ #ap-ev-details { display: block; } /* Same [class$="__form"] catch, same fix - the branding settings form (events-admin.php's step 1, added 2026-10-15) is a multi-field form, not one of the small inline ones this generic rule is meant for. */ #ap-ev-branding { display: block; } /* Owner reference (old Lovable site, 2026-10-13): "מחולל תחרויות" screen format - title/ subtitle, an event switcher dropdown, view/delete buttons, and a build/launch step tracker above the real editing form (which used to be a bare unstyled , replaced below with stacked label-above-input fields to match the reference). */ .armpin-events-admin__title { margin-block-end: 0.2rem; } .armpin-events-admin__subtitle { color: var(--ap-muted-foreground); margin-block-end: 1rem; } .armpin-events-admin__selector { margin-block-end: 1.25rem; } .armpin-events-admin__selector select { width: 100%; max-width: 28rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem 0.8rem; font-size: 0.95rem; font-weight: 600; } .armpin-events-admin__actions-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-end: 1.25rem; } a.armpin-events-admin__action-view { background: var(--ap-action); color: var(--ap-action-foreground); border-color: transparent; } /* Owner reference (old site, 1:1): a sticky sidebar next to the content on large screens (lg:grid-cols-[15rem_minmax(0,1fr)] in the TSX source), a horizontal scroll strip above the content on narrow ones (same source's mobile fallback: flex gap-1 overflow-x-auto). */ .armpin-events-admin__layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } @media (min-width: 64rem) { .armpin-events-admin__layout { grid-template-columns: 15rem minmax(0, 1fr); } } .armpin-events-admin__sidebar { min-width: 0; } @media (min-width: 64rem) { .armpin-events-admin__sidebar { position: sticky; top: 1rem; } } .armpin-events-admin__main { min-width: 0; } .armpin-events-admin__steps { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem 1.25rem; margin-block-end: 1rem; } .armpin-events-admin__steps h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ap-muted-foreground); margin-block-end: 0.5rem; } .armpin-events-admin__steps h3:not(:first-child) { margin-block-start: 1rem; } .armpin-events-admin__steps-row { display: flex; flex-wrap: wrap; gap: 0.5rem; overflow-x: auto; padding-block-end: 0.2rem; } @media (min-width: 64rem) { .armpin-events-admin__steps-row { flex-direction: column; flex-wrap: nowrap; overflow-x: visible; } } .armpin-events-admin__steps-row .armpin-events-admin__step, .armpin-events-admin__steps-row a.armpin-events-admin__step { white-space: nowrap; } .armpin-events-admin__step, a.armpin-events-admin__step, .armpin-events-admin__steps-row a.armpin-events-admin__links, .armpin-events-admin__links a { display: inline-flex; align-items: center; background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; color: var(--ap-foreground); text-decoration: none; } a.armpin-events-admin__step.is-done, .armpin-events-admin__step.is-done { background: var(--ap-action); color: var(--ap-action-foreground); border-color: transparent; } a.armpin-events-admin__step.is-current, .armpin-events-admin__step.is-current { border: 2px solid var(--ap-foreground); font-weight: 700; } .armpin-events-admin__fields { display: flex; flex-direction: column; gap: 0.9rem; } .armpin-events-admin__field { display: flex; flex-direction: column; gap: 0.3rem; } .armpin-events-admin__field label { font-size: 0.8rem; font-weight: 600; color: var(--ap-muted-foreground); cursor: help; } .armpin-events-admin__field input:not([type="checkbox"]), .armpin-events-admin__field select, .armpin-events-admin__field textarea { width: 100%; } .armpin-events-admin__field label.armpin-events-admin__checkbox { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 400; color: var(--ap-foreground); cursor: pointer; margin-block-end: 0.3rem; } .armpin-events-admin__field label.armpin-events-admin__checkbox:last-child { margin-block-end: 0; } .armpin-events-admin__waf-age { margin-block-start: 0.6rem; padding-inline-start: 0.75rem; border-inline-start: 2px solid var(--ap-line); } .armpin-events-admin__waf-age > summary { font-weight: 600; cursor: pointer; padding-block: 0.4rem; } .armpin-events-admin__waf-gender { font-weight: 600; font-size: 0.85rem; margin-block: 0.5rem 0.3rem; color: var(--ap-muted-foreground); } .armpin-events-admin__waf-arms { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block-end: 0.6rem; } .armpin-events-admin__waf-arm-label { font-size: 0.78rem; color: var(--ap-muted-foreground); margin-block-end: 0.25rem; } .armpin-events-admin__waf-weights { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; max-width: 22rem; } .armpin-events-admin__waf-weights label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; cursor: pointer; white-space: nowrap; } .armpin-events-admin__waf-weights label { padding: 0.15rem 0.45rem; border-radius: calc(var(--ap-radius) - 4px); border: 1px solid transparent; } .armpin-events-admin__waf-weights label.is-active { background: #ede6fb; border-color: #c6b3f2; font-weight: 600; } .armpin-events-admin__tools.has-entrants > summary { font-weight: 700; color: var(--ap-foreground); } .armpin-events-admin__tools.has-entrants > summary::after { content: " \25CF"; color: var(--ap-action); } .armpin-events-admin__waf-submit { margin-block-start: 0.75rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .armpin-events-admin__waf-submit label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; } .armpin-events-admin__waf-fee { margin-block: 0.4rem 0.7rem; } .armpin-events-admin__waf-fee label { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; color: var(--ap-muted-foreground); } .armpin-events-admin__waf-fee input { width: 7rem; } .armpin-events-admin__currency-field { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; white-space: nowrap; } .armpin-events-admin__currency-symbol { font-weight: 600; color: var(--ap-foreground); } .armpin-events-admin__field .armpin-events-admin__currency-field input { width: 7rem; } .armpin-events-admin__fee-form { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .armpin-events-admin__fee-form input[type="number"] { width: 5.5rem; } .armpin-events-admin__country-field { display: flex; align-items: center; gap: 0.5rem; } .armpin-events-admin__country-field img.armpin-events-admin__flag { width: 1.7rem; height: 1.2rem; flex-shrink: 0; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--ap-line); background: var(--ap-secondary); } .armpin-events-admin__search-results { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .armpin-events-admin__search-results li { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem 0.8rem; } .armpin-events-admin__empty { color: var(--ap-muted-foreground); margin-block-start: 0.75rem; } .armpin-events-admin__notice { padding: 0.6rem 0.9rem; border-radius: calc(var(--ap-radius) - 2px); margin-block-end: 0.9rem; border: 1px solid; font-size: 0.88rem; } .armpin-events-admin__notice p { margin: 0; } .armpin-events-admin__notice--success { background: #e6f4ea; border-color: #8fd19e; color: #1e4620; } .armpin-events-admin__notice--error { background: #fdecea; border-color: #f1a9a0; color: #611a15; } .armpin-events-admin__notice--info { background: var(--ap-secondary); border-color: var(--ap-line); color: var(--ap-foreground); } .armpin-events-admin__formimport-chunk { display: flex; align-items: center; gap: 0.4rem; margin-block-end: 0.3rem; } .armpin-events-admin__formimport-chunk span.armpin-events-admin__notice--error { display: inline; padding: 0.1rem 0.4rem; border-radius: 999px; font-size: 0.78rem; } .armpin-events-admin__table-wrap { overflow-x: auto; margin-block-start: 0.75rem; } .armpin-events-admin__table-wrap .armpin-events-admin__table { width: 100%; border-collapse: collapse; } .armpin-events-admin__table-wrap .armpin-events-admin__table th { text-align: start; padding: 0.5rem 0.6rem; font-size: 0.78rem; color: var(--ap-muted-foreground); background: var(--ap-secondary); white-space: nowrap; } .armpin-events-admin__table-wrap .armpin-events-admin__table td { padding: 0.5rem 0.6rem; border-top: 1px solid var(--ap-line); font-size: 0.85rem; vertical-align: top; } .armpin-events-admin__table-wrap .armpin-events-admin__table td form { display: inline-block; margin-inline-end: 0.3rem; margin-block-end: 0.2rem; } /* ---------- athletes-list.php: public athlete directory (judotv "Judoka" page equivalent) ---------- */ /* Shared filter chrome (armpin_block_filter_wrap): competitions/organizations/clubs/news/blog/ marketplace/shop/armwrestlers/clubs-country/live-tables lists all render through this. */ .armpin-filter { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; padding-block: 1.5rem; } .armpin-filter__controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-block-end: 0.75rem; } .armpin-filter__text { flex: 1 1 16rem; max-width: 22rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.75rem; } .armpin-filter__select { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.6rem; } button.armpin-filter__clear { background: transparent; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.45rem 0.9rem; cursor: pointer; color: var(--ap-muted-foreground); } button.armpin-filter__clear:hover { border-color: var(--ap-primary); color: var(--ap-primary); } .armpin-filter__count { font-size: 0.85rem; color: var(--ap-muted-foreground); margin-block-end: 0.75rem; } .armpin-filter__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; } .armpin-filter__empty { text-align: center; color: var(--ap-muted-foreground); padding-block: 2rem; } .armpin-athletes-list .armpin-filter__items { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } /* Owner (2026-10-15): "התוצאות צריך לשים אותם אחד מתחת לשני" - the wide auto-fill grid spread a handful of organization results thinly across the full row instead of a tidy stacked list - same single-column override already established for the help-menu panel. */ .armpin-orgs-list .armpin-filter__items { display: flex; flex-direction: column; gap: 0.6rem; max-width: 40rem; margin-inline: auto; } /* Owner (2026-10-15): "את כל התמונות בקו אחד, גם אם יש תמונות גדולות" - product photos had no sizing at all (natural/varied dimensions) and 3 of 12 products had no image_url, so cards rendered at mismatched heights. Same aspect-ratio+object-fit uniform-thumbnail pattern already used for the home page shop grid (.armpin-home__shop-item). */ .armpin-shop-list__item a { display: flex; flex-direction: column; color: inherit; text-decoration: none; } .armpin-shop-list__item a > img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--ap-radius) - 2px); background: var(--ap-secondary); display: block; } .armpin-shop-list__item-logo { width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: 0.5rem; background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); } .armpin-shop-list__item-logo img { width: 100%; height: 100%; object-fit: contain; } .armpin-shop-list__item strong { margin-block-start: 0.4rem; font-size: 0.88rem; } .armpin-shop-list__item p { font-size: 0.78rem; color: var(--ap-muted-foreground); margin: 0.2rem 0; } .armpin-shop-list__item .armpin-shop-list__price { font-weight: 600; margin-block-start: auto; padding-block-start: 0.3rem; } /* Generic entity-detail template (inc/blocks/detail-template.php's armpin/entity-heading + armpin/entity-field widgets, shared by every detail type: athletes/organizations/blog/news/ post/clubs/coaches/dietitians/shop/marketplace) - they render as flat

///
siblings directly in with zero width-containment of their own (unlike every other page, which gets it from the page's own content wrapper class). Was previously scoped to the single organizations page id (81) only - generalized 2026-10-15 via :has() so every entity-detail page is covered at once, not just whichever one was last reported broken. Tried a narrower 48rem "article reading width" first (2026-10-15) - owner explicitly didn't want it: the rest of the site is consistently 80rem and a page suddenly shrinking felt like a bug, not a deliberate reading-width choice. Matches the standard site width now, like every other page. */ body:has(.armpin-entity-heading) { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; } .armpin-entity-heading { margin-block: 1rem 0.5rem; } .armpin-entity-field { margin-block-end: 0.75rem; } .armpin-entity-field--image { display: block; width: 100%; max-height: 28rem; object-fit: cover; border-radius: var(--ap-radius); } .armpin-entity-field--youtube { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ap-radius); overflow: hidden; } .armpin-entity-field--youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .armpin-entity-field--date { display: block; color: var(--ap-muted-foreground); font-size: 0.85rem; } a.armpin-entity-field--link { display: inline-block; background: var(--ap-action); color: var(--ap-action-foreground); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 1.1rem; font-weight: 700; text-decoration: none; } a.armpin-entity-field--link:hover { opacity: 0.9; } .armpin-entity-field--add-to-cart { display: flex; align-items: center; gap: 0.6rem; margin-block: 0.75rem; } .armpin-entity-field__atc-qty { width: 4rem; padding: 0.45rem 0.5rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); text-align: center; } .armpin-entity-field__atc-btn { background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.55rem 1.2rem; font-weight: 700; cursor: pointer; } .armpin-entity-field__atc-btn:hover { opacity: 0.9; } .armpin-entity-field__atc-status { font-size: 0.85rem; color: var(--ap-action); font-weight: 600; } .armpin-athletes-list__item:not(:has(> a)), .armpin-athletes-list__item > a { display: grid; grid-template-columns: 2.75rem 1fr; align-items: center; gap: 0 0.7rem; padding: 0.5rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); color: inherit; text-decoration: none; transition: background 0.15s; } .armpin-athletes-list__item:hover, .armpin-athletes-list__item:has(a:hover) { background: var(--ap-panel); } .armpin-athletes-list__item img { grid-column: 1; grid-row: 1 / -1; width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; } .armpin-athletes-list__name { grid-column: 2; margin: 0; font-weight: 700; font-size: 0.92rem; } .armpin-athletes-list__sub, .armpin-athletes-list__club, .armpin-athletes-list__record { grid-column: 2; margin: 0; font-size: 0.76rem; color: var(--ap-muted-foreground); } .armpin-athletes-list__name { font-weight: 600; } .armpin-athletes-list__sub, .armpin-athletes-list__club, .armpin-athletes-list__record { font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-athletes-list__empty { text-align: center; color: var(--ap-muted-foreground); padding-block: 2rem; } /* ---------- athlete-profile.php: unified profile + cross-competition history ---------- */ .armpin-athlete-profile { max-width: 48rem; margin-inline: auto; padding-inline: 1.25rem; padding-block: 1.5rem; } .armpin-athlete-profile__head { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1rem; } .armpin-athlete-profile__photo { width: 11rem; height: 14.667rem; border-radius: 0.3rem; object-fit: cover; flex-shrink: 0; } .armpin-athlete-profile__photo--fallback { display: flex; align-items: center; justify-content: center; background: var(--ap-secondary); color: var(--ap-secondary-foreground); font-weight: 700; font-size: 2rem; text-transform: uppercase; } .armpin-athlete-profile__head h1 { margin: 0; font-size: 1.5rem; } .armpin-athlete-profile__meta { color: var(--ap-muted-foreground); margin: 0.2rem 0 0; } .armpin-athlete-profile__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.6rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; margin-bottom: 1rem; } .armpin-athlete-profile__stats dt { font-size: 0.75rem; color: var(--ap-muted-foreground); } .armpin-athlete-profile__stats dd { margin: 0; font-size: 1.15rem; font-weight: 700; } .armpin-athlete-profile__matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .armpin-athlete-profile__match { background: var(--ap-panel); border: 1px solid var(--ap-line); border-inline-start: 4px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.6rem 0.9rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; font-size: 0.88rem; } .armpin-athlete-profile__match.is-win { border-inline-start-color: var(--ap-up); } .armpin-athlete-profile__match.is-loss { border-inline-start-color: var(--ap-down); } .armpin-athlete-profile__opp { font-weight: 600; } .armpin-athlete-profile__event-meta { color: var(--ap-muted-foreground); font-size: 0.78rem; } .armpin-athlete-profile__fav-form { margin-inline-start: auto; } .armpin-athlete-profile__fav-btn { background: var(--ap-secondary); color: var(--ap-secondary-foreground); border: 1px solid var(--ap-line); border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .armpin-athlete-profile__fav-btn.is-fav { background: var(--ap-action); color: var(--ap-action-foreground); border-color: transparent; } /* ---------- competition-schedule.php voting ---------- */ .armpin-comp-sched__vote { display: flex; gap: 0.4rem; flex-wrap: wrap; } .armpin-comp-sched__vote-btn { background: var(--ap-secondary); color: var(--ap-secondary-foreground); border: 1px solid var(--ap-line); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; } .armpin-comp-sched__vote-btn.is-mine { background: var(--ap-action); color: var(--ap-action-foreground); border-color: transparent; } @media (min-width: 56rem) { .armpin-pro-shell { flex-direction: row; } } /* direction hardened explicitly (2026-10-12): this whole workspace is Hebrew-only (no bilingual toggle for the pro/nutrition-pro area), so it must never depend on the page's inherited `dir` being correct - confirmed that was the actual root cause of a mobile topbar/toggle ordering bug (see armpin_locale()'s own fix in inc/shell.php for the other half of that fix). */ .armpin-pro-shell__nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.3rem; width: 100%; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.6rem; direction: rtl; } @media (min-width: 56rem) { .armpin-pro-shell__nav { flex-direction: column; flex-wrap: nowrap; width: 14rem; flex: 0 0 14rem; position: sticky; top: 1rem; align-self: flex-start; } } /* Pages whose accordions hold full multi-field forms (e.g. /profile) need more than the default 14rem rail - 2-column field grids are unusable that narrow. Opt-in per page via this modifier, not a change to the shared default (would cramp /my, /pro, /nutrition-pro's own, lighter lists). */ @media (min-width: 56rem) { .armpin-pro-shell__nav--wide { width: 26rem; flex: 0 0 26rem; } } /* Stale rule removed 2026-10-12: nav-title used to be display:none below 56rem unconditionally - left over from the old flat-link sidenav, before the whole menu got wrapped in a collapsible
(armpin-pro-shell__nav-collapse). It silently kept the title invisible even once a visitor opened the mobile menu, since this rule outranked nothing - there was no conflicting override. Visibility is now entirely the
's job (open vs not), same as every other child in the collapse body, so the title just needs its normal look, no display override. */ .armpin-pro-shell__nav-title { font-size: 0.75rem; font-weight: 700; color: var(--ap-muted-foreground); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.3rem 0.6rem 0.5rem; } .armpin-pro-shell__nav-item { padding: 0.5rem 0.75rem; border-radius: calc(var(--ap-radius) - 2px); font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--ap-foreground); transition: background 0.15s, color 0.15s; } .armpin-pro-shell__nav-item:hover { background: var(--ap-background); } .armpin-pro-shell__nav-item.is-active { background: var(--ap-primary); color: var(--ap-primary-foreground); } /* Persistent "athlete screen / preferences" buttons - rendered by armpin_pro_sidenav() itself so they appear identically above the nav on every coach-workspace page (2026-10-11 redesign). */ .armpin-pro-shell__topbar { display: flex; gap: 0.4rem; flex: 1 1 auto; min-width: 0; margin-block-end: 0.5rem; padding-block-end: 0.5rem; border-block-end: 1px solid var(--ap-line); } @media (min-width: 56rem) { .armpin-pro-shell__topbar { width: 100%; flex: none; } } a.armpin-pro-shell__topbtn { flex: 1; text-align: center; padding: 0.5rem 0.6rem; border-radius: var(--ap-radius); border: 1px solid var(--ap-line); background: var(--ap-panel); font-size: 0.82rem; font-weight: 600; color: var(--ap-foreground); text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } a.armpin-pro-shell__topbtn:hover { background: var(--ap-secondary); border-color: var(--ap-muted-foreground); } /* Icon variant (2026-10-12): 3 buttons (athlete/patient view, appointments calendar, preferences) now share this row - icon-only keeps it compact instead of 3 stretched text buttons. */ .armpin-pro-shell__topbtn--icon { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; padding: 0; display: flex; align-items: center; justify-content: center; } /* Accordion sections (athletes / programs / workspace prefs) inside the nav - expand downward in place, same look-and-feel as a direct nav-item until opened. */ .armpin-pro-shell__nav-group { border-radius: calc(var(--ap-radius) - 2px); } .armpin-pro-shell__nav-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: calc(var(--ap-radius) - 2px); font-size: 0.85rem; font-weight: 600; color: var(--ap-foreground); transition: background 0.15s; } .armpin-pro-shell__nav-group > summary::-webkit-details-marker { display: none; } .armpin-pro-shell__nav-group > summary::marker { content: ''; } .armpin-pro-shell__nav-group > summary::after { content: '›'; transform: rotate(90deg); transition: transform 0.15s; font-size: 1rem; color: var(--ap-muted-foreground); } .armpin-pro-shell__nav-group[open] > summary::after { transform: rotate(-90deg); } .armpin-pro-shell__nav-group > summary:hover { background: var(--ap-background); } .armpin-pro-shell__nav-group[open] > summary { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px) calc(var(--ap-radius) - 2px) 0 0; } /* min-width:0/max-width:100% on .armpin-pro-shell__nav-collapse-body's DIRECT children (above) doesn't reach these - they're grandchildren, nested inside a .armpin-pro-shell__nav-group's own body. A long program name ("Item8 Test Program #1022") next to its status tag, with no min-width reset here, could force this (and everything above it up to the flex-wrap nav) wider than the viewport - the exact "whole menu shifts right when תוכניות expands" the owner reported (2026-10-12). */ .armpin-pro-shell__nav-sub { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.3rem 0.5rem 0.6rem 0.9rem; margin-inline-start: 0.75rem; border-inline-start: 1px solid var(--ap-line); min-width: 0; max-width: 100%; } .armpin-pro-shell__nav-sub a { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.4rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); font-size: 0.8rem; color: var(--ap-muted-foreground); text-decoration: none; min-width: 0; } .armpin-pro-shell__nav-sub a span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .armpin-pro-shell__nav-sub a:hover { background: var(--ap-background); color: var(--ap-foreground); } .armpin-pro-shell__nav-sub-tag { font-size: 0.7rem; background: var(--ap-background); border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap; } .armpin-pro-shell__nav-empty { padding: 0.3rem 0.6rem; font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-pro-shell__nav-demo-form { padding: 0.2rem 0.6rem 0.3rem; } .armpin-pro-shell__nav-demo-form button { width: 100%; background: none; border: 1px dashed var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.35rem 0.6rem; font-size: 0.78rem; color: var(--ap-muted-foreground); cursor: pointer; } .armpin-pro-shell__nav-demo-form button:hover { color: var(--ap-foreground); border-color: var(--ap-muted-foreground); } .armpin-pro-shell__nav-sub-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem; font-size: 0.8rem; } .armpin-pro-shell__nav-sub-row > span:first-child { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .armpin-pro-shell__nav-sub-row form { display: inline; } .armpin-pro-shell__nav-sub-row button { background: none; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.15rem 0.45rem; font-size: 0.72rem; color: var(--ap-muted-foreground); cursor: pointer; } .armpin-pro-shell__nav-sub-row button:hover { color: var(--ap-foreground); border-color: var(--ap-muted-foreground); } .armpin-pro-shell__nav-sub-form { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.4rem 0.6rem 0.5rem; margin-block-start: 0.2rem; border-top: 1px solid var(--ap-line); font-size: 0.8rem; } .armpin-pro-shell__nav-sub-form textarea, .armpin-pro-shell__nav-sub-form input[type="text"] { width: 100%; font-size: 0.8rem; } .armpin-pro-shell__nav-sub-form label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; } .armpin-pro-shell__nav-group .armpin-pro__prefs-form { gap: 0.5rem; } .armpin-pro-shell__nav-group .armpin-pro__prefs-form label { padding-inline: 0.1rem; } .armpin-pro-shell__nav-divider { height: 1px; background: var(--ap-line); margin: 0.4rem 0.4rem; } /* /profile's accordions reuse .armpin-profile-form__section's own panel chrome (background/border/ padding) unchanged - drop nav-sub's indent/rule-line here so the two don't double-box. */ .armpin-pro-shell__nav-sub.armpin-profile-form__section { margin-inline-start: 0; border-inline-start: none; padding: 1.25rem 1.5rem; } /* History: originally (2026-10-12) wrapped in a
so the whole menu could start collapsed on mobile behind a "☰ תפריט" toggle. Went through several more attempts (plain inline-collapse, a fixed slide-over drawer at a few widths/backdrops, then - round 5 - no hidden state at all) before landing here, round 7: a compact, ALWAYS-VISIBLE tab fixed to the left edge (owner explicitly asked for the side, left specifically: "להוסיף תפריט מצד שמאל... אני צריך את התפריט שיהיה בצד") that opens a slim drawer on tap. Different from rounds 3-4's drawer in the one way that mattered: the tab itself takes no layout space (position:fixed, doesn't push or hide real content - round 5/6's actual fix), so it's reachable immediately without scrolling AND doesn't block the page the way a toggle sitting inline in the document flow did in rounds 1-2. */ .armpin-pro-shell__nav-collapse { border: none; } .armpin-pro-shell__nav-collapse > summary { list-style: none; cursor: pointer; display: none; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 0.75rem; font-weight: 700; font-size: 0.9rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); transition: background 0.15s, border-color 0.15s; width: 100%; } .armpin-pro-shell__nav-collapse > summary:hover { background: var(--ap-secondary); } .armpin-pro-shell__nav-collapse[open] > summary { background: var(--ap-primary); color: var(--ap-primary-foreground); border-color: var(--ap-primary); } .armpin-pro-shell__nav-collapse > summary::-webkit-details-marker { display: none; } .armpin-pro-shell__nav-collapse > summary::marker { content: ''; } @media (max-width: 56rem) { .armpin-pro-shell__nav-collapse > summary { display: flex; position: fixed; top: 7rem; left: 0; z-index: 1000; width: auto; writing-mode: vertical-rl; border-radius: 0 var(--ap-radius) var(--ap-radius) 0; border-inline-start: none; padding: 0.7rem 0.4rem; box-shadow: 0.2rem 0 0.6rem rgba(0,0,0,0.15); } } /* Real bug (2026-10-12, owner caught it by eye): .armpin-pro-shell__nav originally relied on display:flex;flex-direction:row;flex-wrap:wrap on mobile for every link/item to size to its own content instead of stretching - wrapping everything in .armpin-pro-shell__nav-collapse-body (a plain block
, needed so the
toggle has a single element to show/hide) broke that: items fell back to block-level default sizing and each one visually filled the entire mobile width edge-to-edge, which is exactly what looked wrong. Restoring a flex column with align-items:flex-start makes every item hug its own content width again instead of stretching to fill the row. */ /* Rounds 1-6 (2026-10-14): rounds 1-4 all tried to make a HIDDEN mobile menu work (inline-collapse, then a fixed drawer at a few widths/backdrops) - the real complaint turned out not to be any one version's mechanics, it was that hiding dense content behind a toggle in the NORMAL DOCUMENT FLOW pushed real page content down, out of view, before a visitor saw anything. Round 5 removed the hiding on mobile entirely (always visible, like desktop) - fixed that, but then felt like "too much, disorganized" with nowhere compact to reach the rest of the nav. Round 6 reordered main content to show first either way. Round 7, final: desktop keeps the unconditional always-visible rule (its toggle is permanently hidden, there's no other way to reveal it); mobile goes back to a real hide/show via [open] - but now the toggle is position:fixed (round 5/6's real lesson kept: a fixed-position toggle costs zero document-flow space, so it can't push content down the way rounds 1-2's inline toggle did) and the open drawer slides in from the LEFT, matching what the owner asked for explicitly this round. */ @media (min-width: 56rem) { .armpin-pro-shell__nav-collapse-body { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0.35rem; } } /* Owner (2026-10-15): "אני רוצה... לראות את הכל בתוך הדף" - on /profile every section lived behind its own per-section
toggle (.armpin-pro-shell__nav-group), collapsed by default. UNLIKE the outer drawer above, this is a NESTED
- CSS display/content- visibility overrides do NOT defeat a closed nested
's native content-hiding in a real browser (confirmed on the owner's actual device after this file's own CSS-only attempt tested "working" in the dev browser tool but did nothing on a real phone/desktop - see project_mobile_details_collapse_bug.md round 9). The only real fix is the `open` attribute itself, added directly in account-profile.php's markup - not CSS at all. Nothing here to see. */ @media (max-width: 56rem) { .armpin-pro-shell__nav-collapse[open] > .armpin-pro-shell__nav-collapse-body { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; position: fixed; top: 0; bottom: 0; left: 0; width: min(58vw, 14rem); background: var(--ap-background); z-index: 1000; overflow-y: auto; padding: 0.75rem; box-shadow: 0.25rem 0 1rem rgba(0,0,0,0.18); border-inline-end: 1px solid var(--ap-line); font-size: 0.85rem; } .armpin-pro-shell__nav-collapse-close { display: block; align-self: flex-end; background: none; border: 1px solid var(--ap-line); border-radius: 999px; padding: 0.3rem 0.8rem; margin-block-end: 0.5rem; font-size: 0.85rem; color: var(--ap-muted-foreground); cursor: pointer; } } /* Owner, 2026-10-15: "ברגע שאני אעבור ואגע במסך השני, שהתפריט ייסגר מעצמו" - tapping anywhere outside the open drawer should close it too, not only the explicit close button. Round 4 removed the backdrop specifically because a DIM one felt like it was "covering the screen" - this brings it back fully transparent (no visual change at all) purely to catch the outside tap; its close-on-click onclick was already baked into the markup since round 3 and never removed. */ .armpin-pro-shell__nav-collapse-backdrop { display: none !important; } @media (max-width: 56rem) { .armpin-pro-shell__nav-collapse[open] > .armpin-pro-shell__nav-collapse-backdrop { display: block !important; position: fixed; inset: 0; z-index: 999; background: transparent; } } /* Owner (2026-10-15): "אני לא רוצה אפשרות לסגור את התפריט שלי... שלא יקרה מצב שזה נעלם לי לגמרי" - real bug, confirmed live via getComputedStyle: this close button (type="button", not type="submit") matches the generic [class^="armpin-"] button rule (specificity 0,1,1 - the same site-wide collision already fixed three times today for other buttons), which beat this plain class selector's 0,1,0 and left the button visibly showing on desktop even though desktop never sets [open] and this button's own click handler only ever does removeAttribute('open') - so clicking it was always a harmless no-op there, but it looked like a working close control that shouldn't have been visible at all. One ancestor class (0,2,0) is enough to beat 0,1,1 here (no type="submit" involved, unlike the other three fixes today). */ .armpin-pro-shell__nav-collapse .armpin-pro-shell__nav-collapse-close { display: none; } .armpin-pro-shell__nav-collapse-body > * { min-width: 0; max-width: 100%; } .armpin-pro-shell__nav-collapse-body .armpin-pro-shell__nav-group, .armpin-pro-shell__nav-collapse-body details#armpin-pro-prefs, .armpin-pro-shell__nav-collapse-body details#nutrition-prefs { align-self: stretch; } /* Office-hours manage screen (2026-10-12) - never had its own styling at all (confirmed: zero .armpin-oh-* rules existed anywhere in this file), so the create-slot form rendered as bare unstyled stacked inputs - this is that missing styling, same grid/spacing idiom already used by .armpin-pro__prefs-form elsewhere in this file. Calendar grid is new (owner reference: practice-ai.co.il/events) - a plain CSS grid, RTL column order comes for free from document dir="rtl" (see office-hours.php's own comment on why the day-name order needs no extra CSS). */ .armpin-oh-manage { display: flex; flex-direction: column; gap: 1.5rem; max-width: 60rem; margin-inline: auto; padding-inline: 1.25rem; } .armpin-oh-manage__title { margin-block-end: 0; } .armpin-oh-manage__create { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.25rem; } .armpin-oh-manage__form { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin-block-start: 0.75rem; } @media (min-width: 40rem) { .armpin-oh-manage__form { grid-template-columns: repeat(2, 1fr); } } .armpin-oh-manage__form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--ap-muted-foreground); } .armpin-oh-manage__form label:has(textarea) { grid-column: 1 / -1; } .armpin-oh-manage__form input, .armpin-oh-manage__form select, .armpin-oh-manage__form textarea { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.55rem 0.7rem; font-size: 0.9rem; font-family: inherit; color: var(--ap-foreground); } .armpin-oh-manage__form button[type="submit"] { grid-column: 1 / -1; background: var(--ap-action, var(--ap-primary)); color: var(--ap-action-foreground, var(--ap-primary-foreground)); border: none; border-radius: var(--ap-radius); padding: 0.7rem 1rem; font-weight: 700; font-size: 0.95rem; cursor: pointer; margin-block-start: 0.5rem; } /* FullCalendar (2026-10-12, replaced the hand-rolled month-grid - see office-hours.php's own comment) - only a thin host/theming shell is needed here, FullCalendar supplies its own internal grid CSS via the CDN stylesheet; these rules just make it sit naturally inside this page's existing panel/card look instead of FullCalendar's bare default chrome. */ .armpin-oh-cal { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; margin-block-end: 1.5rem; } .armpin-oh-cal .fc { direction: rtl; } .armpin-oh-cal .fc-button-primary { background: var(--ap-action, var(--ap-primary)) !important; border-color: var(--ap-action, var(--ap-primary)) !important; color: var(--ap-action-foreground, var(--ap-primary-foreground)) !important; } .armpin-oh-cal .fc-daygrid-day.fc-day-today, .armpin-oh-cal .fc-timegrid-col.fc-day-today { background: color-mix(in oklab, var(--ap-action, var(--ap-primary)) 10%, transparent); } /* Owner (2026-10-15): on mobile the back (ohPrev) button in the day/month nav pair did not respond to taps while the next-door next (ohNext) button did - same symptom as a mis-sized or overlapping tap target. Larger, clearly separated buttons on narrow screens give each one a full, unambiguous hitbox (also helps office-hours.php's switch from a merged ohPrev,ohNext button-group to two independent ones). */ @media (max-width: 640px) { .armpin-oh-cal .fc-button { min-width: 2.75rem; min-height: 2.5rem; padding: 0.5rem 0.75rem; font-size: 1rem; } .armpin-oh-cal .fc-toolbar-chunk { gap: 0.4rem; } } /* Settings gear sits inline with the "+ פתיחת שעה חדשה ידנית" hint line (2026-10-12, owner: "אין טעם שזה ייקח שורה") instead of its own toolbar row above the calendar. */ .armpin-oh-manage__cal-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-end: 0.5rem; } .armpin-oh-manage__cal-hint { font-size: 0.85rem; color: var(--ap-muted-foreground); margin: 0; } /* [class^="armpin-"] button forces green (--ap-accent) by default (see "buttons / primary actions" above) - this is a neutral icon toggle, not a save action, so it needs a higher-specificity override (same pattern as .armpin-pro-shell__nav .armpin-help-menu__toggle). */ .armpin-oh-manage__cal-hint-row button.armpin-oh-cal__settings-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border-radius: 999px; border: 1px solid var(--ap-line); background: var(--ap-panel); color: var(--ap-foreground); cursor: pointer; } .armpin-oh-manage__cal-hint-row button.armpin-oh-cal__settings-btn:hover { opacity: 1; background: var(--ap-secondary); } .armpin-oh-cal-settings { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; margin-block-end: 1rem; } /* Hour/minute (2026-10-12, owner: native time inputs carry their own browser-chrome notch/spinner - "ללא מגרעת או לחצן מהיר"). */ .armpin-oh-cal-settings__time { display: inline-flex; align-items: center; gap: 0.25rem; } .armpin-oh-cal-settings__time select { width: auto; } .armpin-oh-cal-settings__time-sep { color: var(--ap-muted-foreground); font-weight: 700; } .armpin-oh-cal-settings__section { grid-column: 1 / -1; margin-block-start: 0.5rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--ap-line); } .armpin-oh-cal-settings__section h3 { margin: 0; font-size: 0.95rem; } .armpin-oh-cal-settings__checkbox { flex-direction: row !important; align-items: center; gap: 0.5rem !important; grid-column: 1 / -1; } .armpin-oh-cal-settings input[type="color"] { padding: 0.15rem; height: 2.2rem; cursor: pointer; } .armpin-oh-cal-settings__ics { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--ap-line); display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--ap-muted-foreground); } .armpin-oh-cal-settings__ics-row { display: flex; gap: 0.5rem; } .armpin-oh-cal-settings__ics-row input { flex: 1; min-width: 0; background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; font-size: 0.8rem; font-family: inherit; color: var(--ap-foreground); } .armpin-oh-cal-settings__ics-row button { flex: none; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.9rem; font-size: 0.8rem; background: var(--ap-panel); color: var(--ap-foreground); cursor: pointer; } /* .armpin-oh-manage__slot and its children (slot-main/slot-time/slot-cap/slot-status) had no layout CSS at all - title/time/capacity/status ran together inline with no spacing (the exact complaint: "תרווח ותסדר ותעצב נכון יותר"). */ .armpin-oh-manage__list ul, .armpin-oh-manage__past ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .armpin-oh-manage__slot { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.85rem 1rem; } .armpin-oh-manage__slot-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.75rem; } .armpin-oh-manage__slot-main strong { font-size: 1rem; } .armpin-oh-manage__slot-time { color: var(--ap-foreground); font-variant-numeric: tabular-nums; } .armpin-oh-manage__slot-cap, .armpin-oh-manage__slot-status { font-size: 0.82rem; color: var(--ap-muted-foreground); } .armpin-oh-manage__slot-status { background: var(--ap-secondary); color: var(--ap-secondary-foreground); border-radius: calc(var(--ap-radius) - 4px); padding: 0.1rem 0.5rem; } .armpin-oh-manage__slot form { margin-block-start: 0.5rem; } .armpin-oh-manage__slot.is-highlighted { outline: 2px solid var(--ap-action, var(--ap-primary)); outline-offset: 2px; } .armpin-oh-manage__invite { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.5rem; } a.armpin-oh-manage__invite-wa { font-size: 0.78rem; background: var(--ap-secondary); color: var(--ap-secondary-foreground); border-radius: calc(var(--ap-radius) - 2px); padding: 0.3rem 0.6rem; text-decoration: none; } a.armpin-oh-manage__invite-wa:hover { background: var(--ap-background); } .armpin-oh-manage__invite-email { display: flex; gap: 0.35rem; } .armpin-oh-manage__invite-email input { font-size: 0.78rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.3rem 0.5rem; background: var(--ap-background); } .armpin-oh-manage__invite-email button { font-size: 0.78rem; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.3rem 0.6rem; background: var(--ap-panel); cursor: pointer; } @media (max-width: 56rem) { /* Round 5 (2026-10-14): the "☰ תפריט" toggle no longer shows at all (see the nav-collapse-body rule above - content is always visible now, mobile and desktop alike), so the row-sharing rules this block used to need for that toggle are gone. .armpin-pro-shell__topbar's own mobile sizing stays, in case other pages still rely on it when the shell renders without any nav-collapse (e.g. a future lighter sidenav variant). */ .armpin-pro-shell__topbar { margin-block-end: 0; padding-block-end: 0; border-block-end: none; align-self: flex-start; } a.armpin-pro-shell__topbtn { align-self: flex-start; } } /* Help-menu button, relocated to the bottom of this nav (2026-10-11): neutral, not green - the global .armpin-help-menu__toggle default (used elsewhere, e.g. pro-athlete/pro-program tab bars) stays untouched, this overrides it only inside the sidenav. */ .armpin-pro-shell__nav .armpin-help-menu button.armpin-help-menu__toggle { background: none; border: 1px solid var(--ap-line); color: var(--ap-muted-foreground); } .armpin-pro-shell__nav .armpin-help-menu button.armpin-help-menu__toggle:hover { background: var(--ap-background); color: var(--ap-foreground); } .armpin-pro-shell__main { flex: 1 1 auto; min-width: 0; width: 100%; } /* ---------- /pro (coach workspace) ---------- */ .armpin-pro__empty, .armpin-pro__muted { color: var(--ap-muted-foreground); font-size: 0.85rem; } .armpin-pro__back { font-size: 0.78rem; color: var(--ap-muted-foreground); display: inline-block; margin-block-end: 0.5rem; } .armpin-pro__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-block-end: 1rem; } .armpin-pro__sub { color: var(--ap-muted-foreground); font-size: 0.85rem; } .armpin-pro__head-actions { display: flex; gap: 0.5rem; } a.armpin-pro__btn, button.armpin-pro__btn, button.armpin-pro__btn-primary { border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 1rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; border: 1px solid var(--ap-line); display: inline-flex; align-items: center; text-decoration: none; background: var(--ap-panel); color: var(--ap-foreground); } button.armpin-pro__btn-primary { background: var(--ap-action); color: var(--ap-action-foreground); border-color: transparent; } .armpin-pro__prefs { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.75rem 1rem; margin-block-end: 1rem; } .armpin-pro__prefs-form { display: grid; gap: 0.6rem; grid-template-columns: 1fr; margin-block-start: 0.75rem; } @media (min-width: 40rem) { .armpin-pro__prefs-form { grid-template-columns: repeat(2, 1fr); } } .armpin-pro__prefs-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--ap-muted-foreground); } .armpin-pro__prefs-form input, .armpin-pro__prefs-form select { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.6rem; } .armpin-pro__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 64rem) { .armpin-pro__grid { grid-template-columns: repeat(2, 1fr); } } .armpin-pro__card { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1rem; } .armpin-pro__card h2 { font-size: 1.05rem; margin: 0 0 0.6rem; } .armpin-pro__card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-block-end: 0.6rem; } .armpin-pro__card-head h2 { margin: 0; } .armpin-pro__attn-list, .armpin-pro__ath-list, .armpin-pro__prog-list, .armpin-pro__recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .armpin-pro__attn-list a, .armpin-pro__ath-list a, .armpin-pro__prog-list a, .armpin-pro__recent-list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.3rem; font-size: 0.85rem; border-radius: calc(var(--ap-radius) - 3px); text-decoration: none; color: var(--ap-foreground); } .armpin-pro__attn-list a:hover, .armpin-pro__ath-list a:hover, .armpin-pro__prog-list a:hover, .armpin-pro__recent-list a:hover { background: var(--ap-secondary); } .armpin-pro__attn-list span:last-child, .armpin-pro__recent-list span:last-child { margin-inline-start: auto; } .armpin-pro__flag { color: var(--ap-foreground); font-weight: 700; font-size: 0.78rem; margin-inline-start: auto; } .armpin-pro__ath-list span.armpin-pro__muted { margin-inline-start: 0.5rem; } .armpin-pro__tags { display: flex; gap: 0.3rem; margin-inline-start: auto; } .armpin-pro__tag { background: var(--ap-secondary); border-radius: 3px; padding: 0.1rem 0.4rem; font-size: 0.68rem; } /* ---------- /pro/athlete ---------- */ .armpin-proa__empty, .armpin-proa__muted { color: var(--ap-muted-foreground); font-size: 0.85rem; } .armpin-proa__crumb { font-size: 0.78rem; color: var(--ap-muted-foreground); margin-block-end: 0.3rem; } .armpin-proa__tabs { display: flex; gap: 0.3rem; margin-block: 0.75rem 1rem; } .armpin-proa__tabs a { padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); color: var(--ap-muted-foreground); } .armpin-proa__tabs a.is-active { background: var(--ap-foreground); color: var(--ap-background); border-color: transparent; } .armpin-proa__grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; } @media (min-width: 40rem) { .armpin-proa__grid { grid-template-columns: repeat(2, 1fr); } } .armpin-proa__col2 { grid-column: 1 / -1; } .armpin-proa__card { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.85rem; } .armpin-proa__label { font-size: 0.72rem; color: var(--ap-muted-foreground); margin-block-end: 0.3rem; } .armpin-proa__strong { font-weight: 700; } a.armpin-proa__link { font-weight: 700; color: var(--ap-foreground); text-decoration: none; display: block; } .armpin-proa__subs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.4rem; font-size: 0.72rem; } .armpin-proa__subs a { color: var(--ap-muted-foreground); text-decoration: underline; } .armpin-proa__create { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; } .armpin-proa__create-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; } .armpin-proa__create-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-proa__create-form input, .armpin-proa__create-form select { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.6rem; } .armpin-proa__create-form button { background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.45rem 1rem; font-weight: 700; cursor: pointer; } .armpin-proa__prog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .armpin-proa__prog-list a { display: flex; justify-content: space-between; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; font-size: 0.85rem; text-decoration: none; color: var(--ap-foreground); } .armpin-proa__tag { background: var(--ap-secondary); border-radius: 3px; padding: 0.1rem 0.4rem; font-size: 0.72rem; } .armpin-proa__messages { display: flex; flex-direction: column; gap: 0.5rem; } .armpin-proa__msg { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; max-width: 80%; font-size: 0.85rem; } .armpin-proa__msg.is-mine { margin-inline-start: auto; background: var(--ap-foreground); color: var(--ap-background); } .armpin-proa__msg-form { display: flex; gap: 0.5rem; margin-block-start: 0.5rem; } .armpin-proa__msg-form input { flex: 1; background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; } .armpin-proa__progress-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-block-end: 0.75rem; } .armpin-proa__progress-stats div { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; text-align: center; } .armpin-proa__progress-stats span:first-child { display: block; font-size: 1.3rem; font-weight: 700; } .armpin-proa__progress-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .armpin-proa__progress-table th { color: var(--ap-muted-foreground); font-size: 0.7rem; text-align: center; padding-block-end: 0.3rem; } .armpin-proa__progress-table td { text-align: center; padding: 0.35rem; border-top: 1px solid var(--ap-line); } /* ---------- /pro/action ---------- */ .armpin-proact__empty { color: var(--ap-muted-foreground); } /* ---------- /pro/print ---------- */ .armpin-proprint { max-width: 48rem; margin: 0 auto; font-size: 0.85rem; } .armpin-proprint__bar { display: flex; gap: 0.5rem; margin-block-end: 1rem; } .armpin-proprint__bar button, .armpin-proprint__bar a { border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; border: 1px solid var(--ap-line); background: var(--ap-panel); color: var(--ap-foreground); text-decoration: none; } .armpin-proprint__head { border-bottom: 1px solid var(--ap-line); padding-block-end: 0.5rem; margin-block-end: 0.75rem; } .armpin-proprint__workout { margin-block-end: 1rem; break-inside: avoid; } .armpin-proprint__note { color: var(--ap-muted-foreground); font-size: 0.8rem; } .armpin-proprint__table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin-block-start: 0.3rem; } .armpin-proprint__table th { text-align: start; border-bottom: 1px solid var(--ap-line); padding-block-end: 0.3rem; } .armpin-proprint__table td { border-bottom: 1px solid color-mix(in srgb, var(--ap-line) 60%, transparent); padding: 0.3rem 0.2rem; } .armpin-proprint__table--center th, .armpin-proprint__table--center td { text-align: center; } .armpin-proprint__block-title { font-weight: 700; color: var(--ap-muted-foreground); padding-block-start: 0.5rem; } @media print { .armpin-proprint__bar { display: none; } } /* ---------- /pro/program ---------- */ .armpin-prop__autosave-status { font-size: 0.72rem; color: var(--ap-muted-foreground); margin-inline-start: 0.3rem; } .armpin-prop__empty, .armpin-prop__muted, .armpin-prop__gap { color: var(--ap-muted-foreground); font-size: 0.85rem; } .armpin-prop__crumb { font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-prop__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-block: 0.3rem 0.75rem; } .armpin-prop__sub { color: var(--ap-muted-foreground); font-size: 0.8rem; } .armpin-prop__head-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; } a.armpin-prop__btn, button.armpin-prop__btn { border-radius: calc(var(--ap-radius) - 2px); padding: 0.45rem 0.9rem; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--ap-line); background: var(--ap-panel); color: var(--ap-foreground); text-decoration: none; } .armpin-prop__inline-form { display: inline-flex; gap: 0.4rem; margin-block-end: 0.5rem; } .armpin-prop__inline-form input { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.6rem; font-size: 0.8rem; } .armpin-prop__inline-form button { border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.8rem; font-size: 0.8rem; cursor: pointer; background: var(--ap-panel); } .armpin-prop__action-panel { background: var(--ap-panel); border: 2px solid var(--ap-foreground); border-radius: var(--ap-radius); padding: 1rem; margin-block-end: 1rem; } .armpin-prop__quote { background: color-mix(in srgb, var(--ap-secondary) 60%, transparent); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem; font-size: 0.85rem; } .armpin-prop__ctx-list { font-size: 0.75rem; color: var(--ap-muted-foreground); list-style: none; margin: 0.4rem 0; padding: 0; } .armpin-prop__reply-form textarea { width: 100%; min-height: 4rem; background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem; margin-block-start: 0.5rem; } .armpin-prop__reply-actions { display: flex; gap: 0.5rem; margin-block-start: 0.5rem; } .armpin-prop__reply-actions button { border-radius: calc(var(--ap-radius) - 2px); padding: 0.4rem 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid var(--ap-line); background: var(--ap-panel); } .armpin-prop__tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-block: 0.75rem 1rem; } .armpin-prop__tabs a { padding: 0.4rem 0.8rem; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); color: var(--ap-muted-foreground); } .armpin-prop__tabs a.is-active { background: var(--ap-foreground); color: var(--ap-background); border-color: transparent; } .armpin-prop__creator-gap { background: var(--ap-secondary); border-radius: var(--ap-radius); padding: 1rem; font-size: 0.85rem; } .armpin-prop__sent-tag { color: var(--ap-foreground); font-weight: 700; font-size: 0.8rem; } .armpin-prop__summary { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 0.75rem; margin-block: 0.5rem; font-size: 0.85rem; } .armpin-prop__meta { font-size: 0.78rem; } .armpin-prop__weekgrid { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.5rem; } .armpin-prop__weekday { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 3px); padding: 0.3rem 0.5rem; font-size: 0.78rem; } .armpin-prop__unit { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); margin-block-end: 0.5rem; } .armpin-prop__unit h3 { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--ap-line); padding: 0.4rem 0.7rem; margin: 0; font-size: 0.95rem; } .armpin-prop__unit-mark { background: var(--ap-foreground); color: var(--ap-background); border-radius: 50%; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; } .armpin-prop__unit ul { list-style: none; margin: 0; padding: 0; } .armpin-prop__unit li { padding: 0.4rem 0.7rem; border-top: 1px solid var(--ap-line); font-size: 0.85rem; } .armpin-prop__unit li:first-child { border-top: none; } .armpin-prop__form { display: flex; flex-direction: column; gap: 0.7rem; max-width: 36rem; } .armpin-prop__form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--ap-muted-foreground); } .armpin-prop__form input, .armpin-prop__form select, .armpin-prop__form textarea { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; } .armpin-prop__row2 { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr); } .armpin-prop__tracking { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; } .armpin-prop__field-row { flex-direction: row !important; justify-content: space-between; align-items: center; } .armpin-prop__form button { align-self: flex-start; background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.55rem 1.2rem; font-weight: 700; cursor: pointer; } .armpin-prop__run-select select { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.5rem 0.7rem; min-width: 20rem; } .armpin-prop__run-form { display: flex; flex-direction: column; gap: 0.5rem; margin-block-start: 1rem; } .armpin-prop__unit-row { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .armpin-prop__unit-label { font-weight: 700; font-size: 0.85rem; flex: 1; min-width: 8rem; } .armpin-prop__unit-row input, .armpin-prop__unit-row select { background: var(--ap-background); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 3px); padding: 0.35rem 0.5rem; font-size: 0.82rem; } .armpin-prop__run-actions { display: flex; gap: 0.5rem; position: sticky; bottom: 0.5rem; } .armpin-prop__run-actions button { flex: 1; border-radius: calc(var(--ap-radius) - 2px); padding: 0.6rem; font-weight: 700; cursor: pointer; border: 1px solid var(--ap-line); background: var(--ap-panel); } .armpin-world__card--empty { background: var(--ap-background); border-style: dashed; } a.armpin-world__card:hover { background: var(--ap-secondary); } .armpin-world__card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .armpin-world__card-title { font-family: var(--ap-font-display); font-weight: 600; text-transform: none; } .armpin-world__soon-badge { background: var(--ap-secondary); color: var(--ap-muted-foreground); border-radius: calc(var(--ap-radius) - 2px); padding: 0.1rem 0.5rem; font-size: 0.7rem; flex-shrink: 0; } .armpin-world__card-hint { margin-block: 0.4rem 0; font-size: 0.85rem; color: var(--ap-muted-foreground); } .armpin-world__demo { margin-block-start: 0.75rem; padding-block-start: 0.75rem; border-top: 1px solid var(--ap-line); } .armpin-world__demo-badge { display: inline-block; border: 1px dashed var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.1rem 0.4rem; font-size: 0.68rem; color: var(--ap-muted-foreground); margin-block-end: 0.4rem; } .armpin-world__demo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .armpin-world__demo li { background: var(--ap-secondary); border-radius: calc(var(--ap-radius) - 2px); padding: 0.3rem 0.6rem; font-size: 0.78rem; color: var(--ap-muted-foreground); } /* ---------- hall screens (full dark venue displays) ---------- */ .armpin-screen { background: oklch(0.15 0.01 258); color: oklch(0.97 0.004 250); border-radius: var(--ap-radius); padding: 1.5rem; min-height: 50vh; display: flex; flex-direction: column; gap: 1rem; } .armpin-screen__header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid oklch(0.32 0.02 258); padding-block-end: 0.75rem; font-family: var(--ap-font-display); text-transform: uppercase; } .armpin-screen__stage-title { text-align: center; font-size: clamp(1.4rem, 1rem + 2vw, 3rem); color: var(--ap-foreground); } .armpin-screen__vs, .armpin-screen__sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; } .armpin-screen__sides { grid-template-columns: 1fr 1fr; } .armpin-screen__portrait { text-align: center; } .armpin-screen__portrait img { width: 100%; max-width: 220px; border-radius: var(--ap-radius); aspect-ratio: 1; object-fit: cover; margin-inline: auto; } .armpin-screen__podium-steps { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; gap: 1rem; } .armpin-screen__sponsors { display: flex; gap: 1rem; justify-content: center; align-items: center; border-top: 1px solid oklch(0.32 0.02 258); padding-block-start: 0.75rem; flex-wrap: wrap; } .armpin-screen__sponsors img { max-height: 2.5rem; } /* ---------- map (clubs by country) ---------- */ .armpin-clubs-list__map { border-radius: var(--ap-radius); overflow: hidden; border: 1px solid var(--ap-line); margin-block-end: 1rem; } /* ---------- responsive: single column under ~520px ---------- */ @media (max-width: 520px) { [class$="__list"], [class$="__grid"], [class$="__items"], [class$="__order"], .armpin-screen__vs, .armpin-screen__sides, .armpin-screen__podium-steps, .form-table, .form-table tbody, .form-table tr { grid-template-columns: 1fr !important; } .form-table th { width: auto; } } /* RTL is the real site default (dir=rtl on body) - logical properties above already flip correctly; nothing further needed here. */ /* ---------- site header (armpin_site_header widget, home page round) ---------- */ .armpin-site-header { position: sticky; inset-block-start: 0; z-index: 40; background: var(--ap-panel); border-block-end: 1px solid var(--ap-line); } .armpin-site-header__bar { max-width: 80rem; margin-inline: auto; padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .armpin-site-header__brand { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .armpin-site-header__brand-fallback { display: none; } .armpin-site-header__brand:has(.armpin-site-header__brand-fallback) .armpin-site-header__brand-name::before { content: ""; display: inline-block; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--ap-foreground); vertical-align: middle; margin-inline-end: 0.5rem; } .armpin-site-header__brand img { height: 2rem; width: auto; } .armpin-site-header__brand-name { font-family: var(--ap-font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ap-foreground); } .armpin-site-header__nav { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; flex: 1; } .armpin-site-header__nav > a { font-size: 0.875rem; font-weight: 500; color: var(--ap-muted-foreground); cursor: pointer; padding: 0.5rem 0.75rem; border-radius: calc(var(--ap-radius) - 2px); } .armpin-site-header__nav > a:hover { color: var(--ap-foreground); text-decoration: none; } .armpin-site-header__my { font-weight: 600 !important; color: var(--ap-foreground) !important; } .armpin-site-header__home-icon { display: inline-flex !important; align-items: center; justify-content: center; } /* Nav dropdowns (worlds) and the language menu open on hover/focus and close the instant the pointer leaves - matching the original SPA's behaviour, not a click-to-toggle-and-stay-open pattern (that let several menus stay open and overlap at once). */ .armpin-site-header__group { position: relative; } .armpin-site-header__group-trigger { display: flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); font-size: 0.9rem; font-weight: 500; background: none; border: none; color: var(--ap-muted-foreground); cursor: pointer; } .armpin-site-header__group-trigger::after { content: '⌄'; font-size: 0.8em; line-height: 1; } .armpin-site-header__group-trigger:hover { color: var(--ap-foreground); } .armpin-site-header__dropdown { position: absolute; inset-inline-start: 0; inset-block-start: 100%; min-width: 12rem; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: 0 8px 24px oklch(0 0 0 / 0.12); padding: 0.4rem; display: none; flex-direction: column; z-index: 50; } .armpin-site-header__group:hover > .armpin-site-header__dropdown, .armpin-site-header__group:focus-within > .armpin-site-header__dropdown { display: flex; } .armpin-site-header__dropdown a { padding: 0.4rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); font-size: 0.85rem; } .armpin-site-header__dropdown a:hover { background: var(--ap-secondary); text-decoration: none; } .armpin-site-header__actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .armpin-site-header__icon-link { font-size: 1.1rem; line-height: 1; } .armpin-site-header__icon-link--bell { position: relative; display: inline-flex; } .armpin-site-header__badge { position: absolute; top: -0.35rem; inset-inline-end: -0.4rem; min-width: 1.05rem; height: 1.05rem; display: inline-flex; align-items: center; justify-content: center; padding-inline: 0.15rem; border-radius: 999px; background: var(--ap-action); color: var(--ap-action-foreground); font-size: 0.62rem; font-weight: 700; line-height: 1; border: 2px solid var(--ap-background); } .armpin-cart { position: relative; } button.armpin-cart__trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--ap-radius); border: 1px solid var(--ap-line); background: var(--ap-panel); color: var(--ap-muted-foreground); } button.armpin-cart__trigger:hover { color: var(--ap-foreground); } .armpin-cart__badge { position: absolute; top: -0.4rem; inset-inline-end: -0.4rem; display: grid; place-items: center; min-width: 1.1rem; height: 1.1rem; padding: 0 0.2rem; border-radius: 999px; background: var(--ap-accent); color: var(--ap-accent-foreground); font-size: 0.65rem; font-weight: 700; } .armpin-cart__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 0.4rem); z-index: 60; width: 20rem; max-width: 85vw; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.15); padding: 0.75rem; } .armpin-cart__panel[hidden] { display: none; } .armpin-cart__badge[hidden] { display: none; } .armpin-cart__empty { margin: 0.5rem 0; text-align: center; font-size: 0.85rem; color: var(--ap-muted-foreground); } .armpin-cart__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; max-height: 18rem; overflow-y: auto; } .armpin-cart__item { display: flex; align-items: center; gap: 0.5rem; } .armpin-cart__item-img { width: 2.5rem; height: 2.5rem; border-radius: calc(var(--ap-radius) - 2px); object-fit: cover; border: 1px solid var(--ap-line); flex-shrink: 0; } .armpin-cart__item-info { min-width: 0; flex: 1; } .armpin-cart__item-name { margin: 0; font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .armpin-cart__item-price { margin: 0.1rem 0 0; font-size: 0.75rem; color: var(--ap-muted-foreground); } .armpin-cart__item-qty { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; } .armpin-cart__item-qty button { width: 1.4rem; height: 1.4rem; padding: 0; font-size: 0.8rem; line-height: 1; } button.armpin-cart__item-remove, .armpin-cart__item-qty button.armpin-cart__item-remove { background: none; border: none; color: var(--ap-muted-foreground); width: auto; margin-inline-start: 0.2rem; } .armpin-cart__item-qty button:not(.armpin-cart__item-remove) { background: var(--ap-secondary); color: var(--ap-secondary-foreground); border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 4px); } .armpin-cart__total { display: flex; align-items: center; justify-content: space-between; margin-block-start: 0.6rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--ap-line); font-size: 0.85rem; font-weight: 700; } a.armpin-cart__checkout { display: block; margin-block-start: 0.6rem; padding: 0.55rem; border-radius: calc(var(--ap-radius) - 2px); background: var(--ap-action); color: var(--ap-action-foreground); text-align: center; font-size: 0.85rem; font-weight: 700; } a.armpin-cart__checkout:hover { text-decoration: none; opacity: 0.9; } @media (max-width: 480px) { .armpin-cart__panel { width: 90vw; } } .armpin-lang-menu { position: relative; } .armpin-lang-menu__trigger { cursor: pointer; display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.4rem; border-radius: var(--ap-radius); border: 1px solid var(--ap-line); background: var(--ap-panel); font-size: 0.8rem; font-weight: 700; color: var(--ap-muted-foreground); } .armpin-lang-menu__trigger:hover { color: var(--ap-foreground); } .armpin-lang-menu__dropdown { display: none; } .armpin-lang-menu:hover > .armpin-lang-menu__dropdown, .armpin-lang-menu:focus-within > .armpin-lang-menu__dropdown { display: block; } .armpin-lang-menu__dropdown { position: absolute; inset-inline-end: 0; top: calc(100% + 0.4rem); z-index: 60; min-width: 11rem; max-height: 22rem; overflow-y: auto; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.15); padding: 0.3rem; scrollbar-width: thin; scrollbar-color: var(--ap-line) transparent; } .armpin-lang-menu__dropdown::-webkit-scrollbar { width: 0.4rem; } .armpin-lang-menu__dropdown::-webkit-scrollbar-track { background: transparent; } .armpin-lang-menu__dropdown::-webkit-scrollbar-thumb { background: var(--ap-line); border-radius: 999px; } .armpin-lang-menu__dropdown::-webkit-scrollbar-thumb:hover { background: var(--ap-muted-foreground); } .armpin-lang-menu__item, button.armpin-lang-menu__item { display: block; width: 100%; text-align: start; padding: 0.45rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); font-size: 0.85rem; background: none; border: none; color: var(--ap-foreground); cursor: pointer; } .armpin-lang-menu__item:hover { background: var(--ap-secondary); } .armpin-lang-menu__item.is-active { background: var(--ap-foreground); color: var(--ap-background); font-weight: 700; } .armpin-lang-menu__more, button.armpin-lang-menu__more { display: block; width: 100%; text-align: start; margin: 0.4rem 0 0; padding: 0.5rem 0.6rem 0.4rem; border-block-start: 1px solid var(--ap-line); border-inline: none; border-block-end: none; background: none; font-size: 0.78rem; font-weight: 600; color: var(--ap-muted-foreground); cursor: pointer; border-radius: 0; } .armpin-lang-menu__more:hover { color: var(--ap-foreground); } .armpin-lang-menu__more-list { display: flex; flex-direction: column; gap: 0.15rem; max-height: 10rem; overflow-y: auto; margin-block-start: 0.2rem; scrollbar-width: thin; scrollbar-color: var(--ap-line) transparent; } .armpin-lang-menu__more-list::-webkit-scrollbar { width: 0.4rem; } .armpin-lang-menu__more-list::-webkit-scrollbar-thumb { background: var(--ap-line); border-radius: 999px; } .armpin-lang-menu__custom, button.armpin-lang-menu__custom { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; width: 100%; text-align: start; padding: 0.4rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); border: none; background: none; font-size: 0.8rem; color: var(--ap-muted-foreground); cursor: pointer; } .armpin-lang-menu__custom:hover { background: var(--ap-secondary); color: var(--ap-foreground); } .armpin-lang-menu__custom:disabled { cursor: default; opacity: 0.7; } .armpin-lang-menu__custom-hint { font-size: 0.7rem; opacity: 0.75; white-space: nowrap; } /* "One Person, many contexts" profile switcher */ .armpin-ctx { position: relative; } .armpin-ctx__trigger { display: flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 0.4rem; border-radius: var(--ap-radius); border: 1px solid var(--ap-line); cursor: pointer; } .armpin-ctx__trigger:hover { background: var(--ap-secondary); } .armpin-ctx__avatar { width: 1.75rem; height: 1.75rem; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 1px var(--ap-line); flex-shrink: 0; } .armpin-ctx__avatar--fallback { display: grid; place-items: center; background: var(--ap-secondary); font-size: 0.7rem; font-weight: 700; } .armpin-ctx__trigger-text { display: none; flex-direction: column; text-align: start; line-height: 1.2; } @media (min-width: 64rem) { .armpin-ctx__trigger-text { display: flex; } } .armpin-ctx__trigger-name { font-size: 0.78rem; font-weight: 600; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .armpin-ctx__trigger-ctx { font-size: 0.68rem; color: var(--ap-muted-foreground); } .armpin-ctx__dropdown { display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 0.4rem); z-index: 60; width: 18rem; max-width: 85vw; background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.15); overflow: hidden; } .armpin-ctx:hover > .armpin-ctx__dropdown, .armpin-ctx:focus-within > .armpin-ctx__dropdown { display: block; } .armpin-ctx__list { list-style: none; margin: 0; padding: 0.3rem; } .armpin-ctx__item, button.armpin-ctx__item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem; border-radius: calc(var(--ap-radius) - 2px); background: none; border: none; cursor: pointer; text-align: start; } .armpin-ctx__item:hover { background: var(--ap-secondary); } .armpin-ctx__item.is-active { background: var(--ap-secondary); } .armpin-ctx__item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .armpin-ctx__item-name { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .armpin-ctx__item-ctx { font-size: 0.72rem; color: var(--ap-muted-foreground); } .armpin-ctx__check { color: var(--ap-foreground); font-weight: 700; } .armpin-ctx__footer { display: grid; border-top: 1px solid var(--ap-line); padding: 0.3rem; } .armpin-ctx__footer a { display: block; padding: 0.55rem 0.6rem; border-radius: calc(var(--ap-radius) - 2px); font-size: 0.85rem; color: var(--ap-foreground); } .armpin-ctx__footer a:hover { background: var(--ap-secondary); text-decoration: none; } a.armpin-ctx__add { color: var(--ap-foreground); font-weight: 600; } a.armpin-ctx__qa { border-top: 1px solid var(--ap-line); margin-block-start: 0.3rem; padding-block-start: 0.65rem; color: #92400e; font-weight: 600; } a.armpin-ctx__qa.is-active { color: #b91c1c; } .armpin-qa-banner { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; background: #fef3c7; color: #78350f; border-bottom: 1px solid #f59e0b; padding: 0.5rem 1rem; font-size: 0.85rem; text-align: center; } .armpin-qa-banner form { margin: 0; } .armpin-verify-banner { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; background: var(--ap-secondary); color: var(--ap-foreground); border-bottom: 1px solid var(--ap-line); padding: 0.5rem 1rem; font-size: 0.85rem; text-align: center; } .armpin-verify-banner form { margin: 0; } .armpin-verify-banner button { background: var(--ap-foreground); color: var(--ap-background); border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .armpin-qa-banner button { background: #78350f; color: #fff; border: none; border-radius: calc(var(--ap-radius) - 2px); padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .armpin-qa-banner button:hover { background: #5c2a0a; } /* Floating "עוזר" assistant (global, fixed position, every logged-in page) */ button.armpin-asst__fab { position: fixed; z-index: 70; inset-inline-start: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 0.5rem; height: 3rem; padding: 0 1rem; border-radius: 999px; border: none; background: oklch(0.82 0.17 142); color: oklch(0.22 0.05 150); font-size: 0.9rem; font-weight: 700; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.2); cursor: pointer; } .armpin-asst__fab-text { display: none; } @media (min-width: 40rem) { .armpin-asst__fab-text { display: inline; } } .armpin-asst__overlay { position: fixed; inset: 0; z-index: 80; } .armpin-asst__overlay[hidden] { display: none; } button.armpin-asst__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); border: none; cursor: pointer; } .armpin-asst__panel { position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; max-height: 85vh; display: flex; flex-direction: column; background: var(--ap-panel); border: 1px solid var(--ap-line); border-start-start-radius: var(--ap-radius); border-start-end-radius: var(--ap-radius); box-shadow: 0 -0.5rem 2rem rgba(0,0,0,.2); } @media (min-width: 40rem) { .armpin-asst__panel { bottom: 1rem; inset-inline-start: 1rem; width: 24rem; border-radius: var(--ap-radius); } } .armpin-asst__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--ap-line); } .armpin-asst__title { font-weight: 700; font-size: 1rem; } .armpin-asst__sub { font-size: 0.75rem; color: var(--ap-muted-foreground); } button.armpin-asst__close { width: 2.25rem; height: 2.25rem; border-radius: var(--ap-radius); border: 1px solid var(--ap-line); background: none; cursor: pointer; font-size: 0.9rem; } .armpin-asst__body { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; } .armpin-asst__section h3 { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--ap-muted-foreground); } a.armpin-asst__link { display: block; min-height: 2.5rem; display: flex; align-items: center; padding: 0 0.7rem; margin-block-end: 0.3rem; border-radius: calc(var(--ap-radius) - 2px); border: 1px solid var(--ap-line); font-size: 0.85rem; color: var(--ap-foreground); } a.armpin-asst__link:hover { background: var(--ap-secondary); text-decoration: none; } .armpin-asst__note { font-size: 0.72rem; color: var(--ap-muted-foreground); margin: 0; } .armpin-asst__ai { border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); padding: 0.7rem; background: var(--ap-secondary); } .armpin-asst__ai-loading, .armpin-asst__ai-empty { font-size: 0.82rem; color: var(--ap-muted-foreground); margin: 0; } .armpin-asst__ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .armpin-asst__ai-list li { font-size: 0.85rem; line-height: 1.4; padding-inline-start: 1.1rem; position: relative; } .armpin-asst__ai-list li::before { content: "✨"; position: absolute; inset-inline-start: 0; font-size: 0.75rem; } .armpin-asst__ai-go { display: inline-block; margin-inline-start: 0.4rem; font-size: 0.78rem; font-weight: 700; color: oklch(0.5 0.17 142); text-decoration: none; white-space: nowrap; } .armpin-asst__ai-go:hover { text-decoration: underline; } /* Google's website-translate widget drives the actual translation, but its default banner/ highlighting UI is hidden - the .armpin-lang-menu dropdown above is the only UI shown. */ .goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover { display: none !important; visibility: hidden !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } body { top: 0 !important; } #google_translate_element { display: none !important; } .armpin-site-header__profile, .armpin-site-header__admin, .armpin-site-header__signin { font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: var(--ap-radius); } a.armpin-site-header__signin { background: var(--ap-accent); color: var(--ap-accent-foreground); } .armpin-site-header__signin:hover { text-decoration: none; filter: brightness(1.05); } a.armpin-site-header__signout { font-size: 0.8rem; color: var(--ap-muted-foreground); } .armpin-site-header__mobile-toggle { display: none; } .armpin-site-header__mobile-menu { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 1.25rem 1rem; } .armpin-site-header__mobile-menu a { font-size: 0.9rem; padding: 0.25rem 0; } /* Owner (2026-10-15): "בפועל זה נראה כמו שורה אחת ארוכה... בלי שום היגיון עיצובי" - the group label (תחרויות/דירוגים/אימון/קהילה וכו') only differed from the links below it by font-size and color, not enough contrast to read as a section break in a long scrolling list. A divider line above each group plus a bolder label makes the grouping actually legible on mobile. */ .armpin-site-header__mobile-group-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ap-muted-foreground); margin-block: 0 0.2rem; padding-block-start: 0.7rem; border-block-start: 1px solid var(--ap-line); } .armpin-site-header__mobile-toggle > summary { list-style: none; font-size: 1.3rem; cursor: pointer; padding: 0.5rem; } .armpin-site-header__mobile-toggle > summary::-webkit-details-marker { display: none; } @media (max-width: 860px) { .armpin-site-header__nav, .armpin-site-header__actions > .armpin-site-header__profile, .armpin-site-header__actions > .armpin-site-header__admin, .armpin-site-header__actions > .armpin-site-header__signin, .armpin-site-header__actions > .armpin-site-header__my { display: none; } .armpin-site-header__bar > .armpin-site-header__my { display: none; } /* Deterministic 2-row mobile header (2026-10-12, real reproducible bug - confirmed via same- origin iframe probes AND the owner's own phone screenshots, repeated across this whole conversation): brand+actions+toggle together (75+232+35px plus gaps) sit right at the edge of fitting in a ~355px mobile content width, so plain flex-wrap's auto-wrap point landed wherever that edge happened to fall for a given device - toggle wrapping alone onto its own line, reading as a stray icon floating over blank space. Forcing .armpin-site-header__actions onto its own full-width line explicitly (flex-basis:100%) removes that fragile edge-of-fit dependency entirely: row 1 is always brand+toggle (comfortably small, never wraps further), row 2 is always the icon row - same two rows on every phone width, not a near-miss. */ .armpin-site-header__mobile-toggle { display: block; order: 1; margin-inline-start: auto; } } /* Single-row compact mobile header (2026-10-12, owner wants it to match the real original site, where brand+toggle+all action icons fit on ONE line - not stacked across two). The default sizes (2.25rem icon buttons, 3rem-tall logo, visible "התנתקות" text, 1.25rem/0.75rem gaps) add up to ~465px of required width against a ~355px mobile content area - no amount of wrapping makes that look right, the elements themselves have to shrink. Sign-out text drops from the main row entirely (still reachable in the ☰ menu, same as the original's compact row never showed it either) - every other action stays, just smaller. Verified by direct measurement across 360-480px (the realistic iPhone range), not just one width - see project_i18n_mechanism memory for the iframe-probe technique this was checked with. */ @media (max-width: 860px) { .armpin-site-header__bar { gap: 0.4rem; } .armpin-site-header__brand img { height: 1.8rem !important; } .armpin-site-header__actions { gap: 0.3rem; order: 0; flex-basis: auto; flex-shrink: 0; } .armpin-lang-menu__trigger { min-width: 1.75rem; height: 1.75rem; font-size: 0.7rem; padding: 0 0.25rem; } button.armpin-cart__trigger { width: 1.75rem; height: 1.75rem; } .armpin-ctx__trigger { height: 1.75rem; padding: 0 0.2rem; gap: 0; } .armpin-ctx__avatar { width: 1.5rem; height: 1.5rem; font-size: 0.68rem; } .armpin-site-header__icon-link { font-size: 1rem; } .armpin-site-header__actions > .armpin-site-header__signout-form { display: none; } .armpin-site-header__mobile-toggle { padding: 0; font-size: 1.1rem; } .armpin-site-header__mobile-toggle > summary { padding: 0.3rem; } } /* Mobile fix (2026-10-11): .armpin-lang-menu is a tiny 36px trigger box near the header's end edge - on narrow screens the dropdown (min-width 11rem) anchored to ITS own end edge (inset-inline-end:0, relative to that 36px box) has nowhere to grow and overflows straight off the opposite side of the viewport (confirmed live: dropdown rendered 117px past the screen edge on a 390px-wide iframe test). Fix: re-point the dropdown's containing block to the full- width header bar instead of the trigger itself, so inset-inline-end:0 resolves against the real available width, same real bug/fix shape as .armpin-ctx__dropdown's existing max-width: 85vw safety net just below - this one needed a different fix since its overflow was directional (wrong edge), not just "too wide". */ @media (max-width: 860px) { .armpin-site-header__bar { position: relative; } .armpin-lang-menu { position: static; } /* Owner (2026-10-15): same overflow bug, same fix - .armpin-ctx (profile switcher) is also a small trigger box with its dropdown anchored to ITS OWN end edge (inset-inline-end:0), so on mobile the 18rem-wide dropdown has nowhere to grow and spills off the opposite side of the screen. Re-point to the already-relative header bar above, exactly like .armpin-lang-menu. */ .armpin-ctx { position: static; } } /* ---------- site footer (armpin_site_footer widget, home page round) ---------- */ /* Every wrapper div below also carries its own "armpin-" prefixed class, which means the base stylesheet's `[class^="armpin-"] { color: var(--ap-foreground) }` rule (dark) matches it DIRECTLY too - inheritance alone does not skip past a wrapper that's itself re-pinned to dark, so `color: inherit` must be set on every such wrapper, not just the leaf text nodes, or a leaf's "inherit" just picks up its dark parent instead of the real footer root color. */ /* Owner (2026-10-14): "כל הפס השחור... לא אמור להיות מתוח מימין לשמאל, אמור להיות ממורכז" - the WHOLE footer (not just its inner content) is now one contained, centered island matching real page content width, instead of a full-bleed dark band - every section below keeps its own padding but no longer needs its own max-width/margin-inline:auto, since the outer root already constrains the whole block. */ .armpin-site-footer { max-width: 64rem; margin-inline: auto; margin-block: 2rem; border-radius: var(--ap-radius); overflow: hidden; background: var(--ap-foreground); color: var(--ap-background); } .armpin-site-footer a { color: var(--ap-background); } .armpin-site-footer__newsletter { border-block-end: 1px solid oklch(1 0 0 / 0.12); color: inherit; } .armpin-site-footer__newsletter-inner { padding: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; color: inherit; } .armpin-site-footer__newsletter-text { color: inherit; } .armpin-site-footer__newsletter-title { font-family: var(--ap-font-display); font-weight: 700; text-transform: uppercase; font-size: 0.9rem; color: inherit; } .armpin-site-footer__newsletter-sub { font-size: 0.8rem; opacity: 0.7; color: inherit; } .armpin-site-footer__newsletter-form { display: flex; gap: 0.5rem; } .armpin-site-footer__newsletter-form input { background: oklch(1 0 0 / 0.08); border: 1px solid oklch(1 0 0 / 0.2); border-radius: var(--ap-radius); padding: 0.5rem 0.75rem; color: inherit; min-width: 14rem; } .armpin-site-footer__newsletter-form button { background: var(--ap-action); color: var(--ap-action-foreground); border: none; border-radius: var(--ap-radius); padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; } /* Light background (2026-10-12, owner: "בדוגמה השנייה של האתר הישן... על רקע בהיר", comparing against their old Lovable-built reference) - distinct white/panel section, NOT the dark footer continuing - needs its own color overrides since it no longer inherits the dark footer's light text. */ .armpin-site-footer__contact { background: var(--ap-panel); color: var(--ap-foreground); } .armpin-site-footer__contact-inner { padding: 2rem 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; color: inherit; } .armpin-site-footer__contact-inner h2 { font-family: var(--ap-font-display); font-size: 1.15rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: inherit; margin: 0; } .armpin-site-footer__contact-grid { display: flex; gap: 0.9rem; margin-block-end: 0; } .armpin-site-footer__contact-grid a { width: 3.25rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; background: var(--ap-foreground); color: var(--ap-background); border-radius: 999px; font-size: 1.3rem; transition: opacity 0.15s; } .armpin-site-footer__contact-grid a:hover { opacity: 0.85; } a.armpin-site-footer__contact-cta { background: var(--ap-action); color: var(--ap-action-foreground); border-radius: var(--ap-radius); padding: 0.75rem 2rem; font-weight: 700; font-size: 0.9rem; } .armpin-site-footer__columns { padding: 2rem 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; color: inherit; } /* _elementor_data update note: the base stylesheet's `[class^="armpin-"] { color: var(--ap-foreground) }` rule (dark text) directly matches every classed element here too, same specificity as these rules - since these are appended later in the file, an explicit `color` on each wins the cascade and restores the light text this dark footer actually needs. Without it, any classed (non-) text element renders dark-on-dark and silently disappears. */ .armpin-site-footer__col { color: inherit; } .armpin-site-footer__col h2 { font-family: var(--ap-font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; margin-block-end: 0.75rem; color: inherit; } .armpin-site-footer__col nav { display: flex; flex-direction: column; gap: 0.4rem; } .armpin-site-footer__brand-row { display: flex; align-items: center; gap: 0.5rem; margin-block-end: 0.5rem; color: inherit; } .armpin-site-footer__brand-row img { height: 1.5rem; } .armpin-site-footer__tagline { font-size: 0.8rem; opacity: 0.75; line-height: 1.6; color: inherit; } .armpin-site-footer__about-link { display: inline-block; margin-block-start: 0.5rem; font-size: 0.8rem; font-weight: 600; } .armpin-site-footer__news-item { margin-block-end: 0.6rem; color: inherit; } .armpin-site-footer__news-item a { font-size: 0.85rem; font-weight: 600; } .armpin-site-footer__news-date { font-size: 0.7rem; opacity: 0.6; color: inherit; } .armpin-site-footer__all-news { font-size: 0.8rem; font-weight: 600; display: inline-block; margin-block-start: 0.4rem; } .armpin-site-footer__legal { border-block-start: 1px solid oklch(1 0 0 / 0.12); padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; font-size: 0.75rem; opacity: 0.7; color: inherit; } .armpin-site-footer__legal nav { display: flex; gap: 1rem; flex-wrap: wrap; } @media (max-width: 760px) { .armpin-site-footer__columns { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .armpin-site-footer__columns { grid-template-columns: 1fr; } .armpin-site-footer__newsletter-inner { flex-direction: column; align-items: stretch; } .armpin-site-footer__newsletter-form input { min-width: 0; flex: 1; } .armpin-site-footer__contact-grid { flex-wrap: wrap; justify-content: center; } .armpin-site-footer__contact-inner { padding-inline: 1rem; } } /* ---------- profile form (/profile) ---------- */ .armpin-profile-form { max-width: 56rem; margin-inline: auto; padding-block: 0.5rem 2rem; } .armpin-profile-form__head { display: flex; align-items: center; gap: 1.1rem; margin-block-end: 1.75rem; } .armpin-profile-form__avatar { width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; border: 1px solid var(--ap-line); flex-shrink: 0; } .armpin-profile-form__avatar--fallback { display: flex; align-items: center; justify-content: center; background: var(--ap-foreground); color: var(--ap-background); font-size: 1.5rem; font-weight: 700; font-family: var(--ap-font-display); } .armpin-profile-form__head-text { display: flex; flex-direction: column; gap: 0.3rem; } .armpin-profile-form__name { margin: 0; font-size: 1.3rem; font-weight: 700; font-family: var(--ap-font-display); color: var(--ap-foreground); } .armpin-profile-form__email { margin: 0; font-size: 0.85rem; color: var(--ap-muted-foreground); } .armpin-profile-form__status--draft { background: var(--ap-secondary); color: var(--ap-secondary-foreground); } .armpin-profile-form__status--pending { background: var(--ap-muted); color: var(--ap-muted-foreground); } .armpin-profile-form__status--verified { background: var(--ap-up); color: var(--ap-accent-foreground); } .armpin-profile-form__status--rejected { background: var(--ap-destructive); color: var(--ap-destructive-foreground); } .armpin-profile-form__section { background: var(--ap-panel); border: 1px solid var(--ap-line); border-radius: var(--ap-radius); padding: 1.25rem 1.5rem; margin-block-end: 1rem; } .armpin-profile-form__section h2 { margin-block: 0 1.1rem; font-size: 0.8rem; font-weight: 700; color: var(--ap-muted-foreground); text-transform: uppercase; letter-spacing: 0.02em; } .armpin-profile-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; margin: 0; padding: 0; } .armpin-profile-form__field { display: flex; flex-direction: column; gap: 0.35rem; } .armpin-profile-form__field label { font-size: 0.78rem; font-weight: 600; color: var(--ap-muted-foreground); margin: 0; } .armpin-profile-form__field input, .armpin-profile-form__field select, .armpin-profile-form__field textarea { width: 100%; } .armpin-profile-form__field--full { grid-column: 1 / -1; } .armpin-profile-form__field--full textarea { resize: vertical; } .armpin-profile-form__stepper { display: flex; align-items: center; gap: 0.35rem; } .armpin-profile-form__stepper input[type="number"] { flex: 1; min-width: 0; text-align: center; -moz-appearance: textfield; } .armpin-profile-form__stepper input[type="number"]::-webkit-inner-spin-button, .armpin-profile-form__stepper input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .armpin-profile-form__stepper .armpin-profile-form__stepper-btn { position: relative; flex-shrink: 0; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: calc(var(--ap-radius) - 4px); background: none; color: var(--ap-foreground); font-size: 1.05rem; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; touch-action: manipulation; } /* Owner (2026-10-14): "כל המדידות הפלוס מינוס לא עובד" on mobile - the buttons DO fire (confirmed via a synthetic click in devtools), the real cause is the visible box being smaller than a fingertip, especially on the --sm variant below (24px) - this invisible ::after expands the actual tappable area without changing anything about the compact visual size. */ .armpin-profile-form__stepper .armpin-profile-form__stepper-btn::after { content: ''; position: absolute; inset: -0.35rem; } .armpin-profile-form__stepper .armpin-profile-form__stepper-btn:hover { opacity: 0.6; } .armpin-profile-form__stepper .armpin-profile-form__stepper-btn:active { opacity: 0.4; } /* Owner (2026-10-14): "זה לא מסודר עיצובית... היקף זרוע ולשמאלו יהיה המספרים... שלוש ושלוש עם הפרדות... קו מפריד אנכי... מיושר לימין [RTL] ובאנגלית מיושר לשמאל" - replaced the old stacked label-above-value card grid with a real divider-ruled table-like grid: label at the reading start (right in RTL, left in LTR - plain flex `row` direction is already direction-aware, no logical-property gymnastics needed), value/stepper at the other end, real column/row divider lines. nth-child math assumes a multiple of 3 (or 2 for --compact-2) items per grid - true for every real caller (arm/body circumference sections are always exactly 6 fields; height+weight is exactly 2) - a non-multiple custom-measurement count can leave one stray divider, acceptable. */ .armpin-profile-form__grid--compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); overflow: hidden; } .armpin-profile-form__grid--compact-2 { grid-template-columns: repeat(2, 1fr); } .armpin-profile-form__field--compact { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.75rem; border-inline-start: 1px solid var(--ap-line); border-block-end: 1px solid var(--ap-line); } .armpin-profile-form__grid--compact .armpin-profile-form__field--compact:nth-child(3n+1) { border-inline-start: none; } .armpin-profile-form__grid--compact-2 .armpin-profile-form__field--compact:nth-child(2n+1) { border-inline-start: none; } .armpin-profile-form__grid--compact .armpin-profile-form__field--compact:nth-last-child(-n+3) { border-block-end: none; } .armpin-profile-form__grid--compact-2 .armpin-profile-form__field--compact:nth-last-child(-n+2) { border-block-end: none; } .armpin-profile-form__field--compact label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .armpin-profile-form__stepper--sm { gap: 0.25rem; } .armpin-profile-form__stepper--sm .armpin-profile-form__stepper-btn { width: 1.5rem; height: 1.5rem; font-size: 0.8rem; } .armpin-profile-form__stepper--sm input[type="number"] { width: 2.2rem; padding: 0.2rem 0.1rem; font-size: 0.85rem; } .armpin-profile-form__stepper-unit { flex-shrink: 0; font-size: 0.68rem; color: var(--ap-muted-foreground); font-weight: 600; } .armpin-profile-form__section h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; } /* Owner (2026-10-14): "תאחד ותחבר" - this page's one-off help "?" + popover is retired in favor of the shared, already-live help-system.php (armpin_help_icon/armpin_help_menu_button, its own .armpin-help-ico* / .armpin-help-menu* styles already exist in this file from pro.php etc.). */ @media (max-width: 640px) { .armpin-profile-form__grid--compact { grid-template-columns: repeat(2, 1fr); } .armpin-profile-form__grid--compact .armpin-profile-form__field--compact:nth-child(3n+1) { border-inline-start: 1px solid var(--ap-line); } .armpin-profile-form__grid--compact .armpin-profile-form__field--compact:nth-child(2n+1) { border-inline-start: none; } .armpin-profile-form__grid--compact .armpin-profile-form__field--compact:nth-last-child(-n+3) { border-block-end: 1px solid var(--ap-line); } .armpin-profile-form__grid--compact .armpin-profile-form__field--compact:nth-last-child(-n+2) { border-block-end: none; } } .armpin-profile-form__actions { display: flex; align-items: center; gap: 0.75rem; margin-block-start: 0.25rem; flex-wrap: wrap; } .armpin-profile-form__autosave-status { font-size: 0.78rem; color: var(--ap-muted-foreground); } .armpin-profile-form__note { margin-block-start: 1.25rem; font-size: 0.8rem; color: var(--ap-muted-foreground); } .armpin-profile-form__gender { display: flex; gap: 0.4rem; } .armpin-profile-form__gender-opt { display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.8rem; flex: 1; border: 1px solid var(--ap-line); border-radius: calc(var(--ap-radius) - 2px); cursor: pointer; font-size: 0.85rem; font-weight: 500; background: var(--ap-panel); color: var(--ap-foreground); } .armpin-profile-form__gender-opt:has(input:checked) { background: var(--ap-secondary); border-color: var(--ap-foreground); font-weight: 700; } .armpin-profile-form__avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex-shrink: 0; } .armpin-profile-form__photo-form { display: contents; } .armpin-profile-form__photo-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.7rem; font-weight: 600; color: var(--ap-action); padding: 0.2rem 0.5rem; border-radius: calc(var(--ap-radius) - 2px); border: 1px solid var(--ap-line); } .armpin-profile-form__photo-btn:hover { background: var(--ap-secondary); } .armpin-profile-form__photo-btn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .armpin-profile-form__contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* Owner (2026-10-14): "תסדר את העיצוב של הכפתור הירוק... בגדלים המתאימים... בהתאמה לדף" - this button had no styles of its own at all, so it fell through to the site-wide default