/* PXL Style Timeline — styles par défaut (mode clair) */ .pxlst-wrap { --pxlst-heading-color: #1a1a1a; --pxlst-title-color: #1a1a1a; --pxlst-desc-color: rgba(26, 26, 26, 0.6); --pxlst-date-bg: rgba(0, 0, 0, 0.05); --pxlst-date-color: #1a1a1a; --pxlst-line-color: rgba(0, 0, 0, 0.15); will-change: transform; } /* Surcharge automatique en mode sombre (classe posée sur par le thème) */ body.dark-scheme .pxlst-wrap { --pxlst-heading-color: #E6E5D7; --pxlst-title-color: #E6E5D7; --pxlst-desc-color: rgba(230, 229, 215, 0.6); --pxlst-date-bg: rgba(230, 229, 215, 0.05); --pxlst-date-color: #E6E5D7; --pxlst-line-color: rgba(230, 229, 215, 0.15); } .pxlst-timeline { max-width: 700px; } .pxlst-heading { font-size: 28px; font-weight: 700; color: var(--pxlst-heading-color); margin-bottom: 30px; } .pxlst-item { display: flex; flex-direction: column; position: relative; padding-bottom: 40px; } .pxlst-item.pxlst-item-last { padding-bottom: 0; } .pxlst-number-date { display: flex; align-items: center; position: relative; margin-bottom: 24px; } .pxlst-number { width: 40px; height: 40px; border-radius: 50%; background: #2ecc9a; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; z-index: 2; flex-shrink: 0; } .pxlst-date { background: var(--pxlst-date-bg); color: var(--pxlst-date-color); padding: 12px 24px; border-radius: 50px; margin-left: -20px; padding-left: 30px; font-size: 15px; white-space: nowrap; flex: 1; } /* Ligne verticale : part du bas de la bulle et descend jusqu'en bas de l'item (donc jusqu'à la bulle suivante) */ .pxlst-item:not(.pxlst-item-last)::after { content: ''; position: absolute; top: 40px; left: 19px; bottom: 0; width: 1px; background: var(--pxlst-line-color); z-index: 1; } .pxlst-content { padding-left: 56px; } .pxlst-title { font-size: 20px; font-weight: 700; color: var(--pxlst-title-color); margin-bottom: 6px; } .pxlst-sub { color: #2ecc9a; font-size: 15px; margin-bottom: 14px; } .pxlst-desc { color: var(--pxlst-desc-color); font-size: 15px; line-height: 1.6; } @media ( max-width: 767px ) { .pxlst-heading { font-size: 22px; margin-bottom: 20px; } .pxlst-content { padding-left: 32px; } .pxlst-item:not(.pxlst-item-last)::after { left: 11px; } .pxlst-number { width: 24px; height: 24px; font-size: 12px; } .pxlst-date { margin-left: -12px; padding-left: 20px; } .pxlst-item:not(.pxlst-item-last)::after { top: 24px; } .pxlst-title { font-size: 17px; } } /* ========================================================================== Widget : Skills Row ========================================================================== */ .pxlst-skills-wrap { --pxlst-heading-color: #1a1a1a; --pxlst-skill-percent-color: #1a1a1a; --pxlst-skill-label-color: rgba(26, 26, 26, 0.6); will-change: transform; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pxlst-skills-wrap::-webkit-scrollbar { display: none; } body.dark-scheme .pxlst-skills-wrap { --pxlst-heading-color: #E6E5D7; --pxlst-skill-percent-color: #E6E5D7; --pxlst-skill-label-color: rgba(230, 229, 215, 0.5); } .pxlst-skills-row { display: flex; gap: 20px; flex-wrap: nowrap; } .pxlst-skill-card { width: 220px; height: 220px; flex-shrink: 0; background-color: #f2f2f2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; box-sizing: border-box; } body.dark-scheme .pxlst-skill-card { background-color: #1c222b; } .pxlst-skill-icon { max-width: 64px; max-height: 64px; width: auto; height: auto; margin-bottom: 20px; object-fit: contain; } .pxlst-skill-percent { font-size: 32px; font-weight: 700; color: var(--pxlst-skill-percent-color); margin-bottom: 8px; line-height: 1; } .pxlst-skill-label { font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--pxlst-skill-label-color); } /* Valeurs par défaut plus compactes sur tablette/mobile, cohérentes avec les tailles de carte par défaut proposées dans les contrôles responsive. */ @media ( max-width: 1024px ) { .pxlst-skill-card { padding: 14px; } .pxlst-skill-icon { max-width: 48px; max-height: 48px; margin-bottom: 12px; } .pxlst-skill-percent { font-size: 24px; } .pxlst-skill-label { font-size: 11px; } } @media ( max-width: 767px ) { .pxlst-skill-card { padding: 10px; } .pxlst-skill-icon { max-width: 36px; max-height: 36px; margin-bottom: 8px; } .pxlst-skill-percent { font-size: 18px; } .pxlst-skill-label { font-size: 10px; letter-spacing: 0.5px; } }