/* Variante claire, posée par-dessus style.css. Elle ne remplace rien : cv.html reste la version de référence. Seule index-clair.html charge ce fichier, après style.css, et ajoute `class="theme-clair"` sur . La mise en page, les proportions et les animations viennent toujours de style.css ; ici on ne redéfinit que l'ambiance, plus les quelques composants qui n'existent pas dans la version sombre (pastilles du portrait, schéma d'architecture, jauge avant/après, bandeau de contact). Fil directeur : fond clair, cartes blanches posées sur une ombre douce, dégradé cyan -> bleu -> indigo réservé aux accents. Deux blocs restent sombres, parce qu'ils racontent quelque chose : le hero et le bandeau de contact. La console aussi, évidemment : un terminal est sombre. */ .theme-clair { --chrome: #ffffff; --bg: #f4f7fc; --bg-alt: #eaf0f9; --surface: #ffffff; --surface-2: #ffffff; --border: #e1e8f3; --border-soft: #edf2f9; --text: #101a2c; --muted: #4d5c72; --dim: #6b7c93; --strong: #0b1422; --accent: #0e7490; --accent-rgb: 14, 116, 144; --accent-2: #4f46e5; --accent-2-rgb: 79, 70, 229; /* Les trois dégradés de l'affiche, déclinés autour du turquoise d'origine. */ --g1: linear-gradient(135deg, #06b6d4, #3b82f6); --g2: linear-gradient(135deg, #4f46e5, #8b5cf6); --g3: linear-gradient(135deg, #14b8a6, #0ea5e9); --ink: #0b1b33; --shadow-xs: 0 1px 2px rgba(16, 27, 48, 0.06); --shadow-sm: 0 1px 2px rgba(16, 27, 48, 0.05), 0 6px 16px -10px rgba(16, 27, 48, 0.25); --shadow-md: 0 2px 4px rgba(16, 27, 48, 0.04), 0 16px 36px -18px rgba(16, 27, 48, 0.3); --shadow-lg: 0 30px 70px -28px rgba(11, 27, 51, 0.45); --radius: 16px; } .theme-clair { background: var(--bg); color: var(--text); } .theme-clair strong { color: var(--strong); } /* Deux voiles colorés très dilués, fixes derrière la page : c'est eux qui donnent la profondeur du visuel d'origine, sans coûter une image. */ .theme-clair::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60rem 40rem at 82% -10%, rgba(59, 130, 246, 0.10), transparent 60%), radial-gradient(52rem 38rem at 5% 32%, rgba(20, 184, 166, 0.09), transparent 60%), radial-gradient(46rem 34rem at 95% 78%, rgba(139, 92, 246, 0.08), transparent 62%); } /* Jeu d'icônes */ .sprite { display: none; } .ico { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Tuile d'icône : le carré arrondi en dégradé de l'affiche. */ .tile { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; color: #fff; background: var(--g1); box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.55); } .tile-2 { background: var(--g2); box-shadow: 0 6px 14px -6px rgba(99, 79, 229, 0.5); } .tile-3 { background: var(--g3); box-shadow: 0 6px 14px -6px rgba(14, 165, 233, 0.5); } .tile-sm { width: 30px; height: 30px; border-radius: 9px; } .tile-sm .ico { width: 16px; height: 16px; } /* Barre de navigation */ .theme-clair .nav { background: rgba(244, 247, 252, 0.82); } .theme-clair .nav.is-scrolled { box-shadow: 0 1px 0 var(--border), 0 12px 24px -22px rgba(16, 27, 48, 0.5); } .theme-clair .nav-brand span { color: var(--dim); } .theme-clair .btn-pdf { color: #fff; background: var(--g1); border: none; box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.8); } .theme-clair .btn-pdf:hover { background: var(--g1); filter: brightness(1.06); } /* Lien vers l'autre variante : le fond clair rend le trait trop discret. */ .theme-clair .nav-variant { background: #fff; } .theme-clair .nav-variant:hover { border-color: #c9d6e8; } .theme-clair .skip-link { background: #0e7490; color: #fff; } /* Hero : le panneau sombre de l'affiche, posé sur le fond clair. Les variables redéfinies ici suffisent à retourner tout ce que style.css peint à l'intérieur. */ .theme-clair .hero { --surface: rgba(255, 255, 255, 0.07); --surface-2: rgba(255, 255, 255, 0.11); --border: rgba(255, 255, 255, 0.14); --border-soft: rgba(255, 255, 255, 0.10); --text: #f2f7fd; --muted: #a9bcd4; --dim: #8399b5; --strong: #ffffff; --accent: #22d3ee; --accent-rgb: 34, 211, 238; --accent-2: #a78bfa; color: var(--text); width: min(1260px, calc(100% - 2rem)); margin: 0.85rem auto 0; border: none; border-radius: 30px; box-shadow: var(--shadow-lg); background: radial-gradient(38rem 28rem at 88% 8%, rgba(139, 92, 246, 0.38), transparent 62%), radial-gradient(34rem 26rem at 4% 92%, rgba(6, 182, 212, 0.30), transparent 60%), linear-gradient(140deg, #091528 0%, #0e2244 48%, #16204c 100%); padding: clamp(2.6rem, 6vw, 4.4rem) 0 clamp(2.4rem, 5vw, 3.6rem); } .theme-clair .hero::before, .theme-clair .hero::after { display: none; } .theme-clair .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 1.2rem; padding: 0.34rem 0.85rem; border-radius: 999px; background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.32); color: #67e8f9; } .theme-clair .hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2); } .theme-clair .hero-name { color: #fff; } .theme-clair .hero-thesis { background: linear-gradient(100deg, #67e8f9 0%, #60a5fa 45%, #c4b5fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Le curseur ne peut pas hériter d'un texte transparent : on le repeint. */ .theme-clair .typing::after { background: #67e8f9; } .theme-clair .hero-photo { background: linear-gradient(135deg, #22d3ee, #818cf8); box-shadow: 0 22px 50px rgba(3, 10, 24, 0.6); } .theme-clair .hero-photo img { border-color: #0e2244; } /* Portrait et carte technique */ .hero-media { grid-column: 2; grid-row: 1; display: grid; justify-items: center; align-content: center; gap: 1.1rem; width: clamp(250px, 30vw, 330px); } .theme-clair .hero-media .hero-photo { grid-column: auto; } /* Les quatre briques du métier, rangées sous le portrait plutôt que dispersées autour : même vocabulaire que l'affiche, sans l'éparpillement. */ .hero-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; width: 100%; padding: 0.55rem; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); box-shadow: 0 18px 38px -22px rgba(2, 8, 20, 0.9); } .hero-stack li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.45rem; border-radius: 10px; font-size: 0.74rem; font-weight: 600; color: #e6eefa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-stack .tile { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; } .hero-stack .ico { width: 15px; height: 15px; } /* Chiffres clés, dans le panneau sombre */ .theme-clair .stat { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.12); border-radius: 16px; backdrop-filter: blur(6px); } .theme-clair .stat:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(103, 232, 249, 0.45); } .theme-clair .stat::before { background: linear-gradient(90deg, #22d3ee, #818cf8); } .theme-clair .stat-value { background: linear-gradient(120deg, #67e8f9, #a5b4fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .theme-clair .link-chip { backdrop-filter: blur(6px); } .theme-clair a.link-chip:hover { border-color: rgba(103, 232, 249, 0.5); } /* Sections */ .theme-clair .section-alt { background: linear-gradient(180deg, rgba(234, 240, 249, 0.85), rgba(234, 240, 249, 0.4)); border-block-color: var(--border-soft); } .theme-clair .section-kicker { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(14, 116, 144, 0.08); border: 1px solid rgba(14, 116, 144, 0.16); color: #0e7490; } .theme-clair .pull-quote { border-left: none; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-md); padding: 1.9rem 2.1rem 1.9rem 2.4rem; position: relative; overflow: hidden; } .theme-clair .pull-quote::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--g1); } /* Cartes blanches */ .theme-clair .principle, .theme-clair .feature, .theme-clair .tiers li { background: #fff; border-color: var(--border); box-shadow: var(--shadow-sm); } .theme-clair .principle:hover, .theme-clair .tiers li:hover { background: #fff; border-color: #cddcef; box-shadow: var(--shadow-md); } .theme-clair .feature:hover { border-color: #cddcef; box-shadow: var(--shadow-md); } .theme-clair .feature { border-radius: 22px; } .theme-clair .feature::before { background: var(--g1); height: 3px; } /* Le numéro devient une tuile : l'icône le remplace visuellement. */ .theme-clair .principle { display: flex; flex-direction: column; gap: 0.15rem; } .theme-clair .principle-num { order: 2; margin: 0 0 0.5rem; font-size: 0.7rem; color: var(--dim); letter-spacing: 0.14em; } .theme-clair .principle .tile { order: 1; margin-bottom: 1rem; } .theme-clair .principle h3 { order: 3; } .theme-clair .principle p { order: 4; } .theme-clair .feature-tag { border-radius: 999px; border: none; color: #fff; background: var(--g1); padding: 0.3rem 0.8rem; box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.9); } .theme-clair .feature-ai .feature-tag { background: var(--g2); } .theme-clair .feature-result .feature-tag { background: var(--g3); } /* Schéma d'architecture : les trois étages, reliés */ .theme-clair .flow { gap: 1.6rem; align-items: stretch; } .theme-clair .flow li { flex-direction: column; align-items: flex-start; gap: 0.75rem; position: relative; background: linear-gradient(180deg, #fbfdff, #f4f8fd); border-radius: 14px; } /* Le connecteur ne se dessine qu'en rangée : en colonne il pointerait dans le vide. */ @media (min-width: 760px) { .theme-clair .flow li:not(:last-child)::after { content: ''; position: absolute; z-index: 1; right: -1.15rem; top: 50%; width: 0.7rem; height: 0.7rem; border-top: 2px solid #9db7d6; border-right: 2px solid #9db7d6; transform: translateY(-50%) rotate(45deg); } } .theme-clair .flow .tier-num { order: 2; margin: 0; border-radius: 6px; color: #3730a3; background: rgba(79, 70, 229, 0.09); border-color: rgba(79, 70, 229, 0.2); } .theme-clair .flow .tile { order: 1; } .theme-clair .flow div { order: 3; } /* Liste IA : chaque point gagne sa tuile, la puce ronde disparaît */ .theme-clair .ai-list { gap: 0.9rem; } .theme-clair .ai-list li { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.95rem 1.1rem; background: #fff; border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-xs); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; } .theme-clair .ai-list li:hover { border-color: #cddcef; box-shadow: var(--shadow-sm); transform: translateX(3px); } .theme-clair .ai-list li::before { display: none; } /* Encart « Un plus » : le bloc teinté de l'affiche */ .theme-clair .plus-card { display: flex; gap: 0.9rem; align-items: flex-start; border-top: none !important; max-width: none; padding: 1.1rem 1.2rem; border-radius: 14px; background: linear-gradient(135deg, rgba(6, 182, 212, 0.09), rgba(99, 102, 241, 0.09)); border: 1px solid rgba(79, 70, 229, 0.16); color: var(--muted); } .theme-clair .feature-public { border-top: none; margin-top: 1.8rem; padding: 1.5rem 1.6rem; border-radius: 16px; background: linear-gradient(160deg, #f6f9fe, #eef4fc); border: 1px solid var(--border); } .theme-clair .feature-public h4 { color: var(--text); } .theme-clair .project-link { background: #fff; border-color: var(--border); box-shadow: var(--shadow-xs); } .theme-clair .project-link:hover { background: #fff; border-color: #bfd2ea; box-shadow: var(--shadow-sm); } .theme-clair .project-link-main { color: #fff; border: none; background: var(--g1); box-shadow: 0 12px 24px -12px rgba(37, 99, 235, 0.9); } .theme-clair .project-link-main:hover { background: var(--g1); filter: brightness(1.07); } /* Illustrations : captures de la démo publique, fondues dans la page */ .split { display: grid; align-items: center; gap: clamp(1.3rem, 3vw, 2.4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); } /* Ici le texte reste fils direct du panneau : l'envelopper dans un conteneur casserait `.feature-public > p`, et l'intro reprendrait la couleur du titre. */ .theme-clair .feature-public.split { grid-template-rows: auto auto auto auto; align-items: start; } .theme-clair .feature-public.split > h4, .theme-clair .feature-public.split > p, .theme-clair .feature-public.split > .project-links { grid-column: 1; } .theme-clair .feature-public.split > .shot { grid-column: 2; grid-row: 1 / span 4; align-self: center; } .shot { margin: 0; } .shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-md); } .shot figcaption { margin-top: 0.7rem; text-align: center; font-size: 0.78rem; color: var(--dim); } /* Jauge avant / après */ .gauge { display: grid; gap: 0.75rem; margin: 1.7rem 0 0; } .gauge-row { display: grid; align-items: center; gap: 0.9rem; grid-template-columns: 4.2rem 1fr auto; } .gauge-name { font-size: 0.78rem; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; } .gauge-track { height: 12px; border-radius: 999px; background: #e6ecf6; overflow: hidden; } .gauge-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: #c3cfe0; transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s; } .gauge-fill.is-after { background: var(--g1); } .feature.is-visible .gauge-fill { width: var(--w); } .gauge-value { font-family: var(--font-mono); font-size: 0.83rem; color: var(--dim); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .gauge-value.is-strong { color: var(--accent); font-weight: 600; } .gauge-badge { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.2rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: #fff; background: var(--g3); box-shadow: 0 10px 22px -12px rgba(14, 165, 233, 0.9); } /* Le banc de test, en tuiles */ .devices { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.4rem; } .devices li { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.85rem 0.45rem 0.45rem; border-radius: 11px; font-size: 0.82rem; font-weight: 500; color: var(--text); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-xs); transition: border-color 0.2s, transform 0.2s; } .devices li:hover { border-color: #bfd2ea; transform: translateY(-2px); } /* Étiquettes techniques */ .theme-clair .chips li { background: #fff; border-color: var(--border); color: var(--muted); box-shadow: var(--shadow-xs); } .theme-clair .chips li:hover { color: var(--accent); border-color: #a5c8dd; } /* Compétences */ .theme-clair .skill-group { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.3rem; box-shadow: var(--shadow-sm); transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s; } .theme-clair .skill-group:hover { border-color: #cddcef; box-shadow: var(--shadow-md); transform: translateY(-3px); } .theme-clair .grid-skills { gap: 1rem; } .theme-clair .skill-group h3 { display: flex; align-items: center; gap: 0.7rem; color: var(--text); border-bottom: none; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: none; padding-bottom: 0; margin-bottom: 1rem; } /* Parcours */ .theme-clair .timeline::before { background: linear-gradient(180deg, #7dd3fc, #c7d2fe 45%, transparent); width: 2px; } .theme-clair .job::before { background: #fff; border-color: #cbd8e8; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9); } .theme-clair .job-current::before { border-color: transparent; background: var(--g1); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18); } .theme-clair .job:hover::before { border-color: #38bdf8; box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.16); } .theme-clair .job-dates { color: var(--accent); } .theme-clair .badge-current { color: #fff; background: var(--g3); border: none; border-radius: 999px; padding: 0.2rem 0.6rem; } .theme-clair .job-points li::before { color: #38bdf8; } /* Formation */ .theme-clair .col-title { color: var(--text); border-bottom-color: var(--border); } .theme-clair .cert-list li { background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 1rem 1.15rem; box-shadow: var(--shadow-xs); transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s; } .theme-clair .cert-list li:hover { border-color: #cddcef; box-shadow: var(--shadow-sm); transform: translateX(4px); } .theme-clair .grid-2 { gap: 1.8rem; } .theme-clair .cert-list { gap: 0.8rem; } /* Bandeau de contact */ .cta { padding: 0 0 clamp(3rem, 6vw, 4.5rem); } .cta-panel { --text: #f2f7fd; --muted: #a9bcd4; position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.5rem, 4vw, 2.8rem); border-radius: 26px; color: var(--text); background: radial-gradient(30rem 22rem at 90% 110%, rgba(139, 92, 246, 0.42), transparent 62%), radial-gradient(26rem 20rem at 2% -20%, rgba(6, 182, 212, 0.34), transparent 60%), linear-gradient(130deg, #0a1728 0%, #0f2549 55%, #17204d 100%); box-shadow: var(--shadow-lg); } .cta-kicker { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: #67e8f9; margin-bottom: 0.8rem; } .cta-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); } .cta-panel h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; color: #fff; margin-bottom: 0.7rem; } .cta-lede { color: var(--muted); font-size: 0.96rem; max-width: 46ch; } .cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .cta-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.2rem; border-radius: 11px; font-size: 0.89rem; font-weight: 600; text-decoration: none; color: #f2f7fd; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); transition: background 0.2s, border-color 0.2s, transform 0.15s; } .cta-btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } .cta-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .cta-btn-main { color: #06202c; border-color: transparent; background: linear-gradient(135deg, #67e8f9, #a5b4fc); box-shadow: 0 14px 28px -14px rgba(103, 232, 249, 0.9); } .cta-btn-main:hover { background: linear-gradient(135deg, #67e8f9, #a5b4fc); filter: brightness(1.06); border-color: transparent; } /* Pied de page */ .theme-clair .footer { background: transparent; border-top-color: var(--border); } /* Bouton flottant */ .theme-clair .run-btn { color: #fff; background: linear-gradient(135deg, #0f2549, #16204c); border-color: rgba(103, 232, 249, 0.35); box-shadow: 0 16px 34px -14px rgba(11, 27, 51, 0.8), 0 0 0 5px rgba(34, 211, 238, 0.09); } .theme-clair .run-btn svg { fill: #67e8f9; } .theme-clair .run-btn:hover { background: linear-gradient(135deg, #133060, #1d2a63); border-color: rgba(103, 232, 249, 0.6); } /* La console garde son fond sombre : un terminal clair n'a pas de sens. Elle réclame donc la palette d'origine, sinon les lignes peintes en var(--text) ressortiraient en bleu nuit sur bleu nuit. */ .theme-clair .console-window { --text: #e8eef4; --muted: #8fa0b0; --dim: #61707e; --strong: #ffffff; --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.05); --accent: #2dd4bf; --accent-rgb: 45, 212, 191; } .theme-clair .console-backdrop { background: rgba(8, 18, 34, 0.72); } .theme-clair :focus-visible { outline-color: #0284c7; } /* Responsive */ @media (max-width: 860px) { .nav-variant { display: none; } .split { grid-template-columns: 1fr; } .theme-clair .feature-public.split > .shot { grid-column: 1; grid-row: auto; } } @media (max-width: 760px) { .theme-clair .flow { gap: 0.8rem; } } @media (max-width: 720px) { .hero-media { grid-column: 1; grid-row: 1; width: auto; justify-items: start; margin-bottom: 1.4rem; } .hero-stack { display: none; } .theme-clair .hero { border-radius: 22px; width: calc(100% - 1.4rem); } } @media (max-width: 600px) { .gauge-row { grid-template-columns: 3.6rem 1fr auto; gap: 0.6rem; } .cta-panel { border-radius: 20px; } .cta-actions { width: 100%; } .cta-btn { flex: 1 1 auto; justify-content: center; } } /* Impression : print.css remet la page en noir sur blanc, mais il ne connaît ni le panneau sombre du hero ni les composants ajoutés ici. */ @media print { .theme-clair::before { display: none !important; } .theme-clair .hero { --text: #111827; --muted: #4b5563; --dim: #6b7280; --strong: #111827; --accent: #0f766e; width: 100% !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #111827 !important; } .theme-clair .hero-eyebrow { background: none !important; border: none !important; padding: 0 !important; color: #4b5563 !important; } .theme-clair .hero-eyebrow::before, .theme-clair .hero-name { color: #111827 !important; } .theme-clair .hero-eyebrow::before { display: none !important; } .theme-clair .hero-photo img { border-color: #d1d5db !important; } /* Sans cela, la hauteur réservée à la carte technique creuse un blanc sous le résumé. */ .hero-media { width: auto !important; gap: 0 !important; } .hero-stack, .shot, .cta, .sprite, .tile, .gauge, .gauge-badge, .nav-variant { display: none !important; } .split { display: block !important; } .theme-clair .section-kicker { background: none !important; border: none !important; padding: 0 !important; } .theme-clair .pull-quote::before { display: none !important; } .theme-clair .pull-quote { border-left: 2pt solid var(--print-accent) !important; box-shadow: none !important; } .theme-clair .skill-group, .theme-clair .cert-list li, .theme-clair .ai-list li, .theme-clair .plus-card, .theme-clair .feature-public, .theme-clair .devices li { background: #fff !important; box-shadow: none !important; border: 0.5pt solid var(--print-border) !important; padding: 2mm !important; } .theme-clair .flow li::after { display: none !important; } .devices { gap: 2mm; margin-top: 2mm; } .devices li { padding: 1mm 2mm !important; font-size: 8pt; } }