From e58e799edd8dfd8c8026b857a86738dcadf0cf62 Mon Sep 17 00:00:00 2001 From: Whykioh Date: Sat, 11 Jul 2026 03:46:13 +0200 Subject: [PATCH] Fix Btn issues --- css/style.css | 170 +++++++++++++++++++++++++++----------------------- index.php | 2 +- 2 files changed, 94 insertions(+), 78 deletions(-) diff --git a/css/style.css b/css/style.css index 4d0cefd..e714dca 100644 --- a/css/style.css +++ b/css/style.css @@ -1,18 +1,16 @@ -/* Variables pour les couleurs */ :root { --bg-color: #050b16; --deep-blue: #0a192f; --glass-light: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.25); - --accent-yellow: #fcd53f; /* Jaune plus lumineux */ - --accent-blue: #3ecaf8; /* Bleu plus lumineux pour les bordures */ + --accent-yellow: #fcd53f; + --accent-blue: #3ecaf8; } body { font-family: 'Noto Sans', sans-serif; background-color: var(--bg-color); - /* Arrière-plan complexe pour rendre la réfraction visible */ - background-image: + background-image: radial-gradient(at 10% 10%, rgba(10, 25, 47, 0.8) 0px, transparent 50%), radial-gradient(at 90% 90%, rgba(62, 202, 248, 0.15) 0px, transparent 50%), linear-gradient(135deg, #050b16 0%, #1a3c6f 100%); @@ -22,129 +20,148 @@ body { padding: 20px; } -/* Style de base pour tous les éléments "verre" */ -.glass-effect { - background: var(--glass-light); +/* --- Conteneurs principaux avec Réfraction --- */ +.container { + background: rgba(10, 25, 47, 0.08); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); - border-radius: 30px; /* Bords plus adoucis */ + border-radius: 30px; border: 1px solid var(--glass-border); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); position: relative; z-index: 1; overflow: hidden; + width: 80%; + margin: 40px auto; + padding: 40px; } -/* Le cœur de la réfraction : un pseudo-élément qui déforme l'arrière-plan */ -.glass-effect::before { +/* Le cœur de la réfraction : seulement pour .container */ +.container::before { content: ''; position: absolute; - top: 0; left: 0; right: 0; bottom: 0; - /* Copie l'arrière-plan de la page */ - background: inherit; - /* Applique un filtre de distorsion (ici une légère ondulation) */ + top: 0; + left: 0; + right: 0; + bottom: 0; + background: inherit; filter: blur(5px) brightness(1.1) contrast(0.9); - /* Décale légèrement le contenu pour l'effet de réfraction */ - transform: scale(1.05) translate(-2px, -2px); + transform: scale(1.05) translate(-2px, -2px); z-index: -1; border-radius: inherit; } -/* Application du style aux conteneurs */ -.container, div.footer, .video-container { - @extend .glass-effect; /* Si vous utilisez SASS, sinon copier les propriétés */ - /* Propriétés copiées pour le rendu final : */ - background: rgba(10, 25, 47, 0.08); - backdrop-filter: blur(20px) saturate(180%); - -webkit-backdrop-filter: blur(20px) saturate(180%); +/* --- Footer : style simplifié (sans réfraction) pour éviter le cadre --- */ +div.footer { + background: rgba(10, 25, 47, 0.2); /* Fond un peu plus opaque pour compenser */ + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); border-radius: 30px; - border: 1px solid rgba(255, 255, 255, 0.25); - box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); + border: 1px solid var(--glass-border); + /* Pas d'ombre, pas de ::before de réfraction */ position: relative; - z-index: 1; - overflow: hidden; - width: 80%; - margin: 40px auto; /* Espacement augmenté */ - padding: 40px; + margin: 40px auto; + padding: 20px; + display: flex; + justify-content: center; + align-items: center; } -.container::before, div.footer::before, .video-container::before { - /* Pseudo-élément de réfraction appliqué */ - content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: inherit; filter: blur(5px) brightness(1.1) contrast(0.9); - transform: scale(1.05) translate(-2px, -2px); z-index: -1; border-radius: inherit; -} - -/* Cas spécifique pour la vidéo (pas de padding-bottom, on fixe la taille) */ +/* --- Video Container : PROPRE 16:9 --- */ .video-container { - padding: 0; + margin: 40px auto; + width: 80%; + /* IMPORTANT : On garde le ratio 16:9 et on supprime la réfraction */ + position: relative; + overflow: hidden; height: 0; - padding-bottom: 56.25%; + padding-bottom: 56.25%; /* Ratio 16:9 */ + border-radius: 25px; + border: 1px solid var(--glass-border); + background: rgba(0, 0, 0, 0.5); + /* PAS de ::before de réfraction pour ne pas casser le ratio ni créer de cadre */ } .video-container iframe { position: absolute; - top: 0; left: 0; width: 100%; height: 100%; - border: none; /* Suppression de la bordure de l'iframe */ + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} + +/* --- Header & Logo --- */ +header { + text-align: left; + margin-bottom: 40px; + padding-left: 10%; +} + +.logo { + /* Logo beaucoup plus gros */ + height: 128px; + width: 128px; + display: inline-block; + vertical-align: middle; + margin-right: 20px; + /* Style verre */ + background: var(--glass-light); + backdrop-filter: blur(10px); + border-radius: 25px; + border: 1px solid var(--glass-border); + padding: 10px; +} + +.title { + display: inline-block; + /* Titre ajusté en conséquence */ + font-size: 64px; + line-height: 128px; /* Aligné sur la hauteur du logo */ + vertical-align: middle; + color: #fff; + font-weight: 800; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); +} + +/* --- Navigation (inchangé, parfait selon vos dires) --- */ +.nav { + text-align: center; + margin: 40px 0; } -/* Navigation : Style Bouton Liquide 3D */ .nav a { text-decoration: none; color: #fff; padding: 15px 35px; margin: 0 10px; - - /* Bordure déformée et animée (technique border-image) */ border: 4px solid transparent; border-image: repeating-linear-gradient(45deg, var(--accent-yellow) 0%, var(--accent-blue) 10%, var(--accent-yellow) 20%) 1; - border-radius: 50px; /* Forme pilule */ - + border-radius: 50px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); - - /* Effet de biseau interne pour le côté 3D */ - box-shadow: + box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.3); - transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); font-weight: 600; display: inline-block; } .nav a:hover { - /* Au survol : le bouton s'illumine et la bordure "coule" plus vite */ background-color: var(--accent-yellow); color: var(--deep-blue); - border-color: transparent; /* Cache la bordure d'origine */ - box-shadow: - 0 0 30px var(--accent-yellow), /* Glow externe */ - inset 0 0 10px rgba(255, 255, 255, 0.5); /* Highlight interne */ - transform: translateY(-3px); /* Lévitation */ + border-color: transparent; + box-shadow: + 0 0 30px var(--accent-yellow), + inset 0 0 10px rgba(255, 255, 255, 0.5); + transform: translateY(-3px); cursor: pointer; } -header { text-align: left; margin-bottom: 40px; } - -.logo { - height: 60px; width: 60px; - display: inline-block; vertical-align: middle; margin-right: 20px; - /* Le logo est lui-même un élément de verre */ - @extend .glass-effect; - padding: 5px; - border-radius: 15px; -} - -.title { - display: inline-block; font-size: 56px; line-height: 60px; vertical-align: middle; - color: #fff; font-weight: 800; - text-shadow: 0 2px 10px rgba(0,0,0,0.5); -} - -/* Image Flash : Effet de zoom avec ombre colorée */ +/* --- Image Flash --- */ img.flash { display: inline-block; width: 128px; @@ -155,6 +172,5 @@ img.flash { img.flash:hover { width: 800px; - /* L'ombre devient un halo lumineux lors de l'agrandissement */ filter: drop-shadow(0 10px 30px var(--accent-yellow)); } \ No newline at end of file diff --git a/index.php b/index.php index e0e0c89..a04441f 100644 --- a/index.php +++ b/index.php @@ -2,7 +2,7 @@ - + Whykioh.fr - Mon Portefolio