/*!
|
Theme Name: Legacy
|
Theme URI: https://legacytattooremoval.ca
|
Description: Theme for Legacy Tattoo Removal
|
Author: Jake
|
Author URI: https://jakevan.ca
|
Template: jvb-theme
|
Version: 1.0.1
|
*/
|
:root{
|
--filter: grayscale(.3) sepia(.4);
|
|
/** Download your Fonts from: https://gwfh.mranftl.com/ **/
|
--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
--heading: 'Josefin Sans', var(--font-base);
|
--body: 'Open Sans', var(--font-base);
|
--fw-h: 300;
|
--fw-h-light: 300;
|
--fw-h-bold: 700;
|
--fw-b: 500;
|
--fw-b-bold: 800;
|
--fw-b-light: 300;
|
|
/* Colours
|
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: 239,239,239; /* #efefef; */
|
--light-50: 226,226,226; /* #e2e2e2; */
|
--light-100: 213,213,213; /* #d5d5d5; */
|
--light-200: 201,201,201; /* #c9c9c9; */
|
|
--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: 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: 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: 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; */
|
}
|
|
body:has(#theme-switcher:checked){
|
--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; */
|
}
|
/*** FONT START **/
|
/* open-sans-300 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: normal;
|
font-weight: 300;
|
src: url('./assets/fonts/open-sans-v44-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-300italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: italic;
|
font-weight: 300;
|
src: url('./assets/fonts/open-sans-v44-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-500 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: normal;
|
font-weight: 500;
|
src: url('./assets/fonts/open-sans-v44-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-500italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: italic;
|
font-weight: 500;
|
src: url('./assets/fonts/open-sans-v44-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-800 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: normal;
|
font-weight: 800;
|
src: url('./assets/fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-800italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: italic;
|
font-weight: 800;
|
src: url('./assets/fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
|
/* josefin-sans-300 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Josefin Sans';
|
font-style: normal;
|
font-weight: 300;
|
src: url('./assets/fonts/josefin-sans-v34-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/josefin-sans-v34-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* josefin-sans-300italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Josefin Sans';
|
font-style: italic;
|
font-weight: 300;
|
src: url('./assets/fonts/josefin-sans-v34-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/josefin-sans-v34-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* josefin-sans-700 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Josefin Sans';
|
font-style: normal;
|
font-weight: 700;
|
src: url('./assets/fonts/josefin-sans-v34-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/josefin-sans-v34-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* josefin-sans-700italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Josefin Sans';
|
font-style: italic;
|
font-weight: 700;
|
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;
|
}
|
/*** FONT END ***/
|
.wp-site-blocks > header {
|
justify-content: center!important;
|
}
|
.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%);
|
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);
|
}
|
#theme-switch#theme-switch {
|
position: absolute;
|
left: 1rem;
|
}
|
|
.fixed.bottom .call {
|
width: var(--btn);
|
flex: 0 1 var(--btn_);
|
}
|
|
.fixed.bottom li a {
|
gap: 1rem;
|
}
|
|
nav.always.always a {
|
text-transform: none;
|
}
|
|
.pre-header {
|
font-family: var(--heading);
|
}
|
|
.eltrs {
|
min-height: 40vh;
|
width: 100vw;
|
background-color: var(--action-0);
|
--justify: center;
|
--align: center;
|
}
|
.eltrs h2 {
|
font-family: var(--body);
|
font-weight: var(--fw-h-bold);
|
color: var(--action-contrast);
|
text-align: center;
|
margin: 0;
|
font-size: var(--txt-large);
|
}
|
.eltrs span:nth-of-type(1) {
|
font-size: 2.25em;
|
letter-spacing: -.15rem;
|
}
|
.eltrs span:nth-of-type(2) {
|
line-height: .8;
|
}
|
.eltrs span:nth-of-type(3) {
|
font-size: 2.2em;
|
letter-spacing: -.1rem;
|
}
|
.eltrs span {
|
display: block;
|
line-height: .9;
|
}
|
|
@media (min-width:768px) {
|
.eltrs h2 {
|
font-size: var(--txt-xx-large);
|
}
|
.eltrs span:nth-of-type(1) {
|
font-size: 2.25em;
|
letter-spacing: -.35rem;
|
}
|
.eltrs span:nth-of-type(2) {
|
line-height: .8;
|
}
|
.eltrs span:nth-of-type(3) {
|
font-size: 2.35em;
|
letter-spacing: -.25rem;
|
}
|
}
|
|
ol.blocky.blocky {
|
list-style: none;
|
counter-reset: blocky;
|
padding: 1rem;
|
max-width: none;
|
}
|
@media (min-width: 768px) {
|
padding: 1rem var(--btn);
|
}
|
|
ol.blocky li {
|
counter-increment: blocky;
|
--width: 20vw;
|
--gap: 25vw;
|
min-height: var(--width);
|
margin: 4rem auto;
|
display: flex;
|
flex-direction: column;
|
position: relative;
|
padding-left: var(--gap);
|
}
|
|
ol.blocky li:nth-of-type(odd)::before,
|
ol.blocky li:nth-of-type(even)::after {
|
content: counter(blocky);
|
font-weight: 900;
|
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);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: absolute;
|
top: 0;
|
left: 0;
|
border-radius: 50% 4px 50% 4px;
|
border: 4px solid var(--action-200);
|
border-left: 0;
|
border-top: 0;
|
box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
|
}
|
|
@media (min-width: 768px) {
|
ol.blocky li {
|
position: relative;
|
display: block;
|
padding: 1rem;
|
}
|
|
ol.blocky li:nth-of-type(odd) {
|
padding-left: var(--gap);
|
}
|
ol.blocky li:nth-of-type(even) {
|
padding-right: var(--gap);
|
}
|
|
ol.blocky li:nth-of-type(odd)::before,
|
ol.blocky li:nth-of-type(even)::after {
|
margin-bottom: 0;
|
width: var(--width);
|
position: absolute;
|
top: 0;
|
left: unset;
|
border-radius: 0;
|
border-width: .5rem;
|
}
|
|
ol.blocky li:nth-of-type(odd)::before {
|
left: 0;
|
}
|
ol.blocky li:nth-of-type(even)::after {
|
right: 0;
|
}
|
}
|
/*main > section > * {*/
|
/* width: 100%;*/
|
/*}*/
|
main > section:nth-of-type(even) {
|
background-color: var(--base);
|
max-width: 100vw;
|
padding: 3rem 0;
|
}
|
main > section:nth-of-type(even) > * {
|
max-width: var(--content);
|
margin-left: auto;
|
margin-right: auto;
|
}
|
main > section.callout:last-of-type {
|
margin-bottom: 0;
|
}
|
|
section.pre-footer {
|
min-height: 25vh;
|
background-color: var(--secondary-0);
|
color: var(--secondary-contrast);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0 2rem;
|
flex-direction: column;
|
gap: 0;
|
}
|
.pre-footer p {
|
margin: 0;
|
text-align: center;
|
}
|
.pre-footer ~ footer {
|
margin-top: 0;
|
}
|
.pre-footer a {
|
background-color: var(--secondary-contrast);
|
padding: 0 .125rem;
|
border-radius: 4px;
|
}
|
|
a{
|
position: relative;
|
z-index: 1;
|
display: inline-flex;
|
align-items: center;
|
gap: 5px;
|
color: var(--action-0);
|
}
|
|
a::before {
|
content: '';
|
background-color: rgba(var(--action-rgb), .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 var(--action-0);
|
background-color: transparent!important;
|
color: 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);
|
}
|
.excerpt::after,
|
.triangle::after {
|
content: '';
|
position: absolute;
|
top: 100%;
|
width: 0;
|
height: 0;
|
border-left: 32px solid transparent;
|
border-right: 32px solid transparent;
|
border-top: 32px solid var(--action-0);
|
clear: both;
|
}
|
.excerpt::after {
|
left: -1rem;
|
}
|
.triangle::after {
|
right: 2rem;
|
}
|
.triangle.left::after {
|
right: unset;
|
left: 2rem;
|
}
|
.triangle h1 {
|
padding-right: 1rem;
|
max-width: var(--wide);
|
width: max-content;
|
word-wrap: break-word;
|
}
|
|
.excerpt {
|
position: relative;
|
margin-right: 1rem;
|
padding: 1rem 15vw 1rem 0;
|
border-bottom: 4px solid var(--action-0);
|
margin-bottom: 6rem;
|
grid-column: full;
|
max-width: var(--narrow);
|
margin-left: auto;
|
}
|
.tldr {
|
font-weight: var(--fw-b-bold);
|
font-size: var(--txt-large);
|
display: inline-block;
|
vertical-align: bottom;
|
line-height: 1.4;
|
/*margin-right: .75rem;*/
|
color: 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: var(--contrast);
|
}
|
.align-full.triangle:has(+.contact) {
|
margin-bottom: 0;
|
z-index: 1;
|
}
|
section.contact.contact {
|
gap: 1.5rem;
|
margin-top: -.5rem;
|
padding-bottom: 2rem;
|
background-color: var(--base-100);
|
color: var(--contrast-200);
|
max-width: none;
|
}
|
@media (min-width: 768px) {
|
section.contact.contact {
|
padding: 2rem 15vw;
|
}
|
}
|
section.contact .buttons li a,
|
section.contact .socials a {
|
background-color: 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);
|
}
|
section.contact.triangle::after {
|
border-top-color: var(--base-100);
|
}
|
section.contact h2 {
|
margin: 2rem 0 0;
|
display: flex;
|
font-weight: var(--fw-h-bold);
|
text-transform: uppercase;
|
white-space: nowrap;
|
width: 100%;
|
line-height: 1;
|
gap: 1rem;
|
align-items: center;
|
}
|
section.contact h2::after {
|
content: '';
|
height: 2px;
|
background-color: var(--contrast-200);
|
border-radius: 4px;
|
width: 100%;
|
position:relative;
|
top: -.25rem;
|
}
|
|
section.contact p {
|
margin: 0;
|
line-height: 1;
|
user-select: all;
|
}
|
section.contact .buttons {
|
margin: 0;
|
--height: fit-content;
|
}
|
section.contact > .col {
|
width: 50%;
|
}
|
.pricing p {
|
margin:0;
|
}
|
.pricing h3 {
|
margin: 4rem 0 0 0;
|
}
|
.pricing > .group {
|
--wrap: wrap;
|
}
|
@media (min-width: 768px) {
|
.pricing > .group {
|
--wrap: nowrap;
|
}
|
.pricing > .group > .col {
|
width: 50%;
|
}
|
}
|
|
span.logo .icon-logo-triangle {
|
background-color: var(--action-0);
|
--w:4rem;
|
}
|
span.logo .icon-logo-text-only {
|
--w: 8rem;
|
}
|
a .icon-logo-text-only {
|
background-color: var(--contrast);
|
}
|
a:hover .icon-logo-text-only {
|
background-color: var(--action-0);
|
}
|
span.logo:hover .icon-logo-triangle {
|
|
}
|
|
.loop {
|
max-width: var(--full);
|
overflow-x: auto;
|
padding: 1rem 0;
|
touch-action: pan-x pan-y;
|
}
|
|
.loop .item-grid.item-grid {
|
display: flex;
|
flex-wrap: nowrap;
|
width: max-content;
|
position: relative;
|
}
|
.loop .item-grid.item-grid figure {
|
margin: 0;
|
}
|
.loop .item-grid .item:nth-of-type(odd) figure {
|
top: -1rem;
|
}
|
|
.loop .item-grid .item.item {
|
width: 50vw;
|
}
|
|
@media (min-width: 768px){
|
.loop .item-grid .item.item {
|
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: 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: var(--action-0);
|
position: relative;
|
}
|
|
.loop .item-grid .progress figure span {
|
position: absolute;
|
width: 50%;
|
text-transform: uppercase;
|
background-color: rgba(var(--action-rgb),var(--op-4));
|
color: 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);
|
}
|
|
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;
|
}
|
