feat: redesign CGI theme with official branding (purple #5236AB, Cornerstone gradient)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
LIABEUF, Stephane (External) 2026-05-17 22:31:01 +02:00
parent 49bde2b10b
commit 98cd7b9190
2 changed files with 171 additions and 164 deletions

View file

@ -7,7 +7,7 @@
"localisation": "Clermont-Ferrand",
"accroche": "UX & Digital Manager // Product Manager // E-Commerce Architect // Data Leader",
"description": "Fort de 25 ans d'expérience dans l'édition de logiciels, l'e-commerce et les systèmes d'information, Stéphane accompagne la transformation IT des entreprises en alliant vision stratégique, innovation et excellence opérationnelle.",
"disponibilite": "AVAILABLE — CV NOV. 2025",
"disponibilite": "Disponible en Septembre 2026",
"contact": {
"email": "",
"telephone": "",

View file

@ -383,9 +383,9 @@
font-weight: 600;
}
.theme-btn.btn-cgi {
background: #E31937;
background: linear-gradient(to right, #E31937 0%, #A82465 55%, #5236AB 100%);
color: #fff;
font-family: 'Inter', 'Segoe UI', sans-serif;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
@ -1830,12 +1830,15 @@
}
/* ════════════════════════════════════════
CGI
CGI — Branding officiel 2024
Couleurs : Purple #5236AB / Red #E31937
Gradient Cornerstone : Red → Magenta → Purple
Police : Arial
════════════════════════════════════════ */
[data-theme="cgi"] body {
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
background: #f4f4f4;
color: #1a1a1a;
font-family: Arial, 'Helvetica Neue', sans-serif;
background: #EEEEEE;
color: #000000;
overflow-x: hidden;
}
@ -1845,234 +1848,239 @@
[data-theme="cgi"] .cursor-dot { display: none }
[data-theme="cgi"] .hero {
background: #1a1a1a;
background: #200A58;
animation: none;
min-height: 90vh;
border-bottom: 4px solid #E31937;
border-bottom: 4px solid transparent;
border-image: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%) 1;
}
[data-theme="cgi"] .hero-bg {
background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(227,25,55,.12) 0%, transparent 70%),
linear-gradient(135deg, #1a1a1a 60%, #2a0a0f 100%);
background: radial-gradient(ellipse 55% 70% at 95% 50%, rgba(82,54,171,.25) 0%, transparent 65%),
radial-gradient(ellipse 35% 50% at 5% 80%, rgba(227,25,55,.15) 0%, transparent 60%);
}
[data-theme="cgi"] .corner-bracket,
[data-theme="cgi"] .hero-scroll { display: none }
[data-theme="cgi"] .hero-badge {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,.5);
letter-spacing: .18em;
font-weight: 400;
color: rgba(255,255,255,.55);
letter-spacing: .12em;
text-transform: uppercase;
background: rgba(227,25,55,.15);
border: 1px solid rgba(227,25,55,.3);
background: none;
border: none;
display: inline-block;
padding: 4px 14px;
border-radius: 2px;
padding: 0;
margin-bottom: 20px;
}
[data-theme="cgi"] .hero-name {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
color: #fff;
font-weight: 800;
letter-spacing: -.02em;
font-weight: 700;
letter-spacing: -.01em;
line-height: .9;
}
[data-theme="cgi"] .hero-name-line2 {
color: #E31937;
background: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-text-stroke: 0;
text-shadow: none;
display: block;
}
[data-theme="cgi"] .hero-subtitle {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: rgba(255,255,255,.55);
letter-spacing: .05em;
font-family: Arial, sans-serif;
font-size: 14px;
color: rgba(255,255,255,.5);
letter-spacing: .03em;
font-weight: 400;
}
[data-theme="cgi"] .hero-subtitle::before { display: none }
[data-theme="cgi"] .stat-box {
background: rgba(255,255,255,.06);
border: 1px solid rgba(227,25,55,.3);
border-top: 2px solid #E31937;
background: rgba(255,255,255,.05);
border: none;
border-top: 3px solid transparent;
border-image: linear-gradient(to right, #E31937, #5236AB) 1;
border-radius: 0;
clip-path: none;
backdrop-filter: blur(4px);
}
[data-theme="cgi"] .stat-num {
font-family: 'Inter', sans-serif;
font-weight: 800;
color: #E31937;
font-family: Arial, sans-serif;
font-weight: 700;
background: linear-gradient(to right, #E31937, #5236AB);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 36px;
text-shadow: none;
}
[data-theme="cgi"] .stat-label {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
color: rgba(255,255,255,.4);
font-size: 10px;
font-weight: 500;
letter-spacing: .14em;
font-weight: 400;
letter-spacing: .1em;
}
[data-theme="cgi"] nav {
background: #fff;
border-bottom: 3px solid #E31937;
border-bottom: none;
border-image: none;
box-shadow: 0 2px 0 0 #5236AB, 0 3px 8px rgba(0,0,0,.08);
backdrop-filter: none;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
[data-theme="cgi"] .nav-logo {
font-family: 'Inter', sans-serif;
font-weight: 800;
color: #E31937;
font-size: 16px;
font-family: Arial, sans-serif;
font-weight: 700;
color: #5236AB;
font-size: 15px;
text-shadow: none;
letter-spacing: .02em;
letter-spacing: .03em;
}
[data-theme="cgi"] nav a {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 500;
color: #555;
font-weight: 400;
color: #333333;
text-transform: none;
letter-spacing: .02em;
letter-spacing: .01em;
}
[data-theme="cgi"] nav a::before { display: none }
[data-theme="cgi"] nav a:hover { color: #E31937 }
[data-theme="cgi"] nav a:hover { color: #5236AB }
[data-theme="cgi"] #experience { background: #fff }
[data-theme="cgi"] #competences { background: #f4f4f4 }
[data-theme="cgi"] #competences { background: #EEEEEE }
[data-theme="cgi"] #secteurs { background: #fff }
[data-theme="cgi"] #formation { background: #f4f4f4 }
[data-theme="cgi"] #formation { background: #EEEEEE }
[data-theme="cgi"] footer {
background: #1a1a1a;
border-top: 3px solid #E31937;
background: #200A58;
border-top: 4px solid transparent;
border-image: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%) 1;
}
[data-theme="cgi"] .section-id {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
color: #E31937;
letter-spacing: .18em;
letter-spacing: .16em;
text-transform: uppercase;
opacity: .9;
}
[data-theme="cgi"] .section-title {
font-family: 'Inter', sans-serif;
font-weight: 800;
color: #1a1a1a;
font-family: Arial, sans-serif;
font-weight: 700;
color: #000000;
text-transform: none;
letter-spacing: -.01em;
font-size: clamp(24px, 3.5vw, 42px);
}
[data-theme="cgi"] .section-title::after {
background: #E31937;
background: linear-gradient(to right, #E31937 0%, #A82465 60%, #5236AB 100%);
height: 3px;
width: 48px;
width: 100%;
}
[data-theme="cgi"] .group-label {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
letter-spacing: .12em;
color: #fff;
background: #E31937;
background: #5236AB;
border-radius: 0;
text-transform: uppercase;
}
[data-theme="cgi"] .group-label.sec {
background: #A5ACB0;
background: #777777;
}
[data-theme="cgi"] .exp-item {
border-top: 1px solid #e8e8e8;
border-top: 1px solid #CCCCCC;
border-left: 3px solid transparent;
background: transparent;
}
[data-theme="cgi"] .exp-item:hover {
border-left-color: #E31937;
background: #fff9f9;
border-left-color: #5236AB;
background: rgba(82,54,171,.03);
}
[data-theme="cgi"] .exp-period {
font-family: 'Inter', sans-serif;
color: #E31937;
font-family: Arial, sans-serif;
color: #5236AB;
font-size: 11px;
font-weight: 600;
font-weight: 700;
letter-spacing: .06em;
}
[data-theme="cgi"] .exp-co {
font-family: 'Inter', sans-serif;
color: #888;
font-family: Arial, sans-serif;
color: #777777;
font-size: 11px;
font-weight: 500;
font-weight: 400;
text-transform: none;
}
[data-theme="cgi"] .exp-role {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-weight: 700;
color: #1a1a1a;
color: #000000;
font-size: 15px;
text-transform: none;
letter-spacing: -.01em;
}
[data-theme="cgi"] .exp-program {
font-family: 'Inter', sans-serif;
color: #991F3D;
font-family: Arial, sans-serif;
color: #A82465;
font-size: 11px;
font-weight: 600;
font-weight: 700;
letter-spacing: .06em;
}
[data-theme="cgi"] .exp-objective {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-size: 13px;
color: #555;
border-left: 2px solid #E31937;
color: #555555;
border-left: 2px solid #5236AB;
font-style: italic;
}
[data-theme="cgi"] .exp-objective strong { color: #E31937; font-style: normal }
[data-theme="cgi"] .exp-objective strong { color: #5236AB; font-style: normal }
[data-theme="cgi"] .exp-desc {
color: #555;
font-family: 'Inter', sans-serif;
color: #333333;
font-family: Arial, sans-serif;
font-size: 14px;
}
[data-theme="cgi"] .exp-results {
border: 1px solid rgba(242,162,0,.3);
background: rgba(242,162,0,.04);
border: none;
border-left: 3px solid #5236AB;
background: rgba(82,54,171,.04);
clip-path: none;
border-radius: 2px;
border-left: 3px solid #F2A200;
border-radius: 0;
}
[data-theme="cgi"] .exp-results-title {
font-family: 'Inter', sans-serif;
color: #F2A200;
font-family: Arial, sans-serif;
color: #5236AB;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
@ -2080,79 +2088,79 @@
}
[data-theme="cgi"] .exp-results li {
color: #444;
font-family: 'Inter', sans-serif;
color: #333333;
font-family: Arial, sans-serif;
font-size: 13px;
}
[data-theme="cgi"] .exp-results li::before { content: '▸ '; color: #F2A200 }
[data-theme="cgi"] .exp-results li::before { content: '▸ '; color: #5236AB }
[data-theme="cgi"] .tag {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 500;
color: #E31937;
border: 1px solid rgba(227,25,55,.25);
background: rgba(227,25,55,.05);
font-weight: 400;
color: #5236AB;
border: 1px solid rgba(82,54,171,.3);
background: rgba(82,54,171,.06);
border-radius: 2px;
clip-path: none;
text-transform: none;
}
[data-theme="cgi"] .tag.mag {
color: #991F3D;
border-color: rgba(153,31,61,.3);
background: rgba(153,31,61,.05);
color: #A82465;
border-color: rgba(168,36,101,.3);
background: rgba(168,36,101,.06);
}
[data-theme="cgi"] .tag.grn {
color: #1a7a40;
border-color: rgba(26,122,64,.3);
background: rgba(26,122,64,.05);
color: #128354;
border-color: rgba(18,131,84,.3);
background: rgba(18,131,84,.06);
}
[data-theme="cgi"] .skill-panel {
border: 1px solid #e8e8e8;
border: 1px solid #CCCCCC;
background: #fff;
clip-path: none;
border-radius: 2px;
border-top: 3px solid #E31937;
border-radius: 0;
border-top: 3px solid #5236AB;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="cgi"] .skill-panel::before { display: none }
[data-theme="cgi"] .skill-cat {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
color: #E31937;
letter-spacing: .16em;
color: #5236AB;
letter-spacing: .14em;
text-transform: uppercase;
border-bottom: 1px solid #f0f0f0;
border-bottom: 1px solid #EEEEEE;
}
[data-theme="cgi"] .skill-name {
font-family: 'Inter', sans-serif;
color: #1a1a1a;
font-weight: 500;
font-family: Arial, sans-serif;
color: #000000;
font-weight: 400;
font-size: 13px;
}
[data-theme="cgi"] .skill-meta {
font-family: 'Inter', sans-serif;
color: #A5ACB0;
font-family: Arial, sans-serif;
color: #999999;
font-size: 11px;
}
[data-theme="cgi"] .skill-bar {
background: #ececec;
background: #CCCCCC;
border-radius: 0;
height: 4px;
}
[data-theme="cgi"] .skill-fill {
background: linear-gradient(90deg, #E31937, #991F3D);
background: linear-gradient(90deg, #E31937 0%, #A82465 60%, #5236AB 100%);
box-shadow: none;
border-radius: 0;
}
@ -2160,120 +2168,119 @@
[data-theme="cgi"] .skill-fill::after { display: none }
[data-theme="cgi"] .sector-cell {
border: 1px solid #e8e8e8;
border: 1px solid #CCCCCC;
background: #fff;
border-radius: 2px;
color: #555;
font-family: 'Inter', sans-serif;
border-radius: 0;
color: #333333;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 500;
font-weight: 400;
text-transform: none;
}
[data-theme="cgi"] .sector-cell::before { content: ''; display: none }
[data-theme="cgi"] .sector-cell:hover {
color: #E31937;
border-color: #E31937;
background: rgba(227,25,55,.04);
color: #5236AB;
border-color: #5236AB;
background: rgba(82,54,171,.04);
}
[data-theme="cgi"] .edu-card {
border: 1px solid #e8e8e8;
border: 1px solid #CCCCCC;
background: #fff;
clip-path: none;
border-radius: 2px;
border-top: 3px solid #E31937;
border-radius: 0;
border-top: 3px solid transparent;
border-image: linear-gradient(to right, #E31937, #A82465, #5236AB) 1;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="cgi"] .edu-card::before { display: none }
[data-theme="cgi"] .edu-year {
font-family: 'Inter', sans-serif;
color: #A5ACB0;
font-family: Arial, sans-serif;
color: #999999;
font-size: 11px;
font-weight: 500;
font-weight: 400;
letter-spacing: .1em;
}
[data-theme="cgi"] .edu-degree {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-weight: 700;
color: #1a1a1a;
color: #000000;
text-transform: none;
font-size: 18px;
letter-spacing: -.01em;
}
[data-theme="cgi"] .edu-school {
font-family: 'Inter', sans-serif;
color: #888;
font-family: Arial, sans-serif;
color: #555555;
font-size: 13px;
}
[data-theme="cgi"] .certs-title {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
color: #1a1a1a;
letter-spacing: .16em;
color: #000000;
letter-spacing: .14em;
text-transform: uppercase;
}
[data-theme="cgi"] .cert-chip {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 500;
color: #E31937;
border: 1px solid rgba(227,25,55,.25);
font-weight: 400;
color: #5236AB;
border: 1px solid rgba(82,54,171,.3);
background: #fff;
border-radius: 2px;
text-transform: none;
}
[data-theme="cgi"] .footer-name {
font-family: 'Inter', sans-serif;
font-weight: 800;
font-family: Arial, sans-serif;
font-weight: 700;
color: #fff;
font-size: 20px;
text-shadow: none;
letter-spacing: -.01em;
}
[data-theme="cgi"] .footer-info {
font-family: 'Inter', sans-serif;
font-family: Arial, sans-serif;
color: rgba(255,255,255,.45);
}
[data-theme="cgi"] .footer-status { color: #F2A200 }
[data-theme="cgi"] .footer-status { color: #9E83F5 }
[data-theme="cgi"] .contact-bar {
background: #fff;
border-bottom: 1px solid #e8e8e8;
border-bottom: 1px solid #CCCCCC;
}
[data-theme="cgi"] .contact-link {
font-family: 'Inter', sans-serif;
color: #E31937;
border: 1px solid rgba(227,25,55,.25);
background: rgba(227,25,55,.04);
font-family: Arial, sans-serif;
color: #5236AB;
border: 1px solid rgba(82,54,171,.3);
background: rgba(82,54,171,.05);
border-radius: 2px;
}
[data-theme="cgi"] .contact-link:hover {
background: #E31937;
background: #5236AB;
color: #fff;
}
[data-theme="cgi"] .burger-btn { top: 20px; right: 20px; }
[data-theme="cgi"] .burger-btn span { background: #E31937 }
[data-theme="cgi"] .burger-btn span { background: #5236AB }
[data-theme="cgi"] #theme-menu {
background: #fff;
border: 1px solid #e8e8e8;
border-top: 3px solid #E31937;
box-shadow: 0 8px 24px rgba(0,0,0,.1);
border-radius: 2px;
border: 1px solid #CCCCCC;
border-top: 3px solid #5236AB;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
border-radius: 0;
}
/* ════ BASE LAYOUT ════ */