/** * @project Pure CSS * @created 2022-09-18 13:20:06 * @modified 2022-09-18 13:20:06 **/ /*======================================== CUSTOM PROPERTIES ( VARIABLES ) ========================================*/ @charset "UTF-8"; /*@import "compass/css3";*/ @import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap"); @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); @import url(https://fonts.googleapis.com/css?family=Montserrat); /**/ @import url(https://fonts.googleapis.com/icon?family=Material+Icons); /* Holographic Style Scramble */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); /* Start Custom Fonts CSS */ /*- arabic font */ @font-face { font-family: En; src: url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format("woff2"), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format("woff") } @font-face { font-family: Kufi; src: url(data:;base64,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) format("woff2") } @font-face { font-family: 'Droid Arabic Naskh'; src: url('../fonts/DroidArabicNaskh.woff2') format('woff2'), url('../fonts/DroidArabicNaskh.woff') format('woff'), url('../fonts/DroidArabicNaskh.ttf') format('ttf'), url('../fonts/DroidArabicNaskh.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Daground Regular'; src: url('../fonts/Daground.otf') format('otf'), url('../fonts/Daground.ttf') format('ttf'), url('../fonts/Daground.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Paranoid'; font-style: normal; font-weight: 400; font-display: auto; src: url('../fonts/Paranoid-Orange.ttf') format('truetype'); } /* End Custom Fonts CSS */ /*--------------------------------------- CUSTOM PROPERTIES -----------------------------------------*/ * { margin: 0; padding: 0; } ::-moz-selection { background: #4C555F; color: #fff } ::selection { background: #4C555F; color: #fff } ::-webkit-scrollbar { border-radius: 2px; width: 8px; height: 8px } ::-webkit-scrollbar-thumb { background-color: #69A2F9; background-color: #f23849; } ::-webkit-scrollbar-track { background-color: #F1F5F9; background-color: #696969; } ::marker { unicode-bidi: isolate; font-variant-numeric: tabular-nums; text-transform: none; text-indent: 0px !important; text-align: start !important; text-align-last: start !important; } /*=============================== CSS Variables for Themes ===============================*/ .dark:root { color-scheme: light dark; --dark-color: #000; --white-color: #FFFFFF; --input-bg-color: #272a31; --body-bg-color: #202020; /* Core Variables */ --bg-color: #121212; --text-color: #e0e0e0; --label-color: #b0b0b0; --container-bg: #1e1e1e; --input-bg: #2c2c2c; --border-color: #3e3e3e; --shadow-color: rgba(0, 0, 0, 0.3); --disclaimer-bg: #3d3524; --disclaimer-color: #ffd974; --disclaimer-border: #665c3c; --success-background: #283d28; /* Darker green */ --success-color: #a8dba8; /* Lighter green */ --info-background: #233946; /* Darker blue */ --info-color: #a6cbe3; /* Lighter blue */ --error-background: #4a2828; /* Darker red */ --error-color: #e0a8a8; /* Lighter red */ --primary-color: #4da3ff; /* Brighter blue for dark mode */ --secondary-color: #ff7a61; /* Brighter secondary for dark mode */ --accent-color: #4caf50; /* Brighter accent for dark mode */ /* Status colors */ --status-good-bg: rgba(46, 204, 113, 0.3); --status-good-border: #2ecc71; --status-good-text: #2ecc71; --status-warning-bg: rgba(241, 196, 15, 0.3); --status-warning-border: #f1c40f; --status-warning-text: #f1c40f; --status-error-bg: rgba(231, 76, 60, 0.3); --status-error-border: #e74c3c; --status-error-text: #e74c3c; /*transparent*/ --transparent-color-0: rgba(0, 0, 0, 0); --transparent-color-1: rgba(0, 0, 0, 0.1); --transparent-color-2: rgba(0, 0, 0, 0.2); --transparent-color-3: rgba(0, 0, 0, 0.3); --transparent-color-4: rgba(0, 0, 0, 0.4); --transparent-color-5: rgba(0, 0, 0, 0.5); --transparent-color-7: rgba(0, 0, 0, 0.7); --transparent-color-8: rgba(0, 0, 0, 0.8); --transparent-color-9: rgba(0, 0, 0, 0.9); --body-color: #fff; /*== dashboard ==*/ --projects-section: #1f2937; --main-color: #fff; --link-color-active-bg: rgba(195, 207, 244, 0.2); --link-color-hover: rgba(195, 207, 244, 0.1); } :where(.is-layout-flex) { gap: 0.5em; } :where(.is-layout-grid) { gap: 0.5em; } body .is-layout-flex { display: flex; } .is-layout-flex { flex-wrap: wrap; align-items: center; } .is-layout-flex> :is(*, div) { margin: 0; } body .is-layout-grid { display: grid; } .is-layout-grid> :is(*, div) { margin: 0; } :where(.wp-block-columns.is-layout-flex) { gap: 2em; } :where(.wp-block-columns.is-layout-grid) { gap: 2em; } :where(.wp-block-columns.is-layout-flex) { gap: 2em; } /*=============================== Dark Mode CSS ===============================*/ :root { color-scheme: light dark; --app-container: #f23849; --custom-btn-bg-color: #c41b1b; --custom-rbtn-bg-color: #444; --link-color: #40b5e7; --img-color-hover: rgba(0, 140, 255, 0.164); --valid-color: #28a745; --books-title: #74642F; --fat-dot: #FEC15D; --total-cart: #DAA520; --secondary-label-color: #E8E8E8; --dark-color: #FFFFFF; --white-color: #000; --custom-disabled-btn-bg-color: #CCC; --subtitle-color: #666; --dark-gray-color: #222; --light-gray-color: #999; --input-bg-color: #E8E8E8; --body-bg-color: #FFFFFF; --contrast: #2D3E50; --contrast-2: #575760; --contrast-3: #b2b2be; --base: #f0f0f0; --base-2: #f7f8f9; --base-3: #ffffff; --accent: #69B1CE; /* Core Variables */ --bg-color: #f0f4f8; --text-color: #333333; --label-color: #555555; --container-bg: #ffffff; --input-bg: #f9fafb; --primary-color: #1e90ff; /* DodgerBlue */ --secondary-color: #ff6347; /* Tomato */ --accent-color: #32cd32; /* LimeGreen */ --border-color: #e0e0e0; --shadow-color: rgba(0, 0, 0, 0.1); --disclaimer-bg: #fff3cd; --disclaimer-color: #856404; --disclaimer-border: #ffeeba; --success-background: #dff0d8; /* Darker green */ --success-color: #3c763d; /* Lighter green */ --info-background: #d9edf7; /* Darker blue */ --info-color: #31708f; /* Lighter blue */ --error-background: #f2dede; /* Darker red */ --error-color: #a94442; /* Lighter red */ /* Adjust status colors for light mode */ --status-good-bg: rgba(46, 204, 113, 0.15); --status-good-text: #265138; --status-warning-bg: rgba(241, 196, 15, 0.15); --status-warning-text: #d35400; --status-error-bg: rgba(231, 76, 60, 0.15); --status-error-text: #c0392b; /*transparent*/ --transparent-color-9: rgba(0, 0, 0, 0); --transparent-color-8: rgba(0, 0, 0, 0.1); --transparent-color-7: rgba(0, 0, 0, 0.2); --transparent-color-6: rgba(0, 0, 0, 0.3); --transparent-color-5: rgba(0, 0, 0, 0.4); --transparent-color-4: rgba(0, 0, 0, 0.5); --transparent-color-3: rgba(0, 0, 0, 0.7); --transparent-color-2: rgba(0, 0, 0, 0.8); --transparent-color-1: rgba(0, 0, 0, 0.9); --background: linear-gradient(to right, hsl(210, 30%, 20%), hsl(255, 30%, 25%)); /* CUSTOM PROPERTIES ( books ) */ --swiper-theme-color: rgba(252, 70, 100); --white-100: hsl(206, 5%, 100%); --black-300: hsl(210, 20%, 6%); --black-500: hsl(210, 20%, 1%); /* bmi scale */ --underweight: orange; --normal: green; --overweight: lightcoral; --obese: crimson; /*font-size*/ --h1-font-size: 52px; --h2-font-size: 44px; --h3-font-size: 36px; --h4-font-size: 28px; --h5-font-size: 24px; --h6-font-size: 20px; --h7-font-size: 18px; --h8-font-size: 16px; --h9-font-size: 14px; --h10-font-size: 12px; --body-color: #959595; --form-text-color: #000; --success: #27ae60; --warning: #f39c12; --danger: #e74c3c; --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /*== dashboard ==*/ --primary-hover: #2563EB; --projects-section: #fff; --main-color: #1f1c2e; --link-color-hover: #c3cff4; --ud-btn-color: oklch(100% 0 0deg); --ud-btn-border: none; --ud-btn-border-radius: 0.4rem; --ud-btn-background-color: oklch(48.41% 0.2342 293.93deg); --ud-btn-focus-color: oklch(100% 0 0deg); --border-radius: 8px; --border-radius-large: 100px; --font-weight-bold: 700; --custom-btn-bg-hover-color: #F2CC8F; --p-color: #717275; --heading-font-family: 'Unbounded', sans-serif; --border-radius-medium: 20px; } /* Dark Mode Support */ html.dark { color: #959595; .history-item { background: var(--dark-card-background, #1a202c); border-color: var(--dark-border-color, #4a5568); } .history-item.current-plan { background: var(--dark-success-background, #1e3a2e); } .history-item-title { color: var(--dark-text-primary, #e2e8f0); } .history-item-date { color: var(--dark-text-secondary, #a0aec0); } .history-item-stats { background: var(--dark-background-tertiary, #2d3748); .stat { color: var(--dark-text-primary, #e2e8f0); } } .empty-history { color: var(--dark-text-secondary, #a0aec0); i { color: var(--dark-text-muted, #718096); } } #historyCount { background: var(--dark-background-tertiary, #4a5568); color: var(--dark-text-secondary, #cbd5e0); } .dark-mode .highcharts-background { fill: lightgray; } .dark-mode .highcharts-root text { fill: black !important; } } /* Style for placeholder in dark mode */ input::-webkit-input-placeholder { /* Chrome, Edge, Safari */ color: dimgray; } input::-moz-placeholder { /* Firefox 19+ */ color: dimgray; } input:-ms-input-placeholder { /* IE 10-11 */ color: dimgray; } input::-ms-input-placeholder { /* Microsoft Edge */ color: dimgray; } /* Dark Mode Styles */ html.light { form { color: var(--form-text-color); a { color: var(--form-text-color) } } body { background-color: #ccc; } .feature-card { background: var(--input-bg-color); } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) drop-shadow(1px 2px 3px black); } .hero-bg::after { background: radial-gradient(circle, var(--light-gray-color) -50%, transparent 100%); } .calorie-calculator, #macro-calculator { input[type="range"]::-webkit-slider-thumb { border: 3px solid var(--dark-color) !important; } } @media (max-width: 768px) { .nav-menu { background: #ccc; } } .calc-result, #best-selling { background: var(--custom-disabled-btn-bg-color); } .percent { color: var(--dark-color); } #client-holder { /*background-image: linear-gradient(0deg, rgb(204 204 204) 25%, #dbdbdb 25%), linear-gradient(213deg, rgb(204 204 204) 25%, #fd0000 25%);*/ background-image: linear-gradient(to right, transparent, var(--custom-disabled-btn-bg-color), transparent); /* background-image: linear-gradient(135deg, var(--custom-disabled-btn-bg-color) 25%, transparent 25%), linear-gradient(225deg, var(--custom-disabled-btn-bg-color) 25%, transparent 25%);*/ } .or-spacer { a { background: var(--custom-rbtn-bg-color); } } .section-header .title span { color: var(--custom-rbtn-bg-color); } .section-title { color: var(--dark-gray-color); } .table-cell { background: var(--custom-rbtn-bg-color); } .CalculatorsResult { li:nth-child(even) { background: var(--border-color); border-bottom: 2px solid; } } .input-group-label input[type="radio"] { &::before { background: var(--light-gray-color); } &::after { color: var(--white-color); } &:checked { background: var(--custom-rbtn-bg-color); &::before { border: 4px solid var(--light-gray-color); background: var(--app-container); } } } section form, .input-container label, .cd__main, #PNxt { color: var(--white-color); } .css-1mxrc52 { background: var(--dark-color) url(assets/img/30-ml.webp) center center / 100% auto no-repeat; } .bmi-scale { h4 { color: var(--white-color); } } .table-progress__indicator { border: 2px solid var(--dark-color); } .Calculators { h3 { background: var(--custom-rbtn-bg-color); } } .section-title-bg_1 { color: var(--transparent-color-8); } .accordion-item { background: var(--dark-color); color: var(--white-color); } .glowing h1:hover span { color: var(--light-gray-color); text-shadow: 0 0 10px var(--light-gray-color), 0 0 20px var(--light-gray-color), 0 0 40px var(--light-gray-color), 0 0 80px var(--light-gray-color); } .title-calc { -webkit-text-stroke: unset; } .custum-file-upload svg, .custum-file-upload_1 svg, .custum-file-upload_2 svg { fill: var(--dark-gray-color); } .browse-button { background: var(--custom-disabled-btn-bg-color); &:hover { background: var(--light-gray-color); } } #msform, #steroidplanner, #TDEE, #macro, #BFP, #peptidecalc, #Testosterone_Conversion_Tool, #glp1Calculator, #HRT { button[type="submit"], button[type="reset"] { color: var(--dark-color); } button[type="submit"], button[type="button"] { border: 2px solid var(--white-color); } } #msform, #steroidplanner, #TDEE, #macro, #BFP, #peptidecalc, #HRT { & button { &:before { background: var(--dark-color); } } input, select, textarea, input[type="date"] { background: padding-box var(--input-bg-color); color: var(--white-color); } } .checkbox-cover { label { color: var(--custom-rbtn-bg-color); } } footer, .tooltiptext { background-color: #b0b0b0; color: var(--white-color); } .footer-blog .img-cover img { border-radius: 50px; } .header-fitness, .s-header-title, .has-base-2-background-color, .single-compound-div, .radio-tile-group input:checked+.radio-tile, #Count_Up_Animation .container { background-color: #b0b0b0; } textarea, textarea::placeholder, .checkbox-cover p, #Testosterone_Conversion_Tool, .style-0, .nav-list li a, .header-fitness .top-panel-row .header-cont, .header-fitness .top-panel-row .header-cont a, .social-list a, a, .toggle-button, .translate-button, #Testosterone_Conversion_Tool hr, #SteroidPlotter hr, #Count_Up_Animation span.text, .s-fitness-gallery .slogan, .s-contacts .slogan, .s-out-trainer .slogan, .s-crossfit .slogan, .s-club-cards .slogan, .welcome-fitness-info p, .s-best-trainer .slogan, .item-price .price, #best-selling .product-entry, .s-about, .title-decor, .text-bottom a:hover, .nav-link.active p, .product-item span, #FAQs-page, .btn-form-cover .btn { color: var(--white-color); } #Count_Up_Animation span.num, .contact-item-right a, .inp-text textarea, .gallery-item .gal-item, .out-trainer-info a, #total-price-span, .s-our-programs .title-decor, .s-counter .title-decor, .tab-pane input::placeholder, .out-trainer-info h3 a /*.social-list a, .header-fitness .top-panel-row .header-cont a, header div, header span, .nav-list li a, .footer-item-logo p, .footer-item h3, .footer-cont i, .footer-link li, .footer-bottom, header a, footer a*/ { color: var(--dark-color); } .breadcrambs>li>a { color: #959595; } .breadcrambs>li>a:hover, .nav-list li a:hover, .social-list a:hover, .header-fitness .top-panel-row .header-cont a:hover, .material-icons:hover, a:hover { color: var(--app-container); } .sclink:hover { color: var(--app-container) !important; } body, .nav-list li.dropdown ul { background: var(--custom-disabled-btn-bg-color); } .to-top.active, .calc-result { background: #959595; } #SteroidPlotter { p, h2, ul { color: var(--white-color); } } #myPieChart { border-radius: 10px; margin: 10px; padding: 10px; } content.flex-container { margin: 10px; padding: 10px; } .css-nn2tzi { background: var(--light-gray-color); color: var(--dark-color); } #drag_drop-1:hover, #drag_drop-2:hover, #drag_drop-3:hover, #drag_drop-4:hover, #drag_drop-5:hover, #drag_drop-6:hover, #drag_drop-7:hover, #drag_drop-8:hover { background: var(--input-bg-color); border-radius: 10px; } #drag_drop-1, & #drag_drop-2, & #drag_drop-3, & #drag_drop-4, & #drag_drop-5, & #drag_drop-6, & #drag_drop-7, & #drag_drop-8 { background: var(--input-bg-color); border-radius: 10px; &:hover { background: #b5b5b5; } } .s-contacts { padding: 140px 0; } .out-trainer-item:hover { a, h3 { color: black; } } .social-list a:hover { color: #f23849; } .clients-cover .client-slide .client-slide-cover img { filter: drop-shadow(2px 4px 6px var(--white-color)); } .compound-button { &:hover { background: var(--body-color); color: var(--dark-color); } } .option-button.active { background: var(--subtitle-color); color: var(--dark-color); } .single_added_item, .single_added_item_1, .single_added_item_2 { background: var(--dark-color); } .cart_3 .cart { background: var(--custom-disabled-btn-bg-color); } #tooltip { background: var(--transparent-color-2); } .footer_cart a { color: var(--dark-color); &:hover { color: var(--app-container); } } .alert-primary { background: var(--light-gray-color); color: var(--dark-color); } #step1, #step2, #step3 { a { color: var(--dark-color); &:hover { color: var(--app-container); } } } .terms { color: var(--white-color) !important; } .card { background: radial-gradient(#c5c5c5, transparent) border-box var(--dark-color); } .swiper-pagination-bullet { background: var(--subtitle-color); } .swiper-pagination-bullet-active { background: var(--swiper-theme-color); } .card-body.border.border-top-0.rounded-bottom a { color: var(--white-color) !important; &:hover { color: #f23849 !important; } } .cart .total_container { background: var(--custom-rbtn-bg-color); } .cart_3 .fa-solid { color: gray; } .cart_3 .cart { p { background: var(--dark-color); } } #client-holder .row { padding: unset; padding-top: 30px; } .section-header .section-title { &:before, &:after { border-bottom: 3px solid var(--subtitle-color); } } #client-holder .grid { img { filter: brightness(0.9) drop-shadow(1px 2px 3px #000); } img:hover { filter: brightness(0.9) drop-shadow(1px 2px 3px #f23849); } } .footer-menu li.active a { color: #f23849; } .calc-result { td, th { color: var(--dark-color); } } canvas { color: black; } .style-58 { height: 38px; } content.flex-container h5 span { color: black !important; } .fitness-banner-right p a { color: #f23849; } .modal-container-body { .page-content a { color: var(--primary-color); &:hover { color: var(--app-container); } } } } /*=============================== TOOLTIP ===============================*/ /* START TOOLTIP STYLES */ [tooltip] { position: relative; /* opinion 1 */ } /* Applies to all tooltips */ [tooltip]::before, [tooltip]::after { text-transform: none; /* opinion 2 */ font-size: .9em; /* opinion 3 */ line-height: 1; user-select: none; pointer-events: none; position: absolute; display: none; opacity: 0; margin-top: 0.5rem; } [tooltip]::before { content: ''; border: 5px solid transparent; /* opinion 4 */ z-index: 1001; /* absurdity 1 */ } [tooltip]::after { content: attr(tooltip); /* magic! */ /* most of the rest of this is opinion */ font-family: Helvetica, sans-serif; text-align: center; /*Let the content set the size of the tooltips but this will also keep them from being obnoxious */ min-width: 3em; max-width: 21em; /*white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; padding: 1ch 1.5ch; border-radius: .3ch; box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); background: #333; color: #fff; z-index: 1000; /* absurdity 2 */ width: 15rem; } /* Make the tooltips respond to hover */ [tooltip]:hover::before, [tooltip]:hover::after { display: block; } /* don't show empty tooltips */ [tooltip='']::before, [tooltip='']::after { display: none !important; } /* FLOW: UP */ [tooltip]:not([flow])::before, [tooltip][flow^="up"]::before { bottom: 100%; border-bottom-width: 0; border-top-color: #333; } [tooltip]:not([flow])::after, [tooltip][flow^="up"]::after { bottom: calc(100% + 5px); } [tooltip]:not([flow])::before, [tooltip]:not([flow])::after, [tooltip][flow^="up"]::before, [tooltip][flow^="up"]::after { left: 50%; transform: translate(-50%, -.5em); } /* FLOW: DOWN */ [tooltip][flow^="down"]::before { top: 100%; border-top-width: 0; border-bottom-color: #333; } [tooltip][flow^="down"]::after { top: calc(100% + 5px); } [tooltip][flow^="down"]::before, [tooltip][flow^="down"]::after { left: 50%; transform: translate(-50%, .5em); } /* FLOW: LEFT */ [tooltip][flow^="left"]::before { top: 50%; border-right-width: 0; border-left-color: #333; left: calc(0em - 5px); transform: translate(-.5em, -50%); } [tooltip][flow^="left"]::after { top: 50%; right: calc(100% + 5px); transform: translate(-.5em, -50%); } /* FLOW: RIGHT */ [tooltip][flow^="right"]::before { top: 50%; border-left-width: 0; border-right-color: #333; right: calc(0em - 5px); transform: translate(.5em, -50%); } [tooltip][flow^="right"]::after { top: 50%; left: calc(100% + 5px); transform: translate(.5em, -50%); } /* FX All The Things */ [tooltip]:not([flow]):hover::before, [tooltip]:not([flow]):hover::after, [tooltip][flow^="up"]:hover::before, [tooltip][flow^="up"]:hover::after, [tooltip][flow^="down"]:hover::before, [tooltip][flow^="down"]:hover::after { animation: tooltips-vert 300ms ease-out forwards; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transition: visibility 0s ease-in-out 175ms, opacity 375ms ease-in-out 175ms, transform 375ms ease-in-out 175ms; box-shadow: 0 15px 45px 15px rgba(0, 0, 0, .07); } [tooltip][flow^="left"]:hover::before, [tooltip][flow^="left"]:hover::after, [tooltip][flow^="right"]:hover::before, [tooltip][flow^="right"]:hover::after { animation: tooltips-horz 300ms ease-out forwards; } /*=============================== KEYFRAMES - Animations ===============================*/ @keyframes tooltips-vert { to { opacity: .9; transform: translate(-50%, 0); } } @keyframes tooltips-horz { to { opacity: .9; transform: translate(0, -50%); } } @keyframes shaking { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-8px, 0, 0); } 40%, 60% { transform: translate3d(8px, 0, 0); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* Heart beat animation */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes slide { 0% { transform: translatey(0); } 100% { transform: translatey(-50%); } } /* Add this to your existing CSS styles */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideIn { from { transform: translateX(100%) translateY(-50%); opacity: 0; } to { transform: translateX(0) translateY(0); opacity: 1; } } @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.1); } to { transform: scale(1); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } /* Animation for value changes */ @keyframes highlightChange { 0% { background-color: rgba(74, 108, 247, 0.1); } 100% { background-color: transparent; } } /* Add a simple animation effect (optional) */ @keyframes animatetop { from { top: -300px; opacity: 0 } to { top: 0; opacity: 1 } } /* Animation for delete */ @keyframes deleteAnimate { to { transform: translateX(100%); opacity: 0; } } /* Holographic Style Scramble */ @keyframes holographic-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Holographic Style Flicker */ @keyframes flicker { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } /* Sync Status Styles */ @keyframes slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Animation for exercise expansion */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* fade + slide animation for smooth tab switching */ @keyframes fadeSlide { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } /* Animation for smooth popup */ @keyframes toastFloatIn { 0% { opacity: 0; transform: scale(0.94) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } button, a { cursor: pointer; } /* Improve form accessibility focus states */ input:focus, select:focus, button:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } select :disabled { color: #FFFFFF; } select:focus>option:checked { background: var(--label-color); color: var(--base); /*dark-color*/ } button[disabled] { opacity: 0.5; /* Reduce opacity to indicate disabled state */ cursor: not-allowed; /* Change cursor to "not-allowed" */ pointer-events: none; /* Prevent clicks on the button */ /* Add any other styles you want for disabled buttons */ background-color: #ccc; /* Example: Gray background */ border: 1px solid #999; /* Example: Gray border */ color: #666; /* Example: Gray text */ } .title_group { padding-block: 2rem 1rem; } .logo img { max-width: 150px; } /* Theme Toggle */ /* Dark Mode Toggle Button with Font Awesome Icons */ .theme-toggle { position: fixed; top: 2.5%; /*20px*/ right: 20px; background: #f23849; /*var(--primary-color)*/ border: none; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s, transform 0.3s; box-shadow: 0 4px 12px var(--shadow-color); z-index: 1000; transition: top 0.3s ease; /* Smooth transition for the top property */ &:hover { background: #f23849; background: #1c86ee; transform: rotate(20deg); } i { font-size: 24px; color: var(--dark-color); } &:focus, &:active { outline: 2px solid var(--primary-color) !important; outline-offset: 2px; } } /* UNRELATED to tooltips */ .toggle-button, .translate-button { font-size: 16px; border: none; background-color: unset; color: #fff; cursor: pointer; border-radius: 5px; display: flex; justify-content: center; align-items: center; &:hover { color: var(--app-container); } } /*=============================== Advanced CSS ===============================*/ .w-50 { width: 50%; } .w-100 { width: 100%; } .v-hidden { visibility: hidden; } .non { display: none; visibility: hidden; } /* Hide all steps by default: /*Hide all except first fieldset*/ #msform fieldset:not(:first-of-type), /* Hide fieldsets from 2 to 6 initially */ .fs-form:nth-child(2n + 1):not(:first-child), /* Initially hide all fieldsets */ .fs-form, .file-upload-label input, .custum-file-upload input, .collapsed, #zt-status-badge, .translate-button .translate-text, .hide { display: none; } /* Add these styles */ .fs-form.active, .line-1, .line-2, .tab-content>.active, .style-0:hover .tooltiptext, #cycle-container, .show { /* Show the active fieldset */ display: block; } /* Add some basic styles for fieldsets (adjust as needed) */ /*form styles*/ #msform form, #steroidplanner form, #TDEE form, #macro form, #BFP form, #peptidecalc form, #glp1Calculator form, #HRT form, #Testosterone_Conversion_Tool #primary, #diet_plan #PNxt, #Research_Peptides_Weight, #Peptide_Protocol_Plotter, #workout_plan #PNxt, #deficit_calculator, #health_tracker #PNxt, #tracking_health_metrics #PNxt { /* Add padding, border, etc. for desired fieldset appearance */ border-radius: 5px; background: transparent; font: 16px/normal 'Montserrat', sans-serif; text-transform: capitalize; border: 7px solid var(--app-container); padding: 20px 30px; box-sizing: border-box; width: 80%; margin: 0 10% 50px; box-shadow: 0 19px 38px var(--transparent-color-7), 0 15px 12px var(--transparent-color-7); } /*inputs*/ #msform, #steroidplanner, #TDEE, #macro, #BFP, #peptidecalc, #Testosterone_Conversion_Tool, .button-group, #diet_plan .form-group, #workout_plan_calc, .card .buttons, #tdee_deficit_calculator .submit-group, #health_tracker .section, #tdee-calculator-widget .calc-input-section, #Peptide_Protocol_Plotter, #HRT, #tracking_health_metrics .section, #Trainer, .consultation-container { padding: 88px 0px 100px; /*input, select, textarea, input[type="date"],*/ input:not(.chosen-search-input), select:not(.chosen-search-input), textarea:not(.chosen-search-input), input[type="date"]:not(.chosen-search-input) { border: 1px solid var(--custom-disabled-btn-bg-color); border-radius: 5px; width: 100%; box-sizing: border-box; height: 40px; flex: 1; cursor: pointer; font: 14px / 1.5 "Poppins", sans-serif; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; background: padding-box var(--input-bg-color); color: var(--white-color); padding: 8px 16px; &:focus { border-color: var(--custom-btn-bg-color); } } input[type="date"]:not(.chosen-search-input) { min-height: 40px; height: auto; } input[type="range"], input[type="radio"] { height: auto; } input[type="range"] { padding: 3px 5px; border: 1px solid var(--custom-disabled-btn-bg-color); } input[type="radio"] { height: 40px; } input[class*="iti__"] { padding-left: 50px; } button:not([class*="iti__"]) { border: 2px solid var(--white-color); border-radius: 4px; font: 700 14px / 22px 'Montserrat', sans-serif; background: var(--custom-btn-bg-color); color: #FFFFFF; margin-inline: 0.5em; box-sizing: border-box; appearance: none; display: inline-block; position: relative; z-index: 0; text-decoration: none solid var(--white-color); text-align: center; vertical-align: middle; cursor: pointer; text-transform: uppercase; letter-spacing: normal; transition: border-color 0.175s ease-in-out 0s, background-color 0.175s ease-in-out 0s, color 0.175s ease-in-out 0s, padding 0.175s ease-in-out 0s; -webkit-font-smoothing: antialiased; width: auto; max-width: 100%; height: 35px; flex: 1; overflow: hidden; box-shadow: 5px 5px 1px var(--transparent-color-5); transition: all 0.2s; /* Combined transitions */ &:hover { filter: brightness(120%); box-shadow: 0 0 0 0px #202020, 0 0 0 0px #c41b1b; } &:active { box-shadow: none; } &:before { content: ''; position: absolute; background: var(--dark-color); left: -100%; width: 10px; top: 0; bottom: 0; } &:hover::before { left: calc(100% + 10px); transition: left 500ms; } } button[type="reset"] { background: var(--custom-rbtn-bg-color); border-color: var(--custom-btn-bg-color); } } #Research_Peptides, #Peptide_Protocol, #tdee_deficit_calculator { padding: 88px 0px 100px; } #msform { padding: 50px 0px 100px; } #diet_plan #PNxt, #Research_Peptides_Weight, #Peptide_Protocol_Plotter, #workout_plan #PNxt, #health_tracker #PNxt, #tracking_health_metrics #PNxt { padding: 20px 30px; } #HRT, #Peptide_Protocol { padding: 88px 0 0; } .crossfit-banner-right .text-bottom a:hover { color: var(--dark-color); } /* Styling for the new workout schedule display */ .workout-schedule-container { display: flex; flex-wrap: wrap; /* Allows cards to wrap to the next line */ gap: 10px; /* Space between workout day cards */ justify-content: center; /* Center the cards horizontally */ padding: 10px; background-color: #333; /* Darker background for the container */ border-radius: 8px; } .workout-day-card { background-color: #2a2a2a; /* Slightly lighter dark for individual cards */ border: 1px solid #444; border-radius: 8px; padding: 10px; /* Fixed width for each card, adjust as needed */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); color: #eee; /* Light text color */ flex-grow: 1; /* Allows cards to grow and fill space, but respects max-width/width */ /*min-width: 250px; /* Ensures cards don't get too small */ display: flex; flex-direction: column; /* Stack heading and list vertically */ h3 { text-align: center; color: #9b59b6; /* Highlight day numbers */ margin-top: 0; margin-bottom: 15px; font-size: 1.4em; border-bottom: 1px solid #555; padding-bottom: 10px; line-height: 1 !important; color: var(--app-container); color: #69A2F9; } } .workout-list { list-style: none; /* Remove default list bullets */ padding: 0; margin: 0; flex-grow: 1; /* Allows the list to take available space */ li { background-color: #3e3e3e; /* Background for individual exercise items */ margin-bottom: 8px; padding: 10px; border-radius: 5px; font-size: 0.95em; color: #ccc; display: flex; align-items: center; word-wrap: break-word; /* Ensures long exercise names wrap */ /* Optional: Add a simple icon for list items */ &::before { content: "\2022"; /* Unicode for a bullet point */ color: #49bcbe; /* Color for the bullet */ font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; margin-right: 5px; } } } .workout-list .rest-day::before { color: red; } #workout_plan .input-group-label, #health_tracker .input-group-label, #tracking_health_metrics .input-group-label { padding-bottom: 5%; } #workout_plan #box { padding-left: 2%; } #workout_plan, .card .buttons { padding: unset; text-align: center; } .exercise-row td { vertical-align: middle; } .exercise-name img { cursor: pointer; transition: transform 0.2s; &:hover { transform: scale(1.5); z-index: 10; position: relative; } } #Alltrs { padding: 50px 0px; input:not(.chosen-search-input), select:not(.chosen-search-input), textarea:not(.chosen-search-input), input[type="date"]:not(.chosen-search-input) { border: 1px solid var(--custom-disabled-btn-bg-color); border-radius: 5px; width: 100%; box-sizing: border-box; height: 40px; cursor: pointer; font: 14px / 1.5 "Poppins", sans-serif; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; /*background: padding-box var(--secondary-label-color); color: #4c555f;*/ &:focus { border-color: var(--custom-btn-bg-color); } } select:disabled { color: #FFFFFF; } select:focus>option:checked { background: #525252; } } #steroidplanner, #doseCalculator .button-group, #tdee_deficit_calculator .submit-group, #tdee-calculator-widget .calc-input-section { padding: unset; } #SteroidPlotter #appendSaveimg { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; a.button, button { border: 2px solid var(--dark-color); border-radius: 4px; font: 700 14px / 22px 'Montserrat', sans-serif; background: var(--custom-btn-bg-color); color: #FFFFFF; margin-inline: 0.5em; box-sizing: border-box; appearance: none; display: inline-block; position: relative; z-index: 0; text-decoration: none solid var(--white-color); text-align: center; vertical-align: middle; cursor: pointer; text-transform: uppercase; letter-spacing: normal; transition: border-color 0.175s ease-in-out 0s, background-color 0.175s ease-in-out 0s, color 0.175s ease-in-out 0s, padding 0.175s ease-in-out 0s; -webkit-font-smoothing: antialiased; width: auto; max-width: 100%; height: 35px; flex: 1; overflow: hidden; box-shadow: 5px 5px 1px var(--transparent-color-5); transition: all 0.2s; /* Combined transitions */ align-content: center; &:hover { filter: brightness(120%); box-shadow: 0 0 0 0px #202020, 0 0 0 0px #c41b1b; } &:active { box-shadow: none; } &:before { content: ''; position: absolute; background: var(--dark-color); left: -100%; width: 10px; top: 0; bottom: 0; } &:hover::before { left: calc(100% + 10px); transition: left 500ms; } } #reset-compound-button { background: var(--custom-rbtn-bg-color); border-color: var(--custom-btn-bg-color); } #plot-button, #add-compound-button { border-color: black; } } #msform input:focus+span::before, #msform select:focus+span::before, #msform textarea:focus+span::before, .calc input:focus+span::before, .calc select:focus+span::before, #macro-calculator input:focus+span::before, #macro-calculator select:focus+span::before, #Testosterone_Conversion_Tool select:focus+span::before, #Testosterone_Conversion_Tool input:focus+span::before, #tdee-calculator-widget select:focus+span::before, #tdee-calculator-widget input:focus+span::before, #Peptide_Protocol_Plotter select:focus+span::before, #Peptide_Protocol_Plotter input:focus+span::before, #workout_plan select:focus+span::before, #workout_plan input:focus+span::before, #health_tracker select:focus+span::before, #health_tracker input:focus+span::before, #Trainer select:focus+span::before, #Trainer input:focus+span::before, .input-group:focus-within>span::before { content: ' ◀ '; /*'▶' “◀” “▼”▽ ▼ ▼▼⯅▼“▼”▲⛛⟁▲⧩⧨*/ margin-bottom: auto; color: var(--custom-btn-bg-color); left: -.25rem; transform: translateY(-3rem); } .input-group-label, #Peptide_Protocol_Plotter { label:not([id^="drag_drop-"] label) { box-sizing: border-box; appearance: none; font: 700 16px / 30px 'Montserrat', sans-serif; letter-spacing: normal; padding: 0 12px; border: unset; vertical-align: baseline; text-transform: capitalize; display: block; margin-bottom: 8px; color: var(--label-color); } } /* More specific: target only the 2nd and 4th labels .input-group-label #box input:nth-of-type(2) + label, .input-group-label #box input:nth-of-type(4) + label { padding-left: 7%; }*/ #Peptide_Protocol_Plotter .toggle-container label { display: flex !important; } /* radio button */ .input-group-label input[type="radio"] { appearance: none; display: flex; align-items: center; gap: 10px; padding: 0px 15px; &::before { content: ""; background: var(--secondary-label-color); min-width: 20px; min-height: 20px; border-radius: 50%; box-sizing: border-box; transition: border .2s linear; } &::after { content: attr(label); color: var(--white-color); text-transform: capitalize; } &:checked { background: var(--custom-rbtn-bg-color); &::before { border: 4px solid var(--secondary-label-color); background: var(--app-container); } } } #peptidecalc form { text-align: center; } #msform { position: relative; &:not(:has(label)) { text-align: center; } input, select { padding: 0px 15px; } } /* Mark input boxes that gets an error on validation: */ input.invalid { background-color: #ffdddd; } /* Make circles that indicate the steps of the form: */ .step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5; padding: 5px; margin: 5px; background: var(--light-gray-color); } .step.active { opacity: 1; } /* Mark the steps that are finished and valid: */ .step.finish { background-color: #04AA6D; border: 4px solid var(--light-gray-color); background: var(--app-container); } /* animation for input boxes */ .invalid, .input-group.row:has(input.invalid) { border: 2px solid #ec2626 !important; /* paste any animation you want */ animation: shaking 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; transition: all 0.4s ease-in-out; } /*file-drop-area*/ .input-group.row:has(input.invalid) { border: 2px dashed #ec2626 !important; } label.invalid { color: red; /* Example: Make the label text red */ border-radius: 5px; margin-bottom: 5px; } .total-st { border: 1px solid var(--custom-disabled-btn-bg-color); border-radius: 5px; height: 40px; background: padding-box var(--input-bg-color); color: var(--white-color); display: flex; justify-content: center; align-items: center; } .pct-display { font: 14px / 1.5 "Poppins", sans-serif; color: var(--white-color); } #PNxt .entry-content h3 { font-family: "Righteous", sans-serif; } .gallery-item .gal-item { text-transform: capitalize; color: var(--base); } .transformation-box { position: relative; overflow: hidden; border-radius: 8px; margin-bottom: 10px; background: #000; } .images-comparison { display: flex; gap: 2px; justify-content: center; align-items: center; img { width: 50%; height: auto; object-fit: cover; transition: transform 0.3s ease; } } .before-after-labels { position: absolute; top: 10px; left: 0; right: 0; display: flex; justify-content: space-around; z-index: 10; pointer-events: none; } .label-before, .label-after { background: rgba(242, 56, 73, 0.8); color: #fff; padding: 2px 8px; font-size: 10px; text-transform: uppercase; font-weight: bold; border-radius: 4px; } /*** basic styles ***/ #box label { font: 600 16px / 30px 'Montserrat', sans-serif; } #box, .col-r { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.5rem; columns: 2 auto; } .col-r { gap: 1rem; } /*** custom checkboxes ***/ #box { label { font-size: 24px; padding-inline: 1rem; font: 600 1.2rem / 2rem Montserrat, sans-serif; display: flex; } /*** custom checkboxes ***/ input[type=checkbox] { display: none; } /* to hide the checkbox itself */ input[type=checkbox]+label:before { font-family: FontAwesome; display: inline-block; content: "\f096"; /* unchecked icon */ letter-spacing: 10px; /* space between checkbox and label */ color: var(--white-color); /* Set the desired color here*/ } input[type=checkbox]:checked+label:before { content: "\f046"; /* checked icon */ letter-spacing: 5px; /* allow space for check mark */ color: var(--app-container); /* Set the desired color for the checked state*/ } } /* When the checkbox is checked, add a blue background */ /*headings*/ .fs-title { text-transform: uppercase; margin-bottom: 10px; text-align: center; } .fs-subtitle { color: var(--subtitle-color); margin-bottom: 20px; text-align: center; } .submit-group { display: flex; align-items: center; justify-content: center; margin: 50px 0px; } .line-2 { color: var(--light-gray-color); } /* Styling Heart */ .fa-heartbeat { color: var(--app-container); font-size: 16px; animation: pulse 1s linear infinite; filter: drop-shadow(2px 4px 6px gray); } .dropdown-item .fa-heartbeat, .calculator-card .fa-heartbeat { animation: unset; filter: unset; } .dropdown-item .fa-heartbeat { color: unset; } .checkbox-cover { label { position: relative; color: var(--custom-disabled-btn-bg-color); font: bold 16px "Poppins", sans-serif; padding: 0.7rem 0 0 2.5rem; } label:before { content: ''; display: inline-block; border: 1px solid var(--app-container); width: 26px; height: 26px; position: absolute; left: 0; text-align: center; color: var(--app-container); border-radius: 5px; top: 8px; font: 14px / 24px "FontAwesome"; } input:checked+label:before { content: '\f00c'; background: var(--app-container); color: var(--white-color); } } .form-check { display: flex; align-items: center; } .input-group { display: flex; margin-bottom: 1rem; align-items: center; } /* Additional styles for other elements */ .input-group input:-webkit-autofill, .input-group input:-webkit-autofill:hover, .input-group input:-webkit-autofill:focus, .input-group input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--border-color) inset; box-shadow: 0 0 0 30px var(--border-color) inset; -webkit-text-fill-color: var(--text-color); color: var(--text-color); border: 1px solid var(--border-color); caret-color: var(--primary-color); transition: background-color 5000s ease-in-out 0s; } .form-group { text-align: center; margin: 5px; } span.required { font: 14px 'Montserrat', sans-serif; color: var(--custom-btn-bg-color); margin-left: 5px; } .paragraph { font: italic 12px/1.5 'Montserrat', sans-serif; box-sizing: border-box; display: block; clear: both; margin: 5px 0px 0px; margin-inline: 2rem; ul { list-style: inside disc; } } .d-block-1 { display: flex; align-items: center; } #TDEE .paragraph { margin-inline: 1rem; } .style-58 { padding: 6px 12px; font: 400 16px/24px 'Roboto', sans-serif; color: var(--dark-gray-color); text-align: center; white-space: nowrap; background: var(--secondary-label-color); border-radius: 0px 4px 4px 0px; box-sizing: border-box; text-transform: none; display: flex; justify-content: center; /* Horizontal centering */ align-items: center; height: 40px; min-width: 3rem; } /* comment */ .style-0 { box-sizing: border-box; appearance: none; font: 16px 'Montserrat', sans-serif; display: inline-block; position: relative; cursor: help; margin: 0; padding: 0; border: unset; outline: none; vertical-align: baseline; background: var(--transparent-color-0) none repeat scroll 0px 0px / auto padding-box border-box; color: var(--light-gray-color); padding: 20px 0px 10px 0px; } .tooltip { display: inline-grid; height: 18px; width: 18px; font: 14px 'Montserrat', sans-serif; margin: 0 10px; vertical-align: text-bottom; border: unset; background: transparent; } .style-2 { box-sizing: border-box; appearance: none; font-family: 'Montserrat', sans-serif; fill: var(--app-container); } .tooltiptext { position: absolute; z-index: 99999999; display: none; top: calc(40px + 1em); left: 50%; transform: translateX(-50%); background: var(--dark-gray-color); border: 1px dashed var(--custom-disabled-btn-bg-color); border-radius: 4px; box-shadow: 6px 6px 5px -3px var(--transparent-color-3); color: var(--custom-disabled-btn-bg-color); font: 400 12px/19.5px 'Montserrat', sans-serif; padding: 10px; text-align: center; width: 350px; white-space: normal; top: calc(25px + 1em); left: 0; left: -50%; width: max-content; } #SteroidPlotter .tooltiptext { left: 50%; } /*======= Heading =========*/ .title-calc { display: flex; align-items: center; justify-content: center; text-align: center; margin: 50px 0 30px; text-transform: none; -webkit-text-stroke: 2px var(--custom-btn-bg-color); -webkit-text-fill-color: var(--white-color); } #msformTitle.title-calc { margin: 50px 0 0; } /* Glowing Text Hover Effects */ .glowing h1 { letter-spacing: 5px; cursor: pointer; font: 900 44px "Raleway", sans-serif; text-shadow: 2px 2px 4px var(--transparent-color-5, rgba(0, 0, 0, 0.5)); } .glowing h1 span { transition: 0.5s; } .glowing h1:hover span:nth-child(1) { margin-right: 10px; } .glowing h1:hover span:nth-child(1):after { content: ""; } .glowing h1:hover span:nth-child(2) { margin-left: 10px; } .glowing h1:hover span { color: var(--white-color); text-shadow: 0 0 10px var(--white-color), 0 0 20px var(--white-color), 0 0 40px var(--white-color), 0 0 80px var(--white-color); } .title { margin: 5px 0px; -webkit-box-sizing: border-box; -webkit-appearance: none; font: 900 24px "Righteous", sans-serif; } /*================*/ .table-cell { font: 600 14px / 1 'Open Sans', sans-serif; background: var(--custom-rbtn-bg-color); padding: 20px; margin: 0.5rem; border-radius: 5px; gap: 1.25rem; flex-wrap: wrap; } .table-progress-list { display: flex; margin-bottom: -0.25rem; padding-inline: 1.5rem; justify-content: space-between; width: 100% } .table-progress-list--fat { padding: 0; max-width: 100%; } .table-progress-list__item { color: var(--custom-disabled-btn-bg-color); position: relative; } .table-progress { width: 100%; height: 0.5rem; border-radius: 6px; position: relative; background: linear-gradient(90deg, #ff8686 0, #ffdd84 25%, #9cff84 50%, #ffdd86 75%, #ff8585 100%) } .table-progress--fat { background: linear-gradient(90deg, #ff8686 0, #ffdd84 13%, #9cff84 29%, #87b958 43%, #ffdd86 61%, #ff8585 100%) } .table-progress__indicator { width: 1rem; height: 1rem; left: 40%; top: 50%; transform: translate(-50%, -50%); background: var(--app-container); border-radius: 50%; position: absolute; border: 2px solid var(--white-color); box-sizing: content-box; transition: .3s ease; } /* range */ content.flex-container { display: flex; justify-content: space-between; margin-block: 1.5rem; align-items: center; } /* bmi scale */ .bmi-scale { display: flex; font-size: 16px; div { flex: 1; text-align: center; text-transform: uppercase; border-top: 5px solid var(--color); padding: 10px; } h4 { color: var(--custom-disabled-btn-bg-color); } } .underweight { color: var(--underweight); } .healthy { color: var(--normal); } .overweight { color: var(--overweight); } .obese { color: var(--obese); } /* show & hide Result */ div#score, div#bscore { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.3s ease-in-out 0.3s; } div#score.show, div#bscore.show { max-height: none; opacity: 1; } .Calculators { margin-top: 10px; border: 1px solid var(--secondary-label-color); border-radius: 5px; h3 { padding: 5px 10px; text-align: center; color: var(--link-color); font-weight: 600; border-radius: 10px 10px 0 0; } } .CalculatorsResult { list-style-type: none; border-top: 1px solid var(--secondary-label-color); li { padding: 5px 10px; display: flex; align-items: center; justify-content: space-between; text-transform: capitalize; } li:nth-child(even) { background: var(--custom-rbtn-bg-color); } } .CalculatorsResult .name, .CalculatorsResult .value { font-weight: 500; } /* The crazy stuff that needs to be here for the custom input[type="range"] styling */ /* .calorie-calculator input[type="range"]::-moz-range-thumb, #macro-calculator input[type="range"]::-moz-range-thumb*/ .calorie-calculator, #macro-calculator { input[type="range"] { -webkit-appearance: none; margin: 18px 0; width: 100%; transition: all 0.265ms ease-out; border-radius: 5px; padding: 3px 5px; height: unset; background: padding-box var(--transparent-color-0); } input[type="range"]:not(:last-of-type) { margin-block: 1.5em 2.5em; } input[type="range"]:focus { outline: none; } input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: var(--secondary-label-color); } input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 8px 1px var(--app-container), 0 0 16px 4px var(--white-color); border: 3px solid var(--white-color); height: 24px; width: 24px; border-radius: 50%; background: var(--app-container); cursor: pointer; -webkit-appearance: none; margin-top: -8px; } input[type="range"]:focus::-webkit-slider-runnable-track { background: var(--app-container); } input[type="range"]::-moz-range-track { width: 100%; height: 100%; cursor: pointer; background: var(--secondary-label-color); } } /*=============================== Peptide Calc ===============================*/ .radio-tile-group { display: flex; flex-wrap: wrap; justify-content: center; } .input-container { position: relative; height: 7rem; margin: 1.5rem 1.5rem 1.5rem 0.5rem; width: 100%; input { position: absolute; opacity: 0; } } .input-container .radio-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; border: 2px solid var(--link-color); border-radius: 8px; transition: all 300ms ease; border-color: var(--white-color); } .radio-tile-group input:checked+.radio-tile { box-shadow: 0 0 12px var(--link-color); transform: scale(1.1); border-color: var(--custom-btn-bg-color); background: var(--custom-rbtn-bg-color); } .radio-tile-group input:hover+.radio-tile { box-shadow: 0 0 12px var(--link-color); } .radio-tile-group input:checked+.radio-tile label { color: var(--white-color); } .input-container label { color: var(--link-color); text-transform: uppercase; letter-spacing: 1px; } .column { padding: 10px; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; } .css-unit { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(to top, rgba(160, 160, 160, 0.8), rgba(250, 250, 250, 0.9)); width: 0%; transition: width 0.8s ease; } .css-nn2tzi { border-radius: 20px; background: var(--dark-gray-color); box-shadow: 0px 0px 10px 0px var(--transparent-color-5); } .head { padding-block: 10px; } .css-1mxrc52 { border: 5px solid var(--custom-rbtn-bg-color); border-radius: 10px; /*background: var(--white-color) url(assets/img/30ml-04.webp) center center/contain no-repeat;*/ background: var(--white-color) url(assets/img/30-ml.webp) center center / 100% auto no-repeat; height: 100px; width: 100%; position: relative; margin: 0px auto; } #peptidecalc hr { width: 100%; border-color: var(--dark-color); background: var(--dark-color); height: 2px; margin-block: 1rem; } /*--------------------------------------- CUSTOM PROPERTIES ( about ) -----------------------------------------*/ .about-img-2 img { transition: all 0.5s ease-in-out; &:hover { -webkit-transform: scaleX(-1); transform: scaleX(-1); } } /**/ .cd__main { font-family: "Montserrat", sans-serif; h1 { text-align: center; margin: 2rem 0; } } #accordionExample .card a { color: var(--white-color); &:hover { color: var(--app-container); } } .accordion { width: 100%; max-width: unset; margin: unset; } .accordion-item { background: var(--white-color); color: var(--dark-color); margin: 1rem 0; border-radius: 0.5rem; box-shadow: 0 2px 5px 0 var(--transparent-color-2); } .accordion-item-header { padding: 0.5rem 3rem 0.5rem 1rem; min-height: 3.5rem; line-height: 1.25rem; font-weight: bolder; display: flex; align-items: center; position: relative; color: var(--app-container); cursor: pointer; &::after { content: "+"; font-size: 28px; position: absolute; right: 1rem; } } .accordion-item-header.active::after { content: "-"; } .accordion-item-body { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; h3 { margin-block: 10px; color: var(--app-container); } } .accordion-item-body-content { padding: 1rem; line-height: 1.5rem; border-top: 1px solid; border-image: linear-gradient(to right, transparent, #34495e, transparent) 1; } /* */ .section-title-bg_1 { color: var(--custom-rbtn-bg-color); font: 700 200px/0.8 "Righteous", sans-serif; text-transform: uppercase; max-width: 100%; overflow: hidden; white-space: nowrap; text-align: center; pointer-events: none; margin-bottom: -8rem; display: flex; justify-content: center; } .about-info-row { justify-content: center; max-width: 1200px; } .about-info-row .about-info-col { max-width: 33.33%; } .s-about-information .container { max-width: 100%; } /*--------------------------------------- CUSTOM PROPERTIES ( index ) -----------------------------------------*/ .s-crossfit .col-md-5 { -ms-flex: 0 0 33.333333%; flex: 0 0 25%; max-width: fit-content; } .crossfit-col:nth-child(4) { padding-top: 0; } .rx-lazy_red { /*filter: brightness(0) saturate(100%) invert(70%) sepia(97%) saturate(925%) hue-rotate(353deg) brightness(102%) contrast(102%); filter: brightness(1000%) grayscale(100%) opacity(0.1) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);*/ filter: brightness(1000%) grayscale(100%) opacity(0.1) drop-shadow(0 0 0 #f23849) drop-shadow(0 0 0 #f23849) drop-shadow(0 0 0 #f23849) drop-shadow(0 0 0 #f23849) drop-shadow(0 0 0 #f23849); /*filter: brightness(100%) grayscale(0%) opacity(1) drop-shadow(0 0 0 #f23849);*/ /*filter: saturate(1) grayscale(1);*/ /*filter: grayscale(100%); filter: grayscale(1); filter: blur(1px); filter: saturate(0.5); filter: drop-shadow(2px 4px 6px black);*/ width: 150px; } .program-item .program-item-front { filter: grayscale(1); } .price_s { color: var(--app-container); font: 36px/0.75 sans-serif; position: relative; top: -25px; margin-right: 10px; } .slogan { max-width: 650px; } .s-fitness-banner { background-color: unset; &:after, &:before { background-color: unset; } } .fitness-banner-right { color: var(--white-color); } .program-item .program-item-inner h3 { padding-inline: 2rem; } /*--------------------------------------- CUSTOM PROPERTIES ( transformation ) -----------------------------------------*/ /**/ #Animated_2 { display: flex; justify-content: center; align-items: center; margin: 0; width: 100vw; height: 100vh; font-family: 'Poppins', sans-serif; overflow: hidden; perspective: clamp(400px, 100vw, 1000px); background: var(--dark-gray-color); &::before, &::after { content: ""; position: absolute; /* Changed to absolute for better positioning */ z-index: 10; left: 0; right: 0; height: 30vh; } &::before { top: 0; background: linear-gradient(5deg, var(--transparent-color-0) 30%, var(--custom-rbtn-bg-color)); } &::after { bottom: 0; background: linear-gradient(-5deg, var(--custom-rbtn-bg-color), var(--transparent-color-0) 70%); } } .gallery { display: flex; gap: 1vw; max-width: 1200px; min-width: 500px; height: 100vh; transform: translate(5%, -25%) rotate(-6deg) rotateX(10deg) rotateY(20deg); } .gallery_line { display: flex; flex-direction: column; gap: 1vw; height: fit-content; animation: slide 30s linear infinite; img { flex: 1 1 auto; width: 100%; object-fit: cover; } &:nth-child(2) { animation-direction: reverse; } } .align-center { display: block; margin-inline: auto; text-align: center; } h3.align-center { margin-block: 10px 30px; } .title-1 { color: var(--dark-gray-color); font: 700 36px Lato, Arial; } .peak { background-color: var(--light-gray-color); padding-block: 30px; margin-top: 50px; } .wrap { background: var(--transparent-color-3); box-shadow: 0 10px 80px rgba(196, 196, 196, 0.5); } /* */ #Count_Up_Animation { display: flex; justify-content: center; a { color: var(--secondary-label-color); text-decoration: none; } h1 { color: var(--white-color); text-align: center; line-height: 1.5em; } i { color: var(--custom-btn-bg-color); font-size: 36px; text-align: center; padding: 0.5em 0; } span { display: grid; place-items: center; font-weight: 600; } .wrapper { display: flex; gap: 10px; width: 80%; } .container { display: flex; flex-direction: column; justify-content: space-around; padding: 1em; position: relative; border-radius: 0.5em; background: var(--custom-rbtn-bg-color); border-bottom: 5px solid var(--app-container); } span.num { color: var(--white-color); font-size: 44px; } span.text { color: var(--secondary-label-color); font-size: 20px; text-align: center; padding: 0.7em 0; } } /*--------------------------------------- CUSTOM PROPERTIES ( customize-programs ) -----------------------------------------*/ .s-fitness-slider:before { background: var(--custom-rbtn-bg-color); } .fitness-slider { background: var(--subtitle-color); } .fitness-slide .slide-img-effect { filter: brightness(1000%) grayscale(100%) opacity(0.1) drop-shadow(0 0 0 #f23849) drop-shadow(0 0 0 #f23849) drop-shadow(0 0 0 #f23849) drop-shadow(0 0 0 #f23849) drop-shadow(0 0 0 #f23849); } .grid-container { display: flex; grid-gap: 50px; padding-block: 50px; text-align: left; justify-content: center; align-items: center; } .num_step { margin-block: 50px; color: var(--white-color); font: 52px/1.3em "Anton", sans-serif; text-align: center; border: 7px solid var(--app-container); border-radius: 20px; box-shadow: -2px 4px 44px 0px #4B0000; padding: 20px; width: fit-content; } .input-group-row { flex-direction: row; display: flex; flex-wrap: nowrap; width: 100%; align-items: center; } /*--------------------------------------- CUSTOM PROPERTIES ( books ) -----------------------------------------*/ #Animated_1 *, #Animated_1 *::before, #Animated_1 *::after { padding: 0; margin: 0; box-sizing: border-box; list-style: none; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } #Animated_1 { scroll-behavior: smooth; height: auto; color: var(--black-500); main { overflow: hidden; } a, button { cursor: pointer; user-select: none; } img { display: block; max-width: 100%; height: auto; object-fit: cover; image-rendering: crisp-edges; } } .section { margin: 0 auto; padding-block: 5rem; } .container_1 { height: auto; margin-inline: auto; padding-inline: 1.25rem; } .swiper-button-next::after, .swiper-button-prev::after { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; padding: 1rem; width: 2rem; height: 2rem; opacity: 0.75; border-radius: 50%; color: var(--white-100); background: var(--black-300); } .swiper-pagination-bullet { background: var(--secondary-label-color); } .swiper-pagination-bullet-active { background: var(--swiper-theme-color); } /*=============================== Custom-Programs = Form ===============================*/ /* ============================== Form drag and drop ==============================*/ .form-title { margin-top: 10px; color: var(--white-color); } .form-paragraph { color: var(--subtitle-color); margin-bottom: 10px; } .paragraph-Head { text-align: left; padding-block: 1em 0.25em; } .drop-container { position: relative; gap: 10px; flex-direction: column; align-items: center; margin-top: 2.1875rem; border-radius: 10px; color: var(--custom-rbtn-bg-color); cursor: pointer; transition: background .2s ease-in-out, border .2s ease-in-out; &:hover { color: var(--dark-gray-color); } } .drop-title { color: var(--custom-rbtn-bg-color); text-align: center; transition: color .2s ease-in-out; } .file-upload-label svg, [class*="custum-file-upload"] svg /*.custum-file-upload svg, .custum-file-upload_1 svg, .custum-file-upload_2 svg*/ { height: 30px; fill: var(--custom-rbtn-bg-color); filter: drop-shadow(2px 4px 6px var(--dark-color)); } .file-upload-label { cursor: pointer; background: var(--secondary-label-color); padding: 30px 70px; border: 2px dashed var(--custom-rbtn-bg-color); box-shadow: 0px 0px 200px -50px var(--transparent-color-7); } .file-upload-design { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .browse-button { background: var(--custom-rbtn-bg-color); padding: 5px 15px; border-radius: 10px; color: var(--white-color); transition: all 0.3s; align-items: center; display: flex; &:hover { background: var(--dark-color); } } /*.custum-file-upload svg, .custum-file-upload_1 svg, .custum-file-upload_2 svg */ [class*="custum-file-upload"] svg { fill: var(--secondary-label-color); } .form-file { display: flex; justify-content: center; } /*#drag_drop-1 label, #drag_drop-2 label, #drag_drop-3 label, #drag_drop-4 label, #drag_drop-5 label, #drag_drop-6 label, #drag_drop-7 label, #drag_drop-8 label */ [id^="drag_drop-"] label { display: flex; justify-content: center; font: 600 14px / 25px 'Montserrat', sans-serif; width: 100%; margin-block: 10px; } .file-info { display: inline-block; text-align: center; color: var(--custom-disabled-btn-bg-color); overflow-wrap: break-word; width: -webkit-fill-available; } /*#drag_drop-1:hover, #drag_drop-2:hover, #drag_drop-3:hover, #drag_drop-4:hover, #drag_drop-5:hover, #drag_drop-6:hover, #drag_drop-7:hover, #drag_drop-8:hover*/ :where([id^="drag_drop-"]):hover { background: var(--img-color-hover); border-radius: 10px; } .file-info button::before, .file-info button:hover::before, /* Specific styles for the first button set */ .file-info [id^="delete-button-"]::before, .file-info [id^="change-button-"]::before { content: unset; all: unset; } /* General styles for all delete and change buttons */ .file-info [id^="delete-button-"], .file-info [id^="change-button-"] { min-width: 150px; height: 30px; cursor: pointer; display: flex; align-items: center; border: unset; border-radius: 5px; box-shadow: 1px 1px 3px var(--transparent-color-1); background: var(--custom-btn-bg-color); margin: 10px; } /*div.file-info #delete-button-1 , div.file-info #delete-button-1 span, div.file-info #change-button-1, div.file-info #change-button-1 span, div.file-info #delete-button-2 , div.file-info #delete-button-2 span, div.file-info #change-button-2, div.file-info #change-button-2 span, div.file-info #delete-button-3 , div.file-info #delete-button-3 span, div.file-info #change-button-3, div.file-info #change-button-3 span, div.file-info #delete-button-4 , div.file-info #delete-button-4 span, div.file-info #change-button-4, div.file-info #change-button-4 span, div.file-info #delete-button-5 , div.file-info #delete-button-5 span, div.file-info #change-button-5, div.file-info #change-button-5 span, div.file-info #delete-button-6 , div.file-info #delete-button-6 span, div.file-info #change-button-6, div.file-info #change-button-6 span, div.file-info #delete-button-7 , div.file-info #delete-button-7 span, div.file-info #change-button-7, div.file-info #change-button-7 span, div.file-info #delete-button-8 , div.file-info #delete-button-8 span, div.file-info #change-button-8, div.file-info #change-button-8 span*/ div.file-info [id*="button-"]:is(button, span) { transition: 200ms; } .file-info [id^="delete-button-"] .text, .file-info [id^="change-button-"] .text { transform: translateX(35px); color: var(--white-color); font-weight: bold; } .file-info [id^="delete-button-"] .icon, .file-info [id^="change-button-"] .icon { position: absolute; border-left: 1px solid var(--custom-btn-bg-color); transform: translateX(110px); height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; } .file-info [id^="delete-button-"] svg, .file-info [id^="change-button-"] svg { width: 15px; fill: #eee; } .file-info [id^="delete-button-"]:hover, .file-info [id^="change-button-"]:hover { background: var(--app-container); } .file-info [id^="delete-button-"]:hover .text, .file-info [id^="change-button-"]:hover .text { color: transparent; } .file-info [id^="delete-button-"]:hover .icon, .file-info [id^="change-button-"]:hover .icon { width: 150px; border-left: none; transform: translateX(0); } .file-info [id^="delete-button-"]:focus, .file-info [id^="change-button-"]:focus { outline: none; } .file-info [id^="delete-button-"]:active .icon svg, .file-info [id^="change-button-"]:active .icon svg { transform: scale(0.8); } .file-input { position: absolute; left: 0; top: 0; opacity: 0; &:focus { outline: none; } } .img-preview-style { display: none; margin: 10px; width: 50%; border: unset; img { width: 100%; height: auto; display: block; border-radius: 10px; } } [type="file"] { height: 0; width: 0; overflow: hidden; } [type="file"]+label { font-family: sans-serif; background: var(--app-container); padding: 10px 30px; border: 2px solid var(--app-container); border-radius: 3px; color: var(--white-color); cursor: pointer; transition: all 0.2s; } [type="file"]+label:hover { background: var(--white-color); color: var(--app-container); } /* [type="file"] { height: 0; width: 0; overflow: hidden; label { font-family: sans-serif; background: var(--app-container); padding: 10px 30px; border: 2px solid var(--app-container); border-radius: 3px; color: var(--white-color); cursor: pointer; transition: all 0.2s; &:hover { background: var(--white-color); color: var(--app-container); } } } */ /* --============================== autoResize.zip ==============================--*/ .Resize { display: flex; align-items: center; justify-content: center; margin: 0; width: 100%; textarea { resize: none; /* Disable manual resizing */ overflow-y: hidden; /* Hide vertical scrollbar */ min-height: 40px; padding: 10px 10px; } } .error-area { color: var(--custom-btn-bg-color); font: italic 12px sans-serif; background: var(--secondary-label-color); border-radius: 0.25rem; margin-bottom: 10px; display: block; padding-inline: 1rem; padding-block: 0.25rem; background: var(--disclaimer-bg); color: var(--disclaimer-color); margin-top: -0.5rem; } /*#msform*/ .terms { text-decoration: underline; text-transform: math-auto; font-weight: bold; } #i_file.icon { margin-block: 10px; } .btn_book { display: inline-block; padding: 0.9rem 1.8rem; font: 700 16px / 1.2 "Poppins", sans-serif; color: var(--white-color); border: 3px solid var(--app-container); cursor: pointer; position: relative; background: transparent; text-decoration: none; overflow: hidden; z-index: 1; margin-top: 30px; width: 100%; &::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--app-container); transform: translateX(-100%); transition: all .3s; z-index: -1; } &:hover::before { transform: translateX(0); } } .btn-mini { cursor: pointer; } /*=============================== Modal Window ===============================*/ .modal-window { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.3s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) brightness(0.5) grayscale(1); background: rgba(0, 0, 0, 0.1); /*var(--transparent-color-1)*/ filter: drop-shadow(2px 4px 6px var(--dark-color)); animation: toastFloatIn 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1); &:target { visibility: visible; opacity: 1; pointer-events: auto; } p, li, ol, h2, h3 { color: #000; /*var(--dark-color)*/ padding-block: 0.1rem; } h1 { font-size: 28px; } a { color: #000; /*var(--dark-color)*/ } ol { font-weight: bold; } } .modal-window>div { border-radius: 1rem; } .modal-window div:not(:last-of-type) { margin-bottom: 15px; color: black; } .btn-t { background: #FFFFFF; /*var(--white-color)*/ padding: 1em 1.5em; border-radius: 0.5rem; text-decoration: none; } #modal-window { &::-webkit-scrollbar { background: transparent; width: 12px; } &::-webkit-scrollbar-thumb { border-radius: 99px; background: #E8E8E8; /*var(--secondary-label-color)*/ border: 4px solid #FFFFFF; /*var(--white-color)*/ } } .modal-container { max-height: 85vh; max-width: 600px; margin-inline: auto; background: #FFFFFF; /*var(--white-color)*/ border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2); /*var(--transparent-color-2)*/ } .modal-container-header { border-bottom: 1px solid #E8E8E8; /*var(--secondary-label-color)*/ display: flex; align-items: center; justify-content: space-between; background: #f23849; /*var(--app-container)*/ height: 7rem !important; flex-direction: row; min-height: 5rem !important; filter: drop-shadow(1px 2px 3px #999); /*var(--light-gray-color)*/ padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .modal-container-title { display: flex; align-items: center; gap: 8px; line-height: 1; font-weight: 700; } .modal-container-body { padding: 24px 32px 51px; overflow-y: auto; background: var(--shadow-color); /* background: var(--transparent-color-6);*/ &::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9); /*var(--transparent-color-9)*/ background: #CCC; /*var(--custom-disabled-btn-bg-color)*/ } &::-webkit-scrollbar { width: 12px; background: #E8E8E8; /*var(--secondary-label-color)*/ } &::-webkit-scrollbar-thumb { border-radius: 10px; background: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent) #D62929; /*var(--transparent-color-4)*/ } .page-content hr { margin: 1rem 0; border-color: #334155; } .page-content a { color: var(--app-container); /*#60a5fa*/ text-decoration: underline; &:hover { color: var(--primary-color); } } .rte ul, .rte ol { margin: 0.5rem 0; } } .modal-container-footer { display: flex; align-items: center; justify-content: center; border-top: 1px solid #E8E8E8; /*var(--secondary-label-color)*/ gap: 12px; position: relative; background: #666; /*var(--subtitle-color)*/ padding: 0.75rem 1.5rem 1.2rem; font-size: 0.75rem; text-align: center; &:after { content: ""; display: block; position: absolute; top: -51px; left: 5px; right: 15px; height: 50px; flex-shrink: 0; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent); pointer-events: none; } } .icon-button-t { padding: 0; border: none; background: rgba(0, 0, 0, 0.5); /*var(--transparent-color-5)*/ display: flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; border-radius: 3rem; width: 36px; height: 36px; transition: 0.2s; svg { width: 24px; height: 24px; } &:hover, &:focus { background: #E8E8E8; color: #000; transform: rotate(90deg); } } #open-modal-popup { hr { margin-block: 1rem; border: 2px groove; } a { text-decoration: underline; color: #40b5e7; /*var(--link-color)*/ font-weight: 600; transition: .25s ease-in; &:hover { text-decoration: underline; color: #f23849; /*var(--app-container)*/ } } } .text-container ul, .rte ul, .text-container ol, .rte ol { margin-block: 1em; } .unordered-list, .text-container ul, .rte ul { margin-inline: 1.25em 0; padding-inline: 2em; list-style-type: disc; } .rte ol { list-style-type: decimal; } .page-header__text-wrapper.text-container { align-items: center; justify-content: center; display: flex; } .heading-text { color: var(--custom-btn-bg-color); align-items: center; justify-content: center; display: flex; } .footer-item-1 { padding-top: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 12px; li { margin-bottom: 0; text-decoration: underline; list-style: none; padding-left: 1em; } } .footer__legal_menus>*:not(:first-child) { margin-left: 0.5rem; padding-left: 0.5rem; border-left: 1px solid; } /*----- Save data in database modal --------------------------------------------------------------*/ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border-radius: 8px; width: 80%; max-width: 400px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); color: black; P { margin-top: 10px; } } .close-modal { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; &:hover { color: black; } } .modal-buttons { display: flex; justify-content: space-between; margin-top: 20px; } .btn-primary { background-color: #4CAF50; color: white; border-radius: 4px; cursor: pointer; } #saveResultsBtn { padding: 10px 15px; } .btn-secondary { background-color: #f44336; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; } /*----- Best Selling Section Section --------------------------------------------------------------*/ /* Create three equal columns that floats next to each other */ .row-r { justify-content: center; margin-inline: 2rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem 5rem; columns: 3 auto; padding: 2rem; } span.prev-price { font: bolder 16px / 1 "Poppins", sans-serif; padding-right: 0.7em; color: var(--light-gray-color); text-decoration: line-through; } .product-item { margin-block: 30px; text-align: center; h3 { font: 900 20px / 1 "Righteous", sans-serif; color: var(--books-title); margin: 10px; } p { margin: 0; } img { display: inline-block; border: 0; max-width: 100%; height: auto; vertical-align: middle; position: relative; padding-block: 15%; cursor: pointer; width: 100%; } button:disabled { background: var(--subtitle-color); color: var(--custom-disabled-btn-bg-color); pointer-events: none; } } .book_card { transition: 1000ms all; filter: drop-shadow(0 5px 12px var(--transparent-color-5)); outline: 1px solid var(--background); overflow: hidden; img { object-fit: cover; } &:hover { cursor: pointer; transform: scale(1.15); filter: drop-shadow(0 0 20px rgba(232, 214, 110)); margin: 5px; } } .book_card:hover~.book_card { font-weight: bold; cursor: pointer; transform: translateX(22px); } #best-selling { background: var(--custom-rbtn-bg-color); padding: 120px 0; backdrop-filter: blur(10px); } #best-selling .products-thumb { margin-right: 60px; box-shadow: 2px 6px 34px 4px var(--books-title); } #best-selling .product-entry { margin-top: 50px; } #best-selling .product-entry .item-price { font: 900 24px "Poppins", sans-serif; color: var(--books-title); margin-block: 40px; text-shadow: 2px 2px 4px var(--transparent-color-5, rgba(0, 0, 0, 0.5)); } .products-thumb img { transition: all 0.5s ease-in-out; /*transition-timing-function: all 0.5s ease-in-out;*/ &:hover { filter: drop-shadow(2px 4px 6px var(--dark-color)); /*transition: all 0.5s ease-in-out; transition-timing-function: all 0.5s ease-in-out;*/ } } /*----- Icon --------------------------------------------------------------*/ #client-holder { /*background-size: 50px 100%; */ background-image: linear-gradient(135deg, rgb(48, 49, 51) 25%, transparent 25%), linear-gradient(225deg, rgb(48, 49, 51) 25%, transparent 25%); background-position: 0 0; /* background-image: linear-gradient(to right, transparent, rgb(48, 49, 51), transparent); */ /* transform: rotate(45deg); */ /* box-shadow: inset 0 0 0 2px white, 0 0 0 4px white; */ box-shadow: 0 1em 1em -1em rgba(0, 0, 0, .25); /* mask: linear-gradient(#000 0 0) top / 100% calc(100% - 50px) no-repeat, radial-gradient(farthest-side, #000 98%, #0000) bottom / 100px 100px no-repeat; */ /* mask: radial-gradient(60px at 50% -10px, #0000 98%, #000); */ /* clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px)); */ clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 100%, 0 100%); /*50px*/ /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px)); */ /* clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%); */ filter: drop-shadow(2px 4px 6px #000); img:hover { /*filter: grayscale(100%);*/ filter: drop-shadow(2px 4px 6px #000); } } #client-holder .row { padding-block: 30px; } .icon-grid { text-align: center; img { width: 10%; filter: brightness(0.5) drop-shadow(1px 2px 3px #000); } } .Terms_Privacy { display: flex; justify-content: center; padding: 2rem 1rem 0; } /*--- Section Title ---- Books with offer -----------------------------------------------*/ #special-offer .section-header { padding: 140px 0 220px; margin-bottom: -141px; z-index: -1; position: relative; padding-top: 30px; } .section-title { font: 500 44px / 1 "Righteous", sans-serif; position: relative; margin-bottom: 75px; width: 100%; &:after { content: ""; border-bottom: 3px solid var(--books-title); position: absolute; right: 0; bottom: -16px; left: 0; width: 25%; } } .section-header .section-title { &:before, &:after { content: ""; border-bottom: 1px solid var(--secondary-label-color); position: absolute; align-items: center; top: 60px; width: 100%; } &:before { left: 3px; } &:after { right: 3px; } } .section-header .title span { font-size: 14px; color: var(--custom-disabled-btn-bg-color); text-transform: uppercase; } #special-offer .section-title { width: 70%; margin: 0 auto; } /*----- Swal --------------------------------------------------------------*/ .swal2-actions { gap: 1.5rem; } /*----- Special Offer Section --------------------------------------------------------------*/ .hr-lines { position: relative; /* Ensure absolute positioning of pseudo-elements */ text-align: center; &:before { left: 10%; width: 20%; } &:after { right: 10%; width: 20%; } &:before, &:after { content: ""; position: absolute; top: 50%; height: 2px; background: var(--app-container); } } /*----- Cart --------------------------------------------------------------*/ #tooltip { margin-top: 5rem; width: 30rem; background: var(--transparent-color-7); color: var(--white-color); text-align: center; border-radius: 6px; padding: 5px; position: fixed; top: 40%; right: 0px; cursor: pointer; transition: background 0.3s, transform 0.3s; z-index: 1000; } /* ======== cart-1 ========= */ .cart { display: flex; flex-direction: column; justify-content: space-between; border-radius: 12px; border: 2px solid var(--light-gray-color); font-family: "Roboto", sans-serif; text-align: center; } .added_items, .added_items_1, .added_items_2 { margin-top: 7px; color: var(--dark-color); max-height: 8rem; overflow: auto; } .added_items { &::-webkit-scrollbar { width: 2px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2px; } &::-webkit-scrollbar-thumb:hover { background-color: #aaa; } } .added_items_1, .added_items_2 { max-height: unset; } .single_added_item, .single_added_item_1, .single_added_item_2 { display: flex; justify-content: space-between; align-items: center; background: var(--white-color); border-bottom: 1px solid var(--custom-disabled-btn-bg-color); border-radius: 3px; margin: 10px; padding-inline: 5px; } .row-img_1 { width: 50px; height: 50px; border-radius: 50px; border: 1px solid var(--total-cart); display: flex; align-items: center; justify-content: center; } .added_name, .added_price { margin-block: 5px; font: 900 18px "Roboto", sans-serif; white-space: nowrap; color: black; } .single_added_item .fa-trash { color: var(--total-cart); &:hover { color: var(--app-container); cursor: pointer; } } .price_del_container { display: flex; justify-content: flex-end; } .price { font: bolder 20px / 1.5 "Poppins", sans-serif; } .delete { background: transparent; cursor: pointer; border: unset; color: var(--light-gray-color); display: flex; justify-content: center; align-items: center; padding-inline: 1rem; &:hover { text-decoration: underline; color: var(--light-gray-color); } } .background_book { background: var(--custom-rbtn-bg-color); padding-block: 1rem; } .total_container { display: flex; justify-content: space-between; margin: 10px 0px 20px 0px; padding: 10px; border-top: 1px solid var(--custom-rbtn-bg-color); } #Check_out label, .total_container { color: var(--white-color); } .added_total, .total, .added_total_2, .added_total_1 { margin: 5px; font: 16px "Poller One", cursive; color: var(--total-cart); } .cart_3 .cart { display: flex; background: var(--white-color); justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 3px; width: 80px; margin: 0 auto 0; p { height: 22px; width: 22px; display: flex; align-items: center; justify-content: center; border-radius: 22px; background: var(--total-cart); color: var(--white-color); filter: drop-shadow(1px 2px 3px dimgrey); } } .cart_3 .fa-solid { color: var(--total-cart); font-size: 24px; /*filter: drop-shadow(1px 1px 1px var(--dark-color));*/ filter: drop-shadow(1px 2px 3px dimgrey); } .cart_3 { display: flex; align-items: center; justify-content: center; flex-direction: column; } .footer_cart { color: var(--dark-color); display: flex; justify-content: space-around; cursor: pointer; } .cart_position { position: fixed; top: 40%; right: 0px; border: none; border-radius: 50%; width: auto; height: auto; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s, transform 0.3s; box-shadow: 0 4px 12px var(--shadow-color); z-index: 900; } #btn-apply-coupon, .consultation-container .btn.btn-primary { transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); margin-left: 1rem; height: 40px; padding-block: unset; border-radius: 5px; } /*----- checkout end --------------------------------------------------------------*/ .tab-content, .tab-pane:not(.tab-content .tab-pane) { margin-inline: 10rem; } .alert-primary { background: var(--subtitle-color); box-shadow: 0 0 10px var(--transparent-color-8); transform: scale(1.05); } .alert-secondary { color: var(--custom-rbtn-bg-color); background: var(--secondary-label-color); border-color: var(--custom-disabled-btn-bg-color); } .alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; font: 400 16px / 1.4 "Righteous", sans-serif; } .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; border: 1px solid var(--transparent-color-1); border-radius: 0.25rem; background: radial-gradient(var(--subtitle-color), transparent) border-box var(--dark-color); font-family: monospace; } .card-header { padding: 0.75rem 1.25rem; margin-bottom: 0; background: var(--transparent-color-1); border-bottom: 1px solid var(--transparent-color-1); border-radius: 10px; } .clps-btn-style { transition: 0.5s ease; &:hover { color: var(--app-container); transform: skew(-15deg); } } #total-price-span { font: 400 24px / 1.4 "Righteous", sans-serif; } .radio-left { margin-left: 0.5rem; } .center { display: flex; justify-content: center; /* Horizontal centering */ align-items: center; /* Vertical centering */ ; } .text-center, .results { text-align: center !important; } .text-left { text-align: left; } .text-danger { color: var(--custom-btn-bg-color) !important; } .bg-alert { box-shadow: 0 0 3px var(--transparent-color-8); } .rounded-0 { border-radius: 0 !important; } .border-0 { border: 0 !important; } .w-35 { width: 36% !important; } .rounded { border-radius: 0.25rem !important; } .bg-transparent { background-color: transparent !important; } .rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } .border-top-0 { border-top: 0 !important; } .border { border: 3px solid var(--secondary-label-color) !important; } .int-chagne { transition: all 1s ease; } .space-between { display: flex; justify-content: space-between; } .alignleft, .alignright, .aligncenter, .alignnone { display: block; text-align: center; margin-inline: auto; margin-bottom: 1em; } #steroidplanner .col-auto { padding-block: 1rem; } .form-row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-inline: -5px; justify-content: center; align-items: flex-start; input, select { width: 100%; box-sizing: border-box; height: 40px; cursor: pointer; color: var(--white-color); border: 1px solid var(--custom-disabled-btn-bg-color); border-radius: 5px; flex: 1 1 0%; font: 14px / 1.5 Poppins, sans-serif; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; background: padding-box var(--input-bg-color); } .form-control { padding: 0 10px; } } .form-control { background-clip: padding-box; border-radius: 0.25rem; } .valid-feedback, .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 12px; } .valid-feedback { color: var(--valid-color); } .invalid-feedback { color: yellow; } .is-invalid { border-color: #dc3545 !important; } .is-valid { border-color: #28a745 !important; } .validation-error { margin: 15px 0; animation: shake 0.5s; } .form-control:invalid { border-color: #dc3545; } .form-control:valid { border-color: #28a745; } .list-group { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; padding-left: 0; margin-bottom: 0; } .btns, .submit-btn { background: var(--subtitle-color); color: var(--dark-color); font: 700 16px / 1.5 "Poppins", sans-serif; /* shorthand for font */ transition: all 1s ease; &:hover { color: var(--app-container); } } .card-header-tabs { border-bottom: 0; margin: 1rem 0 0.25rem 1rem; } .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-tabs .nav-item { padding-inline: 5px; p { color: var(--dark-color); } } .nav-tabs .nav-link { border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; background: var(--subtitle-color); } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { background: var(--custom-disabled-btn-bg-color); border-color: var(--white-color); } .nav-link { display: block; padding: 0.5rem 1rem; } .card-bg { transition: all 1s ease; color: var(--dark-color); font: 500 16px/1.2 "Righteous", sans-serif; } .card-title { margin-bottom: 0.75rem; } .card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; padding: 1.25rem; a { background: unset; } } .bank-font { font: 700 28px monospace; } /*style visa*/ .fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; } .or-spacer { position: relative; margin-bottom: 2rem; .mask { overflow: hidden; height: 20px; background-color: unset; &:after { content: ''; display: block; margin: -25px auto 0; width: 100%; height: 25px; border-radius: 125px / 12px; box-shadow: 0 0 8px var(--dark-color); } } a { width: 50px; height: 50px; position: absolute; bottom: 100%; left: 50%; border-radius: 100%; box-shadow: 0 2px 4px var(--light-gray-color); background: var(--white-color); margin-bottom: -25px; cursor: pointer; font-size: 24px; filter: drop-shadow(2px 4px 6px var(--dark-color)); span { position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; border-radius: 100%; border: 1px dashed var(--custom-disabled-btn-bg-color); text-align: center; line-height: 40px; font-style: normal; color: var(--light-gray-color); text-shadow: 0 2px 4px var(--light-gray-color); &:hover { filter: drop-shadow(2px 4px 6px var(--subtitle-color)); color: var(--app-container); border: 2px dashed var(--app-container); } } } } /*--------------------------------------- CUSTOM PROPERTIES ( plan-your-cycle ) -----------------------------------------*/ .sliders, .sliders h4 { display: flex; align-items: center; font: 700 18px / 1.4 Righteous, sans-serif; } #macro-calculator { display: block; margin-inline: 1.5rem; } .uh { padding-block: 1rem; font-size: 16px; line-height: 1.5rem; display: block; align-content: center; justify-items: center; } .calc-result { font: bold 16px 'Montserrat', sans-serif; margin-top: 1rem; text-align: center; background: var(--subtitle-color); border-radius: 2rem; padding: 0.25rem 1rem; color: var(--white-color); table { border: unset; box-shadow: none; margin-bottom: 0; border-collapse: collapse; } td:first-of-type { max-width: initial; width: 100%; text-align: left; text-overflow: ellipsis; overflow: hidden; max-width: 0; } tbody tr:nth-child(odd) td { background: none repeat scroll 0 0 var(--transparent-color-1); } td { background: transparent !important; border: 0; text-align: right; white-space: nowrap; } td, th { vertical-align: top; padding: 4px 8px; } td:last-of-type { /*padding-right: 0;*/ } } .fat-dot::before, .protein-dot::before, .carb-dot::before { display: inline-block; content: ''; border-radius: 100%; height: 0.65em; width: 0.65em; margin-right: 0.5rem; background: var(--fat-dot); } .carb-dot::before { background: var(--app-container); } .protein-dot::before { background: var(--link-color); } .percent { color: var(--custom-disabled-btn-bg-color); font-size: 18px; } #share-button { display: none; width: 90%; margin: 0 auto; margin-bottom: 30px; } #share-button button { border-radius: 12px; padding: 10px 20px; margin: 5px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } #share-button-new { background-color: #69af69; color: white; border: none; } .share-container { position: relative; text-align: center; margin-top: 10px; } #copy-message { display: none; font-size: 14px; margin: 3px; color: var(--contrast); position: absolute; bottom: -25px; left: 0; width: 100%; } /*====== option ========*/ /* Container */ .switch { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--border-radius); background: var(--input-bg); box-shadow: inset 0 2px 6px var(--shadow-color); width: 100%; margin-bottom: 2rem; border: 1px solid var(--border-color); } /* Option wrapper */ .switch .option { position: relative; width: 100%; } /* Hide radio */ .switch input[type="radio"] { display: none; } /* Labels */ .switch label { display: block; padding: 8px 16px; border-radius: var(--border-radius); font-size: var(--h9-font-size); font-weight: 500; color: var(--text-color); cursor: pointer; transition: all 0.25s ease; background: transparent; } /* Hover */ .switch label:hover { background: var(--transparent-color-8); color: var(--main-color); } /* Active (checked) */ .switch input[type="radio"]:checked+label { background: var(--custom-btn-bg-color); color: #fff; font-weight: 600; box-shadow: 0 2px 8px var(--shadow-color); } /* Click animation */ .switch label:active { transform: scale(0.95); } .sub_head { color: var(--primary-color); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid rgba(52, 152, 219, 0.3); display: flex; align-items: center; gap: 10px; font: 900 24px "Righteous", sans-serif; i { color: var(--white-color); } } .status-message { margin-top: 20px; padding: 15px; border-radius: 8px; text-align: center; font-weight: 600; transition: all 0.3s ease; } .status-good { background: var(--status-good-bg); border: 1px solid var(--status-good-border); color: var(--status-good-text); border-left: 4px solid var(--success-color); } .status-warning { background: var(--disclaimer-bg); border: 1px solid var(--status-warning-border); color: var(--disclaimer-color); border-left: 4px solid var(--status-warning-border); } .status-error { background: var(--status-error-bg); border: 1px solid var(--status-error-border); color: var(--status-error-text); border-left: 4px solid var(--error-color); } .footer-note { text-align: center; margin-top: 30px; padding: 20px; background: rgba(0, 0, 0, 0.1); border-radius: 10px; font-size: 0.9rem; opacity: 0.8; color: var(--white-color); width: 80%; box-shadow: var(--box-shadow); margin: 30px auto; /* Changed from margin-top to margin with auto */ display: block; /* Ensure it's block level */ } #HRT .mt-16 { text-align: center; padding: 20px; width: 80%; margin: 30px auto; display: block; } #HRT .space-y-12.mt-16 { padding: unset; width: 100% } #BFP, #macro, #TDEE, #peptidecalc, #diet_plan #Cont, #workout_plan #Cont, #steroidplanner, #health_tracker #Cont, #tdee_deficit_calculator, #Peptide_Protocol, #Research_Peptides, #HRT, #tracking_health_metrics #Cont { justify-items: center; } /*=================================================== Research Peptides - Peptide Protocol Plotter ===================================================*/ /* CSS Variables for Themes */ input[type="date"]::-webkit-calendar-picker-indicator { background-color: var(color-scheme); padding: 5px; border-radius: 3px; filter: drop-shadow(1px 2px 3px black); } .feature-card { padding: 15px; background: var(--input-bg); border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s; transform: translateY(0px); box-shadow: none; i { font-size: 24px; color: var(--primary-color); } } /* Header */ #Research_Peptides, #Peptide_Protocol_Plotter { span { color: var(--text-color); } i { color: white; } } #Research_Peptides { #historyList span:not(:first-child) { border-left: 3px solid #999; padding-left: 0.5rem; } i { color: var(--white-color); } } #Peptide_Protocol_Plotter>label { display: block; margin: 5px 0; /* Reduced margin for compactness */ font-weight: 600; color: var(--label-color); } #Peptide_Protocol_Plotter { h2 { text-align: center; margin-bottom: 20px; font-weight: 700; color: var(--primary-color); } button[type="button"], button[type="submit"] { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); padding: 10px 20px; /* Reduced padding */ border: none; font-size: 0.8em; transition: background 0.3s, transform 0.2s; width: 100%; box-shadow: 0 6px 15px var(--shadow-color); display: flex; align-items: center; justify-content: center; gap: 10px; margin: 5px; /* Reduced margin for compactness */ } button[type="submit"]:hover { background: linear-gradient(135deg, #1c86ee, #ff4500); transform: translateY(-3px); } button.add-compound-button { background: var(--accent-color); &:hover { background: #28a745; } } button.reset-button { background: var(--secondary-color); &:hover { background: #c0392b; } } canvas { margin-top: 30px; border: none; border-radius: 5px; width: 100%; max-height: 500px; box-shadow: 0 4px 12px var(--shadow-color); transition: box-shadow 0.3s; } } /* Compound Entry Styles */ .compound-entry { margin-bottom: 20px; position: relative; transition: background 0.3s, border-color 0.3s; h3 { margin-top: 0; color: var(--primary-color); font-size: 1.2em; margin-bottom: 10px; } } .remove-compound-button { max-width: 100px !important; transition: color 0.3s, transform 0.2s; &:hover { color: #c0392b; transform: scale(1.1); } } /* Dose Step Styles */ .dose-step, .dose-step-1 { margin-bottom: 10px; /* Added space between dose steps */ display: flex; flex-direction: column; /* Stack elements vertically */ } .dose-step-fields, .dose-step-fields-1 { flex-direction: row; /* Align label and input side by side */ justify-content: space-between; align-items: center; width: 100%; /* Full width for proper alignment */ gap: 10px; /* Space between fields */ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } .dose-step-fields>div { flex: 1; /* Make all inputs take equal space */ } .remove-dose-step-button { background: transparent; /* Remove background */ border: none; /* No border */ cursor: pointer; /* Pointer cursor */ color: var(--secondary-color); /* Color of the button */ font-size: 1.2em; /* Size of the button */ padding: 5px; &:hover { color: #c0392b; /* Color change on hover */ } } /* Metrics Display Styles */ .metrics-display { background: var(--container-bg); border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px var(--shadow-color); margin: 20px 0; h3 { color: var(--primary-color); margin-bottom: 10px; } p { margin: 5px 0; color: var(--label-color); } } #shotTrackerPromo { color: var(--label-color); } /* Compact Toggle Styles */ .toggle-container { display: flex; justify-content: center; align-items: center; margin-top: 20px; gap: 20px; /* Space between toggles */ } .toggle-button { input { display: none; } } .toggle-button .slider { width: 50px; height: 25px; background-color: var(--border-color); border-radius: 15px; position: relative; margin-right: 10px; transition: background-color 0.3s; /* Slider dark mode */ background: linear-gradient(to right, #3B82F6 0%, #3B82F6 25%, #4b5563 75%, #4b5563 100%); &::before { content: ''; position: absolute; width: 21px; height: 21px; background-color: white; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.3s; } } .toggle-button input:checked+.slider { background-color: var(--primary-color); } .toggle-button input:checked+.slider::before { transform: translateX(25px); } #Peptide_Protocol_Plotter .button-group { margin: unset; padding: unset; } .error-message { color: var(--error-color) !important; font-size: 0.9em; margin-top: -10px; margin-bottom: 10px; } /* Supplies Section */ .supplies-section { width: 100%; max-width: 1200px; margin: 40px auto; padding: 20px; box-sizing: border-box; h2 { padding-bottom: 0.5em; color: var(--text-color); } } .category-container { margin-bottom: 40px; } .category-title { font-size: 24px; color: var(--text-color); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); i { margin-right: 10px; color: var(--primary-color); } } /* Add this CSS to fix the layout */ .compound-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; h3 { margin: 0; color: var(--primary-color); } } .compound-inputs { display: flex; flex-direction: column; gap: 15px; } .input-field { display: flex; flex-direction: column; gap: 5px; input:invalid, select:invalid { border-color: var(--error-color); } input, select { height: 42px; padding: 8px 16px; border: 2px solid var(--border-color); border-radius: 8px; font-size: 15px; width: 100%; box-sizing: border-box; transition: border-color 0.3s, box-shadow 0.3s; /* Add smooth transitions */ &:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.1); } } input[type="checkbox"] { width: 24px; height: 24px; border-radius: 6px; cursor: pointer; position: relative; top: 8px; } } /* Update canvas container styles */ #dosePlotCanvas { background: var(--container-bg); border-radius: 8px; padding: 20px; box-shadow: 0 4px 12px var(--shadow-color); margin: 20px 0; max-width: 100%; height: auto !important; /* Override any inline height */ } /* Add styles for the form section */ #dosePlotterForm { margin-bottom: 20px; } /* Add styles for the injection schedule table */ /* Injection Schedule Table Styles */ .injection-schedule { background: var(--container-bg); border-radius: 8px; box-shadow: 0 4px 12px var(--shadow-color); margin: 20px 0; padding: 20px; width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; th, td { border: 1px solid var(--border-color); padding: 10px; text-align: center; } thead { background: var(--primary-color); } th { background-color: var(--input-bg); color: var(--label-color); font-weight: 600; padding: 12px; text-align: center; border-bottom: 2px solid var(--border-color); } td { padding: 12px; border-bottom: 1px solid var(--border-color); color: var(--text-color); } tbody tr:nth-child(even) { background-color: var(--bg-color); background: var(--input-bg); } tbody tr:hover { background: var(--border-color); } } .form-section, .chart-container { /* Add subtle border */ border: 1px solid var(--border-color); /* Improved Form Section Styling */ box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color); /* Add hover effect */ transition: transform 0.2s ease, box-shadow 0.2s ease; background: var(--container-bg); border-radius: 12px; padding: 25px; margin-bottom: 25px; &:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } } .choice-btn { padding: 15px 40px; border: 2px solid var(--primary-color); border-radius: 8px; background: transparent; color: var(--primary-color); font-weight: bold; cursor: pointer; padding: 12px 24px; font-weight: 600; display: flex; align-items: center; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); gap: 8px; &:hover { background: var(--primary-color); color: white; transform: translateY(-2px); box-shadow: 0 2px 8px var(--shadow-color); } } .history-section { background: var(--container-bg); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px var(--shadow-color); margin-top: 30px; } /* Enhanced History Section */ .history-entry { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); background: var(--input-bg); border-radius: 8px; padding: 15px; margin-bottom: 10px; transition: transform 0.2s ease; &:hover { transform: translateX(5px); } } .history-entry-content { display: flex; gap: 15px; align-items: center; span strong { color: var(--primary-color, #6ab7ff); } } .delete-button { background: none; border: none; color: var(--secondary-color); cursor: pointer; padding: 5px; &:hover { color: var(--error-color); } } .chart-legend { display: flex; justify-content: center; gap: 20px; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--border-color); } .legend-item { display: flex; align-items: center; gap: 8px; } .legend-color { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } /* Style for the chart container to ensure proper spacing */ canvas#trackingChart { padding: 0 0 20px 0; } /* Enhanced Select Styling */ #Research_Peptides, #health_tracker, #tracking_health_metrics { select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.7em top 50%; background-size: 1em auto; padding-right: 2.5em; /* Section Headers */ } h2, h3 { color: var(--primary-color); font-size: 1.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; } .modal { align-items: center; z-index: 999; } .modal-content { background: var(--container-bg); border-radius: 12px; width: 90%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); padding: 20px; margin: 10% auto; max-width: 500px; animation: animatetop 0.3s ease-out; } .modal-buttons { gap: 10px; justify-content: flex-end; margin: 1rem; } } /* Improved Shot Details Section */ #shotDetails { background: var(--input-bg); padding: 20px; border-radius: 8px; margin-top: 15px; border: 1px solid var(--border-color); } /* Toast Notification Styles */ .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } .toast { /* Add glass morphism effect */ backdrop-filter: blur(8px); background: rgba(var(--container-bg), 0.9); /* Improve animation */ animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s; /* Enhanced shadow */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); color: var(--text-color); padding: 12px 24px; border-radius: 8px; margin: 8px; display: flex; align-items: center; gap: 15px; max-width: 300px; } .toast.success { border-left: 4px solid var(--success-color); } .toast.error { border-left: 4px solid var(--error-color); } .toast.info { border-left: 4px solid var(--link-color); } .toast.warning { border-left: 4px solid var(--warning); } .step-container { background: var(--input-bg); border-radius: 12px; padding: 20px; margin-bottom: 20px; position: relative; border: 1px solid var(--border-color); transition: transform 0.2s ease; &:hover { transform: translateX(5px); } } .choice-button { padding: 10px 30px; border: 2px solid var(--primary-color); border-radius: 8px; background: var(--container-bg); color: var(--primary-color); font-weight: bold; cursor: pointer; transition: all 0.3s ease; &:hover { background: var(--primary-color); color: white; } } .choice-button.selected { background: var(--primary-color); color: white; } .confirmation-details { margin: 20px 0; background: var(--input-bg); padding-inline: 20px; border-radius: 8px; border: 1px solid var(--border-color); } .confirm-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-color); &::last-child { border-bottom: none; } label { font-weight: bold; color: var(--primary-color); } } .confirm-button { background: var(--accent-color); color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; } .cancel-button { background: var(--border-color); color: var(--text-color); border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; } .wizard-container { max-width: 500px; margin: 0 auto; padding: 20px; } .wizard-step { display: none; opacity: 0; transform: translateY(20px); transition: all 0.3s ease; } .wizard-step.active { display: block; opacity: 1; transform: translateY(0); } .input-with-unit input[type="date"] { padding: 12px; } .wizard-input { width: 100%; margin-bottom: 15px; border: 2px solid var(--border-color); border-radius: 8px; background: var(--input-bg); color: var(--text-color); font-size: 1rem; } .input-with-unit { position: relative; margin-bottom: 15px; margin: 1rem; input { border: 1px solid var(--custom-disabled-btn-bg-color); border-radius: 5px; width: 100%; box-sizing: border-box; height: 40px; flex: 1; cursor: pointer; font: 14px / 1.5 "Poppins", sans-serif; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; background: padding-box var(--input-bg-color); color: var(--white-color); padding-right: 3rem; } } .input-with-unit .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--label-color); } .wizard-buttons { display: flex; justify-content: space-between; margin-top: 20px; } .wizard-next, .wizard-back { padding: 10px 20px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; } .wizard-next { background: var(--primary-color); color: white; border: none; } .wizard-back { background: transparent; border: 1px solid var(--border-color); color: var(--text-color); } .shot-choice { display: flex; justify-content: center; gap: 20px; margin: 30px 0; } .compound-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin: 20px 0; } .compound-type-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; border: 2px solid var(--border-color); border-radius: 12px; background: var(--container-bg); color: var(--text-color); cursor: pointer; transition: all 0.3s ease; &:hover { border-color: var(--primary-color); transform: translateY(-2px); } i { font-size: 24px; color: var(--primary-color); } } .selected-compound { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--input-bg); border-radius: 8px; margin-bottom: 15px; i { color: var(--success-color); } } .compound-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 20px 0; max-height: 400px; overflow-y: auto; padding-block: 10px 20px; } .compound-btn { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 8px; background: var(--container-bg); color: var(--text-color); cursor: pointer; transition: all 0.2s ease; flex-direction: column; border: 2px solid var(--border-color); &:hover { border-color: var(--primary-color); transform: translateY(-2px); background: var(--input-bg); } small { color: var(--label-color); font-size: 0.8em; } } .compound-btn.selected { background: var(--primary-color); color: white; border-color: var(--primary-color); } .recent-compounds { margin-bottom: 30px; padding: 20px; background: var(--input-bg); border-radius: 12px; border: 2px solid var(--primary-color); h4 { margin: 0 0 15px 0; color: var(--primary-color); font-size: 1.1rem; text-align: center; } } .recent-compounds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .recent-compound-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--container-bg); color: var(--text-color); cursor: pointer; transition: all 0.2s ease; gap: 8px; padding: 15px; &:hover { border-color: var(--primary-color); transform: translateY(-2px); background: var(--primary-color); color: white; } small { color: var(--label-color); font-size: 0.8em; } i { font-size: 20px; color: var(--primary-color); &:hover { color: white; } } .compound-name { font-weight: 600; text-align: center; } .last-dose { font-size: 0.8em; color: var(--label-color); } } #Research_Peptides .analytics-card { background: linear-gradient(145deg, var(--container-bg), var(--input-bg)); padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); border-radius: 10px; &:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } } .positive-change { color: var(--success-color); } .negative-change { color: var(--secondary-color); } .category-divider { position: relative; text-align: center; margin: 30px 0; &::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border-color); } span { position: relative; background: var(--container-bg); padding: 0 15px; color: var(--label-color); font-size: 0.9em; } } /* Mobile responsiveness for badges */ .quick-entry-container { display: flex; flex-direction: column; gap: 20px; padding: 20px; background: var(--container-bg); border-radius: 12px; box-shadow: 0 2px 8px var(--shadow-color); } .quick-entry-shot { display: flex; gap: 10px; justify-content: center; } .choice-btn.primary { background: var(--primary-color); color: white; } .compound-section { margin-bottom: 24px; h4 { margin: 0 0 12px 0; color: var(--primary-color); font-size: 1rem; } } .suggestion-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .suggestion-btn { padding: 8px 16px; border: 1px solid var(--border-color); border-radius: 20px; background: var(--input-bg); color: var(--text-color); cursor: pointer; transition: all 0.2s ease; &:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); } } /*--------------------------------------- CUSTOM PROPERTIES ( Heart Rate Zones ) -----------------------------------------*/ .animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; } .animate-fade-in-up { animation: fadeInUp .6s ease-out forwards; } .animate-slide-in { animation: slideIn .4s ease-out; } /***************************/ #heart-rate-zones { input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; } input[type=range]::-webkit-slider-track { background: #E5E7EB; height: 16px; border-radius: 9999px; } input[type=range]::-moz-range-track { background: #E5E7EB; height: 16px; border-radius: 9999px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: #3B82F6; height: 32px; width: 32px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: all .2s; border: 1px solid var(--custom-btn-bg-color); &:focus { border-color: var(--custom-btn-bg-color); } } input[type=range]::-moz-range-thumb { border: none; background: #3B82F6; height: 32px; width: 32px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: all .2s; } input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.1); background: #2563EB; } input[type=range]:hover::-moz-range-thumb { transform: scale(1.1); background: #2563EB; } input[type=range]:active::-webkit-slider-thumb { transform: scale(.95); } input[type=range]:active::-moz-range-thumb { transform: scale(.95); } input[type="range"]:not(:last-of-type) { margin-block: 1.5em 2.5em; } input[type="range"]:focus { outline: none; } input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 8px 1px var(--app-container), 0 0 16px 4px var(--white-color); border: 3px solid var(--white-color); height: 24px; width: 24px; border-radius: 50%; background: var(--app-container); cursor: pointer; -webkit-appearance: none; } } .button-press { transition: all .1s ease; &:active { transform: scale(.95); } } .card-hover { transition: all .3s ease; &:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04); } } /*******************************************/ /* Layout & Structure */ .rounded-lg { border-radius: 0.5rem; } .appearance-none { -webkit-appearance: none; appearance: none; } .justify-center { justify-content: center; } .min-h-screen { min-height: 100vh; } .max-w-3xl { max-width: 48rem; } .relative { position: relative; } .flex { display: flex; } .justify-between { justify-content: space-between; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .grid { display: grid; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .space-x-4> :not([hidden])~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } .space-y-8> :not([hidden])~ :not([hidden]) { margin-top: 2rem; } .space-y-6> :not([hidden])~ :not([hidden]) { margin-top: 1.5rem; } .space-y-4> :not([hidden])~ :not([hidden]) { margin-top: 1rem; } .space-y-12> :not([hidden])~ :not([hidden]) { margin-top: 3rem; } .sm\:px-4 { @media (min-width: 640px) { padding-left: 1rem; padding-right: 1rem; } } .sm\:p-8 { @media (min-width: 640px) { padding: 2rem; } } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } /* Spacing */ .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .mb-8 { margin-bottom: 2rem; } .mb-6 { margin-bottom: 1.5rem; } .mt-1 { margin-top: 0.25rem; } .mt-16 { margin-top: 4rem; } .mt-6 { margin-top: 1.5rem; } .mt-3 { margin-top: 0.75rem; } /* Sizing */ .h-4 { height: 1rem; } .h-8 { height: 2rem; } .h-full { height: 100%; } .h-3 { height: 0.75rem; } .w-full { width: 100%; } /* Typography */ .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-6xl { font-size: 3.75rem; line-height: 1; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .opacity-80 { opacity: 0.8; } .opacity-75 { opacity: 0.75; } .leading-relaxed { line-height: 1.625; } .prose-lg { font-size: 1.125rem; line-height: 1.7777778; } .max-w-none { max-width: none; } /* Borders & Effects */ .rounded-3xl { border-radius: 1.5rem; } .rounded-2xl { border-radius: 1rem; } .rounded-full { border-radius: 9999px; } .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .border-2 { border-width: 2px; } /* Interactive Elements */ .cursor-pointer { cursor: pointer; } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .hover\:scale-105:hover { transform: scale(1.05); } /* Lists */ .list-disc { list-style-type: disc; } .list-inside { list-style-position: inside; } /* Flex Utilities */ .flex-shrink-0 { flex-shrink: 0; } .flex-1 { flex: 1 1 0%; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .absolute { position: absolute; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .text-right { text-align: right; } /*******************************************/ .dark .dark\:prose-invert { --tw-prose-body: #d1d5db; --tw-prose-headings: #fff; } /* Backgrounds */ .dark\:bg-gray-600 { background-color: #4b5563; } .dark\:bg-gray-600:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1)); } .dark\:bg-blue-900\/20 { background-color: rgba(30, 58, 138, 0.2); } .dark\:to-blue-900\/20:is(.dark *) { --tw-gradient-to: rgb(30 58 138 / 0.2) var(--tw-gradient-to-position); } .dark\:from-blue-900\/20 { --tw-gradient-from: rgb(30 58 138 / 0.2) var(--tw-gradient-from-position); --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .dark\:from-green-900\/20 { --tw-gradient-from: rgb(20 83 45 / 0.2) var(--tw-gradient-from-position); --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .dark\:from-purple-900\/20 { --tw-gradient-from: rgb(88 28 135 / 0.2) var(--tw-gradient-from-position); --tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .dark\:from-cyan-900\/20 { --tw-gradient-from: rgb(22 78 99 / 0.2) var(--tw-gradient-from-position); --tw-gradient-to: rgb(22 78 99 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .dark\:to-indigo-900\/20:is(.dark *) { --tw-gradient-to: rgb(49 46 129 / 0.2) var(--tw-gradient-to-position); } .border-yellow-200 { border-color: #fef08a; } .dark .dark\:border-yellow-800 { border-color: #92400e; } /* Light mode base colors */ .bg-white { background-color: #fff; } .bg-gray-50 { background-color: #f9fafb; } .bg-gray-300 { background-color: #d1d5db; } .bg-blue-100 { background-color: #dbeafe; } .bg-blue-600 { background-color: #2563eb; } .bg-green-100 { background-color: #dcfce7; } .bg-green-600 { background-color: #16a34a; } .bg-yellow-100 { background-color: #fef9c3; } .bg-yellow-600 { background-color: #ca8a04; } .bg-orange-100 { background-color: #ffedd5; } .bg-orange-600 { background-color: #ea580c; } .bg-red-100 { background-color: #fee2e2; } .bg-red-600 { background-color: #dc2626; } /* Text colors */ .text-gray-600 { color: #4b5563; } .text-gray-900 { color: #111827; } .text-gray-500 { color: #6b7280; } .text-gray-700 { color: #374151; } .text-gray-800 { color: #1f2937; } .text-blue-600 { color: #2563eb; } .text-blue-700 { color: #1d4ed8; } .text-green-600 { color: #16a34a; } .text-yellow-600 { color: #ca8a04; } .text-orange-600 { color: #ea580c; } .text-red-500 { color: #ef4444; } .text-red-600 { color: #dc2626; } /* Gradients */ .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .from-purple-50 { --tw-gradient-from: #faf5ff; } .to-pink-50 { --tw-gradient-to: #fdf2f8; } .from-cyan-50 { --tw-gradient-from: #ecfeff; } .to-blue-50 { --tw-gradient-to: #eff6ff; } .from-green-50 { --tw-gradient-from: #f0fdf4; } .to-emerald-50 { --tw-gradient-to: #ecfdf5; } .to-indigo-50 { --tw-gradient-to: #eef2ff; } .from-blue-50 { --tw-gradient-from: #eff6ff; } /* Dark mode overrides */ .dark .dark\:bg-white { background-color: #1f2937; } /* Actually dark bg */ .dark .dark\:bg-gray-800 { background-color: #1f2937; } .dark .dark\:bg-gray-700 { background-color: #374151; } .dark .dark\:bg-blue-900\/20 { background-color: rgba(30, 58, 138, 0.2); } .dark .dark\:bg-blue-900\/30 { background-color: rgba(30, 58, 138, 0.3); } .dark .dark\:bg-green-900\/20 { background-color: rgba(5, 46, 22, 0.2); } .dark .dark\:bg-green-900\/30 { background-color: rgba(5, 46, 22, 0.3); } .dark .dark\:bg-yellow-900\/20 { background-color: rgba(113, 63, 18, 0.2); } .dark .dark\:bg-yellow-900\/30 { background-color: rgba(113, 63, 18, 0.3); } .dark .dark\:bg-orange-900\/20 { background-color: rgba(124, 45, 18, 0.2); } .dark .dark\:bg-orange-900\/30 { background-color: rgba(124, 45, 18, 0.3); } .dark .dark\:bg-red-900\/20 { background-color: rgba(127, 29, 29, 0.2); } /* Dark mode text colors */ .dark .dark\:text-white { color: #f9fafb; } .dark .dark\:text-gray-300 { color: #d1d5db; } .dark .dark\:text-gray-400 { color: #9ca3af; } .dark .dark\:text-blue-300 { color: #93c5fd; } .dark .dark\:text-gray-200 { color: #e5e7eb; } /* Dark mode gradients */ .dark .dark\:from-purple-900\/20 { --tw-gradient-from: rgba(76, 29, 149, 0.2); } .dark .dark\:to-pink-900\/20 { --tw-gradient-to: rgba(131, 24, 67, 0.2); } .dark .dark\:from-cyan-900\/20 { --tw-gradient-from: rgba(22, 78, 99, 0.2); } .dark .dark\:to-blue-900\/20 { --tw-gradient-to: rgba(30, 58, 138, 0.2); } .dark .dark\:from-green-900\/20 { --tw-gradient-from: rgba(5, 46, 22, 0.2); } .dark .dark\:to-emerald-900\/20 { --tw-gradient-to: rgba(6, 78, 59, 0.2); } .dark .dark\:from-blue-900\/20 { --tw-gradient-from: rgba(30, 58, 138, 0.2); } .dark .dark\:to-indigo-900\/20 { --tw-gradient-to: rgba(49, 46, 129, 0.2); } /* Text Colors */ .text-green-700 { color: #15803d; } .dark .dark\:text-green-300 { color: #86efac; } .dark .dark\:text-orange-300 { color: #fdba74; } /* Gradients */ .dark .dark\:from-blue-900\/20 { --tw-gradient-from: rgba(30, 58, 138, 0.2); --tw-gradient-to: rgba(30, 58, 138, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } /* Training Zone Cards */ .bg-green-50 { background-color: #f0fdf4; } .bg-yellow-50 { background-color: #fefce8; } .bg-orange-50 { background-color: #fff7ed; } .bg-red-50 { background-color: #fef2f2; } /* Text Colors for Zones */ .text-yellow-700 { color: #a16207; } .dark .dark\:text-yellow-300 { color: #fde047; } .text-orange-700 { color: #c2410c; } /* Prose Content */ .prose { color: #374151; } /* Red text colors */ .text-red-700 { color: #b91c1c; } /* Table cell styling */ .py-4 { padding-top: 1rem; padding-bottom: 1rem; } /* For table cells specifically */ td.px-6.py-4 { color: #1f2937; /* Light mode text color */ } .dark td.px-6.py-4 { color: #e5e7eb; /* Dark mode text color */ } .formula-option { transition: all 0.3s ease; &:hover { transform: translateY(-3px); } } .formula-active { border: 2px solid #3B82F6; background-color: #eff6ff; } .dark .formula-active { background-color: #1e3a8a; border-color: #60a5fa; } .rhr-input { display: none; margin-top: 1rem; padding: 1rem; background-color: #f8fafc; border-radius: 1rem; } .dark .rhr-input { background-color: #374151; } /*=============================== Workout Plan Calc ===============================*/ .buttons button { padding-inline: 10px; margin: 5px; } .subtitle { font-size: 1.1rem; opacity: 0.8; } .content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; } #workout_plan .card, #diet_plan .card { border-radius: 10px; padding: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); align-items: center; display: block; background: radial-gradient(#c5c5c5, transparent) border-box var(--dark-color); } #workout_plan .card-title, #diet_plan .card-title { font-size: 1.5rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #3498db; color: #3498db; line-height: 1; display: flex; justify-content: space-between; } .week-header .card-title { background: var(--border-color); justify-content: space-between; display: flex; align-items: center; gap: 1rem; font-size: 1.5rem; font-weight: bold; color: var(--text-primary, #333); margin: 0; span { display: flex; align-items: center; gap: 0.5rem; } } .workout-summary { margin-bottom: 20px; } .totalDay { background-color: rgba(46, 204, 113, 0.2); } .chart-container { height: 400px; margin-top: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 5px; padding: 15px; } .buttons { align-items: center; text-align: center; } .btn-prim { background: #3498db !important; color: white; } .btn-success { background: #2ecc71 !important; color: white; } .btn-warning { background: #f39c12 !important; color: white; } .btn-danger { background: #e74c3c !important; color: white; } .btn-print { background: #666 !important; } .btn-prim:hover, .btn-success:hover, .btn-warning:hover, .btn-danger:hover, .btn-print:hover { opacity: 0.9; transform: translateY(-2px); } .history-item { background: rgba(44, 62, 80, 0.7); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; background: var(--border-color); border: 1px solid var(--border-color, #dee2e6); padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); &:hover { background: rgba(255, 255, 255, 0.08); border-color: #40b5e7; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } } .history-date { font-size: 0.9rem; opacity: 0.7; } .history-values { display: flex; gap: 15px; } .history-value { display: flex; flex-direction: column; align-items: center; min-width: 70px; } .history-label { font-size: 0.8rem; opacity: 0.8; margin-bottom: 5px; } .history-number { font-weight: bold; font-size: 1.1rem; color: #3498db; } .delete-week, .delete-button { cursor: pointer; padding: 8px; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; &:hover { background: rgba(231, 76, 60, 0.3); transform: scale(1.1); } } .notification.show { transform: translateX(0); } .week-header { align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border-color, #dee2e6); } .week-title { font-size: 1.2rem; color: #3498db; } /* Dragula Styles */ .gu-mirror { position: fixed !important; margin: 0 !important; z-index: 9999 !important; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); } .gu-hide { display: none !important; } .gu-unselectable { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } .gu-transit { opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); } /* Exercise row draggable styles */ .drag-over { border: 2px dashed #007bff; background-color: #e3f2fd; } /* Drag handle */ .drag-handle { cursor: move; color: #6c757d; padding: 5px; &:hover { color: #495057; } } /*=============================== Free Testosterone Calc ===============================*/ #result, #result_1 { display: none; } #result, #result_1, #result_2 { margin-top: 20px; padding: 10px; background: var(--secondary-label-color); border: 1px solid var(--white-color); border-radius: 4px; font-weight: bold; text-align: center; color: var(--custom-btn-bg-color); } #result_2 { background: unset; width: 80%; } .wp-block-columns { box-sizing: border-box; display: flex; flex-wrap: wrap !important; align-items: center; gap: 10px; justify-content: space-around; } #Testosterone_Conversion_Tool hr, #SteroidPlotter hr, #FAQs-page hr, #health_tracker hr, #tracking_health_metrics hr { background: var(--transparent-color-1); border: 0; height: 1px; margin-block: 40px; border-top: 2px solid; } #cycle-container hr { margin-block: unset; } #Testosterone_Conversion_Tool, #macro-calculator, #SteroidPlotter, #FAQs-page { a { text-decoration: underline; color: var(--link-color); font-weight: 600; transition: 0.25s ease-in; &:hover { color: var(--app-container); } } } #Testosterone_Conversion_Tool { input[type=number], select { width: max-content; } p { margin-bottom: 1.5em; } } .entry-content:not(:first-child), .entry-summary:not(:first-child), .page-content:not(:first-child) { margin-top: 2em; } .editor-styles-wrapper, .entry-content { counter-reset: footnotes; } /*======================================== CUSTOM PROPERTIES ( Steroid Plotter ) ========================================*/ .scroll-link-container { text-align: center; margin-bottom: 18px; padding: 0.8em 2.375em !important; background: var(--white-color); border-radius: 5px; } .sclink { color: var(--contrast) !important; text-decoration: none !important; } .prefix { padding: 8px 4px; font-size: small; font-weight: 600; } .dose { width: 90px; padding: 5px 7px !important; } #main-form { line-height: 2; } .compound-row .postfix { padding: 8px 4px; font-size: small; } .compound-row .from, .compound-row .to, .compound-row .schedule, .compound-row .offset-days { width: 100%; } #plot-button { background-color: #5c96ad; } #add-compound-button { background-color: #2D3E50; } #reset-compound-button { background-color: #bb4141; } #above-cycle-container { margin-top: 30px; } .compound-schedule-row { margin-top: 20px; } .single-compound-div { padding: 10px; margin-bottom: 20px; background: #3e3e3e; border-radius: 5px; } .single-compound-div:first-child .single-compound-close { display: none; } .single-compound-div:not(:first-child) { position: relative; padding-top: 40px; } .single-compound-close { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; cursor: pointer; &:before, &:after { position: absolute; left: 11px; top: 2px; content: ' '; height: 20px; width: 2px; background-color: #900; } &:before { transform: rotate(45deg); } &:after { transform: rotate(-45deg); } &:hover { background-color: #900; } &:hover:before, &:hover:after { background-color: #fff; } } .toggle { flex: 100% !important; } .toggle-label { display: inline-flex; flex-wrap: nowrap; align-items: center; column-gap: 10px; } .toggle-prefix { cursor: pointer; } .toggle-switcher { position: relative; width: 60px; height: 30px; margin: 0; vertical-align: top; background: #cccccc; border-radius: 15px; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.3s cubic-bezier(1, -0.6, 0, 1.65); &::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; background-color: #fff; border-radius: 15px; transition: all 0.3s cubic-bezier(1, -0.6, 0, 1.65); } &:checked { background-color: #2d3e50; } &:checked::after { left: 33px; } } .product-link-container { text-align: center; margin-top: 8px; margin-bottom: 10px; } #SteroidPlotter a.button { color: #ffffff; } .dflex { display: flex; } .page-hero { background: dimgray; color: #ffffff; padding: 20px 15px; text-align: center; h1, h2, h3, h4, h5, h6 { color: #ffffff; } } .inside-page-hero>*:last-child { margin-bottom: 0px; } #SteroidPlotter .wp-block-columns { margin-bottom: 0 !important; align-items: flex-start !important; justify-content: center; padding-inline: 0.5rem; } #SteroidPlotter .wp-block-column.is-layout-flow label { display: inline-flex; } #SteroidPlotter .row.compound-schedule-row.hide.wp-block-columns.compound-row.is-layout-flex.wp-container label { display: block; } #SteroidPlotter .toggle-button { display: flex !important; .slider { margin-inline: 10px; } &:hover { color: unset; } } .prefix { color: unset; } #SteroidPlotter { button, html input[type="button"], input[type="reset"], input[type="submit"], a.wp-block-button__link:not(.has-background) { color: #ffffff; background-color: #55555e; } button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, a.button:hover, button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, a.wp-block-button__link:not(.has-background):active, a.wp-block-button__link:not(.has-background):focus, a.wp-block-button__link:not(.has-background):hover { color: #ffffff; background-color: #3f4047; } button, input { transition: color .1s ease-in-out, background-color .1s ease-in-out; } body, button, input, select, textarea { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; text-transform: none; font-size: 17px; line-height: 1.5; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="date"], textarea, select { border: 1px solid var(--custom-disabled-btn-bg-color); border-radius: 5px; width: 100%; box-sizing: border-box; flex: 1; cursor: pointer; font: 14px / 1.5 "Poppins", sans-serif; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; background: padding-box var(--input-bg-color); color: var(--white-color); padding: 10px; height: 40px; } ul { list-style: disc; } h2 { font-size: 35px; margin-bottom: 20px; line-height: 1.2em; font-weight: 400; text-transform: none; font-size: 2rem; } ol, ul { margin: 0 0 1.5em 3em; } h3 { font-size: 24px; margin-bottom: 20px; line-height: 1.2em; font-weight: 400; text-transform: none; } sub { top: .5ex; } sub, sup { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin: 0 0 1.5em; width: 100%; } table, td, th { border: 1px solid var(--white-color); color: var(--white-color); text-transform: capitalize; } caption { display: table-caption; text-align: -webkit-center; unicode-bidi: isolate; font: bold 1.2rem "Poppins", sans-serif; padding-block: 1rem; } thead { display: table-header-group; vertical-align: middle; unicode-bidi: isolate; border-color: inherit; } tr { display: table-row; vertical-align: inherit; unicode-bidi: isolate; border-color: inherit; } th { font-weight: 700; border-width: 0 1px 1px 0; } td, th { padding: 8px; text-align: center; } tbody { display: table-row-group; vertical-align: middle; unicode-bidi: isolate; border-color: inherit; } td { border-width: 0 1px 1px 0; } input[type=number], select { margin-bottom: unset !important; } } .site-content { word-wrap: break-word; } .highcharts-credits { display: none; } .highcharts-data-table { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: auto; max-height: 500px; display: flex; flex-direction: column; border: 2px var(--white-color) solid; position: relative; } #highcharts-data-table-3 { width: 100%; border-collapse: collapse; background: white; border-collapse: separate; border-spacing: 0; caption { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; font-size: 1.2rem; font-weight: 600; padding: 16px; text-align: center; letter-spacing: 0.5px; position: sticky; top: 0; z-index: 20; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } thead { position: sticky; top: 60px; z-index: 15; } th { background: #f8f9fa; color: #495057; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; padding: 14px 16px; text-align: center; border-bottom: 2px solid #e9ecef; position: sticky; top: var(--header-height); z-index: 15; } tbody { display: block; overflow-y: auto; max-height: 400px; display: table-row-group; } tr { border-bottom: 1px solid #edf2f7; transition: background-color 0.2s; &:hover { background-color: #e6f7ff; } } tr:nth-child(even) { background-color: #f8fafc; } th, td { padding: 12px 16px; text-align: center; } td.highcharts-number { font-family: 'Courier New', monospace; font-weight: 600; color: #2d3748; text-align: center; } /* Custom Scrollbar */ tbody::-webkit-scrollbar { width: 10px; width: 8px; } tbody::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; background: #f1f1f1; } tbody::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; border: 2px solid #f1f5f9; background: #c5c5c5; &:hover { background: #a0aec0; background: #a8a8a8; } } tbody tr:last-child { border-bottom: none; } } #SteroidPlotter { thead tr { position: sticky; top: 0; z-index: 1; background: var(--border-color); box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); } tr:hover { background-color: #a8a8a8; color: black; } } /* Protocol Modal Styles */ .protocol-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 20px; animation: fadeIn 0.3s ease; } .button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .protocol-modal { background: var(--input-bg-color, #fff); border-radius: 12px; max-width: 700px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); animation: slideUp 0.3s ease; } .protocol-modal-header { padding: 20px 25px; border-bottom: 1px solid var(--border-color, #e0e0e0); display: flex; justify-content: space-between; align-items: center; h2 { margin: 0; font-size: 24px; color: var(--text-color, #333); } } .protocol-modal-close { background: none; border: none; font-size: 32px; cursor: pointer; color: var(--text-color, #666); padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; &:hover { background: var(--container-bg, #f0f0f0); color: var(--primary-color, #e74c3c); transform: rotate(90deg); } } .protocol-list { display: flex; flex-direction: column; gap: 15px; } .protocol-item { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: var(--body-bg-color, #f8f9fa); border: 1px solid var(--border-color, #e0e0e0); border-radius: 8px; transition: all 0.2s ease; &:hover { border-color: var(--primary-color, #3498db); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } } .protocol-info { flex: 1; h3 { margin: 0 0 8px 0; font-size: 18px; color: var(--text-color, #333); } p { margin: 0 0 5px 0; color: var(--primary-color, #666); font-size: 14px; } small { color: var(--label-color, #999); font-size: 12px; } } .protocol-actions { display: flex; gap: 10px; margin-left: 20px; button { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s ease; } } /*========= Plan your Cycle =========*/ #steroidplanner .row.compound-row { justify-content: space-evenly; } #all-compounds-div select { margin-bottom: 10px !important; } .form-group select { background-color: #272a31; color: #fff; } #steroidplanner form { margin: 0 auto; } .site-content .content-area { width: 100%; } #FAQs-page { padding-block: 3rem; padding-inline: 2rem; ul { list-style: disc; margin: 0 0 1.5em 3em; } ul li:first-child { padding-bottom: 0.5rem; } strong { font-weight: 700; } } #main-form .tooltiptext { .results { background-color: var(--bg-color); padding: 15px; border-radius: 8px; margin-top: 20px; h3 { margin-top: 0; color: var(--accent); } } .result-item { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #ddd; } } .blood-level-container { min-width: 280px; width: 25rem; margin: 1rem 1rem 0; } .slider-wrapper { position: relative; width: 100%; padding-bottom: 25px; input[type=range] { -webkit-appearance: none; appearance: none; cursor: pointer; } input[type=range]::-webkit-slider-track { background: #E5E7EB; height: 16px; border-radius: 9999px; } input[type=range]::-moz-range-track { background: #E5E7EB; height: 16px; border-radius: 9999px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: #3B82F6; height: 32px; width: 32px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: all .2s; border: 1px solid var(--custom-btn-bg-color); &:focus { border-color: var(--custom-btn-bg-color); } } input[type=range]::-moz-range-thumb { border: none; background: #3B82F6; height: 32px; width: 32px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: all .2s; } input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.1); background: #2563EB; } input[type=range]:hover::-moz-range-thumb { transform: scale(1.1); background: #2563EB; } input[type=range]:active::-webkit-slider-thumb { transform: scale(.95); } input[type=range]:active::-moz-range-thumb { transform: scale(.95); } input[type="range"]:not(:last-of-type) { margin-block: 1.5em 2.5em; } input[type="range"]:focus { outline: none; } input[type="range"]::-webkit-slider-thumb { border: 3px solid var(--white-color); height: 24px; width: 24px; border-radius: 50%; background: var(--app-container); cursor: pointer; -webkit-appearance: none; } input[type="range"]:focus { border-color: var(--custom-btn-bg-color); } } .blood-level-slider { -webkit-appearance: none; width: 100%; height: 12px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; margin-bottom: 5px; border: 1px solid var(--custom-disabled-btn-bg-color); } .slider-labels { display: flex; justify-content: space-between; position: absolute; width: 100%; padding-top: 5px; span { position: relative; font-size: 12px; text-align: center; } } .blood-level-percentage-wrapper { position: absolute; right: 0; top: -35px; display: flex; align-items: center; } .blood-level-input { visibility: hidden; width: 0; height: 0; position: absolute; padding: 0; margin: 0; border: none; } .blood-level-percentage { display: inline-block; background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); font-size: 16px; color: #333; min-width: 50px; text-align: center; white-space: nowrap; } /* New styles for the negative slider thumb */ .blood-level-slider.negative::-webkit-slider-thumb { background: #ff4d4d; } .blood-level-slider.negative::-moz-range-thumb { background: #ff4d4d; } #all-compounds-div .form-group label { margin-bottom: unset; } .compound-info { align-items: center; display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; justify-content: center; } /*===================================================== CUSTOM PROPERTIES ( Peptide Protocol Plotter ) ======================================================*/ /*============ standare ================*/ /*============ -------- ================*/ /* Button Styles for Compound Selection */ .compound-button { background: var(--input-bg); /*--primary-color*/ color: var(--text-color); /*white*/ padding: 10px 20px; border: 1px solid var(--border-color); /*none*/ border-radius: 5px; cursor: pointer; font-size: 1em; transition: background 0.3s, transform 0.2s; box-shadow: 0 6px 15px var(--shadow-color); /* Limit individual button width */ margin: 0 auto; width: 100%; height: 70px; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; transition: all 0.3s ease; &:hover { background: var(--subtitle-color); transform: translateY(-3px); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } span { font-size: 1.1em; font-weight: 600; margin-bottom: 4px; } small { font-size: 0.8em; opacity: 0.9; } } .compound-button.active { background: var(--subtitle-color); color: var(--dark-color); transform: translateY(1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Button Groups */ .button-group-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .option-button { background: var(--input-bg); color: var(--text-color); padding: 10px 15px; border: 1px solid var(--border-color); border-radius: 5px; cursor: pointer; transition: background 0.3s, color 0.3s, transform 0.2s; min-width: 80px; text-align: center; &:hover { color: white; transform: translateY(-2px); background: var(--subtitle-color); } } .option-button.active { background: var(--custom-disabled-btn-bg-color); color: var(--dark-gray-color); } .custom-input { display: none; margin-top: 10px; width: 100%; max-width: 300px; input { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--input-bg); color: var(--text-color); box-sizing: border-box; transition: border-color 0.3s, background 0.3s; &:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 5px var(--primary-color); } } } /* Button Styles */ .button-group { display: flex; align-items: center; margin: 20px auto; justify-content: space-between; /* Horizontal alignment */ width: 100%; /* Full width for button alignment */ margin: 50px 0px; button { flex: 1; min-width: 120px; padding: 12px 24px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex !important; /* Force flex display */ align-items: center !important; justify-content: center !important; gap: 8px; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; position: relative; line-height: 1; &:hover { transform: translateY(-3px); } } /* Remove any conflicting styles */ button *, button i::before { margin: 0 !important; padding: 0 !important; line-height: inherit !important; } /* Ensure text is centered */ button span { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } button[type="submit"] { background: var(--primary-color); color: white; } } /* Specific styles for the icon and text within the button */ .button-group button i, .button-group button .fas { margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: inherit !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; vertical-align: middle !important; } .clear-button { background: var(--secondary-color); &:hover { background: #c0392b; } } /* Syringe Visualization */ .syringe-container { width: 100%; max-width: 1000px; margin: 20px auto; position: relative; box-sizing: border-box; } .syringe { width: 100%; height: 100px; display: flex; align-items: center; position: relative; } .syringe-body { width: 100%; height: 80px; background: var(--input-bg); border: 3px solid var(--border-color); border-radius: 8px; position: relative; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .syringe-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: rgba(160, 160, 160, 0.8); transition: width 0.5s ease-in-out; opacity: 0.85; box-shadow: 0 0 10px rgba(30, 144, 255, 0.3); } .syringe-markers { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .marker { position: absolute; width: 1px; background: var(--text-color); bottom: 0; span { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); font-size: 16px; color: var(--text-color); white-space: nowrap; display: none; font-weight: 500; font-size: 12px; } } .marker.unit { height: 10px; opacity: 0.7; } .marker.ten-unit { height: 25px; width: 2px; background: var(--text-color); opacity: 0.9; span { display: block; bottom: auto; top: -30px; top: -25px; } &:first-child span { left: 0; } &:last-child span { left: auto; right: 0; } /* Adjust edge numbers specifically */ &:first-child span, &:last-child span { transform: translateX(0); } } /* Disclaimer */ /* Update the disclaimer to match exactly */ /* Research Disclaimer */ .disclaimer { margin: 20px auto; width: 75%; background: var(--disclaimer-bg); color: var(--disclaimer-color); border: 1px solid var(--disclaimer-border); padding: 15px; border-radius: 4px; margin-top: 20px; font-size: 0.9em; text-align: center; position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); p { margin: 0; } strong { font-weight: 600; } } /* FAQ Section */ .faq-section { background: var(--container-bg); padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); width: 80%; margin: 40px auto; box-sizing: border-box; h2 { margin-bottom: 15px; color: var(--text-color); font-weight: 700; font-size: 1.5em; text-align: center; } } /* FAQ Styling */ .faq { margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; h3 i { font-size: 0.8em; margin-left: 5px; transition: transform 0.3s; } h3 { position: relative; margin: 0; padding: 15px 20px; background-color: var(--container-bg); color: var(--text-color); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font: 600 1.1em "Righteous", sans-serif; transition: background-color 0.3s; &:hover { color: var(--app-container); background-color: var(--input-bg); } } p { margin: 0; padding: 15px 20px; display: none; border-top: 1px solid var(--border-color); background-color: var(--container-bg); color: var(--text-color); font-size: 0.95em; } i { transition: transform 0.3s; } h3[aria-expanded="true"] i { transform: rotate(180deg); } h3[aria-expanded="true"] { background: var(--input-bg-color); } } /* Cookie Consent */ .cookie-consent { position: fixed; bottom: 20px; left: 20px; color: var(--text-color); border-radius: 10px; z-index: 1000; max-width: 300px; display: flex; flex-direction: column; gap: 10px; right: 0; background: var(--input-bg); padding: 1rem; text-align: center; box-shadow: 0 -2px 10px var(--shadow-color); button { background: var(--primary-color); padding: 0.5rem 1rem; margin-left: 1rem; color: #fff; border: none; border-radius: 5px; cursor: pointer; align-self: flex-end; transition: background 0.3s; &:hover { background: var(--secondary-color); } } &:hover { animation: 0.5s ease-out 0s 1 normal none running shaking; } } /* Add/update these syringe styles */ /* Update the syringe container structure */ /* Remove any old syringe-tip styles */ /* Add/update these styles */ /* Update these styles to match exactly */ /* Calculator Results */ .calculator-results { width: 100%; display: flex; flex-direction: column; align-items: center; margin: 20px 0; margin: 20px auto; text-align: center; } /* Result Display */ .result { margin-bottom: 30px; width: 100%; font-size: 1.2em; color: var(--text-color); text-align: center; font-weight: bold; } /* Center text elements */ #result { text-align: center; } /* Replace the compound button group with this table structure */ /* Center syringe visualization */ /* Ensure all content is centered */ /* Base Container */ /* Compound Buttons */ .compound-table-container { width: 100%; margin: 20px auto; padding: 0 10px; box-sizing: border-box; } .compound-table { width: 100%; border-spacing: 10px; border-collapse: separate; td { width: 50%; padding: 0; } } /*============================*/ /*Shot Plotter | GLP-1, Growth Hormone & Research Peptides*/ /* Header Styles */ /* CSS Variables for Themes */ #glp1Calculator { padding: 88px 0px 0px; div p { text-align: center; font-weight: 600; color: var(--text-color); margin: 20px 0 10px 0; } label { display: block; margin: 20px 0; /* Reduced margin for compactness */ font-weight: 600; color: var(--label-color); display: block; text-align: center; } } /*======================================== Diet Plan Calc ( -=- ) ========================================*/ #diet_plan, #workout_plan { font-family: En, Kufi, Ar, Tahoma; } .trblk { display: block; transition: none; width: 100%; border: 1px solid #F1F5F9; color: #4c555f; background: var(--secondary-label-color); direction: rtl; white-space: nowrap; } .trblk>*, .trblk>*>* { width: 100%; display: block; } .infotr { overflow: hidden; } .infotr>* { transition: none; height: 44px; line-height: 44px; float: right; display: block; border: 1px solid #F1F5F9; font-size: 12px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.15); } .trhide, .week-number, .facts { position: absolute; top: 7px; right: 7px; height: 28px; line-height: 28px; padding: 0 10px; background: #69A2F9; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); color: #fff; border-radius: 2px; cursor: pointer; background: #f23849; } .nutrition-facts { font-size: 0.9em; background-color: #fefefe; border: 1px solid #ddd; padding: 20px; border-radius: 10px; width: auto; margin: 20px auto; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px 20px; font-family: 'Segoe UI', sans-serif; color: #333; div { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #eee; } i { font-style: normal; font-size: 1.1em; } .calories { color: #e67e22; } .protein { color: #27ae60; } .carbs { color: #3498db; } .fats { color: #c0392b; } .fiber { color: #8e44ad; } .vitamin { color: #f39c12; } .mineral { color: #16a085; } .water { color: #2980b9; } .cholesterol { color: #d35400; } .sugar { color: #e74c3c; } } #dietHistory, #workoutHistory, .protocol-modal-body, #historyList, .nutrition-facts { overflow-x: hidden; overflow-y: auto; scrollbar-color: #999 transparent; max-height: 30rem; overflow: auto; padding: 0.5rem; /* إخفاء شريط التمرير في Chrome/Safari */ &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2px; } &::-webkit-scrollbar-thumb:hover { background-color: #aaa; } } #addButton { text-align: center; display: block; overflow: hidden; padding: 10px; width: 100%; } #addButton>* { display: block; padding: 10px 0; margin: 0 auto; color: #fff; background: #69A2F9; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); cursor: pointer; border-radius: 2px; width: 140px; line-height: 1; font-size: 14px; text-align: center; background: #f23849; } #addButton#addList { display: none; } #addButton>*>i { padding-left: 10px; } .entry-content { font-size: 13px; a { color: #69A2F9; } h1 { font-size: 22px; color: #69A2F9; } h2 { font-size: 21px; color: #69A2F9; } h3 { font-size: 20px; color: #69A2F9; } h4 { font-size: 19px; color: #69A2F9; } h5 { font-size: 18px; color: #69A2F9; } h6 { font-size: 17px; color: #69A2F9; } ul li { list-style: inside; } li { position: relative; margin: 0 0 5px; } h1, h2, h3, h4, h5 { line-height: 1.9; padding: 10px; background: -moz-linear-gradient(left, #fff 0, #F1F5F9 50%, #F1F5F9 52%, #fff 100%); background: -webkit-linear-gradient(left, #fff 0, #F1F5F9 50%, #F1F5F9 52%, #fff 100%); background: linear-gradient(to right, #fff 0, #F1F5F9 50%, #F1F5F9 52%, #fff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); font-family: En, Kufi, Ar, Tahoma; border-radius: 0.5rem; } } #SteroidPlotter .entry-content { h1, h2, h3, h4, h5 { background: unset; } } #diet_plan .entry-content blockquote, #workout_plan .entry-content blockquote { position: relative; overflow: hidden; border-radius: 4px; color: white; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); display: flex; align-items: flex-end; } #diet_plan .note blockquote, #Alltr blockquote, #workout_plan .note blockquote { align-items: center; padding: 20px; } #Alltr blockquote { padding: 12px; } #Alltr>*+blockquote { margin-top: 40px; } #diet_plan .entry-content blockquote:before, #workout_plan .entry-content blockquote:before { line-height: 1; opacity: .5; content: "\f0f6"; font-family: FontAwesome; font-size: 20px; height: 14px; float: left; padding: 0 10px; position: unset; color: unset; margin-bottom: 5px; margin-right: 5px; } #diet_plan .entry-content blockquote.success, #workout_plan .entry-content blockquote.success { background-color: var(--success-background); color: var(--success-color); } #diet_plan .entry-content blockquote.info, #workout_plan .entry-content blockquote.info { background-color: var(--info-background); color: var(--info-color); } #diet_plan .entry-content blockquote.error, #workout_plan .entry-content blockquote.error { background-color: var(--error-background); color: var(--error-color); } #diet_plan .entry-content blockquote.yellow, #workout_plan .entry-content blockquote.yellow { background-color: var(--disclaimer-bg); color: var(--disclaimer-color); } #diet_plan .entry-content blockquote.success:before, #workout_plan .entry-content blockquote.success:before { content: "\f00c"; } #diet_plan .entry-content blockquote.info:before, #workout_plan .entry-content blockquote.info:before { content: "\f024"; } #diet_plan .entry-content blockquote.error:before, #workout_plan .entry-content blockquote.error:before { content: "\f071"; } #diet_plan .entry-content blockquote.yellow:before, #workout_plan .entry-content blockquote.yellow:before { content: "\f06e"; } .addtr { transition: none; position: relative; padding: 10px; width: 100%; border: 1px solid rgba(0, 0, 0, 0.15); display: flex; align-items: center; direction: rtl; } #r1 { background: #69A2F9; color: #fff; border-color: rgba(0, 0, 0, 0.1); background: #f23849; } .fa-trash { background: 0 0; margin: 0; padding: 0; border: 0; transition: all .4s ease; } .food-row, .exercise-row { transition: none; position: relative; display: block; overflow: hidden; width: 100%; border: 1px solid rgba(0, 0, 0, 0.15); cursor: move; transition: all 0.3s ease; &:hover { background-color: #f8f9fa; } } .food-name, .exercise-name { padding: 10px; height: 54px; line-height: 34px; float: right; display: block; width: 40%; font-size: 12px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.1); align-content: center; } .quantity-cell, .calories-cell, .protein-cell, .carbs-cell, .fats-cell, .fiber-cell, .total-reps-cell, .volume-cell, .sets-cell, .reps-cell, .weight-cell, .rest-cell, .image-cell { padding: 10px; height: 54px; line-height: 34px; float: right; display: block; font-size: 12px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.1); width: 10%; align-content: center; } .delete-btn { font-size: 14px; height: 24px; width: 24px; border-radius: 2px; line-height: 24px; position: absolute; padding: 0; border: 0; color: #fff; background: #e74c3c; top: 15px; cursor: pointer; right: 15px; text-align: center; /* منع أنماط المتصفح */ -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; /* إزالة اللون عند النقر على الهاتف */ } .delete-btn:hover, .add-btn:hover, .cancel-btn:hover { opacity: 0.5; .fa-trash { color: black; } } /* تأثير hover لسطح المكتب فقط */ @media (hover: hover) and (pointer: fine) { .delete-btn:hover { opacity: 0.8; } .delete-btn:hover .fa-trash { color: #fff; } } .add-btn { margin-left: 10px; } .gram-label { height: 34px; font-size: 15px; color: #69A2F9; text-align: center; } .food-search { padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 100%; margin-bottom: 10px; } .food-select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px; } .quantity-input { width: 60px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-right: 10px; } .add-btn { padding: 0 15px; background-color: #4CAF50; border: none; border-radius: 4px; cursor: pointer; float: right; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); font-size: 20px; color: #fff; line-height: 34px; text-align: center; } .cancel-btn { padding: 0 15px; background-color: #f44336; border: none; border-radius: 4px; cursor: pointer; float: right; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); font-size: 20px; color: #fff; line-height: 34px; text-align: center; } .nutrition-info { border-radius: 4px; display: flex; text-transform: uppercase; } /* 1. Type " " to add a single space. 2. Type "&ensp" to add 2 spaces. 3. Type "&emsp" to add 4 spaces. 4. Use the non-breaking space (nbsp) 4 times */ #Alltr>div>blockquote { padding: 10px 20px; padding-bottom: 15px; } .hide { display: none; } #Alltrs .input-group.input-group-label { display: flex; margin-block: 1rem; margin-right: 0.5rem; } #Alltrs .input-group.input-group-label>label { width: 50%; text-align: left; color: var(--white-color); } /***********************/ .wprm-recipe-icon svg { display: inline; height: 1.3em; margin-top: -.15em; overflow: visible; vertical-align: middle; width: 1.3em; } .wprm-recipe * { box-sizing: border-box; } .row .col { margin-inline: 1.5rem; } .two-line { display: flex; justify-content: space-between; } /* History Section Styles */ #historyCount { font-size: 0.9rem; font-weight: normal; color: var(--text-secondary, #666); background: var(--background-tertiary, #e9ecef); padding: 0.25rem 0.75rem; border-radius: 20px; } /* Empty History State */ .empty-history { text-align: center; padding: 3rem 1rem; color: var(--text-secondary, #666); i { font-size: 4rem; margin-bottom: 1rem; color: var(--text-muted, #adb5bd); opacity: 0.5; } p { font-size: 1.1rem; margin: 0.5rem 0; } .empty-hint { font-size: 0.9rem; color: var(--text-muted, #adb5bd); } } /* History Item */ .history-item.current-plan { border-left: 4px solid var(--primary-color, #28a745); background: var(--info-background, #f0f9f4); border-color: #40b5e7; } /* History Item Header */ .history-item-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem; } .history-item-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.1rem; color: #40b5e7; i { color: var(--primary-color, #28a745); font-size: 1.2rem; } } .current-badge { background: var(--primary-color, #28a745); color: white; padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .history-item-date { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-secondary, #666); i { font-size: 0.9rem; } } /* History Item Stats */ .history-item-stats { display: flex; gap: 1.5rem; padding: 0.75rem; background: var(--background-tertiary, #f8f9fa); border-radius: 6px; flex-wrap: wrap; .stat { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-primary, #333); i { color: var(--primary-color, #28a745); font-size: 1rem; } } } /* History Item Actions */ .history-item-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; button { flex: 1; min-width: 100px; padding: 0.6rem 1rem; border: none; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } } .btn-load { background: var(--primary-color, #28a745); color: white; &:hover { background: #2a9fd6; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(64, 181, 231, 0.3); } } .btn-delete { background: rgba(255, 82, 82, 0.8); color: white; &:hover { background: rgba(255, 82, 82, 1); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 82, 82, 0.3); } } /*======================================== CUSTOM PROPERTIES ( Deficit Calculator ) ========================================*/ #tdee-calculator-widget { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--text-color); margin: 20px auto; padding: 20px; border-radius: 20px; } #tdee-calculator-widget * { box-sizing: border-box; } #tdee-calculator-widget .calc-header { text-align: center; margin-bottom: 30px; h2 { color: var(--primary-color); font-size: 2.5em; margin-bottom: 10px; } p { color: var(--subtitle-color); font-size: 1.1em; margin: 0; } } #tdee-calculator-widget .calc-input-section, .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .grid_col { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); justify-items: center; } #tdee-calculator-widget .calc-unit-toggle { display: flex; justify-content: center; margin-bottom: 20px; gap: 10px; } #tdee-calculator-widget .calc-unit-btn { padding: 8px 20px; border: 2px solid var(--primary-color); background: transparent; color: var(--primary-color); border-radius: 25px; cursor: pointer; transition: all 0.3s; font-weight: 600; } #tdee-calculator-widget .calc-unit-btn.active { background: var(--primary-color); color: var(--dark-color); } #tdee-calculator-widget .calc-calculate-btn { background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); color: var(--dark-color); width: 100%; border: 2px solid var(--white-color); border-radius: 4px; font: 700 14px / 22px 'Montserrat', sans-serif; background: var(--custom-btn-bg-color); color: #FFFFFF; box-sizing: border-box; appearance: none; display: inline-block; position: relative; z-index: 0; text-decoration: none solid var(--white-color); text-align: center; vertical-align: middle; cursor: pointer; text-transform: uppercase; letter-spacing: normal; -webkit-font-smoothing: antialiased; max-width: 100%; height: 35px; overflow: hidden; box-shadow: 5px 5px 1px var(--transparent-color-5); transition: all 0.2s; /* Combined transitions */ &:hover { filter: brightness(120%); box-shadow: 0 0 0 0px #202020, 0 0 0 0px #c41b1b; } &:active { box-shadow: none; } &:before { content: ''; position: absolute; background: var(--dark-color); left: -100%; width: 10px; top: 0; bottom: 0; } &:hover::before { left: calc(100% + 10px); transition: left 500ms; } } #tdee-calculator-widget .calc-results-section { display: none; margin-top: 40px; } #tdee-calculator-widget .calc-warning-box { background: var(--status-warning-bg); border: 2px solid var(--status-warning-border); border-radius: 10px; padding: 15px; margin-bottom: 20px; display: none; color: var(--status-warning-text); } #tdee-calculator-widget .calc-warning-box.danger { background: var(--status-error-bg); border-color: var(--status-error-border); color: var(--status-error-text); } #tdee-calculator-widget .calc-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; } #tdee-calculator-widget { .calc-result-card { background: var(--input-bg); padding: 20px; border-radius: 15px; text-align: center; border: 2px solid var(--border-color); } .calc-macro-card { background: var(--container-bg); padding: 20px; border-radius: 10px; text-align: center; color: var(--text-color); } h3 { color: var(--subtitle-color); font-size: 0.9em; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; } .value { font-size: 2em; font-weight: 700; color: var(--primary-color); } .unit { font-size: 0.8em; color: var(--subtitle-color); } } #tdee-calculator-widget .calc-chart-container { position: relative; height: 400px; margin: 30px 0; } #tdee-calculator-widget .calc-macros-section { background: var(--info-background); padding: 25px; border-radius: 15px; margin-top: 30px; color: var(--info-color); } #tdee-calculator-widget .calc-macros-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; } #tdee-calculator-widget .calc-share-section { display: flex; gap: 10px; justify-content: center; margin-top: 30px; } #tdee-calculator-widget .calc-share-btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: transform 0.3s; &:hover { transform: translateY(-2px); } } #tdee-calculator-widget .calc-save-btn { background: var(--success); color: var(--dark-color); } /*======================================== Bio Marker Tracker ( Responsive ) ========================================*/ /* In your style.css file */ .app { display: flex; flex-direction: column; justify-content: center; margin: 2rem auto; padding: 10px; gap: 20px; } /* Health Tracker Table Styles */ #health_tracker, #tracking_health_metrics { table { width: 100%; border-collapse: collapse; position: relative; overflow: hidden; background-color: var(--container-bg); color: var(--text-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); margin: 1rem 0; } th, td { text-align: center; padding: 12px 8px; border: 1px solid var(--border-color); font-size: var(--h9-font-size); } th { background-color: var(--input-bg); color: var(--text-color); font-weight: 600; border-bottom: 2px solid var(--primary-color); } tr:nth-child(even) { background-color: var(--input-bg); } tr:nth-child(odd) { background-color: var(--container-bg); } tbody>tr:hover { background-color: var(--transparent-color-6); transition: background-color 0.2s ease; color: var(--white-color); } /* Status indicators */ .low { color: var(--danger); font-weight: bold; background-color: var(--status-error-bg); padding: 4px 8px; } .high { color: var(--danger); font-weight: bold; background-color: var(--status-error-bg); padding: 4px 8px; } .ok { color: var(--success); font-weight: bold; background-color: var(--status-good-bg); padding: 4px 8px; } .biomarker-header { cursor: pointer; background-color: var(--input-bg) !important; transition: all 0.3s ease; &:hover { background-color: var(--transparent-color-6) !important; color: var(--white-color); } } /* Edit and Delete buttons */ .edit, .delete { margin: 0 auto; padding: 6px 12px; font-size: var(--h9-font-size); border-radius: var(--border-radius); background-color: transparent; color: var(--text-color); border: 1px solid var(--border-color); cursor: pointer; transition: all 0.3s ease; } /* Trend chart cell */ .trend-cell { padding: 4px !important; svg { display: block; margin: 0 auto; border-radius: 4px; } } .delete-animation { background-color: var(--danger) !important; animation: deleteAnimate 0.4s ease-in-out forwards; } /* Form inputs in health tracker */ .inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .input-group-label { display: flex; flex-direction: column; gap: 0.5rem; } input:not(.chosen-search-input), select:not(.chosen-search-input), textarea:not(.chosen-search-input), input[type="date"]:not(.chosen-search-input) { padding: 0 12px; transition: all 0.3s ease; } /* Buttons */ #submit, #weight-submit, #cardio-submit, #sleep-submit, #measurements-submit, #updateEntry, #weight-update, #cardio-update, #sleep-update, #measurements-update, #cancelEdit, #weight-cancel, #cardio-cancel, #sleep-cancel, #measurements-cancel { padding: 4px 8px; font-size: var(--h8-font-size); font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin: 0.5rem 0; &:hover { transform: translateY(-2px); box-shadow: 0 4px 8px var(--shadow-color); } } #submit, #weight-submit, #cardio-submit, #sleep-submit, #measurements-submit { width: 100%; } #updateEntry, #weight-update, #cardio-update, #sleep-update, #measurements-update { background: var(--success); color: var(--white-color); } #cancelEdit, #weight-cancel, #cardio-cancel, #sleep-cancel, #measurements-cancel { background: var(--danger); color: var(--white-color); } #editSection, #weight-edit-section, #cardio-edit-section, #sleep-edit-section, #measurements-edit-section { display: flex; gap: 1rem; margin-top: 1rem; width: 100%; } } .result-box { padding: 5px; background-color: var(--secondary-label-color); /* Light teal background */ border-radius: 6px; border: 5px solid var(--light-gray-color); text-align: center; align-self: center !important; /* Override the parent's align-items: end */ } .result-box p:first-child { font-weight: 1000; color: var(--dark-gray-color); margin: 0; font-size: larger; } #labresult { font-size: 1.5em; color: var(--app-container); /* Red for emphasis on the result */ font-weight: bolder; margin: 5px 0 0 0 } /* Hidden rows for collapsible sections */ #health_tracker .hidden, #tracking_health_metrics .hidden { display: none !important; } #health_tracker #editSection>button, #tracking_health_metrics #editSection>button { flex: 1; } #health_tracker, #tracking_health_metrics { .chosen-single.chosen-default, #Biomarker_chosen, .chosen-results, .chosen-single span { text-align: left !important; } } /*======================================== Tracking Health Metrics ( Responsive ) ========================================*/ /* main card container */ .wraps { margin: 0 auto; width: 100%; transition: all 0.2s ease; } /* tab strip — FLEXIBLE but preserving original staggered hover effect */ ul.tabs { display: flex; flex-wrap: nowrap; justify-content: center; list-style: none; margin: 0; padding: 0; gap: 0; position: relative; width: 100%; li { flex: 1 1 0; min-width: 0; /* prevent overflow */ position: relative; list-style: none; text-align: center; /* tab anchor styling — retains original layered shadows & rounded corners */ a { position: relative; display: block; font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.5px; text-decoration: none; text-align: center; color: #ffffff; background: var(--primary-color); margin-top: 38px; /* base elevation for staggered look */ padding: 12px 0 8px 0; border: 0px solid #000; transition: margin 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1), padding 0.2s ease, background 0.2s, box-shadow 0.2s; box-shadow: 5px 10px 18px -4px rgba(0, 0, 0, 0.35); border-radius: 0; cursor: pointer; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; /* hover effect: slight lift & extra padding-bottom */ &:hover { margin-top: 32px; padding: 12px 0 12px 0; background: var(--link-color); color: #1e2f32; box-shadow: 4px 12px 22px -2px rgba(0, 0, 0, 0.45); } } /* individual corner rounding — first & last tab */ &:first-child a { border-top-left-radius: 12px; border-bottom-left-radius: 0; z-index: 4; box-shadow: 7px 12px 22px -2px rgba(0, 0, 0, 0.4); } &:last-child a { border-top-right-radius: 12px; border-bottom-right-radius: 0; z-index: 1; box-shadow: 2px 8px 20px -2px rgba(0, 0, 0, 0.3); } /* internal z-index layering for depth (original vibe) */ &:nth-child(1) a { z-index: 4; } &:nth-child(2) a { z-index: 3; } &:nth-child(3) a { z-index: 2; } &:nth-child(4) a { z-index: 1; } } /* active tab: sits lower, stands out with dark background & accent text */ li a.active { margin-top: 28px; padding: 14px 0 14px 0; background: #2c3e3f; /* deep slate, solid base */ color: #6edeef; font-weight: 600; letter-spacing: 0.6px; z-index: 10; box-shadow: 0px 12px 24px -4px rgba(0, 0, 0, 0.5); border-bottom: 2px solid var(--primary-color); /* active + hover refinement */ &:hover { background: #1f2f30; color: #8aecff; margin-top: 26px; } } } /* metric highlight inside paragraphs */ .metric-highlight { background: rgba(110, 222, 239, 0.2); display: inline-block; padding: 0.2rem 0.6rem; border-radius: 40px; font-weight: 600; color: #b3f0ff; margin: 0 2px; font-size: 0.95rem; } .badge-stat { font-weight: 600; color: #ffdd99; border-left: 3px solid #6edeef; padding-left: 10px; margin: 8px 0; } #weight_1, #cardio_1, #sleep_1, #measurements_1 { display: none; .input-group-label input, #goalSettingModal input { flex: auto !important; } .input-with-unit .unit { right: 30px; top: 65%; } #goalSettingModal .input-group-label { padding-bottom: unset; } } #tracking_health_metrics { /* content panel: matches active tab background, rounded bottom corners */ #content { width: 100%; background: #2c3e3f; /* same as active tab background for harmony */ border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; box-shadow: 0px 18px 28px -12px rgba(0, 0, 0, 0.4); transition: min-height 0.2s ease; overflow: hidden; margin-top: -2px; /* seamless join with tabs */ } table { margin: unset; } /* each content block styling */ content { display: none; animation: fadeSlide 0.25s ease-out forwards; p { font-family: 'Open Sans', sans-serif; font-size: 1rem; line-height: 1.55; padding: 28px 32px 34px 32px; margin: 0; color: #f0f9fe; font-weight: 400; background: transparent; } } /* small extra style for values */ strong { color: #ffd966; font-weight: 600; } .inputs_4 { align-items: end; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 20px auto; } .flex-row { flex-direction: row; align-items: center; label { margin-bottom: unset; } } button, #bedTime, #sessionDuration, #sessionTimes { padding: unset; } } #tracking_health_metrics .input-group-label { padding-bottom: unset; } #lastSession { display: flex; gap: 1rem; padding: 0 0 2rem 2rem; p { padding: unset; } } /*======================================== Consultation Page ========================================*/ /* Ensure intl-tel-input container is full-width */ .user-box .iti { width: 100%; display: block; } .iti { width: 100%; } #registerForm input[type="radio"] { border: 1px solid var(--custom-disabled-btn-bg-color); border-radius: var(--border-radius-large); width: 100%; box-sizing: border-box; height: 40px; flex: 1; cursor: pointer; font: 14px / 1.5 "Poppins", sans-serif; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; background: padding-box var(--input-bg-color); color: var(--white-color); padding: 8px 16px; } #registerForm #phoneNumber { padding-left: 90px; } #registerForm .iti__country-container { margin-left: 40px; } #iti-0__dropdown-content { background: padding-box var(--input-bg-color); padding: 10px; } .iti__search-input { padding-left: 10px !important; margin-bottom: 10px !important; } /* إخفاء الـ placeholder */ .iti__tel-input::placeholder { opacity: 0; transition: .3s; } /* عند الـ focus أو وجود قيمة */ .iti:focus-within .iti__selected-country, .iti.has-value .iti__selected-country { opacity: 1; visibility: visible; } .iti:focus-within .iti__tel-input::placeholder, .iti.has-value .iti__tel-input::placeholder { opacity: 1; } /* افتراضي: مخفي */ .user-box:not(.has-value) .iti__selected-country { opacity: 0; visibility: hidden; pointer-events: none; } .user-box.has-value .iti__selected-country, .user-box:focus-within .iti__selected-country { opacity: 1; visibility: visible; pointer-events: auto; } .media[data-field="phone"] .iti { display: none; } .about-section.edit-mode-active .media[data-field="phone"] .iti { display: block; } .consultation-page-header { padding: 22px 32px; background: var(--primary-color); color: #fff; border-radius: 28px; margin: 24px 24px 16px; max-width: 1400px; box-shadow: 0 12px 30px var(--shadow-color); h1 { font-size: 2rem; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; } p { opacity: .82; line-height: 1.8; } } .consultation-container { max-width: 1400px; margin: 0 auto; padding: 0 20px 40px; .card { border-radius: 28px; padding: 24px; box-shadow: 0 14px 28px var(--shadow-color); border: 1px solid var(--border-color); } .card-title { font-size: 1.45rem; font-weight: 700; color: var(--text-color); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; input, select { padding: 12px 16px; border-radius: 18px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); font-size: 1rem; } } } .consult-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 26px; margin-top: 24px; } .trainers-grid { display: flex; flex-wrap: wrap; gap: 14px; } .trainer-card { flex: 1 1 180px; min-width: 180px; padding: 16px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--input-bg); cursor: pointer; transition: 0.2s; &.selected { border-color: var(--primary-color); background: var(--input-bg-color); box-shadow: 0 0 0 2px var(--primary-color); } &:hover { transform: translateY(-2px); } } .trainer-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--primary-color); color: #fff; font-size: 1.4rem; } .trainer-name { font-weight: 800; font-size: 1.05rem; margin-bottom: 6px; color: var(--text-color); } .trainer-spec { font-size: 0.88rem; color: var(--label-color); margin-bottom: 8px; } .trainer-meta { font-size: 0.78rem; color: var(--label-color); } .types-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .type-card { border-radius: 18px; border: 1px solid var(--border-color); padding: 18px 16px; background: var(--input-bg); cursor: pointer; transition: 0.2s; &.selected { background: var(--input-bg-color); border-color: var(--primary-color); box-shadow: 0 8px 18px var(--shadow-color); } .tl { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--text-color); } .td { font-size: 0.87rem; color: var(--label-color); } .tp { margin-top: 10px; font-size: 0.95rem; font-weight: 700; color: var(--primary-color); } } .slots { display: flex; flex-wrap: wrap; gap: 10px; } .slot { padding: 10px 18px; border-radius: 32px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); cursor: pointer; transition: 0.15s; &.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); } &.taken { background: var(--error-background); color: var(--error-color); border-color: var(--error-background); cursor: not-allowed; opacity: .9; text-decoration: line-through; } } .selected-info { padding: 14px 18px; border-radius: 20px; background: var(--info-background); color: var(--info-color); margin-bottom: 16px; } .small-note { font-size: 0.9rem; color: var(--label-color); } .booking-list { margin-top: 16px; } .booking-item { padding: 14px 16px; border-radius: 20px; background: var(--input-bg); border: 1px solid var(--border-color); margin-bottom: 12px; strong { display: block; margin-bottom: 6px; color: var(--text-color); } span { color: var(--label-color); font-size: 0.9rem; } } /*======================================== 404 ( ERROR ) ========================================*/ /*--------------------------------------- SECTION -----------------------------------------*/ .page-404-title { color: var(--primary-color); font-size: 100px; font-family: "Paranoid", Sans-serif; } .page-404-title+h3 { color: var(--secondary-color); } /*--------------------------------------- CUSTOM BUTTON -----------------------------------------*/ .custom-btn { background: var(--app-container); border: 2px solid transparent; border-radius: var(--border-radius-large); color: var(--white-color); font-size: var(--h9-font-size); font-weight: var(--font-weight-bold); line-height: normal; transition: all 0.3s; padding: 6px 18px; align-content: center; &:hover { background: var(--ud-btn-color); color: var(--app-container); } } /*--------------------------------------- HERO -----------------------------------------*/ .hero-section { position: relative; overflow: hidden; padding-block: 100px; small { color: var(--primary-color); display: block; font-size: var(--h9-font-size); font-style: italic; position: relative; padding-left: 75px; } small::before { content: ""; background-color: var(--white-color); width: 50px; height: 2px; position: absolute; top: 50%; left: 35px; transform: translate(-50%, 0); } } .hero-bg { background-image: url(../img/bg-smoke-on-black-wooden.webp); background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 100vh; animation: gradientBG 120s 1s ease-in-out infinite; overflow: hidden; &::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(circle, var(--dark-color) -50%, transparent 50%); } .container { position: relative; z-index: 2; } } /*--------------------------------------- CUSTOM FORM -----------------------------------------*/ #fuzzyCanvas { cursor: pointer; } /* Base scramble text styling */ .scramble-text { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 600; text-align: center; line-height: 1.2; min-height: 80px; display: flex; align-items: center; justify-content: center; } /*--------------------------------------- Holographic Style Scramble -----------------------------------------*/ .holographic-scramble { color: transparent; background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ffff); background-size: 400% 400%; -webkit-background-clip: text; background-clip: text; animation: holographic-shift 3s ease-in-out infinite; font-family: 'Space Grotesk', sans-serif; letter-spacing: 2px; } /* --============================== Workout ==============================--*/ .multiple_select { overflow: hidden; -webkit-appearance: menulist; position: relative; &::before { content: var(--text); display: block; height: 100%; padding-top: 0.4rem !important; } option { display: none; background-color: #272a31; z-index: 100 !important; position: relative; } option::before { content: "\2610"; } option:checked::before { content: "\2611"; } } .multiple_select_active { overflow: visible !important; option { display: block; } } #equipment option:hover { background-color: #505050; } .css-zitybv { margin-top: 32px; margin-bottom: 32px; } .css-1ro3byo> :not(style):not(style) { margin: 0px; } .css-8hy539 { margin: 0px; font-weight: 600; font-size: 1.5rem; line-height: 1.375; font-family: Roboto, Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; text-align: left; } .css-od0866 { display: flex; flex-direction: row; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; padding-bottom: 8px; } .css-od0866> :not(style)~ :not(style) { margin-left: 8px; } .css-od0866> :not(style):not(style) { margin: 0px; } .css-8sh6a0 { margin: 0px 0px 0.35em; font-size: 1rem; font-weight: 400; line-height: 1.5; font-family: Roboto, Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; } .css-1cgxiny { color: white; background: linear-gradient(rgb(2, 58, 77), rgb(0, 184, 190)); display: flex; flex-direction: column; -webkit-box-flex: 1; flex-grow: 1; } .css-dmdn5f { background-color: rgb(255, 255, 255); color: rgb(16, 31, 39); box-shadow: rgba(100, 116, 139, 0.06) 0px 1px 1px, rgba(100, 116, 139, 0.1) 0px 1px 2px; position: relative; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; overflow: hidden; } [data-rbd-drag-handle-context-id="0"] { cursor: -webkit-grab; cursor: grab; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: manipulation; } .css-j7qwjs { display: flex; flex-direction: column; } .css-me7pip { background-color: rgb(255, 255, 255); color: rgb(16, 31, 39); box-shadow: rgba(100, 116, 139, 0.06) 0px 1px 1px, rgba(100, 116, 139, 0.1) 0px 1px 2px; cursor: pointer; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; overflow: hidden; padding: 8px; .MuiCardHeader-action { margin-top: 0px; } } .css-1ph8yrq { display: flex; -webkit-box-align: center; align-items: center; -webkit-box-flex: 1; flex-grow: 1; padding: 0px; } .css-1p83tvv { display: flex; flex: 0 0 auto; margin-right: 16px; } .css-8msu6a { display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; background-color: transparent; user-select: none; vertical-align: middle; appearance: none; text-align: center; font-size: 1.5rem; color: rgba(55, 65, 81, 0.26); cursor: grab; outline: 0px; border-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin: 0px; text-decoration: none; flex: 0 0 auto; padding: 8px 16px 8px 0px; border-radius: 50%; overflow: visible; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } .css-vubbuv { user-select: none; width: 1em; height: 1em; display: inline-block; fill: currentcolor; flex-shrink: 0; font-size: 1.5rem; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1); } .css-colq61 { position: relative; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; font-family: Roboto, Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 1.25rem; line-height: 1; border-radius: 50%; overflow: hidden; user-select: none; background-color: rgb(236, 239, 241); color: rgb(16, 31, 39); } .css-1hy9t21 { width: 100%; height: 100%; text-align: center; object-fit: cover; color: transparent; text-indent: 10000px; } .css-11qjisw { flex: 1 1 auto; } .css-1rf5zt1 { margin: 0px; font-weight: 600; font-size: 1.125rem; line-height: 1.375; font-family: Roboto, Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; display: block; } .css-erh9hz { margin: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; text-decoration: none; cursor: pointer; color: rgb(1, 121, 145); font-weight: 400; text-align: left; } .css-1bh09gn { flex: 0 0 auto; align-self: flex-start; margin-top: -4px; margin-right: -8px; margin-bottom: -4px; } .css-156c4zc { display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; background-color: transparent; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-align: center; color: rgb(107, 114, 128); font-size: 1.75rem; outline: 0px; border-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin: 0px; text-decoration: none; flex: 0 0 auto; border-radius: 50%; overflow: visible; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); padding: 12px; } .css-1nfc52d { display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; background-color: transparent; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-align: center; color: rgb(107, 114, 128); font-size: 1.75rem; outline: 0px; border-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin: 0px; text-decoration: none; flex: 0 0 auto; border-radius: 50%; overflow: visible; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); padding: 12px; } .css-1n2mv2k { display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .css-p69ec5 { display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; background-color: transparent; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-align: center; color: rgb(107, 114, 128); font-size: 1.75rem; outline: 0px; border-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin: 0px; text-decoration: none; flex: 0 0 auto; border-radius: 50%; overflow: visible; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); padding: 12px; } /*--------------------------------------- Generate Workout Plan -----------------------------------------*/ /* workout schadule */ table#workout_schedule { border: 2px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; border-radius: 5px; } table#workout_schedule caption { font-size: 1.5em; margin: 0.5em 0 0.75em; text-align: center; color: #40b5e7; font-family: "Righteous", sans-serif; } table#workout_schedule tr { border: 1px solid #ddd; padding: 0.35em; font-size: 1rem; } table#workout_schedule th, table#workout_schedule td { padding: 0.625em; text-align: center; border: 2px solid #ddd; } table#workout_schedule td { color: slategray; } table#workout_schedule th { font-size: 0.85em; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; background-color: dimgray; border: 2px solid #ddd; } /* Workout Plan Container */ #workout-plan { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; margin: 0 auto; padding-top: 2rem; color: var(--text-color, #333333); max-width: 100%; } /* Workout Day Container */ .workout-day-container { margin-bottom: 24px; padding: 25px; color: var(--white-color, #ffffff); border-radius: var(--border-radius-medium, 12px); box-shadow: var(--box-shadow, 0 4px 6px rgba(0, 0, 0, 0.3)); border: 1px solid var(--border-color, #e0e0e0); position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, 0.3); } } /* Day Header */ .workout-day-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; } .workout-day-label { font-size: var(--h5-font-size, 22px); font-weight: var(--font-weight-bold, 700); margin: 0; text-transform: uppercase; letter-spacing: 1px; color: inherit; } .workout-day-number { font-size: var(--h9-font-size, 14px); opacity: 0.9; background: rgba(255, 255, 255, 0.2); padding: 4px 12px; border-radius: var(--border-radius-large, 100px); color: inherit; } /* Workout Name */ .workout-name { font-size: var(--h3-font-size, 28px); font-weight: 800; margin: 10px 0 20px 0; text-shadow: 2px 2px 4px var(--transparent-color-5, rgba(0, 0, 0, 0.5)); display: flex; align-items: center; gap: 10px; color: inherit; &::before { content: '🏋️'; font-size: 24px; } } /* Exercises Area */ .exercises-area { background: var(--container-bg, #ffffff); border-radius: var(--border-radius, 10px); margin-top: 20px; box-shadow: 0 4px 10px var(--shadow-color, rgba(0, 0, 0, 0.08)); border: 1px solid var(--border-color, #e0e0e0); } /* Exercise Container Styles (from previous refactoring) */ .exercise-day-container { margin: 20px 0; padding: 20px; background: var(--container-bg, #ffffff); border-radius: var(--border-radius, 8px); box-shadow: 0 2px 8px var(--shadow-color, rgba(0, 0, 0, 0.1)); border: 1px solid var(--border-color, #e0e0e0); } .exercise-header-wrapper { display: flex; flex-direction: column; gap: 8px; } .exercise-header-row { display: flex; align-items: center; gap: 12px; } .collapse-btn { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; border: none; background: var(--input-bg, #f9fafb); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; padding: 0; flex: unset; &:hover { background: var(--border-color, #e0e0e0); transform: scale(1.05); box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1)); } svg { width: 20px; height: 20px; stroke: var(--text-color, #333333); stroke-width: 2; } } .exercise-header-info { flex: 1; display: flex; flex-direction: column; gap: 4px; } .day-title { margin: 0; font-size: var(--h5-font-size, 20px); font-weight: 600; color: var(--text-color, #333333); } .exercise-meta-info { display: flex; flex-direction: column; gap: 2px; } .muscle-group-info, .time-estimate-info { margin: 0; font-size: var(--h9-font-size, 14px); color: var(--label-color, #555555); } .summary-row { display: none; padding-left: 44px; } .summary-text { margin: 0; font-size: var(--h9-font-size, 14px); color: var(--label-color, #888888); font-style: italic; } .exercise-separator { height: 2px; background: linear-gradient(to right, transparent, var(--border-color, #f0f0f0), transparent); margin: 15px 0; } .exercise-container { background: var(--input-bg, #fafafa); border-radius: var(--border-radius, 6px); padding: 15px; border: 1px solid var(--border-color, #eee); } .no-exercises-msg { color: var(--light-gray-color, #999); text-align: center; padding: 20px; font-style: italic; } .hidden { display: none; } .exercise-container:not(.hidden) { animation: slideDown 0.3s ease-out; } /* from js */ #workout_plan form { padding: unset; } /* Responsive Workout Schedule */ @media screen and (max-width: 768px) { #workout-plan { padding: 10px; } .workout-day-container { padding: 10px; margin-bottom: 20px; } .workout-name { font-size: var(--h4-font-size, 22px); } .workout-day-label { font-size: var(--h7-font-size, 18px); } .exercises-area { padding: 0px; } .exercise-day-container { padding: 15px; } .day-title { font-size: var(--h6-font-size, 18px); } table#workout_schedule { border: 0; } table#workout_schedule caption { font-size: 1.3em; } table#workout_schedule thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } table#workout_schedule tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: 1.5em; background: var(--container-bg); border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } table#workout_schedule td { border-bottom: 1px solid #ddd; display: block; font-size: 0.9em; padding: 0.75em; } table#workout_schedule td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; color: var(--primary-color); padding-left: 0.5rem; } table#workout_schedule td:last-child {} } /* Responsive Design */ @media screen and (max-width: 480px) { table#workout_schedule caption { font-size: 1.1em; margin: 0.3em 0 0.5em; } table#workout_schedule td { font-size: 0.85em; padding: 0.65em; } } /**********************************/ .table { margin-top: 10px; th, td { padding-inline: 1rem; margin-inline: 1rem; } } #buttonField { margin-top: 10px; } .centered { text-align: center; } /*======================================== Meal Plan Generator ========================================*/ .meal-plan-result { display: none; padding: 20px 0; &.active { display: block; } /* Meal Plan Result Styles */ .plan-header { color: var(--white-color); padding: 30px; margin-bottom: 30px; text-align: center; background: var(--label-color); border-radius: var(--border-radius-medium); p { margin-top: 10px; opacity: 0.9; font-size: 1.1em; color: var(--dark-color); } h2 { margin: 0 0 15px 0; font-size: 2em; font-weight: var(--font-weight-bold); } .plan-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; margin-top: 25px; .stat-item { padding: 15px; border-radius: var(--border-radius); text-align: center; background: var(--transparent-color-6); color: var(--dark-color); .label { font-size: 1.2em; opacity: 0.9; margin-bottom: 5px; } .value { font-size: 1.3em; font-weight: var(--font-weight-bold); margin-top: 5px; } } } } } .meal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; } .meal-time { flex: 1; margin: 0 0 15px 0; font-weight: var(--font-weight-bold); font-size: var(--h6-font-size, 20px); text-shadow: 2px 2px 4px var(--transparent-color-5, rgba(0, 0, 0, 0.5)); display: flex; align-items: center; gap: 10px; color: inherit; } .macro-item { background: var(--transparent-color-7); padding: 12px 20px; border-radius: 10px; font-size: 0.95em; flex: 1; min-width: 120px; text-align: center; color: var(--label-color); align-content: center; strong { color: var(--text-color); } } .ingredients-list { background: var(--input-bg); padding: 20px 25px; border-radius: 12px; list-style-position: inside; li { margin-bottom: 10px; color: var(--label-color); line-height: 1.6; padding-left: 10px; } } .instructions-list { list-style: none; padding: 0; counter-reset: step-counter; li { &::before { content: counter(step-counter); position: absolute; left: 0; top: 0; background: var(--primary-color); color: var(--white-color); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: 0.9em; } } } .no-recipes-notice { background: var(--disclaimer-bg); border: 1px solid var(--disclaimer-border); color: var(--disclaimer-color); padding: 15px; border-radius: var(--border-radius); margin-top: 10px; line-height: 1.8; } /* Meal Planner Card */ .meal-planner { padding: 25px; margin-bottom: 20px; box-shadow: 0 4px 15px var(--shadow-color); transition: all 0.3s ease; background: var(--light-gray-color); border-radius: var(--border-radius-medium); &:hover { box-shadow: 0 8px 25px var(--shadow-color); transform: translateY(-2px); } } .recipe { display: flex; flex-direction: column; gap: 15px; } .recipe-nutris { display: flex; flex-direction: column; align-items: center; padding: 12px 20px; background: var(--input-bg); border-radius: 10px; min-width: 100px; } .recipe-image { width: 100px; height: 100px; border-radius: 10px; object-fit: cover; } /* Meal Header */ .meal-actions { display: flex; gap: 10px; align-items: center; } .time-badge { background: var(--accent-color); color: var(--white-color); padding: 8px 16px; border-radius: var(--border-radius-large); font-weight: 600; font-size: 0.95em; } .replace-btn { background: var(--secondary-color) !important; padding: 8px 16px; border-radius: var(--border-radius-large) !important; font: 700 0.9em / normal 'Montserrat', sans-serif !important; &:hover { opacity: 0.9; transform: scale(1.05); } } /* Recipe Section */ .recipe-clickable { cursor: pointer; display: flex; align-items: center; } .recipe-title { flex: 1; color: var(--primary-color) !important; font-size: 1.3em !important; line-height: normal !important; margin-left: 10px; } /* Nutrition Block */ .nutri-block { cursor: pointer; } .nutri-container { display: flex; flex-wrap: wrap; gap: 15px; margin-left: 15px; margin-top: 10px; } .nutri-label { font-size: 0.9em; color: var(--label-color); margin-bottom: 5px; } .nutri-value { font-size: 1.2em; font-weight: var(--font-weight-bold); /* Specific nutrition value colors */ &.calories { color: var(--text-color); } &.protein { color: var(--accent-color); } &.carbs { color: var(--secondary-color); } &.fat { color: var(--danger); } } /* Recipe Modal Styles */ #recipeModal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; z-index: 999; padding: 20px; box-sizing: border-box; &.active { display: flex; opacity: 1; } /* Modal Structure */ .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--transparent-color-7); backdrop-filter: blur(3px); } .modal-container { all: unset; position: relative; width: 100%; .modal-content { max-width: 800px; background: var(--container-bg); border-radius: var(--border-radius-medium); box-shadow: 0 20px 60px var(--shadow-color); overflow: hidden; /* Custom scrollbar for modal */ &::-webkit-scrollbar { width: 6px; } &::-webkit-scrollbar-track { background: var(--input-bg); border-radius: 3px; } &::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } &::-webkit-scrollbar-thumb:hover { background: var(--label-color); } /* Modal Header */ .modal-header { position: sticky; top: 0; z-index: 1000; background: #fff; padding: 20px; border-bottom: 2px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin-bottom: 20px; button:hover { background: var(--transparent-color-3); transform: rotate(90deg); } /* Close button */ .close-modal-btn { position: absolute; top: 0.5em; right: 0.5em; background: var(--danger); color: var(--white-color); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; font-weight: var(--font-weight-bold); box-shadow: 0 4px 12px var(--shadow-color); transition: all 0.3s ease; z-index: 20; user-select: none; &:hover { transform: scale(1.1); background: var(--danger); box-shadow: 0 6px 16px var(--shadow-color); color: #333; } } /* Recipe title in modal */ .modal-recipe-title { color: var(--primary-color); padding-right: 40px; font-size: 1.5em; text-shadow: 2px 2px 4px var(--transparent-color-5); flex: 1; margin: 0 20px; font-weight: 600; color: #333; line-height: 1.3; } } } } } /* Recipe Content Styles */ .recipe-image-modal { margin-bottom: 25px; } .modal-recipe-img { width: 100%; border-radius: 15px; max-height: 400px; object-fit: cover; box-shadow: 0 8px 25px var(--shadow-color); } .recipe-description { color: var(--label-color); margin-bottom: 25px; line-height: 1.8; font-size: 1.05em; padding: 15px; background: var(--input-bg); border-radius: 10px; border-left: 4px solid var(--primary-color); } .serving-info { background: var(--info-background); padding: 15px 20px; border-radius: 10px; margin-bottom: 25px; border-left: 5px solid var(--primary-color); strong { color: var(--primary-color); font-size: 1.1em; } span { color: var(--info-color); margin-top: 8px; display: inline-block; font-size: 0.95em; } } .macros { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } .macro-protein { color: var(--accent-color) !important; } .macro-carbs { color: var(--secondary-color) !important; } .macro-fat { color: var(--danger) !important; } .macro-fiber { color: var(--books-title) !important; } .macro-sugars { color: var(--light-gray-color) !important; } .macro-salt { color: var(--label-color) !important; } /* Ingredients & Instructions */ .ingredients-section, .instructions-section { margin-top: 30px; h4 { color: var(--text-color); margin-bottom: 15px; font-size: 1.3em; } } .instruction-step { margin-bottom: 20px; padding-left: 50px; position: relative; color: var(--label-color); line-height: 1.8; } .step-number { position: absolute; left: 0; top: 0; background: var(--primary-color); color: var(--white-color); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: 1em; box-shadow: 0 4px 8px var(--shadow-color); } /* Tips */ .tips-section { margin-top: 25px; background: var(--disclaimer-bg); padding: 20px; border-radius: 12px; border-left: 5px solid var(--disclaimer-border); h4 { color: var(--disclaimer-color); margin-bottom: 12px; font-size: 1.2em; } ul { list-style: none; padding: 0; } li { color: var(--disclaimer-color); margin-bottom: 10px; padding-left: 25px; position: relative; line-height: 1.6; } .tip-icon { position: absolute; left: 0; } } /* ==================================== STICKY MODAL HEADER CSS Add this to your main CSS file ==================================== */ /* Scrollable content area */ .modal-scrollable-content { scrollbar-width: thin; scrollbar-color: var(--primary-color) var(--input-bg); padding: 20px; overflow-y: auto; max-height: calc(80vh - 80px); /* Optional: Smooth scrolling */ scroll-behavior: smooth; /* Custom Scrollbar */ &::-webkit-scrollbar { width: 8px; } &::-webkit-scrollbar-track { background: var(--input-bg); border-radius: 4px; } &::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; } &::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); } } /*--------------------------------------- Dashboard ( VARIABLES ) -----------------------------------------*/ #dashboard, #dashboard_books { &.form-section { text-align: center; animation: fadeIn 0.5s ease-out; background: var(--container-bg); border-radius: var(--border-radius); padding: 25px; box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px var(--shadow-color); max-width: 1200px; margin: 25px auto; border-radius: 15px; } .section-header { display: flex; align-items: center; justify-content: center; margin-bottom: 25px; gap: 12px; i { color: var(--label-color); font-size: 28px; } } .section-title { color: var(--primary-color); margin: 0; font-size: 1.5rem; &:before, &:after { content: none; border: none; } } } .calculators-scroll-container { position: relative; margin: 25px 0; padding: 0 60px; } .calculators-scroll { display: flex; overflow-x: auto; gap: 16px; padding: 16px 8px; scroll-behavior: smooth; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ &::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } } .scroll-button { position: absolute; top: 50%; transform: translateY(-50%); background: var(--primary-color); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: all 0.2s ease; &:hover { background: var(--primary-hover); transform: translateY(-50%) scale(1.05); } &.left { left: 0; } &.right { right: 0; } } .calculator-card { flex: 0 0 auto; width: 200px; padding: 20px; background: var(--border-color); border-radius: 10px; text-align: center; transition: all 0.3s ease; cursor: pointer; border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; &:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); border-color: var(--primary-color); } &.selected { border-color: var(--primary-color); background: linear-gradient(135deg, #eff6ff, #dbeafe); transform: translateY(-5px); } &:hover .calculator-icon { transform: scale(1.1); } } .calculator-icon { font-size: 28px; color: var(--primary-color); margin-bottom: 12px; transition: transform 0.3s ease; } .calculator-title { font-size: 1rem; font-weight: 600; margin: 8px 0; color: var(--text-color); } .calculator-description { font-size: 0.85rem; color: var(--label-color); margin: 0; line-height: 1.4; } .cta-button { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--primary-color), #1a75ff); color: white; padding: 14px 32px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin-top: 10px; cursor: pointer; &:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); background: linear-gradient(135deg, var(--primary-hover), #0056b3); } } .selected-calculator { margin-block: 20px 40px; padding: 15px; background: var(--border-color); border-radius: 8px; border-left: 4px solid var(--primary-color); p { color: var(--text-color); } } .projects-section { flex: 2; background-color: var(--light-gray-color); border-radius: 32px; padding: 32px 32px 0 32px; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .projects-section-line { display: flex; justify-content: space-between; align-items: center; padding-bottom: 32px; } .projects-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; color: var(--main-color); p { font-size: 24px; line-height: 32px; font-weight: 700; opacity: 0.9; margin: 0; color: var(--main-color); } .time { font-size: 20px; } } .projects-status { display: flex; } .item-status { display: flex; flex-direction: column; margin-right: 16px; &:not(:last-child) .status-type:after { content: ""; position: absolute; right: 8px; top: 50%; transform: translatey(-50%); width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--secondary-color); } } .status-number { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--main-color); } .status-type { position: relative; padding-right: 24px; color: var(--body-bg-color); } .view-actions { display: flex; align-items: center; } .view-btn { width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; padding: 6px; border-radius: 4px; background-color: transparent; border: none; color: var(--main-color); margin-left: 8px; transition: 0.2s; &.active { background-color: var(--label-color); color: var(--body-bg-color); } &:not(.active):hover { background-color: var(--custom-rbtn-bg-color); color: var(--base); } } .project-boxes { margin: 0 -8px; overflow-y: auto; } .project-boxes.jsGridView .project-box-wrapper { width: 33.3%; } .project-boxes.jsListView .project-box { display: flex; border-radius: 10px; position: relative; } .project-boxes.jsListView .project-box>* { margin-right: 24px; } .project-boxes.jsListView .more-wrapper { position: absolute; right: 16px; top: 16px; } .project-boxes.jsListView .project-box-content-header { order: 1; max-width: 120px; p { text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .project-boxes.jsListView .project-box-header { order: 2; } .project-boxes.jsListView .project-box-footer { order: 3; padding-top: 0; flex-direction: column; justify-content: flex-start; &:after { display: none; } } .project-boxes.jsListView .participants { margin-bottom: 8px; } .project-boxes.jsListView .project-box-header>span { position: absolute; bottom: 16px; left: 16px; font-size: 12px; } .project-boxes.jsListView .box-progress-wrapper { order: 3; flex: 1; } /* Add this to your existing CSS styles */ .nav-badge { background: #ff4757; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; margin-left: 4px; font-weight: 600; text-transform: uppercase; display: inline-block; line-height: 1; position: relative; top: -5px; right: -15px; animation: heartbeat 2s infinite; } /* ===== Analytics Section Styles ===== */ .analytics-container { margin-block: 20px; } .analytics-grid { margin-top: 15px; } .analytics-card { /* Add gradient background */ background: linear-gradient(145deg, var(--container-bg), var(--input-bg)); /* Improve spacing */ padding: 24px; background-color: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; border-left: 4px solid #4a6cf7; /* Enhanced hover state */ transition: all 0.3s ease; &:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } } /* Improved icon styling */ .analytics-icon { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background-color: var(--border-color); color: #4a6cf7; font-size: 18px; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } .analytics-content { flex: 1; width: 85%; h4 { font-size: 1rem; font-weight: 600; color: var(--label-color); margin-bottom: 8px; } } .analytics-value { font-size: 1.2rem; font-weight: bold; color: var(--text-color); margin: 4px 0; display: flex; align-items: baseline; span:first-child { margin-right: 4px; } } .project-boxes.jsListView .analytics-grid .analytics-value { justify-content: center; } .analytics-subtitle { font-size: 0.8rem; color: var(--label-color); margin-top: 4px; } /* Goal card specific styling */ #goalCard { border-left-color: #10b981; .analytics-icon { color: #10b981; } } .enable-goal-btn { background: var(--primary-color); color: white; border: none; padding: 6px 14px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.8rem; width: fit-content; justify-content: center; transition: all 0.2s ease; transition: background-color 0.3s; &:hover { background-color: #3a5be0; transform: translateY(-2px); box-shadow: 0 2px 8px var(--shadow-color); } i { margin-right: 6px; } } .edit-goal-btn { background: none; border: none; color: var(--primary-color); cursor: pointer; margin-left: 8px; font-size: 14px; padding: 2px 6px; border-radius: 4px; transition: all 0.2s ease; &:hover { background: var(--input-bg); } } /* View-specific styles */ .project-boxes.jsListView .analytics-grid { grid-template-columns: 1fr; } .project-boxes.jsListView .analytics-card { display: flex; padding: 15px; } .project-boxes.jsListView .analytics-icon { position: static; margin-right: 15px; flex-shrink: 0; } .project-boxes.jsListView .analytics-content { flex-grow: 1; } .analytics-value.changed { animation: highlightChange 1.5s ease; } /* Icon colors for different metrics */ .analytics-card:nth-child(1) .analytics-icon { color: #ef4444; /*background-color: #fef2f2;*/ } .analytics-card:nth-child(2) .analytics-icon { color: #f59e0b; /*background-color: #fffbeb;*/ } .analytics-card:nth-child(3) .analytics-icon { color: #10b981; /*background-color: #ecfdf5;*/ } .analytics-card:nth-child(4) .analytics-icon { color: #3b82f6; /*background-color: #eff6ff;*/ } .analytics-card:nth-child(5) .analytics-icon { color: #8b5cf6; /*background-color: #f5f3ff;*/ } .hidden { display: none; } .refresh-btn { background: #e94560; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 5px; &:hover { background: #c53d54; } } /*======================== === Profile === ========================*/ .about-section { background: linear-gradient(135deg, var(--custom-rbtn-bg-color) 0%, var(--primary-color) 100%); border-radius: 15px; padding: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); color: white; margin-block: 40px; max-width: 1200px; } .section.about-section .section-title { text-align: left; margin-bottom: 40px; color: var(--secondary-label-color); h2 { font-size: 2.5rem; font-weight: 700; display: inline-block; } &::after { content: ''; display: block; width: 70px; height: 4px; background: #fff; border-radius: 2px; } } .about-avatar { text-align: center; img { max-width: 100%; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.2); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); max-height: 300px; object-fit: cover; } } .about-text h3 { font-size: 1.8rem; margin-bottom: 25px; font-weight: 600; } .media { display: block; margin-bottom: 15px; align-items: flex-start; label { min-width: 100px; font-weight: 600; margin-right: 15px; } p { flex: 1; margin: 0; padding: 8px 12px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } input, textarea, select { flex: 1; padding: 8px 12px; border-radius: 5px; background: rgba(255, 255, 255, 0.9); color: #333; font-size: 1rem; height: 35px; width: 100%; } textarea { min-height: 100px; resize: vertical; } } .about-section select.edit-mode { padding: 0px 12px; } .iti .iti__selected-dial-code { color: #333; } .btn-container { text-align: center; margin-top: 30px; } .btn { transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); &:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); color: var(--base); } i { margin-right: 8px; } } .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; &:hover { transform: translateY(-2px); } } .btn-secondary { background: #6c757d; color: white; &:hover { background: #5a6268; transform: translateY(-1px); } } .edit-mode .view-mode { display: none; } .avatar-container { position: relative; display: inline-block; } .avatar-overlay { position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.7); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; &:hover { background: rgba(0, 0, 0, 0.9); transform: scale(1.1); } i { color: white; font-size: 18px; } /* Disabled state for avatar overlay */ &.disabled { background: rgba(0, 0, 0, 0.4); cursor: not-allowed; &:hover { background: rgba(0, 0, 0, 0.4); transform: none; } } } .readonly-field { background-color: #f8f9fa; cursor: not-allowed; } .security--container--ya05Z .ud-form-group+.ud-form-group { margin-block-start: 2.4rem; } .ud-form-group { min-inline-size: 18rem; max-inline-size: 60rem; } .ud-form-label { display: flex; align-items: center; margin: 0; padding-block-end: 0.8rem; min-block-size: 2.8rem; } .ud-heading-sm { font-family: var(--font-stack-heading); font-weight: 500; line-height: 1.2; letter-spacing: 0; font-size: 1.4rem; } .security--form-control-container--Ik7yR { display: flex; } .security--form-control-container--Ik7yR>input:not(:last-child) { border-inline-end: 0; } .security--form-control-container--Ik7yR>input { flex: 1; } .ud-text-input-medium { block-size: 4rem; } .ud-text-input { border: 1px solid oklch(67.22% 0.0355 279.77deg); border-radius: 0.4rem; -webkit-appearance: none; display: block; padding-block: 0; padding-inline: 1.6rem; inline-size: 100%; background-color: var(--color-white); } .ud-text-sm { font-family: var(--font-stack-text); font-weight: var(--font-weight-light); line-height: 1.6; font-size: 1.4rem; } .ud-btn-icon-medium { padding-block: 0; padding-inline: 1rem; inline-size: 4rem; } .ud-btn-icon { min-inline-size: auto; } .ud-btn-medium { block-size: 4rem; } .ud-btn-text-sm { font-size: 1.4rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; } .ud-btn { position: relative; align-items: center; color: var(--ud-btn-color); border: var(--ud-btn-border); border-radius: var(--ud-btn-border-radius); background-color: var(--ud-btn-background-color); cursor: pointer; display: inline-flex; max-inline-size: 100%; min-inline-size: 8rem; padding-block: 0; padding-inline: 1.2rem; justify-content: center; user-select: none; -webkit-user-select: none; vertical-align: bottom; white-space: nowrap; &:focus, &:hover, &:active { color: var(--ud-btn-focus-color); background-color: var(--ud-btn-focus-background-color); } } .ud-icon-small { inline-size: 2rem; block-size: 2rem; } .ud-icon { fill: currentColor; display: inline-block; flex-shrink: 0; } .ud-text-input-medium { block-size: 4rem; } .basic-info--form--rae1b .ud-form-group+.ud-form-group { margin-block-start: 2.4rem; } .ud-text-input-container { display: flex; align-items: center; position: relative; z-index: 0; background-color: var(--color-white); input { border-radius: 0 5px 5px 0; } } .text-input-with-addons--with-addons--60Asl .text-input-with-addons--addon--wB52- { border: 0; display: flex; align-items: center; align-self: stretch; justify-content: center; block-size: auto; margin-block-start: 1px; margin-inline-end: 0; margin-block-end: 1px; margin-inline-start: 1px; text-align: center; align-content: center; } div.text-input-with-addons--addon--wB52- { background: oklch(97.59% 0.0029 264.54deg); padding-block: 0; padding-inline: 1.6rem; background-color: #272a31; width: 10rem; &:first-of-type { border-radius: 0.4rem 0 0 0.4rem; } } .text-input-with-addons--with-addons--60Asl .ud-text-input-container .ud-text-input:nth-child(2) { border-inline-start: 1px solid oklch(67.22% 0.0355 279.77deg); padding-inline-start: 1.6rem; } .ud-text-input-container .ud-text-input:nth-child(2) { border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start: 0; padding-inline-start: 0; } .ud-text-input-container .ud-text-input { box-shadow: none !important; flex: 1; background: rgba(255, 255, 255, 0.1); } .ud-text-input-container .ud-text-input-box { border: 1px solid oklch(67.22% 0.0355 279.77deg); border-radius: 0.4rem; position: absolute; inset: 0; z-index: -1; } /* --- Modal CSS for Proper Functionality --- */ /*--------------------------------------- MODAL EMAIL FORM -----------------------------------------*/ .modal-header .btn-close { filter: brightness(0) invert(1); position: relative; z-index: 22; top: 20px; right: 20px; transition: all 0.3s; &:hover { transform: rotate(180deg); } } .modal-content { margin: 10% auto; padding: 0; max-width: 500px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); animation: animatetop 0.3s ease-out; background-color: var(--label-color); } .modal-header { background-color: var(--dark-color); display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e9ecef; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px 12px 0 0; h3 { margin: 0; font-size: 1.5rem; font-weight: 600; } } .close-modal { opacity: 0.8; &:hover { opacity: 1; } } .modal-body { padding: 24px; background: var(--light-gray-color); h2 { color: var(--white-color); font-size: var(--h4-font-size); position: relative; bottom: 30px; } } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 24px; border-top: 1px solid #e9ecef; background-color: #f8f9fa; border-radius: 0 0 12px 12px; p { font-size: var(--btn-font-size); } } .form-group { margin-bottom: 20px; label { display: block; margin-bottom: 8px; font-weight: 600; color: #495057; text-align: left; } } #SteroidPlotter .form-group label { color: unset !important; } .password-input-container { position: relative; width: 100%; } .form-control { width: 100%; padding: 12px 45px 12px 16px; border: 2px solid #e9ecef; border-radius: 10px; font-size: 14px; transition: all 0.3s ease; background-color: #fff; &:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } } .password-toggle { transition: color 0.3s ease; padding: 4px; border-radius: 4px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #fff; &:hover { color: #495057; } } .btn-sm { padding: 6px 12px; font-size: 12px; } /* Add styles for confirm password container */ .confirm-password-container { display: none; } .confirm-password-container.visible { display: flex; } .confirm-password-field { display: none !important; } .password-field input { padding-right: 40px; } /* Confirm password field styling */ .confirm-password-container { display: none; opacity: 0; transition: opacity 0.3s ease; } .password-mismatch { border: 2px solid #f44336 !important; } .password-match { border: 2px solid #4CAF50 !important; } .confirm-password-container.visible { display: flex; opacity: 1; } .error-message { margin-block: 15px; } .edit-mode-active .confirm-password-container { display: flex; } /*======= sign ============*/ #align-items-center { display: flex; align-items: center; justify-content: center; } .Daground { font-family: Daground Regular; } .Azurite { font-family: Azurite Regular; /* font-family: Azurite Diagonal; */ /* font-family: Azurite Outline; */ /* font-family: Azurite Withered; */ font-weight: 600; font-size: 43px; padding-bottom: 10px; padding-inline: 2px; } /* Hide all main sections by default */ /* Dropdown styles */ .dropdown.show .dropdown-menu /*, #authDropdown.show .dropdown-menu*/ , .dropdown:hover .dropdown-menu { display: block; } /* Show the active section #authDropdown { position: relative; } */ /* Dropdown styles #authDropdown .dropdown-menu { position: absolute; right: 0; left: auto; min-width: 200px; display: none; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 1000; } */ /* Main section styling */ .main-section { display: none; /* Hidden by default */ width: 100%; padding: 20px; .alert { padding: 15px; margin-block: 20px; border: 1px solid transparent; border-radius: 4px; } .active { display: block; } } .shimmer { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(40, 40, 40, 0.1), transparent); animation: shimmer 3s infinite; pointer-events: none; } /*--------------------------------------- CUSTOM BUTTON -----------------------------------------*/ .custom-border-btn { background: transparent; border: 2px solid var(--secondary-color); color: var(--secondary-color); margin-left: 15px; &:hover { background: var(--secondary-color); border-color: transparent; color: var(--white-color); } } .vh { height: 100vh; text-align: center; display: flex; justify-content: center; align-items: center; } /*--------------------------------------- COUNTDOWN -----------------------------------------*/ .countdown { padding-left: 0; display: flex; /* Added to make the items inline */ } .countdown-title { color: var(--white-color); } .countdown-item { list-style: none; flex: 0 0 13%; margin: 15px; } .countdown-text { color: var(--section-bg-color); font-size: var(--h7-font-size); font-style: italic; } /*--------------------------------------- CUSTOM FORM -----------------------------------------*/ .custom-form { .fa { line-height: unset; display: inline-block; text-align: center; } .form-control, .form-select { border-radius: var(--border-radius-large); border-width: 2px; box-shadow: none; margin-bottom: 20px; padding: 10px 10px 10px 20px; outline: none; background: padding-box var(--input-bg-color); color: var(--white-color); padding-left: 45px; transition: 0.5s; border-color: #f23849; &:focus, &:hover { border-color: #E07A5F; } } button[type="submit"] { background: var(--custom-btn-bg-color); border: none; border-radius: var(--border-radius-large); color: var(--white-color); font-family: var(--heading-font-family); font-size: var(--h7-font-size); font-weight: var(--font-weight-bold); transition: all 0.3s; margin-bottom: 0; padding-left: 10px; &:hover, &:focus { background: var(--custom-btn-bg-hover-color); border-color: transparent; } } .form-check-label { color: var(--p-color); } } .contact-form .form-floating>textarea { border-radius: var(--border-radius-medium); height: 110px; } .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); } .form-floating>label { padding-left: 20px; } .login-form .custom-btn { font-family: var(--heading-font-family); padding: 10.25px 35px; font-size: var(--h7-font-size); } /*--------------------------------------- show password -----------------------------------------*/ .user-box { position: relative; margin-bottom: 30px; input { width: 100%; padding: 10px 0; margin-bottom: 30px; } label { position: absolute; top: 0; left: 0; padding: 10px 0 10px 15px; pointer-events: none; transition: 0.5s; line-height: normal; margin-left: 30px; } input:focus~label, input:valid~label, select:focus~label, select:valid~label, /*&:has(.iti input:focus) label, &:has(.iti input:valid) label*/ &:has(.iti input:focus) label, &.has-value label, &:has(select:focus) label, &:has(select:valid) label { transform: translateX(10px) translateY(-23px); font-size: 1em; padding: 0 10px; background: padding-box var(--input-bg-color); border-inline: 2px solid var(--primary-color); letter-spacing: 0.2em; } input:valid, input:focus, select:focus, select:valid { border: 2px solid var(--primary-color); } } .password-toggle-icon5, .password-toggle-icon1, .password-toggle-icon2, .password-toggle-icon3, .password-toggle-icon4 { position: absolute; top: 70%; right: 10px; transform: translateY(-50%); cursor: pointer; i { font-size: 18px; line-height: 1; color: var(--label-color); transition: color 0.3s ease-in-out; margin-bottom: 20px; padding-right: 5px; &:hover { color: var(--label-color); } } } #confirm_message { margin: 1rem; } /*************** icon in sign *******************/ #register, #login, #reset_pass, #request_reset { display: none; } /*--------------------------------------- HERO -----------------------------------------*/ .hero-title { color: var(--white-color); } .icon-circle { box-sizing: border-box; width: 40px; height: 40px; background-color: #E07A5F; padding: 8px; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; transform: scale(0.85); margin: 2px 0 0 2px; svg { width: 100%; left: -2px; position: relative; visibility: hidden; } svg#envelope-check { top: -1px; } svg#lock-check { top: -2px; } } /*-******************************-*/ .login-text { /*//background: hsl(40,30,60); //border-bottom: .5rem solid white;*/ color: white; font-size: 1.5rem; margin: 0 auto; max-width: 50%; padding: 2.5rem; text-align: center; text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); display: flex; justify-content: center; .fa-stack-1x { color: black; } } .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .sign { box-shadow: var(--transparent-color-8) 0px 15px 35px; padding: 40px; border-radius: 25px; background: var(--border-color); } /* COMPACT CAPTCHA YELLOW */ .capbox { background: #ccc2a7; background: linear-gradient(to right, dimgray, #272a31); border: rgba(255, 255, 255, 0.30) 0px solid; border-width: 2px 2px 2px 20px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; display: inline-block; padding: 5px 8px 5px 8px; border-radius: 4px 4px 4px 4px; } .capbox-inner { font: bold 12px arial, sans-serif; color: #000000; background: rgba(255, 255, 255, 0.30); /* SEMI TRANSPARENT BACKGROUND */ margin: 0px auto 0px auto; padding: 3px 8px 5px 10px; border-radius: 4px; display: inline-block; vertical-align: middle; width: 60%; } #CaptchaDiv { color: #000000; font: normal 25px Impact, Charcoal, arial, sans-serif; font-style: italic; text-align: center; vertical-align: middle; background-color: #FFFFFF; user-select: none; display: inline-block; padding: 3px 14px 3px 8px; margin-right: 4px; border-radius: 4px; } #CaptchaInput { border: #f23849 2px solid; margin: 3px 0px 1px 0px; background: var(--input-bg-color); color: var(--white-color); } /* Make placeholder text white */ #CaptchaInput::placeholder, /* For older browsers */ #CaptchaInput::-webkit-input-placeholder, #CaptchaInput::-moz-placeholder, #CaptchaInput:-ms-input-placeholder, #CaptchaInput:-moz-placeholder { color: var(--white-color); opacity: 0.7; } #login-link { padding-left: 0.5rem; text-decoration: underline; color: #40b5e7; font-weight: 600; transition: .25s ease-in; &:hover { text-decoration: underline; color: #f23849; } } /*======================================== CUSTOM PROPERTIES ( Print ) ========================================*/ .card.noprint { margin-block: 3rem 0; } .tagline { text-align: center; font-size: 1.1rem; font-weight: 700; color: #ff7700; text-transform: uppercase; letter-spacing: 2px; padding-top: 20px; } .signature { text-align: right; font-style: italic; color: #a0a0a0; font-size: 1.1rem; padding-top: 20px; page-break-before: avoid; } .signature span { color: #ff7700; font-weight: 600; } .footer_print { display: none; justify-content: space-evenly; width: 100%; border-top: 5px solid #2a2f4c; margin-top: 50px; page-break-inside: avoid; } .logo_print { /*background: var(--white-color) url(../img/12.webp) center center / 100% auto no-repeat;height: 80px; border: 1px solid #ddd; */ border-radius: 4px; /* padding: 5px; */ width: 250px; object-fit: contain; object-position: center; /*assets/img/12.webp - ../img/12.webp*/ /* height: 5rem; background: var(--white-color) url(assets/img/12.webp) center center / 100% auto no-repeat; */ display: none; } body.pdf-mode .logo_print { display: none; } /*--------------------------------------- Print Style -----------------------------------------*/ @media print { /* General print styles */ body * { visibility: hidden; } html.dark, html.light { background: dimgray; } body { background: white; color: black; font-size: 12pt; font-family: Arial, sans-serif; /*border: 8px solid black; border-top: 8px solid #f23849; border-bottom: 8px solid #f23849;*/ padding: 10px; /*margin: 50px;*/ /*position: relative; font-size: 12pt; margin: 0; padding: 0; background: #fff !important; color: #000 !important;*/ /* background: var(--white-color) url(assets/img/1_2.webp) center center / 100% auto no-repeat;*/ } /* Header */ body::before { /*content: "AHMED ELGENEDY";*/ display: block; font-size: 1.5rem; font-weight: bold; text-align: left; margin-bottom: 20px; background: url('logo.webp') no-repeat left center; /* Replace with logo path */ background-size: 60px auto; padding-left: 70px; /*background: var(--white-color) url(assets/img/1_2.webp) center center / 100% auto no-repeat; transform: translate(-50%, -50%) rotate(-15deg); content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,AHMED ELGENEDY'); background-repeat: repeat; opacity: 0.2; z-index: -1; pointer-events: none;*/ } /* Watermark */ body::after { /**/ content: "AHMED ELGENEDY"; position: fixed; top: 50%; left: 50%; font-size: 5rem; font-weight: bold; color: #000; opacity: 0.07; transform: translate(-50%, -50%) rotate(-25deg); /*-15*/ white-space: nowrap; pointer-events: none; } /* Page breaks */ @page { /*margin: 20mm; size: auto; margin: 10mm;*/ /* Page border and centering */ size: A4; /*margin: 1cm; padding: 0;*/ border: 1px solid #ddd; /*padding: unset; margin: unset;*/ border: 8px solid black; border-top: 8px solid #f23849; border-bottom: 8px solid #f23849; @top-center { content: "Meal Plan"; } @bottom-center { content: "Page " counter(page); } } @page :blank { @top-center { content: "This page is intentionally left blank." } } @page: right { /* margin-left: 4cm;*/ @bottom-left { margin: 10pt 0 30pt 0; /*border-top: .35pt solid #666;*/ content: "Exercise = Medicine" /*"My book"*/ ; font-size: 9pt; color: #333; } @bottom-right { margin: 10pt 0 30pt 0; /*border-top: .35pt solid #666;*/ content: "Designed By Ahmed Elgenedy" /*counter(page)*/ ; font-size: 9pt; } @top-right { content: string(doctitle); margin: 30pt 0 10pt 0; font-size: 9pt; color: #333; } } @page: left { @bottom-right { margin: 10pt 0 30pt 0; /*border-top: .35pt solid #666;*/ /*.25pt*/ content: "Designed By Ahmed Elgenedy" /*"Our Cats"*/ ; font-size: 9pt; color: #333; } @bottom-left { margin: 10pt 0 30pt 0; /*border-top: .35pt solid #666;*/ content: "Exercise = Medicine" /*counter(page)*/ ; font-size: 9pt; /*content: "Page " counter(page) " of " counter(pages);*/ } } /* @page:first { margin: 0; @bottom-right { content: normal; margin: 0; } @bottom-left { content: normal; margin: 0; } } */ /* Footer */ /* Main container styling */ #Alltrs, #Alltrs *, .footer_print, .tagline, .signature, .signature span { visibility: visible; } #Alltrs { width: 100%; page-break-after: always; padding: unset; } /* Remove any forced page breaks that might cause blank pages */ #Alltr, .meal_div:last-child, .workout_dev:last-child { page-break-after: auto; } /* Ensure tables don't overflow */ table { width: 100% !important; max-width: 100% !important; } /* Hide non-essential elements */ .noprint, .trhide, .delete-btn, .addtr, #addButton, #n_meal, .input-group-label, input, button, .fa-plus, .fa-trash, #add, .fa, .s-header-title, .header-fitness, .entry-content h2, .input-group-label, .form-group, .footer-note, .hide, #msformTitle.title-calc, footer, #health_tracker .hidden, #tracking_health_metrics .hidden { display: none !important; } /* Hide interactive stuff */ #all_meals, #all_workouts { #DietHeading { display: block !important; } } /* Input fields */ input, input[type="number"] { display: unset !important; border: none !important; text-align: center; background: transparent; width: 100%; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } /* Hide buttons/inputs when printing */ /* Page break between meals */ .meal_div, .workout_dev { border: 1px solid #ddd; padding: 10px; border-radius: 5px; page-break-inside: avoid; margin-bottom: 30px; } /* Force page breaks between meals if they don't fit */ .meal_div:not(.hide), .workout_dev:not(.hide) { page-break-after: auto; } /* Table styling */ table, td, th { border: 1px solid #000 !important; page-break-after: auto; } /* Table styling */ .trblk { width: 100%; border-collapse: collapse; margin: 10px 0; page-break-inside: avoid; padding: 5px; } .trblk th, .trblk td { text-align: center; align-content: center; padding: 5px; line-height: normal; } .trblk th { background-color: #f2f2f2; } /* Totals row highlighted */ #total td, #totalDay td { font-weight: bold; background: #f2f2f2 !important; } /* Headings */ h2 { font-size: 18px; margin: 10px 0; text-align: center !important; page-break-after: avoid; } /* Blockquote styling */ blockquote { background-color: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; page-break-after: avoid; } blockquote.info { background-color: #e7f3fe; border-left: 4px solid #2196F3; page-break-after: avoid; } /* Blockquotes (Meal titles) */ blockquote.info, blockquote.green { font-weight: bold; font-size: 10pt; margin: 10px 0 10px; padding-left: 10px; color: #000 !important; } blockquote.green { border-left: 4px solid #4CAF50; background-color: #e6ffe6 !important; page-break-after: avoid; } .infotr { font-weight: bold; background-color: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; color: black; } /* Totals row styling */ #total, #totalDay { font-weight: bold; } /* Center all content */ .week-header { display: block; margin-top: 40px; } /* Hide unnecessary colors/icons */ /****************** =================== ******************/ .section { padding-block: unset; } #diet_plan #PNxt, #workout_plan #PNxt { padding: unset; margin: unset; width: 100%; } .glowing h1, .glowing h1 span { visibility: hidden; display: none; } .footer_print, .logo_print { display: flex; } #tdee-calculator-widget { box-shadow: none; } #tdee-calculator-widget .calc-share-section, #tdee-calculator-widget .calc-unit-toggle, #tdee-calculator-widget .calc-calculate-btn { display: none; } .history-section { display: none !important; } #recipeModal { position: static; padding: 0; background: white; } .modal-overlay, .close-modal-btn { display: none; } .modal-container { max-width: 100%; max-height: none; box-shadow: none; } .modal-content { box-shadow: none; border-radius: 0; } .modal-scrollable-content { max-height: none; overflow: visible; } .modal-recipe-img { max-height: none; box-shadow: none; } } /*====================================================== CUSTOM PROPERTIES ( RESPONSIVE BREAKPOINTS ) ======================================================*/ /* Dark Mode Adjustments */ @media (prefers-color-scheme: dark) { .modal-content { border: 1px solid var(--border-color); } .modal-header { border-bottom-color: var(--border-color); } .modal-recipe-title { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); } } /*--------------------------------------- Landscape Mode on Mobile -----------------------------------------*/ @media (max-height: 600px) and (orientation: landscape) { .modal-container { max-height: 85vh; } .modal-scrollable-content { max-height: calc(85vh - 70px); } .modal-recipe-img { max-height: 200px; } .modal-header { padding: 15px 20px 10px 20px; } .modal-recipe-title { font-size: 1.3em; } .recipe-description, .serving-info, .ingredients-list, .tips-section { padding: 12px; } .instruction-step { padding-left: 45px; margin-bottom: 15px; } .step-number { width: 32px; height: 32px; } } /*--------------------------------------- Landscape orientation for mobile -----------------------------------------*/ @media (max-height: 500px) and (orientation: landscape) { #health_tracker, #tracking_health_metrics { .app { margin: 0.5rem auto; gap: 10px; } .inputs { grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; } table { max-height: 200px; overflow-y: auto; display: block; } } } /*--------------------------------------- High Resolution Displays -----------------------------------------*/ @media (min-resolution: 192dpi) { .modal-content { border: 1px solid var(--border-color); } .modal-recipe-img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } #health_tracker, #tracking_health_metrics { table, th, td { border: 0.5px solid var(--border-color); } } } /*--------------------------------------- Desktop Devices (portrait and landscape) -----------------------------------------*/ @media only screen and (min-width: 1440px) {} /*--------------------------------------- Laptop Devices (portrait and landscape) -----------------------------------------*/ @media only screen and (min-width: 1024px) and (max-width: 1439px) { .s-our-programs { .col-md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } } .program-item .program-item-inner h3 { padding-inline: 1.5rem; font-size: 16px; } .s-crossfit .row { flex-wrap: unset; } .s-crossfit .container>div { flex-wrap: unset; } } /*--------------------------------------- Tablet Devices (portrait and landscape) - Large tablets and small laptops (1024px and below) -----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 1023px) { .nav-btn { display: block; } .nav-menu { display: none !important; background: #ccc; } .nav-btn.active { span { background-color: var(--white-color); } } .nav-menu.active .nav-list { transition-delay: .4s; transform: translateX(0); opacity: 1; } header { &:before, &:after { background-color: #ccc; } } .nav-menu { width: 100% !important; padding: 60px 0 30px; height: 100vh; left: -100%; opacity: 0; top: 0; z-index: 3; background-color: #202020; position: absolute; transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); display: block !important; } .nav-list { display: block; } .header-fitness .nav-list>li>a { padding: 0 15px; } .nav-list>li>a { font-size: 18px; line-height: 34px; } .header-fitness .nav-list>li { margin-left: 0; } .nav-list>li { margin-bottom: 5px; } .header-menu .container { max-width: unset; } .input-container { margin: 1.5rem 0rem; } #msform, #steroidplanner, #TDEE, #macro, #BFP, #peptidecalc, #Testosterone_Conversion_Tool, .button-group, #HRT { button { font: 700 12px / 22px 'Montserrat', sans-serif; } } h3 { font-size: 18px; } .css-1mxrc52 { height: 50px; } .glowing h1 { font: 900 24px "Raleway", sans-serif; } .about-bottom-item .date-cover h4, #macro h5, .uh { font-size: 14px; } #Count_Up_Animation .wrapper { display: grid; } #TOP_TRANSFORMATION { padding-block: 2rem; .wrap.title-1 h1 { font-size: large; } .align-center, .line-1, .line-2 { font-size: medium; } .s-header-title .title { font-size: 24px; } } .s-header-title .title { font: 900 20px "Righteous", sans-serif !important; } .title-1 { font: 700 28px Lato, Arial; } .section-title-bg_1 { font: 900 45px / 0.8 "Righteous", sans-serif; margin-bottom: -5rem; } .about-info-row { display: flex; max-width: unset; } .about-info-row .about-info-col { max-width: 100%; } .about-bottom-item .date-cover .date { font-size: 36px; } .section-title { font: 500 32px / 1 "Righteous", sans-serif; } .row-r { display: grid; grid-template-columns: 1fr 1fr; columns: 1 auto; } .background_book .align-center { font-size: 18px; } #special-offer .section-title { font: 500 24px / 1 "Righteous", sans-serif; } .hr-lines { &:before, &:after { width: 15%; } } .title-decor { font-size: 24px; } .paragraph { margin: unset; margin-inline: 0.5rem; } .input-group-label label, .form-paragraph { font: 700 14px / 30px 'Montserrat', sans-serif; } .form-paragraph, .browse-button { font: 700 12px / 30px 'Montserrat', sans-serif; } #box, .col-r { grid-template-columns: 1fr; columns: 1 auto; } #box label { font: 600 14px / 22px 'Montserrat', sans-serif; } .radio-left, .row .col { margin: unset; } .input-group .radio-left { margin-left: 0.5rem; } .CalculatorsResult { li { font-size: xx-small; } } .bmi-scale { font-size: 10px; display: none; h4 { font-size: 8px; } div { padding: 10px 2px; } } .table-cell { display: none; } .compound-table-container { padding: unset; } #glp1Calculator form { padding: 10px; } .compound-button { font-size: 14px; } .faq-section { h2 { font-size: 1.2em; } } .faq { h3 { font: 600 1em "Righteous", sans-serif; } } .marker.ten-unit { height: 15px; } .syringe-body { height: 60px; } .marker { span { font-weight: 600; font-size: 10px; } } #tooltip { width: 20rem; } .added_name, .added_price { font: 900 14px "Roboto", sans-serif; } .total_container { padding: 5px; } .tab-content { margin-inline: 1rem; } #total-price-span { font: 400 18px / 2 "Righteous", sans-serif; } #turnbf { padding: 10px; font: 400 14px / 2 "Poppins", sans-serif; } .form-check, .two-line { display: block; } .checkbox-cover { padding-bottom: 10px; } .card-title { font-size: 12px; } .bank-font { font: 700 20px monospace; } .theme-toggle { top: 2%; } .theme-toggle.scrolled { top: 8%; } #Testosterone_Conversion_Tool { input[type=number] { min-width: 8rem; } select { min-width: 6rem; } .style-58 { min-width: 6rem; } .wp-block-columns { display: block; } } .paragraph-Head { padding-block: 2em 1em; font: 600 14px / 0 'Montserrat', sans-serif; } .fs-title { font: 600 25px / 1.5 'Montserrat', sans-serif; } #Count_Up_Animation { & i { font-size: 32px; } .wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; columns: 2 auto; } .container { justify-content: space-evenly; padding: unset; } span.num { font-size: 28px; } span.text { font-size: 16px; } } .s-fitness-gallery { padding: 88px 0; } .nav-list li a { justify-content: unset; } header { display: flex; flex-direction: column-reverse; } #best-selling { padding: 40px 0 80px; } .column-r { align-content: flex-end; } .s-crossfit .row { justify-items: center; justify-content: center; } .s-crossfit .col-md-5 { max-width: 25em; } .crossfit-item { min-width: 20em; } .s-our-programs { .col-md-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } .program-item .program-item-inner h3 { max-width: unset; } #Peptide_Protocol .container { width: 80%; } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /*--------------------------------------- Mobile Devices (portrait and landscape) -----------------------------------------*/ @media only screen and (max-width: 767px) { .input-container { margin: 1.5rem 0rem; } #msform, #steroidplanner, #TDEE, #macro, #BFP, #peptidecalc, #Testosterone_Conversion_Tool, .button-group, #diet_plan .form-group, #workout_plan_calc, .card .buttons, #HRT { button { font: 700 12px / 22px 'Montserrat', sans-serif; height: 30px; width: -webkit-fill-available; } } h3 { font-size: 18px; } .css-1mxrc52 { height: 50px; } .head { font-size: 12px; padding-inline: 0.5rem; } .glowing h1 { font: 900 24px "Raleway", sans-serif; } .about-bottom-item .date-cover h4, #macro h5, .uh, .compound-button { font-size: 14px; } #Count_Up_Animation .wrapper { display: grid; } #TOP_TRANSFORMATION { padding-block: 2rem; .wrap.title-1 h1 { font-size: large; } .align-center, .line-1, .line-2 { font-size: medium; } .s-header-title .title { font-size: 24px; } } .s-header-title .title { font: 900 20px "Righteous", sans-serif !important; } .title-1 { font: 700 28px Lato, Arial; } .section-title-bg_1 { font: 900 45px / 0.8 "Righteous", sans-serif; margin-bottom: -5rem; } .about-info-row { display: flex; max-width: unset; } .about-info-row .about-info-col { max-width: 100%; } .about-bottom-item .date-cover .date { font-size: 36px; } .section-title { font: 500 32px / 1 "Righteous", sans-serif; } .row-r { display: grid; grid-template-columns: 1fr; columns: 1 auto; } .background_book .align-center { font-size: 18px; } #special-offer .section-title { font: 500 24px / 1 "Righteous", sans-serif; } .hr-lines { &:before, &:after { width: 15%; } } .title-decor { font-size: 24px; } .paragraph { margin: unset; margin-inline: 0.5rem; } .input-group-label label { font: 700 14px / normal 'Montserrat', sans-serif !important; } .form-paragraph, .browse-button { font: 700 12px / 30px 'Montserrat', sans-serif; } #box, .col-r { grid-template-columns: 1fr; columns: 1 auto; } .col-r { gap: 0.25rem; } #box label { font: 600 14px / normal 'Montserrat', sans-serif !important; } .radio-left, .row .col { margin: unset; } .input-group .radio-left { margin-left: 0.5rem; } .CalculatorsResult { li { font-size: xx-small; } } .bmi-scale { font-size: 10px; h4 { font-size: 8px; } div { padding: 10px 2px; } } .compound-table-container { padding: unset; } #glp1Calculator form, #steroidplanner form, .history-section { padding: 10px; } .faq-section { padding: unset; width: 90%; h2 { font-size: 1.2em; } } /*#HRT */ /*.faq-section { padding: 20px; }*/ .faq { h3 { font: 600 1em "Righteous", sans-serif; } } .marker.ten-unit { height: 15px; } .syringe-body { height: 60px; } .marker { span { font-weight: 600; font-size: 10px; } } #tooltip { width: 20rem; } .added_name, .added_price { font: 900 14px "Roboto", sans-serif; } .total_container { padding: 5px; } .tab-content { margin-inline: 1rem; } #total-price-span { font: 400 18px / 2 "Righteous", sans-serif; } #turnbf { padding: 10px; font: 400 14px / 2 "Poppins", sans-serif; } .checkbox-cover { padding-bottom: 10px; } .card-title { font-size: 12px; } .bank-font { font: 700 20px monospace; } .theme-toggle { top: 2%; } .theme-toggle.scrolled { top: 8%; } #Testosterone_Conversion_Tool { input[type=number] { min-width: 8rem; } .style-58, select { min-width: 6rem; } .wp-block-columns { display: block; } } .paragraph-Head { padding-block: 2em 1em; font: 600 14px / 0 'Montserrat', sans-serif; } .fs-title { font: 600 25px / 1.5 'Montserrat', sans-serif; } #Count_Up_Animation { & i { font-size: 32px; } .wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; columns: 2 auto; } .container { justify-content: space-evenly; padding: unset; } span.num { font-size: 28px; } span.text { font-size: 16px; } } .s-fitness-gallery { padding: 88px 0; } .nav-list li a { justify-content: unset; } .nav-btn.active { span { background-color: var(--white-color); } } #best-selling { padding: 40px 0 80px; } .s-crossfit .row { justify-items: center; } .s-crossfit .col-md-5 { max-width: 25em; } #SteroidPlotter { h5 { font-size: 12px; } p { font-size: small; } .col-auto { padding-block: unset; } .tooltiptext { width: 250px; } h2 { font-weight: 600; font-size: 1.5rem; } ul { font-size: smaller; } #telegram { margin-block: 40px; } } .calc h3 { font-size: 16px; font-weight: 600; } .grid-container { padding-block: 20px 0; } .row .compound-schedule-row .hide .wp-block-columns .compound-row .is-layout-flex .wp-container div { width: 50% } #msform input:focus+span::before, #msform select:focus+span::before, #msform textarea:focus+span::before, .calc input:focus+span::before, .calc select:focus+span::before, #macro-calculator input:focus+span::before, #macro-calculator select:focus+span::before, #Testosterone_Conversion_Tool select:focus+span::before, #Testosterone_Conversion_Tool input:focus+span::before, #tdee-calculator-widget select:focus+span::before, #tdee-calculator-widget input:focus+span::before, #Peptide_Protocol_Plotter select:focus+span::before, #Peptide_Protocol_Plotter input:focus+span::before, #workout_plan select:focus+span::before, #workout_plan input:focus+span::before, #health_tracker select:focus+span::before, #health_tracker input:focus+span::before, #Trainer select:focus+span::before, #Trainer input:focus+span::before, .table-cell, .view-actions, .bmi-scale, #phone-number~span { display: none; } #diet_plan .entry-content blockquote, #workout_plan .entry-content blockquote, .d-block-1, #macro .row, .row, .input-group-row, .about-info-row .about-info-col:last-child, .form-check, .two-line, #HRT .flex, .projects-section-line { display: block; } .entry-content { font-size: 10px; } #resultanchor { margin-top: 3rem; } #diet_plan .entry-content blockquote, #workout_plan .entry-content blockquote { align-content: center; justify-content: center; align-items: center; display: block; font-size: x-small; padding-inline: 10px 50px; } .workout-schedule-container { gap: 5px; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; } #PNxt .entry-content h3 { font-size: medium; } .workout-day-card { max-width: fit-content; } #diet_plan .entry-content blockquote:before, #workout_plan .entry-content blockquote:before { padding: unset; } .card-title { flex-direction: column; align-items: center !important; } .chart-legend { margin-top: 10px; flex-wrap: wrap; font-size: small; } #workout_plan .card-title, #diet_plan .card-title { font-size: large; } .history-item { overflow: auto; } #historyCount { margin-top: 10px; } #workout_plan .card, #diet_plan .card { padding: 5px; } .or-spacer { a { width: 35px; height: 35px; left: 45%; font-size: medium; top: -15px; span { line-height: 25px; } } } .grid_col { display: grid; grid-template-columns: 1fr; /* عمود واحد على الجوال */ justify-items: center; /* توسيط العناصر */ gap: 30px; padding: 0 20px; } .grid_col .crossfit-col { width: 100%; max-width: 300px; /* تحديد أقصى عرض */ margin: 0 auto; /* توسيط العنصر */ } .crossfit-item { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; } .browse-button { margin-block: inherit; } .col.img-preview-style { display: block !important; float: none !important; margin: 0 auto !important; } [id^="drag_drop-"] .input-group.row { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; width: 100% !important; margin: 0 !important; } [id^="divContain-"] { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; width: 100% !important; } [id^="img-preview-"] { width: 100% !important; text-align: center !important; } [id^="img-preview-"] img { max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; } .file-info [id^="delete-button-"], .file-info [id^="change-button-"], .browse-button { width: 180px !important; /* حجم ثابت */ max-width: 90% !important; /* فقط في الشاشات الصغيرة */ padding: 10px !important; text-align: center !important; display: flex; margin: 10px auto !important; flex-shrink: 0 !important; /* يمنع الضغط */ } .file-info .col { flex: none !important; width: auto !important; } #Animated_1, .product-item { padding-block: unset; } .footer-item ul { padding-left: 1em; } #HRT .space-y-12.mt-16 { padding: unset; } #HRT .mt-16 { width: 100%; } .text-3xl, .text-2xl, .text-4xl, .prose-lg { font-size: 1rem; } .mb-6 { margin-bottom: 1rem; } .prose-lg { line-height: 1; } #HRT .gap-4 { gap: 0.25rem; } #HRT .grid.grid-cols-1.gap-4.text-gray-900 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .header-fitness .nav-list>li { border: unset; } #SteroidPlotter #main-form .radio-left { margin-left: 0.5rem; } #SteroidPlotter #main-form .radio-right { margin-right: 1rem; } .disclaimer { width: 90%; } .history-entry { /*flex-direction: row; gap: 5px; padding: 5px; margin-bottom: 5px;*/ flex-direction: column; } /*.nutrition-facts { overflow-x: hidden; overflow-y: auto; max-height: 400px; scrollbar-color: #ccc transparent; } /* إخفاء شريط التمرير في Chrome/Safari .nutrition-facts::-webkit-scrollbar { width: 6px; } .nutrition-facts::-webkit-scrollbar-track { background: transparent; } .nutrition-facts::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; } .nutrition-facts::-webkit-scrollbar-thumb:hover { background-color: #aaa; } */ #health_tracker .app p, #tracking_health_metrics .app p { font-size: smaller; } .result-box { margin-top: 1rem; } .status-message { font-size: smaller; } #myPieChart { display: unset !important; } .about-section { padding: 10px; margin-inline: 20px; } #dashboard, #dashboard_books { &.form-section { padding: 10px; margin: 25px 20px; } } .calculator-card { width: 150px; padding: 10px; } .calculators-scroll-container { margin: 25px 0; padding: 0 50px; } .projects-section { padding: 15px; } .about-avatar { img { max-height: 150px; } } .shimmer { background: linear-gradient(90deg, transparent, rgba(40, 40, 40, 0.3), transparent); } .custom-form { text-align: center; } .login-text { padding-top: unset; } .user-box { input:focus~label, input:valid~label { transform: translateX(10px) translateY(-19px); } } .hero-bg { animation: gradientBG 240s 1s ease-in-out infinite; } /* إلغاء تأثير hover على الهواتف */ @media (hover: none) and (pointer: coarse) { .delete-btn:hover { opacity: 1 !important; } .delete-btn:hover .fa-trash { color: inherit !important; } } header { &:before, &:after { background-color: unset; } } /* FINAL FIX FOR iOS + ALL DEVICES */ #health_tracker input[type="date"], #tracking_health_metrics input[type="date"], input[type="date"], .input-field input[type="date"] { -webkit-appearance: none !important; appearance: none !important; height: 40px !important; /* الثابت */ /*line-height: 40px !important;*/ /*padding: 0 12px !important; ثابت مثل باقي الحقول */ } @supports (-webkit-touch-callout: none) { /* Safari iOS only */ input[type="date"] { /*font-size: 16px !important; height: 42px !important; padding: 8px 12px !important; line-height: 1 !important;*/ /*-webkit-appearance: none !important; appearance: none !important;*/ /*border-radius: 8px !important; width: 100% !important; box-sizing: border-box !important;*/ } /* غنيييية: تمنع تمدد العنصر خارج البوكس */ /*.input-field input[type="date"] { max-width: 100% !important; overflow: hidden !important; }*/ } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media (max-width: 600px) { #tdee-calculator-widget .calc-header h2 { font-size: 1.8em; } #tdee-calculator-widget .calc-results-grid, #tdee-calculator-widget .calc-macros-grid { grid-template-columns: 1fr; } /* Media query for smaller screens, if you want cards to stack vertically */ .workout-day-card { width: 100%; /* Full width on very small screens */ max-width: 400px; /* Prevent cards from becoming too wide on smaller screens */ margin: 0 auto; /* Center individual cards */ } #Peptide_Protocol_Plotter canvas { max-height: 300px; padding: unset; } .button-group { flex-direction: column; } .toggle-container { flex-direction: column; gap: 10px; p { font-size: small; } } .metrics-display { padding: 10px; font-size: 12px; } #Peptide_Protocol .container { padding: unset; width: 90%; } .featured-subtitle { font-size: 11px; margin: 0 0 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .featured-product-content { flex-direction: row; /* Keep horizontal layout */ align-items: center; gap: 12px; min-height: unset; } .featured-product-image { flex: 0 0 80px; height: 80px; margin: 0; } .featured-product-info { flex: 1; min-width: 0; /* Prevent overflow */ flex-direction: column; align-items: flex-start; gap: 8px; } .featured-product-text { width: 100%; min-width: 0; /* Prevent overflow */ h3 { font-size: 14px; line-height: 1.2; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } .featured-badge { padding: 2px 8px; font-size: 10px; margin-bottom: 4px; } .featured-subtitle { font-size: 12px; line-height: 1.2; margin: 0 0 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--label-color); } .featured-rating { font-size: 12px; gap: 4px; margin: 0; } .featured-rating .stars { font-size: 12px; } .featured-button { padding: 8px 12px; font-size: 12px; border-radius: 16px; white-space: nowrap; margin-left: auto; } .progress-bar { height: 2px; } #diet_plan .entry-content blockquote, #workout_plan .entry-content blockquote { padding: 10px; } .modal-window { width: 94%; max-height: 90vh; } .modal-container-body { padding: 0.8rem 1rem; } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media only screen and (min-width: 320px) and (max-width: 1023px) { #tdee-calculator-widget { padding: unset; } #tdee-calculator-widget .calc-input-section { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .translate-button { padding: 0 15px; } .title-calc { -webkit-text-stroke: unset; } .glowing h1:hover span { text-shadow: unset; } .nav-list li a i { margin-right: 5px; } .nutrition-facts { grid-template-columns: 1fr 1fr; padding: 10px; margin: 10px auto; gap: 6px 10px; overflow-x: hidden; overflow-y: scroll; } .translate-button .translate-text { display: inline !important; margin-left: 5px; } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media (max-width: 1200px) { .trblk .infotr>* { font-size: 11px; padding: 0 5px; } } /*--------------------------------------- Large tablets and small laptops (1024px and below) -----------------------------------------*/ @media (max-width: 1024px) { .modal-container { max-width: 90%; max-height: 92vh; } .modal-header { padding: 20px 25px 15px 25px; } .modal-scrollable-content { padding: 0 25px 25px 25px; max-height: calc(92vh - 90px); } .modal-recipe-title { font-size: 1.6em; } .macros { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } #health_tracker, #tracking_health_metrics { .inputs, .inputs_4 { grid-template-columns: 1fr 1fr !important; gap: 0.8rem !important; } table { display: block; overflow-x: auto; white-space: nowrap; font-size: var(--h9-font-size); } th, td { padding: 10px 6px; } input, select { padding: 6px 8px !important; } } #Alltr { min-width: auto; } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media (max-width: 992px) { .trblk { overflow-x: scroll; overflow-y: hidden; } .infotr, .addtr, .exercise-row, .food-row { min-width: 800px; } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media(max-width: 980px) { .consult-grid { grid-template-columns: 1fr; } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media (max-width: 900px) { .content { grid-template-columns: 1fr; } } /*--------------------------------------- Tablets (768px and below) -----------------------------------------*/ @media (max-width: 768px) { .meal-plan-result { .plan-header { padding: 15px; .plan-stats { grid-template-columns: repeat(2, 1fr); .stat-item { padding: 5px; } } } } .meal-actions { width: 100%; justify-content: space-between; } .recipe-clickable, .meal-header { flex-direction: column; } .recipe-image { width: 100%; height: 200px; margin-bottom: 15px; } .recipe-title { margin: unset; } .nutri-container { margin-left: 0; justify-content: center; } .recipe-nutris { min-width: 80px; padding: 10px 15px; } .replace-btn { padding: 2px 4px; } .meal-planner { padding: 15px; } .meal-time { font-size: var(--h9-font-size, 14px); } .meal-plan-result h2 { font-size: 15px !important; } .no-recipes-notice { padding: 5px; line-height: 1.5; } .macros { gap: 10px; } .macro-item { min-width: calc(50% - 10px); } #recipeModal { padding: 15px; .modal-container { max-width: 95%; max-height: 95vh; .modal-content { width: 95%; margin: 10% auto; .modal-header { padding: 18px 20px 12px 20px; } } } } .close-modal-btn { top: 12px; right: 15px; width: 34px; height: 34px; font-size: 22px; } .modal-recipe-title { font-size: 1.4em; padding-right: 35px; } .modal-scrollable-content { padding: 0 20px 20px 20px; max-height: calc(85vh - 85px); } .modal-recipe-img { max-height: 300px; } .recipe-description { padding: 16px; font-size: 1em; } .serving-info { padding: 18px; } .macros { grid-template-columns: repeat(2, 1fr); gap: 10px; } .macro-item { padding: 12px; } .ingredients-list, .tips-section { padding: 18px 20px; } .ingredients-section h4, .instructions-section h4, .tips-section h4 { font-size: 1.3em; } .instruction-step { padding-left: 50px; } .step-number { width: 35px; height: 35px; font-size: 0.95em; } #health_tracker, #tracking_health_metrics { .inputs, .inputs_4 { grid-template-columns: 1fr !important; gap: 0.6rem !important; } table { display: block; overflow-x: auto; white-space: nowrap; font-size: var(--h10-font-size); } th, td { padding: 8px 4px; font-size: var(--h10-font-size); } .edit, .delete { padding: 4px 8px; font-size: var(--h10-font-size); } #submit, #updateEntry, #cancelEdit { padding: 10px 20px; font-size: var(--h9-font-size); } .trend-cell svg { width: 80px; height: 25px; } input, select { padding: 6px 8px; } } /* Responsive */ .scramble-text { font-size: clamp(1.2rem, 4vw, 2rem); min-height: 60px; } .history-entry-content { flex-direction: column; align-items: flex-start; gap: 5px; span { width: 100%; font-size: 13px; } span:first-child { padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } } #Research_Peptides .delete-button { align-self: end; flex-shrink: 0; touch-action: manipulation; margin-top: 5px; } #Research_Peptides span:not(:first-child) { border: none; } .injection-schedule { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: x-small; padding: 10px; th, td { white-space: nowrap; min-width: 50px; } } .input-group, .dose-step-fields { grid-template-columns: 1fr; } .compound-info { display: flex; flex-wrap: wrap !important; } .blood-level-container { width: unset; } .form-section, .chart-container { padding: 15px; } .wizard-container { padding: unset; } #Research_Peptides { h2, h3 { font-size: 1rem; } } .chart-container { padding-bottom: 15px; } .input-field input, .input-field select { height: 38px; font-size: 14px; } .highcharts-data-table { font-size: 0.9rem; } #highcharts-data-table-3 th, #highcharts-data-table-3 td { padding: 10px 12px; } .table-progress-list--fat .essential { left: 2px; } .table-progress-list--fat .athletes { left: 4px; } .table-progress-list--fat .fitness { left: 20px; } .table-progress-list--fat .average {} .table-progress-list--fat .obese { right: 2px; } .table-progress-list--fat[data-gender=female] .essential { left: 40px; } .table-progress-list--fat[data-gender=female] .athletes { left: 33px; } .table-progress-list--fat[data-gender=female] .fitness { left: 2px; } .table-progress-list--fat[data-gender=female] .average { right: 30px; } .table-progress-list--fat[data-gender=female] .obese { right: 42px; } .table-cell { padding-inline: 10px; } .table-progress-list { margin-bottom: 0.5rem; } .table-progress-list__item { font-size: 10px; } /*.input-group-label #box input:nth-of-type(1) + label, .input-group-label #box input:nth-of-type(2) + label, .input-group-label #box input:nth-of-type(3) + label, .input-group-label #box input:nth-of-type(4) + label, .input-group-label #box input:nth-of-type(5) + label { padding-left: 12px; /*unset Fixed pixel value for mobile */ /* }*/ .week-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; .card-title { font-size: 1.25rem; } } .history-item-header { flex-direction: column; gap: 0.5rem; } .history-item-stats { flex-direction: column; gap: 0.75rem; } .history-item-actions { flex-direction: column; button { width: 100%; } } .protocol-modal { max-width: 100%; max-height: 90vh; margin: 10px; } .protocol-item { flex-direction: column; gap: 15px; } .protocol-actions { margin-left: 0; width: 100%; justify-content: flex-end; } .enable-goal-btn { padding: 8px 16px; gap: 4px; font-size: 0.7rem; margin-bottom: 5px; } .about-mission-card { margin-bottom: 1rem; } .pagination-cover { margin-block: 20px; } #Peptide_Protocol_Plotter { button[type="button"], button[type="submit"] { padding: 5px; width: stretch !important; } } .space-between { display: flex !important; .col-sm { width: 50%; } h4 { font-size: 14px; } } #macro h5 { font-size: 13px; } .history-item { justify-content: normal; } #Pdiet_plan, #workout_plan_calc { button { width: stretch !important; } } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media(max-width: 620px) { .consultation-container .form-row { grid-template-columns: 1fr; } } /*--------------------------------------- Tablets (520px and below) -----------------------------------------*/ /* responsive: if screen is narrow, reduce font/padding and allow text wrapping */ @media (max-width: 520px) { #tracking_health_metrics { ul.tabs li a { font-size: 0.8rem; padding: 10px 0 6px 0; white-space: normal; word-break: keep-all; } ul.tabs li a.active { padding: 12px 0 12px 0; } content p { padding: 20px 20px 26px 20px; font-size: 0.9rem; } } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media (max-width: 500px) { .switch { flex-wrap: nowrap; } .switch label { padding: 6px 12px; font-size: var(--h10-font-size); } } /*--------------------------------------- Mobile phones (480px and below) -----------------------------------------*/ @media (max-width: 480px) { .macro-item { min-width: 100%; } .instruction-step { padding-left: 40px; } .step-number { width: 30px; height: 30px; font-size: 0.9em; } #recipeModal { padding: 10px; .modal-container { max-width: 100%; max-height: 98vh; border-radius: var(--border-radius-medium); .modal-content { .modal-header { padding: 10px 15px; } } } } .close-modal-btn { top: 10px; right: 12px; width: 32px; height: 32px; font-size: 20px; } .modal-recipe-title { font-size: 1.3em; padding-right: 30px; line-height: 1.2; } .modal-scrollable-content { padding: 0 18px 18px 18px; max-height: calc(78vh - 80px); } .modal-recipe-img { max-height: 250px; border-radius: 12px; } .recipe-description { padding: 14px; font-size: 0.95em; line-height: 1.6; } .serving-info { padding: 16px; font-size: 0.9em; } .macros { grid-template-columns: 1fr; gap: 8px; } .macro-item { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; } .macro-item strong { display: inline; margin-bottom: 0; } .ingredients-list, .tips-section { padding: 16px 18px; } .ingredients-section h4, .instructions-section h4, .tips-section h4 { font-size: 1.2em; } .ingredients-list li { margin-bottom: 10px; font-size: 0.95em; } .instruction-step { padding-left: 45px; margin-bottom: 18px; font-size: 0.95em; line-height: 1.7; } .step-number { width: 32px; height: 32px; font-size: 0.9em; } .tips-section li { padding-left: 25px; font-size: 0.95em; } .tip-icon { font-size: 0.9em; } #health_tracker, #tracking_health_metrics { .app { margin: 1rem auto; padding: 5px; gap: 15px; } .inputs { gap: 0.5rem; } table { font-size: var(--h10-font-size); } th, td { padding: 6px 3px; font-size: 0.75rem; } /* Hide less important columns on very small screens */ th:nth-child(2), /* Short Name */ td:nth-child(2), th:nth-child(4), /* Units */ td:nth-child(4), th:nth-child(8), /* Trend */ td:nth-child(8) { display: none; } .edit, .delete { padding: 3px 6px; font-size: 0.7rem; } #submit, #updateEntry, #cancelEdit { padding: 8px 16px; font-size: var(--h9-font-size); } #editSection { flex-direction: column; gap: 0.5rem; } .trend-cell { display: none; } .input-group-label label { font-size: var(--h9-font-size); } input, select { font-size: var(--h9-font-size); padding: 6px 8px; } } .supplies-section { padding: 10px; } .input-group { grid-template-columns: 1fr; } .chart-container { padding: 10px; } .highcharts-data-table { font-size: 0.8rem; } #highcharts-data-table-3 th, #highcharts-data-table-3 td { padding: 8px 10px; } #highcharts-data-table-3 caption { font-size: 1rem; } .dflex { display: block; } #error canvas { width: -webkit-fill-available; } .accordion-item-header { min-height: auto; } #special-offer .section-title { font: 500 20px / 1 "Righteous", sans-serif; } #msform form, #steroidplanner form, #TDEE form, #macro form, #BFP form, #peptidecalc form, #glp1Calculator form, #HRT form, #Testosterone_Conversion_Tool #primary, #diet_plan #PNxt, #Research_Peptides_Weight, #Peptide_Protocol_Plotter, #workout_plan #PNxt, #deficit_calculator, #health_tracker #PNxt, #tracking_health_metrics #PNxt { padding: 20px 10px; width: 90%; margin: 0 5% 50px; } .input-group .radio-left { margin-left: 0.5rem; } .radio-group.input-group.input-group-row .radio-left, .radio-group.input-group-row .radio-left { margin-left: unset; } .input-group-row { display: grid; gap: 0.25rem 0; } .input-group-label label { padding: unset; margin-bottom: 8px; display: block; } .grid-container { padding-block: 20px; } .drop-container { gap: 5px; } .form-title { margin-top: unset; } .form-paragraph { font: 700 12px / 15px 'Montserrat', sans-serif; margin-bottom: unset; } #msform form { font: 12px / normal 'Montserrat', sans-serif; } #msform h2 { font-size: 20px; } .checkbox-cover { label { font: bold 12px "Poppins", sans-serif; padding: 0.7rem 0 0 2rem; } label:before { width: 20px; height: 20px; font: 12px / 20px "FontAwesome"; } } .num_step { margin-block: 20px; font: 24px / 1em "Anton", sans-serif; border: 5px solid var(--app-container); border-radius: 5px; box-shadow: unset; padding: 5px; width: -webkit-fill-available; } .button-group-options { gap: 5px; } #result_2 { width: 100%; } .result { font-size: 0.75em; } #heart-rate-zones, .calorie-calculator, #macro-calculator { input[type=range]::-webkit-slider-thumb { box-shadow: unset; /*0 2px 4px rgba(0,0,0,.2);*/ } input[type=range]::-moz-range-thumb { box-shadow: unset; /*0 2px 4px rgba(0,0,0,.2);*/ } input[type="range"]::-webkit-slider-thumb { box-shadow: unset; /*0 0 8px 1px var(--app-container), 0 0 16px 4px var(--white-color);*/ } } #zonesContainer .flex { display: grid; } .text-5xl { font-size: 2rem; } .text-xl, .text-lg { font-size: 1rem; line-height: 1rem; } .text-sm { font-size: 0.75rem; line-height: 1rem; } .p-6 { padding: 0.5rem; } #heart-rate-zones .text-right { display: flex; justify-content: space-between; align-items: center; } .text-3xl { font-size: 1.5rem; line-height: 2.25rem; } #heart-rate-zones .p-4 { padding: 0rem !important; } .mb-8 { margin-bottom: 1.5rem; } #tdee-calculator-widget .calc-unit-btn { padding: 8px 10px; } .entry-content h2 { font-size: 14px; line-height: 1; } #tdee-calculator-widget .calc-warning-box { padding: 5px; } #tdee-calculator-widget { .calc-result-card { padding: 10px; } h3 { font-size: 1.2em; line-height: 1; padding: 10px; margin-bottom: 5px; } .unit { font-size: 1.5em; } } #tdee-calculator-widget .calc-macros-section { padding: 10px; } .modal-window { padding-inline: 1em; font-size: 12px; h1 { font-size: 20px; } } .modal-container-header { padding: 10px 16px; height: 4rem !important; min-height: 4rem !important; } .modal-container-body { padding: 12px 10px 20px; } .modal-window div:not(:last-of-type) { margin-bottom: 10px; } .unordered-list, .text-container ul, .rte ul { margin-inline: 1em 0; } .rte ul { margin-block: 0.25em; } #open-modal-popup { hr { margin-block: 0.5rem; } } .footer-note { padding: 10px; font-size: 0.6rem; } .footer-menu { justify-content: flex-start; } .footer-bottom .copyright { margin-bottom: 5px; } .page-hero { padding: 10px; } #SteroidPlotter { h5 { font-size: 10px; } } #SteroidPlotter hr { margin-block: 15px; } .tooltiptext { font: 400 12px / 15px 'Montserrat', sans-serif; padding: 5px; width: 250px; left: 0; transform: translateX(-50px); } #SteroidPlotter .tooltiptext { left: 25%; } #steroidplanner, #SteroidPlotter { .style-0 { font: 14px 'Montserrat', sans-serif; } .tooltip { margin: 0 5px; } } #SteroidPlotter .wp-block-columns { padding-inline: 0.2rem; } .disclaimer { margin: 10px auto; width: 95%; padding: 5px; margin-top: unset; font-size: 1em; } #SteroidPlotter { ol, ul { margin: 0 0 1em 1em; } h2 { font-size: 1rem; margin-bottom: unset; } } .crossfit-banner-right h2 { font-size: 45px; } .welcome-fitness-info .title-decor span { display: block; } .welcome-fitness-item { padding: 0; } .footer-note { margin-block: 30px; } #SteroidPlotter { p { font-size: 1em; } } #Peptide_Protocol { p { font-size: 0.75em; } } .feature-card { padding: 5px; } .nav-badge { right: -5px; } .cta-button { padding: 10px; font-size: smaller; } #Alltrs .input-group.input-group-label { display: block; } #Alltrs .input-group.input-group-label>label { width: 100%; } .modal-container { max-height: 80vh; } .history-section { padding: 0.25rem; } #Research_Peptides { h2 { margin-bottom: unset; } .analytics-card { padding: 10px; } h4, .analytics-value { font-size: 0.75rem; } } .history-item { padding: 1rem; } .week-header .card-title { font-size: 1.1rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; } #historyCount { font-size: 0.85rem; } .history-item { display: grid; } .history-item-stats { margin-block: 0.5rem; } .protocol-modal-body, .protocol-modal-header { padding: 10px 12.5px; } .protocol-item { padding: 10px; } } /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ @media (max-width: 375px) { .calc-calculate-btn { height: auto !important; } } /*--------------------------------------- Very small phones (360px and below) - Extra small devices -----------------------------------------*/ @media (max-width: 360px) { #health_tracker, #tracking_health_metrics { th, td { padding: 4px 2px; font-size: 0.7rem; } .edit, .delete { padding: 2px 4px; font-size: 0.65rem; } #submit, #updateEntry, #cancelEdit { padding: 6px 12px; font-size: var(--h10-font-size); } /* Further column hiding for very small screens */ th:nth-child(3), /* Reference Range */ td:nth-child(3) { display: none; } } .featured-product-image { flex: 0 0 70px; height: 70px; } .featured-product-text h3 { font-size: 13px; } .featured-subtitle { font-size: 11px; } .featured-rating, .featured-rating .stars { font-size: 11px; } .featured-button { padding: 6px 10px; font-size: 11px; } } /*--------------------------------------- Small Mobile (320px and below) -----------------------------------------*/ @media (max-width: 320px) { .modal-header { padding: 12px 15px 8px 15px; } .modal-recipe-title { font-size: 1.2em; } .modal-scrollable-content { padding: 0 15px 15px 15px; } .modal-recipe-img { max-height: 200px; } .recipe-description { padding: 12px; font-size: 0.9em; } .serving-info { padding: 14px; } .macro-item { font-size: 0.9em; } .ingredients-list, .tips-section { padding: 14px 16px; } .instruction-step { padding-left: 40px; } .step-number { width: 30px; height: 30px; } } /*=============================== Multi language content CSS ===============================*/ :root:lang(ar) { --direction: rtl; --font-family: 'Cairo', sans-serif; } html[lang="ar"] { direction: var(--direction); font-family: var(--font-family); a, p, h1, h2, h3, h4, h5, h6, table, ul, ol, li, div, section, form, span, .header-menu, #msform form, #steroidplanner form, #TDEE form, #macro form, #BFP form, #peptidecalc form, #glp1Calculator form, #HRT form, #Testosterone_Conversion_Tool #primary, #Site #PNxt, #diet_plan .entry-content, #Alltr, #Alltr .input-group.input-group-label { font-family: En, Kufi, Ar, Tahoma !important; } .nav-list li.dropdown ul li, .about-info-cover .title-decor, .paragraph-Head, .grid-container, .text-left, .welcome-fitness-item .title-decor, #Alltrs .input-group.input-group-label>label, #diet_plan .entry-content blockquote.info { text-align: right; } .total_price, .bank-font, .added_price, .prev-price, .price, .added_total, .added_total_2, .added_total_1, .club-card-item .price-cover, .blood-level-container.prefix, .blood-level-container .slider-wrapper, /* .slick-slider*/ .workout-list, #recipeModal, .widget-search .search-form, .widget-newsletter .subscribe-form, .post-item-cover .meta span { direction: ltr; } .title-calc { -webkit-text-stroke: unset; } .breadcrambs li:after { margin-right: 10px; } .header-cont li { margin-left: 47px; margin-right: unset; i { margin-left: 15px; } } .header-fitness .nav-list>li { border-right: unset; border-left: 2px solid #474747; margin-left: unset; } .nav-list>li:last-child { border: none; } .header-fitness { &:after, &:before { content: unset; } } .social-list li { margin-left: 13px; margin-right: unset; } .nav-list li a i { margin-right: 5px; } .nav-list>li.dropdown ul { right: 0; } .footer-blog .img-cover { margin-left: 20px; margin-right: unset; } footer .social-list li { margin-left: 18px; } .footer-cont i { margin-left: 15px; margin-right: unset; } .nav-btn, .nav-menu.active, .blood-level-percentage-wrapper { right: unset; left: 0; } .theme-toggle { right: unset; left: 20px; } @media only screen and (min-width: 320px) and (max-width: 1023px) { .nav-menu { left: unset; right: -100%; } } .footer__legal_menus>*:not(:first-child) { all: unset; margin-right: 0.5rem; padding-right: 0.5rem; border-right: 1px solid; text-decoration: underline; list-style: none; padding-left: unset; } .footer-item-1 li { padding-left: unset; } .footer-menu { justify-content: flex-start; li { margin-right: unset; margin-left: 36px; } } .glowing h1 { letter-spacing: unset; font-family: En, Kufi, Ar, Tahoma; } .table-progress-list--fat[data-gender=female] .essential { right: 35px; } .table-progress-list--fat[data-gender=female] .athletes { right: 10px; } .table-progress-list--fat[data-gender=female] .fitness { right: -24px; } .table-progress-list--fat[data-gender=female] .average { right: -50px; } .table-progress-list--fat[data-gender=female] .obese { right: -55px; } .table-progress-list--fat .essential { right: 40px; } .table-progress-list--fat .fitness { left: -80px; } .table-progress-list--fat .obese { right: -70px; } .style-58 { border-radius: 4px 0px 0px 4px; } .calc-result { td:first-of-type { text-align: right; color: white; } .percent { color: white; } } .fat-dot::before, .protein-dot::before, .carb-dot::before { margin-right: unset; margin-left: 0.5rem; } #myPieChart { z-index: -1; } .about-info-cover .title-decor:before { left: unset; right: 0; } .about-cont li { margin-right: unset; margin-left: 27px; i { margin-right: unset; margin-left: 17px; } } .section-title-bg_1 { font: 700 200px / 2 Righteous, sans-serif; margin-block: -12rem; } .file-info [id^="delete-button-"] .text, .file-info [id^="change-button-"] .text { transform: translateX(-60px); } .file-info [id^="delete-button-"] .icon, .file-info [id^="change-button-"] .icon { transform: translateX(0); } div[id="box"]:not(#workout_plan div[id="box"]) input[type="checkbox"]+label:before /* #box input[type=checkbox] + label:before */ { letter-spacing: unset; padding-left: 10px; } span.prev-price { padding-right: unset; padding-left: 0.7em; } .fitness-banner-right { padding: unset; padding: 230px 147px 100px 0; } .result { font-size: 1em; } @media (max-width: 1199px) { .fitness-banner-right { padding: 158px 110px 0px 0; } } #Site .entry-content blockquote:before { float: right; } .trhide, .facts { left: 7px; right: unset; } .close-modal { float: left; } .cookie-consent { left: 0; right: 20px; } .toggle-button .slider { margin-right: unset; margin-left: 10px; } .input-with-unit { input { padding-right: 10px; padding-left: 60px; } input[type="date"] { padding-left: 12px; } #doseInput { padding-left: 100px; } } .input-with-unit .unit { right: unset; left: 12px; } #tdee-calculator-widget .calc-input-section, .analytics-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .about-bottom-item .date-cover { border-right: unset; border-left: 2px solid #f23849; } .accordion-item-header { padding: unset; padding: 0.5rem 1rem 0.5rem 3rem; } .accordion-item-header { &::after { right: unset; left: 1rem; } } #health_tracker, #tracking_health_metrics { & .chosen-single.chosen-default, & #Biomarker_chosen, & .chosen-results, & .chosen-single span { text-align: right !important; } } input[type="date"] { text-align: right; } .crossfit-banner-right h2 { font-size: 6em; padding-block: 2rem; } .fitness-banner-right h2 { font-size: 40px; } @media only screen and (max-width: 767px) { .section-title-bg_1 { font: 900 45px / 0.8 "Righteous", sans-serif; margin-block: unset; margin-bottom: -5rem; } } #best-selling .products-thumb { margin-right: unset; margin-left: 60px; } @media (max-width: 480px) { #special-offer .section-title { font: 500 14px / 1 "Righteous", sans-serif; } .fitness-banner-right { padding: 0 0 0 20px; } } .crossfit-banner-right h2 { font-size: 2.5em; } .contact-item-left { border-right: unset; border-left: 2px solid #f23849; } .checkbox-cover { label { padding: 0.7rem 2.5rem 0 0; &:before { right: 0; } } p { padding-left: unset; padding-right: 44px; &:before { right: 0; } } } .form-group { label { text-align: right; } } .tooltiptext { top: calc(25px + 1em); right: 0; transform: translateX(85%); } #SteroidPlotter .tooltiptext { transform: translateX(0%); } .analytics-icon { right: unset; left: 20px; } .history-item.current-plan { border-left: unset; border-right: 4px solid var(--primary-color, #28a745); } .week-number { right: unset; left: 7px; } .workout-schedule-container { direction: rtl; } #Research_Peptides { #historyList span:not(:first-child) { border-left: unset; padding-left: unset; border-right: 3px solid #999; padding-right: 0.5rem; } } .widget-archive li a:before, .widget-categories li a:before { margin-right: unset; margin-left: 10px; } .category-link::before { content: unset; } .widget-recent-posts li .date i { margin-right: unset; margin-left: 8px; } .post-item-cover .meta span { margin-right: unset; margin-left: 46px; } .section.about-section .section-title { text-align: right; } div.text-input-with-addons--addon--wB52- { &:first-of-type { border-radius: unset; border-radius: 0px 0.4rem 0.4rem 0px; } } .ud-text-input-container { input { border-radius: unset; border-radius: 5px 0 0 5px; } } .password-toggle { right: unset; left: 15px; } .nav-badge { right: 15px; } ul.tabs { & li { &:first-child a { border-top-left-radius: unset; border-top-right-radius: 12px; } &:last-child a { border-top-right-radius: unset; border-top-left-radius: 12px; } } } #lastSession { padding: unset; padding: 0 2rem 2rem 0; } #msform input:focus+span::before, #msform select:focus+span::before, #msform textarea:focus+span::before, .calc input:focus+span::before, .calc select:focus+span::before, #macro-calculator input:focus+span::before, #macro-calculator select:focus+span::before, #Testosterone_Conversion_Tool select:focus+span::before, #Testosterone_Conversion_Tool input:focus+span::before, #tdee-calculator-widget select:focus+span::before, #tdee-calculator-widget input:focus+span::before, #Peptide_Protocol_Plotter select:focus+span::before, #Peptide_Protocol_Plotter input:focus+span::before, #workout_plan select:focus+span::before, #workout_plan input:focus+span::before, #health_tracker select:focus+span::before, #health_tracker input:focus+span::before, #Trainer select:focus+span::before, #Trainer input:focus+span::before, #phone-number~span::before { content: ' ▶ '; /*'▶' “◀” “▼”▽ ▼ ▼▼⯅▼“▼”▲⛛⟁▲⧩⧨*/ margin-bottom: auto; color: var(--custom-btn-bg-color); left: -.25rem; transform: translateY(-3rem); } .modal-container-footer { &:after { left: unset; right: unset; left: 15px; right: 5px; } } } /* تحسين المظهر للسلايدر في الوضع RTL */ html[lang="ar"] .best-trainer-slider .slick-list { direction: ltr; } html[lang="ar"] .best-trainer-slider .slick-track { display: flex !important; } html[lang="ar"] .best-trainer-slider .slick-slide { height: auto !important; } /* تعديل الأسهم */ html[lang="ar"] .best-trainer-slider .slick-prev:before { content: '→' !important; } html[lang="ar"] .best-trainer-slider .slick-next:before { content: '←' !important; } /* تعديل النقاط */ html[lang="ar"] .best-trainer-slider .slick-dots { text-align: right; padding-right: 0; } html[lang="ar"].dark body.dark-mode { content.flex-container h5 span { /*color: black !important;*/ } a, p, h1, h2, h3, h4, h5, h6, table, ul, ol, li, div, section, form, span, body { font-family: En, Kufi, Ar, Tahoma !important; } } /*============================ Skeleton Loading Effect ============================*/ .skeleton-line { height: 12px; background: #eee; border-radius: 6px; margin: 6px 0; animation: pulse 1.2s infinite; } .skeleton-line.short { width: 60%; } @keyframes pulse { 0% { opacity: .6; } 50% { opacity: .3; } 100% { opacity: .6; } } /*---------------------------------------------------------- Main Stylesheet Theme: Yotta Fit Author: Ahmed Elgenedy Version: 1.0 01) NORMALIZE 02) STRUCTURE 03) TYPOGRAPHY 04) HEADER 05) FORMS 06) FOOTER 07) CONTENT STYLE -----------------------------------------------------------*/ /*----------------------- STRUCTURE -----------------------*/ /*----------------------- NORMALIZE -----------------------*/ /*-------------------- RESETE STYLES --------------------*/ /* #Testosterone_Conversion_Tool input[type="text"], #Testosterone_Conversion_Tool input[type="email"], #Testosterone_Conversion_Tool input[type="url"], #Testosterone_Conversion_Tool input[type="password"], #Testosterone_Conversion_Tool input[type="search"], #Testosterone_Conversion_Tool input[type="tel"], #Testosterone_Conversion_Tool input[type="number"], #Testosterone_Conversion_Tool textarea, #Testosterone_Conversion_Tool select */ /*======================================== CUSTOM PROPERTIES ( Responsive ) ========================================*/ /*=============================== Scroll Top ===============================*/ /*========================Thank you=================*/ /*--------------------------------------- CUSTOM PROPERTIES ( VARIABLES ) -----------------------------------------*/ /*R (Red): 64 G (Green): 181 B (Blue): 231 A (Alpha): 1 (represents full opacity) #03090b_rgba(105, 90, 205, 0.05)_#40b5e7_rgba(105, 90, 205, 0.05);*/ /*transparent rgba(160, 160, 160, 0.8) rgba(196, 196, 196, 0.5) rgba(255, 255, 255, 0.75) rgba(232, 214, 110) #4B0000 #abc #5c96ad #ffdd84 box-shadow: 0 0 0 0px #202020, 0 0 0 0px #c41b1b; background: linear-gradient(90deg,#ff8686 0,#ffdd84 25%,#9cff84 50%,#ffdd86 75%,#ff8585 100%) background: linear-gradient(90deg,#ff8686 0,#ffdd84 13%,#9cff84 29%,#87b958 43%,#ffdd86 61%,#ff8585 100%) background: rgba(160, 160, 160, 0.8); border-image: linear-gradient(to right, transparent, #34495e, transparent) 1; box-shadow: 0 10px 80px rgba(196, 196, 196, 0.5); box-shadow: -2px 4px 44px 0px #4B0000; border: 2px dashed #abc; background: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent) #D62929; background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent); filter: drop-shadow(0 0 20px rgba(232, 214, 110)); border: 1px solid transparent; background-color: #5c96ad; background: -webkit-linear-gradient(top, #40b5e7 0%, #3bafdf 100%);*/