. ========================================================= */ .skedenn-icard { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); isolation: isolate; transform-style: preserve-3d; will-change: transform; } /* retour fluide quand la souris sort (le suivi lui-même est instantané) */ .fx .skedenn-icard { transition: transform 0.6s var(--ease), box-shadow 0.4s; } .skedenn-icard.is-tilting { transition: box-shadow 0.4s; box-shadow: 0 24px 60px rgba(10, 10, 12, 0.25); } .skedenn-icard__media { aspect-ratio: 4 / 3; overflow: hidden; } .skedenn-icard__media img { width: 100%; height: 100%; object-fit: cover; /* légère sur-échelle : marge pour la parallaxe interne (translate JS) */ scale: 1.06; } .fx .skedenn-icard__media img { transition: transform 1s var(--ease), filter 0.6s, translate 0.6s var(--ease); } .skedenn-icard.is-tilting .skedenn-icard__media img { transition: transform 1s var(--ease), filter 0.6s; } .skedenn-icard:hover .skedenn-icard__media img { transform: scale(1.07); filter: brightness(0.62); } /* étiquette (catégorie) en haut à gauche */ .skedenn-icard__tag { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(14, 14, 16, 0.65); color: #fff; backdrop-filter: blur(8px); padding: 8px 14px; border-radius: 100px; opacity: 0; transform: translateY(-8px); } .fx .skedenn-icard__tag { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .skedenn-icard:hover .skedenn-icard__tag { opacity: 1; transform: translateY(0); } /* légende : titre visible, description + lien révélés au survol */ .skedenn-icard__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 24px; color: #fff; background: linear-gradient(to top, rgba(10, 10, 12, 0.85), rgba(10, 10, 12, 0.4) 60%, transparent); transform: translateY(calc(100% - 74px)); } .fx .skedenn-icard__cap { transition: transform 0.55s var(--ease); } .skedenn-icard:hover .skedenn-icard__cap { transform: translateY(0); } .skedenn-icard__cap h3 { font-family: var(--font-display); font-weight: 500; color: #fff; font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; padding-right: 60px; } .skedenn-icard__cap p { font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.75); max-width: 42ch; margin-bottom: 16px; opacity: 0; transform: translateY(10px); } .fx .skedenn-icard__cap p { transition: opacity 0.45s var(--ease) 0.08s, transform 0.45s var(--ease) 0.08s; } .skedenn-icard:hover .skedenn-icard__cap p { opacity: 1; transform: translateY(0); } .skedenn-icard__more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(10px); } .fx .skedenn-icard__more { transition: opacity 0.45s var(--ease) 0.14s, transform 0.45s var(--ease) 0.14s; } .skedenn-icard:hover .skedenn-icard__more { opacity: 1; transform: translateY(0); } /* flèche en pastille, en bas à droite */ .skedenn-icard__arrow { position: absolute; right: 20px; bottom: 20px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #0e0e10; display: grid; place-items: center; transform: scale(0) rotate(-45deg); } .fx .skedenn-icard__arrow { transition: transform 0.45s var(--ease); } .skedenn-icard:hover .skedenn-icard__arrow { transform: scale(1) rotate(0deg); } .skedenn-icard__arrow svg { width: 18px; height: 18px; } /* variante : image carrée */ .skedenn-icard--square .skedenn-icard__media { aspect-ratio: 1 / 1; } /* ========================================================= 04 · BORDURE BRILLANTE (.glow) Un trait de lumière parcourt la bordure : un grand dégradé conique tourne par transform (compositor-safe, aucun @property, aucun mask) derrière un habillage interne plein (.glow-card) qui ne laisse visible qu'un liseré de 1,5 px. Variantes : .glow--rose .glow--gold .glow--full (3 traits) ========================================================= */ .glow { position: relative; border-radius: 16px; padding: 1.5px; /* épaisseur du liseré */ overflow: hidden; isolation: isolate; --glow-c: #ffffff; /* couleur du trait */ /* halo extérieur discret */ box-shadow: 0 0 26px -10px color-mix(in srgb, var(--glow-c) 45%, transparent); } body:not(.dark-mode) .glow { --glow-c: #101010; } /* la couche lumineuse : surdimensionnée puis mise en rotation */ .glow::before { content: ""; position: absolute; inset: -150%; z-index: -1; background: conic-gradient( transparent 0 64%, color-mix(in srgb, var(--glow-c) 35%, transparent) 76%, var(--glow-c) 84%, color-mix(in srgb, var(--glow-c) 35%, transparent) 92%, transparent 100% ); } /* rotation seulement si l'environnement joue les animations (.fx) */ .fx .glow::before { animation: glow-rotate 5s linear infinite; } @keyframes glow-rotate { to { transform: rotate(1turn); } } /* bordure de repos discrète sous le trait lumineux */ .glow { background: var(--line); } /* variantes de couleur */ .glow--rose { --glow-c: #e26d9a; } .glow--gold { --glow-c: #d8b65c; } /* variante : trois traits répartis (anneau vivant) */ .glow--full::before { background: conic-gradient( var(--glow-c) 0deg, transparent 60deg, var(--glow-c) 120deg, transparent 180deg, var(--glow-c) 240deg, transparent 300deg, var(--glow-c) 360deg ); opacity: 0.5; } /* respect de prefers-reduced-motion : trait statique */ @media (prefers-reduced-motion: reduce) { .fx .glow::before { animation: none; } } /* habillage interne : couvre le centre, ne laisse que le liseré */ .glow-card { position: relative; z-index: 1; background: var(--surface); border-radius: 14.5px; padding: clamp(24px, 3vw, 40px); height: 100%; } /* boutons : wrapper pilule + bouton plein au-dessus */ .glow--pill { border-radius: 100px; display: inline-block; } .glow--pill .btn { position: relative; z-index: 1; background: var(--bg); color: var(--ink); border-color: transparent; border-radius: 100px; } .glow--pill .btn:hover { background: var(--ink); color: var(--bg); } /* ========================================================= 05 · PAGE D'AUTHENTIFICATION (.skd-auth) Connexion / inscription en deux volets : visuel à gauche, formulaire à droite. Entrée animée, champ à libellé flottant, bouton à bordure brillante, bascule mot de passe. ========================================================= */ .skd-auth { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100vh; background: var(--bg); } .skd-auth__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 96px) clamp(28px, 6vw, 110px); position: relative; min-height: 100vh; } .skd-auth__top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: clamp(26px, 3.4vw, 44px) clamp(28px, 6vw, 110px); } .skd-auth__card { width: 100%; max-width: 420px; margin: 0 auto; } .skd-auth__eyebrow { margin-bottom: 22px; } .skd-auth__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 0.98; letter-spacing: -0.03em; margin-bottom: 14px; } .skd-auth__sub { color: var(--muted); margin-bottom: 40px; max-width: 38ch; } .skd-auth__form { display: grid; gap: 26px; } /* champ à libellé flottant */ .skd-field { position: relative; } .skd-field input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 22px 40px 12px 0; font-size: 1.06rem; color: var(--ink); transition: border-color 0.4s var(--ease); } .skd-field input::placeholder { color: transparent; } .skd-field label { position: absolute; left: 0; top: 22px; pointer-events: none; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); text-transform: none; transition: transform 0.4s var(--ease), color 0.4s var(--ease), font-size 0.4s var(--ease), letter-spacing 0.4s var(--ease); } .skd-field input:focus + label, .skd-field input:not(:placeholder-shown) + label { transform: translateY(-22px); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); } .skd-field input:focus { outline: none; border-bottom-color: var(--ink); } /* trait animé sous le champ au focus */ .skd-field::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .skd-field:focus-within::after { transform: scaleX(1); } .skd-field.invalid input { border-bottom-color: #c0392b; } .skd-field .err-msg { display: none; color: #c0392b; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; margin-top: 8px; } .skd-field.invalid .err-msg { display: block; } /* bascule mot de passe */ .skd-field__toggle { position: absolute; right: 0; top: 20px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; line-height: 0; transition: color 0.3s; } .skd-field__toggle:hover { color: var(--ink); } .skd-field__toggle svg { width: 19px; height: 19px; } .skd-field__toggle .eye-off { display: none; } .skd-field__toggle.is-on .eye-on { display: none; } .skd-field__toggle.is-on .eye-off { display: block; } .skd-auth__options { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: -4px; } .skd-remember { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); -webkit-user-select: none; user-select: none; } .skd-remember input { position: absolute; opacity: 0; width: 0; height: 0; } .skd-remember__box { width: 17px; height: 17px; border: 1px solid var(--line); border-radius: 4px; display: grid; place-items: center; transition: background 0.3s, border-color 0.3s; } .skd-remember__box svg { width: 11px; height: 11px; opacity: 0; transform: scale(0.5); transition: opacity 0.25s, transform 0.25s; color: var(--bg); } .skd-remember input:checked + .skd-remember__box { background: var(--ink); border-color: var(--ink); } .skd-remember input:checked + .skd-remember__box svg { opacity: 1; transform: scale(1); } .skd-remember input:focus-visible + .skd-remember__box { outline: 2px solid var(--ink); outline-offset: 2px; } /* bouton submit pleine largeur, état chargement */ .skd-auth__submit { width: 100%; display: block; } .skd-auth__submit .arrow { transition: transform 0.4s var(--ease); } .skd-auth__submit:hover .arrow { transform: translateX(4px); } .skd-auth__submit.is-loading { pointer-events: none; } .skd-auth__submit.is-loading .btn-label, .skd-auth__submit.is-loading .arrow { opacity: 0; } .skd-auth__submit .spin { display: none; position: absolute; width: 17px; height: 17px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: skd-spin 0.7s linear infinite; } .skd-auth__submit.is-loading .spin { display: block; } @keyframes skd-spin { to { transform: rotate(1turn); } } .skd-auth__submit.is-ok { background: #1f8a5b; border-color: #1f8a5b; color: #fff; } .skd-auth__status { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); min-height: 1em; margin-top: 4px; text-align: center; } .skd-auth__status.ok { color: #1f8a5b; } .skd-auth__status.no { color: #c0392b; } /* séparateur + connexions tierces */ .skd-auth__sep { display: flex; align-items: center; gap: 16px; margin: 4px 0; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .skd-auth__sep::before, .skd-auth__sep::after { content: ""; flex: 1; height: 1px; background: var(--line); } .skd-auth__social { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .skd-social { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 100px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: transparent; cursor: pointer; transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.45s var(--ease); } .skd-social:hover { border-color: var(--ink); transform: translateY(-2px); } .skd-social svg { width: 16px; height: 16px; } .skd-auth__alt { text-align: center; color: var(--muted); font-size: 0.92rem; margin-top: 8px; } /* volet visuel */ .skd-auth__visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(40px, 4vw, 64px); } .skd-auth__visual img.skd-auth__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .skd-auth__visual::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,12,11,0.32) 0%, rgba(12,12,11,0.18) 40%, rgba(12,12,11,0.78) 100%); } .fx .skd-auth__bg { animation: skd-auth-zoom 22s var(--ease) infinite alternate; } @keyframes skd-auth-zoom { from { transform: scale(1); } to { transform: scale(1.09); } } .skd-auth__visual > * { position: relative; z-index: 2; } .skd-auth__vtop { display: flex; align-items: center; justify-content: space-between; color: #f3f3f1; } .skd-auth__vtag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243,243,241,0.7); } .skd-auth__quote { color: #f3f3f1; max-width: 22ch; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 2.8vw, 2.9rem); line-height: 1.04; letter-spacing: -0.02em; } .skd-auth__quote .mono-sm { display: block; margin-top: 22px; color: rgba(243,243,241,0.62); } /* marquee fin en bas du volet visuel */ .skd-auth__marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; border-top: 1px solid rgba(243,243,241,0.18); padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .skd-auth__marquee .mq { display: inline-flex; gap: 36px; white-space: nowrap; padding-left: 36px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(243,243,241,0.7); } .fx .skd-auth__marquee .mq { animation: skd-auth-mq 26s linear infinite; } @keyframes skd-auth-mq { to { transform: translateX(-50%); } } @media (max-width: 920px) { .skd-auth { grid-template-columns: 1fr; } .skd-auth__visual { display: none; } .skd-auth__panel { min-height: 100vh; } } @media (prefers-reduced-motion: reduce) { .fx .skd-auth__bg, .fx .skd-auth__marquee .mq { animation: none; } } /* ════════ effects.css ════════ */ /* ========================================================= SKEDENN — effects.css Composants avancés (100 % CSS natif, animés par js/effects.js) : 01 Masonry animée 02 Surlignage flouté 03 Avant / Après 04 Curseur morphing 05 Cartes modales 06 Carrousel parallaxe 07 Graphique animé Les états d'entrée masqués sont gatés sous .fx (jamais de contenu bloqué invisible). ========================================================= */ /* ---------- 01 · MASONRY ANIMÉE (.v-masonry) ---------- */ .v-masonry { position: relative; width: 100%; } .v-mitem { position: absolute; top: 0; left: 0; padding: 8px; cursor: pointer; } .fx .v-mitem { transition: transform 0.6s var(--ease), width 0.6s var(--ease), height 0.6s var(--ease), opacity 0.3s; } .v-mimg { position: relative; display: block; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: var(--surface-2); box-shadow: 0 10px 50px -10px rgba(0, 0, 0, 0.25); } .v-mimg img { width: 100%; height: 100%; object-fit: cover; } .fx .v-mimg { transition: transform 0.35s var(--ease), opacity 0.8s var(--ease), filter 0.8s var(--ease); } .fx .v-mitem:not(.is-in) .v-mimg { opacity: 0; filter: blur(10px); transform: translateY(60px); } .v-mitem.is-in .v-mimg { opacity: 1; filter: none; } .v-mitem:hover .v-mimg { transform: scale(0.95); } .v-mcap { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); } /* ---------- 02 · SURLIGNAGE FLOUTÉ (.v-blurhl) ----------

Lorem ipsum…

*/ .v-blurhl { --hl: #d6f25e; } .tpl-portfolio .v-blurhl { --hl: #f3b8cb; } .tpl-archi .v-blurhl { --hl: #b9c08a; } .fx .v-blurhl { opacity: 0.3; filter: blur(7px); transition: opacity 0.8s ease, filter 0.8s ease; } .fx .v-blurhl.is-hl { opacity: 1; filter: blur(0); } .v-blurhl mark { color: inherit; padding: 0 0.1em; background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 0; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .fx .v-blurhl mark { background-size: 0% 100%; transition: background-size 0.9s var(--ease) 0.35s; } .fx .v-blurhl.is-hl mark { background-size: 100% 100%; } /* ---------- 03 · COMPARATEUR AVANT/APRÈS (.v-compare) ---------- */ .v-compare { position: relative; overflow: hidden; border-radius: var(--radius); user-select: none; touch-action: pan-y; aspect-ratio: 16 / 9; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .v-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .v-compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); will-change: clip-path; } .v-compare__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 5; } .v-compare__line { position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; } .v-compare__btn { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #101010; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); cursor: grab; } .fx .v-compare__btn { transition: transform 0.2s ease; } .v-compare:active .v-compare__btn { transform: translate(-50%, -50%) scale(1.1); cursor: grabbing; } .v-compare__label { position: absolute; top: 1rem; z-index: 6; pointer-events: none; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(0, 0, 0, 0.55); color: #fff; padding: 7px 13px; border-radius: 6px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .v-compare__label--before { left: 1rem; } .v-compare__label--after { right: 1rem; } .v-compare__pct { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 6; font-family: var(--font-mono); font-size: 0.66rem; pointer-events: none; background: rgba(0, 0, 0, 0.65); color: #fff; padding: 5px 10px; border-radius: 6px; } /* ---------- 04 · CURSEUR MORPHING ---------- [data-cursor-morph] : l'anneau du curseur épouse l'élément survolé. */ .cursor-ring.is-morph { mix-blend-mode: normal; border-color: var(--ink); background: transparent; } /* ---------- 05 · CARTES MODALES (.v-modalcards / .v-mcard) ---------- */ .v-modalcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .v-mcard { position: relative; cursor: pointer; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line-soft); background: var(--surface-2); } .fx .v-mcard { transition: transform 0.35s var(--ease); } .v-mcard:active { transform: scale(0.98); } .v-mcard img { width: 100%; height: 100%; object-fit: cover; } .v-mcard__overlay { position: absolute; inset: auto 0 0 0; padding: 1.5rem; padding-top: 3rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.45), transparent); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .v-mcard__overlay h3 { color: #fff; font-size: 1.25rem; letter-spacing: -0.02em; } .v-mcard__plus { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); display: grid; place-items: center; color: #fff; font-size: 1.1rem; line-height: 1; } .v-mcard:hover .v-mcard__plus { background: rgba(255, 255, 255, 0.35); } .v-modal-backdrop { position: fixed; inset: 0; z-index: 900; opacity: 0; visibility: hidden; cursor: pointer; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); } .fx .v-modal-backdrop { transition: opacity 0.4s ease, backdrop-filter 0.4s ease, visibility 0s 0.4s; } .v-modal-backdrop.active { opacity: 1; visibility: visible; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .fx .v-modal-backdrop.active { transition: opacity 0.4s ease, backdrop-filter 0.4s ease, visibility 0s; } .v-modal { position: fixed; inset: 0; z-index: 901; display: grid; place-items: center; padding: 2rem; visibility: hidden; pointer-events: none; } .v-modal.active { visibility: visible; pointer-events: auto; } .v-modal__card { width: 100%; max-width: 46rem; max-height: 84vh; overflow: auto; border-radius: 16px; background: var(--surface); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); transform: scale(0.92) translateY(18px); opacity: 0; } .fx .v-modal__card { transition: transform 0.45s var(--ease), opacity 0.4s ease; } .v-modal.active .v-modal__card { transform: none; opacity: 1; } .v-modal__media { position: relative; height: min(46vh, 380px); } .v-modal__media img { width: 100%; height: 100%; object-fit: cover; } .v-modal__title { position: absolute; left: 1.5rem; bottom: 1.25rem; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); } .v-modal__close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; backdrop-filter: blur(8px); display: grid; place-items: center; font-size: 1rem; } .fx .v-modal__close { transition: transform 0.3s var(--ease), background 0.3s; } .v-modal__close:hover { transform: rotate(90deg); background: rgba(0, 0, 0, 0.7); } .v-modal__desc { padding: 1.8rem 2rem 2.2rem; } .v-modal__desc p { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); } /* ---------- 06 · CARROUSEL PARALLAXE (.v-carousel) ---------- */ .v-carousel { position: relative; overflow: hidden; cursor: grab; user-select: none; touch-action: pan-y; } .v-carousel:active { cursor: grabbing; } .v-carousel__track { display: flex; gap: clamp(16px, 2.4vw, 32px); will-change: transform; padding-inline: 8px; } .v-cpanel { flex: none; width: min(420px, 72vw); aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--surface-2); position: relative; } .v-cpanel img { width: 116%; height: 100%; object-fit: cover; margin-left: -8%; will-change: transform; pointer-events: none; } .v-cpanel .v-mcap { z-index: 2; } .v-carousel__progress { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); height: 2px; width: 8rem; background: color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 999px; overflow: hidden; pointer-events: none; } .v-carousel__bar { height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; } /* ---------- 07 · GRAPHIQUE ANIMÉ (.v-graph) ---------- */ .v-graph { position: relative; color: var(--ink); } .v-graph__svg { width: 100%; height: 100%; display: block; } .fx .v-graph__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s ease 0.2s; } .fx .v-graph.is-in .v-graph__line { stroke-dashoffset: 0; } .fx .v-graph__dot { opacity: 0; transition: opacity 0.4s ease; } .fx .v-graph.is-in .v-graph__dot { opacity: 1; } .fx .v-graph__fill { opacity: 0; transition: opacity 0.8s ease 1.7s; } .fx .v-graph.is-in .v-graph__fill { opacity: 1; } .v-graph__tip { position: absolute; z-index: 5; pointer-events: none; visibility: hidden; transform: translate(-50%, -130%); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; white-space: nowrap; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15); font-family: var(--font-mono); font-size: 0.72rem; } .v-graph__tip.show { visibility: visible; } .v-graph__tip .l { display: block; color: var(--muted); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; } /* ════════ templates.css ════════ */ /* ========================================================= SKEDENN — templates.css Skins par template (classe sur ) — directions visuelles inspirées des trois ambiances : olive éditorial, rose créatif, crème produit. ========================================================= */ /* ========================================================= 01 · STUDIO D'ARCHITECTURE — olive profond, typo monumentale ========================================================= */ .tpl-archi { --bg: #2f342a; --surface: #383e31; --surface-2: #3c4236; --ink: #e9e7da; --ink-soft: #cfcdbd; --muted: #9da08c; --line: rgba(233, 231, 218, 0.16); --line-soft: rgba(233, 231, 218, 0.09); --accent: #e9e7da; --invert-bg: #e9e7da; --invert-ink:#262a20; } body.dark-mode.tpl-archi { --bg: #1d2019; --surface: #262a20; --surface-2: #2b3024; --ink: #e9e7da; --ink-soft: #cfcdbd; --muted: #8e9180; --line: rgba(233, 231, 218, 0.14); --line-soft: rgba(233, 231, 218, 0.08); --invert-bg: #e9e7da; --invert-ink:#1d2019; } .tpl-archi .skedenn-hero__title { text-transform: uppercase; font-weight: 600; letter-spacing: -0.015em; line-height: 0.92; font-size: clamp(2.6rem, 9.5vw, 10rem); } .tpl-archi .skedenn-hero__title em { font-style: normal; color: var(--muted); } .tpl-archi .skedenn-service__name { text-transform: uppercase; font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.6rem); } .tpl-archi .marquee__track span { text-transform: uppercase; font-weight: 600; } .tpl-archi ::selection { background: var(--ink); color: var(--bg); } .tpl-archi .skedenn-hero__badge { background: var(--invert-bg); color: var(--invert-ink); box-shadow: 0 18px 50px rgba(0,0,0,0.35); } .tpl-archi .skedenn-hero__badge .l { color: rgba(38,42,32,0.65); } .tpl-archi .btn { background: var(--ink); color: var(--bg); border-color: var(--ink); } .tpl-archi .btn:hover { background: transparent; color: var(--ink); } /* ========================================================= 02 · PORTFOLIO CRÉATIF — hero rose, accents framboise ========================================================= */ .tpl-portfolio { --radius: 2px; --folio-rose-bg: #f6dce3; --folio-rose-ink: #b3265a; --folio-rose-soft: #efc3cf; --accent: #b3265a; } body.dark-mode.tpl-portfolio { --folio-rose-bg: #2a1118; --folio-rose-ink: #f08bab; --folio-rose-soft: #46202c; } .tpl-portfolio .folio-hero { background: var(--folio-rose-bg); padding-top: var(--nav-h); position: relative; overflow: hidden; } .tpl-portfolio .folio-hero .skedenn-hero__title { color: var(--folio-rose-ink); font-weight: 600; letter-spacing: -0.04em; } .tpl-portfolio .folio-hero .skedenn-hero__title em { font-style: italic; font-weight: 400; } .tpl-portfolio .folio-hero .lead { color: color-mix(in srgb, var(--folio-rose-ink) 78%, var(--ink)); } .tpl-portfolio .folio-hero .eyebrow { color: var(--folio-rose-ink); } /* motifs géométriques du hero (cercles) */ .tpl-portfolio .folio-hero::before, .tpl-portfolio .folio-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; border: 1.5px solid color-mix(in srgb, var(--folio-rose-ink) 38%, transparent); } .tpl-portfolio .folio-hero::before { width: 420px; height: 420px; left: -160px; top: -120px; } .tpl-portfolio .folio-hero::after { width: 260px; height: 260px; left: 120px; top: 180px; background: color-mix(in srgb, var(--folio-rose-soft) 60%, transparent); border: none; } .tpl-portfolio .folio-hero .skedenn-hero { position: relative; z-index: 1; } .tpl-portfolio .folio-hero .btn { background: var(--folio-rose-ink); border-color: var(--folio-rose-ink); color: var(--folio-rose-bg); } .tpl-portfolio .folio-hero .btn:hover { background: transparent; color: var(--folio-rose-ink); } .tpl-portfolio .filter-btn.active { background: var(--folio-rose-ink); border-color: var(--folio-rose-ink); color: #fff; } .tpl-portfolio .filter-btn:hover { border-color: var(--folio-rose-ink); color: var(--folio-rose-ink); } .tpl-portfolio .skedenn-project__media { aspect-ratio: 1 / 1; } .tpl-portfolio .skedenn-project--tall .skedenn-project__media { aspect-ratio: 3 / 4; } .tpl-portfolio .skedenn-project__cat { color: var(--folio-rose-ink); } .tpl-portfolio .marquee--outline span { -webkit-text-stroke-color: var(--folio-rose-ink); } /* bande sombre (stats / expérience) */ .tpl-portfolio .folio-dark { background: #17181a; color: #f0efed; --ink: #f0efed; --ink-soft: #c9c8c4; --muted: #8d8c88; --line: rgba(240,239,237,0.16); --line-soft: rgba(240,239,237,0.08); } body.dark-mode.tpl-portfolio .folio-dark { background: #101113; } /* ========================================================= 03 · LANDING SAAS — crème, sections roses douces, arrondis ========================================================= */ .tpl-saas { --radius: 18px; --bg: #f6f3ef; --surface: #fdfcfa; --surface-2: #efe6e4; --saas-tint: #f3e3e4; --saas-tint-2: #ece5f0; } body.dark-mode.tpl-saas { --saas-tint: #1f1a1b; --saas-tint-2: #1c1820; --surface-2: #1c1c1c; } .tpl-saas .skedenn-section--tint { background: var(--saas-tint); border-radius: clamp(18px, 3vw, 40px); margin-inline: clamp(8px, 1.2vw, 20px); } .tpl-saas .skedenn-section--tint + .skedenn-section--tint { background: var(--saas-tint-2); } .tpl-saas .skedenn-hero__title { letter-spacing: -0.045em; font-weight: 600; } .tpl-saas .skedenn-card { border-radius: var(--radius); border-color: transparent; box-shadow: 0 1px 2px rgba(20,16,14,0.05); } .tpl-saas .skedenn-card:hover { border-color: var(--ink); } .tpl-saas .media, .tpl-saas .skedenn-project__media { border-radius: var(--radius); } .tpl-saas .tag { background: var(--surface); } .tpl-saas .skedenn-faq { max-width: none; } .tpl-saas .skedenn-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 80px); align-items: start; } @media (max-width: 860px) { .tpl-saas .skedenn-faq__grid { grid-template-columns: 1fr; } } /* ========================================================= Accueil du thème + barre de démo ========================================================= */ .demo-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; gap: 6px; padding: 6px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 100px; box-shadow: 0 14px 40px rgba(0,0,0,0.16); } .demo-bar a { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 16px; border-radius: 100px; color: var(--muted); transition: background 0.3s, color 0.3s; white-space: nowrap; } .demo-bar a:hover { color: var(--ink); } .demo-bar a.active { background: var(--ink); color: var(--bg); } @media (max-width: 560px) { .demo-bar a { padding: 9px 12px; font-size: 0.58rem; } } .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 36px); } .theme-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.5s var(--ease), border-color 0.4s; background: var(--surface); } .theme-card:hover { transform: translateY(-8px); border-color: var(--ink); } .theme-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); position: relative; } .theme-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .theme-card:hover .theme-card__media img { transform: scale(1.06); } .theme-card__num { position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; color: #fff; mix-blend-mode: difference; } .theme-card__body { padding: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; } .theme-card__body h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; } .theme-card__body .skedenn-project__cat { display: block; margin-top: 8px; } .theme-card__arrow { transition: transform 0.4s var(--ease); } .theme-card:hover .theme-card__arrow { transform: translate(4px, -4px); } @media (max-width: 820px) { .theme-grid { grid-template-columns: 1fr; } } /* vignettes colorées de l'accueil (sans photo) */ .theme-card__media--archi { background: #31362b; display: grid; place-items: center; } .theme-card__media--folio { background: #f6dce3; display: grid; place-items: center; } .theme-card__media--saas { background: #f3e3e4; display: grid; place-items: center; } /* ========================================================= SKINS AU NIVEAU SECTION (templates Elementor importables) Les JSON appliquent la classe du skin (tpl-archi / tpl-portfolio / tpl-saas) sur chaque section Elementor : tout fonctionne sans choisir le gabarit de page. Les gabarits (template-archi.php…) posent en plus la classe sur pour une fidélité totale. Les variantes (folio-hero, folio-dark, skedenn-section--tint) se placent sur la COLONNE intérieure — les sélecteurs descendants du skin s'appliquent alors tels quels. ========================================================= */ .tpl-archi:not(body), .tpl-saas:not(body) { background: var(--bg); color: var(--ink); } .tpl-portfolio:not(body) { color: var(--ink); } /* Mode sombre — équivalents descendants des skins body.dark-mode.tpl-* */ body.dark-mode .tpl-archi:not(body) { --bg: #1d2019; --surface: #262a20; --surface-2: #2b3024; --muted: #8e9180; --line: rgba(233, 231, 218, 0.14); --line-soft: rgba(233, 231, 218, 0.08); --invert-bg: #e9e7da; --invert-ink:#1d2019; } body.dark-mode .tpl-portfolio:not(body) { --folio-rose-bg: #2a1118; --folio-rose-ink: #f08bab; --folio-rose-soft: #46202c; } body.dark-mode .tpl-saas:not(body) { --bg: inherit; /* reprend le fond sombre global */ --surface: inherit; --surface-2: #1c1c1c; --saas-tint: #1f1a1b; --saas-tint-2: #1c1820; }