| | |
| | | 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; */ |
| | | |
| | | --warning: 232,167,55; /* #E8A737; */ |
| | | --warningLight: 253,247,238;/* #fdf7ee; */ |
| | | --warningDark: 52,35,6; /* #342306; */ |
| | | |
| | | --error: 183,51,46; /* #B7332E; */ |
| | | --errorLight: 250,235,234; /* #faebea; */ |
| | | --errorDark: 40,11,10; /* #280b0a; */ |
| | | |
| | | |
| | | --base: var(--light-0); |
| | | --base-50: var(--light-50); |
| | | --base-100: var(--light-100); |
| | | --base-200: var(--light-200); |
| | | --base-rgb: var(--light-rgb); |
| | | |
| | | --contrast: var(--dark-0); |
| | | --contrast-50: var(--dark-50); |
| | | --contrast-100: var(--dark-100); |
| | | --contrast-200: var(--dark-200); |
| | | --contrast-rgb: var(--dark-rgb); |
| | | |
| | | --successBack: var(--successLight); |
| | | --successText: var(--successDark); |
| | | --warningBack: var(--warningLight); |
| | | --warningText: var(--warningDark); |
| | | --errorBack: var(--errorLight); |
| | | --errorText: var(--errorDark); |
| | | } |
| | | |
| | | 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; */ |
| | | |
| | | --secondary-50: 216,159,0; /* #d89f00; */ |
| | | --secondary-100: 181,133,0; /* #b58500; */ |
| | | --secondary-200: 145,106,0; /* #916a00; */ |
| | | |
| | | |
| | | --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); |
| | |
| | | src: url('./assets/fonts/josefin-sans-v34-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/josefin-sans-v34-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | |
| | | .home .video-cover.video-cover { |
| | | margin-top: 0; |
| | | } |
| | |
| | | .scroll-progress .bar { |
| | | background: |
| | | linear-gradient(90deg, |
| | | rgba(var(--action-rgb),.8) 0%, |
| | | rgba(var(--action-rgb),1) 40%, |
| | | rgba(var(--action-rgb),.8) 100%); |
| | | rgba(var(--action-0),.8) 0%, |
| | | rgba(var(--action-0),1) 40%, |
| | | rgba(var(--action-0),.8) 100%); |
| | | position: relative; |
| | | |
| | | box-shadow: |
| | | 0 0 4px rgba(var(--action-rgb),.9), |
| | | 0 0 8px rgba(var(--action-rgb),.7), |
| | | 0 0 16px rgba(var(--action-rgb),.4); |
| | | 0 0 4px rgba(var(--action-0),.9), |
| | | 0 0 8px rgba(var(--action-0),.7), |
| | | 0 0 16px rgba(var(--action-0),.4); |
| | | } |
| | | #theme-switch#theme-switch { |
| | | position: absolute; |
| | |
| | | .eltrs { |
| | | min-height: 40vh; |
| | | width: 100vw; |
| | | background-color: var(--action-0); |
| | | background-color: rgb(var(--action-0)); |
| | | --justify: center; |
| | | --align: center; |
| | | } |
| | | .eltrs h2 { |
| | | font-family: var(--body); |
| | | font-weight: var(--fw-h-bold); |
| | | color: var(--action-contrast); |
| | | color: rgb(var(--action-contrast)); |
| | | text-align: center; |
| | | margin: 0; |
| | | font-size: var(--txt-large); |
| | |
| | | font-size: var(--txt-xxx-large); |
| | | height: var(--width); |
| | | width: var(--width); |
| | | /*border: 1rem solid var(--base-200);*/ |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | /*border: 1rem solid rgb(var(--base-200));*/ |
| | | background-color: rgb(var(--action-0)); |
| | | color: rgb(var(--action-contrast)); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | |
| | | border: 4px solid var(--action-200); |
| | | border-left: 0; |
| | | border-top: 0; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | box-shadow: rgba(var(--base),var(--op-45)) var(--shdw); |
| | | } |
| | | |
| | | @media (min-width: 768px) { |
| | |
| | | /* width: 100%;*/ |
| | | /*}*/ |
| | | main > section:nth-of-type(even) { |
| | | background-color: var(--base-100); |
| | | background-color: rgb(var(--base)); |
| | | max-width: 100vw; |
| | | padding: 3rem 0; |
| | | } |
| | |
| | | |
| | | section.pre-footer { |
| | | min-height: 25vh; |
| | | background-color: var(--secondary-0); |
| | | color: var(--secondary-contrast); |
| | | background-color: rgb(var(--secondary-0)); |
| | | color: rgb(var(--secondary-contrast)); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | |
| | | margin-top: 0; |
| | | } |
| | | .pre-footer a { |
| | | background-color: var(--secondary-contrast); |
| | | background-color: rgb(var(--secondary-contrast)); |
| | | padding: 0 .125rem; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | a{ |
| | | position: relative; |
| | | z-index: 1; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | gap: 5px; |
| | | color: rgb(var(--action-0)); |
| | | } |
| | | |
| | | a::before { |
| | | content: ''; |
| | | background-color: rgba(var(--action-0), .8); |
| | | width: 100%; |
| | | height: 100%; |
| | | position: absolute; |
| | | inset: 0; |
| | | z-index: -1; |
| | | pointer-events: none; |
| | | opacity: 0; |
| | | border-radius: 50%; |
| | | } |
| | | |
| | | p a:hover { |
| | | text-shadow: 1px 0 10px rgb(var(--action-0)); |
| | | background-color: transparent!important; |
| | | color: rgb(var(--action-contrast))!important; |
| | | border-color:transparent!important; |
| | | } |
| | | p a:hover::before { |
| | | opacity: 1; |
| | | filter: blur(1.666em); |
| | | transition: var(--trans-color); |
| | | } |
| | | |
| | | |
| | | |
| | | .triangle { |
| | | padding: 2rem 2rem 0; |
| | | --justify: flex-end; |
| | | position: relative; |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | background-color: rgb(var(--action-0)); |
| | | color: rgb(var(--action-contrast)); |
| | | } |
| | | .excerpt::after, |
| | | .triangle::after { |
| | |
| | | height: 0; |
| | | border-left: 32px solid transparent; |
| | | border-right: 32px solid transparent; |
| | | border-top: 32px solid var(--action-0); |
| | | border-top: 32px solid rgb(var(--action-0)); |
| | | clear: both; |
| | | } |
| | | .excerpt::after { |
| | |
| | | position: relative; |
| | | margin-right: 1rem; |
| | | padding: 1rem 15vw 1rem 0; |
| | | border-bottom: 4px solid var(--action-0); |
| | | border-bottom: 4px solid rgb(var(--action-0)); |
| | | margin-bottom: 6rem; |
| | | grid-column: full; |
| | | max-width: var(--narrow); |
| | |
| | | vertical-align: bottom; |
| | | line-height: 1.4; |
| | | /*margin-right: .75rem;*/ |
| | | color: var(--action-0); |
| | | color: rgb(var(--action-0)); |
| | | position: relative; |
| | | left: -2rem; |
| | | cursor: pointer; |
| | | } |
| | | .tldr.term { |
| | | font-weight: var(--fw-b-light); |
| | | font-size: var(--txt-medium); |
| | | left: 0; |
| | | color: rgb(var(--contrast)); |
| | | } |
| | | .align-full.triangle:has(+.contact) { |
| | | margin-bottom: 0; |
| | | z-index: 1; |
| | |
| | | gap: 1.5rem; |
| | | margin-top: -.5rem; |
| | | padding-bottom: 2rem; |
| | | background-color: var(--base-100); |
| | | color: var(--contrast-200); |
| | | background-color: rgb(var(--base-100)); |
| | | color: rgb(var(--contrast-200)); |
| | | max-width: none; |
| | | } |
| | | @media (min-width: 768px) { |
| | |
| | | } |
| | | section.contact .buttons li a, |
| | | section.contact .socials a { |
| | | background-color: var(--base-50); |
| | | background-color: rgb(var(--base-50)); |
| | | } |
| | | section.contact .buttons li a:hover, |
| | | section.contact .buttons li a:focus, |
| | | section.contact .socials a:hover, |
| | | section.contact .socials a:focus { |
| | | background-color: var(--action-0); |
| | | background-color: rgb(var(--action-0)); |
| | | } |
| | | section.contact.triangle::after { |
| | | border-top-color: var(--base-100); |
| | | border-top-color: rgb(var(--base-100)); |
| | | } |
| | | section.contact h2 { |
| | | margin: 2rem 0 0; |
| | |
| | | section.contact h2::after { |
| | | content: ''; |
| | | height: 2px; |
| | | background-color: var(--contrast-200); |
| | | background-color: rgb(var(--contrast-200)); |
| | | border-radius: 4px; |
| | | width: 100%; |
| | | position:relative; |
| | |
| | | } |
| | | |
| | | span.logo .icon-logo-triangle { |
| | | background-color: var(--action-0); |
| | | background-color: rgb(var(--action-0)); |
| | | --w:4rem; |
| | | } |
| | | span.logo .icon-logo-text-only { |
| | | --w: 8rem; |
| | | } |
| | | a .icon-logo-text-only { |
| | | background-color: var(--contrast); |
| | | background-color: rgb(var(--contrast)); |
| | | } |
| | | a:hover .icon-logo-text-only { |
| | | background-color: var(--action-0); |
| | | background-color: rgb(var(--action-0)); |
| | | } |
| | | span.logo:hover .icon-logo-triangle { |
| | | |
| | |
| | | width: 25vw; |
| | | } |
| | | } |
| | | |
| | | .feed.item[data-timeline] .images { |
| | | padding: 0; |
| | | } |
| | | .feed.item details summary { |
| | | position: relative; |
| | | top: 0; |
| | | } |
| | | |
| | | .directory-list .image { |
| | | position: relative; |
| | | } |
| | | .directory-list .image .icon { |
| | | transform: rotate(90deg); |
| | | --w: 40px; |
| | | color: rgb(var(--action-0)); |
| | | position: absolute; |
| | | left: calc(50% - 15px); |
| | | } |
| | | body.progress .term-list li { |
| | | display: flex; |
| | | gap: .5em; |
| | | align-items: center; |
| | | } |
| | | |
| | | .timeline.terms { |
| | | width: 100%; |
| | | } |
| | | |
| | | |
| | | .loop .item-grid .progress { |
| | | aspect-ratio: 3/2; |
| | | position: relative; |
| | | } |
| | | |
| | | .loop .item-grid .progress figure { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | gap: .125rem; |
| | | background-color: rgb(var(--action-0)); |
| | | position: relative; |
| | | } |
| | | |
| | | .loop .item-grid .progress figure span { |
| | | position: absolute; |
| | | width: 50%; |
| | | text-transform: uppercase; |
| | | background-color: rgba(var(--action-0),var(--op-4)); |
| | | color: rgb(var(--action-contrast)); |
| | | padding: 0 .25rem; |
| | | } |
| | | |
| | | .loop .progress figure img { |
| | | max-width: 50%; |
| | | object-fit: cover; |
| | | } |
| | | |
| | | figure .after { |
| | | top: 0; |
| | | right:0; |
| | | } |
| | | |
| | | figure .before { |
| | | bottom: 0; |
| | | 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); |
| | | } |
| | | .gmb-reviews blockquote { |
| | | border-top: 0; |
| | | max-width: none; |
| | | } |
| | | |
| | | blockquote .content { |
| | | margin: 12px 0; |
| | | position: relative; |
| | | font-family: var(--heading); |
| | | |
| | | padding: 1.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;*/ |
| | | padding: 0!important; |
| | | margin: 0 0 0 150px!important; |
| | | z-index: 1; |
| | | } |
| | | |
| | | .gmb-reviews ul li { |
| | | padding: 1rem 1rem 2rem; |
| | | } |
| | | |
| | | dialog .item-info header { |
| | | height: max-content; |
| | | text-align: left; |
| | | } |
| | | dialog .item-info * { |
| | | font-size: var(--txt-medium)!important; |
| | | } |
| | | dialog .item-info header h2 .icon { |
| | | display: none; |
| | | } |
| | | dialog .item-info header ul { |
| | | margin: 0; |
| | | } |