1178 lines
19 KiB
CSS
1178 lines
19 KiB
CSS
/*!
|
|
* Bootstrap Reboot v5.1.0 (https://getbootstrap.com/)
|
|
* Copyright 2011-2021 The Bootstrap Authors
|
|
* Copyright 2011-2021 Twitter, Inc.
|
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
|
*/
|
|
*,
|
|
::after,
|
|
::before {
|
|
box-sizing: border-box
|
|
}
|
|
|
|
@media (prefers-reduced-motion:no-preference) {
|
|
:root {
|
|
scroll-behavior: smooth
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
line-height: 1.5rem;
|
|
color: black;
|
|
text-align: left;
|
|
background-color: white;
|
|
-webkit-text-size-adjust: 100%;
|
|
-webkit-tap-highlight-color: transparent
|
|
}
|
|
|
|
hr {
|
|
margin: 1rem 0;
|
|
color: inherit;
|
|
background-color: currentColor;
|
|
border: 0;
|
|
opacity: .25
|
|
}
|
|
|
|
hr:not([size]) {
|
|
height: 1px
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin-top: 0;
|
|
margin-bottom: .5rem;
|
|
font-weight: 500;
|
|
line-height: 1.2
|
|
}
|
|
|
|
h1 {
|
|
font-size: calc(1.375rem + 1.5vw)
|
|
}
|
|
|
|
@media (min-width:1200px) {
|
|
h1 {
|
|
font-size: 2.5rem
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: calc(1.325rem + .9vw)
|
|
}
|
|
|
|
@media (min-width:1200px) {
|
|
h2 {
|
|
font-size: 2rem
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
font-size: calc(1.3rem + .6vw)
|
|
}
|
|
|
|
@media (min-width:1200px) {
|
|
h3 {
|
|
font-size: 1.75rem
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
font-size: calc(1.275rem + .3vw)
|
|
}
|
|
|
|
@media (min-width:1200px) {
|
|
h4 {
|
|
font-size: 1.5rem
|
|
}
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.25rem
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1rem
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
abbr[data-bs-original-title],
|
|
abbr[title] {
|
|
-webkit-text-decoration: underline dotted;
|
|
text-decoration: underline dotted;
|
|
cursor: help;
|
|
-webkit-text-decoration-skip-ink: none;
|
|
text-decoration-skip-ink: none
|
|
}
|
|
|
|
address {
|
|
margin-bottom: 1rem;
|
|
font-style: normal;
|
|
line-height: inherit
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
padding-left: 2rem
|
|
}
|
|
|
|
dl,
|
|
ol,
|
|
ul {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
ol ol,
|
|
ol ul,
|
|
ul ol,
|
|
ul ul {
|
|
margin-bottom: 0
|
|
}
|
|
|
|
dt {
|
|
font-weight: 700
|
|
}
|
|
|
|
dd {
|
|
margin-bottom: .5rem;
|
|
margin-left: 0
|
|
}
|
|
|
|
blockquote {
|
|
margin: 0 0 1rem
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bolder
|
|
}
|
|
|
|
small {
|
|
font-size: .875em
|
|
}
|
|
|
|
mark {
|
|
padding: .2em;
|
|
background-color: #fcf8e3
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
position: relative;
|
|
font-size: .75em;
|
|
line-height: 0;
|
|
vertical-align: baseline
|
|
}
|
|
|
|
sub {
|
|
bottom: -.25em
|
|
}
|
|
|
|
sup {
|
|
top: -.5em
|
|
}
|
|
|
|
a {
|
|
color: #0d6efd;
|
|
text-decoration: underline
|
|
}
|
|
|
|
a:hover {
|
|
color: #0a58ca
|
|
}
|
|
|
|
a:not([href]):not([class]),
|
|
a:not([href]):not([class]):hover {
|
|
color: inherit;
|
|
text-decoration: none
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
pre,
|
|
samp {
|
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-size: 1em;
|
|
direction: ltr;
|
|
unicode-bidi: bidi-override
|
|
}
|
|
|
|
pre {
|
|
display: block;
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
overflow: auto;
|
|
font-size: .875em
|
|
}
|
|
|
|
pre code {
|
|
font-size: inherit;
|
|
color: inherit;
|
|
word-break: normal
|
|
}
|
|
|
|
code {
|
|
font-size: .875em;
|
|
color: #d63384;
|
|
word-wrap: break-word
|
|
}
|
|
|
|
a>code {
|
|
color: inherit
|
|
}
|
|
|
|
kbd {
|
|
padding: .2rem .4rem;
|
|
font-size: .875em;
|
|
color: #fff;
|
|
background-color: #212529;
|
|
border-radius: .2rem
|
|
}
|
|
|
|
kbd kbd {
|
|
padding: 0;
|
|
font-size: 1em;
|
|
font-weight: 700
|
|
}
|
|
|
|
figure {
|
|
margin: 0 0 1rem
|
|
}
|
|
|
|
img,
|
|
svg {
|
|
vertical-align: middle
|
|
}
|
|
|
|
table {
|
|
caption-side: bottom;
|
|
border-collapse: collapse
|
|
}
|
|
|
|
caption {
|
|
padding-top: .5rem;
|
|
padding-bottom: .5rem;
|
|
color: #6c757d;
|
|
text-align: left
|
|
}
|
|
|
|
th {
|
|
text-align: inherit;
|
|
text-align: -webkit-match-parent
|
|
}
|
|
|
|
tbody,
|
|
td,
|
|
tfoot,
|
|
th,
|
|
thead,
|
|
tr {
|
|
border-color: inherit;
|
|
border-style: solid;
|
|
border-width: 0
|
|
}
|
|
|
|
label {
|
|
display: inline-block
|
|
}
|
|
|
|
button {
|
|
border-radius: 0
|
|
}
|
|
|
|
button:focus:not(:focus-visible) {
|
|
outline: 0
|
|
}
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit
|
|
}
|
|
|
|
button,
|
|
select {
|
|
text-transform: none
|
|
}
|
|
|
|
[role=button] {
|
|
cursor: pointer
|
|
}
|
|
|
|
select {
|
|
word-wrap: normal
|
|
}
|
|
|
|
select:disabled {
|
|
opacity: 1
|
|
}
|
|
|
|
[list]::-webkit-calendar-picker-indicator {
|
|
display: none
|
|
}
|
|
|
|
[type=button],
|
|
[type=reset],
|
|
[type=submit],
|
|
button {
|
|
-webkit-appearance: button
|
|
}
|
|
|
|
[type=button]:not(:disabled),
|
|
[type=reset]:not(:disabled),
|
|
[type=submit]:not(:disabled),
|
|
button:not(:disabled) {
|
|
cursor: pointer
|
|
}
|
|
|
|
::-moz-focus-inner {
|
|
padding: 0;
|
|
border-style: none
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical
|
|
}
|
|
|
|
fieldset {
|
|
min-width: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0
|
|
}
|
|
|
|
legend {
|
|
float: left;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin-bottom: .5rem;
|
|
font-size: calc(1.275rem + .3vw);
|
|
line-height: inherit
|
|
}
|
|
|
|
@media (min-width:1200px) {
|
|
legend {
|
|
font-size: 1.5rem
|
|
}
|
|
}
|
|
|
|
legend+* {
|
|
clear: left
|
|
}
|
|
|
|
::-webkit-datetime-edit-day-field,
|
|
::-webkit-datetime-edit-fields-wrapper,
|
|
::-webkit-datetime-edit-hour-field,
|
|
::-webkit-datetime-edit-minute,
|
|
::-webkit-datetime-edit-month-field,
|
|
::-webkit-datetime-edit-text,
|
|
::-webkit-datetime-edit-year-field {
|
|
padding: 0
|
|
}
|
|
|
|
::-webkit-inner-spin-button {
|
|
height: auto
|
|
}
|
|
|
|
[type=search] {
|
|
outline-offset: -2px;
|
|
-webkit-appearance: textfield
|
|
}
|
|
|
|
::-webkit-search-decoration {
|
|
-webkit-appearance: none
|
|
}
|
|
|
|
::-webkit-color-swatch-wrapper {
|
|
padding: 0
|
|
}
|
|
|
|
::file-selector-button {
|
|
font: inherit
|
|
}
|
|
|
|
::-webkit-file-upload-button {
|
|
font: inherit;
|
|
-webkit-appearance: button
|
|
}
|
|
|
|
output {
|
|
display: inline-block
|
|
}
|
|
|
|
iframe {
|
|
border: 0
|
|
}
|
|
|
|
summary {
|
|
display: list-item;
|
|
cursor: pointer
|
|
}
|
|
|
|
progress {
|
|
vertical-align: baseline
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important
|
|
}
|
|
|
|
/*!
|
|
* Iglou.eu v3.0.0
|
|
* Copyright 2022 Iglou.eu
|
|
* Copyright 2022 Adrien Kara
|
|
* Licensed under MIT (/LICENSE)
|
|
*/
|
|
:root {
|
|
/* Color */
|
|
--c-pink: #ff355a;
|
|
--c-red: #fc4838;
|
|
--c-orange: #fca10d;
|
|
--c-yellow: #fad905;
|
|
--c-green: #2fd749;
|
|
--c-mint: #62d1cd;
|
|
--c-teal: #6dc2de;
|
|
--c-cyan: #5bc8f5;
|
|
--c-blue: #0071eb;
|
|
--c-indigo: #5f5be3;
|
|
--c-purple: #bd5df5;
|
|
|
|
--c-brown: #ae8e67;
|
|
--c-lgray: #9b9bae;
|
|
--c-gray: #73738c;
|
|
--c-dark: #343a40;
|
|
--c-white: #ffffff;
|
|
--c-light: #fbfbfd;
|
|
|
|
/* Utils */
|
|
--t-duration: .3s;
|
|
--p-marge: 5vw;
|
|
--p-hmarge: 5vh;
|
|
--p-max: 1920px;
|
|
--p-min: 320px;
|
|
--h-size: 2em;
|
|
--h-marge: 1em;
|
|
--b-radius: 3px;
|
|
|
|
/* Default */
|
|
--button-color: var(--c-blue);
|
|
--button-background: var(--c-white);
|
|
}
|
|
|
|
@media (prefers-reduced-motion:reduce) {
|
|
:root {
|
|
--t-duration: 0s;
|
|
}
|
|
}
|
|
|
|
/* # Animations */
|
|
|
|
/* # Global */
|
|
body {
|
|
color: var(--c-dark);
|
|
/*! margin-top: calc(var(--h-size) + var(--h-marge) * 2); */
|
|
background-color: var(--c-white);
|
|
}
|
|
|
|
.header,
|
|
.article,
|
|
.footer {
|
|
margin: auto;
|
|
min-width: var(--p-min);
|
|
max-width: var(--p-max);
|
|
}
|
|
|
|
.article {
|
|
padding: 0 var(--p-marge);
|
|
min-height: var(--p-min);
|
|
padding-top: 6em;
|
|
}
|
|
|
|
.grid_full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.glob_title {
|
|
color: var(--c-dark);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
}
|
|
|
|
.glob_desc {
|
|
color: var(--c-gray);
|
|
text-align: center;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.left {
|
|
text-align: left;
|
|
}
|
|
|
|
.justify {
|
|
text-align: justify;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
}
|
|
|
|
.svg_icon {
|
|
max-width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.glob_title>.svg_icon {
|
|
fill: var(--c-blue);
|
|
width: 1em;
|
|
height: 1em;
|
|
margin-right: .5em;
|
|
vertical-align: sub;
|
|
}
|
|
|
|
.popup {
|
|
display: none;
|
|
}
|
|
|
|
.popup:target {
|
|
display: initial;
|
|
}
|
|
|
|
.popup::before {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1010;
|
|
opacity: .8;
|
|
content: "";
|
|
position: fixed;
|
|
background-color: var(--c-dark);
|
|
}
|
|
|
|
.popup>.box {
|
|
gap: 1em;
|
|
top: var(--p-hmarge);
|
|
left: var(--p-marge);
|
|
right: var(--p-marge);
|
|
bottom: var(--p-hmarge);
|
|
padding: 1em;
|
|
z-index: 1020;
|
|
display: grid;
|
|
overflow: auto;
|
|
position: fixed;
|
|
border-radius: var(--b-radius);
|
|
background-color: var(--c-white);
|
|
}
|
|
|
|
.popup_close {
|
|
top: var(--p-hmarge);
|
|
right: var(--p-marge);
|
|
color: var(--c-blue);
|
|
margin: 1em;
|
|
border: .1em solid;
|
|
z-index: 1;
|
|
padding: .25em .5em;
|
|
position: fixed;
|
|
font-weight: 600;
|
|
border-radius: var(--b-radius);
|
|
background-color: var(--c-white);
|
|
}
|
|
|
|
.popup_close>.svg_icon {
|
|
fill: var(--c-blue);
|
|
}
|
|
|
|
.link {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.link>.svg_icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.button {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
text-decoration: unset;
|
|
padding: .5em 1em;
|
|
margin: .5em;
|
|
border-radius: var(--b-radius);
|
|
border: .1em solid;
|
|
position: relative;
|
|
background-color: var(--button-background);
|
|
}
|
|
|
|
.button:not(.with_icon)>span {
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: var(--t-duration) color;
|
|
}
|
|
|
|
.button:not(.with_icon):hover>span,
|
|
.button:not(.with_icon):focus>span {
|
|
color: var(--button-background);
|
|
}
|
|
|
|
.button::after {
|
|
top: .1em;
|
|
left: .1em;
|
|
right: 100%;
|
|
bottom: .1em;
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: var(--b-radius);
|
|
background-color: transparent;
|
|
transition-duration: var(--t-duration);
|
|
transition-property: background-color, right;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
|
|
.button:hover::after,
|
|
.button:focus::after {
|
|
right: .1em;
|
|
background-color: var(--button-color);
|
|
}
|
|
|
|
.button.with_icon>.svg_icon {
|
|
fill: var(--button-color);
|
|
left: 0;
|
|
width: 1em;
|
|
height: 1em;
|
|
z-index: 1;
|
|
position: relative;
|
|
margin-right: .5em;
|
|
transition-duration: var(--t-duration);
|
|
transition-property: fill, left, transform;
|
|
}
|
|
|
|
.button.with_icon:hover>.svg_icon,
|
|
.button.with_icon:focus>.svg_icon {
|
|
left: 42%;
|
|
fill: var(--button-background);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.prez_pad {
|
|
gap: 0 1em;
|
|
padding: 1em;
|
|
display: grid;
|
|
grid-template: "icon title"auto "icon text"1fr / auto 1fr;
|
|
border-radius: var(--b-radius);
|
|
background-color: var(--c-white);
|
|
}
|
|
|
|
.prez_pad__icon {
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
padding: .5em;
|
|
grid-area: icon;
|
|
border-radius: var(--b-radius);
|
|
background-color: var(--c-blue);
|
|
}
|
|
|
|
.prez_pad__icon>.svg_icon {
|
|
fill: var(--c-white);
|
|
}
|
|
|
|
.prez_pad__title {
|
|
color: var(--c-dark);
|
|
grid-area: title;
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prez_pad__text {
|
|
color: var(--c-gray);
|
|
margin: 0;
|
|
grid-area: text;
|
|
}
|
|
|
|
.warning {
|
|
color: var(--c-pink);
|
|
text-align: center;
|
|
padding: 1em;
|
|
border-width: .1em .1em .1em .5em;
|
|
border-style: solid;
|
|
border-radius: 0 var(--b-radius) var(--b-radius) 0;
|
|
}
|
|
|
|
.browserupgrade {
|
|
position: relative;
|
|
top: 1em;
|
|
width: 50%;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
/* # Header */
|
|
.header {
|
|
padding: var(--h-marge) var(--p-marge);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: var(--c-white);
|
|
}
|
|
|
|
.header_logo {
|
|
display: block;
|
|
height: var(--h-size);
|
|
width: calc(var(--h-size) * 4);
|
|
}
|
|
|
|
.header_logo>.svg_icon {
|
|
fill: var(--c-blue);
|
|
stroke: var(--c-blue);
|
|
stroke-width: 0.20em;
|
|
}
|
|
|
|
.header_menu {
|
|
gap: 0 2em;
|
|
height: 100%;
|
|
margin: auto;
|
|
display: flex;
|
|
padding: unset;
|
|
list-style: none;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.menu_entry.link {
|
|
display: none;
|
|
}
|
|
|
|
.menu_entry.link::after {
|
|
content: "";
|
|
left: .5em;
|
|
width: 0;
|
|
bottom: 10%;
|
|
position: absolute;
|
|
border-right: .1em solid transparent;
|
|
border-bottom: .1em solid transparent;
|
|
transition-duration: var(--t-duration);
|
|
transition-property: width, border-color;
|
|
transition-timing-function: cubic-bezier(.79, .14, .15, .86);
|
|
}
|
|
|
|
.menu_entry.link:focus,
|
|
.menu_entry.link:hover {
|
|
color: var(--c-blue);
|
|
}
|
|
|
|
.menu_entry.link:focus::after,
|
|
.menu_entry.link:hover::after {
|
|
width: 100%;
|
|
border-bottom: .1em solid var(--c-blue);
|
|
}
|
|
|
|
.menu_entry.contact {
|
|
margin: auto;
|
|
padding: 0 1em;
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
line-height: 200%;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
/* # Articles */
|
|
/* ## Primary */
|
|
#a_primary {
|
|
display: grid;
|
|
min-height: 100vh;
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
background-size: cover;
|
|
background-image: url(/media/header.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: bottom center;
|
|
}
|
|
|
|
.hero {
|
|
margin: auto;
|
|
max-width: 30em;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero__title {
|
|
color: var(--c-white);
|
|
font-family: cera-round-pro, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hero__text {
|
|
color: var(--c-light);
|
|
}
|
|
|
|
.hero__text>.link {
|
|
color: var(--c-light);
|
|
font-weight: 600;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.services_preview {
|
|
display: none;
|
|
}
|
|
|
|
/* ## Benefits */
|
|
.benefits_reps {
|
|
display: none;
|
|
}
|
|
|
|
.benefits_list {
|
|
gap: 2em;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
list-style: none;
|
|
}
|
|
|
|
.benefit_item {
|
|
gap: 0 1.5em;
|
|
padding: 0;
|
|
position: relative;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.benefit_item__icon {
|
|
width: 5em;
|
|
height: 5em;
|
|
padding: 1.5em;
|
|
background-color: var(--c-blue);
|
|
transition: var(--t-duration) background-color;
|
|
}
|
|
|
|
.benefit_item:hover>.benefit_item__icon,
|
|
.benefit_item:focus>.benefit_item__icon {
|
|
background-color: var(--c-cyan);
|
|
}
|
|
|
|
.benefit_item__title {
|
|
margin-top: .5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.benefit_item::after {
|
|
content: "";
|
|
top: 5em;
|
|
left: 2.25em;
|
|
width: .5em;
|
|
bottom: -2em;
|
|
z-index: -1;
|
|
opacity: .2;
|
|
position: absolute;
|
|
background-color: var(--c-blue);
|
|
}
|
|
|
|
.benefit_item:last-child::after {
|
|
display: none;
|
|
}
|
|
|
|
/* ## FAQ */
|
|
.question {
|
|
padding: 2em 0;
|
|
border-bottom: .1em solid var(--c-lgray);
|
|
}
|
|
|
|
.question:last-child {
|
|
border-bottom: unset;
|
|
}
|
|
|
|
.question_title {
|
|
color: var(--c-dark);
|
|
position: relative;
|
|
font-size: 1.2em;
|
|
list-style: none;
|
|
transition: var(--t-duration) color;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.question_title::marker {
|
|
display: none;
|
|
}
|
|
|
|
.question_title::after {
|
|
content: ">";
|
|
right: 0;
|
|
position: absolute;
|
|
font-size: 1.25em;
|
|
transition: var(--t-duration) transform;
|
|
}
|
|
|
|
.question[open]>.question_title::after {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.question_response {
|
|
color: var(--c-gray);
|
|
margin: 1em 1em 0 1em;
|
|
}
|
|
|
|
.question[open]>.question_title,
|
|
.question:hover>.question_title,
|
|
.question:focus>.question_title {
|
|
color: var(--c-blue);
|
|
}
|
|
|
|
/* ## Ref */
|
|
#a_ref {
|
|
min-height: auto;
|
|
}
|
|
|
|
.ref_list {
|
|
gap: 1em;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.ref_list__item {
|
|
width: auto;
|
|
margin: auto;
|
|
height: 2em;
|
|
}
|
|
|
|
/* ## Contact/Map */
|
|
#a_contact {
|
|
margin: 6em auto auto auto;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.contact_map {
|
|
width: 100%;
|
|
height: 25em;
|
|
/*! filter: grayscale(1); */
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.contact_info {
|
|
margin: 0;
|
|
padding: 1em;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.contact_info__title {
|
|
color: var(--c-blue);
|
|
display: none;
|
|
font-size: 1.6em;
|
|
text-align: right;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.contact_info__item_title {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.contact_info__item_title>.svg_icon {
|
|
fill: var(--c-blue);
|
|
width: 1.5em;
|
|
height: 1em;
|
|
padding: 0 .25em;
|
|
}
|
|
|
|
.contact_info__item_content {
|
|
color: var(--c-gray);
|
|
}
|
|
|
|
.contact_info__item_content>.link {
|
|
color: var(--c-blue);
|
|
display: block;
|
|
}
|
|
|
|
.contact_info__item:last-child>.contact_info__item_content {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* # Footer */
|
|
#footer {
|
|
gap: 2em;
|
|
color: var(--c-white);
|
|
display: grid;
|
|
padding: 3.5em var(--p-marge) 1.5em var(--p-marge);
|
|
background-color: var(--c-blue);
|
|
}
|
|
|
|
.footer_logo {
|
|
height: 4em;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer_content {
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer_content>.link {
|
|
color: var(--c-white);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.footer_social {
|
|
gap: 1em;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
font-size: 2em;
|
|
list-style: none;
|
|
justify-content: center;
|
|
}
|
|
|
|
.footer_logo>.svg_icon,
|
|
.footer_social__item_link>.svg_icon {
|
|
fill: var(--c-white);
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
|
|
/* # Header */
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 0 .5em -.3em var(--c-gray);
|
|
}
|
|
|
|
.menu_entry.link {
|
|
color: var(--c-gray);
|
|
border: .1em solid transparent;
|
|
padding: 0 .5em;
|
|
display: inline-block;
|
|
position: relative;
|
|
transition: var(--t-duration) color ease-out;
|
|
line-height: 200%;
|
|
border-radius: var(--b-radius);
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
/* # Articles */
|
|
/* ## Primary */
|
|
#a_primary {
|
|
gap: 2em;
|
|
padding-top: calc(var(--h-size) + var(--h-marge) * 2 + 2em);
|
|
grid-template-rows: 1fr auto;
|
|
}
|
|
|
|
.services_preview {
|
|
gap: 1em;
|
|
display: grid;
|
|
}
|
|
|
|
.services_preview__item {
|
|
box-shadow: 0 0 2em -.5em var(--c-lgray);
|
|
border-bottom: 2px solid var(--c-blue);
|
|
}
|
|
|
|
.services_preview__item_title {
|
|
text-decoration: unset;
|
|
}
|
|
|
|
/* ## Benefits */
|
|
#a_benefits {
|
|
gap: 1em 2em;
|
|
display: grid;
|
|
grid-template-columns: 10em 1fr;
|
|
}
|
|
|
|
.benefits_reps {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: initial;
|
|
object-fit: contain;
|
|
object-position: top;
|
|
}
|
|
|
|
/* ## Contact/Map */
|
|
.contact_info {
|
|
top: -2em;
|
|
left: 0;
|
|
bottom: -2em;
|
|
padding: 2em 5vw 2em 1em;
|
|
position: absolute;
|
|
box-shadow: 0 0 0.5em var(--c-lgray);
|
|
border-radius: 0 var(--b-radius) var(--b-radius) 0;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
background-color: var(--c-white);
|
|
}
|
|
|
|
.contact_info__item_content>.link {
|
|
text-align: center;
|
|
}
|
|
|
|
/* # Footer */
|
|
#footer {
|
|
background-size: 101%;
|
|
background-image: url(/media/footer.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center -15px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
|
|
.popup>.box {
|
|
gap: 1em 4em;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
/* # Articles */
|
|
/* ## Primary */
|
|
.services_preview {
|
|
gap: 3em;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
/* ## Benefits */
|
|
#a_benefits {
|
|
gap: 1em 4em;
|
|
grid-template-columns: 2fr 4fr;
|
|
}
|
|
|
|
/* ## Ref */
|
|
.ref_list {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
|
|
.benefits_reps {
|
|
object-position: center;
|
|
}
|
|
|
|
/* # Footer */
|
|
#footer {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.footer_logo {
|
|
height: 2em;
|
|
}
|
|
|
|
.footer_social {
|
|
justify-content: right;
|
|
}
|
|
} |