| .profile-analysis { | |
| width: 100%; | |
| max-width: 960px; | |
| margin: 0 auto; | |
| padding: 2rem 0 4rem; | |
| &__header { | |
| margin-bottom: 2rem; | |
| h1 { | |
| margin-bottom: 0; | |
| color: var(--brand-ink); | |
| font-size: clamp(2rem, 4vw, 3rem); | |
| line-height: 1.15; | |
| } | |
| } | |
| &__eyebrow { | |
| margin-bottom: 0.5rem; | |
| color: var(--brand-primary); | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| &__uploader, | |
| &__result, | |
| &__workspace { | |
| margin-bottom: 1.5rem; | |
| padding: 1.5rem; | |
| border: 1px solid var(--brand-border-soft); | |
| border-radius: 12px; | |
| background: var(--brand-paper); | |
| box-shadow: 0 8px 28px rgb(var(--brand-shadow-rgb) / 8%); | |
| h2 { | |
| margin-bottom: 0.5rem; | |
| font-size: 1.35rem; | |
| } | |
| } | |
| &__tabs { | |
| display: flex; | |
| gap: 0.25rem; | |
| margin-bottom: 1rem; | |
| border-bottom: 1px solid var(--brand-border-soft); | |
| button { | |
| position: relative; | |
| padding: 0.7rem 1rem; | |
| border: 0; | |
| color: var(--ifm-color-emphasis-700); | |
| background: transparent; | |
| cursor: pointer; | |
| font: inherit; | |
| font-weight: 700; | |
| } | |
| button::after { | |
| position: absolute; | |
| right: 0.5rem; | |
| bottom: -1px; | |
| left: 0.5rem; | |
| height: 3px; | |
| border-radius: 3px 3px 0 0; | |
| background: transparent; | |
| content: ''; | |
| } | |
| button[aria-selected='true'] { | |
| color: var(--brand-primary); | |
| } | |
| button[aria-selected='true']::after { | |
| background: var(--brand-primary); | |
| } | |
| button:focus-visible { | |
| border-radius: 6px; | |
| outline: 2px solid var(--brand-primary-glow); | |
| outline-offset: 2px; | |
| } | |
| } | |
| &__tab-panel[hidden] { | |
| display: none; | |
| } | |
| &__tab-panel > &__status, | |
| &__tab-panel > &__error, | |
| &__tab-panel > &__result { | |
| margin-top: 1.25rem; | |
| margin-bottom: 0; | |
| } | |
| &__tab-panel > &__result { | |
| padding: 0; | |
| border: 0; | |
| box-shadow: none; | |
| } | |
| &__panel-intro { | |
| margin-bottom: 1rem; | |
| color: var(--ifm-color-emphasis-700); | |
| } | |
| &__panel-intro + &__action-button { | |
| margin-top: 0; | |
| } | |
| &__skills-credit { | |
| margin: 0 0 1.25rem; | |
| a { | |
| display: inline-flex; | |
| gap: 0.35rem; | |
| align-items: center; | |
| padding: 0.5rem 0.75rem; | |
| border: 1px solid var(--brand-border-soft); | |
| border-radius: 8px; | |
| color: var(--brand-primary-deep); | |
| background: var(--brand-surface-soft); | |
| font-size: 0.95rem; | |
| text-decoration: none; | |
| transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; | |
| &:hover { | |
| border-color: var(--brand-primary); | |
| color: var(--brand-primary-deep); | |
| background: var(--brand-surface-callout); | |
| text-decoration: none; | |
| transform: translateY(-1px); | |
| } | |
| &:focus-visible { | |
| outline: 2px solid var(--brand-primary-glow); | |
| outline-offset: 2px; | |
| } | |
| strong { | |
| font-weight: 700; | |
| } | |
| svg { | |
| width: 0.9rem; | |
| height: 0.9rem; | |
| fill: none; | |
| stroke: currentColor; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| stroke-width: 1.5; | |
| } | |
| } | |
| } | |
| &__help, | |
| &__language-help { | |
| margin-bottom: 1rem; | |
| color: var(--ifm-color-emphasis-700); | |
| } | |
| &__privacy-notice { | |
| margin-top: 1.25rem; | |
| padding: 1rem; | |
| border: 1px solid var(--ifm-color-warning); | |
| border-left-width: 4px; | |
| border-radius: 8px; | |
| color: var(--ifm-color-warning-contrast-foreground); | |
| background: var(--ifm-color-warning-contrast-background); | |
| &-title { | |
| display: flex; | |
| gap: 0.65rem; | |
| align-items: center; | |
| margin-bottom: 0.75rem; | |
| } | |
| &-icon { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 1.4rem; | |
| height: 1.4rem; | |
| flex: 0 0 1.4rem; | |
| border-radius: 50%; | |
| color: var(--ifm-color-warning-contrast-background); | |
| background: var(--ifm-color-warning-contrast-foreground); | |
| font-size: 0.95rem; | |
| font-weight: 800; | |
| line-height: 1; | |
| } | |
| h3 { | |
| margin: 0; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| } | |
| p { | |
| margin-bottom: 0.75rem; | |
| } | |
| } | |
| &__consent { | |
| display: flex; | |
| gap: 0.6rem; | |
| align-items: flex-start; | |
| margin: 0; | |
| font-weight: 600; | |
| cursor: pointer; | |
| input { | |
| flex: 0 0 auto; | |
| margin-top: 0.25rem; | |
| accent-color: var(--brand-primary); | |
| } | |
| } | |
| &__language { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| margin: 0 0 1rem; | |
| padding: 0; | |
| border: 0; | |
| legend { | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| label { | |
| display: inline-flex; | |
| gap: 0.4rem; | |
| align-items: center; | |
| margin: 0; | |
| cursor: pointer; | |
| } | |
| input { | |
| margin: 0; | |
| accent-color: var(--brand-primary); | |
| } | |
| &:disabled, | |
| &[disabled] { | |
| opacity: 0.65; | |
| } | |
| } | |
| &__drop-zone { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 180px; | |
| padding: 1.5rem; | |
| border: 2px dashed var(--brand-border-soft); | |
| border-radius: 10px; | |
| background: var(--brand-surface-soft); | |
| cursor: pointer; | |
| text-align: center; | |
| transition: border-color 160ms ease, background-color 160ms ease; | |
| &:hover, | |
| &:focus-within { | |
| border-color: var(--brand-primary); | |
| background: var(--brand-surface-callout); | |
| } | |
| &--disabled { | |
| cursor: not-allowed; | |
| opacity: 0.65; | |
| } | |
| } | |
| &__drop-zone-title { | |
| margin-bottom: 0.25rem; | |
| font-weight: 700; | |
| } | |
| &__drop-zone-note { | |
| margin-bottom: 1rem; | |
| color: var(--ifm-color-emphasis-700); | |
| font-size: 0.9rem; | |
| } | |
| &__file-input { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| clip-path: inset(50%); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| &__validation-error { | |
| margin-top: 1rem; | |
| color: var(--ifm-color-danger-darkest); | |
| } | |
| &__file { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| justify-content: space-between; | |
| min-width: 0; | |
| margin-top: 1rem; | |
| padding: 0.8rem 1rem; | |
| border-radius: 8px; | |
| background: var(--brand-surface-soft); | |
| } | |
| &__file-name { | |
| min-width: 0; | |
| overflow: hidden; | |
| font-weight: 600; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| &__file-size { | |
| flex: 0 0 auto; | |
| color: var(--ifm-color-emphasis-700); | |
| font-size: 0.9rem; | |
| } | |
| &__panel { | |
| min-width: 0; | |
| margin-bottom: 1.25rem; | |
| } | |
| &__action-button { | |
| width: 100%; | |
| margin-top: 1rem; | |
| } | |
| &__captcha { | |
| max-width: 100%; | |
| margin-top: 1.25rem; | |
| overflow-x: auto; | |
| small { | |
| display: block; | |
| margin-top: 0.5rem; | |
| color: var(--ifm-color-emphasis-700); | |
| } | |
| } | |
| &__captcha-label { | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| &__analyze-button { | |
| margin-top: 1.25rem; | |
| border-color: var(--brand-primary); | |
| background: var(--brand-primary); | |
| color: var(--brand-cream-light); | |
| &:hover, | |
| &:focus { | |
| border-color: var(--brand-primary-deep); | |
| background: var(--brand-primary-deep); | |
| color: var(--brand-cream-light); | |
| } | |
| &:focus-visible { | |
| outline: 2px solid var(--brand-primary-glow); | |
| outline-offset: 3px; | |
| } | |
| } | |
| &__status, | |
| &__warning, | |
| &__error { | |
| display: flex; | |
| gap: 0.75rem; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| } | |
| &__status { | |
| color: var(--brand-primary-darker); | |
| background: var(--brand-surface-callout); | |
| } | |
| &__warning { | |
| color: var(--ifm-color-warning-darkest); | |
| background: var(--ifm-color-warning-contrast-background); | |
| } | |
| &__spinner { | |
| width: 1.1rem; | |
| height: 1.1rem; | |
| flex: 0 0 auto; | |
| border: 2px solid var(--ifm-color-emphasis-300); | |
| border-top-color: var(--brand-primary); | |
| border-radius: 50%; | |
| animation: profile-analysis-spin 800ms linear infinite; | |
| } | |
| &__error { | |
| align-items: flex-start; | |
| color: var(--ifm-color-danger-darkest); | |
| background: var(--ifm-color-danger-contrast-background); | |
| strong { | |
| flex: 0 0 auto; | |
| } | |
| } | |
| &__markdown { | |
| color: var(--ifm-font-color-base); | |
| padding-left: 0; | |
| overflow-wrap: anywhere; | |
| > :first-child { | |
| margin-top: 0 !important; | |
| } | |
| > :last-child { | |
| margin-bottom: 0 !important; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6, | |
| strong { | |
| color: var(--ifm-font-color-base); | |
| } | |
| pre, | |
| table { | |
| max-width: 100%; | |
| overflow-x: auto; | |
| } | |
| pre { | |
| white-space: pre; | |
| } | |
| table { | |
| display: block; | |
| } | |
| a { | |
| overflow-wrap: anywhere; | |
| } | |
| } | |
| &__ai-warning, | |
| &__version-notice { | |
| margin-bottom: 1rem; | |
| padding: 0.9rem 1rem; | |
| border-left: 4px solid var(--ifm-color-warning); | |
| border-radius: 4px; | |
| color: var(--ifm-color-warning-darkest); | |
| background: var(--ifm-color-warning-contrast-background); | |
| } | |
| @media (max-width: 768px) { | |
| padding-top: 1rem; | |
| &__uploader, | |
| &__result, | |
| &__workspace { | |
| padding: 1rem; | |
| } | |
| &__tabs button { | |
| flex: 1 1 0; | |
| padding-right: 0.5rem; | |
| padding-left: 0.5rem; | |
| } | |
| &__drop-zone { | |
| min-height: 150px; | |
| padding: 1rem; | |
| } | |
| &__language { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| &__file, | |
| &__warning, | |
| &__error { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| } | |
| &__analyze-button { | |
| width: 100%; | |
| } | |
| } | |
| } | |
| @keyframes profile-analysis-spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .profile-analysis__spinner { | |
| animation: none; | |
| } | |
| } |