/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Apr 27 2026 | 18:01:37 */ /* __ __ __ __ __ __ __ __ __ __ | ||_ |__) |_ \_/|__)|__)|_ (_ (_ |_ |__) |/\||__|__) |__/ \| | \ |____)__). | | \ */ /* This Website designed, created and developed by WebExpress.fr - registered trademark - marque déposée - Tous droits réservés - Copyright (c) 2015 ==> Today(), Emmanuel Lesieur */ /* LEXIK : * head = content head * header = site header * titles = content titles * highlight versus hover : ? */ /* CONVENTIONS : * CSS section groups comments : * add a blank line above * name pattern : styles :: * detail in current group : prefix with '..' */ /* DO : * continue cleaning and harmonizing this CSS file with explicit & normalized comments titles - 75% * isolate typo settings - 80% * move all fixed colors to vars - 70% * make settings parameters grouped (settings set) to be activated with consistency (example : typo settings associated with a font) * expand switchable palette notion...how ? * prefix all vars : font-, color-, etc. * !!!!! move used styles from each override to last override and disable partial overrides => KEEP onlu ONE active ovveride !!! */ /* Colors backup - do replace with vars and delete */ /* */ /* Fonts : * do properly configure plugin for loading required fonts before apply settings here * don't use tags targets in plugin setting ; set them here instead */ /* Moved : test local fonts with swap parameter ; see custom css js plugin */ /* MOVED : font face for inter : too long , as wee need to specify all font weights , so moved in custom css js */ /* CSS media queries allowed breakpoints reminder : * - 480px * - 719px * - 720px * - 820px * - 960px */ /* Colors :: */ /* : Color names define - names custom -- in FR -- abstract : no direct use ; group by colors : reds, blues, grays, ... - order by alpha */ :root { --transp : transparent; --blanc : white; --noir : #333; --bleu : #3b8dbd; --bleu-clair : dodgerblue; --bleu-fonce : #414a63; --bleu-fonce-2 : #263a66; --bleu-fonce-3 : #0f172a; /* tai-lwind title */ --bleu-fonce-4 : #334155; /* tai-lwind text */ --bleu-fonce-5 : #1F3064; /* val-men grp*/ --bleu-noir: #172940; --bleu-noir-2: #3c3c46; /* w-hor-sehub text */ --bleu-vif : #1e90ff; --bleu-vert: #234; --bleu-petrole : #023e60; --bleu-lagon : #05A9C5; --bleu-nuit : #2a365c; /* grab-cad */ --bleu-nuit-2 : #232d4f; /* grab-cad */ --bleu-lagon-2 : #3077e2; /* grab-cad */ --bleu-gris : #415275; /*svg-ator title */ --bleu-cyan : #11d1e2; --bleu-royal-1 : #0c61ff; /* web-protect.ai */ --orange : #ff8c00; --rouge: crimson; --rouge-saumon : #ff545a; /* grab-cad */ --rose-magenta : rgb(231, 24, 115); --rose : #ff2157; --rose-old : rgb(235, 44, 124); --rose-rouge : rgb(255, 59, 127); --rose-fluo : #fa0052; /* w-hor-sehub link */ --rose-old-1 : #e71873; --vert : #00a284; --vert-jaune : yellowgreen; --vert-fonce : #415463; --vert-neon : #1af78b; --bronze : rgb(154, 134, 103); --violet: #64f; /*direct-us*/ --violet-600: #4730b3; /* = rgb(71,48,179) direct-us ? */ --violet-sombre : rgb(52, 60, 102); --violet-moyen-1 : #673de6; /*h ost inger */ --violet-sombre-2 : #5025d1; /*h ost inger */ --jaune : yellow; --jaune-vert : #d4d42d; --jaune-1 : #ffd95c; /* Y & S */ --jaune-2 : #ffeb00; /* F&V*/ --jaune-3 : #e8c44c; /* Y & S 2*/ } /* : gris non purs : */ :root { --gris-200 : var(--obsolete); /* blue gray direct-us */ /* do replace with gris-bleu-clair-3*/ --gris-clair-2 : rgba(245, 245, 245, 0.3); /* transparent */ --gris-clair-5 : #757d96; /* grab-cad */ --gris-sombre : #33333e; --gris-moyen : #4f5464; /* direc-us*/ --gris-anthra : #2e323f; --gris-bleu: #535d7c; /* grab-cad */ --gris-bleu-2 : #252736; /* sem-ji */ --gris-bleu-clair : #d1c7ff; /* direc-us*/ --gris-bleu-clair-2 : #94a3b8; /* direc-us*/ --gris-bleu-clair-3 : #e2e8f0; /* direc-us*/ --gris-beige-transp : #8d795b45; --blanc-transp-81 : hsla(0, 0%, 100%, 0.81); } /* : [DO migrate] anciens gris purs avant renommage : */ :root { --gris: var(--gris-33); --gris-fonce: var(--gris-27); --gris-clair : var(--gris-76); --gris-clair-6 : var(--gris-97); --gris-clair-3 : var(--gris-96); --gris-clair-4 : var(--gris-86); --gris-median : gray; } /* : Pure grays by percent of white % */ :root { --gris-97 : hsl(0, 0%, 97%); --gris-96 : hsl(0, 0%, 96%); /* whitesmoke */ --gris-95 : hsl(0, 0%, 95%); --gris-92 : hsl(0, 0%, 92%); --gris-86 : hsl(0, 0%, 86%); /* gainsboro */ --gris-83 : hsl(0, 0%, 83%); /* lightgray */ --gris-76 : hsl(0, 0%, 76%); --gris-75 : hsl(0, 0%, 75%); /* silver */ --gris-66 : hsl(0, 0%, 66%); /* darkgray */ --gris-50 : hsl(0, 0%, 50%); /* gray */ --gris-41 : hsl(0, 0%, 41%); /* dimgray */ --gris-33 : hsl(0, 0%, 33%); --gris-27 : hsl(0, 0%, 27%); --gris-15 : hsl(0, 0%, 85%); --gris-10 : hsl(0, 0%, 90%); } /* : Gradients :: (names are in EN) */ :root { --deg-violin-1 : linear-gradient(172deg,#64f 50%,#f9d 300%); --deg-violin-2 : linear-gradient(321deg,#c084f8,#4353ff 67%,#391389 94%); --deg-violin-3 : var(--msk-violin-3); /*linear-gradient(321deg,rgba(192, 132,248,0.5),rgba(67,83,235,1) 67%,rgba(57, 19,137,1) 94%);*/ --deg-violin-4 : var(--msk-violin-4); /*linear-gradient(0deg, rgba(102, 68, 255, 0.9), rgba(65, 74, 99, 0.6));*/ --deg-gray-1 : linear-gradient(172deg, #fafafa 50%,#fff 300%); --deg-rose-1 : linear-gradient(172deg,#ff2157 50%,#f9d 300%); --deg-rose-violin-1 : linear-gradient(-90deg,#252d4a,#aa278c 51%,#ffc08c); --deg-rose-orange : linear-gradient(225deg, #ffc63f, #fd3358 49%, #bc35d8); --deg-rose-orange-circles : linear-gradient(225deg, #ffc63f 0%, #fd3358 49%, #bc35d8 100%); --deg-metrics : var(--msk-rose-1); /*rgba(0, 0, 0, 0) linear-gradient(to right, rgba(231, 24, 115, 0.8) , rgba(255, 40, 0, 1)) repeat scroll 0 0;*/ --deg-bkg-mask-white : var(--msk-bkg-white); /*linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9));*/ --deg-orange-violet-1 : linear-gradient(#fa7342 0%,#f9434a 35.96%,#480a69 100%); --deg-bleu-violet-1 : linear-gradient(#8dcde0 0%,#6f75c0 51.75%,#7200aa 90.15%); --deg-vert-bleu-1 : linear-gradient(#50e0c5 0%,#0a0e69 100%); --deg-bleu-violet-2 : linear-gradient(315deg,rgb(122,69,229) 20%,rgb(14,202,212) 100%); } /* : hachures : */ :root { --hat-blanc-gris-1 : repeating-linear-gradient( -45deg, #ffffff, #ffffff 28px, gainsboro 0px, gainsboro 51px ); } /* Masks (transparent gradients) */ :root { --msk-violin-3 : linear-gradient(321deg,rgba(192, 132,248,0.5),rgba(67,83,235,1) 67%,rgba(57, 19,137,1) 94%); --msk-violin-4 : linear-gradient(0deg, rgba(102, 68, 255, 0.9), rgba(65, 74, 99, 0.6)); --msk-violin-5 : linear-gradient(0deg, rgba(71,48,179,0.8), rgba(71,48,179, 0.95)); --msk-rose-1 : linear-gradient(to right, rgba(231, 24, 115, 0.8) , rgba(255, 40, 0, 1)) repeat scroll 0 0; --msk-bkg-white : linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9)); --msk-bkg-white-2 : linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8)); --msk-rose-2 : linear-gradient(to right, rgba(231, 24, 115, 0.8) , rgba(255, 40, 0, 0.8)) repeat scroll 0 0; --msk-rose-bleu : linear-gradient(to right, rgba(231, 24, 115, 0.8) , rgba(0, 202, 255, 0.8)) repeat scroll 0 0; } /* : Shadows :: */ :root { --sha-box : 0px 0px 20px rgba(0,0,0,0.15); --sha-box-2 : 6px 6px 24px rgb(150 150 150 / 30%); --sha-box-3 : 6px 6px 24px rgba(150,150,150,.1); --sha-box-4 : 0 2px 2px 0 rgba(255,33,87,0.14),0 3px 1px -2px rgba(255,33,87,0.2),0 1px 5px 0 rgba(255,33,87,0.12); --sha-box-5 : 0px -10px 27px rgb(170 170 170 / 17%); --sha-box-6 : 0px 0px 20px rgba(0,0,0,0.05); --sha-box-7 : 1px 1px 7px 0px rgba(0,0,0,.13), 0px 0px 2px 0px rgba(0,0,0,.05); --sha-text-1 : 0 0.3rem 0.9rem rgba(0,0,0,.4); /* not used */ } /* Color palettes :: */ /* use defined colors in targets - name vars in EN ( prefix 'color' is omitted) - only colors here :: */ /* : Colors - Base palette */ /* do: include here all new COLOR css vars with defaults on evolves */ :root { --obsolete : magenta; --text : var(--gris-bleu); --text-inv : var(--blanc); --text-disabled : var(--gris-33); --link : var(--violet-600); --link-highlight : var(--bleu-vif); /* do explicit */ --link-hover : var(--violet); /*var(--bleu-vif); */ /*var(--rose);*/ --link-inv : var(--blanc); /* var(--blanc); */ --link-inv-hover : var(--bleu-vif); --link-active : var(--gris-clair); --link-CTA : var(--rose-fluo); --title : var(--bleu-nuit); --citation: var(--violet-sombre); --border: var(--gris-86); --border-hover: var(--gris-bleu-clair-2); --border-active: var(--link); --bullet : var(--text); --card-border : var(--gris-95); --card-bkg : var(--blanc); --card-title : var(--link) ; /*var(--bleu);*/ --card-title-inv : var(--link-hover); /*var(--bleu);*/ --card-desc : var(--gris-fonce); --card-ratio : 16/9; --bkg-1 : var(--bleu-fonce); --bkg-0 : var(--gris-clair-2); --bkg-CTA : var(--rose); --bkg-aplat-1 : var(--deg-gray-1);/*var(--gris-clair-3);*/ --bkg-aplat-2 : var(--violet); /*var(--bleu-nuit-2);/*var(--deg-violin-1); */ /*var(--bleu); */ --bkg-menu : var(--rose); --bkg-footer : var(--gris-anthra); /*var(--gris-bleu-2); var(--bleu-noir)*/ --bkg-form : var(--jaune-vert); --label : var(--gris-66); } /* : Palettes derivatives overrides :: */ /* if derived from derived, add naming level */ /* DO NOT USE DERIVATIVES, as it induces dependecies : use only AUTONOM derivattives only from base palette */ /* Do : merge palette def ; externlize derivatives in another CSS files for easy select / switch ? */ /* Palette A-1 */ :root { zz--link : var(--rose-rouge); zz--title : var(--gris-bleu); zz--title : var(--violet-sombre); --text : var(--bleu-noir); } /* : Palette A-1-1 : */ :root { zz--link : var(--rose); zz--link-hover : var(--rose-rouge); zz--link : var(--bleu-lagon-2); zz--link : var(--violet); zz--link-CTA : var(--link); --bkg-aplat-2 : var(--bleu-fonce-2); zz--bkg-aplat-1 : var(--vert); zz--bkg-footer : var(--vert); zz--link-inv-hover : var(--gris-76); --link-inv-hover : var(--rose); } /* : Palette A-1-1-1 : */ :root { --zztext-inv : var(--gris-92); --bkg-aplat-1 : var(--blanc); --bkg-aplat-2 : var(--violet-600); } /* Typo :: */ /* : Local fonts constants */ :root { --font-local-sans-serif : -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-local-sans-serif-2 : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* not used */ --font-family-sans-serif-3: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace } /* : Default font */ :root { --font-text-default : var(--font-local-sans-serif); } /* : TYPO sets :: */ /* - Keep each set history */ /* DO CORRECT !!! : don't make theme cumulatives ; set only one active once => disable others !!! */ /* : BASE Typo - Default values (typo set A-0) */ /* Don't disabled this ; + do update with NEW CSS VARS created ! */ /* DO NOT USE DERIVATIVES, to make no depency and allow easy switch ; do copy */ /* Note that thoses defs are for default system font definition */ :root { --font-text : var(--font-text-default); --font-text-size : 1.8rem; --font-text-size-mobile : 1.6rem; --font-text-height : 1.6; --font-text-weight : 500; --font-bold-weight: 700; --font-text-letter-spacing : normal; --font-text-feature-settings : normal; --font-title : var(--font-text); /* ie font-family */ --font-title-weight: 800; --font-title-letter-spacing : none; --font-title-1-size : 3rem; --font-title-2-size : 2.28rem; --font-title-3-size : 2.08rem; --font-menu-size: var(--font-text-size); --font-menu-weight: var(--font-text-weight); --font-head-weight : 900; /* means page title h1 */ --font-card-title-size : 1.05em; --font-card-title-weight : 600; --font-card-summary-size : 1em; --font-card-summary-height: 1.4; /* changes from hostinger readability concern ex */ --font-text-size : 2rem; --font-text-weight : 400; --font-text-letter-spacing : 0.3px; --font-bold-weight: 600; --font-head-weight : 700; --font-title-weight: 700; --font-title-letter-spacing : normal; } /* TYPO overrides : */ /* Typo set A-1 : (dev.to) */ :kkroot { --font-text-size : 2rem; --font-text-weight : normal; --font-text-height : 1.5; } /* Typo set B : Inter + Inter with default font fallback*/ :zzroot { --font-text : "Inter", var(--font-text-default); /* 500 */ --font-text-size : 2rem; --font-text-weight : normal; /* 400 */ --font-text-height : 1.5; --font-menu-size: 1.7rem; } /* test B-2 : tail wind inter VAR */ /* do not use Google fonts plugin & disable it ! Use locally font with dedicated CSS */ :kkroot { --font-text : "Inter var", var(--font-text-default); /* 500 */ zz--font-text-letter-spacing: -0.0325em; zz--font-text-letter-spacing: -0.00575em; --font-title-letter-spacing : -0.0325em; --font-text-feature-settings : "cv02","cv03","cv04","cv11"; zz--font-text-size : 2.25rem; --font-text-letter-spacing: -0.12px; --font-text-size : 2rem; --font-text-weight : normal; --font-text-height : 1.5; } /* disabled - Typo set C : Segoe UI 20px + Segoe UI - like wp graph ql */ :zzroot { --font-text-size : 2rem; --font-text-size-mobile : 1.8rem; --font-text-height : 1.4; --font-text-weight : 400; --font-bold-weight: 600; --font-title : inherit; --font-title-weight: 800; --font-menu-size: 2rem; --font-head-weight : 900; --font-card-title-weight : 600; --font-card-summary-height: 1.4; } /* disabled & incomplete - typo set D : Inter + Google sans */ :zzroot { --font-text : "Inter"; /* 500 */ --font-title : "Google Sans"; /* 700, 800, 900 */ --font-text-size : 1.8rem; --font-text-height : 1.6; --font-text-weight : 500; --font-bold-weight: 700; --font-title-weight: 700; --font-menu-size: 1.8rem; --font-head-weight : 900; --font-card-summary-height: 1.4; } /* disabled - typo set E : Montserrat */ :zzroot { --font-text : "Montserrat"; /* 500 */ --font-title : "Montserrat"; /* 700, 800, 900 */ --font-text-size : 1.8rem; --font-text-height : 1.6; --font-text-weight : 500; --font-bold-weight: 700; --font-title-weight: 800; --font-menu-size: 1.8rem; --font-head-weight : 900; --font-card-summary-height: 1.4; } /* DISABLED - typo set A.F test Titillium (aka Cairo) */ :zzroot { --font-title : "Titillium", var(--font-text-default); --font-title-letter-spacing: normal; --font-card-title-weight : 700; --font-card-title-size : var(--font-title-3-size); } /* DISABLED - typo set A.G test Proxima nova */ :zzroot { --font-text : ProximaNova, var(--font-text-default); --font-text-weight : 400; --font-text-size : 1.85rem; --font-text-height : 1.4; } /* ACTIVE TESTING - typo set A.H test coll-ectiv-ework */ :kkroot { --font-text-weight : 400; --font-text-height : 1.5; /*--font-text-letter-spacing : inherit;*/ --font-menu-weight : 500; --font-bold-weight: 600; --font-card-title-weight : 700; /* test : make card titles bolder */ } /* DISABLED - typo set A.H test Sofia pro */ :zzroot { --font-title : SofiaPro, var(--font-text-default); } /* [ACTIVE] - typo set I : Montserrat with no load (svg gator titles inspir)*/ :root { /* added from old Base typo (re copy) - TO CLEAN */ --font-text : var(--font-text-default); --font-text-size : 1.8rem; --font-text-size-mobile : 1.6rem; --font-text-height : 1.6; --font-text-weight : 500; --font-bold-weight: 700; --font-text-letter-spacing : normal; --font-text-feature-settings : normal; --font-title : var(--font-text); /* ie font-family */ --font-title-weight: 800; --font-title-letter-spacing : none; --font-title-1-size : 3rem; --font-title-2-size : 2.28rem; --font-title-3-size : 2.08rem; --font-menu-size: var(--font-text-size); --font-menu-weight: var(--font-text-weight); --font-head-weight : 900; /* means page title h1 */ --font-card-title-size : 1.05em; --font-card-title-weight : 600; --font-card-summary-size : 1em; --font-card-summary-height: 1.4; /* added from previous base sets (re copy) : */ --font-text-letter-spacing: -0.12px; --font-title-letter-spacing : -0.0325em; --font-menu-weight : 500; --font-bold-weight: 600; --font-card-title-weight : 700; /* test : make card titles bolder */ --font-text-size : 2rem; --font-text-weight : normal; --font-text-height : 1.5; /* --end */ --font-text : Montserrat, var(--font-text-default); --font-text-size : 1.8rem; --font-text-weight : 500; --font-title-weight: 800; --font-title-letter-spacing : none; --zzfont-title-1-size : 3rem; --zzfont-title-2-size : 3.1rem; --zzfont-title-3-size : 2.08rem; --title : var(--bleu-gris); /* bad : no color here; just for test */ --font-text-height : 1.6em; /* getastra */ zz--font-text-letter-spacing : -0.025em; --font-card-summary-size : 0.9em; --font-menu-size: var(--font-text-size); --font-card-title-size : var(--font-text-size); --font-text-letter-spacing: -0.412px; } /* disabled - testing... - Overpass font 22px 400 */ :zzroot { --font-text : Overpass, var(--font-text-default); --font-text-weight : 300; --font-text-size : 2rem; --font-menu-size: var(--font-text-size); } /* DISABLED TEST - typo set I.1 : Figtree (searchwp inspir) */ :zzzzzroot { --font-text : Figtree, var(--font-text-default); --font-text-letter-spacing: 0.25px; } /* disabled TEST typo set J.1 : Lexend / Lando inspir */ :zzroot { --font-text : Lexend, var(--font-text-default); --font-text-weight : 300; } /* Other vars (no color, no typo) :: */ :root { --button-border-width : 3px; } /* HTML :: */ ::selection { background: var(--violet); color: var(--blanc); } html { font-size: 62.5%; accent-color: var(--violet); } body { color: var(--text); font-family: var(--font-text); font-size: var(--font-text-size); font-weight: var(--font-text-weight); line-height: var(--font-text-height); text-rendering: optimizeLegibility; letter-spacing : var(--font-text-letter-spacing); font-feature-settings: var(--font-text-feature-settings); } @media screen and (max-width: 480px) { body { font-size: var(--font-text-size-mobile); } } a { color: var(--link); } a:hover { color: var(--link-hover); } /* a in contents */ p a , li a { color: var(--link); } /* * Theme - Hueman ::: * */ /* : thm resets :: */ /* : thm hueman reset font */ .entry { font-size: inherit; font-family: var(--font-text); line-height: var(--font-text-height); } .entry dt { color: inherit; } .entry strong { font-weight : var(--font-bold-weight); } /* remove blank line before footer 1px */ .boxed #page { padding-bottom: 0; } /* : thm header styles :: */ .site-description { zztext-transform: uppercase; zline-height: 3em; zzfont-size: 19px; font-style: normal; zzvertical-align: bottom; letter-spacing: 1.5px; zzmargin-top: 6px; zzcolor: white; color: var(--text); font-size: inherit; } #header { zzbackground: #3b8dbd none repeat scroll 0 0; zzbackground: white none repeat scroll 0 0; } /* : sizing site title img */ .site-title { padding: 0; } .site-title a img { zzmax-height: 1.3em; max-height: 1em; } /* : spacing site title + logo*/ #header .group.pad { zzpadding:15px 0px 6px 30px; padding: 1em 2em; } /* : pages styles */ .page-title { font-size: inherit; background: none; zzpadding-top: 0; padding-left: 2.2em; zzmargin-top:0; zzmargin-top:-1.2em; line-height: var(--font-text-height); border:none; } .page-title h1 { color : var(--text); font-size: 0.85em; font-weight: var(--font-text-weight); color: var(--title); } /* : blog styles */ .single-post .content .entry { max-width: 800px; zzfont-size: 1.1em; margin: auto; text-align: left; } /* : post author */ .post-byline { zztext-align: center; margin: 0em auto 3em; max-width: 800px; text-align: left; text-transform: capitalize; margin: 0em auto 2em; } /* : blog titles h1 */ .post-title , .single .post-title { zztext-transform: uppercase; font-size: min(1.6em,1em + 1.5vw); font-weight: var(--font-head-weight); color: var(--title); } /* : blog post titles h1 */ .single:not(.single-glossary) .post-title { text-transform: none; text-align: left; zzfont-weight: normal; font-family: var(--font-title); zzmargin: 1em auto 0.25em; max-width: 800px; margin-left : auto; margin-right: auto; } /* glossary styles :: */ .single-glossary .post-title { font-size: 1em; text-transform: uppercase; font-family : var(--font-text); font-weight: var(--font-text-weight); } .single-glossary .page-title { display: none; } /* realisations + recommandation articles style :: */ /* hide ... date ? */ .category-realisation .post-byline , .category-recommandation .post-byline { display: none; } /* recommandations : center h1 */ .single .category-recommandation .post-title { text-align : center; margin-bottom: 2em; } /* realisation : center h1 */ .single .category-realisation .post-title { text-align : center; zzmargin-bottom: 2em; } /* test : hide all cat links in posts */ /* could style it as lable too... */ .meta-single { display: none; } /* : in page content styles :: */ /* : pages titles :: */ .entry h1 ,.entry h2 ,.entry h3 ,.entry h4 ,.entry h5 ,.entry h6 { font-weight: var(--font-title-weight); line-height: 1.3em; zzline-height: var(--text-height); text-transform: none; color: var(--title); font-family: var(--font-title); zzletter-spacing: 0.1px; margin: 1.618em 0 0.618em 0; /* ideal margin for inner content ; manage not alone titles, with icons for example, reducing spacings...study how*/ zzletter-spacing: -0.5px; letter-spacing: var(--font-title-letter-spacing); } /* : default sizes */ .entry h2 { font-size: var(--font-title-2-size); } .entry h3 { font-size: var(--font-title-3-size); } .entry h4 { font-size: 1rem; } .entry h5 { font-size: 1rem; } .entry h6 { font-size: 1rem; } /* : set spacing for consecutives titles */ .entry h2 + h3 , .entry h3 + h4 , .entry h4 + h5 , .entry h5 + h6 { margin-top: 1em; } /* : set links colors in titles */ .entry a h2 , .entry a h3 , .entry a h4 , .entry a h5 , .entry a h6 { color: var(--link); } .entry a:hover h2 , .entry a:hover h3 , .entry a:hover h4 , .entry a:hover h5 , .entry a:hover h6 { color: var(--link-hover); } /* : titles styles for articles */ .single-post .entry h1 ,.single-post .entry h2 ,.single-post .entry h3 ,.single-post .entry h4 ,.single-post .entry h5 ,.single-post .entry h6 { /* margin: 1.6em 0 1em; */ /* disabled cause card bug */ } /* : ul li list styles : */ .entry ol, .entry ul { margin: 1em 0 1em 1.65em; } /* : spacings in nested ul */ zz.entry ul ul { margin-bottom: 0; margin-top: 0; } .entry ol ol , .entry ol ul , .entry ul ul , .entry ul ol { margin-top: 0.5em; margin-bottom: 1em; } /* restore natural puces styles */ .entry ul li, .entry ol ul li { list-style-type : initial; } .entry ul li , .entry ol ul li , .entry ol li { } .entry ul li:not(:last-child) , .entry ol ul li:not(:last-child) , .entry ol li:not(:last-child){ zzmargin-bottom: 10px; margin-bottom: 0.5em; } /* lists with no bullets */ .entry .no-bullet ol , .entry .no-bullet ul { margin-left: 0.5em; margin-top:1.5em; } .entry .no-bullet ul li , .entry .no-bullet ol li{ list-style: none; } .no-bullet li i.material-icons-outlined { color: var(--bullet); } .no-bullet li i.fa { color: var(--bullet); font-size: 90%; zzmargin-right: 0.4em; } /* vertical centered bullets */ .centered li { display: flex; align-items: center; } .centered li i.material-icons-outlined { margin-right: 10px; } .centered li i.fa { margin-right: 15px; } /* : thm menu styles :: */ /* nav menu font reset */ #nav-header { } /* thm remove border above menu */ #nav-header.nav-container { -webkit-box-shadow: none; box-shadow: none; } /* nav menu size reset - maybe in double */ #nav-header .nav li { } /* main menu */ #nav-header.nav-container { zzbackground-size: cover; } /* menu items styles */ #nav-header .nav li a { text-transform: none; color: var(--link-inv); letter-spacing: normal; font-family: var(--font-text); font-weight: var(--font-menu-weight); font-size: var(--font-menu-size); } /* : menu mobile styles */ @media screen and (max-width: 719px) { /* DISABLED display logo in background */ #zznav-header.nav-container { background-color: var(--link-CTA); background-image: url('/wp-content/uploads/2015/09/webexpress-logo-2020-v-1-no-halo-inv-vecto.svg'); background-size: auto 40px; background-repeat: no-repeat; background-position: 10px 5px; } /* hide top menu */ #nav-topbar { display : none; } /* hide logo placeholder */ #header .container-inner div.group.pad { display: none; } } #header .container-inner { } /* mobile logo for mobile logo */ .nav-text { float: inherit; padding:0; } .nav-text img { height: 30px; margin-top: 10px; margin-left: 10px; } #nav-header .nav li.current-menu-item > a { zzcolor: var(--gris-clair-3); opacity: 1; } @media only screen and (min-width: 720px) { #nav-header .nav ul { background: var(--bkg-1) url(img/opacity-10.png) repeat; } } /* top header menu color*/ #nav-topbar .nav li a { color: rgba(255,255,255,0.9); color: var(--obsolete); } #nav-topbar.nav-container { background-color: rgba(255,140,0,0.85) !important; background-color: var(--obsolete) !important; } /* : detect h1 in content (excluding title & hero title) - fail on pahe title disabled */ .logged-in .content h1:not(.post-title):not(.hero-title):not(.page-title) { zzcolor: magenta ! important; } /* HOME styles :: */ /* hide home header?*/ .home .page-title { display: none; } .zzhome #header .pad { display: none } .home #header #nav-topbar { zzbackground-color: #e71873 !important; background: white !important; } .home #header #nav-topbar a { zzcolor: #444444; } /* hide home menu */ .zzhome #header #nav-header { display: none; } .home .content .pad { padding: 0; } .home .bkg-svc .block.services-list-rand { background-color: transparent; } .home #header #nav-topbar, #nav-topbar.nav-container { zzbackground-color: : rgba(231, 24, 115, 0.7); zbackground: url('/wp-content/uploads/2016/01/kamikz.svg'), url('/wp-content/uploads/2015/12/bg-rays-horizon.jpg') !important; background-attachment: scroll; background-position: bottom left; background-color: rgb(231, 24, 115) !important; background-color: var(--obsolete) !important; } .home #header #nav-topbar a { color: var(--obsolete); } /* ELA Common Styles :: */ /* flat lists */ .ela-flat-list ul { list-style: disc; } .ela-flat-list ul li { display: inline-block; list-style: disc; } /* above subtitles links styles : ( 'sup titles' !) */ .entry .block-subtitle { text-transform: uppercase; zzletter-spacing: 3px; font-size: 0.8em; zzfont-weight: 600; zzdisplay: none; color: var(--text); letter-spacing: inherit; margin-bottom: 1em; letter-spacing: 0.075em; } /* test OK blank lines responsive */ .logged-in .entry p.ela-line { border-top: 1px dotted gainsboro; border-bottom: 1px dotted gainsboro; zzbackground-color: gray; zzbackground: repeating-linear-gradient( -135deg, #ffffff, #ffffff 28px, gainsboro 0px, gainsboro 51px ) !important; background: repeating-linear-gradient( -135deg, #ffffff, #ffffff 28px, hsl(0,0%,96%) 0px, hsl(0,0%,96%) 51px ) !important; zzbackground-image: repeating-linear-gradient( -45deg, transparent, transparent 20px, gray 20px, gray 40px ); } @media only screen and (max-width: 480px) { .entry p.ela-line { margin-bottom: 0; } } /* debug blocks */ .debug { display: none; } .logged-in .debug { display: inherit; color: magenta; zzborder: 3px dotted magenta !important; background-color: rgba(255, 0, 131, 0.08); background-color: crimson; /* materialize as obsolete to force to remove */ } /* draft blocks */ /* WRNING : DANGEROUS for SEO ? => replace with [draft] shortcode evenrywhere (so we mark it with full red to highlight parts to change) */ .draft { display: none; } .logged-in .draft { display: inherit; border: 3px dotted magenta !important; zzbackground-color: rgba(255, 0, 131, 0.08); background-color: crimson; /* materialize as obsolete to force to remove */ } .ela-lorem { display: none; } .logged-in .ela-lorem { zzborder: 1px dotted magenta; display: inherit; word-spacing: 0.2em; background-color: crimson; /* materialize as obsolete to force to surround with draft shortcode */ } .logged-in .ela-lorem.lines-1 { overflow: hidden; height: 1.3em; display: block; } .logged-in .ela-lorem.lines-2 { overflow: hidden; height: 2.9em; display: block; } .logged-in .ela-lorem.lines-3 { overflow: hidden; height: 4.3em; display: block; } .logged-in .ela-lorem span { background: #eee; border-radius: 3px; color: #eee; font-size: .95rem; /* letter-spacing: .2rem; */ /* word-spacing: 2em; */ zzline-height: 2em; transition: all .3s linear; padding: 0 0.5em 0 0; } .logged-in .ela-lorem:hover { word-spacing: inherit; } .logged-in .ela-lorem:hover span { color: inherit !important; background: inherit; border : none; font-size: inherit; padding: 0; line-height: 1.6em; } .txt-major { zztext-transform:uppercase;font-zzweight:100;font-size:1.15em;letter-spacing:0px; font-weight: 600; } .zzentry img:first-of-type:not(.wc-shortcodes-entry-thumbnail):not(.head-img){ border: 1px dotted magenta; } /* hide block */ .hide { display: none !important; } .logged-in .hide { display: revert !important; background: rgba(0,125,0,0.1) !important; zzbackground: repeating-linear-gradient( -45deg, #ffffff, #ffffff 28px, gainsboro 0px, gainsboro 51px ) !important; background-color: crimson !important; /* materialize as obsolete to force to remove */ border: 3px dotted crimson !important; } /* hide : on wide screens */ @media only screen and (min-width: 720px) { .w-hide { display: none; } } /* hide : on mobile only */ @media only screen and (max-width: 480px) { .m-hide { display: none; } } hr.clear { visibility: hidden; clear: both; margin: inherit; } .align-center { text-align: center; margin:auto; } .block-center { margin:auto; } .align-left { text-align: left !important; margin:inherit; float: left; } .align-right { float: right; margin:inherit; } .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .text-justify , .align-justify , .justify { text-align: justify; } /* Boxing :: */ .width-75 , .w75 { width: 75%; } .width-150p , .w150 { max-width: 150px; } .width-150p img , .w150 img { width:100%; } .width-250p , .w250 { max-width: 250px; } .width-350p , .w350 { max-width: 350px; } .width-300p , .w300 { max-width: 300px; } .width-400p , .w400 { max-width: 400px; } .width-500p , .w500 { max-width: 500px; } .width-500p img , .w500 img { width:100%; } .width-600p , .w600 { max-width: 600px; } .width-700p , .w700 { max-width: 700px; } z.width-600p img , z.w600 img { width:100%; } .width-800p , .w800 { max-width: 800px; } .width-900p , .w900 { max-width: 900px; } .width-1000p , .w1000 { max-width: 1000px; } .width-1200p , .w1200 { max-width: 1200px; } /* boxing materialize */ .logged-in .w150 , .logged-in .w250 , .logged-in .w300 , .logged-in .w350 , .logged-in .w400 , .logged-in .w500 , .logged-in .w600 , .logged-in .w700 , .logged-in .w800 , .logged-in .w900 , .logged-in .w1000 , .logged-in .w1200 { border: 1px dashed lightgreen; } /* img styles - partial : group here*/ /* img force height : */ .img-h2 img , img.img-h2 { max-height: 2em; } .img-h3 img , img.img-h3 { max-height: 3em; } .img-h4 img , img.img-h4 { max-height: 4em; } .img-h5 img , img.img-h5 { max-height: 5em; } .img-h6 img , img.img-h6 { max-height: 6em; } .img-h10 img , img.img-h10 { max-height: 10em; } .img-h14 img , img.img-h14 { max-height: 14em; } /* no img prefix */ .h1 img , img.h1 { height:100em; max-height: 1em; } .h2 img , img.h2 { height:100em; max-height: 2em; } .h3 img , img.h3 { height:100em; max-height: 3em; } .h4 img , img.h4 { height:100em; max-height: 4em; } .h5 img , img.h5 { height:100em; max-height: 5em; } .h6 img , img.h6 { height:100em; max-height: 6em; } .h8 img , img.h8 { height:100em; max-height: 8em; } .h10 img , img.h10 { height:100em; max-height: 10em; } .h14 img , img.h14 { height:100em; max-height: 14em; } .h20 img , img.h20 { height:100em; max-height: 20em; } /* not used */ .height-20 { max-height: 20em; overflow: hidden; } .height-20.bottom img { } .height-2 { max-height: 2em; overflow: hidden; } .img-left { margin: 0 1em 1em 0; float:left; } /* :img force width */ .w3 img , img.w3 { width:100em; max-width: 3em; } /* plg fa sizes */ .fa-h3 .fa { font-size: 3em; margin-bottom: 0.07em; } .fa-h6 .fa { zzfont-size: 5.45em; font-size: 6em; margin-bottom: 0.07em; } .fa-h4 .fa { zzfont-size: 5.45em; font-size: 4em; margin-bottom: 0.07em; } /* FA icons size */ .fa-7x { font-size: 7em !important; } .fa-10x { font-size: 10em !important; } /* thm Hueman - Blockquotes */ .entry blockquote { zzcolor: var(--text); margin: 0 0 0 0; padding: 1em 2em; zzfont-style: italic; letter-spacing: 0.4px; color: var(--citation); font-style: italique; zzborder-left: 5px solid var(--citation); padding: 0.75em 0 0.5em 1.25em; margin: 2em 0; line-height: 1.4em; font-weight: 500; /*new 23*/ border-left: 2px solid var(--citation); padding: 0.6em 0 0.08em 1.2em; margin: 2em 0; font-weight: normal; font-size: inherit; letter-spacing: normal; line-height: inherit; } .entry blockquote p:before { zzcontent: ""; zzcontent: ""; font-family: "dashicons"; font-family: "FontAwesome"; font-size: inherit; padding-right: 0.3em; color: var(--gris-clair); } /*cancel initial icon*/ .entry blockquote::before { content: ""; } .entry blockquote p { zzfont-weight: 400; } .entry blockquote p:before { color: var(--gris); } /* disabled -- speech ballons - custom speech ballons : SB , similar as cartoons */ /* .entry div.rightSB::after { border-right: 14px solid rgba(0, 0, 0, 0); border-top: 14px solid rgb(72, 173, 216); bottom: -14px; content: " "; display: block; height: 0; position: absolute; right: 20px; width: 0; } .entry div.rightSB { background: rgb(72, 173, 216) none repeat scroll 0 0; border-radius: 2px; color: rgb(255, 255, 255); float: right; font-family: "Raleway",sans-serif; font-weight: 300; margin: 1em 0 0.5em 1em; max-width: 38%; padding: 0.5em 1em; position: relative; } .entry div.rightSB p { margin-bottom: 0.5em; } */ /* ELA button styles :: */ .button { text-align: center; display: inline-block; /* test */ margin: 0 0.5em 0 0; } /* old */ zzdiv.button a { zzfont-weight : 500; display: inline-block; zzfont-size: 0.9em; font-size: 0.8em; letter-spacing: 0.8px; line-height: 1em; text-align: center; zztext-transform: uppercase; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition: all .3s ease-out; text-shadow: none; border-radius: 10em; border: 3px solid var(--link); zzpadding: 1em 1.2em 1em; padding: 0.8em 1em 0.8em; padding: 0.9em 1.1em 0.9em; margin: 1em 0; background-color: var(--text-inv); color: var(--link); } div.button a { display: inline-block; font-size: 0.8335em; letter-spacing: normal; line-height: 1em; text-align: center; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); transition: all .3s ease-out; text-shadow: none; border-radius: 20em; border: var(--button-border-width) solid var(--link); zzpadding: 1em 1.2em 1em; padding: 0.75em 1em 0.8em 1.2em; margin: 1em 0; zzbackground-color: var(--text-inv); color: var(--link); font-weight: 600; zzpadding: 0.9em 1.15em 0.875em; } div.button a:hover { zzbackground-color: var(--link-hover); color: var(--link-hover); box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); border-color: var(--link-hover); } div.button a i.fa { color: var(--link); } div.button a:hover i.fa { color: var(--link_inv); } .button.no-center { text-align: initial; } /* specific buttons */ .button .contact { text-align: center; } /* inverted button for dark bkg */ div.button.invert a { background-color: var(--link-inv); color: var(--link-highlight); zzborder-color: #3b8dbd; box-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.2), 0 2px 10px 0 rgba(255, 255, 255, 0.2); } div.button.invert a:hover { color: var(--link-inv); background-color: var(--link-highlight); border-color: var(--text-inv); } div.button.invert a i.fa { color: var(--link); } div.button.invert a:hover i.fa { color: var(--link-inv); } /* CTA button - WRN must override std button that is small */ div.button.CTA a { zztext-transform: uppercase; zzbox-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition: all .3s ease-out; padding: 0.9em 1.15em 0.875em; background-color: var(--text-inv); /* up = imported*/ zzbackground-color: var(--link-CTA); color: var(--link-CTA) !important; border-color: var(--link-CTA); letter-spacing: 0.6px; font-size: inherit; font-weight: bold; } div.button.CTA a i.fa { color: var(--text-inv); } div.button.CTA a:hover { color: var(--text-inv) !important; background-color: var(--link-CTA); zzbox-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.2), 0 2px 10px 0 rgba(255, 255, 255, 0.2); } div.button.CTA a i.fa { } div.button.CTA a:hover i.fa { color: var(--link-CTA); } /* remove external link icon in button */ .button a.ext-icon-4 { background-image: none; } /* disabled - button extra styles : degradé orange */ /* zzdiv.button a { box-shadow: 2px 1000px 1px #181828 inset; box-shadow: 2px 1000px 1px var(--link-highlight) inset; border: solid 4px transparent; background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #ff9800, #d0212b); background-origin: border-box; transition: .3s; max-height: 42px; border-radius: 1000px; color: #fff; } */ /* cite in blockquotes */ blockquote cite { display: block; zzfloat:right; font-style: normal; zzcolor: dimgray; font-size: 0.9em; font-weight:700; } blockquote cite:before { content: "— "; } /* ELA - Highlight box (do:change name) */ .highlight { zzbackground-color: var(--gris-clair-3); zzpadding: 1.4em 1em 0.5em 1.7em; padding: 1.4em 3%; border-radius: 14px; color: inherit; border: none; zzmargin-top: 2em; margin-bottom: 1em; border: 1px solid transparent; /* no border with box shadow */ zzborder: 3px solid var(--link); box-shadow: var(--sha-box); zzmargin: 2em 0.5em; zzborder: 1px solid #f7f7f7; zzbackground-color: #f7f7f7; zzborder: 1px solid var(--violet); zzbox-shadow:unset; position: relative; zzpadding: 3em 3em 2em; zz-fail--padding: max(1.5em, 10%) max(1.5em, 7%) max(0em, 5%); padding: 4rem; padding: min(4rem, calc(7% + 0.25em)); margin-top: 1em; zzborder: 1px solid var(--border); /* test for better display with no vertical spacing on mobiles (temp patch)*/ } /* patch */ .highlight.marged { margin: 1em 0.65em; } .highlight.auto-adjust { display: inline-block; margin-top: 1em; } /* remove extra padding with wc posts - maybe see gutter parameter instead ? */ .highlight .wc-shortcodes-posts-template-borderless .wc-shortcodes-post-box .wc-shortcodes-post-border { padding-bottom: 0; } .highlight.no-margin { margin: 0; } @media screen and (max-width: 480px) { .highlight { border: 1px solid var(--border); /* test for better display with no vertical spacing on mobiles (temp patch)*/ --sha-box: none; padding: 0.5em; border: none; padding: 0; /* 2026 04 remove excessif margin patch on mobile ; maybe bug if no aplat ? => check */ } } /* content block PLG :: */ .content_block { /* nothing special ; class called in div rendered by content bloc plugin block */ } .logged-in .content_block { border: 1px dashed cyan; } .content_block_info { display: none; } .logged-in .content_block:hover .content_block_info { display: block; zzcolor: green; font-size: 0.8em; font-family : "Courier New"; text-align: right; } /* ELA - blocks */ .block {} /* blocks / parts styles def :: (cf bkg, same goal but less semantic */ .block.services-list-rand { zzmargin: 4em 0 0; zzpadding:3em; zzpadding : 3em 0; zzbackground-color:var(--gris-clair-6); } .block.related-services { zborder: 3x dotted yellowgreen; zpadding: 1.5em 1em 0; margin: 2em 0 2em 0; background-color: #fcfcfc; background-color: var(--obsolete); border-radius: 5px; padding: 1em 0 0.5em 0; } .block.related-services .wc-shortcodes-post-border { margin-bottom: 0; padding-bottom: 0; } .block.related-services.first-is-parent .wc-shortcodes-posts div:first-child .wc-shortcodes-entry-title a { /* FAILS */ zzbackground-color: crimson; } .block.related-services .related-title { zfloat:left; zdisplay:inline-block; zline-height:5em; padding: 1em 0 0 1em; } zz.block.related-services .wc-shortcodes-posts.wc-shortcodes-posts-layout-grid .wc-shortcodes-post-box { margin-bottom: 0; } /* ELA CTA block */ .block.CTA { border: 5px solid whitesmoke; border-radius: 5px; padding: 4em 3em 1em; margin-top: 2em; margin: 2em auto 2em auto; display: block; max-width: 500px; text-align: center; } .block.CTA img { max-height:4em; display:block; margin: 0 auto 1em; } /* disabled reset for no button style */ /* zz.block.CTA .button { background-color: inherit; border: 0px solid transparent; } zz.block.CTA .button a { text-transform : inherit; font-size: 1em; color: #3b8dbd; border: 0px solid transparent !important; border-radius: none; letter-spacing: inherit; line-height: inherit; margin: 0.5em 0 1em; padding: inherit; text-align: center; background-color: inherit; border-color: transparent; box-shadow: none; text-shadow: none; } */ /* disabled hidden OBS CTA block for end of pages & articles : test 2 */ /* .block.CTA2 { display: none; border: 5px solid whitesmoke; border-radius: 5px; padding: 4em 3em 1em; margin-top: 2em; margin: 2em auto 2em auto; zzdisplay: block; max-width: 500px; text-align: center; background-color: yellowgreen; } .zzblock.CTA2 .inner { max-width: 600px; margin: 0 auto; text-align: center; zfont-weight: bold; font-weight: 500; } .block.CTA2 .inner img { max-height:4em; display:block; margin: 0 auto 1em; } .block.CTA2 div.button a:hover { background-color: #1e90ff; color: white; } */ /* detect obsolete CTA block v2 */ .logged-in .block.CTA2 { border: 3px dashed magenta; display: inherit; zzbackground: magenta; background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, yellowgreen 20px, whitesmoke 40px); } /* disable ALL CTA blocks */ .block.CTA , .block.CTA2 { display: none; } /* disable CTAs in pages */ .page .content .block.CTA { display: none; } .logged-in.page .content .block.CTA { display: inherit; border: 3px dashed magenta; background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, gray 20px, whitesmoke 40px); } /* ELA misc */ .ela-works-new ul { list-style: none; } .ela-works-new ul li { display: inline-block; margin: 1.5em; text-align: center; } .ela-works-new img { max-height:3em; margin: auto; display: block; } .contact-site-slogan { text-transform: uppercase; } .home-site-slogan { text-transform: uppercase; } .maps { /*not used*/ width: 100%; height: 250px; } /* */ .su-quote-inner img { width : 100px; border: 1px solid whitesmoke; border-radius : 50%; float: left; margin: 0 1em 1em 0; } .wp-image-621 { transition: transform .8s; } .wp-image-621:hover { -ms-transform: rotate(-15deg); /* IE 9 */ -webkit-transform: rotate(-15deg); /* Chrome, Safari, Opera */ transform: rotate(-15deg); transition: transform .8s; } .home-email-form { width : 600px; border: 1px solid gray; } /* CF7 styles :: */ .wpcf7 { font-size: inherit; } .wpcf7::placeholder { color: var(--gris-50); zzfont-style: italic; zzfont-size: 0.9em; } .invert .wpcf7::placeholder { color: var(--text-inv); zzfont-style: italic; zzfont-size: 0.9em; } .wpcf7 .wpcf7-text , .wpcf7 .wpcf7-captchar, .wpcf7 .wpcf7-textarea , .wpcf7 input[type="tel"] , .wpcf7 input[type="text"] , .wpcf7 input[type="email"] , .wpcf7 input[type="password"] { background: none; padding-left: 1.5em; font-size: inherit; color: var(--text); border: 1px solid var(--border); border-radius: 0.5em; } .wpcf7 .wpcf7-textarea { zzborder-left: 1px solid var(--gris-clair-4); } .wpcf7 .wpcf7-text:focus, .wpcf7 .wpcf7-captchar:focus, .wpcf7 .wpcf7-textarea:focus , .wpcf7 input[type="tel"]:focus, .wpcf7 input[type="email"]:focus, .wpcf7 input[type="password"]:focus, .wpcf7 input[type="text"]:focus { zzborder-left: 3px solid var(--bleu-lagon); zzborder-left: 3px solid var(--link-highlight); zzcolor: var(--link-highlight) !important; color: var(--text) !important; zzborder-color: var(--link-highlight) !important; border-color: var(--link) !important; box-shadow : none !important; } .wpcf7 .wpcf7-text:hover, .wpcf7 .wpcf7-captchar:hover, .wpcf7 .wpcf7-textarea:hover , .wpcf7 input[type="tel"]:hover, .wpcf7 input[type="email"]:hover, .wpcf7 input[type="password"]:hover, .wpcf7 input[type="text"]:hover { zzcolor: red !important; } /* CF7 issue padding on tel input*/ .wpcf7 input[type="tel"]{ display: block; float: left; padding: 10px; width: 100%; } .wpcf7 input[type="submit"] { font-size : inherit; /*patch*/ font-weight: var(--font-text-weight); display: inline-block; zzfont-size: 0.9em; zzletter-spacing: 0.6px; line-height: 1em; text-align: center; zztext-transform: uppercase; background-color: var(--link-inv); color: var(--link); box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); transition: all .3s ease-out; text-shadow: none; border-radius: 3px; zzfont-weight: 400; padding: 0.8em 1.5em; margin: 1em 0; zzborder: 0px solid var(--link); width: auto; float: inherit; border-radius: 20em; border: var(--button-border-width) solid var(--link); line-height: 0.8em; padding: 0.8em 1.1em; } .wpcf7 input[type="submit"]:hover { background-color: var(--link); color: var(--link-inv); zzborder: 3px solid var(--link-hover); opacity: 1; box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); } /* CF7 validation styles */ .wpcf7 span.wpcf7-not-valid-tip { top: 5em; line-height: 1em; height: 0.9em; overflow: hidden; padding: 0.2em 0.5em; background: rgba(255,255,255,0.3); color: var(--rouge); display: contents; font-size: 0.8em; font-style: italic; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { border: none; display: contents; font-size: 0.8em; font-style: italic; } /* CF7 ela quizz.php ELA modified */ /* hide label as placeholder is enough */ .wpcf7-quiz-control label { display : none; } @media only screen and (max-width: 480px) { .wpcf7 input[type="text"].wpcf7-quiz { padding-left: 0.5em; font-size:0.7em; line-height: 1.7em; } } /* CF7 FA icons for labels ---------------------------------- */ .wpcf7 .wpcf7-text, .wpcf7 .wpcf7-textarea{ text-indent: 25px; } .wpcf7 p { position: relative; } .wpcf7 p .fa { position: absolute; color: var(--border); z-index: 100; font-size: 1.3em; top: 20px; left: 10px; } .wpcf7 p .fa:focus, .wpcf7 p .fa:active, .wpcf7 p .fa:hover { zzcolor: rgb(59, 141, 189); } /* CF7 date picker special */ .wpcf7 input[type="text"].wpcf7-date { zpadding-left: 40px; border: 0; } input.wpcf7-date { zzborder: 0; font-size: 1em; zzmargin: 1em 0 0 -6em; } /* CF7 messages - correct sizes -- */ .wpcf7 .wpcf7-response-output { font-size: 1.2rem; color: var(--rouge); } /* CF7 test wpcf7 btn -- FAILS */ #icon-submit { position: relative; z-index: 1; left: -6.5em; top: 3px; color: var(--text-inv); cursor: pointer; width: 0; } p#ela-icon-submit input.wpcf7-form-control.wpcf7-submit { padding: 0.5em 2em 0.5em 3em; } /* CF7 home form for email CTA -- do : replace with non home class for use everywhere*/ .home-form-email {} .home-form-email form { text-align: center; margin: auto; width: 450px; max-width:90%; } .home-form-email form p { border: 1px solid rgb(231, 24, 115); padding: 4px; border-radius: 3px; } .home-form-email form .wpcf7-email , .home-form-email form .wpcf7-tel { width :300px; max-width: 70%; margin: 0; border: 0px solid gray; } .home-form-email form input[type="submit"] { zmargin-top: 2px; margin-right: -70px; zzbackground-color: #1e90ff; background-color : var(--obsolete); margin-top: 1px; font-weight: normal; } .home-form-email form input[type="submit"]:hover { zzbackground-color: #e71873; background-color : var(--obsolete); } .home-form-email .wpcf7 p .fa { left: 13px; top: 13px; zzcolor: #ff3370; color : var(--obsolete); } /* : CF7 - contact form style */ .ela-cf7-contact { } .ela-cf7-contact .wpcf7 p .fa { font-size: 1em; top: 1.7em; left: 0.85em; } /* : form elements styles */ .ela-cf7-contact .wpcf7 .wpcf7-text , .ela-cf7-contact .wpcf7 .wpcf7-captchar , .ela-cf7-contact .wpcf7 .wpcf7-textarea , .ela-cf7-contact .wpcf7 input[type="tel"] , .ela-cf7-contact .wpcf7 input[type="text"] , .ela-cf7-contact .wpcf7 input[type="email"] , .ela-cf7-contact .wpcf7 input[type="password"] { background: none; zzborder: 1px solid var(--border); zzborder: 1px solid var(--gris-76); border-radius: 0.4em; zzpadding-left: 1.1em; font-size: inherit; color: var(--text); padding: 0.85em 0.75em 0.75em 1.1em; font-weight: var(--font-text-weight); zzborder: 1px solid var(--gris-bleu-clair-3); zzborder: 1px solid var(--gris-bleu-clair-2); border: 1px solid var(--border); zzbackground-color: #f1f1f196; zzborder: none; border: 1px solid var(--gris-76); background-color: var(--blanc); } .ela-cf7-contact .wpcf7 input[type="submit"] { width: 100%; margin-bottom: 0; font-size: 1em; } .ela-cf7-contact .wpcf7 input[type="text"].wpcf7-quiz { font-size:0.75em; } /* : ajax loader position bug */ .ela-cf7-contact .wpcf7 .ajax-loader { position: absolute; bottom: 1em; } /* : focus styles : */ .ela-cf7-contact .wpcf7 .wpcf7-text:focus, .ela-cf7-contact .wpcf7 .wpcf7-captchar:focus, .ela-cf7-contact .wpcf7 .wpcf7-textarea:focus , .ela-cf7-contact .wpcf7 input[type="tel"]:focus, .ela-cf7-contact .wpcf7 input[type="email"]:focus, .ela-cf7-contact .wpcf7 input[type="password"]:focus, .ela-cf7-contact .wpcf7 input[type="text"]:focus { zzborder-color: var(--link-highlight); zzcolor: var(--link-highlight) !important; zzbox-shadow : none !important; border-color: var(--border-active) !important; color: var(--text) !important; zzbox-shadow: 0 0 .25rem 0 var(--bleu-gris-clair) !important; zzbox-shadow: 0 0 0 0.2rem rgba(153,102,0,0.25) !important; box-shadow: 0 0 0 0.2rem var(--border-active) !important; } /* : hover styles : */ .ela-cf7-contact .wpcf7 .wpcf7-text:hover, .ela-cf7-contact .wpcf7 .wpcf7-captchar:hover, .ela-cf7-contact .wpcf7 .wpcf7-textarea:hover , .ela-cf7-contact .wpcf7 input[type="tel"]:hover, .ela-cf7-contact .wpcf7 input[type="email"]:hover, .ela-cf7-contact .wpcf7 input[type="password"]:hover, .ela-cf7-contact .wpcf7 input[type="text"]:hover { zzborder-color: var(--link-highlight); zzcolor: var(--link-highlight) !important; zzbox-shadow : none !important; border-color: var(--border-hover); } /* : styles for form with bkg : */ .ela-cf7-contact { background-color: var(--bkg-form); } .ela-cf7-contact .wpcf7 .wpcf7-text , .ela-cf7-contact .wpcf7 .wpcf7-captchar , .ela-cf7-contact .wpcf7 .wpcf7-textarea , .ela-cf7-contact .wpcf7 input[type="tel"] , .ela-cf7-contact .wpcf7 input[type="text"] , .ela-cf7-contact .wpcf7 input[type="email"] , .ela-cf7-contact .wpcf7 input[type="password"] { border-color: transparent; } /* plg WC shortcodes -- wc posts :: */ /* do : prefix new classes for this plugin with : wcs */ /* : manage line between items SPACING :: */ /* test - remove default too large bottom margin (wrn : this is not the gutter ) ; useful for single cards or mono line cards : */ /* BAD USE of shortcode itself ? Set gutter param to zero instead ? NO, this is not the gutter ; and this parameter does not exist in wc shortcode */ .wc-shortcodes-posts.wc-shortcodes-posts-layout-grid .wc-shortcodes-post-box { margin-bottom: 0; } /* : define wc posts vertical spacing (NOT the gutter arg !!!) with CSS : */ .wcs-spc-h1 .wc-shortcodes-posts.wc-shortcodes-posts-layout-grid .wc-shortcodes-post-box { margin-bottom: 1em; } .wcs-spc-h2 .wc-shortcodes-posts.wc-shortcodes-posts-layout-grid .wc-shortcodes-post-box { margin-bottom: 2em; } /* : remove border card */ .wc-shortcodes-post-border { border: 0px solid rgb(221, 221, 221); zbox-shadow: 6px 6px 24px rgba(150,150,150,.4); } .wc-shortcodes-post-border:hover { zbox-shadow: 6px 6px 24px rgba(150,150,150,.7); } /* : set bkg card transp */ .wc-shortcodes-post-box { background-color: transparent; } .wc-shortcodes-post-content { zzpadding: 0; zzmargin:0; padding: 0.5em 1em 0.9em; zzmargin: 0.5em 1em 0.9em; } .no-padding .wc-shortcodes-post-content { padding-left: 0; padding-right: 0; } /* : set default img size */ .wc-shortcodes-entry-thumbnail a img { zmax-height: 10em; zwidth: auto !important; } /* : hover effect */ .wc-shortcodes-entry-thumbnail a img:hover { opacity: 0.9; zzfilter: sepia(125%); } /* : remove centering img */ .wc-shortcodes-entry-thumbnail { text-align: inherit; } .wc-shortcodes-entry-thumbnail a img[src$=".svg"]:hover { zzfilter: invert(100%) sepia(100%) drop-shadow( 5px 5px 5px rgba(0, 0, 0, 0.15)); } .wc-shortcodes-entry-thumbnail a img { transition: all 0.3s; } .wc-shortcodes-entry-thumbnail a:hover img { } /* : do not use this - as it induces confusion about clickable zones of the cards - bad practice */ .wc-shortcodes-post-box:hover .wc-shortcodes-entry-thumbnail a img { } /* : titles */ .entry .wc-shortcodes-entry-title { margin:0; margin: 0 0 0.5em 0; font-weight : var(--font-card-title-weight); font-size : var(--font-card-title-size); /* set uniform size */ } .wc-shortcodes-entry-title a:not(:hover) { color: var(--card-title); } .wc-shortcodes-entry-title a:hover { zzcolor: var(--link-hover); } .wc-shortcodes-posts-template-borderless .wc-shortcodes-entry-title { margin: 0.5em 0 0.5em 0; } .entry h2.wc-shortcodes-entry-title , .entry h3.wc-shortcodes-entry-title , .entry h4.wc-shortcodes-entry-title , .entry h5.wc-shortcodes-entry-title , .entry h6.wc-shortcodes-entry-title { zzfont-weight: bold; zztext-transform: uppercase; } /* : wc posts titles sizes */ /* sizes for Poppins */ /* DISABLED KEEP .entry h2.wc-shortcodes-entry-title { font-size: 1.1em; zzfont-size:2.28rem; } .entry h3.wc-shortcodes-entry-title { font-size: 0.95em; zzfont-size: 2.08rem; } .entry h4.wc-shortcodes-entry-title { font-size: 0.9em; zzfont-size: 2rem; } .entry h5.wc-shortcodes-entry-title { font-size: 0.85em; zzfont-size: 1.7rem; } .entry h6.wc-shortcodes-entry-title { font-size: 0.8em; zzfont-size: 1.5rem; } */ /* : summary */ .wc-shortcodes-entry-summary { line-height: var(--font-card-summary-height); margin:0; zztext-align: justify; color: var(--card-desc); } .wc-shortcodes-footer-entry-meta { margin-top: 0; } .wc-shortcodes-post-content > :last-child { margin-bottom: 0; } /* : hide bottom border */ .wc-shortcodes-posts-template-borderless .wc-shortcodes-post-border { border-bottom: 0px solid white; } /* : wc pagination styling */ .wc-shortcodes-posts-navigation .page-numbers { transition: all 0.1s; zzpadding: 0 0.15em; display: inline-block; border-radius: 200px; background-color: var(--link); color: var(--link-inv); border:2px solid var(--link); padding: 0.3em 0.755em; margin: 0 2px; width: 0.79em; } .wc-shortcodes-posts-navigation .page-numbers:hover { background-color: var(--link-hover); color: var(--link-inv); border:2px solid var(--link-hover); } .wc-shortcodes-posts-navigation .page-numbers.current { zzpadding: 0.5em 0.95em; padding: 0.3em 0.755em; border:2px solid var(--link); background-color: var(--link-inv); color: var(--link); } .wc-shortcodes-posts-navigation .page-numbers.dots { background-color: inherit; color: var(--text); border:2px solid transparent; margin: 0 -0.5em } /* : wc posts special styles :: */ /* : wc posts spacings - check good method ? */ /* unused ? .wc-spacing-light .wc-shortcodes-posts.wc-shortcodes-posts-layout-grid .wc-shortcodes-post-box { margin-bottom: 0.35em; } */ .wc-summary-justify .wc-shortcodes-entry-summary { text-align: justify; } .wc-no-spacing .wc-shortcodes-item { margin: 0; } /* : special styles, via container :: */ /* : bkg syles :: */ .bkg-gray .wc-shortcodes-post-border { background-color: var(--border); border: 5px solid var(--border); } .bkg-gray .wc-shortcodes-entry-thumbnail { zpadding: 5px; } .bkg-gray .wc-shortcodes-post-border:hover { background-color:var(--text-inv); } .border-gray { border: 1px solid whitemoke; } /* : full size img blocks */ .full-img{} .full-img .wc-shortcodes-entry-thumbnail a img { max-height: none; width: auto !important; } .full-img .wc-shortcodes-post-border { zborder: 1px solid lightgray; } /* : OBS limited height img - IMPROVE : do decoralate overflow and size : to do*/ .img-max-10 .wc-shortcodes-entry-thumbnail { max-height: 15em; overflow: hidden; border:1px solid magenta; } /* : ELA THBs : img height force sizes defs ; PREFIX : thb :: */ /* .. for WC posts */ .h6 .wc-shortcodes-entry-thumbnail a img { /* OBS */ border: 3px dotted magenta; } .thb-h1 .wc-shortcodes-entry-thumbnail a img ,.wc-shortcodes-column .thb-h1 .wc-shortcodes-entry-thumbnail a img { height:100em; max-height: 1em; width: auto; } .thb-h2 .wc-shortcodes-entry-thumbnail a img ,.wc-shortcodes-column .thb-h2 .wc-shortcodes-entry-thumbnail a img { height:100em; max-height: 2em; width: auto; } .thb-h3 .wc-shortcodes-entry-thumbnail a img ,.wc-shortcodes-column .thb-h3 .wc-shortcodes-entry-thumbnail a img { height:100em; max-height: 3em; width: auto; } .thb-h4 .wc-shortcodes-entry-thumbnail a img { height:100em; max-height: 4em !important; width: auto; } .thb-h6 .wc-shortcodes-entry-thumbnail a img { height:100em; max-height: 6em; width: auto; } .thb-h8 .wc-shortcodes-entry-thumbnail a img { height:100em; max-height: 8em; width: auto; } .thb-h10 .wc-shortcodes-entry-thumbnail a img { height:100em; max-height: 10em; width: auto; } .thb-h10 .wc-shortcodes-entry-video { max-height: 10em; } /* : video thumb - bug : invalidate card link !*/ .thb-10 .wc-shortcodes-entry-video .video-container iframe { max-height: 10em; overflow: hidden; } .thb-h10 .video-container iframe { max-height: 10em; overflow: hidden; } /* : thb for wp_posts_carousel */ .thb-h2 .wp-posts-carousel-image img { max-height: 2em; } .content .thb-h3 .wp-posts-carousel-image img { /* bad ; to correct */ max-height: 3em; } .thb-h3 .wp-posts-carousel-image { overflow: hidden; max-height: 3em; } .zzthb-h6 .wp-posts-carousel-image img { /* bad ; to correct */ max-height: 6em; } .thb-h6 .wp-posts-carousel-image { overflow: hidden; max-height: 6em; } .thb-h8 .wp-posts-carousel-image img { max-height: 8em; } .thb-h6 .wp-posts-carousel .wp-posts-carousel-image { height:6em !important; padding: 0; } .thb-h7 .wp-posts-carousel .wp-posts-carousel-image { height: 7em !important; padding: 0; } .thb-h8 .wp-posts-carousel .wp-posts-carousel-image { height:8em !important; padding: 0; } .thb-h11 .wp-posts-carousel .wp-posts-carousel-image { height:11em; padding: 0; } .thb-h15 .wp-posts-carousel .wp-posts-carousel-image { height:15em; padding: 0; } /* : test thb 16/9 */ .thb-r16-9 .wp-posts-carousel-image { aspect-ratio : 16/9; } .thb-r16-9 .wp-posts-carousel-image img { zzmin-height: 100%; /*won't apply*/ } .thb-r16-9 .wp-posts-carousel-image a { /* force inner image to expand vertically to 16/9 container ; with DEFORMATION !!! */ zzheight: 100%; } /* : add or remove border card*/ .no-border .wc-shortcodes-post-border { border: 0px solid rgb(221, 221, 221); } .bordered .wc-shortcodes-post-border { border: 1px solid rgb(221, 221, 221); } /* : wc_post svg display hack*/ .wc-shortcodes-entry-thumbnail a img[src$=".svg"] { zzwidth: 100%; zzmax-height: 8em; /*disabled*/ width: auto; } .wc-shortcodes-entry-thumbnail a img[src$=".svg"] { zfilter: drop-shadow(4px 3px 0 rgba(231, 24, 115, 0.7)) drop-shadow( 9px 8px 0 rgba(0, 0, 0, 0.15)); filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, 0.15)); } /* : Cards on wc shortcodes */ /* styles for fa and svg as icons unicity */ /* OBSOLETE force unicity with fa icons on services page -- medium size = 8 em*/ /* use fa-h6 ??? */ .cards-icons-medium .wc-shortcodes-entry-thumbnail a img { border: 3px dotted magenta; max-height: 6em; } .cards-icons-small .wc-shortcodes-entry-thumbnail a img { border: 3px dotted magenta; max-height: 3em; } .cards-icons-medium .fa { zfont-size: 6em; } /* : OBSOLETE make cards bkg transparent */ .cards-no-bkg .wc-shortcodes-post-box { border: 3px dotted var(--obsolete); background-color: transparent; } /* : hide 'post navigation' title */ .wc-shortcodes-posts-navigation .screen-reader-text { display: none; } /* : SU et WC ------------------------------------- */ /* : BAD resize in include WC posts in WC columns */ .su-column .wc-shortcodes-entry-thumbnail a img , .wc-shortcodes-column .wc-shortcodes-entry-thumbnail a img { zzmax-height: 6em; zzwidth: auto !important; } .su-column .wc-shortcodes-entry-title , .wc-shortcodes-column .wc-shortcodes-entry-title { margin-top: -8px; } /* : WP Canvas shortcodes -------------------------------------- */ .wc-shortcodes-skill-bar-percent, .wc-shortcodes-skillbar-title { font-size: inherit; } /* : quick share plug */ .quickshare-container ul li, .quickshare-container ol ul li { list-style: none; } /* : wc social */ .wc-shortcodes-social-icons li i.fa-google-plus { zzbackground-color: #e14628; } /* highlight img hover*/ .img-high-hover:hover { border: 3px solid var(--border); opacity: 0.7; } /* .button-what a { background: rgba(255,255,255,0.3); background: var(--obsolete); border : 1px solid rgba(255,255,255,0.1); } .button-what a:hover { color: white !important; zborder : 1px solid rgba(255,255,255,0.4); } */ .devices-list .fa { zcolor: rgb(102,102,110); } /* plg WC shortcode - pricing :: */ .ela-prices .wc-shortcodes-pricing .wc-shortcodes-pricing-button .wc-shortcodes-button { border-radius: 20em; padding: 0.5em 1.1em; zztext-transform: uppercase; zzfont-size: 0.9em; background-color: var(--link-highlight); border: 1px solid var(--link-highlight); text-transform: inherit; } .ela-prices .wc-shortcodes-pricing .wc-shortcodes-pricing-header { zzbackground: var(--link); color: var(--text-inv); zzborder: 1px solid var(--link-CTA); border: none; zzborder-radius: 10px 10px 0 0; border-radius: 0.5em 0.5em 0 0; } .ela-prices .wc-shortcodes-pricing-cost { display: none; } .ela-prices .wc-shortcodes-pricing .wc-shortcodes-pricing-content ul li { border-bottom: 0px solid var(--border); padding: 1em; } .wc-shortcodes-pricing .wc-shortcodes-pricing-header h5 { padding: 0.25em; font-size: inherit; letter-spacing: 0.025em; } .wc-shortcodes-pricing { box-shadow: var(--sha-box); border-radius: 0.5em; } /* pricing blocks : */ #packs-pricing .wc-shortcodes-pricing.wc-shortcodes-pricing-type-secondary .wc-shortcodes-pricing-header { background: rgb(66, 139, 202) none repeat scroll 0 0; border: 1px solid rgb(66, 139, 202); } #packs-pricing .wc-shortcodes-pricing .wc-shortcodes-pricing-header { background: rgb(235, 44, 124) none repeat scroll 0 0; border:0; } #packs-pricing .wc-shortcodes-pricing .wc-shortcodes-pricing-cost, .wc-shortcodes-pricing.wc-shortcodes-pricing-type-secondary .wc-shortcodes-pricing-cost { border-top: 0; display:none; } #packs-pricing .wc-shortcodes-pricing .wc-shortcodes-pricing-per { display:none; } #packs-pricing .wc-shortcodes-pricing.wc-shortcodes-pricing-type-primary .wc-shortcodes-pricing-content .fa { color: rgb(235, 44, 124); } #packs-pricing .wc-shortcodes-pricing.wc-shortcodes-pricing-type-secondary .wc-shortcodes-pricing-content .fa { color: rgb(59, 141, 189); } #packs-pricing .wc-shortcodes-pricing-content .fa { color: yellowgreen; } #packs-pricing .wc-shortcodes-pricing.wc-shortcodes-pricing-type-inverse .wc-shortcodes-pricing-header { background: yellowgreen none repeat scroll 0 0; } #packs-pricing .wc-shortcodes-pricing.wc-shortcodes-pricing-type-inverse .wc-shortcodes-pricing-header h5 { color: white; } #packs-pricing .wc-shortcodes-pricing.wc-shortcodes-pricing-type-inverse .wc-shortcodes-pricing-cost { border:0; } #packs-pricing .wc-shortcodes-button:visited, .wc-shortcodes-button { background-color: rgb(235, 44, 124); border: 1px solid rgb(235, 44, 124); color: rgb(255, 255, 255); } #packs-pricing .wc-shortcodes-button.wc-shortcodes-button-secondary:visited, .wc-shortcodes-button.wc-shortcodes-button-secondary { background-color: rgb(66, 139, 202); border: 1px solid rgb(66, 139, 202); color: rgb(255, 255, 255); } #packs-pricing .wc-shortcodes-button.wc-shortcodes-button-inverse:visited, .wc-shortcodes-button.wc-shortcodes-button-inverse { background-color: yellowgreen; border: 1px solid yellowgreen; color: rgb(255, 255, 255); } /* : add correct css for clear floats in WP Canvas shortcodes*/ .wc-shortcodes-clear-floats { clear: both; visibility: hidden; } /* blockquotes Markdown notes */ .content blockquote a { zzcolor: white; } /*enhance site description text in plugin browser-shot */ .entry .wp-caption-text { font-size: 1.2em; font-weight: normal; color: inherit; font-style: normal; } .entry .wp-caption:hover { background: #3b8dbd none repeat scroll 0 0; } /* LAYOUT with BKG css classes -- do : replace with non page target ---------------------------*/ .bkg { } .bkg .calq { margin:auto;text-align:center;max-width:800px; } .bkg-paris { zbackground: darkorange none repeat scroll 0 0; background-image: url('/wp-content/uploads/2015/11/paris-bg.svg'); height: 5em; background-repeat : repeat-x; background-position: top left; background-size: auto 100%; } .bkg-services { /*background-color: #1e90ff; background-image: url("/wp-content/uploads/2015/11/bkg-strs-1.jpg");*/ background-color: #e71873; text-align:center; background-color: #e71873; zbackground: url('/wp-content/uploads/2016/01/bkg-flag-pink-optim-1920.svg'); background: url('/wp-content/uploads/2016/01/kamikz.svg'), url('/wp-content/uploads/2015/12/bg-rays-horizon.jpg'); background-attachment: scroll; background-position: bottom left; border-radius: 2px; color: white; background-size: cover; zbackground-size: 100% 100%; } .bkg-services .overlay { background-color: rgba(231, 24, 115, 0.7); padding: 2em; zborder-radius: 2px; } .bkg-services, .bkg-services a, .bkg-services h2, .bkg-services h3, .bkg-services h4, bkg-services .fa { color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); } .bkg-services .inner { zfont-weight: bold; } .bkg-services a:hover { color: #999; color: #3b8dbd; } .bkg-pack { margin:auto;text-align:center;max-width:800px; } .bkg-head { ztext-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .bkg-head #logo-icon { max-height: 4em; margin-right: 0.5em; animation: keyframes-logo-icon-anim 5s ease-in-out infinite alternate; } .bkg-head #logo-text { height: 2.6em; } .bkg-head #logo-sup { display: none; text-transform: uppercase; font-style: italic; font-size: 0.6em; zposition: absolute; top: 7.5em; } /* Animations --------------------------------------*/ @keyframes hero-overlay-anim { 0% { background-size: 0%; } 100% { background-size: 76%; } } @keyframes keyframes-logo-icon-anim { 0% { transform: perspective(10em) rotateY(-40deg); } 50% { transform: perspective(10em) rotateY(0deg); } 100% { transform: perspective(10em) rotateY(40deg); } } @keyframes home-subtitle-anim { 0% { zfont-size: 0em; zztransform: rotateY(-450deg) skew(0,-1deg); transform: rotateY(0deg) skew(0,-180deg); } 100% { zfont-size: 3em; transform: rotateY(0deg) skew(0,-2deg); } } @keyframes hero-word-anim { 0% { zztext-shadow: 0 1px 2px rgba(255,0,125, 0); text-shadow: 0px 0px 9px rgb(255 0 125 / 0%); } 100% { zztext-shadow: 0 1px 2px rgb(231, 24, 115); text-shadow: 0px 0px 20px rgb(255 255 255); color: var(--link-CTA); } } @keyframes hero-title-anim { 0% { text-shadow: 0 1px 2px rgba(255,255,255, 0); } 100% { text-shadow: 0 1px 2px rgb(255, 255, 255); } } @keyframes home-subtitle-text-anim { 0% { opacity: 1; } 100% { opacity: 0.5; } } @keyframes bkgWhatAnim { 0% { background-position: -300px; zbackground-size: auto 200%; } 100% { background-position: -100px; zbackground-size: auto 500%; } } @keyframes img-rotate-anim { 0% { opacity: 0.5; transform: rotate(0deg) scale(0.2); } 100% { opacity: 1; transform: rotate(180deg) scale(1); } } /* wrn fail on mobile */ @keyframes heroBkgAnim { 0% { background-position: -100px; zbackground-size: auto 100%; zbackground-size: 100% auto; } 100% { background-position: -300px; zbackground-size: auto 500%; zbackground-size: 110% auto; zbackground-position: center center; } } .bkg-what { text-align:center; zbackground-color: #e71873; zbackground: url('/wp-content/uploads/2015/12/bg-rays-horizon.jpg') ; zbackground: url('/wp-content/uploads/2016/01/kamikz.svg') ; background: url('/wp-content/uploads/2016/01/kamikz.svg'), url('/wp-content/uploads/2015/12/bg-rays-horizon.jpg'); background-attachment: scroll; background-attachment: fixed; background-size: cover; background-position: bottom left; zpadding: 2em; zborder-radius: 2px; color: white; /*anim*/ zanimation: 5s bkgWhatAnim 2s ease-in-out infinite alternate; background-position: -300px; } @keyframes shake-anim { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } .bkg-what .overlay { background-color: rgba(231, 24, 115, 0.7); padding: 2em; border-radius: 2px; } .bkg-what .inner { margin:auto; text-align:center; max-width:1000px; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .bkg-what .calq { background-color: rgba(255,255,255,0.6); border-radius : 5px; margin : 2em 1em; padding: 1em; } .bkg-what h2, .bkg-what h3, .bkg-what h4, .bkg-what .fa, .bkg-what p, .bkg-what a { color: white; } .bkg-what i.fa { color: white; } .bkg-what .fa-rounded { padding: 0.4em; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset; border-radius: 50%; font-size: 3em; transition: background-color 0.3s ease 0s, color 0.3s ease 0s, box-shadow 0.1s ease 0s; } .bkg-what a:hover .fa-rounded { color: #e71873 ; background-color: white; box-shadow: 0 0 0 2px #e71873 inset; } .content .bkg-what a:hover i.fa-rounded { color: #e71873; } .bkg-what a:hover, .bkg-what a:hover h3 { color: #3b8dbd; } .home-slogan-2 { background-color: rgba(60,60,60,0.7); color: white; padding: 1em; text-transform: uppercase; font-weight: 300; } .bkg-work img { border: 1px solid gainsboro; border-radius: 2px; } .bkg-work img:hover { zborder: 1px solid whitesmoke; zopacity: 0.8; } .bkg-work-page { text-align: center; margin: auto; } .work-more img { height: 2em; float:left; } .bkg-features { text-align: center; margin: auto; } .bkg-specs { text-align: center; margin: auto; } .bkg-devis { text-align: center; margin: auto; } .bkg-devis .head { zbackground: url('/wp-content/uploads/2016/01/eiffel.jpg') ; zbackground-attachment: fixed; background-position: bottom center; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); padding: 4em 0; } .bkg-devis form { text-align: center; margin: auto; max-width:800px; } .bkg-audit { text-align: center; margin: auto; } .bkg-audit .head { zbackground: url('/wp-content/uploads/2016/01/eiffel.jpg') ; zbackground-attachment: fixed; background-position: bottom center; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); padding: 4em 0; } .bkg-audit form { text-align: center; margin: auto; max-width:800px; } /* hero styles :: */ .entry .hero { zzbackground-color: var(--bkg-1); zzbackground-size: cover, cover, cover; zzbackground-repeat: no-repeat, no-repeat, no-repeat; zzbackground-position: center, center; zzcolor: var(--text-inv); zzanimation: heroBkgAnim 20s linear infinite alternate; position: relative; zzheight: 700px; /* height fallback */ zzheight: max(35em, calc(100vh - 10em)); zzoverflow: hidden; background-color: var(--violet); /* dark mode + pure white : */ --text-inv : var(--blanc); --text : var(--text-inv); --title : var(--text); } /* copy from page : */ .entry .hero { zzbackground-image: url('/wp-content/uploads/2015/09/webexpress-waves-bkg-v4.svg'); zzbackground-image: url('/wp-content/uploads/2015/09/webexpress-kami-234-v4.svg'); zzbackground-image: url('/wp-content/uploads/2022/08/WebExpress-phare-flash-nuit-visible-85pc.jpg'); zzbackground-image: url('/wp-content/uploads/2015/09/webexpress-waves-bkg-v4.svg'); zzbackground: linear-gradient(275deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%) ,rgb(0 0 0 / 80%)), url('/wp-content/uploads/2022/10/WebExpress-arbre-champ-etoiles-01.jpg'); zzbackground: linear-gradient(275deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%) ,rgb(0 0 0 / 80%)), url('/wp-content/uploads/2015/11/work-desktop.jpg'); zzbackground-size: cover, cover, cover; zzbackground-repeat: no-repeat, no-repeat, no-repeat; zzbackground-position: center, center; zzbackground-size: 200%, cover; zzbackground : var(--deg-violin-1); zzbackground : var(--deg-violin-2); zzbackground : var(--deg-rose-orange-circles); min-height: 572px; height: calc(90vh - 1em); } .zzhero-overlay { zzpadding: 2em; zborder: 1px solid white; zzbackground: url('/wp-content/uploads/2015/09/logo-WE-v2020-v1-contour-5px-white.svg'); zbackground-position-x: right 100px; zzbackground-position-y: center; zzbackground-position: right 10vw center; background-repeat: repeat; background-size: auto 20vw; zbackground-size: 76%; background-zposition: center center; background-repeat: no-repeat; zzanimation: hero-overlay-anim 10s linear; zzbackground-color: red; } .entry .hero-content { zztext-align:left; zzpadding-left: calc(15px + 3%); zzpadding-left: calc(1em + 1vw); position: absolute; zzbottom: calc(1.5em + 1vw); zzbottom: calc(1em + 10%); bottom: 0em; zzbottom: 1.25em; bottom: calc(15px + 3vw); text-shadow: 0 1px 2px rgb(45 45 45 / 60%); zzfilter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, 0.15)); margin-left: calc(1em + 5%); margin-right: 1em; } .entry .hero-title { text-transform: none; color: var(--text-inv); display: inline-block; zzfont-weight: 900; zzfont-size: 4.5em; zzfont-size: calc(2.25em + 3.5vw); zzfont-size: max(38px, calc(1.25em + 2.0vw)); zzfont-weight: bold; zzline-height: 1.1em; zzletter-spacing: 2px; zzfont-style: italic; zztransform: rotateY(0deg) skew(0,-3deg); zzanimation: home-subtitle-anim 1s linear; zz-webkit-text-fill-color: transparent; zz-webkit-text-stroke-width: 1.5px; zz-webkit-text-stroke-width: 3px; zz-webkit-text-stroke-color: white; zzanimation: hero-title-anim 3s linear infinite alternate; zzletter-spacing: 0.010em; zzletter-spacing : -0.05em; zzmargin-top: 0; zzletter-spacing: -.5px; zzletter-spacing: -1px; zzfont-size: 3em; margin: 0.1em 0 2rem; line-height: 1; zzmax-width: 450px; font-size: min(8rem, 12vw); zzletter-spacing: 1.5px; zzline-height: 1.115; letter-spacing: -0.03em; } /* style bis hero title */ .entry .hero-title { zztransform: skew(-3deg,0) rotate(-1deg); } /* style ter hero title */ .zzentry .hero-title { background: var(--rose); border-radius: 10px; padding: 0.15em 0.65em 0.15em 0.5em; zzletter-spacing: 0.015em; margin: 0.3em 0; text-shadow: none; filter: drop-shadow(13px 18px 37px #4444dd); border: 1px solid #4444dd; border-radius: 1em 0em; } /* style 4 hero degradé orange style */ .zzentry .hero-title { background-color: #D0212B; background-image: linear-gradient(90deg,#FF9800,#D0212B); -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; text-shadow: none; transform: none; font-style: normal; background-image: linear-gradient(90deg,whitesmoke,white); line-height:1.3em; } .entry .hero-tagline { color: var(--text-inv); zzfont-size: calc(1em + 1vw); text-transform: none; zzfont-weight: 700; letter-spacing: 0.015em; zzmargin-top: 0.8em; font-size: 1em; } .entry .hero-subtitle { text-transform: uppercase; zzletter-spacing: 3px; font-size: 0.8em; zzfont-weight: 600; zzdisplay: none; color: var(--text); letter-spacing: inherit; zzmargin-bottom: -0.05em; } .entry .hero-subtitle a { color: var(--link-inv); } .entry .hero-subtitle a:hover { color: var(--link-inv-hover); } /* home words effects */ .zzentry .hero-word { zz-webkit-text-fill-color: transparent; zz-webkit-text-stroke-width: 1px; zz-webkit-text-stroke-color: white; zzfont-style: italic; zzfont-weight: bold; zzletter-spacing: 1.5px; zztext-shadow: none; zztext-shadow: 0 1px 2px rgba(255,0,125, 0.3); zztext-shadow: 1px 1px 20px rgb(255 255 255); zzanimation: hero-word-anim 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; text-decoration-line: underline; text-decoration-color: var(--link-CTA); text-decoration-thickness: 5px; zzcolor : var(--link-CTA); } zz.entry .hero-word { webkit-text-fill-color: transparent; webkit-text-stroke-width: 1px; webkit-text-stroke-color: white; } .hero-word.design { } .hero-word.mobile { } .hero-word.seo { } .zzzzzzhero-image { zzdisplay:inline-block; zzfloat:right; position: relative; zzbottom: 1em; zzborder: 1px dotted red; } .hero-image-img { height:calc(20vw); zzfilter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, 0.15)); zzfilter: drop-shadow( -2px -2px 0px rgba(255, 255, 255, 0.55)); zztransform: rotate(-15deg) translate(-50%, -50%); transform: rotate(-45deg) translate(-200%, -200%) scale(0.3); position:absolute; bottom: 40px; right:calc(10% + 50px); filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, 0.15)); zzanimation: img-hero-anim 0.6s ease-in-out infinite alternate; } @keyframes img-hero-anim { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } } .hero-shake { animation: shake 0.6s ease-in-out infinite alternate; } .hero-video { display: none; zzmax-width:100%; zzwidth:100%; zzobject-fit: cover; zzposition: absolute; } /* hero degrade or styles */ /* .entry .hero-title { color: var(--bronze); } .entry .hero-subtitle a { color: var(--bronze); } .entry .hero-tagline { color: var(--bronze); } .hero div.button.CTA a { background: var(--bronze); } .hero div.button.CTA a:hover { color: var(--bronze); background: var(--link-inv); } */ /* CTA hero change color */ .hero div.button.CTA a { zzbackground-color: var(--link-CTA); zzbackground-color: inherit; zzcolor: var(--link-CTA); } .hero div.button.CTA a:hover { zzbackground-color: var(--link); zzborder-color: background-color: var(--link); zzcolor: var(--link-inv); zzbackground-color: inherit; zzcolor: var(--link-inv); } /* end hero --------------- */ .home-content .compact-theme.wp-posts-carousel .wp-posts-carousel-title a { text-align:left; overflow: hidden; height: 1em; } /* Contact form material design styling ------------------- */ .cont-contact-form { zzpadding: 4em 3em 1em; padding: 10% 5% 5%; zzbackground-color: whitesmoke; zbackground-color: rgb(231, 24, 115); border-radius: 5px; display: inline-block; zbox-shadow: 0 12px 32px 0 rgba(231, 24, 115, 0.3); box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); zbackground: linear-gradient(50deg, HSLA(205, 62%, 44%, 1), #F62D51); zbackground: linear-gradient(to right,#E7395C 0,#E7395C 37%,#F74C42 100%); zbackground: linear-gradient(to right, rgb(231, 24, 115) 0 , #E7395C 37%,#E7395C 70%,#F74C42 100%); zzbackground: linear-gradient(to right, rgb(231, 24, 115) 0 , #E7395C 100%); zbackground: #e71873 url(/wp-content/uploads/2015/09/webexpress-waves-bkg-v4.svg); background-size: cover; zzcolor: white; } .cont-contact-form h2, .cont-contact-form p { zzcolor: white; } .cont-contact-form .wpcf7 .wpcf7-text, .cont-contact-form .wpcf7 .wpcf7-captchar, .cont-contact-form .wpcf7 .wpcf7-textarea, .cont-contact-form .wpcf7 input[type="tel"], .cont-contact-form .wpcf7 input[type="text"], .cont-contact-form .wpcf7 input[type="email"], .cont-contact-form .wpcf7 input[type="password"] { zzcolor: white !important; } .cont-contact-form .wpcf7 p .fa { zzcolor: white; } .cont-contact-form .wpcf7 p span { zzcolor: white; } .cont-contact-form input.wpcf7-form-control::placeholder , .cont-contact-form textarea.wpcf7-form-control::placeholder { zzcolor: magenta; } .cont-contact-form input.wpcf7-form-control , .cont-contact-form textarea.wpcf7-form-control { outline: none; } .bkg-wp { zbackground-image: url("/wp-content/uploads/2016/01/bkg-flag-pink.svg"); padding: 3em; zcolor: white; ztext-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); background-repeat : no-repeat; background-position: top left; background-size: 100% 100%; } .bkg-wp h2 { zcolor: white; } .bkg-contact { text-align: center; margin: auto; } .bkg-steps { text-align: center; margin: auto; } /* end bkg -------------------------------------- */ /*testimonials icon cont*/ .testi-icon-cont { background-color: #3b8dbd; float: left; border-radius: 50%; margin-right: 1em; padding: 0.5em; } .testi-icon-cont .fa { color:white; font-size: 3em; } /*disabled - hover color on sites captions WC*/ .zzentry .wp-caption-text:hover{ color: white; } /* --------------------------------------- */ /* full include of font awesome ANIMATION */ /*! * font-awesome-animation - v0.0.7 * https://github.com/l-lin/font-awesome-animation * License: MIT */ /* Disabled, waiting for future and standard external .css file integration */ /* thm Hueman - footer styles : */ #footer-widgets { padding-top: 2em; } #footer .widget { color: var(--gris-median); } /* footer menus */ #footer .widget_nav_menu ul li a { border: none; display: inherit; padding: inherit; } .widget_nav_menu ul li a:before { content: ''; } /* line height in footer */ #footer .widget_nav_menu li.menu-item { zzheight: 2em; /*bad !!! */ margin-bottom: 0.4em; } #footer { zzbackground-color: : rgba(231, 24, 115, 0.7); background-color: var(--bkg-footer); zzbackground: url('/wp-content/uploads/2016/01/kamikz.svg'), url('/wp-content/uploads/2015/12/bg-rays-horizon.jpg') !important; zbackground-color: yellowgreen; zbackground: url('/wp-content/uploads/2015/09/webexpress-kami-234-v4.svg'); zzbackground: no-repeat url("/wp-content/uploads/2015/09/webexpress-kami-234-v4.svg"), #414a63; zzbackground: #414a63 url('/wp-content/uploads/2015/09/webexpress-waves-bkg-v4.svg'); background-size: cover; background-attachment: fixed; } #footer a { color: var(--link-inv); } #footer h2, h3, h4, h5, h6 { color: var(--text-inv); } #footer h3 { font-size:1.1em; } #footer .widget { padding-bottom: 0; font-size: inherit; } #footer-bottom { /* zbackground-color: white; zbackground-image: url('/wp-content/uploads/2015/11/paris-bg.svg'); zbackground-repeat : repeat-x; zbackground-position: top left; zcolor: rgb(170, 170, 170); zborder: none; zbackground: darkorange none repeat scroll 0 0; zbackground-color: transparent; background-size: 100% 100%; */ display:none; } #footer-site-title { display:none; } #footer-site-logo { max-height: 4em; } #footer-site-logo img { } #footer-site-description { font-style: normal; letter-spacing: 3px; zmargin-top: 6px; text-transform: uppercase; zvertical-align: bottom; zcolor: rgba(255, 255, 255, 0.5); font-size: 16px; zline-height: 60px; zmargin-left: 20px; zpadding: 10px 0; color: var(--text-inv); } #footer .widget a {} #footer .widget a:hover { color: var(--link-inv-hover); } .footer-site-title { display : none; } .footer-site-logo img { max-height: 4em; transition: all 0.3s; filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, 0.25)); } .footer-site-logo a:hover img { zzfilter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, 0.15)); transform: rotate(-1deg); } .footer-site-tagline { font-style: normal; letter-spacing: 1.5px; zmargin-top: 6px; text-transform: uppercase; zvertical-align: bottom; zcolor: rgba(255, 255, 255, 0.5); font-size: 16px; zline-height: 60px; zmargin-left: 20px; zpadding: 10px 0; color: var(--text-inv); } /* quickshare adjust on Contact*/ .page-id-12 .quickshare-share { display: none; } .page-id-12 .quickshare-container { text-align: center; border: none; zbackground-color: rgba(127,127,127,0.3); zdisplay: inline-block; ztext-align: center; zwidth: 100%; padding-left:4em; } hr.ondul { background-color: rgba(0, 0, 0, 0); background-image: url('/wp-content/uploads/2015/12/line-sine.svg'); background-image: url('/wp-content/uploads/2015/12/line-curved.svg'); zbackground-image: url('/wp-content/uploads/2016/05/line-curved-magenta.svg'); zbackground-clip : content-box; background-size: 100% 100%; height:3em; zwidth:100%; border:0; } .bkg-technos .wc-shortcodes-row { max-width: 1000px; } .bkg-technos img { width:100%; max-width: 150px; transition : all 1s ease-in-out; } .bkg-technos img:hover { transform: rotateY(40deg) rotate(-10deg) ; } /* hide in glossary */ .wpg-term-usage { display: none; } .single-glossary h4 { display:none; } .single-glossary .related-posts { display:none; } /* test correct size vg img on glossary and articles - ok*/ .post-thumbnail img[src$=".svg"] { height: auto; text-align: center; margin: auto; max-height: 15em; width: auto; } /*except for featured*/ zzzzdiv.featured .post-thumbnail img[src$=".svg"] { max-height: 15em; width:100%; } /* related posts responsive */ @media only screen and (max-width: 480px) { .related-posts li { width: 100%; } } @media only screen and (max-width: 719px) { .related-posts li:nth-child(3) { display: inherit; } } /* related post thumbs styling (managed by thm itself - no plg):: */ ul.related-posts { margin : 1em 0 2em 0;; padding: 2em 0 0 0; border-top: 1px solid whitesmoke; border-bottom: 0px solid whitesmoke; } ul.related-posts li { zzwidth: 33%; } ul.related-posts li.related { border: 0px solid whitesmoke; } ul.related-posts li.related:hover { -webkit-filter: drop-shadow(8px 8px 10px rgba(125, 125, 200, 0.5)); filter: drop-shadow(8px 8px 10px rgba(125, 125, 125, 0.5)); } ul.related-posts li.related .post-date { display: none; } ul.related-posts li.related .post-title { margin-top: 1em; height: 3em; overflow: hidden; font-size: 1em; text-transform: inherit; font-weight: inherit; } ul.related-posts li.related .post-thumbnail { max-height: 6em; overflow : hidden; } ul.related-posts li.related .post-thumbnail img { height: 6em; width: auto; margin: auto; filter : grayscale(50%); } ul.related-posts li.related:hover .post-thumbnail img { filter : grayscale(0%); } ul.related-posts li.related .post-thumbnail img[src$=".svg"] { height: 6em; } /* center all related post cards */ ul.related-posts li.related { text-align: center; margin-top: 1em; } /* testi related post*/ article.category-recommandation { } ul.related-posts li.related article.category-recommandation { border: 1px solid transparent; } ul.related-posts li.related article.category-recommandation .post-thumbnail img { height: 6em; width: 6em; border-radius : 50% 50%; text-align: center; margin:auto; border:1px solid whitesmoke; } ul.related-posts li.related article.category-recommandation .post-title { margin-top: 1em; height: 3em; overflow: hidden; zzfont-size: 0.9em; text-transform: none; font-style: italic; } /*testi card italic style */ .category-recommandation .wc-shortcodes-entry-summary p { font-style: italic; } /* ? */ /* div.featured .post-title, div.featured .excerpt, div.featured .post-meta{ text-align: center; } div.featured .post-category, div.featured .post-date { float: none; } */ /* hide default thumb placeholder*/ img[src$="thumb-medium.png"] { zborder: 5px solid red; text-align: center; margin: auto; display: block; -moz-box-sizing: border-box; box-sizing: border-box; background: url('/wp-content/uploads/2016/05/we-start-rotA-magenta.svg') no-repeat; background-size: 12em auto; width: 12em; /* Width of new image */ height: 12em; /* Height of new image */ padding-left: 12em; /* Equal to width of new image */ /* content: url("http://www.webexpress.fr/wp-content/uploads/2015/12/logo-sigle.svg") // fail */ } /*svg styles*/ /* NB : render inline svg img : add 'svg' class for being catched by js*/ /*svg as grid icons*/ .svg-grid-icon { width: 5em; height: 5em; /*correct bottom margin of p parent element*/ margin-bottom:-9px; } .svg-expand-hover { transition: all 0.5s ease-in-out; } .svg-expand-hover:hover { opacity:0.8; transform: scale(1.1); } svg.icon-card { zstroke: blue; fill: yellow; zviewBox: 0 0 400px 400px; } svg.icon-card:hover { fill: crimson; transition: all 0.5s ease-in-out 0.2s; } /* flyer site pack icon*/ svg.icon-pack-contact { fill: yellowgreen; } svg.icon-pack-contact:hover { fill: #1e90ff; } /* test anim*/ svg.icon-pack-contact path { animation: svg-animation-pulse-color 4s infinite; transition: all 0.5s ease; } @keyframes svg-animation-pulse-color { 0% { fill: #A4CF5F; fill: #414a63; } 50% { fill: #F1B91B; fill: #e71873; } 100% { fill: #A4CF5F; fill: #414a63; } } /*search popup*/ .search-expand { background-color: rgb(231, 24, 115) !important; background-color: var(--obsolete) !important; } /* FA styles :: */ .content .fa { zzcolor: #414a63; ztransition: text-color 0.5s ease-in-out 0s; } .content a i.fa { zzcolor: var(--link); } .zzcontent p a i.fa { color: var(--bleu); } .content a:hover i.fa { zzcolor: var(--link-hover); zztransition: text-color 0.5s ease-in-out 0s; } /* disabled shadow on fa */ .content .fa-5x, .content .fa-3x, .content .fa-7x { zztext-shadow: 4px 3px 0 rgba(231, 24, 115, 0.7), 9px 8px 0 rgba(0, 0, 0, 0.15); filter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, 0.15)); transition: text-shadow 0.4s ease-in-out 0s; } .content a i.fa-5x, .content a i.fa-3x, .content a i.fa-7x { transition: text-shadow 0.4s ease-in-out 0s; } .content a:hover i.fa-5x:hover, a:hover i.content .fa-3x:hover, a:hover i.content .fa-7x:hover { text-shadow: -0px 3px 0 rgba(231, 24, 115, 0.7), -0px 8px 0 rgba(0, 0, 0, 0.15); ztransition: text-shadow 0.5s ease-in-out 0s; transition: color 0.2s linear; } /* custom fa spin */ .fa-spin-ela { animation: 10s linear 0s normal none infinite running fa-spin; } /* post cat header title */ .notebox { background: rgb(231, 24, 115) none repeat scroll 0 0; color: whitesmoke; font-size: 1.1em; font-weight: 500; text-transform: uppercase; } .notebox::before { border-bottom: 8px solid rgb(231, 24, 115); } .notebox::after { border-bottom: 6px solid rgb(231, 24, 115); } /*limit pictures size rules*/ .pict-max-w100px img { max-width:150px; } /* brand icons effects */ div.brands img { width:100%; max-width: 5em; filter: grayscale(70%); -webkit-filter: grayscale(70%); transition: transform ease-out 1s; padding:2em; } div.brands img:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); transform: scale(1.3); } /*bkg / formules*/ .bkg-facts { zbackground-image : url('/wp-content/uploads/2016/09/bkg-tri-colors.svg'); zbackground-size : 100% 100%; zbackground-repeat: repeat-y; ztext-shadow: 0 0px 3px rgba(255, 255, 255, 0.9), -3px -4px 5px rgba(255, 255, 255, 0.8), 3px 4px 5px rgba(255, 255, 255, 0.8); zbackground-size: cover; } .bkg-facts .wc-shortcodes-column { margin-top: 5em; } .bkg-facts .wc-shortcodes-entry-thumbnail img { height: 10em; max-height: 1em; } /* slogans home bkg */ .bkg-facts .wc-shortcodes-post-box { background-color: transparent; } /* OBS ?? - brand foo banner ; correct size for svg in foogallery*/ .home-brand-logos .owl-carousel .owl-item img { zzwidth:100%; zheight:100%; max-height: 90px; zzmax-width: 90px; } .home-brand-logos.monochrome .owl-carousel .owl-item img { filter: grayscale(1); transition: all 1.5s; } .home-brand-logos .owl-carousel .owl-item img:hover { filter: grayscale(0); } /* brand foo correct crop by margin */ .foo-item a { margin: inherit; } /* customers logos banner */ .customers-logos .gallery { height: 5em; } .customers-logos .gallery img { height: 5em; object-fit: contain; filter: drop-shadow(rgba(255,255,255,1) 0px 0px 0px ); transition: all 0.7s; } .customers-logos.monochrome .gallery img { filter: grayscale(1); /*contrast(1);*/ } .customers-logos .gallery:hover img { filter: grayscale(0); } .customers-logos .gallery-icon { height: 5em; } .customers-logos .owl-carousel.owl-drag .owl-item { width: 100px !important; margin-right: 1em !important; } .customers-logos.invert.monochrome .gallery img , .invert .customers-logos.monochrome .gallery img{ height: 5em; filter: invert(1) grayscale(1); } .customers-logos.invert .gallery:hover img , .invert .customers-logos .gallery:hover img{ filter: invert(0) grayscale(0); } /* use wc posts as content summary*/ .wc-posts-as-summary .wc-shortcodes-entry-thumbnail img { max-height: 5em; } /* ..correct offset*/ .wc-posts-as-summary .wc-shortcodes-entry-title { margin-top: 0.4em; } /*-----------------*/ /* bkg what colors override for tests*/ /* .bkg-what { background: none; color: inherit; } .bkg-what .overlay { background-color: transparent; } .bkg-what .inner { color: inherit; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); } .bkg-what .calq { background-color: rgba(255,255,255,0.6); } .bkg-what h2, .bkg-what h3, .bkg-what h4, .bkg-what .fa, .bkg-what p, .bkg-what a { color: inherit; } .bkg-what a p i.fa { color: inherit; } .bkg-what .fa-rounded { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.7) inset; } .bkg-what a:hover .fa-rounded { color: #e71873 ; background-color: white; box-shadow: 0 0 0 2px #e71873 inset; } .content .bkg-what a:hover i.fa-rounded { color: #e71873; } .bkg-what a:hover, .bkg-what a:hover h3 { color: #3b8dbd; } */ /*end bkg what override test*/ /*su quotes override*/ .su-quote-style-default { zfont-style: normal !important; font-weight: 400 !important; color: #444; } .su-quote-style-default::before, .su-quote-style-default::after { background-image: none !important; font-family: FontAwesome !important; font-size: 1.5em; color: lightgray; } .su-quote-style-default::before { content: "" !important; } .su-quote-style-default::after { content: "" !important; } /* WC shortcode PLG - override*/ .wc-shortcodes-full-width { visibility: visible; } /* Metrics styles : disabled & isolated */ /* aplat */ /* used ? */ .bkg-aplat { margin: 2em 0; padding: 1em 0.5em 1em; background-color: crimson; border: 1px dotted magenta; } /* gradients */ .gradient-orange-to-violet { background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(235, 108, 65), rgb(235, 90, 71), rgb(228, 71, 90), rgb(208, 61, 105), rgb(177, 61, 108), rgb(125, 57, 94)) repeat scroll 0 0; } /* testimonials page grid */ .bkg-testimonials-grid .wc-shortcodes-entry-thumbnail a img { height: 8em !important; width: 8em !important; border-radius : 50%; border: 4px solid whitesmoke; box-shadow: 3px 3px 3px gainsboro; } .bkg-testimonials-grid .wc-shortcodes-entry-thumbnail a:hover img { zzopacity: 0.9; border-color: var(--link-hover); } .bkg-testimonials-grid h6 { zposition: absolute; zleft: 0; zbottom: -18px; font-size: 1em; text-transform: none !important; width: 100%; font-weight: normal; } .bkg-testimonials-grid p { margin-bottom: 1.8em !important; font-style: italic; } .bkg-testimonials-grid p { font-weight: 400; } /* add quotes to testi grid*/ .bkg-testimonials-grid .category-recommandation p::before { color: gray; content: ""; font-family: FontAwesome; margin-right: 0.5em; } /* disabled add tiret before name */ .zzbkg-testimonials-grid .category-recommandation h6 a::before { content: "— "; color: gray; font-family: FontAwesome; margin-right: 0.5em; } /* : line vert spacing */ .bkg-testimonials-grid .wc-shortcodes-posts.wc-shortcodes-posts-layout-grid .wc-shortcodes-post-box { margin-bottom: 3em; } /* testi single page */ article.category-recommandation img.pi { max-height:10em; max-width:10em; border-radius:50%; width:100%; height:100%; border: 4px solid whitesmoke; box-shadow: 3px 3px 3px gainsboro; z-index: 10000; } /* hide related title */ h4.heading { color: transparent; display: none; } /* DISABLED - force size featured svg image / wc post */ .zwc-shortcodes-entry-thumbnail a img[src$=".svg"] { max-width : 5em; } /* force font awesome icons size*/ .wc-shortcodes-entry-thumbnail a img[src*="fa-"] { max-width : 5em; } /* add shadow on fa (font awesome) featured svg image / wc post */ .wc-shortcodes-entry-thumbnail a img[src*="fa-"] { filter : drop-shadow( 4px 3px 0 rgba(231, 24, 115, 0.7) ) drop-shadow( 4px 3px 0 rgba(0, 0, 0, 0.15) ); transition: all 0.2s linear; } /* add animation on fa hover */ .wc-shortcodes-entry-thumbnail a:hover img[src*="fa-"] { filter : brightness(170%) drop-shadow( 0px 3px 0 rgba(231, 24, 115, 0.7) ) drop-shadow( 0px 3px 0 rgba(0, 0, 0, 0.15) ); transition: all 1s linear; } /* center testimonial author */ article.category-recommandation .su-quote-cite { text-align: center; } /* remove quotes on testi article author */ article.category-recommandation .su-quote-style-default::before { content: "" !important; } /* disabled add quotes to title on testi */ zarticle.category-recommandation h4::before { content: ""; font-family: FontAwesome; color: gray; margin-right: 0.5em; } /* disabled force testi art title to italic */ zarticle.category-recommandation h4 { font-style : italic; } article.category-recommandation .entry blockquote { padding: inherit; } article.category-recommandation .entry blockquote p { font-weight: 400; color: #444; zfont-size: 1.2em; letter-spacing: -0.3px; } /* testi stars */ article.category-recommandation .entry .fa-star { color: var(--violet-600); } /*correct span in titles color*/ .entry h1 span, .entry h2 span, .entry h3 span, .entry h4 span, .entry h5 span, .entry h6 span { color: inherit; } /* bad! make testi person picture round in recomandations */ .category-realisation .wc-shortcodes-posts .wp-post-image { zborder-radius: 50%; } /*realisation screen shot block*/ .block-realisation-screenshot { border: 4px dotted lightgray; transition: all 0.3s linear; overflow: hidden; max-height: 80vh; } .block-realisation-screenshot:hover { border: 4px dotted #3b8dbd; } .block-realisation-screenshot a { display: block; } .block-realisation-screenshot img { transition: all 0.4s linear; } .block-realisation-screenshot img:hover { transform: scale(1.1); } img.ela-img.realisation-screenshot-image { width:100%; max-width:1024px; margin: auto; text-align: center; display: block; border-radius: 1em; overflow: hidden; zzborder:1px solid yellowgreen !important; box-shadow: 6px 6px 6px rgba(0,0,0,0.3); border: 1px solid var(--gris-10) !important; z-index: 10000; } zzimg.ela-img.realisation-screenshot-image:hover { opacity: 0.9; box-shadow: 6px 6px 6px rgba(0,0,0,0.5); } /* patch bug blur with medium zoomable */ img.ela-img.realisation-screenshot-image.medium-zoom-image--opened { box-shadow: none; border: none; } /* round images for testimonials blocks in realisation */ .thb-rounded .wc-shortcodes-posts .wp-post-image { border-radius: 50%; } /* screen shots styles */ .sshot-oblique-upright { top: 1%; left: 16%; width: 85%; box-shadow: -1px 1px 0 0 #bbb,-2px 2px 0 0 #bbb,-3px 3px 0 0 #bbb,-4px 4px 0 0 #bbb,-7vw 10vw 80vw 0 rgba(0,0,0,.3); zposition: absolute; display: block; transform-origin: 0 0; transform: scale(.9) rotateX(56deg) rotateY(0) rotateZ(315deg); margin-top: 220px; margin-bottom: -350px; transition: all ease 0.1s; } .sshot-oblique-upright:hover { /* reset */ width: 100%; box-shadow: none; transform: none; margin-top: 0px; margin-bottom: 0px; transform-origin: 50% 50%; } /* styles indicators */ .ela-updated-site { background-color: darkorange; color: white; border-radius: 5px; display: inline-block; text-transform: uppercase; padding: .2em 1.2em; font-size: 0.7rem; font-weight: bold; letter-spacing: 2px; } .ela-term.glossary { zzborder-radius: 5px; border-radius: 10em; display: inline-block; text-transform: uppercase; padding: 0 0.5em 0 0.7em; font-size: 0.7rem; font-weight: bold; letter-spacing: 2px; border: 1px solid #3b8dbd; margin: 0 0 1em 0; zzbackground-color: #3b8dbd; background-color: var(--link); zzcolor: white; color: var(--link-inv); } .ela-term.glossary:hover { background-color: var(--text-inv); color: var(--link); } .ela-term.glossary a { color: var(--link-inv); } .ela-term.glossary a:hover { color: var(--link-hover); } zz.ela-term.glossary-links { display: inline-block; text-transform: uppercase; padding: 0 0.5em 0 0; font-size: 1rem; zzfont-weight: bold; letter-spacing: 2px; margin: 0 0 1em 0; } zz.ela-term.glossary-links a { border-radius: 20em; display: inline-block; text-transform: uppercase; padding: 0.2em 0.5em 0.25em 0.7em; padding: 0.5em 2em; zzfont-size: 1rem; font-weight: bold; letter-spacing: 2px; border: 1px solid var(--link); background-color: var(--link); color: var(--link-inv); text-wrap: nowrap; margin: 0.5em; font-size: 1.1rem; color: var(--label); background-color: var(--text-inv); } .ela-term.glossary-links a { border: 1px solid var(--link); display: inline-block; background-color: var(--link); color: var(--link-inv); border-radius: 20em; font-size: 0.65em; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; margin-bottom: 2em; padding: 0.2em 1.5em; color: var(--text); background-color: unset; border: 1px solid var(--label); font-weight: normal; border-bottom : 1px solid var(--label) !important; padding: 0em 0.75em; } .ela-term.glossary-links a:hover { color: var(--link-inv); border: 1px solid var(--link-hover); background-color: var(--link-hover); } zz.ela-term.glossary-links a:first-child { border: 1px solid var(--vert-jaune); background-color: var(--vert-jaune); } zz.ela-term.glossary-links a:first-child:hover { zzcolor: var(--link); border: 1px solid var(--link-hover); background-color: var(--link-hover); } .ela-indicator { background-color: yellowgreen; color: white; border-radius: 5px; display: inline-block; text-transform: uppercase; padding: .2em 1.2em; font-size: 0.7rem; font-weight: bold; letter-spacing: 2px; float:left; } /* plugin ela-link */ .ela-link { ztext-transform: lowercase; } /* glossary plg styles */ /* hide publish date */ .glossary .post-byline { display: none; } /* browser shots plugin styles */ .browser-shot { border: 4px dotted lightgray; transition: all 0.3s linear; overflow: hidden; } .browser-shot:hover { border: 4px dotted #3b8dbd; } .browser-shot img { transition: all 0.4s linear; } .browser-shot:hover img { transform: scale(1.1); zopacity: 0.9; } /* loader animate logo */ .logo-icon-anim-brackets { /*fails now*/ zmax-height: 3em; zposition: absolute; zleft: 0; transform: rotate(-15deg); animation: keyframes-logo-icon-anim-3 3.5s linear infinite; } /* intro § */ .entry .intro { zzfont-weight: bold; zzletter-spacing: 0.01em; } p.subtitle { font-size: 1.2em; } /* cl-popup plugin :: */ /* : popup button styles */ .cl-popup.align_left.ela-cl-popup { zztext-align: center; } .ela-cl-popup .cl-btn { zzfont-weight: bold; display: inline-block; zzfont-size: 0.9em; letter-spacing: 0.6px; line-height: 1em; zztext-align: center; zztext-transform: uppercase; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); text-shadow: none; border-radius: 10em; padding: 1em 1.2em 1em; margin: 1em 0; background-color: var(--link); border: none; color: var(--link-inv) !important; } .ela-cl-popup a:hover { color: var(--link-inv) !important; background-color: var(--link) !important; transition: all .3s ease-out; } /* colors for CTA */ .ela-cl-popup.CTA .cl-btn { font-weight: bold; color: var(--bkg-CTA) !important; background-color: var(--text-inv) !important; border: var(--button-border-width) solid var(--bkg-CTA); } .ela-cl-popup.CTA a:hover { color: var(--link-inv) !important; background-color: var(--bkg-CTA) !important; } .ela-cl-popup.CTA-inv .cl-btn { color: var(--bkg-CTA) !important; background-color: var(--text-inv) !important; } .ela-cl-popup.CTA-inv a:hover { color: var(--text-inv) !important; background-color: var(--bkg-CTA) !important; background-color: var(--bkg-CTA) !important; background-color: var(--link-highlight ) !important; box-shadow: 0 2px 5px 0 rgb(255 255 255 / 16%), 0 2px 10px 0 rgb(255 255 255 / 12%); } .cl-popup.align_left.ela-cl-popup.center { text-align: center; } .aplat.CTA .cl-popup.align_left.ela-cl-popup { zztext-align: center; } /* ELA img shortcode :: */ .ela-img { border-radius: 5px; } #footer .ela-img { border-radius: 0px; } .zzela-img.align-center { margin-left: auto; margin-right:auto; text-align:center; } /* detect images included via direct html instead of ela img shortcode */ .logged-in .entry-inner img { border: 1px dotted magenta; } .logged-in .entry-inner img.ela-img , .logged-in .entry-inner .wc-shortcodes-entry-thumbnail img { border: none; } /* detect inner links without ela link shortcode */ .logged-in .entry a[href^="/"] { border-bottom: 1px dashed magenta; } .logged-in .entry a[href^="/"].ela-link { border-bottom: none; } /* fig caption for img ela */ figcaption.ela-img { margin: -1em 0 1em 0; font-style: italic; font-size: 0.9em; } /* prices styles :: */ .prices .price { display: none; } .prices sup i.fa { color: yellowgreen; zbackground-color: yellowgreen; font-weight: 900; } /* try full width layout */ .boxed #wrapper, .container-inner { max-width: 1920px !important; } /* ELA aplats auto : */ /* : moved to external CSS for tests */ /* WC shortcodes plugin - Columns :: */ /* : change breaking width */ @media (max-width: 820px) { body .wc-shortcodes-one-half, body .wc-shortcodes-one-third, body .wc-shortcodes-two-third, body .wc-shortcodes-three-fourth, body .wc-shortcodes-one-fourth, body .wc-shortcodes-one-fifth, body .wc-shortcodes-two-fifth, body .wc-shortcodes-three-fifth, body .wc-shortcodes-four-fifth, body .wc-shortcodes-one-sixth, body .wc-shortcodes-five-sixth { width: 100%; float: none; margin-left: 0; margin-bottom: 20px; } } /* : materialize in editing */ .logged-in .wc-shortcodes-column { border: 1px dashed yellowgreen; } /* remove vert margins */ .column-no-margin .wc-shortcodes-row { margin: 0 !important; } /* animations */ @keyframes keyframes-logo-icon-anim-3 { 0% { transform: perspective(0em) rotateY(0deg); } 10% { transform: perspective(10em) rotateY(-180deg); } 25% { transform: perspective(0em) rotateY(0deg); } 40% { transform: perspective(10em) rotateY(180deg); } 50% { transform: perspective(0em) rotateY(0deg); } 60% { transform: perspective(10em) rotateX(-180deg); } 75% { transform: perspective(0em) rotateY(0deg); } 90% { transform: perspective(10em) rotateX(180deg); } 100% { transform: perspective(0em) rotateX(0deg); } } /* tarifs styles */ .price-box { zzmax-width: 400px; min-height: 10em; border-radius: 2em; border: 5px solid yellowgreen; padding: 3em 2em 1em; zzbackground-color: whitesmoke; margin: 0.5em 0.25em; } .price-label { cursor: pointer; } /* test font spec standard */ zzbody { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } /* test highlight hover img on owl carousel gallery */ .wc-gallery .gallery .gallery-icon a img:hover { opacity:0.9; } /* hide featured image for PAGES */ .page-image { display:none; } /* tests on page head image */ .page-image .image-container img { width:auto; height:100vw; max-height:10em; } /* testi v2 (flex) for wc posts */ .testi-wc-v2 {} .testi-wc-v2 .wc-shortcodes-post-border { display: flex; zzflex-flow: column; flex-flow: row; flex-wrap: wrap; } .testi-wc-v2 .wc-shortcodes-entry-thumbnail { order: 2; margin: 0 0 0 !important; flex: 0 0 20%; } .entry .testi-wc-v2 .wc-shortcodes-entry-title { order: 2; flex: 0 0 80%; margin: 30px 0 0.5em 0; } .testi-wc-v2 .wc-shortcodes-entry-summary { order: 1; height: 9.5em; overflow: hidden; text-overflow: ellipsis; line-height: inherit; flex: 0 0 100%; } .entry .testi-wc-v2 .wc-shortcodes-entry-thumbnail img { height: 4em !important; width: 4em !important; } .entry .testi-wc-v2 .wc-shortcodes-entry-thumbnail a img:hover { opacity: 0.8; filter: none; } /* test tables mobile */ @media screen and (max-width: 719px) { body { zzcolor: red !important; } } /* plg WP posts carousel :: */ /*::: => moved in specific CSS file */ /* plg WC shortcodes - accordion :: */ /* remove borders */ .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger { border: none; } .wc-shortcodes-accordion .wc-shortcodes-accordion-content { border: none; } /* correct arrow direction - disabled incomplete */ .wc-shortcodes-font-awesome-enabled .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:before { zzcontent: "\f107"; } /* : flat style :: ; do: change name... */ .ela-accordion-flat .wc-shortcodes-accordion { margin: 1em 0; } .ela-accordion-flat .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger { margin-top: 1em; } .ela-accordion-flat .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:before { width: auto; text-align: inherit; } .ela-accordion-flat .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a { zzpadding: 10px 20px 10px 1.5em; zzpadding: 9px 20px 10px 1em; zzpadding: 1em 0; zzpadding-bottom: 0px; zzcolor: var(--violet); color: var(--text); zzline-height: 1em; zzpadding: 0; padding: inherit; padding-right: 1em; } .ela-accordion-flat .wc-shortcodes-accordion .wc-shortcodes-accordion-content { border: none; padding: inherit; margin: 0.8em 0 1em; } .ela-accordion-flat .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a { zzfont-weight: bold; color: var(--violet); } /* movearrow to right */ .ela-accordion-flat .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:before { zzcolor: var(--violet); padding : 12px 0; padding: 5px; width: 0; } .wc-shortcodes-font-awesome-enabled .ela-accordion-flat .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:before { left:inherit; right:0; } .ela-accordion-flat .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:focus { zzcolor: var(--violet); color: var(--link); } .ela-accordion-flat .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:hover { color: var(--link); } .ela-accordion-flat .wc-shortcodes-accordion .wc-shortcodes-accordion-content-wrapper { margin-bottom: 0.5em; } /* test for button style */ zz.ela-accordion-button .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:before { display: none; zzcontent :""; color: var(--violet); padding : 12px 0; padding: 5px; width: 0; } /* test for button style used as extensible block */ zz.ela-accordion-button .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:after { content: "\f078"; color: var(--violet); padding : 12px 0; padding: 5px; width: 0; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; } zz.ela-accordion-button .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:before , .ela-accordion-button .wc-shortcodes-font-awesome-enabled .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger.wc-shortcodes-accordion-header-active a:before { content: ""; } zz.ela-accordion-button .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a { display: inline-block; font-size: 0.8335em; letter-spacing: normal; line-height: 1em; text-align: center; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); transition: all .3s ease-out; text-shadow: none; border-radius: 20em; border: 3px solid var(--link); zzpadding: 1em 1.2em 1em; padding: 0.75em 1em 0.8em 1.2em; zzmargin: 1em 0; zzbackground-color: var(--text-inv); color: var(--link); zzfont-weight: 600; zzpadding: 0.9em 1.15em 0.875em; } /* : style v2 */ .ela-accordion-button .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a { display: inline-block; zzfont-size: 0.8335em; letter-spacing: normal; line-height: 1em; text-align: center; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); zztransition: all .25s ease-out; transition: all 0; text-shadow: none; border-radius: 20em; border: var(--button-border-width) solid var(--link); zzpadding: 1em 1.2em 1em; padding: 0.85em 2.4em 0.8em 1.2em; zzmargin: 1em 0; zzbackground-color: var(--text-inv); color: var(--link); zzfont-weight: 600; zzpadding: 0.9em 1.15em 0.875em; } .ela-accordion-button .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:hover { border-color: var(--link-hover); color: var(--link-hover); transition: all .25s ease-out; } .wc-shortcodes-font-awesome-enabled .ela-accordion-button .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:before { zzfont-family: FontAwesome; zzfont-weight: normal; zzfont-size: 0.8335em;; zztext-decoration: inherit; zzfont-style: normal; content: "\f078"; zzmargin-right: 0px; display: block; zzzposition: absolute; zzzleft: inherit; top: 0.45em; bottom: inherit; zzzpadding: 0.45em 0px; zzzwidth: 0.5em; text-align: center; right: 1.5em; } .wc-shortcodes-font-awesome-enabled .ela-accordion-button .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger.wc-shortcodes-accordion-header-active a:before { content: "\f077"; } /* : expanded style */ .wc-shortcodes-font-awesome-enabled .ela-accordion-button .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger.wc-shortcodes-accordion-header-active a { zzcolor: var(--link); zzborder-color: var(--link); } /* hide button on expand */ .wc-shortcodes-font-awesome-enabled .ela-accordion-button.hide-on-expand .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger.wc-shortcodes-accordion-header-active a { display: none; } /* simple-text-on-expand : remove button style on expand */ .wc-shortcodes-font-awesome-enabled .ela-accordion-button.simple-text-on-expand .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger.wc-shortcodes-accordion-header-active a { border-color: transparent; box-shadow: none; zzfont-size: inherit; zzline-height: inherit; zzpadding: inherit; zzcolor: inherit; zzfont-weight: var(--font-bold-weight); } .wc-shortcodes-font-awesome-enabled .ela-accordion-button.simple-text-on-expand .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger.wc-shortcodes-accordion-header-active a:hover { border-color: inherit; } .wc-shortcodes-font-awesome-enabled .ela-accordion-button.simple-text-on-expand .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger.wc-shortcodes-accordion-header-active a:before { content : ""; content: "\f077"; } /* disabled test OK add arrow right */ /* .wc-shortcodes-font-awesome-enabled .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:after { color: var(--violet); } .wc-shortcodes-font-awesome-enabled .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:after { width: auto; text-align: inherit; } .wc-shortcodes-font-awesome-enabled .wc-shortcodes-accordion .wc-shortcodes-accordion-trigger a:after { font-family: FontAwesome; font-weight: normal; font-size: inherit; text-decoration: inherit; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; content: "\f107"; margin-right: 0px; display: inline-block; line-height: inherit; position: absolute; right: 0; top: 0; bottom: 0; padding: 10px 0; width: 40px; text-align: center; } */ /* : OK set shadow under wc gallery images */ .wc-gallery-shadowed .gallery .gallery-item { box-shadow: 6px 6px 6px rgb(0 0 0 / 30%); } .wc-gallery-shadowed .gallery .gallery-item:hover { box-shadow: 6px 6px 6px rgb(0 0 0 / 50%); } /* set extra margin to see shadow*/ .wc-gallery-shadowed .owl-carousel .owl-stage { margin-bottom: 15px; } /* map google maps */ .gmap { width:100%; border:0; height: calc(4em + 30vw) !important; zzfilter: hue-rotate(-36deg) invert(10%) saturate(130%); zzborder-radius: 20px; filter: grayscale(1) } /* new bkgs */ .bkg-visi { zzbackground: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('/wp-content/uploads/2022/08/WebExpress-phare-flash-nuit-visible-85pc.jpg'); zzbackground: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('/wp-content/uploads/2015/09/studying.jpg'); zzbackground: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('/wp-content/uploads/2015/09/WebExpress-Google-algorythm-visibility-SEO.jpg'); background-repeat: no-repeat; background-size: cover; zztext-shadow: 0 1px 2px rgb(0 0 0 / 60%); background-position: center; } .bkg-UX { zzbackground: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), url('/wp-content/uploads/2015/09/WebExpress-illustration-glace-experience-utilisateur.jpg'); zzbackground-attachment: fixed; background-repeat: no-repeat; background-size: cover; zztext-shadow: 0 1px 2px rgb(0 0 0 / 60%); } /* Footer - correct left margin on menu item in footer - use when no font loaded ? */ .widget_nav_menu li.menu-item { zzmargin-left: -1em; } /* plugin FA Font Awesome */ /* correct phone icon */ .zzfa.fa-phone { transform: rotate(90deg); zztransform: rotate(225deg); } /* ela user picture style */ .ela-user-picture { display:block; border-radius:50%; zzmax-height: 8.5em; margin-bottom:0.5em; width: 8em !important; border-radius: 50%; border: 4px solid whitesmoke; box-shadow: 3px 3px 3px gainsboro; } .ela-user-picture:hover { border: 4px solid gray; filter: sepia(25%); } /* ela page content header styles ::*/ .head-img { max-height: 6em; margin-bottom: 0.8em; margin: 0 auto 0.8em auto; display: block; } #ela-content-head { margin: 3em auto 2em; max-width: 600px; text-align: center; padding: 0 1em; } #ela-content-head img.head-img { max-height: 6em; } #ela-content-head .title { font-size: min(1.6em, 1em + 1.5vw); line-height: 1.2; letter-spacing: normal; margin: 0 0 0.5em 0; font-weight: var(--font-head-weight); } #ela-content-head .title p { margin-bottom: 0.5em; } /* disabled, maybe obs ; ok - detect old without content head block */ zz.logged-in.page .content .entry h2:nth-of-type(1):not(.title) { border: 3px dotted yellow; } /* [OBS] test - big titles home*/ .h2-big-A h2 , h2.h2-big-A { zzfont-size: min(2.5em, 2.25em + 3.5vw); font-size: min(2em, 1em + 2vw); font-weight: 600; letter-spacing: -0.05em; line-height: 1.2; margin: 0 0 0.5em 0; font-size: max(0px, calc(1.3em + .5050vw)); border: 1px dotted magenta; } /* [EXP] - generic titles big styles on all titles : h2, h3...*/ /* WARNING BUG : side effect : on cards => to manage... by appling ony on concerned title maybe : cannot be 'global' effect on entire aplat ??? */ .titles-big-A h2 , h2.titles-big-A { zzfont-size: min(2.5em, 2.25em + 3.5vw); zzfont-size: min(2.35em, 2.35em + 3.5vw); zzline-height: 1.11; margin: 0 0 0.5em 0; zzfont-size: max(0px, calc(1.3em + .5050vw)); zzfont-size: max(1em, min(5vw, 2.5em)); zzfont-size: max(var(--font-title-2-size), min(2.3vw, 3.6em)); font-size: max(var(--font-title-2-size), 4.8 * 0.5209vw); /* test gradient letters ::*/ /* background : linear-gradient(180deg,var(--title),#000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; */ line-height: 1; zz-desired-font-size: 3.6rem; zz-desired-letter-spacing: -1.2px; letter-spacing: -0.025em; position: relative; z-index: 1; } /* disabled ; waiting for patch - for what ? cards ? oui letter-spacing */ .zztitles-big-A h3 , zzh3.titles-big-A { font-size: min(1.5em, 1.25em + 3.5vw); font-weight: 600; letter-spacing: -0.05em; line-height: 1.2; margin: 0 0 0.5em 0; } /* : adjust size (reduce) : */ .titles-big-A h2 , h2.titles-big-A { font-size: max(var(--font-title-2-size), 3.8 * 0.5209vw); } /* [EXP] - titles special spacings*/ /* titles under icons => light top margin */ /* bad : should apply ONLY on consecutives img (or fa) THEN h2 */ .entry .icon-titles h2 , .entry .icon-titles h3 , .entry .icon-titles h4 , .entry icon-titles h5 , .entry .icon-titles h6 { margin-top: 0.5em; } /* ELA - review */ .review { zzdisplay: inherit; } .logged-in .review { border: 1px dashed green; zzdisplay: inherit; color: green; zzbackground-color: rgba(0, 255, 125, 0.05); } .logged-in .review:hover { border: none; display: inherit; color: inherit; background-color: inherit; } .logged-in .review :before { content: "REVIEW"; padding: 3px 8px 3px 8px; font-size: 0.45em; letter-spacing: 0.7px; color: white; background-color: green; border-radius: 10em; position: absolute; left: -8em; } /* Yoast breadcrumb styling */ /* hide as design is bad but keep if for microformat */ /* 2026 display for semantic cocoon */ .yoast-breadcrumbs { zzdisplay: none; font-size: 0.8em; padding-left: 2.7em; margin-top: -1.5em; padding-left: 1em; } .page-template-page-ela-no-h1 .yoast-breadcrumbs { margin-top: 0; } .home .yoast-breadcrumbs { display: none; } /* hero image v2 */ .hero-image-img-2 { float: right; height: 81vh; margin-top: 4vh; opacity: 0.9; } /* add hover effect on site logo */ .site-title a img , .mobile-site-title a img { transition: all 0.3s; } .site-title a:hover img , .mobile-site-title a:hover img { zzfilter: drop-shadow( 5px 5px 5px rgba(0, 0, 0, 0.15)); transform: rotate(-1deg); } /* test all images in N&B & hover natural color */ .entry img , .wc-shortcodes-entry-thumbnail img , .wc-shortcodes-entry-thumbnail a img[src$=".svg"] { zzfilter: grayscale(1); zzfilter: grayscale(0.8) sepia(0.1); zzfilter: grayscale(0.5); } /* ... and adjust FAs */ .content .fa { color: var(--gris); } /* ... and hover natural color */ .entry img:hover , .wc-shortcodes-entry-thumbnail a img[src$=".svg"]:hover { filter: none; } /* [EXP] manual cards styles */ .card {} .block-subtitle , card.subtitle { text-transform: uppercase; letter-spacing: 3px; font-size: 0.9em; font-weight: 600; } .card .title { margin-top: 0; } .card .description {} .card .button {} /* [EXP] ela blog template styles :: */ .ela-blog-container { display: block; zzwidth: 100%; /* breaks responsive */ max-width: 800px; margin: 2em auto; overflow: hidden; zzpadding: 80px 80px 120px; zzpadding:4.45em; padding: 4%; padding: calc(1em + 3.3%); zzbackground-color: #fff; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 15%), 0 50px 100px -20px rgb(23 41 64 / 25%); position: relative; border-radius: 1em; zzborder:1px solid green; } .single .ela-blog-container .post-title { text-transform: none; text-align: left; zzfont-weight: 700; margin: 0; font-size: min(2.6em,1em + 1.5vw); color: var(--title); } .single .ela-blog-container .post-byline { margin: 0; text-transform: capitalize; } .single .ela-blog-container .page-title { background: none; border-bottom: 0px solid #eee; color: inherit; font-size: inherit; font-weight: 600; text-transform: none; padding: 0; } .single .ela-blog-container .pad { padding: 0; } .single .ela-blog-container .ela-content-header { margin-bottom: 2em; } .single-post .content .ela-blog-container .entry { max-width: none; } .single .ela-blog-container .post { margin-bottom: 0; } .single .ela-blog-container .button { text-align:left; } .single .ela-blog-container blockquote { color: var(--citation); font-style: oblique; border-left: 2px solid var(--citation); zzpadding: 0.5em 0 0.5em 30px; margin: 2em 0; } .single .ela-blog-container blockquote p:before { content: ""; padding-right: 0; } /* CTA blog v3 */ .block.CTA3 { display: block; border-top: 1px solid lightgray; margin-top: 2em; padding-top: 2em; } /* Header : One line header styles [EXP] :: */ @media only screen and (min-width: 719px) { #header .container-inner { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-between; align-items: center; zzborder-bottom: 1px solid var(--link-CTA); background-color : none; zzbackground: var(--deg-gray-1); background:none; } } #header .container-inner #menu-mnu-main.container-inner { display: block; } #header .container-inner {} @media only screen and (min-width: 719px) { #nav-header.nav-container { background: none; } } @media only screen and (max-width: 719px) { #nav-header.nav-container { width:100%; } } #header > .container > .container-inner { zzborder-bottom: 1px solid var(--gris-clair); zzbackground: linear-gradient(-90deg,#252d4a,#aa278c 51%,#ffc08c); background: var(--deg-violin-1); zzbackground: var(--gris-anthra); } #nav-header .container { padding:0; padding-right: 2em; } #nav-header .nav li a { zzcolor: var(--text); } #nav-header .nav li a:hover { background: none; color: var(--link-inv-hover); } #nav-header .nav li.current-menu-item > a { color: var(--link-active); opacity: 1; } .site-description { color: var(--text-inv); font-size: var(--font-menu-size); display: none; letter-spacing: normal; } /* make all pages full screen styles : [EXP] */ /* DISABLED :: .page .content .pad { padding: 0; } .page .content .page-title { padding: 1em; } #ela-content-head { padding: 0 1em; } */ @media only screen and (max-width: 719px) { .entry .intro { zztext-align: justify; } } .material-icons-outlined { font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* home styles - v2 :: */ @media only screen and (min-width: 820px) { .home #nav-header.nav-container { zzbackground: transparent; zzwidth: 100%; zztext-align: right; background: transparent; zzmargin-bottom: -3em; } /* remove top gray band */ .home #header > .container > .container-inner { background: transparent; margin-bottom: -10em; } .home #header .group.pad { z-index: 100000; } .home #nav-header.nav-container { zzbackground-color: var(--bkg-CTA); } } /* plg Cookie Law Info GDPR cookie consent */ /* do apply standard text size */ #cookie-law-info-bar { background-color: var(--gris-anthra) !important; color: var(--gris-83) !important; } #cookie-law-info-bar a { color: var(--link-inv) !important; } #cookie-law-info-bar a:hover { color: var(--link-inv-hover) !important; } #cookie-law-info-bar .cli_messagebar_head { color: var(--text-inv); } .wt-cli-manage-consent-link { cursor: pointer; } .cli-style-v2 .cli-plugin-main-link:not(.cli-plugin-button), .cli-style-v2 .cli_settings_button:not(.cli-plugin-button), .cli-style-v2 .cli_action_button:not(.cli-plugin-button) { text-decoration: inherit; } /* old large : .cli-bar-message img { height: 3em; margin: -12em 1em 0 0; background: var(--bkg-footer); border-radius: 3em; padding: 5px; } */ /* new small icon : */ .cli-bar-message img { height: 1em; /* margin: -12em 1em 0 0; */ /* background: var(--bkg-footer); */ /* border-radius: 3em; */ /* padding: 5px; */ margin-right: 0.5em; /* margin-bottom: -0.1em; */ vertical-align: text-top; } .cli_user_consent_state { zzpadding: 2.75em 2em 1em; zzpadding-right:2em; font-weight: bold; zzcolor: white;; border: var(--button-border-width) solid yellowgreen; zzbackground-color: yellowgreen; border-radius: 10px; zzdisplay: inline-block; line-height: 3em; padding: 1em 2em; display: inline-block; box-shadow: var(--sha-box); border: 1px solid var(--border); } .cli_user_consent_state .cli_manage_current_consent { text-decoration: none !important; zzdisplay: inline-block; display: block; zzfont-size: 0.8335em; letter-spacing: normal; line-height: 1em; text-align: center; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); transition: all .3s ease-out; text-shadow: none; border-radius: 20em; border: var(--button-border-width) solid var(--link); width: fit-content; zzpadding: 1em 1.2em 1em; zzpadding: 0.75em 0.1em !important; padding : 0.75em !important; margin: 0.5em 0; zzbackground-color: var(--text-inv); color: var(--link); font-weight: 600; } .cli_user_consent_state .cli_manage_current_consent:hover { background-color: var(--link-hover); border-color: var(--link-hover); color: var(--link-inv); } .cli-bar-btn_container .cli-plugin-button { color: var(--link-inv) !important; border-radius: 20em; padding-left: 2em; padding-right: 2em; background-color : transparent !important; border: var(--button-border-width) solid var(--link-inv); } .cli-bar-btn_container .cli-plugin-button:hover { border-color: var(--link-inv-hover); } a.wt-cli-element.cli_cookie_close_button { display: none; } .cli-bar-message { line-height: var(--font-text-height); } /* plg external links :: */ .ext-link { zzcolor: var(--vert-fonce); } /* to move ; test ; force all cards icons to small size : 3em :: */ .thb-h4 .wc-shortcodes-entry-thumbnail a img { max-height: 3em !important; } .thb-h6 .wc-shortcodes-entry-thumbnail a img { zzmax-height: 3em; } .fa-h6 .fa { font-size: 3em; margin-bottom: 0em; } .ela-wpc-services .light-theme.wp-posts-carousel .wp-posts-carousel-image img { zzmax-height: 3em !important; } .thb-h6 .wp-posts-carousel .wp-posts-carousel-image { zzzzheight: inherit !important; } #ela-content-head img.head-img { max-height: 3em; zzdisplay: none; } .wc-shortcodes-column .wc-shortcodes-entry-thumbnail a img { zzmax-height: 3em; } .content .fa { color: inherit; } /* disabled .content .fa-2x , .content .fa-3x , .content .fa-4x , .content .fa-5x , .content .fa-6x , .content .fa-7x { font-size: 3em; } */ /* footer menus styles */ ul#menu-mnu-social li { display: inline-block; } ul#menu-mnu-social li .fa { zzwidth: 0.25em; } /* ela-label :: for highlight block and standalone AND headings h2, h3...*/ /* ABANDON : - Good practice : always use an heading (h2, h3) and add label for transform it as a label, but make it sense full as a meaning tag (reversible) (better than use systematic p tag)*/ /* Pourtant : devrait etre des titres car servent de titre ppalement */ p.label , h2.label , h3.label , .highlight .label { border: 1px solid var(--label); display: inline-block; background-color: var(--label); color: var(--text-inv); zzpadding: 3px 11px; border-radius: 20em; font-size: 0.65em; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; /* float: left; */ /* text-align: right; */ /* margin-right: 0; */ zzposition: absolute; zzright: 0; /* text-align: right; */ margin-bottom: 2em; padding: 0.2em 1.5em 0; color: var(--gris-41); background: transparent; margin-left : 0.5em; margin-right: 0.5em; /* disabled test 2024 : incliné pour distinction franche // buttons */ /* transform : skew(-20deg); border-radius: 0.3em; */ /* border-radius: 0.3em; padding: 0.2em 1.5em 0em !important; */ margin-left: 0; border: none; transform: skew(-20deg); } p.label { border: 1px solid var(--label); transform : skew(-20deg); border-radius: 0.3em; padding: 0 1em; } .highlight .label.label-right { position: absolute; right: 2em; } /* : special labels */ .label.realisation { zzmargin-right: 0.25em; zzcolor: var(--gris-41); zzbackground: transparent; transform : skew(-20deg); border-radius: 0.3em; padding: 0 1em; zzborder: 0; zzbackground-color : whitesmoke; zzbackground-color: var(--gris-27); zzcolor: var(--text-inv); zzfont-weight: normal; } .zzlabel.realisation.date { zzbackground-color: var(--vert-jaune); border-color: var(--vert-jaune); color: var(--vert-jaune); } /* realisation styles : */ .realisation.actions { text-align: left; } .realisation.actions ul { margin: 1em 0; } .realisation.actions ul li { list-style: none; margin-bottom: 0.75em; } .realisation.actions ul li .fa { margin-right: 0.5em; } .real-labels .label { /*obsolete*/ transform : skew(-20deg); border-radius: 0.3em; padding: 0 1em; zzborder: 0; zzbackground-color : whitesmoke; zzbackground-color: var(--gris-27); zzcolor: var(--text-inv); zzfont-weight: normal; } /* rule : label should not be a title => mark it in back office*/ .logged-in p.label { zzborder: 1px dotted var(--rose); } /* test cards img 2023 : with no ratio change */ /* fail ; do test 2 */ .cards-v3 {} .zzcards-v3.news-grid .wc-shortcodes-entry-thumbnail { overflow: hidden; zzborder: 1px solid red; /* text-align: center; */ position: relative; border-radius: 10px; aspect-ratio: 16/9; border: 1px solid lightgray; } .zzcards-v3.news-grid .wc-shortcodes-entry-thumbnail a img[src$=".svg"] { /* filter: none; */ padding: 0; /* box-sizing: border-box; */ } @media (min-width: 991px) { .zzcards-v3.news-grid .wc-shortcodes-entry-thumbnail a img { height: inherit; width: inherit; } } .zzcards-v3.wc-shortcodes-entry-thumbnail a img { position: relative; object-fit: cover; zzheight: 100%; min-width: 100%; min-height: 100%; } /* footer menu widget remove start spacing */ #footer .widget > div > ul li a:before { display: none !important; } /* [EXP] headline paragraphs */ .head-p { max-width: 600px; } /* plg TOC+ */ .toc_white { zzborder: 1px solid var(--border) !important; border: none !important; border-radius: 8px; padding: 1em 1.5em !important; background-color: var(--gris-97) !important; } /* tests glass aero */ /* test aero cards - use only with bkg image */ .content .card-aero .light-theme.wp-posts-carousel .wp-posts-carousel-container { background: rgba(0, 0, 0, 0.1); zzborder-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(4.3px); -webkit-backdrop-filter: blur(4.3px); zzborder: 1px solid rgba(0, 0, 0, 0.21); } /* test aero on hero */ .zzentry .hero-content { max-width: 700px; padding: 1em 2.5em; zzbackground: rgba(0, 0, 0, 0.25); zzborder-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(4.3px); -webkit-backdrop-filter: blur(4.3px); zzborder: 1px solid rgba(0, 0, 0, 0.21); } /* media medium zoom */ img.zoomable { transition: 0.3s; zzborder: 5px solid rgba(71,48,179,0.2); } img.zoomable:hover { opacity: 0.9; } /* Hueman thm child ELA / manual h1 template :: */ /* hide page title for no auto h1 template */ .ela-page-title-no-h1 { display: none; } .logged-in .ela-page-title-no-h1 { display: inline-block; position: absolute; right:1em; top: 1em; color: magenta; } /* define manual h1 style */ .page-head h1 { font-size: var(--font-title-1-size); color: var(--title); margin: 0; } /* big titles for h1 */ .titles-big-A h1 , h1.titles-big-A { margin: 0 0 0.5em 0; font-size: max(var(--font-title-1-size), 5.2 * 0.5209vw); line-height: 1; letter-spacing: -0.025em; } /* thm : adjust padding on mobile */ @media only screen and (max-width: 479px) { .pad { padding: 0 1em 1em; } } /* thm : adjust menu icon on mobile */ .nav-toggle i { font-size: 1.5em; padding: 0.55em; } /* plg psp photoswipe */ zz.pswp { --pswp-bg: rgba(0,0,0,0.85); } /* IA & Chat GPT marker */ .logged-in .cgpt .logged-in .iag { zzbackground-color: rgba(255, 0, 24, 0.05); background-image: repeating-linear-gradient( -45deg, transparent, transparent 20px, rgba(0,0,0,0.1) 20px, rgba(0,0,0,0.1) 40px ); } /* plugin ELA draft :: */ /* : remove extra br generated by WP shortcodes */ zzdiv.ela-draft + br { display: none; } .ela-draft-draft { border: 5px dashed gray; background-color: gainsboro; background: repeating-linear-gradient( -45deg, #ffffff, #ffffff 28px, gainsboro 0px, gainsboro 51px ) !important; } /* plg wc gallery :: */ /* : patch : invert captions display (bug : don't display with parameter 'showon') */ .entry .wc-gallery-captions-showon .gallery-item .gallery-caption { bottom: 0; transition: all 0.3s; } .entry .wc-gallery-captions-showon .gallery-item:hover .gallery-caption { bottom: inherit; } /* test - fail as text non margin on mobile- remove content padding for allowing full width colors aplats */ .zzcontent .pad { padding: 0; } /* test : remove extra bottom space in post (actu) cards with highlight */ .blog .post, .single .post, .archive .post, .search .post, .search .page { margin-bottom: 0; } /* WP native gallery (applies to wc gallery too) : */ /* : adujst label */ .entry .gallery .gallery-caption { background: rgba(255,255,255,.75); color: var(--text); font-size: 0.8em; line-height: inherit; left: 0px; right: 0px; } /* : allow no margin */ .entry .gallery-nomargin .gallery { margin : 0!important } /* invert mode */ .invert { --text : var(--text-inv); color: var(--text); /* patch for text color - sad */ --title : var(--text-inv); --link : var(--link-inv); --link-hover : var(--link-inv-hover); --link : var(--link-inv-hover); --link-hover : var(--link-inv); --link : #FFC152; } /* plugin JP markdown */ .footnotes { font-size: 0.9em; color: var(--text-disabled); } .footnotes li { margin-bottom: 0.2em !important; } /* : change style for foonotes links - EXCLUDE mentions legales model */ body:not(.postid-7013) sup[id^="fnref"] a { zzcolor: var(--link-inv); zzbackground-color: var(--link); width: 1em; border: 1px solid var(--link); margin: 0 0 0 0.2em; padding: 0 0.2em 0 0.2em; } body:not(.postid-7013) sup[id^="fnref"] a:hover { color: var(--link-inv); background-color: var(--link); } /* : remove return link icon in footnotes */ .footnotes img.emoji { display : none !important; } /* : remove hr separator generated */ .footnotes hr { display: none; } /* plugin Trustindex.io */ .invert .ti-rating-text , .invert .ti-rating-text span , .invert .ti-rating-text strong { color: var(--text-inv) !important; } /* THM Hueman - ELA paddings (new 2024) : */ /* TO USE WHEN NO APLAT IS SET */ /* provides padding when page is set fullwidth (with theme default 'pad' reset to 0 ) AND no aplat is used (they have their own padding) : */ /* horizontal 1em padding ; vertical let unchanged */ .pad-x-1 { padding-left: 1em; padding-right: 1em; } /* Test - wc shortcodes : titles like cards tiltles in columns => make same size as cards titles in wc posts */ /* test only for h3 : */ .wc-shortcodes-column h3 { zzmargin: 0; zzmargin: 0 0 0.5em 0; font-weight: var(--font-card-title-weight); font-size: var(--font-card-title-size); } } /* test FAIL ?: override CSS vars on screen size :: */ /* : shadows : */ @media screen and (max-width: 480px) { :root { --sha-box : none; --sha-box : 0px 0px 20px rgba(255,0,0,1); } } /* test - ok - Bullet style for realisation > intervention */ .entry .intervention ul li { list-style-image: url('data:image/svg+xml,'); } .entry .intervention ul li::marker { font-size: 1.8em; line-height: 0.1; } /* testing - paragaph max heights : */ .mh-3 { transition : all 1s ease; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } .expanded { overflow : visible; display: inherit; } /* WC post cards 2024 visible */ /* only for template BOX (class=wc-shortcodes-posts-template-box) = NOT borderless ; not trivial ; WRn : different from layout : ex : layout="masonry" template="box"*/ .wc-shortcodes-posts-template-box .wc-shortcodes-post-border { zzborder-color: var(--card-border); zzbackground-color: var(--card-bkg); border-radius: 0.5em; box-shadow: var(--sha-box-7); transition: all 0.3s ease 0s; border: 1px solid var(--card-border); padding: 2em 1em 1em; } .wc-shortcodes-posts-template-box .wc-shortcodes-post-border:hover { box-shadow: var(--sha-box-3); } /* debug materialize not box (borderless) cards on wc posts */ .logged-in .wc-shortcodes-posts-template-borderless .wc-shortcodes-post-border { border: 3px dashed yellow; } /* hide h1 : do not if standard template page as no additionnal h1 is rendered (only h2 */)