/* Theme Name: Kamillou - BETA Theme URI: https://kamillou.fr Author: Kamillou Version: 0.1.1 Text Domain: kamillou */ /* ========================================================= ROOT ========================================================= */ :root{ --kam-bg:#f5f5f7; --kam-text:#111111; --kam-purple:#772ce8; --kam-black:#232329; --kam-red:#c30000; } /* ========================================================= DARK MODE ========================================================= */ body.kamillou-debug-dark{ --kam-bg:#050505; --kam-text:#ffffff; } /* ========================================================= LIGHT MODE ========================================================= */ body.kamillou-debug-light{ --kam-bg:#f5f5f7; --kam-text:#111111; } /* ========================================================= RESET ========================================================= */ *{ margin:0; padding:0; box-sizing:border-box; } /* ========================================================= GLOBAL ========================================================= */ html, body, #page, .site, .site-content, .site-main, .content-area, main{ width:100%; min-height:100vh; overflow-x:hidden; background:var(--kam-bg) !important; color:var(--kam-text) !important; font-family: Arial, sans-serif; transition: background .25s ease, color .25s ease; } /* ========================================================= REMOVE WORDPRESS / ASTRA ========================================================= */ .ast-container, .ast-plain-container, .ast-separate-container, .ast-separate-container #primary, .wp-site-blocks, .wp-block-post-content, .wp-block-group, .wp-block-columns, .wp-block-column, .is-layout-constrained, .entry-content, .page-content, article, section, div{ background:transparent !important; border:none !important; outline:none !important; box-shadow:none !important; } /* ========================================================= REMOVE USELESS ========================================================= */ #colophon, .entry-title, .page-title{ display:none !important; } /* ========================================================= CONTENT ========================================================= */ .page-content, .entry-content{ max-width:1100px; margin:60px auto; padding:0 20px; } /* ========================================================= TEXT ========================================================= */ body, p, li, strong, h1, h2, h3, h4, h5, h6{ color:var(--kam-text) !important; opacity:1 !important; } p, li{ font-size:16px; line-height:1.8; } /* ========================================================= LIGHT MODE TEXT ========================================================= */ body:not(.kamillou-debug-dark), body:not(.kamillou-debug-dark) p, body:not(.kamillou-debug-dark) li, body:not(.kamillou-debug-dark) strong, body:not(.kamillou-debug-dark) h1, body:not(.kamillou-debug-dark) h2, body:not(.kamillou-debug-dark) h3, body:not(.kamillou-debug-dark) h4{ color:#111111 !important; } /* ========================================================= LINKS ========================================================= */ a{ text-decoration:none; transition:.2s ease; } .page-content a{ color:var(--kam-purple) !important; } /* ========================================================= HEADER ========================================================= */ .custom-header{ display:flex; align-items:center; justify-content:space-between; gap:40px; padding:25px 40px; max-width:1700px; margin:0 auto; } /* ========================================================= LOGO ========================================================= */ .logo-area{ display:flex; align-items:center; gap:20px; } .logo-area img{ width:72px; height:auto; } .logo-text{ display:flex; flex-direction:column; } .logo-text h1{ font-size:64px; font-weight:900; color:var(--kam-text) !important; } /* ========================================================= LOGO SUBTEXT ========================================================= */ .logo-text p{ display:flex; align-items:center; gap:10px; margin-top:6px; color:var(--kam-text) !important; } /* ========================================================= SUBTEXT ONLY ========================================================= */ .logo-subtext{ opacity:.75; } /* ========================================================= BETA BADGE ========================================================= */ span.kamillou-beta-badge{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:7px 13px !important; border-radius:999px !important; font-size:12px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.2px !important; white-space:nowrap !important; vertical-align:middle !important; background:#c30000 !important; background-color:#c30000 !important; background-image:none !important; border:none !important; opacity:1 !important; filter:none !important; box-shadow: 0 6px 16px rgba(195,0,0,.16) !important; color:#ffffff !important; } span.kamillou-beta-badge, span.kamillou-beta-badge *{ color:#ffffff !important; } /* ========================================================= MENU ========================================================= */ .custom-menu{ display:flex; align-items:center; justify-content:flex-end; gap:12px; flex:1; overflow-x:auto; scrollbar-width:none; } .custom-menu::-webkit-scrollbar{ display:none; } /* ========================================================= MENU BUTTONS ========================================================= */ .custom-menu a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:12px 18px !important; border-radius:14px !important; white-space:nowrap !important; font-size:14px !important; font-weight:700 !important; color:#ffffff !important; background-color:#772ce8 !important; background-image:none !important; border:none !important; box-shadow: 0 8px 20px rgba(119,44,232,.35) !important; } /* ========================================================= HOME BUTTON ========================================================= */ .custom-menu a.home-btn{ background-color:#111111 !important; background-image:none !important; color:#ffffff !important; box-shadow: 0 8px 20px rgba(0,0,0,.35); } /* ========================================================= MENU HOVER ========================================================= */ .custom-menu a:hover{ transform:translateY(-2px); opacity:.92; filter:none !important; } /* ========================================================= TWITCH WRAPPER ========================================================= */ .twitch-wrapper{ display:flex; flex-direction:column; align-items:center; padding:20px 20px 60px; } /* ========================================================= TWITCH PLAYER ========================================================= */ .twitch-video{ width:100%; display:flex; justify-content:center; } .twitch-video iframe{ width:1400px; max-width:95vw; height:720px; border:none; border-radius:24px; background:#000; box-shadow: 0 20px 50px rgba(0,0,0,.35); } /* ========================================================= STREAM BUTTONS ========================================================= */ .stream-buttons{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px; margin-top:24px; } /* ========================================================= ALL STREAM BUTTONS ========================================================= */ .stream-buttons a{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:14px; font-size:14px; font-weight:700; color:#ffffff !important; text-decoration:none !important; transition: transform .20s ease, opacity .20s ease, box-shadow .20s ease, background .20s ease; } /* ========================================================= TWITCH BUTTON ========================================================= */ .twitch-sub{ background-color:#772ce8 !important; background-image:none !important; color:#ffffff !important; box-shadow: 0 8px 20px rgba(119,44,232,.35) !important; } /* ========================================================= PATREON BUTTON ========================================================= */ .patreon-btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:14px; font-size:14px; font-weight:700; text-decoration:none !important; color:#ffffff !important; background:#c30000 !important; background-color:#c30000 !important; background-image:none !important; border:none !important; box-shadow: 0 8px 20px rgba(195,0,0,.22) !important; } /* ========================================================= PATREON HOVER ========================================================= */ .patreon-btn:hover{ background:#d10000 !important; background-color:#d10000 !important; background-image:none !important; color:#ffffff !important; opacity:1 !important; transform:translateY(-2px); box-shadow: 0 10px 24px rgba(195,0,0,.28) !important; } /* ========================================================= PATREON ACTIVE ========================================================= */ .patreon-btn:active{ transform:scale(.98); } /* ========================================================= CHAT BUTTON ========================================================= */ .chat-btn{ background-color:#232329 !important; background-image:none !important; color:#ffffff !important; box-shadow: 0 8px 20px rgba(0,0,0,.35) !important; }