/* ========================================================================== Profile — THE STANDARD: My Benfica (owner, 5 Oct 2026: "the standard style should be like we have on my-benfica.php for small screens and desktop, all layout and buttons and head card ... even gaps are perfect all around"). -------------------------------------------------------------------------- Linked by user/profile.php inside .bn-main, AFTER the page's inline style blocks; every rule starts at body .profile-wrapper.benfica-layout so it wins over them whatever the order. Values are copied from themes/default/css/mybenfica-modern.css (as --pfs-* copies of --mb-*): - the shared social bar (#sb-top, social-bar.css) is the head card; - sections: the head OUTSIDE the card (icon, title, colour line, controls right), a one-line intro, then the card (.mb-box frame) with the body; - the tabs are the head's segmented switch (.mb-seg); - setting rows: .84rem/800 label over a .7rem help line; - buttons are flat pills (no shadow, no gradient): save/add green, destructive red; - 1rem between sections, from the bar to the first section and between the columns (style.css). Colours are theme tokens, so light, dark and every skin follow. ========================================================================== */ body .profile-wrapper.benfica-layout { --pfs-card-bg: var(--theme-surface, var(--bs-body-bg)); --pfs-soft: var(--theme-surface-2, var(--bs-tertiary-bg)); --pfs-soft-2: var(--theme-surface-3, var(--bs-secondary-bg)); --pfs-line: var(--theme-border, var(--bs-border-color)); --pfs-ring: rgba(0, 0, 0, .07); --pfs-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06)); --pfs-radius: var(--theme-radius-lg, 1.1rem); --pfs-ink: var(--theme-ink, var(--bs-body-color)); --pfs-muted: var(--theme-ink-muted, var(--bs-secondary-color)); --pfs-primary: var(--theme-primary, var(--bs-primary)); --pfs-on: var(--theme-on-primary, #fff); --pfs-ok: var(--theme-success, var(--bs-success)); --pfs-bad: var(--theme-danger, var(--bs-danger)); --pfs-bad-rgb: var(--theme-danger-rgb, 220, 53, 69); --pfs-bad-ink: var(--theme-danger-strong, var(--bs-danger)); } [data-bs-theme="dark"] body .profile-wrapper.benfica-layout { --pfs-card-bg: var(--bs-tertiary-bg, var(--theme-surface-2)); --pfs-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--pfs-card-bg)); --pfs-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--pfs-card-bg)); --pfs-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent); --pfs-ring: rgba(255, 255, 255, .08); --pfs-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .3)); --pfs-bad-ink: color-mix(in oklab, var(--pfs-bad) 58%, white); } /* ---- Gaps: 1rem from the bar to the first section, between sections ---- */ body .profile-wrapper.benfica-layout .bn-main > #sb-top { margin-top: 0; } body .profile-wrapper.benfica-layout .bn-main > #sb-top + #profile-header-card { margin-top: 1rem; } body .profile-wrapper.benfica-layout .bn-main > #sb-top + #profile-header-card:not(:has(> :not(style):not([hidden]))) + :is(.bn-section, .pf-tabs-wrap) { margin-top: 1rem !important; } body .profile-wrapper.benfica-layout .bn-main > .pf-sec + .pf-tabs-wrap, body .profile-wrapper.benfica-layout .bn-main > .bn-section + .pf-tabs-wrap { margin-top: 1rem; } body .profile-wrapper.benfica-layout .profile-tab-content > .tab-pane > .bn-section + .bn-section, body .profile-wrapper.benfica-layout .profile-tab-content > .tab-pane > * + .bn-section { margin-top: 1rem; } body .profile-wrapper.benfica-layout .profile-tab-content > .tab-pane > .bn-section:first-child { margin-top: 0; } /* ---- Section intro: one muted line under the head (the settings pages' .ns-intro) ---- */ body .profile-wrapper.benfica-layout .pf-sec-desc { margin: -.15rem 0 .45rem; color: var(--pfs-muted); font-size: .8rem; line-height: 1.4; } body .profile-wrapper.benfica-layout .pf-sec-head .pf-kicker { order: 0; } body .profile-wrapper.benfica-layout .pf-sec--danger > .bn-section-head > i { color: var(--pfs-bad); } /* ---- The card: the .mb-box frame (1px ring, theme radius, card bg, theme shadow) ---- */ body .profile-wrapper.benfica-layout .pf-sec > .pf-card { border: 1px solid var(--pfs-ring); border-radius: var(--pfs-radius); background: var(--pfs-card-bg); box-shadow: var(--pfs-shadow); color: var(--pfs-ink); } body .profile-wrapper.benfica-layout .pf-sec > .pf-card.pf-card--danger { border-color: rgba(var(--pfs-bad-rgb), .35); } body .profile-wrapper.benfica-layout .pf-sec > .pf-card > .pf-card-body { padding: .3rem .7rem .7rem; } body .profile-wrapper.benfica-layout .pf-sec > .pf-card > .pf-card-body.pf-pad { padding: .7rem; } /* ---- Setting rows: label .84rem/800 over a .7rem help line, .55rem rhythm ---- */ body .profile-wrapper.benfica-layout .pf-row { padding: .55rem .1rem; gap: .35rem 1.25rem; border-top-color: color-mix(in oklab, var(--pfs-line) 60%, transparent); } body .profile-wrapper.benfica-layout .pf-row-label { font-size: .84rem; font-weight: 800; } body .profile-wrapper.benfica-layout .pf-row-help { margin-top: .05rem; font-size: .7rem; line-height: 1.35; } body .profile-wrapper.benfica-layout .pf-card-foot { margin-top: .1rem; padding-top: .6rem; border-top: 1px dashed color-mix(in oklab, var(--pfs-line) 70%, transparent); } body .profile-wrapper.benfica-layout .pf-note { font-size: .7rem; } /* ---- Buttons: flat pills (.mb-pill), no shadow, no gradient; save/add green, delete red ---- */ body .profile-wrapper.benfica-layout .pf-card .btn:not(.password-toggle):not(.btn-close) { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .34rem .9rem !important; border-radius: 999px; font-size: .76rem; font-weight: 800; line-height: 1.25; box-shadow: none !important; } body .profile-wrapper.benfica-layout .pf-card .btn-sm:not(.password-toggle) { padding: .28rem .8rem !important; } body .profile-wrapper.benfica-layout .pf-card .btn i { font-size: .85em; margin-right: 0 !important; } body .profile-wrapper.benfica-layout .pf-btn-main, body .profile-wrapper.benfica-layout .pf-savebar .btn-save { border: 1px solid transparent; background: var(--pfs-ok); background-image: none; color: #fff; box-shadow: none !important; filter: none; transform: none; } body .profile-wrapper.benfica-layout .pf-btn-main:hover, body .profile-wrapper.benfica-layout .pf-btn-main:focus-visible, body .profile-wrapper.benfica-layout .pf-savebar .btn-save:hover { background: color-mix(in oklab, var(--pfs-ok) 86%, black); color: #fff; filter: none; transform: none; } body .profile-wrapper.benfica-layout .pf-btn-main:focus-visible { outline: 2px solid var(--pfs-ok); outline-offset: 2px; } body .profile-wrapper.benfica-layout .pf-card :is(.btn-outline-secondary, .btn-light, .btn-secondary):not(.password-toggle) { border: 1px solid var(--pfs-line); background: var(--pfs-soft); color: var(--pfs-ink); } body .profile-wrapper.benfica-layout .pf-card :is(.btn-outline-secondary, .btn-light, .btn-secondary):not(.password-toggle):hover { background: var(--pfs-soft-2); color: var(--pfs-ink); } body .profile-wrapper.benfica-layout .pf-card .btn-danger { border-color: transparent; background: var(--pfs-bad); color: #fff; } body .profile-wrapper.benfica-layout .pf-card .btn-outline-danger { border-color: rgba(var(--pfs-bad-rgb), .45); background: rgba(var(--pfs-bad-rgb), .06); color: var(--pfs-bad-ink); } body .profile-wrapper.benfica-layout .pf-card .btn-outline-danger:hover { background: var(--pfs-bad); color: #fff; } /* Badge picks are selectable pills. */ body .profile-wrapper.benfica-layout .pf-badge-pick { border: 1px solid var(--pfs-line); background: var(--pfs-soft); color: var(--pfs-ink); font-size: .76rem; font-weight: 800; box-shadow: none; } body .profile-wrapper.benfica-layout .pf-badge-pick:hover { background: var(--pfs-soft-2); } /* No icon shadows (owner's rule): the sidebar's badge chips. */ body .profile-wrapper.benfica-layout .bn-aside .bn-badge-chip { box-shadow: none; } /* ---- The tabs: the head's segmented switch (.mb-seg exactly) ---- */ body .profile-wrapper.benfica-layout .pf-tabs-wrap.pf-tabs-head { position: static; top: auto; z-index: auto; margin: 0 0 1rem; } body .profile-wrapper.benfica-layout .bn-main > .pf-tabs-wrap.pf-tabs-head:first-child { margin-top: 0; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tabs.pf-tabs { display: inline-flex; flex-wrap: nowrap; gap: .15rem; margin: 0; padding: .15rem; border: 1px solid color-mix(in oklab, var(--pfs-line) 70%, transparent); border-radius: 999px; background: var(--pfs-soft); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow-x: auto; scrollbar-width: none; } body .profile-wrapper.benfica-layout .pf-tabs-head.is-stuck .pf-tabs { box-shadow: none; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tabs .nav-item { flex: 0 0 auto; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tabs .pf-tab-sep { display: none; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .62rem; border: 0; border-radius: 999px; background: transparent; color: var(--pfs-muted); font-size: .74rem; font-weight: 800; line-height: 1.3; white-space: nowrap; box-shadow: none; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab i { display: inline-block; font-size: .8em; opacity: 1; color: inherit; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab:hover { background: transparent; color: var(--pfs-ink); } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab:focus-visible { outline: 2px solid var(--pfs-primary); outline-offset: 1px; box-shadow: none; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab.active { background: var(--pfs-primary); color: var(--pfs-on); box-shadow: none; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab.active i { color: inherit; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab--danger { color: var(--pfs-bad-ink); } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab--danger:hover { color: var(--pfs-bad-ink); background: rgba(var(--pfs-bad-rgb), .08); } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab--danger.active { background: var(--pfs-bad); color: #fff; box-shadow: none; } /* ---- Phones: switch icons only; a crowded switch drops to its own row under 440px ---- */ @media (max-width: 767.98px) { body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab > span:not(.pf-tab-dot) { display: none; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab { padding: .26rem .55rem; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab i { font-size: .85em; } } @media (max-width: 575.98px) { body .profile-wrapper.benfica-layout .pf-sec > .pf-card > .pf-card-body { padding: .3rem .7rem .7rem; } body .profile-wrapper.benfica-layout .pf-row { padding: .5rem .1rem; } } @media (max-width: 439.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) { flex-wrap: wrap !important; row-gap: .5rem !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs)::after { display: block !important; flex: 1 1 0 !important; min-width: .75rem !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) > .bn-head-actions { order: 10 !important; flex: 1 0 100% !important; width: 100% !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs { display: flex; width: 100% !important; justify-content: space-between !important; overflow: visible; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs > .nav-item { flex: 1 1 0 !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { width: 100%; justify-content: center; } } @media (max-width: 379.98px) { body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab { padding: .26rem .45rem; } } @media (prefers-reduced-motion: reduce) { body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab { transition: none !important; } } /* One head, not two (owner, 6 Oct 2026: "double of the same"): a tab pane holding a single card (Profile, Activity, Delete Account, public Comments) drops that card's own head — the My Account head and the active tab already name it. The description stays. */ body .profile-wrapper.benfica-layout .tab-pane > section.pf-sec:only-of-type > .pf-sec-head { display: none; } body .profile-wrapper.benfica-layout .tab-pane > section.pf-sec:only-of-type > .pf-sec-desc { margin-top: 0; } /* My Account head on phones (owner, 8 Oct 2026: "nothing is center … My Account is not fully visible", then "it should be on the right like everything on the site"): every tab's icon sits in the middle of its button, and the switch stays on the title row, on the right after the colour line, compact enough to fit beside the whole title from 375px (EN and PT); only below 375px, where it truly cannot fit, does it take its own evenly stretched row. */ @media (max-width: 767.98px) { body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab { justify-content: center; gap: 0; min-width: 2.3rem; } body .profile-wrapper.benfica-layout .pf-tabs-head .pf-tab i { margin: 0 !important; } } @media (max-width: 767.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) { flex-wrap: nowrap !important; column-gap: .5rem !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) > h2 { flex: 0 0 auto !important; min-width: auto !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs)::after { display: block !important; flex: 1 1 0 !important; min-width: .5rem !important; order: 9 !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) > .bn-head-actions { order: 10 !important; flex: 0 0 auto !important; width: auto !important; margin-left: 0 !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs { display: inline-flex !important; width: auto !important; gap: 0 !important; padding: .12rem !important; overflow: visible !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs > .nav-item { flex: 0 0 auto !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { width: auto; min-width: 0; padding: .28rem .5rem !important; } } @media (max-width: 419.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { padding: .28rem .34rem !important; } } @media (max-width: 374.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) { flex-wrap: wrap !important; row-gap: .5rem !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) > .bn-head-actions { flex: 1 0 100% !important; width: 100% !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs { display: flex !important; width: 100% !important; justify-content: space-between !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs > .nav-item { flex: 1 1 0 !important; display: flex; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { width: 100%; } } /* Same look as the Friends / social switch (.sc-seg, owner 8 Oct 2026: "profile icons should be the same style and gap as this"): .15rem gaps, .28rem .55rem buttons, icons at .8em, muted until picked; no minimum width. */ @media (max-width: 767.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs { gap: .15rem !important; padding: .15rem !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { min-width: 0 !important; padding: .28rem .55rem !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head .pf-tab i { font-size: .8em !important; } } @media (max-width: 374.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { padding: .28rem .3rem !important; } } /* Narrow phones: like the Friends head, the colour line gives way so the switch keeps its Friends size on the title row (EN and PT from 375px); below 375px it takes its own row. */ @media (max-width: 419.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs)::after { display: none !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) > .bn-head-actions { margin-left: auto !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { padding: .28rem .45rem !important; } } @media (max-width: 379.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { padding: .28rem .38rem !important; } } @media (max-width: 374.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) > .bn-head-actions { margin-left: 0 !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { padding: .28rem .3rem !important; } } /* My Account head = the Feed "Posts" head on phones (owner, 8 Oct 2026: "why profile icons are not using the same style and center as feed icons"): a short title ("Account" / "Conta") so the switch keeps the Feed switch's exact sizes (.26rem .55rem buttons, .8em icons, .15rem gaps) with the colour line between, on the title row; only under 360px does it take its own row. */ body .profile-wrapper.benfica-layout #pf-tabs-wrap .pf-t-short { display: none; } @media (max-width: 575.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap .pf-t-long { display: none; } body .profile-wrapper.benfica-layout #pf-tabs-wrap .pf-t-short { display: inline; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) { flex-wrap: nowrap !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs)::after { display: block !important; flex: 1 1 0 !important; min-width: .75rem !important; order: 9 !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) > .bn-head-actions { margin-left: 0 !important; flex: 0 0 auto !important; width: auto !important; order: 10 !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs { display: inline-flex !important; width: auto !important; gap: .15rem !important; padding: .15rem !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs > .nav-item { flex: 0 0 auto !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { width: auto !important; padding: .26rem .55rem !important; } } @media (max-width: 379.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { padding: .26rem .45rem !important; } } @media (max-width: 359.98px) { body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) { flex-wrap: wrap !important; row-gap: .5rem !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head:has(#profileTabs) > .bn-head-actions { flex: 1 0 100% !important; width: 100% !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs { display: flex !important; width: 100% !important; justify-content: space-between !important; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs > .nav-item { flex: 1 1 0 !important; display: flex; } body .profile-wrapper.benfica-layout #pf-tabs-wrap.pf-tabs-head > .bn-head-actions > #profileTabs .pf-tab { width: 100% !important; } } /* The tabs are