:root { color-scheme: dark; --white: #fff; /* var(--white) */ --black: #000; /* var(--black) */ --black-rgba: 0,0,0; /* var(--black-rgba) */ --white-rgba: 255,255,255; --containerbg: #0e0f0e; /* var(--containerbg) */ --bg-gray: #0c0c0c; /* var(--bg-gray) Background Color */ --bg-gray-1: #111312; /* var(--bg-gray-1) Light Gray */ --border-gray-1: #353535; /* var(--border-gray-1) Light Gray */ --light-gray-1: #8ea2ab; /* var(--light-gray-1) Hover On Click Text */ --light-gray-2: #414d55; /* var(--light-gray-2) Light Gray H1 */ --list-text-1: #6c7c82; /* var(--list-text-1) Light Gray H1 */ --click-bg: #242826; /* var(--click-bg) Light Gray Links etc */ --btn-img: #24292b; /* var(--btn-img) Btn Default Clr */ --btn-click-img: #4c565a; /* var(--btn-click-img) Btn On Click Clr */ --zoom_grade-1: rgba(128, 128, 0, 0.2); /* var(--zoom_grade-1) Btn Default Clr */ --zoom_grade-2: rgba(128, 0, 0, 0.2); /* var(--zoom_grade-2) Btn Default Clr */ --row-odd: #181c1e; --filter_blur: 2rem; --anim_time: 0.3s; /* THE NEW */ --white-rgb: 255,255,255; /* var(--white) */ --transparent: rgba(0,0,0,0); --white_05:rgba(var(--white-rgb), 0.5); /* BG */ /* GENERAL */ --border_radius:1rem; /* FONT SIZES */ --fs_10: clamp(10px, 1.22vw, 1rem); --fs_12: clamp(12px, 1.42vw, 1.2rem); --fs_14: clamp(14px, 1.4vw, 1.4rem); --fs_16: clamp(12px, 1.6vw, 1.6rem); --fs_18: clamp(14px, 1.8vw, 1.8rem); --fs_24: clamp(16px, 2.4vw, 2.4rem); --fs_30: clamp(18px, 3vw, 3rem); --fs_36: clamp(22px, 3.6vw, 3.6rem); --fs_48: clamp(20px, 4.8vw, 4.8rem); --fs_55: clamp(22px, 5.5vw, 5.5rem); --fs_60: clamp(25px, 6vw, 6rem); --fs_72: clamp(40px, 7.2vw, 7.2rem); --demo_bg: rgba(255,255,255,0); /* COLORS v1 */ --change_rgb_b: 0,0,0; --change_rgb_w: 255,255,255; --change_hex_b:#000000; /* BG_PIECES */ --noise_bg: url("../../img/noise.png"); --noise_blend: multiply; --footer_transition:var(--change_rgb_b); --bg_color_1: 104,20,141; --bg_box_bg:rgba(var(--bg_color_1), 0.2); --bg_node_bg:radial-gradient(circle, rgba(var(--bg_color_1),1) 0%, rgba(var(--bg_color_1),0.5) 25%, rgba(var(--bg_color_1),0.1) 45% , rgba(var(--bg_color_1),0) 70% ); /* VIDEO */ --video_mask: linear-gradient(-90deg,rgba(var(--product_bg_b), 0) 5%, rgba(var(--product_bg_b), 0.79) 19%, rgba(var(--product_bg_b), 1) 30%, rgba(var(--product_bg_b), 0.79) 40%, rgba(var(--product_bg_b), 0) 61%); --video_mask_reverse: linear-gradient(-90deg,rgba(var(--product_bg_b), 1) 5%, rgba(var(--product_bg_b), 0.21) 19%, rgba(var(--product_bg_b), 0) 25%, rgba(var(--product_bg_b), 0.21) 35%, rgba(var(--product_bg_b), 1) 50%); /* SCROLL COLORS */ --scroll_bg:rgba(var(--change_rgb_b),1); --scroll_shadow:rgba(var(--change_rgb_b),.3); --scroll_button:rgba(var(--change_rgb_w),1); /* BG COLORS */ --tile_color:rgba( 255,255,255,1); --main_bg:var(--change_rgb_b); /* CARDS */ /* --bg_color_1:0,128,255; /* BG COLOR SETTER */ --card_bg:#0c1323; /* BG COLOR SETTER */ --card_time_bg:#000; /* BG COLOR SETTER */ --card_overlay:0,0,0; /* BG COLOR SETTER */ --card_holder_bg:0,0,0; --card_border:#0c1323; /* --bg_node_bg:radial-gradient(circle, rgba(var(--bg_color_1),0.55) 0%, rgba(var(--bg_color_1),0.1) 45% , rgba(var(--bg_color_1),0) 70% ); */ /* PRODUCTS */ --product_bg_b: 0,0,0; --black-10: rgba(var(--change_rgb_b), 0.1); /* var(--black-10) */ --black-25: rgba(var(--change_rgb_b), 0.25); /* var(--black-25) */ --black-50: rgba(var(--change_rgb_b), 0.5); /* var(--black-50) */ --black-60: rgba(var(--change_rgb_b), 0.5); /* var(--black-50) */ --black-80: rgba(var(--change_rgb_b), 0.8); /* var(--black-50) */ --address_bg:rgba(var(--change_rgb_b),0.8); --search_bg:rgba(var(--change_rgb_b),0.8); --black_bg:rgba(var(--change_rgb_b),1); --white_bg:rgba(var(--change_rgb_w),1); /* BORDERS */ --border_white:rgba(var(--change_rgb_w),1); --border_red:#e74c3c; /* ICONS */ --menu_button_fill:rgba(var(--change_rgb_w),1); /* HEADER */ --header_bg:rgba(var(--change_rgb_b),0.6); /* TEXT COLORS */ --text-color: #cccccc; --bold: #cccccc; --light_text: rgba(var(--change_rgb_w),1); --quote_tags: rgba(var(--change_rgb_w),1); --url: #e53731; --url_hover: rgba(var(--change_rgb_w),1); /* INPUTS */ --input_bg:#a8a8a8; --input_color: var(--black); --btn_red: #e53731; /* INPUTS Sub Class */ --input_type_2_bg: #111111; --input_type_2_color: var(--text-color); /* IMAGE */ --filter_img: brightness(0) invert(1) contrast(1000%) saturate(0); --footer_menu_bg: var(--header_bg); } :root[data-color-scheme="light"] { color-scheme: light; /* SCROLL COLORS */ --change_rgb_b: 255,255,255; --change_rgb_w: 0,0,0; --change_hex_b:#FFFFFF; /* BG COLORS */ --noise_bg: url("../../img/noise_w.png"); --noise_blend: multiply; --bg_color_1:46,46,46; --bg_box_bg:rgba(var(--bg_color_1), 0.1); --bg_node_bg: radial-gradient(circle, rgba(var(--bg_color_1),0.5) 0%, rgba(var(--bg_color_1),0.1) 45%, rgba(var(--bg_color_1),0) 70%); --footer_transition: 255,255,255; /* TEXT COLORS */ --text-color: #333333; --input_type_2_bg: #eeeeee; --filter_img: brightness(0) contrast(1000%) saturate(0); --scroll_bg:rgba(var(--bg_color_1),1); --scroll_shadow:rgba(var(--change_rgb_b),.3); --scroll_button:rgba(var(--change_rgb_b),1); } @-moz-document url-prefix() { * { scrollbar-width: thin; scrollbar-color: var(--scroll_button) var(--scroll_bg); } } *::-webkit-scrollbar { width: 5px; border-radius: 2px; } *::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px var(--scroll_bg); background-color: var(--scroll_bg); } *::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px var(--scroll_shadow); background-color: var(--scroll_button); }