.profile-header { background: var(--color-surface); } .profile-header__cover { height: clamp(240px, 26vw, 371px); isolation: isolate; } .profile-header__cover .page-hero__bg { background-image: linear-gradient(180deg, #1a1a1a 0%, #333 100%); } .profile-header__cover-carousel { position: absolute; inset: 0; width: 100%; height: 100%; } .profile-header__cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .profile-header__cover-arrow { position: absolute; top: calc(50% + var(--header-height, 72px) / 2); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-full); background: rgb(255 255 255 / 85%); color: #1a1a1a; box-shadow: var(--shadow-sm); cursor: pointer; transform: translateY(-50%); transition: background-color var(--duration-fast) var(--ease-out); } .profile-header__cover-arrow--prev { left: clamp(var(--space-3), 2vw, var(--space-8)); } .profile-header__cover-arrow--next { right: clamp(var(--space-3), 2vw, var(--space-8)); } .profile-header__cover-arrow:hover { background: var(--color-white); } .profile-header__cover-arrow:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; box-shadow: 0 0 0 4px var(--color-canon-red); } .profile-header__cover-arrow i { font-size: 1.6rem; line-height: 1; } @media (max-width: 575.98px) { .profile-header__cover-arrow { width: 34px; height: 34px; } .profile-header__cover-arrow i { font-size: 1.25rem; } } .profile-header__body { max-width: 1040px; margin-inline: auto; padding: 0 var(--page-gutter) clamp(var(--space-6), 2.5vw, var(--space-10)); text-align: center; } .profile-header__avatar-wrap { position: relative; z-index: 1; margin-top: clamp(-88px, -5vw, -70px); } .profile-header__avatar { width: clamp(120px, 10vw, 168px); height: clamp(120px, 10vw, 168px); border-radius: var(--radius-full); object-fit: cover; border: 5px solid var(--color-surface); box-shadow: var(--shadow-md); background: var(--color-bg); } .profile-header__role { margin-top: -16px; padding: 5px 22px; background: var(--color-canon-red); color: var(--color-white); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: clamp(0.85rem, 1vw, 1rem); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); } .profile-header__name { margin: var(--space-4) 0 0; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--color-text-dark); overflow-wrap: anywhere; } .profile-header__handle { margin: var(--space-1) 0 0; gap: var(--space-2); font-family: var(--font-body); font-size: clamp(0.9rem, 1.05vw, 1.05rem); color: var(--color-text-muted); } .profile-header__sep { opacity: 0.5; } .profile-header__action { position: relative; padding: 0; border: none; background: none; color: var(--color-canon-red); font: inherit; font-weight: var(--fw-semibold); } .profile-header__action:disabled { cursor: progress; opacity: 0.6; } .profile-header__action[data-profile-follow]:not(:disabled) { cursor: pointer; } .profile-header__action[data-profile-follow]:not(:disabled):hover { color: var(--color-canon-red-hover); text-decoration: underline; } .profile-header__action[data-profile-follow]:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; border-radius: var(--radius-sm); } .profile-header__action[data-profile-follow].is-following { color: var(--color-text-muted); } .profile-header__action[data-profile-follow].is-following:not(:disabled):hover { color: var(--color-canon-red-alt); } .profile-header__action[aria-busy="true"] { cursor: progress; } .profile-header__interests { gap: var(--space-2); list-style: none; margin: var(--space-4) 0 0; padding: 0; } .profile-header__interest-tag { display: inline-block; padding: 4px var(--space-4); border-radius: var(--radius-full); background: var(--color-canon-red-soft); color: var(--color-canon-red); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-sm); } .profile-header__socials { gap: var(--space-3); list-style: none; margin: var(--space-4) 0 0; padding: 0; } .profile-header__social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-text); font-size: 1.05rem; text-decoration: none; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .profile-header__social:hover, .profile-header__social:focus-visible { background: var(--color-canon-red); color: var(--color-white); } .profile-header__social-svg { width: 1em; height: 1em; } .profile-header__bio { margin: var(--space-6) 0 0; max-width: 1010px; font-family: var(--font-body); font-size: clamp(0.95rem, 1.1vw, 1.0625rem); line-height: 1.6; color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; } .profile-tabs { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .profile-tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(var(--space-4), 3vw, var(--space-12)); max-width: 1280px; margin: 0 auto; padding: var(--space-5) var(--page-gutter) 0; list-style: none; } .profile-tabs__link { position: relative; display: inline-block; padding: 0 0 var(--space-4); border: none; background: none; cursor: pointer; color: var(--color-text-muted); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: clamp(0.9rem, 1.05vw, 1.0625rem); text-decoration: none; white-space: nowrap; transition: color var(--duration-fast) var(--ease-out); } .profile-tabs__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--color-canon-red); transform: scaleX(0); transition: transform var(--duration-base) var(--ease-out); } .profile-tabs__link:hover { color: var(--color-text-dark); text-decoration: none; } .profile-tabs__link.is-active { color: var(--color-canon-red); font-weight: var(--fw-semibold); } .profile-tabs__link.is-active::after, .profile-tabs__link:hover::after { transform: scaleX(1); } .profile-tabs__link:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } @media (max-width: 768px) { .profile-tabs__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--page-gutter); scrollbar-width: none; } .profile-tabs__list::-webkit-scrollbar { display: none; } .profile-tabs__item { flex-shrink: 0; scroll-snap-align: start; } .profile-tabs__link::after { bottom: 0; } } .perfil__panels { background: var(--color-bg); } .profile-panel { max-width: 1606px; margin-inline: auto; padding: clamp(var(--space-6), 3vw, var(--space-10)) var(--page-gutter) clamp(var(--space-12), 6vw, var(--space-20)); } .profile-panel:focus { outline: none; } .profile-panel:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: -2px; } .profile-empty { padding: clamp(var(--space-12), 8vw, var(--space-20)) 0; text-align: center; } .profile-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin-bottom: var(--space-5); border-radius: var(--radius-full); background-color: var(--color-canon-red-soft); color: var(--color-canon-red); font-size: 2.25rem; } .profile-empty__title { margin: 0 0 var(--space-3); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--color-text-dark); } .profile-empty__text { margin: 0 auto; max-width: 46ch; font-family: var(--font-body); font-size: var(--fs-base); color: var(--color-text-muted); } .profile-empty__cta { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-6); padding: var(--space-3) var(--space-8); border-radius: var(--radius-full); background-color: var(--color-canon-red); color: var(--color-white); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-base); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out); } .profile-empty__cta:hover { background-color: var(--color-canon-red-hover); color: var(--color-white); } .profile-empty__cta:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .profile-tabs__link::after { transition: none; } } .profile-equipment__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .profile-equipment__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .equipment-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface); } .equipment-card__media { position: relative; display: flex; align-items: center; justify-content: center; height: 220px; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); } .equipment-card__img { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; padding: var(--space-4); } .equipment-card__placeholder { font-size: 2rem; line-height: 1; color: var(--color-border-strong); } .equipment-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--space-4); } .equipment-card__name { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--color-text-muted); } .equipment-card__category { order: -1; margin: 0 0 var(--space-1); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.3; color: var(--color-canon-red); } @media (min-width: 992px) { .equipment-card__placeholder { font-size: 2.5rem; } } .profile-equipment__grid--single { grid-template-columns: minmax(0, 220px); justify-content: center; margin-top: var(--space-6); } .equipment-card--add { border-style: dashed; box-shadow: none; } .equipment-card__add { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: var(--color-text); font-family: var(--font-body); cursor: pointer; } .equipment-card__add:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } .equipment-card__add-icon { font-size: 2rem; line-height: 1; color: var(--color-canon-red); } .equipment-card__add-text { padding: var(--space-4); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.35; } .equipment-card__add:hover .equipment-card__add-text { color: var(--color-canon-red); } .equipment-card__remove { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-full); background-color: var(--color-surface); color: var(--color-text-muted); font-size: var(--fs-base); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .equipment-card__remove:hover { background-color: var(--color-canon-red-soft); color: var(--color-canon-red); } .equipment-card__remove:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } .equipment-form { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); text-align: left; } .gallery-modal__btn--primary[data-profile-equipment-submit]:disabled, .gallery-modal__btn--primary[data-profile-equipment-submit]:disabled:hover { background: var(--color-canon-red-alt, #df1f26); opacity: 0.6; cursor: not-allowed; } @media (min-width: 992px) { .equipment-card__add-icon { font-size: 2.5rem; } } .profile-galleries__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); list-style: none; margin: 0; padding: 0; } @media (min-width: 576px) { .profile-galleries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .profile-galleries__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .profile-gallery-card { display: flex; } .profile-gallery-card__link { position: relative; display: block; width: 100%; aspect-ratio: 565 / 429; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--color-surface); color: var(--color-white); text-decoration: none; } .profile-gallery-card__link:hover { color: var(--color-white); text-decoration: none; } .profile-gallery-card__link:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } .profile-gallery-card__media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg); } .profile-gallery-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.72) 100%); } .profile-gallery-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-base) var(--ease-out); } .profile-gallery-card__link:hover .profile-gallery-card__img { transform: scale(1.04); } .profile-gallery-card__placeholder { font-size: 2rem; line-height: 1; color: var(--color-border-strong); } .profile-gallery-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; padding: 4px 12px; border-radius: var(--radius-full); background-color: rgba(0, 0, 0, 0.55); color: var(--color-white); font-family: var(--font-body); font-size: 0.68rem; font-weight: var(--fw-semibold); letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; } .profile-gallery-card__body { position: absolute; inset: auto var(--space-4) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: 2px; } .profile-gallery-card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; font-family: var(--font-body); font-size: clamp(1.05rem, 1.6vw, 1.375rem); font-weight: var(--fw-medium); line-height: 1.3; color: var(--color-white); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); overflow-wrap: anywhere; } .profile-gallery-card__stats { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; font-family: var(--font-body); font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } .profile-gallery-card__stats li { display: inline-flex; align-items: center; gap: var(--space-1); } .profile-gallery-card__stats i { font-size: var(--fs-base); } .profile-galleries__loading, .profile-blogs__loading, .profile-following__loading { margin: 0; padding: var(--space-10) 0; text-align: center; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-text-muted); } .profile-galleries__more, .profile-blogs__more, .profile-following__more { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding-top: clamp(var(--space-6), 2vw, var(--space-10)); } .profile-galleries__more-btn, .profile-blogs__more-btn, .profile-following__more-btn { min-width: 160px; padding: var(--space-3) var(--space-6); border: 1px solid var(--color-text-dark); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-dark); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-base); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .profile-galleries__more-btn:hover, .profile-blogs__more-btn:hover, .profile-following__more-btn:hover { border-color: var(--color-canon-red); background-color: var(--color-canon-red); color: var(--color-white); } .profile-galleries__more-btn:focus-visible, .profile-blogs__more-btn:focus-visible, .profile-following__more-btn:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } .profile-galleries__more-btn:disabled, .profile-galleries__more-btn:disabled:hover, .profile-blogs__more-btn:disabled, .profile-blogs__more-btn:disabled:hover, .profile-following__more-btn:disabled, .profile-following__more-btn:disabled:hover { border-color: var(--color-text-dark); background: transparent; color: var(--color-text-dark); opacity: 0.55; cursor: progress; } .profile-galleries__more-error, .profile-blogs__more-error, .profile-following__more-error { margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-canon-red); } @media (min-width: 992px) { .profile-gallery-card__placeholder { font-size: 2.5rem; } } @media (prefers-reduced-motion: reduce) { .profile-gallery-card__img { transition: none; } .profile-gallery-card__link:hover .profile-gallery-card__img { transform: none; } } .profile-blogs__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); list-style: none; margin: 0; padding: 0; } @media (min-width: 576px) { .profile-blogs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .profile-blogs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .profile-blog-card { display: flex; } .profile-blog-card__link { display: flex; flex-direction: column; width: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-text); text-decoration: none; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .profile-blog-card__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--color-text); text-decoration: none; } .profile-blog-card__link:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } .profile-blog-card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background-color: var(--color-bg); } .profile-blog-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .profile-blog-card__placeholder { font-size: 2rem; line-height: 1; color: var(--color-border-strong); } .profile-blog-card__tags { position: absolute; top: var(--space-3); left: var(--space-3); right: 6.25rem; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; } .profile-blog-card__badge, .profile-blog-card__format { padding: 4px 12px; border-radius: var(--radius-full); color: var(--color-white); font-family: var(--font-body); font-size: 0.68rem; font-weight: var(--fw-semibold); letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; } .profile-blog-card__format { background-color: var(--color-canon-red); } .profile-blog-card__badge { background-color: rgba(0, 0, 0, 0.55); } .profile-blog-card__stats { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .profile-blog-card__stats li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-full); background-color: rgba(0, 0, 0, 0.55); color: var(--color-white); font-family: var(--font-body); font-size: 0.72rem; font-weight: var(--fw-semibold); } .profile-blog-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-3); padding: var(--space-5); } .profile-blog-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; font-family: var(--font-heading); font-size: 1.125rem; font-weight: var(--fw-semibold); line-height: 1.3; color: var(--color-text-dark); overflow-wrap: anywhere; } .profile-blog-card__meta { display: flex; align-items: center; gap: 4px; margin: auto 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-family: var(--font-body); font-size: 0.74rem; line-height: 1.3; color: var(--color-text-muted); } @media (min-width: 992px) { .profile-blog-card__placeholder { font-size: 2.5rem; } } @media (prefers-reduced-motion: reduce) { .profile-blog-card__link { transition: none; } .profile-blog-card__link:hover { transform: none; } } .profile-create-tile { display: flex; } .profile-create-tile__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; padding: var(--space-6) var(--space-4); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-surface); color: var(--color-text-muted); text-align: center; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .profile-create-tile__link:hover { border-color: var(--color-canon-red); background-color: var(--color-canon-red-soft); color: var(--color-text-muted); text-decoration: none; } .profile-create-tile__link:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } .profile-create-tile--galleries .profile-create-tile__link { aspect-ratio: 565 / 429; } .profile-create-tile--blogs .profile-create-tile__link { height: 100%; min-height: 320px; } .profile-create-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 2px solid currentColor; border-radius: var(--radius-full); font-size: 1.5rem; line-height: 1; } .profile-create-tile__link:hover .profile-create-tile__icon { border-color: var(--color-canon-red); color: var(--color-canon-red); } .profile-create-tile__text { max-width: 14ch; font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.35; } .profile-create-tile__action { padding: var(--space-2) var(--space-5); border: 1.5px solid var(--color-canon-red); border-radius: var(--radius-full); color: var(--color-canon-red); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2; } @media (prefers-reduced-motion: reduce) { .profile-create-tile__link { transition: none; } } .profile-following__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .profile-following__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .profile-following__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .profile-following__item { display: flex; min-width: 0; } .profile-following-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; padding: clamp(var(--space-6), 3vw, var(--space-8)) var(--space-3) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); text-align: center; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .profile-following-card:hover { border-color: var(--color-canon-red); box-shadow: var(--shadow-md); } .profile-following-card__profile-link { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; text-decoration: none; } .profile-following-card__profile-link:hover { text-decoration: none; } .profile-following-card__profile-link:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; border-radius: var(--radius-md); } .profile-following-card__photo { width: 96px; height: 96px; margin-bottom: var(--space-2); border-radius: var(--radius-full); object-fit: cover; background: var(--color-bg); } .profile-following-card__name { max-width: 100%; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--color-text-dark); overflow-wrap: anywhere; } .profile-following-card__country { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-text-muted); } .profile-following-card__country i { font-size: 0.9rem; } .profile-following-card__interests { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: var(--space-3) 0 0; padding: 0; } .profile-following-card__interest { padding: 3px var(--space-3); border-radius: var(--radius-full); background: var(--color-canon-red-soft); color: var(--color-canon-red-alt); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-xs); } .profile-following-card__actions { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; margin-top: auto; padding-top: var(--space-5); } .profile-following-card__view-btn, .profile-following-card__unfollow-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: var(--space-2) var(--space-5); border: 2px solid var(--color-canon-red); border-radius: var(--radius-md); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-base); text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .profile-following-card__view-btn:focus-visible, .profile-following-card__unfollow-btn:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } .profile-following-card__view-btn { background: var(--color-canon-red); color: var(--color-white); } .profile-following-card__view-btn:hover { border-color: var(--color-canon-red-hover); background: var(--color-canon-red-hover); color: var(--color-white); text-decoration: none; } .profile-following-card__unfollow-btn { background: var(--color-white); color: var(--color-canon-red); } .profile-following-card__unfollow-btn:hover { background: var(--color-canon-red); color: var(--color-white); } @media (prefers-reduced-motion: reduce) { .profile-following-card, .profile-following-card__view-btn, .profile-following-card__unfollow-btn { transition: none; } }