| | |
| | | For best results, generate colours from base colours using: https://uicolors.app/generate/ |
| | | or sass darken/lighten by 5%: http://scg.ar-ch.org/ |
| | | */ |
| | | --light-0: #efefef; |
| | | --light-50: #e2e2e2; |
| | | --light-100: #d5d5d5; |
| | | --light-200: #c9c9c9; |
| | | --light-rgb: 239,239,239; |
| | | --light-0: 239,239,239; /* #efefef; */ |
| | | --light-50: 226,226,226; /* #e2e2e2; */ |
| | | --light-100: 213,213,213; /* #d5d5d5; */ |
| | | --light-200: 201,201,201; /* #c9c9c9; */ |
| | | |
| | | --dark-0: #151515; |
| | | --dark-50: #222222; |
| | | --dark-100: #2e2e2e; |
| | | --dark-200: #3b3b3b; |
| | | --dark-rgb: 21,21,21; |
| | | --dark-0: 21,21,21; /* #151515; */ |
| | | --dark-50: 34,34,34; /* #222222; */ |
| | | --dark-100: 46,46,46; /* #2e2e2e; */ |
| | | --dark-200: 59,59,59; /* #3b3b3b; */ |
| | | |
| | | --action-0: #ff0080; |
| | | --action-50: #ff2492; |
| | | --action-100: #ff47a4; |
| | | --action-200: #ff6bb5; |
| | | --action-rgb: 255,0,128; |
| | | --action-0: 255,0,128; /* #ff0080; */ |
| | | --action-50: 255,38,146; /* #ff2492; */ |
| | | --action-100: 255,71,164; /* #ff47a4; */ |
| | | --action-200: 255,107,181; /* #ff6bb5; */ |
| | | --action-contrast: var(--light-0); |
| | | |
| | | --secondary-0: #D69121; |
| | | --secondary-50: #ffc421; |
| | | --secondary-100: #ffcd44; |
| | | --secondary-200: #ffd768; |
| | | --secondary-rgb: 252,185,0; |
| | | --secondary-0: 214,145,33; /* #D69121; */ |
| | | --secondary-50: 255,196,33; /* #ffc421; */ |
| | | --secondary-100: 255,205,68;/* #ffcd44; */ |
| | | --secondary-200: 255,215,104;/* #ffd768; */ |
| | | --secondary-contrast: var(--light-0); |
| | | |
| | | --success: #20D64E; |
| | | --successLight: #DBFAE3; |
| | | --successDark: #05230D; |
| | | --successBack: var(--successLight); |
| | | --successText: var(--successDark); |
| | | --warning: #D69121; |
| | | --warningLight: #F6E5CB; |
| | | --warningDark: #231806; |
| | | --warningBack: var(--warningLight); |
| | | --warningText: var(--warningDark); |
| | | --error: #CF1616; |
| | | --errorLight: #F9C8C8; |
| | | --errorDark: #4A0808; |
| | | --errorBack: var(--errorLight); |
| | | --errorText: var(--errorDark); |
| | | --success: 76,175,80; /* #4CAF50; */ |
| | | --successLight: 234,246,235; /* #eaf6eb; */ |
| | | --successDark: 14,33,15; /* #0e210f; */ |
| | | |
| | | --base: var(--light-0); |
| | | --base-50: var(--light-50); |
| | | --base-100: var(--light-100); |
| | | --base-200: var(--light-200); |
| | | --base-rgb: var(--light-rgb); |
| | | --warning: 232,167,55; /* #E8A737; */ |
| | | --warningLight: 253,247,238;/* #fdf7ee; */ |
| | | --warningDark: 52,35,6; /* #342306; */ |
| | | |
| | | --contrast: var(--dark-0); |
| | | --contrast-50: var(--dark-50); |
| | | --contrast-100: var(--dark-100); |
| | | --contrast-200: var(--dark-200); |
| | | --contrast-rgb: var(--dark-rgb); |
| | | --error: 183,51,46; /* #B7332E; */ |
| | | --errorLight: 250,235,234; /* #faebea; */ |
| | | --errorDark: 40,11,10; /* #280b0a; */ |
| | | } |
| | | |
| | | body:has(#theme-switcher:checked){ |
| | | --action-50: #db006e; |
| | | --action-100: #b8005c; |
| | | --action-200: #94004a; |
| | | --secondary-50: #d89f00; |
| | | --secondary-100: #b58500; |
| | | --secondary-200: #916a00; |
| | | --action-50: 219,0,110; /* #db006e; */ |
| | | --action-100: 184,0.92; /* #b8005c; */ |
| | | --action-200: 148,0,74; /* #94004a; */ |
| | | |
| | | --contrast: var(--light-0); |
| | | --contrast-50: var(--light-50); |
| | | --contrast-100: var(--light-100); |
| | | --contrast-200: var(--light-200); |
| | | --contrast-rgb: var(--light-rgb); |
| | | |
| | | --base: var(--dark-0); |
| | | --base-50: var(--dark-50); |
| | | --base-100: var(--dark-100); |
| | | --base-200: var(--dark-200); |
| | | --base-rgb: var(--dark-rgb); |
| | | |
| | | --successBack: var(--successDark); |
| | | --successText: var(--successLight); |
| | | --warningBack: var(--warningDark); |
| | | --warningText: var(--warningLight); |
| | | --errorBack: var(--errorDark); |
| | | --errorText: var(--errorLight); |
| | | --secondary-50: 216,159,0; /* #d89f00; */ |
| | | --secondary-100: 181,133,0; /* #b58500; */ |
| | | --secondary-200: 145,106,0; /* #916a00; */ |
| | | } |
| | | /*** FONT START **/ |
| | | /* open-sans-300 - latin */ |
| | |
| | | left: 0; |
| | | } |
| | | |
| | | [data-field="goal"] fieldset { |
| | | grid-template-columns: repeat(1, 1fr)!important; |
| | | } |
| | | |
| | | |
| | | blockquote { |
| | | --background: rgb(var(--base-100)); |
| | | --border: rgb(var(--action-0)); |
| | | line-height: 1.2; |
| | | padding: var(--btn); |
| | | border-radius: 4rem; |
| | | background-color: var(--background); |
| | | } |
| | | |
| | | blockquote .content { |
| | | margin: 12px auto; |
| | | max-width: min(680px, 80vw); |
| | | position: relative; |
| | | font-family: var(--heading); |
| | | font-weight: var(--fw-h-bold); |
| | | padding: 3rem 2.5rem; |
| | | border-radius: var(--radius-outer); |
| | | border: 2px solid var(--border); |
| | | } |
| | | |
| | | blockquote .content::before, |
| | | blockquote .content::after { |
| | | position: absolute; |
| | | content: ''; |
| | | left: 50px; |
| | | } |
| | | |
| | | blockquote .content::before { |
| | | width: 80px; |
| | | border: 6px solid var(--background); |
| | | bottom: -3px; |
| | | z-index: 2; |
| | | } |
| | | |
| | | blockquote .content::after { |
| | | border: 2px solid var(--border); |
| | | border-radius: 0 100% 0 0; |
| | | width: 60px; |
| | | height: 60px; |
| | | bottom: -60px; |
| | | border-bottom: 0; |
| | | border-left: 0; |
| | | z-index: 3; |
| | | } |
| | | |
| | | blockquote cite { |
| | | padding: 15px 0 0 12px; |
| | | margin: 0 0 0 150px; |
| | | z-index: 1; |
| | | } |