/*
Theme Name: Gillbergska
Theme URI: https://gillbergska.se/
Description: Gillbergska styles
Version: 1.0
Author: Byrå4
Author URI: https://byra4.se
Tags: HTML5, CSS3
*/
/*
font-vikter:
Regular 400
Bold 700
*/
/*
Användbara fa-ikoner:
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-family: inherit; vertical-align: baseline;} header, section, footer, aside, nav, main, article, figure {display: block;} /*För att få HTML5 element att funka i äldre browsers*/ h1 strong, h2 strong, h3 strong, h4 strong, h5 strong {font-weight: inherit;} h1 em, h2 em, h3 em, h4 em, h5 em {font-style: inherit;}
html, body {height: 100%;}
/* -------------------------------------------------- */
/* variabler */
/* -------------------------------------------------- */
html { /* här anges vilket scope variablerna ska gälla i */
--farg-orange: #FF9D00;
--farg-orange-ljus: #ffb830;
--farg-bla: #001D86;
--farg-bla-ljus: #052fc6;
--farg-gra: #363636;
--text-storlek-h1: 36px;
--text-storlek-h2: 22px;
--text-storlek-h3: 16px;
--text-storlek-normal: 14px;
--text-storlek-mindre: 12px;
--text-storlek-mini: 9px;
--text-familj: 'Mozilla Headline', sans-serif;
/*--text-familj-alt: 'courier-std', monospace;*/
--text-vikt-normal: 300;
--text-vikt-bold: 700;
--marginal: 15px;
}
@media all and (min-width: 375px){
html {
--text-storlek-h1: 40px;
--text-storlek-h2: 26px;
--text-storlek-h3: 18px;
--text-storlek-normal: 15px;
--marginal: 25px;
}
}
@media all and (min-width: 500px){
html {
--text-storlek-h1: 46px;
--text-storlek-h2: 30px;
--text-storlek-h3: 20px;
--text-storlek-normal: 16px;
--text-storlek-mindre: 13px;
--text-storlek-mini: 10px;
--marginal: 30px;
}
}
/* -------------------------------------------------- */
/* standardformatering */
/* -------------------------------------------------- */
html {
font-family: var(--text-familj);
font-size: var(--text-storlek-normal);
font-weight: var(--text-vikt-normal);
font-optical-sizing: auto;
line-height: 1.5;
color: black;
}
p {
margin-bottom: 1.2em;
}
a {color: var(--farg-bla); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; text-decoration-color: var(--farg-orange);}
a:hover {text-decoration-color: var(--farg-bla); color: var(--farg-bla-ljus);}
h1 {
font-size: var(--text-storlek-h1);
font-weight: var(--text-vikt-bold);
line-height: 1.2;
margin-bottom: .1em;
font-weight: bold;
color: var(--farg-bla);
/*letter-spacing: -1px;*/
}
h2 {
font-size: var(--text-storlek-h2);
font-weight: var(--text-vikt-bold);
color: var(--farg-bla);
margin-top: 1.2em;
margin-bottom: .1em;
line-height: 1.1;
/*letter-spacing: -.5px;*/
}
h3 {
font-size: var(--text-storlek-h3);
font-weight: var(--text-vikt-bold);
color: var(--farg-bla);
margin-top: 1.2em;
margin-bottom: 0.1em;
line-height: 1.2;
}
h4 {
font-size: var(--text-storlek-normal);
font-weight: var(--text-vikt-bold);
color: var(--farg-bla);
line-height: 1.2;
/*font-style: italic;*/
}
strong {font-weight: var(--text-vikt-bold);}
img {max-width: 100%;}
ul {
list-style-position: outside;
padding-left: 1em;
margin-bottom: 1em;
}
ol {
list-style-position: outside;
padding-left: 1.5em;
margin-bottom: 1em;
}
ul ul, ol ol {
margin-bottom: 0;
}
li + li {margin-top: .4em;}
p + ul, p + ol {margin-top: -.5em;}
details p + ul, details p + ol {margin-top: 0;}
h1 + ul, h1 + ol, h2 + ul, h2 + ol, h3 + ul, h3 + ol, h4 + ul, h4 + ol {margin-top: .5em;}
button {}
hr {}
address {font-style: normal;}
/*
address {font-style: normal;}
a {text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--farg-lila); text-decoration-color: var(--farg-turkos); text-decoration-thickness: 2px;}
a:hover {text-decoration: underline; text-decoration-thickness: 4px; text-decoration-color: var(--farg-lila); color: black;}
section {box-sizing: border-box;}
blockquote, .wp-block-quote { font-size: var(--text-storlek-h2-kol2); border: 0px solid black; margin: 40px 0 40px 70px; padding: 0; }
blockquote:before { float: left; font-size: 187px; line-height: 1px; content: '\201D'; border: 0px solid red; padding-top: 67px; margin-left: -70px; color: var(--farg-1); }
*/
/* SCROLLBAR width */
/*::-webkit-scrollbar { width: 10px;}*/
/* SCROLLBAR Track */
/*::-webkit-scrollbar-track { background: black;}*/
/* SCROLLBAR Handle */
/*::-webkit-scrollbar-thumb { background: #505050; }*/
/* SCROLLBAR Handle on hover */
/*::-webkit-scrollbar-thumb:hover {background: #6c6c6c;}*/
/* ----------- KNAPPAR ----------- */
.knapp, .wp-block-button__link, input[type=submit], button {
display: inline-block; background-color: var(--farg-orange); border-radius: 50px;
padding: 8px 16px;
font-weight: bold;
font-size: var(--text-storlek-normal); text-decoration: none; color: black; border: 0;
color: var(--farg-bla);
font-family: var(--text-familj);
cursor: default;
}
.knapp:hover, .wp-block-button__link:hover, input[type=submit]:hover, button:hover, .knapp.invert {color: var(--farg-orange); background-color: var(--farg-bla); text-decoration: none; border: 0;}
.knapp.vit {background-color: white;}
.knapp.vit:hover { background-color: var(--farg-bla); color: white;}
.knapp.mindre {font-size: var(--text-storlek-mindre); padding: 4px 8px; margin-bottom: 7px;}
.knapp.invert {color: var(--farg-orange); background-color: var(--farg-bla);}
.knapp.invert:hover {color: var(--farg-bla); background-color: var(--farg-orange);}
/* -------------------------------------------------- */
/* FORMULÄR */
/* -------------------------------------------------- */
input, textarea {
font-family: var(--text-familj);
font-size: 16px;
font-weight: 200;
line-height: 1.6;
color: black;
resize: none;
}
input:focus, textarea:focus {
outline: 2px solid var(--farg-bla);
/*border:1px solid red;
box-shadow: 0 0 10px #719ECE;*/
}
/* för att checkboxar och radioknappar ska linjera med labels */
input[type=checkbox], input[type=radio] {vertical-align: middle; position: relative; bottom: .10em;}
/* design checkbox */
input[type=checkbox] {-webkit-appearance: none; background-color: none; border: 2px solid black; width: 20px; height: 20px; border-radius: 0px; display: inline-block; position: relative;}
input[type=checkbox]:active, input[type=checkbox]:checked:active {}
input[type=checkbox]:checked, input[type=checkbox]:hover {background-color: black;}
input[type=checkbox]:checked:after {content: '\2714'; font-size: 17px; position: absolute; top: -5px; left: 1px; color: var(--farg-ljuslila-60);}
.rosa input[type=checkbox]:checked:after {color: var(--farg-rosa);}
.turkos input[type=checkbox]:checked:after {color: var(--farg-turkos);}
/* om stilarna inte ska tillämpas på alla checkboxar görs en klass istället:
.regular-checkbox {-webkit-appearance: none; background-color: none; border: 2px solid black; width: 20px; height: 20px; border-radius: 0px; display: inline-block; position: relative;}
.regular-checkbox:active, .regular-checkbox:checked:active {}
.regular-checkbox:checked, .regular-checkbox:hover {background-color: black;}
.regular-checkbox:checked:after {content: '\2714'; font-size: 17px; position: absolute; top: -5px; left: 1px; color: var(--farg-ljuslila-60);}
.rosa .regular-checkbox:checked:after {color: var(--farg-rosa);}
.turkos .regular-checkbox:checked:after {color: var(--farg-turkos);}
*/
/* Contact form 7 anpassning */
/* .wpcf7 form .wpcf7-not-valid-tip {margin-bottom: 30px;} .wpcf7 form .wpcf7-response-output {margin: 0px;}*/
/* Recaptcha */
/*.grecaptcha-badge { visibility: hidden; }*/
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* WP STANDARDKLASSER */
/* -------------------------------------------------- */
/*
.has-profilfarg-color {color: var(--farg-1);}
.has-svart-color {color: black;}
.has-vit-color {color: white;}
.has-profilfarg-background-color {background-color: var(--farg-1);}
.has-morkgra-background-color {background-color: var(--farg-morkgra);}
.has-svart-background-color {background-color: black;}
.has-vit-background-color {background-color: white;}
.wp-block-latest-posts li {margin: 0 0 20px 0;}
.wp-block-latest-posts__post-title {font-size: var(--text-storlek-h3); font-weight: bold; margin-right: 20px;}
.wp-block-latest-posts__post-date {display: inline-block; font-size: var(--text-storlek-mini);}
.wp-block-latest-posts__post-excerpt {font-size: var(--text-storlek-mindre); margin-top: 0.2em;}
.wp-block-separator {border-bottom: 1px solid;}
.wp-block-image img {height: auto;}
.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {max-width: 100%; height: auto;}
.post-edit-link {color: red; padding-bottom: 20px; display: block;}
.post-edit-link:before {content: '\00BB\00A0';}
.pagination_con {border-top: 3px solid black; margin: 50px 0 20px 0; padding-top: 10px;}
.page-numbers {margin-right: 10px;}
.page-numbers.current {font-weight: bold;}
*/
/* DETAILS
details.has-background:has(> .has-background)
= förälder med ".has-background" som också har ett barn med den klassen
p:not(.has-background)
= p element som inte har ".has-background"
*//*
details summary {color: var(--farg-lila); margin-bottom: 2px;}
details summary:hover {text-decoration: underline; text-decoration-thickness: 4px; text-decoration-color: var(--farg-lila); color: black;}
.is-style-faktaruta details summary {color: var(--farg-ljuslila-60);}
.is-style-faktaruta details summary:hover {color: var(--farg-ljuslila-30); text-decoration-color: var(--farg-turkos);}
details p, details ul, details ol {font-size: var(--text-storlek-mindre); margin-bottom: .5em!important;}
details p.has-background {margin-bottom: 0!important;}
details {margin-bottom: 1em;}
details.has-background {padding: 1em;}
details summary {transition: margin 150ms ease-out;}
details[open] summary {margin-bottom: 10px;}
details.has-background:has(> .has-background) p:not(.has-background) {background: white; margin-bottom: 0!important; padding-top: .5em; padding-bottom: .5em;}
details.has-background:has(> .has-background) {padding: 0;} /* om både details containern (förälder) och innehållet (barn) har bakgrund ska det inte vara padding på containern eftersom det redan är padding på barn med bakgrund */
/*
/* summaryn (rubriken) behöver däremot ha padding: */
/*
details.has-background:has(> .has-background) summary {padding: 1em;}
h1 + details, h2 + details, h3 + details {margin-top: .8em;}
details details {padding: 0 25px;}
details details summary {font-size: var(--text-storlek-mindre);}
details[open] details summary { margin-bottom: 0;}
details[open] details[open] summary { margin-bottom: 10px;}
*/
/* WP-KOLUMNER *//*
.wp-block-columns {margin-bottom: 1em;}
.wp-block-columns.has-background {padding: 1.25em 2.375em;}
h1 + .wp-block-columns, h2 + .wp-block-columns {margin-top: .5em;}
.wp-block-columns + h1, .wp-block-columns + h2 {margin-top: 1.5em;}
.wp-block-column.has-background p.has-background {margin-bottom: 0;}
.wp-block-column.has-background p.has-background:last-of-type {margin-bottom: 7px;}
*/
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* Egna standardklasser */
/* -------------------------------------------------- */
/*
.clear {clear: both; border: 0px solid green;}
.dotted {background-image: linear-gradient(to right, var(--farg-ljusgra) 25%, rgba(255,255,255,0) 0%); background-position: top; background-size: 7px 2px; background-repeat: repeat-x;}
.hallihop {display: inline-block;}
.altfont { font-family: var(--text-familj-alt); }
.gray_tone {color: white; background-image: linear-gradient(#3e3e3e, #000000);}
.nopadding {padding: 0;}
.hide {display: none;}
*/
/* alternativa länkpilar
.lankpil {margin-right: 5px; width: 22px;} - png-bild
.lank_med_pil::before {content: "\2192\00A0";} - html-pil
*/
/* Font awesome icons */
/*
.fa-arrow-right-long, .fa-arrow-up-right-from-square {margin-right: 5px;}
*/
/* -------------------------------------------------- */
/* ********************************************************************************************** */
/* MENY */
/* ********************************************************************************************** */
/*______________ MENYKNAPP ______________ */
#menyknappswrapper {position: fixed; top: var(--marginal); right: var(--marginal); z-index: 1000; background-color: var(--farg-orange); border-radius: 500px; width: 50px; height: 50px; cursor: pointer;
display: flex; justify-content: center; align-items: center; border: 0;
}
#menyknappswrapper:hover {background-color: var(--farg-orange-ljus);}
/*
#menyknappswrapper.change {background-color: var(--farg-bla);}
#menyknappswrapper.change:hover {background-color: var(--farg-orange);}
*/
/*
#menyknappswrapper:hover .bar1,#menyknappswrapper:hover .bar2, #menyknappswrapper:hover .bar3 {background-color: var(--farg-orange);}
*/
#menyknapp {display: inline-block; border: 0px solid red;}
.bar1, .bar2, .bar3 {width: 20px; height: 3px; background-color: var(--farg-bla); margin: 4px 0; transition: 0.4s; border-radius: 25px;}
.change .bar1 { -webkit-transform: rotate(-45deg) translate(-5px, 5px); transform: rotate(-45deg) translate(-5px, 5px);}
.change .bar2 {opacity: 0;}
.change .bar3 {-webkit-transform: rotate(45deg) translate(-5px, -5px); transform: rotate(45deg) translate(-5px, -5px);}
@media all and (min-width: 414px){
/*#menyknappswrapper{top: 30px; right: 30px;}*/
}
/*_______________________________________ */
/*______________ MENYLAGER ______________ */
#menylager {border: 0px solid red; transition: left .4s; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; /*background-image: linear-gradient(#3e3e3e, #000000)*/ background-color: var(--farg-gra); z-index: 90; position: fixed; top: 0px; left: 100%; scrollbar-color: var(--farg-ljusgron) var(--farg-morkgra);}
#menylager.change {display: block; left: 0%;}
/*_______________________________________ */
/*______________ MENYLÄNKAR _____________ */
.menywrapper {width: 80%; max-width: 1200px; margin: 0px auto; padding: 20px 0 0 0; border: 0px dashed white;
/*position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);*//*centrering*/
min-height: 95vh;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.meny_inner_wrapper {border: 0px solid blue;
width: 100%;
box-sizing: border-box;
}
#menylager a[href^=\#]:hover {cursor: text; color: white;}
#menylager, #menylager a {color: white; text-decoration: none;}
#menylager a:hover {color: var(--farg-orange); text-decoration: none; text-decoration-color: white;}
#menylager .current-menu-item a {color: var(--farg-orange); text-decoration: none; cursor: text;}
#huvudmeny {margin-bottom: 10%;}
#huvudmeny a:hover {border: 0;}
#huvudmeny ul {list-style-type: none; box-sizing: border-box; padding: 0;}
/* GRÖN hela menyn: */
#huvudmeny>ul {border: 0px solid green; width: 100%;}
/* GUL huvudsidornas länkar: */
#huvudmeny>ul>li {border: 0px solid yellow; display: block; width: 100%; margin: 0 0 15px 0; vertical-align: top; font-size: 20px; box-sizing: border-box; text-align: center; font-weight: 200;}
@media all and (min-width: 414px){
#huvudmeny>ul>li {font-size: 26px;}
}
@media all and (min-width: 1024px){
#huvudmeny>ul>li {font-size: 30px;}
}
/* BLÅ varje undermeny: */
#huvudmeny ul ul {border: 0px solid blue; margin-top: 7px;}
/* ROSA undersidornas länkar*/
#huvudmeny li li {border: 0px solid pink; font-weight: 300; font-size: 16px; margin-bottom: 3px;}
@media all and (min-width: 1024px){ #huvudmeny li li {font-size: 18px;} }
/* LILA undersidornas länkar*/
#huvudmeny ul ul ul {margin-bottom: .3em; margin-top: 0px;}
#huvudmeny li li li {border: 0px solid purple; font-weight: 300; font-size: 10px; margin-bottom: 3px;}
@media all and (min-width: 1024px){ #huvudmeny li li li {font-size: 12px;} }
/*_______________________________________ */
/*______________ MENYFOT _____________ */
#menylager .sidfot {background: none; padding: 0;}
#menylager .footer_logo {width: 55px; margin: 0 0 20px 0; border: 0px solid red;}
#menylager .kontaktinfo {font-family: var(--text-familj-alt); font-size: 13px; margin: 0 0 20px 0; border: 0px solid red;}
#menylager .ikon_fb {width: 18px; margin-right: 25px; border: 0px solid red;}
#menylager .ikon_insta {width: 30px; margin-right: 22px; border: 0px solid red;}
#menylager .ikon_li {width: 30px; border: 0px solid red;}
#menylager .grid_con {margin: 5px auto;}
@media all and (min-width: 768px) {
#menylager .sidfot .streckadlinje_vit {margin: 105px 30px 45px 30px;}
#menylager .footer_logo {margin: 0 30px 0 0;}
#menylager .kontaktinfo {margin: 0 40px 0 0;}
}
/*_______________________________________ */
/* ********************************************************************************************** */
/* ********************************************************************************************** */
/* GLOBALT */
/* ********************************************************************************************** */
/* -------------- DIREKT TILL INNEHÅLL ---------------- */
nav.skip{position: absolute; width : 100%;border: 0px solid red; box-sizing: border-box;}
#skip-link {background: black; color: white; border: 2px solid black; padding: 10px; position: absolute; transform: translateY(-250%); left: 5%; z-index: 101;}
#skip-link:focus {transform: translateY(0%);}
/* ---------------------------------------------------- */
/* -------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------- */
header {padding: var(--marginal);}
.xxheader_con {display: flex;}
.logo {width: 80px; margin-right: 80px; flex: 0; align-self: flex-start; margin-bottom: 10px;}
.header_text { align-self: center; border: 0px solid red; flex: 1; padding-right: 0px; display: inline-block; font-size: var(--text-storlek-h3); color: var(--farg-bla); font-weight: var(--text-vikt-normal);
display: none;
}
@media all and (min-width: 640px) {
.header_con {display: flex;}
.logo {width: 80px; margin-bottom: 20px;}
.header_text {padding-right: 80px;}
}
@media all and (min-width: 1024px) {
.logo {width: 100px; }
}
/* -------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------- */
.sidfot {height: 170px; background: var(--farg-gra); display: flex; justify-content: center; align-items: center; color: white; padding: 30px;flex-direction: column; gap: 10px;}
.footer_ikon {width: 33px; display: inline-block; margin-left: 10px; vertical-align: middle;}
.footer_ikon:hover {opacity: .7;}
.some_links a:first-of-type .footer_ikon {margin-left: 0px;}
.footer_meny ul { margin: 0 0 0 0px; padding: 0;}
.footer_meny li {display: inline-block; margin: 0 5px 0 0;}
.footer_meny li a {padding: 0 5px; color: var(--farg-orange); text-decoration: none;}
.footer_meny li a:hover {color: var(--farg-orange-ljus); text-decoration: underline; text-decoration-color: white;}
.adressen {text-align: center;}
@media all and (min-width: 1024px){
.sidfot {flex-direction: row;}
.footer_meny li::before {content: "• ";}
}
/* -------------------------------------------------- */
/* WRAPPER & SEKTIONER */
/* -------------------------------------------------- */
/* ********************************************************************************************** */
/* ********************************************************************************************** */
/* STARTSIDAN */
/* ********************************************************************************************** */
.frontpage .header_text {display: block;}
.frontpage .logo {margin-bottom: 20px;}
.frontpage .wrapper {display: flex; flex-direction: column; height: 100%;}
.frontpage header {flex: 0;}
.front_wrapper {flex: 1; display: flex; flex-direction: column;}
@media all and (min-width: 640px){
.front_wrapper {flex-direction: row;}
}
.front_box {background: gray; overflow: hidden; border: 0px solid green; flex: 1; position: relative; color: white;
box-shadow:
inset
00px/*offset x*/
-200px/*offset y*/
200px/*blur*/
-20px/*spread*/
rgba(0,0,0,.8);
}
.front_box h2 {color: white;}
.cta_box {width: 70%; position: absolute; left: var(--marginal); bottom: var(--marginal);}
.cta_box p {margin-bottom: 0;}
.cta_box .knapp {margin-top: .5em;}
/* ********************************************************************************************** */
/* ********************************************************************************************** */
/* CONTENTSIDA */
/* ********************************************************************************************** */
.main_wrapper {
max-width: 730px;
margin: 0 auto 50px auto;
padding: 0 var(--marginal);
box-sizing: border-box;
min-height: calc(100VH - 450px);
}
/* -------------------------------------------------- */
/* FORMULÄR */
/* -------------------------------------------------- */
#regForm {margin: 30px auto; width: 100%; box-sizing: border-box;}
input, textarea {padding: 10px; width: 100%; border: 1px solid var(--farg-bla); box-sizing: border-box; background-color: #EAECF5;}
label{display: block; margin-bottom: 30px;}
input.invalid, textarea.invalid {background-color: #ffdddd;}
.tab {display: none;}
.tab h2 {margin-bottom: 50px;}
.all_steps_con {display: flex; margin: 70px 0;}
.step_con {text-align: center; border: 0px solid red; flex: 1; position: relative; color: var(--farg-bla); font-weight: bold; line-height: 1.2em;}
.step_line_left {height: 3px; width: calc(50% - 25px); position: absolute; background: var(--farg-bla); top: 20px; left: 0;}
.step_line_right {height: 3px; width: calc(50% - 25px); position: absolute; background: var(--farg-bla); top: 20px; right: 0;}
.step {height: 45px; width: 45px; margin: 0 auto; background-color: white; border: 3px solid var(--farg-bla); box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.step.active, .step.finish.active {background-color: var(--farg-orange); color: var(--farg-bla);}
.step.finish {background-color: var(--farg-bla); color: white;}
#slut_tab {position: relative;}
#slut_tab h2 {display: inline-block; margin-top: 0;}
#slut_tab h3 {border-bottom: 1px solid black; padding: 10px 0 3px 0; margin-bottom: 15px;}
.extraknappar {float: right; text-align: right;}
.wpcf7-form.sent .all_steps_con, .wpcf7-form.sent .all_tabs {display: none;}
.obligatoriska_falt {float: left; display: inline-block; font-size: var(--text-storlek-mindre);}
.wpcf7-not-valid-tip {background: pink; margin: 10px 0; padding: 20px;}
.canvas-invalid {
border: 2px solid red !important;
}
.canvas-error-message {
color: red;
font-size: 14px;
margin-top: 6px;
}
/* -------------------------------------------------- */
/* PRINT */
/* -------------------------------------------------- */
@media print and (min-width: 1px) {
.sidfot, .all_steps_con, #menyknappswrapper, .knapp, #prevBtn {display: none; visibility: hidden;}
}
/* ********************************************************************************************** */