@charset "UTF-8";
:root {
/*
font base: 16px
design-ratio: golden-ratio aka: 1,618034
*/
--design-ratio: 1.618034; /* useful for calc */
--ms0:1;
--ms1:1.618034;
--ms2:2.6180340252;
--ms3:4.2360680659;
--ms4:6.8541021569;
--ms5:11.0901703293; /* big enough */
--rms0:1.01127125;
--rms1:1.618034;
--rms2:2.62930525;
--rms3:4.24733925;
--rms4:6.8766445;
--rms5:11.12398375;
--rms6:18.00062825;
--rms7:29.124612; /* around 466px */
--rms8:46.922986;
--rms9:76.047598;
--rms10:122.970584;
/*--base-em: 1.2em;*/
/*
apply this --base-em on any calc you need to convert with em
you can also update this value at specific breakpoint or inside
any module.
Such with value below:
*/
/*--base-em: 1em;*/
/* 16px */
/*--base-em: 1.25em;*/
/* 20px */
/*--base-em: 1.5em;*/
/* 24px, really big for paragraph... */
/*
use this on breakpoint from desktop (or tablet) to increase font-size base from 16px to 20px if you feel this is necessary
*/
/* use as clue for some calc or grid */
--perc1:1.32%;
--perc2:2.13%;
--perc3:3.44%;
--perc4:5.57%;
--perc5:9.02%;
--perc6:14.59%;
--perc7:23.61%;
--perc8:38.20%;
--perc9:61.80%;
--perc10:76.39%;
--perc11:85.41%;
--perc12:90.98%;
--perc13:94.43%;
--perc14:96.56%;
/* use only for font sizes */
--font-size0: calc(var(--ms0) * var(--base-em));
--font-size1: calc(var(--ms1) * var(--base-em));
--font-size2: calc(var(--ms2) * var(--base-em));
--font-size3: calc(var(--ms3) * var(--base-em));
--font-size4: calc(var(--ms4) * var(--base-em));
--font-size5: calc(var(--ms5) * var(--base-em));
/* use for margin, padding, width, height, line-height */
--size0: calc(var(--rms0) * var(--base-em));
--size1: calc(var(--rms1) * var(--base-em));
--size2: calc(var(--rms2) * var(--base-em));
--size3: calc(var(--rms3) * var(--base-em));
--size4: calc(var(--rms4) * var(--base-em));
--size5: calc(var(--rms5) * var(--base-em));
--size6: calc(var(--rms6) * var(--base-em));
--size7: calc(var(--rms7) * var(--base-em));
--size8: calc(var(--rms8) * var(--base-em));
--size9: calc(var(--rms9) * var(--base-em));
/* you might need to use calc in your .class names to adapt size to your design needs */
--paragraph-line-height: calc(var(--rms1) * 1em); /* DO NOT USE ANY --size here */
--leading-tight: calc(var(--paragraph-line-height) * .75);
--leading-normal: var(--paragraph-line-height);
/*
THEME custom properties
aka colors, font-family,
*/
--font-family: "Outfit", sans-serif;
/*
white colors
============
*/
--white-antiflesh: #FAFAFA;
--white-off-white: #FBFBFB;
--white-alice-blue: #F0F8FF;
--white-ivory: #FFFFF0;
--white-gainsboro: #C7C7C7;
--white-snow: #FFFAFA;
--white-ghost-white: #F8F8FF;
--retort:00;
/*
compute main color
*/
/* best value for hue: 170, 185 (start), 190 & 200 & 210(!!!!), 290, 300, 310, 320, 330, 340 */
--h: 105;
--s: 100%;
--l: 40%; /* default: 47 but 40 is way better */
/*
to modify on each page the hue, you must apply
style="--h:170;" (example)
on the element.
or use
*/
/*
use royalblue as theme-color
*/
--h: 225;
--s: 72.7%;
--l: 56.9%;
--h: 205; /* 205 */
/*
GREAT: 190!!even greater : 195 !!!
260/290 purple, 185 turquoise, 40 fnac color, 20 hot sun, 150, 160 fresh mint,
220 nice blue,
*/
--main-color: hsl(var(--h), var(--s), var(--l));
--main-color-opacity: hsla(var(--h), var(--s), var(--l), 10%);
--main-color-light: hsl(var(--h), 55%, 80%);
--vivid-color-opacity: hsla(var(--h), var(--s), var(--l), 40%);
--main-color-gradient: hsl(var(--h), var(--s), calc(var(--l) - 7%));
--main-color-gradient-color: hsl(calc(var(--h) + 20), var(--s), calc(var(--l) - 12%));
/*--main-bg-color: hsl(var(--h), 90%, 95%); */
--main-text-color: hsl(var(--h), 90%, 15%);
--main-text-sub-color: hsl(var(--h), 20%, 60%);
--main-text-color-brighter: hsl(var(--h), 90%, 35%); /* used in radial gradient */
--main-text-color-200: hsla(var(--h), 90%, 15%, .2);
--main-text-color-400: hsla(var(--h), 90%, 15%, .4);
--main-text-color-600: hsla(var(--h), 90%, 15%, .6);
--darker-color: hsl(var(--h), var(--s), calc(var(--l) - 40%));
--darker-color-opacity: hsla(var(--h), var(--s), calc(var(--l) - 40%), 30%);
--darker-color-opacity-plus: hsla(var(--h), var(--s), calc(var(--l) - 40%), 10%);
--darker-btn-color: hsl(var(--h), var(--s), calc(var(--l) - 14%));
--main-bg-color: var(--white-alice-blue);
--bg-main: var(--white-alice-blue);
--bg-gradient: linear-gradient(
-135deg,
var(--main-color) 40%,
var(--main-color-gradient-color) 90%);
--bg-gradient1: linear-gradient(
-135deg,
var(--main-color) 0%,
var(--main-color-gradient-color) 50%);
--bg-radial: radial-gradient(
at top,
var(--main-color),
var(--main-color-gradient-color));
--bg-radial-bottom: radial-gradient(
at bottom,
var(--main-color),
var(--main-color-gradient-color));
--bg-dark-radial: radial-gradient(
at top,
var(--main-text-color-brighter),
var(--main-text-color));
--bg-main-200: linear-gradient(
-45deg,
hsla(var(--h), var(--s), var(--l), 0%) 40%,
hsla(var(--h), var(--s), var(--l), 10%) 90%);
/* selection color is (almost) opposite of main color with saturation and brightness set at fixed levels */
--selection-color: hsl(calc(var(--h) + 120), 80%, 50%);
--webkit-tap-highlight-color: rgba(221, 17, 170, 0.5); /* rgba(221, 17, 170, 0.5) works well */
/*
dominant, secondary, accent color system
========================================
*/
--royalblue: hsl(225, 72.7%, 56.9%);
--color-secondary: hsl(var(--h), var(--s), var(--l));
--color-secondary-600: hsla(var(--h), var(--s), var(--l), .6);
--color-secondary-400: hsla(var(--h), var(--s), var(--l), .4);
--color-secondary-200: hsla(var(--h), var(--s), var(--l), .2);
--color-secondary-100: hsla(var(--h), var(--s), var(--l), .1);
--color-secondary-dark-50: hsla(var(--h), var(--s), calc(var(--l) - 10%), .05);
--color-secondary-dark-600: hsla(var(--h), var(--s), calc(var(--l) - 10%), .6);
--color-secondary-darker: hsl(var(--h), var(--s), calc(var(--l) - 14%));
--accent-variation: 135; /* 135, ideally 180!! 210 work fine when --h is 195(hsl), use 135 or 170!!!! 0 is almost the initial secondary color */
--accent--s: 80%;
--accent--l: 45%;
--color-accent: hsl(calc(var(--h) + var(--accent-variation)), 80%, 45%);
--color-accent-100: hsla(calc(var(--h) + var(--accent-variation)), 80%, 45%, .1);
--color-accent-200: hsla(calc(var(--h) + var(--accent-variation)), 80%, 45%, .2);
--color-accent: hsl(calc(var(--h) + var(--accent-variation)), 92%, 40%); /* before 2023-12-28 */
--color-accent-100: hsla(calc(var(--h) + var(--accent-variation)), 92%, 40%, .1);
--color-accent-200: hsla(calc(var(--h) + var(--accent-variation)), 92%, 40%, .2);
/* as of 2023-12-28, new accent colors, more vivid */
--color-accent: hsl(calc(var(--h) + var(--accent-variation)), 95%, 50%);
--color-accent-50: hsla(calc(var(--h) + var(--accent-variation)), 95%, 50%, .05);
--color-accent-100: hsla(calc(var(--h) + var(--accent-variation)), 95%, 50%, .1);
--color-accent-200: hsla(calc(var(--h) + var(--accent-variation)), 95%, 50%, .2);
--color-accent-brighter: hsl(calc(var(--h) + var(--accent-variation)), 95%, 65%);
--color-accent-darker: hsl(calc(var(--h) + var(--accent-variation)), 95%, 45%);
/* used on icons in sprite.svg */
--color-accent2: hsl(calc(var(--h)), 80%, 20%);
/* LCH color mode */
/*
--royalblue: lch(46.8%, 45.993%, 284.937%);
*/
}
/*
FONT LOAD
*/
/*
@font-face {
!* this will load a variable font *!
font-family: Outfit;
src: url('webfonts/outfit/Outfit-VariableFont_wght.ttf') format('ttf');
font-style: normal;
font-weight: 300 800; !* this is a range, your must read between 300 and 800 *!
font-display: swap; !* how the browser should display the text while the webfont is loading *!
}
*/
/*
RESET
=====
*/
button,
img {
vertical-align: middle;
}
a img,
img {
border: 0;
}
body,
figure img {
-webkit-backface-visibility: hidden;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
}
*,
:focus,
a:active,
a:focus,
a:hover,
button {
outline: 0;
}
p, li {
line-height: var(--paragraph-line-height);
}
a,
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
margin: 0;
padding: 0;
border: 0;
}
article,
aside,
audio,
canvas,
figcaption,
figure,
figure img,
footer,
header,
main,
nav,
section,
video {
display: block;
}
button,
html,
input,
select,
textarea {
font-family: sans-serif;
color: #222; /* remove it??? it will be overwritten anyhow... */
}
body {
margin: 0;
width: 100%;
font-family: var(--font-family);
-webkit-tap-highlight-color: var(--webkit-tap-highlight-color);
}
img {
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
::selection {
background: var(--selection-color);
color: #FFF;
text-shadow: none;
-webkit-text-fill-color: initial; /* to override .text-gradient */
}
::-moz-selection {
background: var(--selection-color);
color: #FFF;
text-shadow: none;
}
img::selection {
background: 0 0;
}
img::-moz-selection {
background: 0 0;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
:after,
:before {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
margin: 0;
padding: 0;
}
a {
background: 0 0;
}
dfn {
font-style: italic;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #FF0;
color: #000;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "“" "”" "‘" "’";
}
cite {
font-style: normal;
}
button,
input {
line-height: normal;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
select {
text-transform: none;
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
figure img {
width: 100%; /* fix a bug on safari as seen on 2024-01-01 */
height: auto; /* as it looks it is now in tailwind css, as of 2023 */
/*float: left;*/
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
abbr[data-title],
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
a,
a:focus {
cursor: pointer;
}
a,
a:focus {
text-decoration: none;
}
b,
strong {
font-weight: 700;
}
/*br,
hr {
display: none;
}*/
small {
/*font-size: 10px;*/
/*line-height: 15px;*/
font-size: 62.5%; /* that way it will adapt with the context, if you really need a specific size use a class */
}
button {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
}
html {
min-height: 100%; /* use min-height instead of height to fix background gradient on body */
/* you might need height: 100% to make sticky footer with flexbox... test it!! */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-appearance: none;
}
html {
--base-em: 1.0em;
}
@media screen and (min-width: 40em) {
html {
--base-em: 1.2em;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1em; /* needed?? */
line-height: calc(var(--paragraph-line-height) * 0.875);
}
/* end of reset */
/* new reset as of 2024 */
img {
font-style: italic; /* for ALT text */
background-repeat: no-repeat; /* if you use the trick to display a lowres image as a BG until the main image load */
background-size: cover; /* companion as above */
/*
*/
shape-margin: 1rem; /* in case you use shape in your design */
/*
The align start would fix a big issue in safari where the image
get distorted from time to time... because in a flex context.
And in a flex context, the content is "align-stretched".
so you either need to align-center or align-start the flex item
or try to align the img. This is the actual purpose of this align-self.
initial test were non positive. I then remove the backgroudn-repeat and background-size
*/
}
/*
SR-only + skip to content
=========================
*/
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
clip: auto !important;
-webkit-clip-path: none !important;
clip-path: none !important;
height: auto !important;
overflow: visible !important;
width: auto !important;
white-space: normal !important;
}
.skippy {
font-size: 0;
transition: 0.3s padding ease-out;
}
.skippy:focus {
text-decoration: underline;
background-color: rgba(0, 0, 0, 0.8);
color: #FFF;
font-size: 1.61803em;
padding: 1.62em !important;
display: block;
position: relative !important;
outline: 0 !important;
box-shadow: none !important;
}
.boost-animation {
-webkit-transform: translate3d(0, 0, 0);
}
.boost-animation-more {
-webkit-perspective: 1000px;
}
svg {
width: 100%;
height: 100%;
}
picture,
picture img {
/* this prevent layout breaks when an image fails to load */
width: 100%;
height: 100%;
}
img {
aspect-ratio: inherit;
}
/* to allow: "1er centre de formation" etc. without killing paragraph line-height */
sup {
line-height: 50%;
}
/*
As organized in TAILWIND CSS
============================
*/
/* LAYOUT */
/* ====== */
/* display */
.inline {
display: inline;
}
.block {
display: block;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.inline-flex {
display: inline-flex;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* object-fit */
.object-cover {
object-fit: cover;
}
/* object- position */
.object-bottom {
object-position: bottom;
}
.object-center {
object-position: center;
}
.object-top {
object-position: top;
}
/* aspect-ratio */
.aspect-square {
aspect-ratio: 1/1;
}
/* overflow */
.overflow-hidden {
overflow: hidden;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.overflow-clip {
overflow: clip;
}
.overflow-x-clip {
overflow-x: clip;
}
/* position */
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.grid-gap-xs {
grid-gap: calc(var(--size0) * 0.5);
}
.grid-gap-0 {
grid-gap: calc(var(--size0) * 1);
}
.grid-gap-1 {
grid-gap: calc(var(--size1) * 1);
}
.grid-gap-2 {
grid-gap: calc(var(--size2) * 1);
}
/* top/right/bottom/end */
/* tailwind CSS offers several options, but mainly basic positions */
/* isolation */
.isolate {
isolation: isolate;
}
/* z-index */
/* beware, when you use overfow, you can't expect z-index to work... */
.z-0 {
z-index: 0;
}
.z-5 {
z-index: 0;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
/* FLEXBOX and GRID */
/* ================ */
/* flex direction */
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
@media screen and (max-width: 30em) {
.flex-wrap-30em {
flex-wrap: wrap;
}
}
/* not-tailwind */
@media screen and (max-width: 480px) {
.flex-col-480 {
flex-direction: column;
}
}
@media screen and (max-width: 960px) {
.flex-col-960 {
flex-direction: column;
}
}
/* alignment */
.align-middle{
vertical-align: middle;
}
.align-bottom{
vertical-align: bottom;
}
/* justify */
.justify-start {
justify-content: start;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: end;
}
.justify-items-start {
justify-items: start;
}
.justify-items-center {
justify-items: center;
}
.justify-items-end {
justify-items: end;
}
.justify-self-start {
justify-self: start;
}
.justify-self-center {
justify-self: center;
}
.justify-self-end {
justify-self: end;
}
/* align */
.content-start {
align-content: start;
}
.content-center {
align-content: center;
}
.content-end {
align-content: end;
}
.items-start {
align-items: start;
}
.items-center {
align-items: center;
}
.items-end {
align-items: end;
}
.items-stretch {
align-items: stretch;
}
.self-start {
align-self: start;
}
.self-center {
align-self: center;
}
.self-end {
align-self: end;
}
@media screen and (max-width: 480px) {
.align-items-480 {
align-items: center;
}
}
/* place */
.place-content-center {
place-content: center;
}
.place-items-center {
place-items: center;
}
.place-self-center {
place-self: center;
}
/* FLEX GROW and SHRINK */
.grow {
flex-grow: 1;
}
.grow-0 {
flex-grow: 0;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.basis-auto {
flex-basis: auto;
}
.basis-1t2 {
/* tailwind class: .basis-1/2 */
flex-basis: 50%;
}
.basis-full {
flex-basis: 100%;
}
/* SPACING */
/* ======= */
/* padding */
.py-xsm {
padding-top: calc(var(--size0) * 0.25);
padding-bottom: calc(var(--size0) * 0.25);
}
.py-sm {
padding-top: calc(var(--size0) * 0.5);
padding-bottom: calc(var(--size0) * 0.5);
}
.py-xs {
padding-top: calc(var(--size0) * 0.75);
padding-bottom: calc(var(--size0) * 0.75);
}
.py-0 {
padding-top: calc(var(--size0));
padding-bottom: calc(var(--size0));
}
.py-1 {
padding-top: calc(var(--size1));
padding-bottom: calc(var(--size1));
}
.py-2 {
padding-top: calc(var(--size2));
padding-bottom: calc(var(--size2));
}
.py-3 {
padding-top: calc(var(--size3));
padding-bottom: calc(var(--size3));
}
.py-4 {
padding-top: calc(var(--size4));
padding-bottom: calc(var(--size4));
}
.p-px {
padding: 1px;
}
.p-sm {
padding: calc(var(--size0) * 0.25);
}
.p-xs {
padding: calc(var(--size0) * 0.5);
}
.p-0 {
padding: calc(var(--size0));
}
.p-1 {
padding: calc(var(--size1));
}
.p-2 {
padding: calc(var(--size2));
}
.p-3 {
padding: calc(var(--size3));
}
.p-4 {
padding: calc(var(--size4));
}
.pt-sm {
padding-top: calc(var(--size0) * 0.5);
}
.pt-xs {
padding-top: calc(var(--size0) * 0.75);
}
.pt-0 {
padding-top: calc(var(--size0));
}
.pt-1 {
padding-top: calc(var(--size1));
}
.pt-2 {
padding-top: calc(var(--size2));
}
.pt-3 {
padding-top: calc(var(--size3));
}
.pt-4 {
padding-top: calc(var(--size4));
}
.pt-5 {
padding-top: calc(var(--size5));
}
.pb-xs {
padding-bottom: calc(var(--size0) * 0.75);
}
.pb-0 {
padding-bottom: calc(var(--size0));
}
.pb-1 {
padding-bottom: calc(var(--size1));
}
.pb-2 {
padding-bottom: calc(var(--size2));
}
.pb-3 {
padding-bottom: calc(var(--size3));
}
.pb-4 {
padding-bottom: calc(var(--size4));
}
.pr-3 {
padding-right: calc(var(--size3));
}
.px-sm {
padding-left: calc(var(--size0) * 0.5);
padding-right: calc(var(--size0) * 0.5);
}
.px-xs {
padding-left: calc(var(--size0) * 0.75);
padding-right: calc(var(--size0) * 0.75);
}
.px-0 {
padding-left: calc(var(--size0));
padding-right: calc(var(--size0));
}
.px-1 {
padding-left: calc(var(--size1));
padding-right: calc(var(--size1));
}
.px-2 {
padding-left: calc(var(--size2));
padding-right: calc(var(--size2));
}
.px-3 {
padding-left: calc(var(--size3));
padding-right: calc(var(--size3));
}
.pl-0 {
padding-left: calc(var(--size0));
}
.pl-1 {
padding-left: calc(var(--size1));
}
.pl-2 {
padding-left: calc(var(--size2));
}
.pr-2 {
padding-right: calc(var(--size2));
}
@media screen and (max-width: 480px) {
.px-none-480 {
padding-left: 0;
padding-right: 0;
}
.p-none-480 {
padding: 0;
}
.p-0-480 {
padding: calc(var(--size0));
}
.p-1-480 {
padding: calc(var(--size1));
}
.p-2-480 {
padding: calc(var(--size2));
}
.pt-2-480 {
padding-top: calc(var(--size2));
}
}
/* margin */
.mt-xsm {
margin-top: calc(var(--size0) * 0.25);
}
.mt-sm {
margin-top: calc(var(--size0) * 0.5);
}
.mt-xs {
margin-top: calc(var(--size0) * 0.75);
}
.mt-4 {
margin-top: calc(var(--size4));
}
.mb-0 {
margin-bottom: calc(var(--size0));
}
.mb-1 {
margin-bottom: calc(var(--size1));
}
.mb-2 {
margin-bottom: calc(var(--size2));
}
.mt-0 {
margin-top: var(--size0);
}
.mt-1 {
margin-top: var(--size1);
}
.mt-2 {
margin-top: var(--size2);
}
.mt-3 {
margin-top: var(--size3);
}
.mb-3 {
margin-bottom: calc(var(--size3));
}
.mtn-sm {
margin-top: calc(var(--size0) * -0.5);
}
.mtn-xs {
margin-top: calc(var(--size0) * -0.75);
}
.mtn-0 {
margin-top: calc(var(--size0) * -1);
}
.mtn-2 {
margin-top: calc(var(--size2) * -1);
}
.mtn-3 {
margin-top: calc(var(--size3) * -1);
}
.mtn-4 {
margin-top: calc(var(--size4) * -1);
}
.mtn-5 {
margin-top: calc(var(--size5) * -1);
}
.ml-sm {
margin-left: calc(var(--size0) * 0.5);
}
.ml-xs {
margin-left: calc(var(--size0) * 0.75);
}
.ml-0 {
margin-left: calc(var(--size0) * 1);
}
.ml-1 {
margin-left: calc(var(--size1) * 1);
}
.mln-0 {
margin-left: calc(var(--size0) * -1);
}
.mln-1 {
margin-left: calc(var(--size1) * -1);
}
.mln-2 {
margin-left: calc(var(--size2) * -1);
}
.mln-3 {
margin-left: calc(var(--size3) * -1);
}
.mr-sm {
margin-right: calc(var(--size0) * 0.5);
}
.mr-xs {
margin-right: calc(var(--size0) * 0.75);
}
.mr-0 {
margin-right: calc(var(--size0) * 1);
}
.mr-1 {
margin-right: calc(var(--size1) * 1);
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
/* space between */
.space-y-xsm > * + * {
margin-top: calc(var(--size0) * 0.25);
}
.space-y-sm > * + * {
margin-top: calc(var(--size0) * 0.5);
}
.space-y-xs > * + * {
margin-top: calc(var(--size0) * 0.75);
}
.space-y-0 > * + * {
margin-top: var(--size0);
}
.space-y-1 > * + * {
margin-top: var(--size1);
}
.space-y-2 > * + * {
margin-top: var(--size2);
}
.space-y-3 > * + * {
margin-top: var(--size3);
}
/* SIZING */
/* ====== */
/* width */
.w-full {
width: 100%;
}
.w-screen {
width: 100vw;
}
.w-min {
width: min-content;
}
.w-max {
width: max-content;
}
.w-fit {
width: fit-content;
}
/* max-width */
.max-w-size4 {
max-width: calc(var(--size4));
}
.max-w-size5 {
max-width: calc(var(--size5));
}
.max-w-size6 {
max-width: calc(var(--size6));
}
.max-w-size7 {
max-width: calc(var(--size7));
}
.max-w-size8 {
max-width: calc(var(--size8));
}
.max-w-size9 {
max-width: calc(var(--size9));
}
.max-w-page {
/* set the max-width of the page */
max-width: calc(var(--rms9) * var(--base-em));
/* PLEASE COMPARE with previous class, as it looks the same */
}
.max-w-prose {
max-width: 45ch; /* tailwind default is 65ch... */
}
.max-w-size8-size4 {
max-width: calc(var(--size8) + var(--size4));
}
/*
utility classes
===============
Many of theses comes are written the same way Tailwind CSS works
so it will be easier to adapt in case we switch to Tailwind CSS
Beware Tailwind CSS is javascript based and hell to work with...
Following are compact utility classes not available in tailwind CSS
sometimes it combines several declaration so it can be quick and useful
*/
.fit {
/* useful on ![]()
to display image fully on the parent element size */
height: 100%;
width: 100%;
object-fit: cover;
}
/* hidden */
.collapsed,
.is-hidden {
display: none;
}
[hidden] {
display: none !important;
}
/* center-block */
.center-block {
/* just in case, but this is something we no more need now with flexbox and grid */
display: block;
margin-left: auto;
margin-right: auto;
}
.flex-center-h {
display: flex;
flex-direction: column;
align-items: center;
}
/* border-radius */
.rounded-full {
border-radius: 120em;
}
.rounded-xs {
border-radius: calc(var(--size0) * 0.5);
}
.rounded {
border-radius: calc(var(--size0));
}
.rounded-md {
border-radius: calc(var(--size0) * 1.5);
}
.rounded-lg {
border-radius: calc(var(--size1));
}
.rounded-2 {
border-radius: calc(var(--size2));
}
.rounded-3 {
border-radius: calc(var(--size3));
}
.rounded-t {
border-top-left-radius: calc(var(--size0));
border-top-right-radius: calc(var(--size0));
}
.rounded-full picture,
.rounded-full img {
/* you MUST keep the class with picture to support webp HTML syntax */
border-radius: inherit; /* this way, any wrapper class with a border-radius will pass thru the img as child */
}
/* TIPS!!! */
/* border */
.border-solid {
border-style: solid;
}
/* shapes */
.polygon {
clip-path: polygon(50% 0%, 98% 25%, 98% 75%, 50% 100%, 2% 75%, 2% 25%);
}
/* TYPOGRAPHY */
/* ========== */
/* font-weight */
.font-light {
font-weight: 300;
}
.font-normal {
font-weight: 400;
}
.font-bold {
font-weight: 700;
}
/* font-style */
.text-italic {
font-style: italic;
}
.text-balance {
text-wrap: balance;
}
/* font-size */
.text-xsm,
.text-2sm {
font-size: calc(var(--font-size0) * 0.5);
}
.text-sm {
font-size: calc(var(--font-size0) * 0.75);
}
.text-xs {
font-size: calc(var(--font-size0) * 0.875);
}
.text-base {
font-size: calc(var(--font-size0) * 1);
}
.text-lg {
font-size: calc(var(--font-size0) * 1.125);
}
.text-xl {
font-size: calc(var(--font-size0) * 1.5);
}
.text-2xl {
font-size: calc(var(--font-size1) * 1.125);
}
.text-3xl {
font-size: calc(var(--font-size1) * 1.5);
}
.text-4xl {
font-size: calc(var(--font-size1) * 2);
}
.text-size1 {
font-size: var(--font-size1);
}
.text-size2 {
font-size: var(--font-size2);
}
.text-size3 {
font-size: var(--font-size3);
}
@media screen and (max-width: 480px) {
.text-size2-480 {
font-size: calc(var(--font-size2) * 0.875);
}
}
@media screen and (max-width: 480px) {
.text-size1-480 {
font-size: calc(var(--font-size1) * 0.75);
}
}
@media screen and (max-width: 480px) {
.text-2xl-480 {
font-size: calc(var(--font-size1) * 1.125);
}
}
/* leading */
.leading-tight {
line-height: calc(var(--paragraph-line-height) * 0.75);
}
.leading-normal {
line-height: var(--paragraph-line-height);
}
.leading-tighter {
/* to be used on special font that requires this leading adaptation */
line-height: calc(var(--paragraph-line-height) * 0.625);
}
.text-center {
text-align: center;
}
@media screen and (max-width: 480px) {
.text-center-480 {
text-align: center;
}
}
.text-shadow {
text-shadow: 0 0.125em var(--darker-color-opacity-plus);
}
/* tracking aka letter-spacing */
.tracking-wider {
letter-spacing: 0.05em;
}
.tracking-widest {
letter-spacing: 0.1em;
}
/* opacity */
.opacity-600 {
opacity: 0.6;
}
.opacity-400 {
opacity: 0.4;
}
/* colors */
/* text style */
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
/* link */
.link-no-style,
.link-kill {
text-decoration: none;
border: none;
color: inherit;
}
/* list */
.list-disc {
list-style-type: disc;
}
.list-decimal {
list-style-type: decimal;
}
.list-none {
list-style-type: none;
}
.list-no-style {
list-style: none;
}
.list-style-disc {
list-style: disc;
}
.text-list-item:after {
content: ",";
}
.text-list-item:last-child:after {
content: ".";
}
.text-list > li {
margin-left: var(--size0);
}
.list-item-ml1 > li {
margin-left: var(--size1);
}
/*
SVG
===
*/
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
/*
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));*/
}
hr.auto + * {
/* if you need to separate text easily inside many paragraphs...*/
margin-top: var(--paragraph-line-height);
}
/* some typography tricks */
ul + *:not([class*=mt-]),
ol + *:not([class*=mt-]),
p + *:not([class*=mt-]) {
margin-top: var(--paragraph-line-height);
}
/*
Basic helpers
=============
*/
.scroll-smooth {
scroll-behavior: smooth;
/* to allow the scroll-to behaviour, apply this class on */
}
/* page structure to allow footer sticker when page is empty */
body {
/* height: 100% on html could be required */
display: flex;
flex-direction: column;
height: 100%;
}
footer[role=contentinfo],
header[role=banner] {
flex: none;
}
main {
flex: 1 0 auto;
}
/* media queries on basic elements, only if needed ? */
/* should be on reset? */
main {
width: 100%;
}
footer[role=contentinfo] {
/* set a class instead! */
}
/*html {
font-size: 1.0625em;
}
@media screen and (min-width: 600px) {
html {
font-size: calc((1.125em) + 2 * (100vw - 600px) / 200);
}
}
@media screen and (min-width: 800px) {
html {
font-size: 1.25em;
}
}*/
/*:focus {
outline: #212121 dotted 1px !important;
outline: -webkit-focus-ring-color auto 5px !important;
}*/
/*
DEBUG ONLY
==========
*/
.container {
/* background: red;*/
}
.font-sans {
font-family: sans-serif;
}
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue;
}
@media screen and (max-width: 450px) {
.btn--expand-s {
width: 100%;
display: block;
}
}
/* Kine demo start here */
/*:root{
!* sizes *!
--size-1: 1.618em;
--size-2: 2.6179em;
--size-3: 4.2358em;
--size-4: 6.8535em;
--size-5: 11.089em;
--size-6: 17.940em;
--size-7: 29.026em;
--size-8: 46.965em;
}*/
header[role=banner], main, footer[role=contentinfo] {
display: flex;
flex-direction: column;
align-items: center;
/* this center the container inside the structure */
}
.w-screen-gutter {
--outer-side-page: var(--size0);
/* will compute a width, minus the outer side gutter */
width: calc(100% - 2 * var(--outer-side-page));
}
@media screen and (min-width: 600px) {
.w-screen-gutter {
--outer-side-page: var(--size1);
}
}
.h-header {
/* height for the user page header,
do not use padding here as we might
need to place some button on the right... */
height: var(--size2);
}
/*
paddings
========
*/
/*
py : vertical padding
px : horizontal padding
*/
/*
CSS columns
==============
*/
/*
if you need more than this, then you must fall back to tailwind CSS-like classes
*/
@media screen and (min-width: 800px) {
.columns-content {
columns: 2;
column-gap: var(--size4);
column-rule: 1px solid var(--main-text-color-200);
}
.columns-content li {
break-inside: avoid;
}
}
@media screen and (max-width: 800px) {
.columns-content li {
max-width: var(--size7);
}
}
/*
project styles
==============
*/
body {
color: var(--main-text-color);
/* you might need to place this way before... or use a class on your body with this color */
}
hr {
outline: 1px solid rgba(255, 255, 255, 0.4);
border: none;
}
.outer-wrap {
width: 100%; /* should never be something else */
display: flex;
justify-content: center;
}
.logo-student {
--logo-size: var(--size3);
width: var(--logo-size);
height: var(--logo-size);
}
.logo-diploma {
width: var(--logo-diploma);
height: var(--logo-diploma);
}
.diploma {
--logo-diploma: var(--size3);
grid-template-columns: 1fr;
justify-items: start;
align-items: center;
}
@media screen and (min-width: 440px) {
.diploma {
justify-items: start;
align-items: start;
grid-template-columns: var(--logo-diploma) 1fr;
}
/* .diploma.reverse{
grid-template-columns: 1fr var(--logo-diploma) ;
}*/
}
@media screen and (min-width: 600px) {
.diploma {
--logo-physio: var(--size4);
}
}
.icon-size0 {
--icon-size: var(--size0);
width: var(--icon-size);
height: var(--icon-size);
}
.icon-size1 {
--icon-size: var(--size1);
width: var(--icon-size);
height: var(--icon-size);
}
.icon-size2 {
--icon-size: var(--size2);
width: var(--icon-size);
height: var(--icon-size);
}
.icon-left {
position: absolute;
top: 0;
right: calc(100% + var(--size0));
}
.grid-icon-title {
grid-template-columns: auto 1fr;
}
/*.area-hero-image{
width: var(--perc9);
max-width: var(--size5);
}*/
.hero-image {
--size: var(--size5);
width: var(--size);
height: var(--size);
/* background-color: var(--main-color);
border: calc(var(--size1) * .5) solid var(--main-color);*/
aspect-ratio: 1;
}
img {
/* so the image borders stay, and dont fuck up the design if no image is displayed or while the images are loaded...*/
aspect-ratio: inherit;
}
.hero-grid {
grid-gap: var(--size1);
/* this will evolve along breakpoint */
justify-items: center;
align-items: center;
}
.training-grid {
/* this will evolve along breakpoint */
justify-items: center;
align-items: center;
}
/* user-info */
@media screen and (min-width: 1200px) {
.grid-user-details {
grid-template-columns: 3fr 2fr;
grid-column-gap: var(--size2);
}
}
/* grid for people who do replacement jobs */
.grid-replacement {
width: 100%;
max-width: var(--size7);
}
@media screen and (min-width: 1000px) {
.grid-replacement {
max-width: 1000%;
display: grid;
justify-items: center;
grid-column-gap: var(--size4);
grid-row-gap: var(--size2);
grid-template-columns: 6fr 4fr;
grid-template-areas: "title map" "description map";
}
.grid-replacement > [class*=mt-] {
margin-top: 0;
}
}
.replacement-area-title {
grid-area: title;
align-self: end;
}
.replacement-area-description {
grid-area: description;
align-self: start;
}
.replacement-area-map {
grid-area: map;
align-self: end;
}
/*@media screen and (min-width: 450px) {*/
/* .hero-grid{*/
/* }*/
/*}*/
.hero-content-grid > * {
text-align: center;
justify-content: center;
}
.text-white {
color: #FFFFFF;
}
.text-white-600 {
color: rgba(255, 255, 255, 0.6);
}
.text-dark-200 {
color: var(--darker-color-opacity-plus);
}
.bg-white {
background-color: #FFFFFF;
}
.bg-white-50 {
background-color: hsla(0, 0%, 100%, 0.05);
}
.bg-white-100 {
background-color: hsla(0, 0%, 100%, 0.1);
}
.bg-white-200 {
background-color: hsla(0, 0%, 100%, 0.2);
}
.bg-white-600 {
background-color: hsla(0, 0%, 100%, 0.6);
}
.bg-white-gradient-l {
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 100%);
}
.bg-main {
background-color: var(--main-bg-color);
}
.border-secondary {
border-color: var(--color-secondary);
}
.border-white {
border-color: #FFFFFF;
}
.border-white-100 {
border-color: rgba(255, 255, 255, 0.1);
}
.color-secondary {
color: var(--color-secondary);
}
.color-secondary-400 {
color: var(--color-secondary-400);
}
.color-white {
color: #FFFFFF;
}
.color-white-200 {
color: rgba(255, 255, 255, 0.2);
}
.color-white-400 {
color: rgba(255, 255, 255, 0.4);
}
.color-white-600 {
color: rgba(255, 255, 255, 0.6);
}
.color-white-800 {
color: rgba(255, 255, 255, 0.8);
}
.color-secondary-dark {
/* used as text color */
color: var(--main-text-color);
}
.color-secondary-dark-400 {
/* used as text color */
color: var(--main-text-color-400);
}
.color-secondary-dark-600 {
/* used as text color */
color: var(--main-text-color-600);
}
.color-dark {
color: var(--main-text-color);
}
.color-inherit {
color: inherit;
}
.bg-secondary {
background-color: var(--color-secondary);
}
.bg-secondary-200 {
background-color: var(--color-secondary-200);
}
.bg-secondary-dark-600 {
background-color: var(--color-secondary-dark-600);
}
.bg-secondary-darker {
background-color: var(--color-secondary-darker);
}
.bg-dark {
background-color: var(--main-text-color);
}
.bg-gradient {
background: var(--bg-gradient);
color: white;
}
.bg-gradient1 {
background: var(--bg-gradient1);
color: white;
}
.bg-dark-radial {
background: var(--bg-dark-radial);
}
.bg-radial {
background: var(--bg-radial);
}
.outline-accent {
outline-color: var(--color-accent);
}
.strike {
text-decoration: line-through; /* style the strike line */
}
.strike-accent {
text-decoration-color: var(--color-accent);
}
.strike-thickness {
text-decoration-thickness: 0.125em;
}
/*
formation parcours
*/
.list-timeline > li {
--bullet-size: calc(var(--size1) * .25);
--bullet-space: calc(var(--size0) * .25);
--bullet-color: hsla(0,0%, 100%, .9);
--line-color: hsla(0,0%, 100%, .3);
--position: var(--size1);
position: relative;
margin-left: var(--position);
}
.list-timeline > li:before {
/* the vertical line */
content: "";
/* DO NOT USE SHORTER declaration for border, keep that writing */
border-width: 0;
border-left-width: 2px;
border-style: solid;
border-color: var(--line-color);
position: absolute;
left: calc(var(--position) * -1 - 1px);
top: calc(var(--size1) * 0.5 + var(--bullet-size) * 0.5 + var(--bullet-space));
bottom: calc(var(--size1) * -1 + var(--bullet-size) * 0.5 + var(--bullet-space) * 2);
}
.list-timeline > li:first-child:before {
/* the first vertical line */
}
.list-timeline > li:last-child:before {
/* the last vertical line */
border-style: dotted;
box-shadow: none;
bottom: calc(100% - var(--size2) * 1.25);
}
.list-timeline > li:after {
/* the bullet */
content: "";
width: calc(var(--bullet-size));
height: calc(var(--bullet-size));
background: transparent;
box-shadow: 0 0.125em var(--darker-color-opacity), inset 0 0 0 calc(var(--size0) * 0.25) var(--bullet-color);
border-radius: 12em;
position: absolute;
left: calc((var(--position) + var(--bullet-size) * 0.5) * -1);
top: calc(var(--size0) * 0.5 - var(--bullet-size) * 0.125);
}
.border-size-2px {
border-width: 2px;
}
.border-size-xsm {
border-width: calc(var(--size0) * 0.25);
}
.border-size-sm {
border-width: calc(var(--size0) * 0.5);
}
.border-size-xs {
border-width: calc(var(--size0) * 0.75);
}
.border-size0 {
border-width: var(--size0);
}
.border-size1 {
border-width: var(--size1);
}
.gap-size-xsm {
gap: calc(var(--size0) * 0.5);
}
.gap-size-xs {
gap: calc(var(--size0) * 0.75);
}
.gap-size0 {
gap: var(--size0);
}
.gap-size1 {
gap: var(--size1);
}
.gap-size2 {
gap: var(--size2);
}
.border-b-1 {
border-bottom-width: 1px;
}
.border-b-size0 {
border-bottom-width: var(--size0);
}
.shadow {
box-shadow: 0 2em 3em var(--darker-color-opacity-plus);
}
.shadow-top {
box-shadow: 0 -0.25em 0.5em var(--darker-color-opacity-plus);
}
.shadow-md {
/*box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);*/
box-shadow: 0 0.25em 0.375em -0.0625em rgba(0, 0, 0, 0.1), 0 0.125em 0.25em -0.125em rgba(0, 0, 0, 0.1);
}
.shadow-lg {
/*box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);*/
box-shadow: 0 0.625em 0.9375em -0.2025em rgba(0, 0, 0, 0.1), 0 0.25em 0.375em -0.25em rgba(0, 0, 0, 0.1);
}
.shadow-xl {
/*box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);*/
box-shadow: 0 1.25em 1.5em -0.3125em var(--darker-color-opacity-plus), 0 0.5em 0.625em -0.375em var(--darker-color-opacity-plus);
}
.shadow-2xl {
/*box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);*/
box-shadow: 0 1.5em 3em 0.75em var(--darker-color-opacity-plus);
}
.shadow-inner {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}
.shadow-lg_innerlight {
/*box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);*/
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.125), 0 0 2px 0 rgba(0, 0, 0, 0.5), 0 0.625em 0.9375em -0.2025em rgba(0, 0, 0, 0.1), 0 0.25em 0.375em -0.25em rgba(0, 0, 0, 0.1);
}
.shadow-plan-card {
box-shadow: 0 -0.25em calc(var(--size0) * 0.5) hsla(var(--h), 70%, 30%, 0.6), 0 0 calc(var(--size4) * 1) hsla(0, 0%, 100%, 0.6);
}
.drop-shadow-md {
/*box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);*/
filter: drop-shadow(0 0.625em 0.9375em rgba(0, 0, 0, 0.1)) drop-shadow(0 0.25em 0.375em rgba(0, 0, 0, 0.1));
}
.drop-shadow {
filter: drop-shadow(0 0.25em var(--darker-color-opacity-plus));
}
/*
INTERACTIVITY
*/
/* appearance */
.appearance-none {
appearance: none;
}
/* cursor */
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-help {
cursor: help;
}
/* scroll behaviour */
.scroll-smooth {
scroll-behavior: smooth;
}
/* used only on logo of the home page */
.swenli-logo {
transition: all 1500ms ease-in-out;
height: var(--size2);
width: calc(3.375 * var(--size2) + 1em);
filter: drop-shadow(0 0.15em 0.15em hsla(var(--h), 90%, 40%, 1));
}
@media (hover: hover) {
.swenli-logo:hover {
transition-duration: 1s;
filter: drop-shadow(0 0.15em 0.15em hsla(var(--h), 90%, 40%, 1)) drop-shadow(0 0 3.5em hsla(var(--h), 100%, 100%, 0.6));
}
}
.home-hero-image {
width: 100%;
max-width: 1272px;
height: var(--size6);
margin-top: calc(var(--size4) * -1);
}
@media screen and (min-width: 48em) {
.home-hero-image {
height: var(--size7);
margin-top: calc(var(--size5) * -1);
}
}
/*
BTN
===
*/
.flex-btn-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: calc(var(--size0));
}
.btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
line-height: calc(var(--size1) * 0.75);
transition: all ease-in-out 200ms;
}
.btn-style-base {
/*background: var(--main-color);*/
/*color: white;*/
/*padding: .38em 1.618em;*/
padding: calc(var(--size0) * 0.5) var(--size1);
min-height: calc(var(--size3) * 0.875);
width: 100%;
max-width: max-content;
/*box-shadow: 0 .5em 1em var(--darker-color-opacity-plus);*/
}
.btn-primary {
background: var(--color-accent);
color: #FFFFFF;
}
@media (hover: hover) {
.btn-primary:hover {
background: var(--color-accent-darker);
color: #FFFFFF;
}
}
.btn-style-secondary {
background: var(--color-secondary-100);
color: var(--color-secondary);
}
@media (hover: hover) {
.btn-style-secondary:hover {
/* background: var(--color-secondary-darker);*/
background: var(--main-color-gradient-color);
color: #FFFFFF;
}
}
.btn-style-accent {
background: var(--color-accent-50);
color: var(--color-accent);
}
@media (hover: hover) {
.btn-style-accent:hover {
background: var(--color-accent);
color: #FFFFFF;
}
}
.btn-style-white {
background: hsla(100, 0%, 100%, 0.1);
color: hsl(100, 0%, 100%);
mix-blend-mode: screen;
}
@media (hover: hover) {
.btn-style-white:hover {
background: hsla(100, 0%, 100%, 0.3);
color: hsl(100, 0%, 100%);
}
}
.btn-style-transparent {
background: transparent;
color: var(--main-text-color);
}
.btn-phone-style-shadow {
/* ugly */
box-shadow: 0 0.3em 1em var(--main-color);
}
svg {
width: 100%;
height: 100%;
}
.btn-text {
padding: 0.5em 0.5em;
font-weight: 400;
font-size: var(--font-size0);
}
.btn-phone .btn-text {
font-size: var(--font-size0);
font-weight: 400;
}
/*@media screen and (min-width: 800px) {
!* style tel info as text when screensize is larger than the breakpoint *!
.btn-phone{
background: transparent;
color: var(--main-text-color);
}
}*/
/* business card design */
.business-name-title-location {
font-size: 1em;
display: flex;
align-items: center;
flex-direction: column;
line-height: var(--leading-normal);
color: var(--main-text-color);
}
.business-name-title-location > span {
display: flex;
}
.business-name {
/*font-size: 1.38em;*/
font-size: calc(var(--size1) * 0.675);
font-weight: bold;
}
.business-title {
color: var(--main-text-sub-color);
/*line-height: 1.25em;*/
line-height: var(--leading-tight);
padding: calc(var(--size1) * 0.25) 0;
}
.business-card {
justify-self: center;
padding: var(--size2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.business-card-style {
border-radius: var(--size2);
height: 34em;
width: 22em;
background-color: white;
/*box-shadow: 0 2em 3em var(--darker-color-opacity-plus);*/
}
.business-card > * {
margin-top: 1.62em;
}
.business-locality {
text-transform: uppercase;
font-size: 0.75em;
line-height: 1.38em;
font-weight: bold;
}
.line-separator-top {
position: relative;
margin-top: 1.5em;
}
.line-separator-top:before {
--size: var(--size3);
content: "";
position: absolute;
top: -1em;
left: 50%;
margin-left: calc(var(--size) * -0.5);
width: var(--size);
height: 2px;
background: var(--darker-color-opacity-plus);
background: var(--main-color-light);
}
.business-image {
--size: var(--size5);
--size: 62%;
max-width: var(--size); /* when using size in %, DO NOT use width, but max-width to prevent issues on iOS..*/
min-height: auto;
/*height: var(--size);*/
/* background-color: var(--main-color);
border: calc(var(--size1) * .5) solid var(--main-color);*/
aspect-ratio: 1/1;
}
/* grid team */
.grid-team {
display: grid;
grid-template-columns: 1fr;
grid-gap: calc(var(--size0) * 0.25);
}
.grid-team > li:nth-child(odd) {
--rotateZ:-2deg;
}
.grid-team > li:nth-child(even) {
--rotateZ:2deg;
}
@media screen and (min-width: 400px) {
.grid-team > li:nth-child(odd) {
--rotateZ:-3deg;
}
.grid-team > li:nth-child(even) {
--rotateZ:3deg;
}
}
@media screen and (min-width: 740px) and (max-width: 1179px) {
.grid-team2,
.grid-team3 {
grid-template-columns: 1fr 1fr;
}
.grid-team > li:nth-child(2) {
--translateY: 0;
}
.grid-team > li:last-child {
--rotateZ: 3deg;
}
.grid-team > li:last-child {
--translateX: calc(22em * .5);
--translateY: -2em;
}
}
@media screen and (min-width: 1180px) {
.grid-team3 {
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0;
}
.grid-team2 {
grid-template-columns: 1fr 1fr;
grid-gap: 0;
}
.grid-team > li:nth-child(2) {
--rotateZ: 0;
}
.grid-team > li:last-child {
--rotateZ:3deg;
}
}
.grid-team > li {
transition: all ease 400ms;
transform-origin: 50% 50%;
transform: scale(var(--scale, 1)) rotateZ(var(--rotateZ, 0)) translateX(var(--translateX, 0)) translateY(var(--translateY, 0));
}
@media (hover: hover) {
.grid-team > li:hover {
--scale: 1.05;
z-index: 10;
}
}
.current-team {
/*padding-top: var(--size4);*/
margin-bottom: calc(var(--size5) * -1);
z-index: 100;
}
/*.current-team .main-title + *{
margin-top: var(--size-2);
}*/
.user-footer-design {
background: var(--main-text-color);
min-height: var(--size5);
}
.footer-service {
height: 100%;
padding: var(--size5) 0 var(--size2);
display: flex;
justify-content: center;
align-self: center;
}
.footer-kine-service {
color: var(--main-color);
}
.footer-kine-service .usp {
color: var(--main-color-light);
line-height: 1.25em;
}
/*.footer-kine-service .usp + *{
margin-top: var(--size-2);
}
.footer-kine-service .service-name{
font-size: var(--size-2);
}*/
/* house / cabinet */
/*.kine-house-image{*/
/* --radius-size: calc(var(--size-1) * 1);*/
/* border-radius: var(--radius-size);*/
/* background: var(--main-color);*/
/* background: var(--main-color-gradient-color);*/
/* padding: var(--size-1);*/
/*}*/
/*.kine-house-image img{*/
/* border-radius: calc(var(--radius-size) * .7);*/
/*}*/
.kine-house-grid {
grid-template-columns: 1fr;
grid-gap: calc(var(--size1) * 0.5);
max-width: var(--size7);
}
@media screen and (min-width: 1024px) {
.kine-house-grid {
grid-template-columns: 3fr 3fr;
max-width: var(--size8);
}
}
@media screen and (min-width: 10240px) {
.kine-house-image:first-of-type {
grid-area: 1/2/3/4;
}
.kine-house-image:nth-of-type(2) {
grid-area: 3/1/5/3;
}
.kine-house-image:nth-of-type(3) {
grid-area: 4/3/6/5;
}
.area-kine-house-content {
grid-area: 2/4/4/6;
}
.gear {
grid-area: 5/1/7/3;
}
.opening-schedule {
grid-area: 5/5/7/6;
}
.kine-house-grid {
grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
grid-gap: calc(var(--size1) * 0.5);
justify-content: stretch;
grid-template-rows: repeat(6, 1fr);
}
}
.list-opening-schedule li {
display: grid;
grid-template-columns: 3fr 2em 2em 2em;
grid-gap: calc(var(--size1) * 0.25);
line-height: var(--size1);
}
.list-opening-schedule li + li {
border-top: 1px solid hsla(0, 100%, 100%, 0.1);
}
.area-kine-house-content.card .main-title + * {
/*margin-top: var(--size2);*/
display: block;
}
.careplus p {
line-height: var(--leading-normal);
}
.careplus-flex {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
justify-items: flex-start;
align-content: flex-start;
height: auto;
gap: var(--size0);
}
.careplus-flex > * {
flex: 1 1 100%;
}
@media screen and (min-width: 900px) {
.careplus-flex > h2 {
text-align: center;
}
.careplus-flex > .careplus {
flex: 1 1 48%;
}
}
@media screen and (min-width: 14200px) {
.careplus-flex > h2 {
text-align: right;
padding-top: var(--size3);
}
.careplus-flex > .careplus {
flex: 0 0 30%;
}
.careplus-flex > * {
flex: 0 0 30%;
}
/* .special-vertical-placing{
!* APPLY THIS only on user page where the following "careplus" block is displayed *!
padding-bottom: var(--size4);
}
.special-vertical-placing + *{
margin-top: calc(var(--size4) * -1);
}*/
}
.careplus {
display: flex;
flex-direction: column;
}
/* used for details such as price, etc. */
.careplus-details-grid {
grid-template-columns: 1fr 1fr 1fr;
grid-gap: calc(var(--size0) * 0.5);
}
.careplus-image {
/* reposition image */
margin: calc(var(--size1) * -1) calc(var(--size1) * -1) calc(var(--size1) * 1) calc(var(--size1) * -1);
/* set an height for the image, and use object fit on img */
height: var(--size6);
}
/* glass effect on background, do not apply this on white background, you must use this on dark context */
/* glass effect */
.bg-glass-white:before {
--glass-color: rgba(255, 255, 255, .3);
}
.bg-glass-black:before {
--glass-color: rgba(0,0,0, .3);
}
.bg-glass:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 10000em var(--glass-color);
filter: blur(10px);
background: inherit;
}
.bg-glass {
position: relative;
background: inherit;
}
.glass-card {
border: 1px solid rgba(255, 255, 255, 0.15);
border-top-color: rgba(255, 255, 255, 0.23);
}
.glass-card-subtle {
border: 1px solid rgba(255, 255, 255, 0.00000015);
border-top-color: rgba(255, 255, 255, 0.23);
border-bottom-width: 0;
}
/* shape dividers */
.custom-shape-divider-top-1699681425 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-top-1699681425 svg {
position: relative;
display: block;
width: calc(130% + 1.3px);
height: 160px;
}
@media screen and (min-width: 900px) {
.custom-shape-divider-top-1699681425 svg {
height: 410px;
}
}
.custom-shape-divider-top-1699681425 .shape-fill {
fill: var(--main-bg-color);
}
/* wave dividers */
.custom-shape-divider-bottom-1699741084,
.custom-shape-divider-top-1702678637 {
position: absolute;
top: -1px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1699741084 {
top: auto;
bottom: -1px;
transform: rotate(0deg);
}
.custom-shape-divider-bottom-1699741084 svg,
.custom-shape-divider-top-1702678637 svg {
position: relative;
display: block;
width: calc(130% + 1.3px);
/*height: 70px;*/
max-height: 70px; /*to prevent anything crazy on large screen */
aspect-ratio: 100/5;
}
.custom-shape-divider-bottom-1699741084 .shape-fill,
.custom-shape-divider-top-1702678637 .shape-fill {
fill: var(--main-bg-color);
}
/* CSS only method dividers */
.divider {
/**/
--background: var(--bg-divider);
position: relative;
isolation: isolate;
}
.divider > * {
z-index: 10; /* assurance content is above pseudo shapes */
}
.divider-diagonal::after {
content: "";
background: var(--background);
background-blend-mode: multiply, multiply, normal;
background-size: cover, cover, cover;
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skewY(var(--skew-angle, -6deg));
}
/*
.bg-blur{
backdrop-filter: blur(3em)
}*/
.bg-divider-gradient {
/* this is already repeated... you must declare a --bg-gradient and call it when needed */
--bg-divider: var(--bg-gradient);
}
.bg-divider-gradient1 {
/* this is already repeated... you must declare a --bg-gradient and call it when needed */
--bg-divider: var(--bg-gradient1);
}
.bg-divider-radial {
/* this is already repeated... you must declare a --bg-gradient and call it when needed */
--bg-divider: var(--bg-radial);
}
.bg-divider-radial-bottom {
/* this is already repeated... you must declare a --bg-gradient and call it when needed */
--bg-divider: var(--bg-radial-bottom);
}
.bg-divider-dark-radial {
/* this is already repeated... you must declare a --bg-gradient and call it when needed */
--bg-divider: var(--bg-dark-radial);
}
.bg-divider-main {
/* this is already repeated... you must declare a --bg-gradient and call it when needed */
--bg-divider: var(--bg-main);
}
.bg-divider-light {
/* this is already repeated... you must declare a --bg-gradient and call it when needed */
--bg-divider: hsla(var(--h), var(--s), var(--l), .1);
}
.bg-divider-gradient-image {
--bg-divider: var(--bg-gradient), var(--bg-image-blend), var(--bg-gradient);
/*
IMPORTANT: --bg-image-blend is set in the html, inline in a style="--bg-image-blend: url('')"
BUT, this is a demo only. You can't predict the render of pictures.
Best is to create a SVG that could be used as a background.
Or use a generic picture, for each business type (kine, chiro, etc.)
YOU CANT use a picture from the house/office of the user, since he might not have one set!
Anyhow, create an svg. you'd be able to set the opacity for more control of the blending.
MAYBE you could use a BASE64 svg, and put it in CSS stylesheet.
;-)
*/
/*
--bg-divider: var(--bg-gradient), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.jpg'), rgba(255,255,255, .4);
*/
}
.mask {
/* you might need to duplicate with webkit prefix for browsers support */
mask-image: var(--bg-dark);
mask-size: cover;
mask-repeat: no-repeat;
mask-position: right;
}
.skew15 {
--skew-angle: 15deg;
}
.skew15:after {
top: calc(var(--size1) * -1); /* this compensate the angle a bit to provide beathe for content */
}
.skew12 {
--skew-angle: 12deg;
}
.skew8 {
--skew-angle: 8deg;
}
.skew6 {
--skew-angle: 6deg;
}
.skew2 {
--skew-angle: 2deg;
}
.skew-8 {
--skew-angle: -8deg;
}
.skew-6 {
--skew-angle: -6deg;
}
.skew-2 {
--skew-angle: -2deg;
}
/* training list*/
.list-training li {
line-height: var(--leading-tight);
display: grid;
grid-template-columns: var(--size2) 1fr;
grid-column-gap: calc(var(--size1) * 0.5);
}
.list-training li + li {
margin-top: calc(var(--size1) * 0.5);
}
/*.training-year{
grid-area: training-year;
background: red;
}
.training-year-end{
grid-area: training-year-end; !* use when you need to specify an end date for the training *!
}
.training-main{
grid-area: training-main;
}
.training-content{
grid-area: training-content;
background: green;
}
.training-year-end{
font-size: calc(var(--font-size0) * .5);
}
.training-sub{
grid-area: training-sub;
text-transform: uppercase;
font-size: calc(var(--font-size0) * .5);
line-height: var(--paragraph-line-height);
}*/
.link {
color: var(--link-color);
}
.link-style {
transition: all ease-in-out 200ms;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 0.125em;
text-underline-offset: 0.25em;
text-decoration-color: var(--color-accent);
}
@media (hover: hover) {
.link-style:hover {
background: var(--color-accent);
--link-color: #FFFFFF;
}
}
.link-accent {
--link-color: var(--color-accent);
}
/* anchor */
/*
anchors are links that jump to a specific area in a page.
some dev use an hashtag # icon beside a heading text to design this.
it can takes tab focus.
*/
.anchor {
transition: all 300ms ease;
opacity: 0.4;
/* you should specify the text color in the html for more flexibility */
}
@media (hover: hover) {
.anchor:hover {
opacity: 1;
}
}
/* focus */
.anchor:focus-visible {
opacity: 1;
}
.anchor:focus-visible,
.link:focus-visible {
outline-offset: calc(var(--size0) * 0.5);
outline-style: solid;
outline-color: var(--color-accent);
outline-width: calc(var(--size0) * 0.25);
border-radius: 120em;
}
.btn:focus-visible {
outline-offset: calc(var(--size0) * 0.5);
outline-style: solid;
outline-color: var(--color-accent);
outline-width: calc(var(--size0) * 0.5);
}
/*
Animations
==========
*/
.pulse {
will-change: box-shadow;
/*box-shadow: 0px 0px 1px 1px #0000001a;*/
/*animation: pulse-animation 2s infinite;*/
animation-name: pulse-animation;
animation-duration: 2s;
animation-iteration-count: 9; /* times the animation will be displayed */
animation-delay: 5s; /* delay time before the animation will take place */
/*--from-color: rgba(0, 0, 0, 0.2);*/
--from-color: var(--color-accent); /* will adapt to the accent color */
}
.pulse-white {
--from-color: #FFFFFF;
}
@keyframes pulse-animation {
0% {
box-shadow: 0 0 0 0 var(--from-color);
}
100% {
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
}
}
/*
#home-visit:target {
!* style the region that is targeted by the link in the hero *!
!* WARNING : this is not working, it should be... maybe... *!
!* see if the jump to across the page is the culprit... *!
}*/
.list-last-created-account li {
display: grid;
grid-template-columns: auto;
justify-items: center;
align-items: center;
grid-gap: var(--size0);
text-align: center;
}
@media screen and (min-width: 660px) {
.list-last-created-account li {
grid-template-columns: auto 1fr auto;
text-align: start;
justify-items: stretch;
}
}
/*.list-last-created-account li + li{
margin-top: calc(var(--size0) * .5);
}*/
.square {
width: var(--square-size);
height: var(--square-size);
}
.square-1 {
--square-size: var(--size1);
}
.square-2 {
--square-size: var(--size2);
}
.square-3 {
--square-size: var(--size3);
}
.smaller {
font-size: 0.75em;
}
.open-quote:before {
content: "“";
position: absolute;
left: calc(var(--size0) * -0.125);
bottom: 90%;
font-size: var(--font-size4);
/*font-family: Georgia;*/
}
.quote-triangle:after {
--triangle-size: var(--size1);
--triangle-color: var(--main-color-gradient-color);
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: var(--triangle-size) var(--triangle-size) 0 0;
border-color: var(--triangle-color) transparent transparent transparent;
transform: rotate(0deg);
}
.quote-triangle:after {
position: absolute;
left: var(--size3);
top: 100%;
}
.grid-auto-1fr {
display: grid;
grid-template-columns: auto 1fr;
}
/* fix safari, remove when safari support text-wrap: text-balance */
/* This detection still works properly with Safari 17.0 (Fall-2023): */
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari-text-balance-main-heading {
max-width: calc(var(--size6) * 1.13);
}
/*.top-design:before{
content: "";
background: linear-gradient(
-135deg,
var(--main-color) 40%,
var(--main-color-gradient-color) 90%);
height: calc(var(--size0) * .5);
width: 100%;
position: absolute;
top: 0;
left: 0;
}*/
/* tool */
.text-gradient {
/*
This pairs with a gradient class that contains the gradient colors
*/
background-size: 100%;
-webkit-background-clip: text; /* still needed ??*/
background-clip: text;
-webkit-text-fill-color: transparent; /* only work everywhere with -webkit prefix */
}
.text-thru {
background-color: #FFFFFF;
mix-blend-mode: screen;
color: #000000;
/* will work only if an explicit background color
is specified on the parent element. so forget about it
if you use a global gradient color and your element is nested
inside other sections/divs.
*/
}
.hover-opacity {
transition: all ease 300ms;
opacity: 0.6;
}
@media (hover: hover) {
.hover-opacity:hover {
opacity: 1;
}
}
/* decoration utility */
.reverted-radius-x-bottom:before,
.reverted-radius-x-bottom:after {
--color: hsla(0,0%, 100%, .1);
--size: var(--size2);
content: "";
position: absolute;
bottom: 0;
width: var(--size);
aspect-ratio: 1;
scale: 0.4;
/* we draw a biiiig shape, then we reduce it with scale... to AVOID aliasing!!! THAT IS MY TRICK */
}
.reverted-radius-x-bottom:before {
right: 100%;
transform-origin: 100% 100%;
background: radial-gradient(circle at 0 0, transparent var(--size), var(--color) var(--size));
}
.reverted-radius-x-bottom:after {
left: 100%;
/*
transform: rotate(90deg); DONT USE THIS TRICK, bad positioning...
*/
transform-origin: 0 100%;
background: radial-gradient(circle at 100% 0%, transparent var(--size), var(--color) var(--size));
}
/*
following are tests, mostly buggy things from the web, not fully implemented in all browsers
*/
/* not fully supported yet */
/*@keyframes fade-out{
100%{
opacity: 0%;
}
}
.fade-out{
https://www.youtube.com/watch?v=UmzFk68Bwdk
animation-timing-function: linear;
animation-name: fade-out;
animation-timeline: view();
animation-range: exit;
}*/
/* ALL FANCY ANIMATION GOES HERE */
/* ============================= */
@media (prefers-reduced-motion: no-preference) {
/* somebody who has set some preference in its browers because of
getting REAL sick of animation won't get animation (or reduced) from you website */
@keyframes fade-slide-down {
0% {
transform: translateY(-3rem);
}
100% {
opacity: 1;
transform: none;
}
}
.animate-fade-slide-down {
animation-name: fade-slide-down;
animation-duration: var(--animation-duration, 1000ms);
animation-timing-function: cubic-bezier(0, 0.5, 0, 1);
animation-fill-mode: forwards;
animation-delay: 200ms;
opacity: 0; /* needed to prevent a flash */
}
@keyframes pop-in {
0% {
transform: translateY(-0.2rem) scale(0.8);
}
100% {
opacity: 1;
transform: none;
}
}
.animate-pop-in {
animation-name: pop-in;
animation-duration: var(--animation-duration, 200ms);
animation-timing-function: ease-out;
animation-fill-mode: forwards;
opacity: 0; /* needed to prevent a flash */
}
.animation-delay-400 {
animation-delay: 400ms;
}
.animation-delay-600 {
animation-delay: 600ms;
}
.animation-delay-800 {
animation-delay: 800ms;
}
.animation-delay-900 {
animation-delay: 800ms;
}
.animation-delay-1000 {
animation-delay: 1000ms;
}
.animation-delay-1200 {
animation-delay: 1200ms;
}
.animation-delay-1600 {
animation-delay: 1600ms;
}
.animation-delay-1800 {
animation-delay: 1800ms;
}
.animation-delay-2000 {
animation-delay: 2000ms;
}
.animation-delay-2200 {
animation-delay: 2200ms;
}
.animation-duration-500 {
--animation-duration: 500ms;
}
.animation-duration-600 {
--animation-duration: 600ms;
}
@keyframes appear {
100% {
opacity: 1;
}
}
.animate-appear {
animation-name: appear;
animation-duration: var(--animation-duration, 400ms);
animation-timing-function: ease-out;
animation-fill-mode: forwards;
opacity: 0; /* needed to prevent a flash */
/*
all animation can render buggy on iOS...
try to declare the -webkit rule
add will-change: opacity, and/or will-change: display or anything other
*/
}
@keyframes appear-from-bottom {
40% {
opacity: 1;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.animate-appear-from-bottom {
transform: translateY(25%);
opacity: 0;
animation-name: appear-from-bottom;
animation-duration: 1200ms;
animation-timing-function: ease;
animation-delay: 1s;
animation-fill-mode: forwards; /* once animation is done, it will stay at the 100% state */
}
@keyframes skew {
0% {
--skew-angle: -12deg;
transform: skewY(var(--skew-angle));
}
100% {
--skew-angle: -6deg;
transform: skewY(var(--skew-angle));
}
}
.animate-skew::after {
animation-name: skew;
animation-duration: 4000ms;
animation-timing-function: ease;
animation-delay: 1s;
animation-direction: alternate;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes background-x {
0% {
background-size: 100%;
background-position-x: center;
}
100% {
background-size: 200%;
background-position-x: right;
}
}
.animate-background-x {
/* as a test on the logo... */
animation-name: background-x;
animation-duration: 4000ms;
animation-timing-function: ease;
animation-delay: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: initial;
}
}
.blink-on-target:target {
animation-delay: 0.5s;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
}
.blink-on-target_white:target {
animation-name: blink-white;
}
.blink-on-target_color-primary:target {
animation-name: blink-color-primary;
}
@keyframes blink-white {
0% {
background: hsla(0, 0%, 100%, 0.4);
}
}
@keyframes blink-color-primary {
0% {
background: hsla(var(--h), var(--s), var(--l), 0.2);
}
100% {
background: hsla(var(--h), 100%, 100%, 0);
}
}
@keyframes compass-calibrate {
20% {
transform: rotate(-3.5turn);
}
50% {
transform: rotate(0.25turn);
}
80% {
transform: rotate(-0.12turn);
}
}
@media (hover: hover) {
.btn-direction:focus-visible .animate-compass,
.btn-direction:hover .animate-compass {
animation-name: compass-calibrate;
animation-duration: var(--animation-duration, 4000ms);
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-delay: 200ms;
}
}
/*
ISSUES
======
*/
/* demo banner */
.angle-banner {
transform: rotate(-45deg) translate(-29.29%, -100%);
box-shadow: 0 0.25em 0.25em hsla(0, 0%, 0%, 0.25);
background: orangered;
color: white;
text-align: center;
height: var(--size1);
line-height: calc(var(--size1) * 0.875);
width: var(--size5);
position: absolute;
top: 0;
left: 0;
z-index: 100;
/* parent should be overflow-hidden or overflow-clip */
}
/*
specific styles colors for rocket svg
*/
.rocket-body {
color: hsl(var(--h), 32.7%, 76.9%);
}
.rocket-window {
color: hsl(var(--h), 92.7%, 56.9%);
}
.rocket-wing {
color: hsl(var(--h), 72.7%, 36.9%);
}
.rocket-bottom {
color: var(--color-accent);
}
.rocket-burst {
color: orange;
}
.rocket-burst {
transform-origin: 50% 50%;
animation-name: burst;
animation-duration: 300ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
@keyframes burst {
20% {
transform: scale(0.99);
}
40% {
color: darkorange;
}
100% {
transform: scale(1.04);
}
}
.rocket {
/* shaking */
transform-origin: 50% 50%;
animation-name: rocket-shaking;
animation-duration: 1400ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes rocket-shaking {
10% {
transform: translate(-0.1px, 0);
}
50% {
transform: translate(0.3px, 0.5px);
}
80% {
transform: translate(0, 0.4px);
}
100% {
transform: translate(-0.1px, 0);
}
}
.list-checkmark > li {
--height: calc(var(--size1) * .675);
--width: calc(var(--height) * .5);
--borderWidth: calc(var(--width) * .625);
position: relative;
margin-left: calc(var(--height) * 1.78) !important; /* to override .text-list li */
}
.list-checkmark > li:before {
align-self: start;
box-sizing: content-box; /* important! */
content: "";
display: inline-flex;
position: absolute;
left: calc(var(--height) * -1.875);
top: calc(var(--height) * -0.13);
transform: rotate(45deg);
height: var(--height);
width: var(--width);
border-bottom: var(--borderWidth) solid var(--borderColor1, currentColor);
border-right: var(--borderWidth) solid var(--borderColor, currentColor);
}
/* FEATURES */
/*
Features are classes that do a series of things
They could be added to the utilities classes... but they don't belong to a framework per say
Those classes (or maybe system of classes sometimes) can be reused in any other projects
si they are not project dependant
*/
/* Text-list */
/*
Text-list add a comma or semicolon after each text item in a list
each line but the last one, where a dot is added to conclude the list.
*/
.text-list:not(.killpunctuation) li:after {
content: ",";
}
.text-list:not(.killpunctuation).semicolon li:after {
content: " ;";
}
.text-list:not(.killpunctuation) li:last-of-type:after {
content: ".";
}
/* list-has-checkmark */
/*
This add a checkmark before each list item of text.
BEWARE of keeping :before on this as you might also use .text-list class
which uses the :after styling method to add punctuation.
*/
.has-checkmark,
.list-has-checkmark > li {
--height: .9em; /* was .8 */
--width: calc(var(--height) / 1.8);
--borderWidth: calc(var(--height) / 4); /* stroke width, 6 max */
position: relative;
margin-inline-start: var(--size1);
}
.has-checkmark:before,
.list-has-checkmark > li:before {
/*margin-inline: .5em 1em;*/
content: "";
align-self: start;
box-sizing: content-box;
display: inline-flex;
position: absolute;
left: calc(var(--height) * -1.875);
top: calc(var(--height) * 0.2);
transform: rotate(45deg);
height: var(--height);
width: var(--width);
border-bottom: var(--borderWidth) solid var(--checkmark-color, currentColor);
border-right: var(--borderWidth) solid var(--checkmark-color, currentColor);
}
.checkmark-color-accent > li:before {
--checkmark-color: var(--accent-color, orangered); /* rename the --accent-color variable to taste */
}
.checkmark-white > li:before {
--checkmark-color: white;
}
/* text-effects */
.text-effect {
background-size: 100%;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-thru {
/* to be used along .text-gradient?? */
background-color: #FFF;
mix-blend-mode: screen;
color: #000;
}
/* animation-scroll */
/*
system that allows the animation of elements on the page during scrolling
as of 2025-04-07, it only works nicely in Chrome.
*/
/*
There is some errors displayed by PHPSTORM on some parts with calc containing --var
https://youtrack.jetbrains.com/issue/WEB-41093/Mismatched-parameters-when-using-css-variables
This complied into valid CSS, but the inspector in unable to resolve this in .SCSS file
SO, either let it go or use complex things that is not required at all...
*/
@supports (animation-timeline: scroll()) {
.anima-scroll-each > *,
.list-anima-scroll li,
.anima-scroll {
animation: animation-scroll linear auto both;
animation-timeline: view();
/*
the following is not supported in firefox, therefore you have to simulate this in the keyframes.
Instead of using 0% to 100%, you have to set intermediate keyframes
*/
/*animation-range-start: cover 10%;*/
/*animation-range-end: cover 50%;*/
}
.anima-pop {
animation-name: animation-pop;
}
.anima-scroll-soft {
animation-name: animation-scroll-soft;
}
.anima-scroll-odd-even li {
animation-name: animation-left-slow;
}
.anima-scroll-odd-even li:nth-child(even) {
animation-name: animation-right-slow;
}
.anima-scroll-right li {
animation-name: animation-right;
}
.animation-pull-from-bottom {
animation-name: animation-pull-from-bottom;
}
@keyframes animation-pop {
0% {
transform: scale(0);
border-width: var(--size1);
}
5% {
transform: scale(0);
border-width: var(--size1);
}
15% {
transform: scale(1);
border-width: calc(var(--size0) * 0.25);
}
20% {
transform: scale(1.25);
}
25% {
transform: scale(1);
}
}
@keyframes animation-pull-from-bottom {
0% {
transform: translateY(var(--size4)) rotate(5deg);
}
30% {
transform: translateY(0) rotate(0);
}
70% {
transform: translateY(0) rotate(0);
}
100% {
transform: translateY(calc(var(--size4) * -1)) rotate(-5deg);
}
}
@keyframes animation-scroll-soft {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
45% {
opacity: 1;
}
}
@keyframes animation-scroll {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
15% {
opacity: 1;
}
}
/*
@keyframes animation-left {
0%{
opacity:0;
transform: translateX(-2em);
}
100%{
opacity: 1;
transform: translateX(0);
}
}
@keyframes animation-right {
0%{
opacity:0;
transform: translateX(2em);
}
100%{
opacity: 1;
transform: translateX(0);
}
}
*/
@keyframes animation-left-slow {
0% {
opacity: 0;
transform-origin: 100% 50%;
transform: translateX(20em) translateY(4em) rotate(-20deg);
}
10% {
opacity: 0;
}
40% {
opacity: 1;
transform: translateX(0) translateY(0) rotate(0deg);
}
}
@keyframes animation-right-slow {
0% {
opacity: 0;
transform-origin: 100% 50%;
transform: translateX(2em) translateY(4em) rotate(-10deg);
}
10% {
opacity: 0;
}
40% {
opacity: 1;
transform: translateX(0) translateY(0) rotate(0);
}
}
@keyframes animation-right {
0% {
opacity: 0;
transform: translateX(2em) translateY(0);
}
10% {
opacity: 0;
}
20% {
opacity: 1;
transform: translateX(0) translateY(0);
}
}
.anima-program-left {
animation-name: anima-program-left;
}
.anima-program-right {
animation-name: anima-program-right;
}
@media screen and (min-width: 52em) {
@keyframes anima-program-left {
0% {
transform: translateY(calc(var(--size1) * 1));
}
40% {
transform: rotate(-1deg) translateX(calc(var(--size2) * -1)) translateY(calc(var(--size1) * -1));
}
}
@keyframes anima-program-right {
0% {
transform: translateY(calc(var(--size1) * 1));
}
40% {
transform: rotate(1deg) translateX(var(--size2)) translateY(var(--size1));
}
}
}
@media screen and (min-width: 66em) {
@keyframes anima-program-left {
0% {
transform: translateY(calc(var(--size1) * 1));
}
40% {
transform: rotate(-1deg) translateX(calc(var(--size4) * -1)) translateY(calc(var(--size1) * -1));
}
}
@keyframes anima-program-right {
0% {
transform: translateY(calc(var(--size1) * 1));
}
40% {
transform: rotate(1deg) translateX(var(--size4)) translateY(var(--size1));
}
}
}
}
@media screen and (min-width: 52em) {
.rotate-1deg {
transform: rotate(1deg) translateX(var(--size2)) translateY(var(--size1));
}
.-rotate-1deg {
transform: rotate(-1deg) translateX(calc(var(--size2) * -1)) translateY(calc(var(--size1) * -1));
}
}
@media screen and (min-width: 66em) {
.rotate-1deg {
transform: rotate(1deg) translateX(var(--size4)) translateY(var(--size1));
}
.-rotate-1deg {
transform: rotate(-1deg) translateX(calc(var(--size4) * -1)) translateY(calc(var(--size1) * -1));
}
}
/* FROM HERE, only things belonging to the project */
/*
=============
GRID FOR THE PROJECT
=============
*/
.grid-1fr-1fr {
grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 40em){
.grid-1fr-40em{
grid-template-columns: 1fr;
}
}
.is-red {
color: red !important;
/* debug */
}
.has-arrow-bubble:after{
--arrow-size: calc(var(--size0) * .5);
content:"";
position: absolute;
top: 100%;
left: var(--size1);
border-top: var(--arrow-size) solid rgba(255,255,255, .1);
/*border-top-color: inherit;*/
border-left: 0 solid transparent;
border-right: var(--arrow-size) solid transparent;
}
/* LOADED FROM tailwind-like/swenli */