@charset "UTF-8"; :root { /* ____ VARIABLES ____________ step 0830 */ /* colors */ --c-black : black; --c-white : white; --c-blue : blue; --c-silver : silver; --c-lightGray : #eef1f4; /*RGB 238 241 244 gris clair */ --c-blueFreeze : #eaf6ff; /* RGB 234 246 255 extra-light */ --c-blueIce : #d5edff; /* RGB 223 241 255 super-light */ --c-blueWind : #c9e8ff; /* RGB 201 232 255 real-light */ --c-blueSky : #a8daff; /* RGB 168 218 255 sky-blue */ --c-blueLight : #519fd6; /* RGB 81 159 214 unsat */ --c-blueMain : #2c6e9e; /* RGB 44 110 158 plain */ --c-blueFull : #1e4a6b; /* RGB 30 74 107 base */ --c-blueDark : #1a2a3a; /* RGB 26 42 58 dark */ --c-blueUnsat : #6491ad; /* RGB 100 145 173 medium */ --c-blueGray : #96b7cf; /* RGB 150 183 207 light */ --c-blueSatu : #3c96d7; /* RGB 60 150 215 real */ --c-blueTeal : #019fb8; /* RGB 1 159 184 tree-logo */ --c-blueCompl : #d39161; /* RGB 211 147 97 complem */ --c-papayawhip : #ffefd5; /*RGB 255 239 213 crème */ --c-sand : #d9cbb4; /*RGB 217 203 180 sable */ --c-mangue : #fda702; /*RGB 253 167 2 tree-logo */ --c-orange : #fa786b; /*RGB 250 120 107 tree-logo */ --c-tomate : #fc453d; /*RGB 252 69 61 tree-logo */ /* typo - size */ --fs-base : 85%; /* @ min 800 width */ --fs-h1 : 2rem; /* 32px */ --fs-h2 : 1.5rem; /* 24px */ --fs-h3 : 1.25rem; /* 20px */ --fs-h4 : 1.125rem; /* 18px */ --fs-bold : 1.075rem; /* 17.2px */ --fs-sortie : 1rem; /* 16px */ --fs-1 : 1rem; /* 16px */ --fs-btn : .9rem; /* 14.4px */ --fs-small : .75rem; /* 12px */ /* typo - weights */ --fw-regu : 400; /* normal */ --fw-semi : 500; /* semmibold */ --fw-demi : 550; /* semmibold */ --fw-bold : 600; /* bold */ --fw-extra : 700; /* extrabold */ /* shadow */ --shadow-card : 0 10px 30px rgba(0,0,0,0.08); /* gris lèger étendu */ --shadow-grey : 0 10px 20px rgba(0,0,0,0.2); /* gris lèger */ --shadow-btn : 8px 8px 8px -2px rgba(0,0,0,0.5); /* demi-noir */ --shadow-btn-hover : 2px 2px 3px rgba(50,50,50,0.5) inset, /* semi-gris int */ -2px -2px 5px rgba(255,255,255,0.5) inset; /* demi-blanc int */ --shadow-link : 2px 2px 4px rgba(255,255,255,0.5) inset, /* demi-blanc int */ -2px -2px 5px rgba(50,50,50,0.5) inset; /* demi-gris int */ --shadow-list : 0 2px 8px rgba(0,0,0,0.04); /* semi-noir */ --shadow-script : 15px 15px 20px rgba(100,100,100,0.15), /* semi-gris */ 0 0 20px 8px rgba(211, 147, 97,.2) inset; /* ~brownie */ /* 0 0 20px 8px rgba(234,246,255,1) inset; /* ~bluekind */ /* 0 0 25px 15px rgba(255,239,213,0.5) inset; /* demi-crème */ --shadow-glow : 0 0 20px 8px rgba(255,255,255,0.4) inset; /* semi-crème */ /* backgrounds */ --fixedbg-pos: 0px; --parallax-base-offset: -170px; --bk-whitegradrad : radial-gradient(at bottom right, rgba(255,255,255,0.6) 20%, white 80%); /* radial-gradient(at bottom right, rgba(255,255,255,0.2) 20%, transparent); alt DEV */ } @media { /* ____ FONT-FACE Atkinson ____step 0815 */ @font-face { font-family: 'AtkinsonNext'; /* regular */ src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-Regular.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-RegularItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; /* lights */ src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-ExtraLight.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-ExtraLight.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-ExtraLightItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-Light.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-Light.ttf') format('truetype'); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-LightItalic.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-LightItalic.ttf') format('truetype'); font-weight: 450; font-style: italic; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; /* bolds */ src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-Medium.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-Medium.ttf') format('truetype'); font-weight: 550; font-style: normal; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-MediumItalic.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-MediumItalic.ttf') format('truetype'); font-weight: 550; font-style: italic; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-SemiBold.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-SemiBoldItalic.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-ExtraBold.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'AtkinsonNext'; src: url('fonts/Atkinson/AtkinsonHyperlegibleNext-ExtraBoldItalic.woff2') format('woff2'), url('fonts/Atkinson/AtkinsonHyperlegibleNext-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; } .demofont { border-bottom: 1px solid silver; } .xlight { font-family: 'AtkinsonNext'; font-weight: 400; font-style: normal; } .xlight-it { font-family: 'AtkinsonNext'; font-weight: 400; font-style: italic; } .light { font-family: 'AtkinsonNext'; font-weight: 450; font-style: normal; } .light-it { font-family: 'AtkinsonNext'; font-weight: 450; font-style: italic; } .regu { font-family: 'AtkinsonNext'; font-weight: 500; font-style: normal; } .regu-it { font-family: 'AtkinsonNext'; font-weight: 500; font-style: italic; } .medi { font-family: 'AtkinsonNext'; font-weight: 550; font-style: normal; } .medi-it { font-family: 'AtkinsonNext'; font-weight: 550; font-style: italic; } .semi { font-family: 'AtkinsonNext'; font-weight: 600; font-style: normal; } .semi-it { font-family: 'AtkinsonNext'; font-weight: 600; font-style: italic; } .bold { font-family: 'AtkinsonNext'; font-weight: 700; font-style: normal; } .bold-it { font-family: 'AtkinsonNext'; font-weight: 700; font-style: italic; } .xbold { font-family: 'AtkinsonNext'; font-weight: 800; font-style: normal; } .xbold-it { font-family: 'AtkinsonNext'; font-weight: 800; font-style: italic; } } @media all { /* pack HEADER ____ rev0904 */ @media /* LAYOUT */ { header { top: 0; height: 62px; z-index: 1000; position: fixed; display: flex; } nav { right: 0; position: fixed; } nav .burger { height: 62px; width: 100%; display: block; } nav .burger span { transition: .25s; transform: rotate(0deg); display: inline-block; } nav .menu-drop { break-inside: avoid; page-break-inside: avoid; } nav .menu-drop > span { width: calc(100% - .75rem); display: inline-block } nav .menu-drop:nth-of-type(4) > span, nav .menu-drop:nth-of-type(5) > span, nav .menu-drop:nth-of-type(7) > span { width: calc(100% - 1rem); } nav .menu-list .break { height: 1px; overflow: visible; break-after: column; visibility: hidden; display: block; } nav .menu-list { gap: 0; column-count: 2; column-rule: 2px solid white; } .brand { gap: 10px; z-index: 100; display: flex; } .brand-logo img { height: 58px; margin-top: 2px; } .brand-name { align-content: center; } nav .burger div { top: 0; right: 0; position: absolute; } nav .burger div span { height: 3px; display: block; } nav .burger div:hover span { display: block; } nav input[type='checkbox'], nav input[type='checkbox']:not(:checked) ~ .menu-cont, nav .menu-list .break.sautdeux { display: none; } nav a, /* + */ .brand { color: var(--c-blueDark); } header { top: 0; position: fixed; } header::before { content: ' '; position: absolute; width: calc(100% + 2rem); } } @media (min-width: 450px) { nav .menu-list .break.sautdeux { display: block; } nav .menu-list { column-count: 3; } } @media (min-width: 750px) { nav .menu-list .break, nav .menu-list .break.sautdeux, nav input[type='checkbox'], nav .burger { display: none; } nav .menu-list { height: 60px; align-content: end; column-count: 5; column-rule: 2px solid transparent; display: flex; } /* safari */ nav .menu-drop { height: 60px; align-content: end; position: relative; } /* copy height + align to .menu-list for safari */ nav .menu-drop:hover .menu-subl { display: block; } nav .menu-subl { top: 100%; right: 0; left: -.5rem; z-index: 10; position: absolute; display: none; } nav .menu-subl a { display: inline-block; } .brand { gap: 15px; } nav #menuSublE { top: 60px; right: 0; left: revert; } nav input[type='checkbox']:not(:checked) ~ .menu-cont { display: flex; column-count: auto; justify-content: flex-end; } } @media /* DESIGN */ { header { padding: 0 18px 0 0; } nav .burger { padding: 0 1.5rem; font-size: 36px; line-height: 60px; text-align: right; } nav .menu-drop { padding: .25rem .5em; } nav .menu-drop:nth-of-type(4) > span, nav .menu-drop:nth-of-type(5) > span, nav .menu-drop:nth-of-type(7) > span { padding-left: .75rem; margin-left: 0; text-align: revert; } nav .menu-drop > span { padding-left: .75em; padding-right: .75rem; margin-left: .5rem; margin-right: -1rem; font-size: 1.2em; text-align: right; font-weight: var(--fw-bold); } nav .menu-subl a { padding-top: 2px; font-size: 1.1rem; text-align: left; font-weight: var(--fw-semi); } nav .menu-list { padding: 0.25rem .25rem .5rem; line-height: 1.3; } nav .menu-subl { padding-right: .5em; margin-left: .25em; } nav .menu-subl div { padding-top: .25rem; } nav a { padding: 0 .5em; width: 100%; white-space: nowrap; letter-spacing: 1px; font-weight: var(--fw-bold); display: inline-block; } nav input[type='checkbox']:checked ~ .burger span { transform: rotate(-90deg); } /* corrigé */ nav, nav .menu-list .break { width: 100%; } /* tuning rev0913 */ nav .contact span, nav .menu-drop > span { text-transform: uppercase; } @media (min-width: 750px) { nav .menu-drop > span { text-transform: revert; } } /* special for CONTACT rev 0913 */ nav .contact { padding: .25rem 0; } nav .contact span { color: white; border-style: solid; border-width: 1px; border-color: transparent transparent rgba(255,255,255,.5) transparent; text-shadow: -1px -1px 2px rgba(0,0,0,.5), 1px 1px 2px rgba(0,0,0,.5); } nav .contact a { color: white; padding-right: .75rem; margin-left: .5rem; margin-right: -1rem; font-size: 1.2em; font-weight: var(--fw-bold); } @media (min-width: 750px) { nav .contact { margin: 0; padding: 0; height: 60px; align-content: end; position: relative; } nav .contact span { text-transform: revert; /* counter above's */ display: inline-block; border-width: 1px; border-style: solid; border-color: transparent; text-shadow: -1px -1px 2px rgba(255,255,255,.5), 1px 1px 2px rgba(255,255,255,.5); margin: 0; width: auto; padding: .65rem 0; text-align: left; white-space: nowrap; } nav .contact a { color: var(--c-blueFull)!important; margin: 0 .5rem 0 0; font-size: 1rem; } } @media (min-width: 1000px) { nav .contact span { padding: .5rem 1rem; } /* = sync with nav .menu-drop > span below */ nav .contact a { font-size: 1.2rem; } } .brand { padding-left: 18px; } .brand-logo img { margin-bottom: -10px; } .brand-name { padding-top: .5rem; padding-left: .5rem; font-weight: 800; font-size: 1.7rem; letter-spacing: 2px; } .burger div { padding: 1.25rem 1.5rem; line-height: 4px; cursor: pointer; } .burger div span { width: 20px; } header { width: 100%; transform: translateY(0); transition: transform .5s; } header::before { margin-left: -1.5rem; } header.hidden { transform: translateY(-100%); } .syn { text-transform: uppercase; font-weight: 700; letter-spacing: .5px; } /* DEV TBC useless ? */ .spinner:hover .brand-name { transition: .15s; transform: scale(1.05); cursor: pointer; } .spinner:hover img { animation: spin 1.5s ease-in-out; } @keyframes spin { to { transform: rotateY(360deg); } } } @media (min-width: 360px) { nav { width: 100%; } nav .menu-subl { padding-right: 1em; margin-left: .5em; } nav .menu-drop:nth-of-type(1) > .menu-subl, nav .menu-drop:nth-of-type(2) > .menu-subl { margin-left: 8vw; } } @media (min-width: 450px) { nav .menu-drop > span { padding-left: .5rem; text-align: left; } nav .menu-drop:nth-of-type(1) > .menu-subl, nav .menu-drop:nth-of-type(2) > .menu-subl { margin-left: .5rem; } nav .menu-drop:nth-of-type(4) > span, nav .menu-drop:nth-of-type(5) > span, nav .menu-drop:nth-of-type(7) > span { padding-left: 1rem; } nav .menu-list { padding-left: calc(100% - 450px); } nav .menu-subl { padding-right: .5em; } } @media (min-width: 750px) { nav .menu-drop:nth-of-type(1) > .menu-subl, nav .menu-drop:nth-of-type(2) > .menu-subl { margin-left: .5rem; } nav .menu-drop:nth-of-type(4) > span, nav .menu-drop:nth-of-type(5) > span { padding-left: .5rem; } nav { width: auto; margin-right: 1rem; } nav .menu-drop { margin: 0; padding: 0; } nav .menu-drop > span { margin: 0; width: auto; padding: .65rem .5rem; text-align: left; white-space: nowrap; font-size: 1rem; } nav .menu-drop > span:nth-of-type(n) { width: auto; letter-spacing: 1px; } nav .menu-list { margin-right: -.75rem; padding: 0; } nav .menu-subl { padding: 0 0 .5rem; } nav .menu-subl a { width: 100%; padding: .5rem 0 .5rem .75rem; text-align: left; white-space: nowrap; font-size: .9rem; } nav .menu-subl div { width: 100%; } nav #menuSublE a { text-align: right; padding: 0.5rem .65rem .5rem 0; } nav #menuSublE, nav #menuSublC, nav #menuSublB { min-width: 130px; } nav input[type='checkbox']:not(:checked) ~ .menu-cont { width: auto; } .brand-name { font-size: 2rem; } } @media (min-width: 1000px) { nav .menu-drop > span { font-size: 1.2rem; padding: .5rem 1rem; } nav .menu-subl a { font-size: 1rem; padding: 0.5rem 0 .5rem 1rem; } nav { margin-right: 3rem; } nav #menuSublC, nav #menuSublE, nav #menuSublB { min-width: 140px; } .brand-name { font-size: 2.2rem; letter-spacing: 2px; } } @media (min-width: 1200px) { nav .menu-list { font-size: 1.1rem; } } @media /* COLORS */ { header { background-color: rgba(255,255,255,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-style: solid; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border-image-slice: 1; border-image-source: linear-gradient(to left, #fff, #ddd, #999, #fff, #fff); border-width: 2px; } nav .menu-cont { background-image: url('img/03_paysage_vierge_was.jpg'); background-attachment: fixed; background-size: cover; background-position-x: 30%; background-position-y: 0; box-shadow: var(--shadow-grey); } nav .menu-drop > span { color: white; border-style: solid; border-width: 1px; border-color: transparent transparent rgba(255,255,255,.5) transparent; text-shadow: -1px -1px 2px rgba(0,0,0,.5), 1px 1px 2px rgba(0,0,0,.5); } nav .menu-list { background-color: rgba(255,255,255,.6); border-width: 1px; border-image-source: linear-gradient(to left, #777, #ddd, #999, #fff, #777); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-style: solid; border-image-slice: 1; } nav .menu-subl a { color: black; } nav a:hover { background: rgba(255,255,255,.25); } .brand { background: linear-gradient(to right, white 15%, transparent 60%); } .burger div span { background: var(--c-blueMain); border-radius: 2px; } .brand-name { color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 2px 15px black; } .burger div:hover span { background: white; box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 2px 15px black; } .spinner:hover .brand-name { text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 5px 20px rgb(50,50,50); } } @media (min-width: 450px) { nav .menu-subl a { color: var(--c-blueFull); text-shadow: -1px -1px 2px rgba(255,255,255,.5),1px 1px 2px rgba(255,255,255,.5); } } @media (min-width: 600px) { nav .menu-list { border-width: 2px; } /* but zero since 750 ? */ } @media (min-width: 750px) { nav { background: revert; background-image: none; } nav .menu-cont { background: revert; box-shadow: revert; } nav .menu-drop > span { text-shadow: -1px -1px 2px rgba(255,255,255,.5), 1px 1px 2px rgba(255,255,255,.5); /* + borders */ border-width: 1px; border-style: solid; border-color: transparent; color: var(--c-blueFull); } nav .menu-drop > span:hover { box-shadow: var(--shadow-grey); border-radius: 15px 15px 0 0; /* + borders */ border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-top-width: 1px; border-top-style: solid; border-top-color: white; border-left-width: 1px; border-left-style: solid; border-left-color: white; } nav .menu-list { background: revert; backdrop-filter: revert; border-width: 0; border-radius: 0 0 12px 12px; } nav .menu-subl { background: var(--c-blueGray); box-shadow: var(--shadow-grey); /* + borders */ border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-left-width: 1px; border-left-style: solid; border-left-color: white; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; } nav .menu-subl a { border-bottom-width: 0; border-bottom-style: solid; border-bottom-color: var(--c-blueGray); color: white; /* + txt-sh */ text-shadow: -1px -1px 2px rgba(0,0,0,.5), 1px 1px 2px rgba(0,0,0,.5); } nav .menu-subl div { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--c-blueGray); background: var(--c-blueMain); } } /* nav #menuSublD div:nth-child(2) a { color: rgba(120,120,120,.5); text-shadow: none; } =========== DEV make it gray */ } @media (min-width: 4499px) { /* rev0821, monocol-alternative (max 449px) DEV */ nav .menu-list { column-count: 1; background-color: rgba(255,255,255,.4); line-height: 1.1; } nav .menu-drop > span { text-align: left!important; margin-left: 5.5rem!important; } nav .menu-subl a { text-align: left!important; margin-left: 13rem!important; } nav .menu-subl { margin-left: 0!important; } } @media all { /* GENERIX ___ step 0815+ */ @media /* ___ html, body, item, subitem ___ */ { * { box-sizing: border-box; margin: 0; padding: 0;} html { font-size: 85%; /* scroll-padding-top: 150px; scroll-padding-bottom: 150px; */ } body { line-height: 1.4; font-family: 'AtkinsonNext'; font-weight: 450; /* was font-weight: var(--fw-semi); */ } a { text-decoration: none; color: blue; } p { font-size: 1rem; text-align: justify; padding-bottom: 1rem; } body { overflow-x: hidden; } /* layout */ .main { margin-top: 60px; } .item, .item > a { display: block } .item > a { height: 1rem; } .item > a::before { content: 'S Y N A P S E'; display: block; visibility: revert; } .subitem > a { height: 5px; display: block; } .subitem > a::before { content: '.'; visibility: hidden; } .item.appr > a::before, .item.vals > a::before { content: 'S Y N A P S E — A S S O C I A T I O N'; } .item.cours > a::before, .item.atels > a::before { content: 'S Y N A P S E — A C T I V I T É S'; } .item.mesrB > a::before, .item.mesrR > a::before { content: 'S Y N A P S E — M E S U R E S'; } .item.reflets > a::before, .item.recits > a::before, .item.regards > a::before, .item.galerie > a::before { content: 'S Y N A P S E — P A R T A G E S'; } .formul > a::before { content: 'S Y N A P S E — C O N T A CT'; } /* design */ .item { margin-bottom: 2.5rem; } .item > a { margin-top: 1rem; } .item > a::before { font-size: .75rem; text-align: center; } .item > a { margin: auto auto 5rem; width: 75%; } .item .intro { padding-top: 1rem; font-weight: var(--fw-semi); } .subitem > a { margin-bottom: 3rem; margin-top: 1rem; } .subitem > a { margin: .5em auto 2em; width: 50%; } .intro ul { margin-left: 1.5rem; margin-bottom: 1.5rem; list-style: '• ' outside; } .intro ul li { padding-left: .5rem; padding-top: .5rem; } @media (min-width: 360px) { html { font-size: 90%; } } @media (min-width: 450px) { html { font-size: 90%; } .item { margin: .5rem 1.5rem 1.5rem; } } @media (min-width: 600px) { html { font-size: 95%; } .item { margin: 1rem 2rem 2rem; } } @media (min-width: 750px) { html { font-size: 97.5%; } .item { margin: 1.5rem 2.5rem 2.5rem; } body { line-height: 1.5; } } @media (min-width: 1000px) { html { font-size: 100%; } body { line-height: 1.6; } } @media (min-width: 1500px) { html { font-size: 105%; } } /* colors */ body { background-image: url('img/11 (03_file_squared.jpg'), url('img/bksubstit.png'); /* dual */ background-attachment: fixed, fixed; background-size: cover, cover; background-position: center calc(50% + 150px), center center; background-repeat: no-repeat, no-repeat; /* was background-image: url('img/03_paysage_vierge_was.png'); background-position-x: 30%; background-size: auto 100%;*/ } .item { background-size: cover; } .item > a { background: linear-gradient(to right, var(--c-blueMain), var(--c-blueSky), #fff, var(--c-blueSky), var(--c-blueMain)); border-radius: 10px; } .subitem > a { background: silver; border-radius: 5px; } } @media /* ___ headers 1 - 4 ___ rev0822, reduce transitin time to zero */ { .pr, .up { display: none; } /* prefix + up-links, hidden by default */ /* layout */ h2, h3, h4 { top: 0; /* position: sticky; --- pro sortie --- */ align-items: start; display: inline-flex; } h1 { z-index: 80; top: 0; /* position: sticky; --- pro sortie --- */ text-transform: uppercase;} h2 { z-index: 90; } h3 { z-index: 0; } /* design */ /* DEV tuning in progress */ h1, h2, h3, h4 { line-height: 1.2; transition: 0s; } h1 { font-size: var(--fs-h1); margin-bottom: 1rem; padding: 6rem 1rem 3rem; } h2 { font-size: var(--fs-h2); margin: 1rem 0 1.5rem 1rem; width: 100%; } h3 { font-size: var(--fs-h3); margin: 1rem 0 1rem 0; } h4 { font-size: var(--fs-h4); margin: 1rem 0; } h2.over-mlist .lib { text-indent: -2.35rem; margin-left: 2.5rem; display: inline-block; } .item > .gapH { height: 3rem; display: block; /* background: green; */ } @media (min-width: 360px) { h1 { letter-spacing: .5px; } h2 { letter-spacing: .5px; } } @media (min-width: 450px) { h1 { letter-spacing: 1px; padding-bottom: 0; } h2 { letter-spacing: 1px; padding-bottom: 0; padding-left: 0; } } @media (min-width: 600px) { h1 { letter-spacing: 3px; } h2 { letter-spacing: 2px; } h3 { letter-spacing: 1px; } h4 { letter-spacing: 1px; } } @media (min-width: 750px) { .item > .gapH { height: 1.5rem; } } /* colors */ h1 { color: var(--c-white); background-color: rgba(255,255,255,0.0); /* + border + shadows */ border-image: linear-gradient(to right, white, silver, var(--c-blueFull), white) 1; border-width: 0; border-style: solid; box-shadow: 0 1rem 1rem rgba(255, 255, 255, 0.0); text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, .5); } h2 { color: var(--c-blueMain); } h3 { color: var(--c-blueFull); } h4 { color: var(--c-blueDark); } } @media /* ___ card-texte, page-links, sublist */ { /* layout */ .page-links { flex-wrap: wrap; justify-content: space-between; column-count: 5; display: revert; } .page-links a { display: block; } .sublist > a::before { content: '.'; visibility: hidden; } /* design */ .card-texte { width: 100%; max-width: 920px; padding: 1.25rem; } .page-links a { max-width: 120px; font-weight: var(--fw-bold); padding: 9px 18px 9px 12px; transition: box-shadow 0.3s; } .sublist > a { margin-bottom: 15px; } @media (min-width: 450px) { .page-texte { padding: 1rem .75rem; } } @media (min-width: 1000px) { .card-texte { margin: auto; padding: 2.5rem; } .page-texte { padding: 2rem 1.5rem; } } /* colors */ .card-texte { background: var(--c-white); box-shadow: var(--shadow-card); border-radius: 24px; } .page-texte { background-color: var(--c-lightGray); } .page-texte header { background: rgba(255,255,255,.75); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(0,0,0,.08); } .page-links a { background-color: var(--c-papayawhip); color: #555; border-radius: 12px; box-shadow: var(--shadow-link); } .page-links a:hover { box-shadow: var(--shadow-btn-hover); } } @media /* ___ hero-photo + titbkg ___ */ { /* layout */ .hero-photo { content: ' '; box-shadow: 0 0 80px 80px var(--c-white) inset; position: relative; /* + */ background-repeat: no-repeat, no-repeat; background-size: auto auto, cover; } /* incl JS managmt for attach+position */ .titbkg { background-repeat: no-repeat; background-size: cover; /* incl JS managmt for attach+position */ flex-direction: column; height: 45vW; min-height: 300px; overflow: hidden; justify-content: end; display: flex; } @media (min-width: 450px) { .titbkg { height: 200px; min-height: auto; } } @media (min-width: 750px) { .titbkg { min-height: 150px; } .item#asso .titbkg { height: 250px; } } /* design */ .titbkg { margin-top: -8rem; margin-left: -1.15rem; margin-right: -1.15rem; } @media (min-width: 600px) { .titbkg { margin-left: -2rem; margin-right: -2rem; } } /* background-position managmt (incl pro iOS, mit JS) */ /* default */ .bg-fixed-native .hero-photo { background-attachment: scroll, fixed; background-position: center center, center var(--parallax-base-offset, 70px); } .bg-fixed-native .titbkg { background-attachment: fixed; background-position: center var(--parallax-base-offset, 0); } /* iOS : piloté par JS, jamais fixed */ .bg-fixed-emulated .hero-photo { background-attachment: scroll, scroll; background-position: center center, center var(--fixedbg-pos, 70px); } .bg-fixed-emulated .titbkg { background-attachment: scroll; background-position: center var(--fixedbg-pos, 0px); } } } @media all { /* CHAPTER ______ step 0830+ */ @media (min-width: 9999px) { /* CHAP roots previous ----- rev0904 > see p99_html */ } @media { /* appr */ /* design */ .item#appr li p { margin-top: .5rem; } .item#appr .grid-table { margin-left: -1rem; padding: 0; } .item#appr .grid-table .header { font-size: 1rem; } .item#appr .grid-table div { font-size: .9rem; } @media (min-width: 450px) { .item#appr .titbkg { margin-top: -8rem; } /* special */ .item#appr li p { margin-top: .25rem; } } /* colors */ .item#appr .grid-table { background: transparent; box-shadow: none; } } @media { /* vals */ /* design */ .item#vals .list li { margin-left: 0; } /* colors */ .item#vals .list li { color: revert; } /* >> vers templates li_-VS ?? */ } @media { /* cour !! TBC (no more #cour, incl en sortie) */ /* layout */ .cours h3 { z-index: 0; } .item#cour .submenu h3 { height: 3rem; } /* design */ .item#cour .subitem h3 { margin: 1rem 0 0.5rem 2.5rem; } .item#cour h3 { margin: 0 0 0.5rem; } .item#cour li { font-size: 1.1rem; } /* to template ? */ .item#courL .list { margin: -1rem 0 1.5rem; } .item#courL .list li { margin-left: 1rem; font-size: 1rem; padding: 0; color: revert; line-height: 1.6; font-weight: 500; } .cours ul { list-style: '⏵' outside; } .cours .intro--panel ul { list-style: '▶' outside; } .cours .subitem > ul { padding-bottom: 1rem; margin-left: 1.5rem; list-style: '▶ ' outside; } .cours .subitem > ul li { padding-bottom: 1rem; } /* colors */ .item#cour li { color: var(--c-blueFull); } } @media { /* atelL rev0821 */ /* layout */ .atels h3 { z-index: 0; } /* design */ /* .item#atelL .over-link { margin: .5rem 0 0.5rem 2.5rem; font-weight: var(--fw-bold); } .item#atelL .over-link::before { font-size: 1.5rem; vertical-align: sub; } */ .item#atelL .sublist li { margin: 0; padding: .25rem 0 0; font-weight: 500; } .item#atelL .sublist ul { margin: .5rem 0 .5rem 1rem; list-style: '⏵'; } .item#atelL .badge-L { letter-spacing: 1px; } .item#atelL .texto { padding-right: 1.5rem; } /* .item#atelL h2.bas { padding-top: 1.5rem; padding-bottom: .5rem; } */ .item#atelL h3 { margin: .5rem 0 1.5rem 0; } .item#atelL h4 { font-weight: var(--fw-semi); } .item#atelL h4 span { letter-spacing: .5px; } .item#atelL li { margin-bottom: 0.5rem; line-height: 1.6; } .item#atelL .resum { margin-top: 1rem; } .item#atelL .resum .sublist ul { margin-top: 0; } @media (min-width: 450px) { .item#atelL .descr { margin: 0 .5rem; } } @media (min-width: 750px) { .item#atelL .descr { margin: 0 .5rem; } .item#atelL .texto { margin-right: -.75rem; padding-bottom: .25rem; } .item#atelL .texto p { padding-right: 1rem; } } } @media { /* atelD rev0821 -alt no badge but- ( atelD ) */ /* layout ( mostly counters GEN for html 'badge-kind' ) */ .atelD h2 .lib:before /* counter standard symbol, cause imbricated H1 + H2 */ { display: none; } .atelD h2 { font-weight: var(--fw-semi); position: revert; display: block; } /* counters */ .atelD .pr { color: black; font-size: 1rem; text-shadow: none; display: block; } .atelD h2, /* + */ .atelD .pr > span { width: 100%; font-weight: 600; letter-spacing: 1px; display: block; } /* .atelD .pr > span::after { content: 's de Reconnexion'; transform: translate(-.4rem, .05em); display: inline-block; } */ /* design */ .atelD .pr { margin-left: 3rem; } .atelD .intro ul { list-style: '▶'; } .atelD h1 { /* margin-bottom: 2rem; */ text-indent: 0; padding: 1rem 1rem 0 0; } .atelD h1 > .lib { margin-left: 1rem; } .atelD h1 > .lib s { width: 5px; } .atelD h2 { margin: .5rem 0; padding: 0; } .atelD h2 > .lib { margin: 0; text-indent: 0; font-size: var(--fs-h3); letter-spacing: 2px; text-transform: uppercase; } .atelL h4 { margin-bottom: 0; } /* counter std */ .atelL .subitem > h4 { text-decoration: underline; } @media (min-width: 750px) { .atelD h1 { padding-left: 2rem; letter-spacing: 2px; } .atelD .detail { margin-top: 1.5rem; } /* pro gap under .titbkg */ } } @media { /* mesr !! TBC .mesr / .mesrs ?? >> layout ok up to 750px */ /* design */ .mesrs ul h3 { margin-bottom: .5rem; } /* colors */ .item#mesrL h4 { color: var(--c-blueMain); } .item#mesrL ol h2 { text-shadow: 0 0 10px var(--c-white); } .item#mesrL { /* background-attachment: scroll, fixed; background-repeat: no-repeat; background-size: auto auto, cover; background-position: center center, center; */ background-image: radial-gradient(at bottom right, rgba(255,255,255,0.7) 20%, var(--c-white) 80%), url('img/01 johan-rev.jpg'); } .item#mesrR { background-image: radial-gradient(at bottom right, rgba(255,255,255,0.7) 20%, var(--c-white) 80%), url('img/R3-tree-src.jpg'); } .item#mesrB { background-image: radial-gradient(at bottom right, rgba(255,255,255,0.7) 20%, var(--c-white) 80%), url('img/R4-sugar-src.jpg'); } /* chap: mesr + .titbkg */ .mesrL .subitem .titbkg { height: 30vw; min-height: 200px; flex-direction: row; align-items: end; text-align: left; /* layout + */ text-shadow: 0 0 5px var(--c-black); color: var(--c-white); /* colors */ margin: -1rem 0 0; margin-bottom: 1rem; padding: 0 1.25rem 1.25rem 2.5rem; } /* design */ .mesrs .submenu .titbkg { height: 20vw; } .mesrs h2.over-mlist { margin: 0; padding: 0; } .mesures .submenu a { color: black; } } @media { /* parta to review/renew (keep used-refl only), + keep/dupli/retrieve 'rega-with-list' spare chap-templ*/ .item#parta .gridl-des1 .gridl-head h2::before { content: '≡'; } /* as for rega >> #rega > pro chap-list */ /* repetita pro sub-menu-list */ .item#parta .list .gridl-body a::before { content: '💬 ';} /* as for rega (was rega-list - OFF) refl-list useless/reserve */ /* layout */ .item#parta .gridl-head p { display: none; } .item#parta .gridl-3col .gridl-body { grid-template-columns: 1fr 1fr!important; } .item#parta .gridl-des1 .gridl-head h2::before { position: relative; display: none; } /* = */ .item#parta .list .gridl-body a::before { position: relative; display: inline-block; } /* bubble */ /* design */ .item#parta { line-height: 1.2em; } .item#parta .item:nth-child(even) .pict { padding-right: 3rem; } .item#parta .item:nth-child(odd) .pict { padding-left: 3rem; } .item#parta .titre .lib::before { padding-left: .5rem; width: .5rem; font-size: 1.2rem; font-weight: var(--fw-semi); /* SYMBOL +margin +scale */ margin-top: .2rem; transform: scale(1,1.2); -webkit-transform: scale(1,1.2); } .item#parta h2.titre .lib::before { margin-top: -1px; } .item#parta h3.titre .lib::before { margin-top: 0; } .item#parta .over-mlist ul { margin: .5rem 0 .5rem 3.5rem; } .item#parta .over-mlist .lib { margin: 0; } .item#parta .over-mlist .lib::before { margin-left: 1.5rem; } .item#parta .items h3 { margin-left: 2rem; margin-bottom: 2rem; text-indent: -2rem; display: inline-block; } .item#parta .gridl-card li { margin-left: .5rem; } @media (min-width: 600px) { .item#parta h2 .lib { margin-left: 1.5rem; } .item#parta .gridl-head .lib { margin-left: 0; } } @media (min-width: 750px) { .item#parta .gridl-head p { display: block; font-size: .8rem; } .item#parta .gridl-card p { display: none; } } /* colors */ .item#parta .gridl-card.parallax { background-image: linear-gradient(to right, var(--c-white) 5%, rgba(255,255,255,.7) 20%), url('img/R5-rain-src.jpg'); } .reflets .titbkg { height: 3em!important; min-height: revert !important; } /* since no background */ .reflets .sortie .titbkg { height: revert; } } @media { /* cont */ /* design */ .item#cont .subitem > a { margin-bottom: 2rem; } .item#cont h2 { padding: 0; } .item#cont td, footer table td { vertical-align: top; } /* .item#cont ul { list-style: none; } */ } } @media all { /* TEMPLATES _ rev0831 */ @media /* ___ various shorts ( cita, gap, em, s+ ) _rev0831__ */ { .revision { width: 0; height: 0; overflow: hidden; } /* invisible pages' data-revision */ .super { font-variant-position: super; } /* exposants */ .cita { font-style: italic; font-weight: var(--fw-demi); } .cita::before { content: '«'!important; } /* generic */ .cita::after { content: '»'!important; } /* > galy */ .item#galy .cita::before { content: ''; } /* counter */ .item#galy .cita::after { content: ''; } .item#galy .cita .lib::before { content: '«'; } /* override .galery h3 .lib::before */ .item#galy .cita .lib::after { content: '»'; } .gap { flex-grow: 1; } .list li { margin: 0 0 0 1.5rem; font-size: 1.1rem; padding: .25rem 0; color: var(--c-blueFull); } /* > homep ? */ .nowrap { text-wrap: nowrap; } s.revdown { display: inline-block; position: relative; top: .15rem; text-indent: 0; text-decoration: none; } /* + provision */ .reversi { display: inline-block; position: relative; top: .06rem; transform: /* rotate(180deg) */ scaleX(-1); } .reverso { display: inline-block; position: relative; top: .15rem; /* transform: rotate(-45deg); */ } nav em { width: 0; display: none; background: none!important; } @media (min-width: 750px) { nav em { width: calc((100vw - 800px) / 6); display: revert; margin-left: -.125rem; margin-right: -.125rem; } } @media (min-width: 1000px) { nav em { width: 20px; } } } @media /* ___ intro--panel + emph ___ ( appr, vals, mesr ) rev0821 */ { .intro--panel { margin: 0 -1.15rem 1rem -1.15rem; padding-bottom: 1rem; } .emph { font-weight: var(--fw-norm); padding: 1rem; } .intro--panel p { font-weight: var(--fw-semi); font-size: var(--fs-bold); text-align: left; margin: 0 -1.15rem; padding: .5rem 1.5rem .5rem 2rem; } @media (min-width: 450px) { .intro--panel p { margin: 0 0 0; padding-left: 1.25rem; padding-right: 1.25rem;} } @media (min-width: 600px) { .intro--panel p { margin: -.5rem 0 0; padding-left: 2rem; padding-right: 2rem;} } @media (min-width: 750px) { .intro--panel p { margin: -.5rem 0 0; padding-left: 1.5rem; padding-right: 1.5rem;} } .intro--panel p:first-of-type { padding-top: .5em; } .intro--panel p:last-of-type { padding-bottom: .5em; } .intro--panel ul { margin-left: 3.5rem; list-style: '▲ ' outside; } /* CHAP vals */ .intro--panel ul li { padding: 0 1.5rem 1rem .5rem; } /* CHAP vals */ /* .item#vals .intro--panel { margin-bottom: 3rem; } /* CHAP vals */ } @media /* ___ btn more/less ___ (prov) */ { /* layout */ .btn-more, .btn-less { position: relative; } /* templatation ! */ /* design */ .btn-more button, .btn-less button { font-weight: var(--fw-bold); letter-spacing: 1px; transition: box-shadow 0.1s; padding: 0 12px 6px; } .btn-more, .btn-less { width: 100%; text-align: right; } /* colors */ .btn-less button { border-radius: 0 0 12px 12px; border-top-width: 0; background: var(--c-papayawhip); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25); border-color: var(--c-silver); } .btn-less button:hover { box-shadow: 0 12px 12px -2px rgba(0, 0, 0, .25); } .btn-more button { border-radius: 0 0 12px 12px; border-top-width: 0; background: var(--c-white); box-shadow: 0 12px 12px -2px rgba(0, 0, 0, .25); border-color: var(--c-silver); } .btn-more button:hover { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25); } } @media /* ___ formto + mailto ___ */ { /* design */ .mailto { text-align: right; } .formto a, .mailto a { margin: -.5rem 0 1rem; padding: 10px 12px; transition: box-shadow 0.5s; display: block; } .formto, .mailto { margin: 1.5rem; } .formto { margin-left: 0; } /* counter above */ .mailto { margin-right: 0; } /* counter above */ @media (min-width: 750px) { .formto p, .mailto p { height: 4em; } } /* layout + colors */ .formto a, .mailto a { color: blue; box-shadow: var(--shadow-btn); background-color: var(--c-lightGray); /* + common borders */ border-width: 1px; border-style: solid; border-color: silver; } .formto a { border-radius: 12px 12px 12px 0; } /* from left */ .mailto a { border-radius: 12px 12px 0 12px; } /* from right */ .formto a:hover, .mailto a:hover { box-shadow: var(--shadow-btn-hover); } /* special for activités */ span.formto { display: inline-block; margin: 0; } span.formto a { padding: .25rem 1rem; margin: 0; } } @media /* ___ text-desCard ___ */ { .text-desCard dl { margin-top: 0.25rem; margin-bottom: 2rem; } .text-desCard dt { margin-top: 2rem; } } @media /* ___ link--dnl ___ + .upload >> !rev: .dnlod -- not used anymore ?¿ (rev0831) > papaywhip up-right cornered - provision (since rev0831) */ { .link--dnl .dnload:before { width: 0; content: ''; top: 0; right: 0; position: absolute; display: block; } .link--dnl .dnload { width: calc(100% - 4rem); } .link--dnl .dnload { margin: .5rem 1.5rem 3rem; padding: 1rem .5rem 1.5rem 2rem; transition: .25s; } .link--dnl .dnload a { margin-left: 1.5rem; text-indent: -1.5rem; } /* colors */ .link--dnl .dnload:before { border-width: 0 16px 16px 0; border-style: solid; border-color: var(--c-sand) white; } .link--dnl .dnload { background-color: var(--c-papayawhip); box-shadow: 0 10px 10px -5px rgba(0,0,0,.5), 0 0 0 0 rgba(0,0,0,.5) inset; } .link--dnl .dnload:hover { box-shadow: 0 10px 0 -5px rgba(0,0,0,0), 8px 9px 1px -8px rgba(0,0,0,.5) inset; } } @media /* ___ list--ol ( appr + vals ) _*/ { .list--ol { margin-left: 1.5rem; } .list--ol li { margin-left: 2rem; /* color: black; */ } .list--ol p { margin-left: -1.25rem; } .list--ol .lib { text-indent: -1.25rem; } } @media /* ___ titsubt ( appr, vals ) */ { .titsubt h4 { display: block; } .titsubt h4 { padding: 1rem; margin-bottom: 0; color: var(--c-white); text-shadow: 0 2px 8px rgba(0,0,0,1); /* var(--shadow--list);*/ /* CHAP appr, vals */ font-weight: var(--fw-bold); font-size: var(--fs-h3); } .titsubt h4 span { display: block; } @media (min-width: 450px) { .titsubt { padding: 0 2.5rem 0 1.5rem; } } @media (min-width: 1000px) { .titsubt h4 span { display: inline; } } } @media /* ___ list--indent ( appr ) ___ */ { .list--indent li { margin: .5rem 0 .5rem 2rem; font-weight: var(--fw-semi);} /* renew */ .list--indent { margin-bottom: 2rem; } /* renew */ } @media /* ___ gridt-desVS ( appr )___ */ { /* layout */ .gridt-desVS { grid-template-columns: 1fr; gap: 0.3rem 0; display: grid; } .gridt-desVS .colL::after { z-index: 10; top: .25rem; content: 'versus'; position: relative; display: block; } .gridt-desVS .colL { height: calc(100% - 1rem - .5rem); } @media (min-width: 450px) { .gridt-desVS { grid-template-columns: 1fr 1fr; gap: 0 1rem; } .gridt-desVS .colL { height: revert; } .gridt-desVS .colL::after { left: calc(50% + 1rem); top: -1.25rem; } .gridt-desVS .header { height: calc(100% - 1rem - .5rem); text-align: center;} .gridt-desVS span::before { content: '\A'; white-space: pre-wrap; } } /* design */ .gridt-desVS { max-width: 920px; font-weight: var(--fw-semi); } .gridt-desVS .colL::after { width: 50px; height: 18px; margin: auto; padding: 5px; text-align: center; } .gridt-desVS .colR { margin-top: -1.5rem; } .gridt-desVS div { letter-spacing: 0.01em; padding: 0.25rem 0.75rem; text-align: left; } .gridt-desVS div:nth-child(1) { margin-right: .75rem; } .gridt-desVS div:nth-child(2) { margin-left: .75rem; padding-left: 5px; } .gridt-desVS div:nth-child(even) { padding-left: 1.5rem; } .gridt-desVS div.header { padding-top: .75rem; padding-bottom: .75rem; font-weight: var(--fw-semi); } .gridt-desVS span { white-space: nowrap; } @media (min-width: 360px) { .gridt-desVS .colL::after { height: auto; } .gridt-desVS div { font-size: 1rem; } } @media (min-width: 450px) { .gridt-desVS { margin: 1rem -1rem; } .gridt-desVS .colR { margin-top: .25rem; } .gridt-desVS .header { text-align: center; padding-top: 1rem; padding-right: .5rem; } .gridt-desVS div { margin: .25rem 0; padding: .3rem .75rem; order: unset !important; font-size: .9rem; } .gridt-desVS div:nth-child(1) { margin-left: .75rem; margin-right: revert; } .gridt-desVS div:nth-child(2) { margin-right: .75rem; margin-left: revert; } .gridt-desVS div:nth-child(even) { padding-left: 1rem; } } @media (min-width: 750px) { .gridt-desVS div { font-size: 1rem; } } /* colors */ .gridt-desVS { border-radius: 1.5rem; } .gridt-desVS .colL { background: #d0ddf5 !important; } /* blueish */ .gridt-desVS .colR { background: #c5ead8 !important; } /* greenish */ .gridt-desVS .colL::after { border-radius: 15px; border-width: 1px; border-style: solid; border-color: silver; background: white; box-shadow: 0 0 5px silver; } .gridt-desVS div { border-radius: 0.5rem; border-width: 1px; border-style: solid; border-color: var(--c-blueWind); color: var(--c-blueFull); box-shadow: 0 1px 2px rgba(0,0,0,0.02); } .gridt-desVS div:nth-child(even) { background: linear-gradient(to left, rgba(197,234,216, 1), rgba(197,234,216, 0)); } .gridt-desVS div:nth-child(odd) { background: linear-gradient(to right, rgba(208,221,245, 1), rgba(208,221,245, 0)); } .gridt-desVS div.header { color: #0b1b33; border-color: #dce2ec; } /* DEV que quoi ? */ .gridt-desVS div:last-child { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e9edf4; } @media (min-width: 450px) { /* inverse gradients */ .gridt-desVS div:nth-child(even) { background: linear-gradient(to right, rgba(197,234,216,1), rgba(197,234,216,0)); } .gridt-desVS div:nth-child(odd) { background: linear-gradient(to left, rgba(208,221,245,1), rgba(208,221,245,0)); } } } @media /* ___ gridt-desRom ( appr ) ol _*/ { .gridt-desRom li::marker { font-family: arial; } .gridt-desRom { margin-left: 1.5rem; } .gridt-desRom li h3 { margin-left: .25rem; margin-bottom: 0; display: inline; } .gridt-desRom li p { margin-left: -1.5rem; margin-top: 1rem!important; } .gridt-desRom li { list-style: upper-roman inside; } @media (min-width: 450px) { .gridt-desRom li { list-style: upper-roman outside; } } /* @media (min-width: 600px) { .gridt-desRom li { list-style: upper-roman inside; } } */ } @media /* ___ gridt-desSqr ( appr ) ul_ */ { .gridt-desSqr ul { list-style: none; padding: 0; } .gridt-desSqr li { margin-bottom: 2rem; align-items: start;/* = up */ display: flex; } .gridt-desSqr li::before { min-width: 35px; text-align: center; content: '⭘'; display: inline-block; } } @media /* ___ subintro ( atel + ) ___ */ { .subintro { margin-top: 1.5rem; } .subintro { font-weight: var(--fw-semi); } .subintro ul { margin: .25rem 0 .5rem 1rem; list-style: circle; } .subintro li { margin-bottom: .25rem; } @media (min-width: 600px) { .subintro { margin-top: 2rem; } .subintro p { padding-bottom: 0; } } } @media /* ___ sublink ( atel ) ___ */ { .sublink { margin-top: 1rem; margin-left: 0; font-weight: var(--fw-semi); } @media (min-width: 600px) { .sublink { margin-top: 0; margin-left: 1rem; } } } @media /* ___ dual - ( contact ) */ { .contact .dual { flex-direction: column; display: flex; max-width: 100%; } .contact .dual .subintro { margin-top: 0.5rem; } .contact .dual .sublist ul { margin: .5rem 0 .5rem 1rem; padding-left: 0; list-style: disc; } .contact .dual-gap { display: none; } .contact .dual-one .subintro { margin-top: 2rem; } .contact .dual-two { margin-top: -1.75rem; } @media (min-width: 600px) { .contact .dual { flex-direction: row; gap: 2rem; } .contact .dual > div { width: calc(50% - .5rem); } .contact .dual-gap { display: block; } .contact .dual-gap { display: none; } /* counter */ } } @media /* ___ dual - ( atel only ) TBC */ { .atels .dual { flex-direction: column; display: flex; max-width: 100%; } .atels .subitem .subintro p { font-weight: var(--fw-regu); } .atels .dual .subintro { margin-top: 0.5rem; } .atels .dual .sublist ul { margin: .5rem 0 .5rem 1rem; padding-left: 0; list-style: '⏵'; } .atels .dual-gap { display: none; } .atels .dual h4 { margin-bottom: revert; } .atelD .dual-one .subintro { margin-top: 2rem; } .atelD .dual-two { margin-top: -1.75rem; } @media (min-width: 600px) { .atels .dual { flex-direction: row; gap: 3rem; } .atels .dual > div { width: calc(50% - .5rem); } .atels .dual-gap { display: block; } .atelL .dual-gap { display: none; } /* counter */ } } @media /* ___ gridl mix ( cour + ?) */ { .gridl, .gridl-body { grid-template-columns: 1fr; gap: 1rem; display: grid; } .gridl-tab2cC { grid-template-columns: auto; gap: 2rem; display: grid; } .gridl-tab2cM { grid-template-columns: auto; gap: 1.5rem; display: grid; } .courL .gridl-tab2cC > span, .atelL .gridl-tab2cC > span { margin-left: 2rem; text-indent: -.8rem; line-height: 1.4em; } .courL .gridl-tab2cC a:before, .atelL .gridl-tab2cC a:before { width: auto; } .courL .over-link::before, .atelL .over-link::before { font-size: 150%; } @media (min-width: 750px) { /* gridl-tab2cC, gridl-tab2cM */ .gridl-tab2cC, .gridl-tab2cM { grid-template-columns: 1fr 1fr; } .gridl-tab2cC div { max-width: 45vw; } } .gridl-auto { width: 100%; margin-bottom: 2rem; display: inline-flex; } .gridl-auto > span { width: 50%; margin-top: 1rem; margin-left: 1rem; flex-grow: 4; } /* @media (min-width: 600px) { .gridl-auto > span:first-of-type { text-align: right; margin-right: 1rem; } rev 0913 --- OFF */ @media (min-width: 600px) { /* gridl-2col, gridl-3col */ .gridl-2col .gridl-body, .gridl-3col .gridl-body { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { /* gridl-2col, gridl-3col */ .gridl-2col, .gridl-3col { grid-template-columns: 220px 1fr; } .gridl-3col .gridl-body { grid-template-columns: 1fr 1fr 1fr; } } } @media /* ___ gridl-des1 ___ ( reci ) */ { /* seule occ. de gridl-des1 dans/pour #reci-list (TBC: status for .gridl-2col et .gridl-3col) */ .gridl-des1 .gridl-head h2::before { /* content: '≡'; */ position: relative; display: inline-block; } .gridl-des1 .gridl-head { z-index: 10; top: 0; align-items: flex-start; position: sticky; display: flex; flex-direction: column; } /* design */ .gridl-des1 { margin-left: -.5rem; } .gridl-des1 .gridl-head { padding: .5rem 0; } /* was pointing to #rega */ .gridl-des1 .gridl-head p { margin: .5rem 0 0; } .gridl-des1 .gridl-head h2 { margin: 0; padding: 1rem 0; color: black; } .gridl-des1 .gridl-head h2::before { margin: .2rem .75rem 0 1.5rem; } .gridl-des1 .gridl-head h3 { margin: 0; padding: 0; } .gridl-des1 .gridl-head .lib, .gridl-des1 p { text-align: left; text-indent: -.5rem; } /* was pointing to #rega */ .gridl-des1 li { font-size: revert; margin: 0; } /* was pointing to #rega */ .gridl-des1 .gridl-card { list-style: none; margin: 0; padding: .5rem 1rem 0; } .gridl-des1 .gridl-card p { font-size: .8rem; } /* was pointing to #rega */ .gridl-des1 .gridl-card li { padding: 0 1rem .5rem; } .gridl-des1 .list .gridl-body a { margin-left: -2.5rem; } /* was pointing to #rega */ .gridl-des1 .list .gridl-body a::before { padding-left: .5rem; margin-top: .2rem; margin-right: .5rem; width: .5rem; /* was pointing to #rega */ transform: scale(.8,1); -webkit-transform: scale(.8,1); font-weight: var(--fw-semi); } @media (min-width: 360px) { .gridl-des1 { margin-left: 0rem; } } @media (min-width: 450px) { .gridl-des1 { margin-left: .5rem; } } @media (min-width: 600px) { .gridl-des1 { margin-left: 1rem; grid-template-columns: 1fr 3fr; grid-template-rows: auto; } } @media (min-width: 750px) { .gridl-des1 .gridl-body { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } } /* colors */ .gridl-des1 { /* background: var(--c-papayawhip); box-shadow: var(--shadow-card); border-radius: 1rem; */ } .gridl-des1 .gridl-card { border-width: 1px; box-shadow: var(--shadow-list); border-radius: .5rem; border-style: solid; border-color: rgba(0,0,0,.04); } .gridl-des1 .gridl-card li { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(0,0,0,.04); } .gridl-des1 .gridl-card li:last-child { border-bottom-width: 0; } .gridl-des1 .gridl-card:nth-child(even) { background-color: rgba(240,242,245,.55); } .gridl-des1 .gridl-card:nth-child(odd) { background-color: rgba(255,255,255,.55); } .gridl-des1 .gridl-head { background: rgba(255,255,255,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -moz-backdrop-filter: blur(8px); border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgba(0,0,0,.1); } } @media /* ___ gridt-desNum OL ( vals ) _*/ { .gridt-desNum li { } .gridt-desNum { margin-left: .25rem; } .gridt-desNum li h3 { margin-left: .25rem; margin-bottom: 0; } .gridt-desNum li p { margin-left: -1.5rem; margin-top: 1rem!important; margin-right: 1rem; } @media (min-width: 450px) { .gridt-desNum li h4 { margin-bottom: .25rem; } .gridt-desNum li p { margin: 0 2.5rem 0 1.5rem; } } } @media /* ___ gridt-desCont ( cont ) */ { .gridt-desCont .coord table { margin: auto; font-size: 1.1rem; } .gridt-desCont .impress { margin-left: 2rem; } .gridt-desCont .impress i { letter-spacing: 1px; font-weight: 600; } } @media /* ___ duol ( mesr ) */ { ul.duol { margin-left: 1rem; } /* DEV to template ? */ ul.duol span { display: inline-block; } ul.duol li span:first-of-type { font-weight: var(--fw-bold); padding-top: 1rem; } } @media /* ___ text-desManu ( reci )_ */ { /* layout */ .text-desManu .script p:first-child::first-letter { display: inline-block; } /* design */ .text-desManu .recit p { margin: 0 0 .5rem; text-indent: 3em; } .text-desManu .script { margin: 0 -.5em; font-style: italic; padding: 3em 1em 1em; text-indent: 3rem; line-height: 1.3em;} .text-desManu .script p:first-child::first-letter { margin-left: -.75em; padding-right: .1em; font-size: 2.5em; font-family: 'CommercialScript BT', cursive; font-style: normal; transform: skewX(20deg); } .text-desManu .sign { margin: 0; text-align: right; padding: 0; } @media (min-width: 450px) { .text-desManu .script { margin: 0 -1rem; padding: 3rem 2rem 2rem; } } @media (min-width: 600px) { .text-desManu .script { margin: -1rem 0 0; padding: 3em 3rem 1.5rem 4rem; } } @media (min-width: 800px) { .text-desManu .script { margin: .5rem 1.5rem 0 3rem; padding: 3rem 2.5rem 2rem; } } /* colors */ .text-desManu .script { box-shadow: var(--shadow-script); background: radial-gradient(at bottom right, var(--c-papayawhip), transparent 75%); border-radius: 0 40px; border-left-width: 1px; border-left-style: solid; border-left-color: silver; border-top-width: 1px; border-top-style: solid; border-top-color: silver; } } } @media all { /* backgrounds step 0902 -rev resquared-kit, acti, atel, cour upd */ .item#asso { background-image: var(--bk-whitegradrad), url('img/04 enis-can-rev.jpg'); } .item#asso .titbkg { background-image: url('img/04 enis-can-rev.jpg'); } .item#appr { background-image: var(--bk-whitegradrad), url('img/02 napa-squared-rev.jpg'); } .item#appr .titbkg { background-image: url('img/02 napa-squared-rev.jpg'); } .item#vals { background-image: var(--bk-whitegradrad), url('img/03 katherine-rev.jpg'); } .item#vals .titbkg { background-image: url('img/03 katherine-rev.jpg'); } .item.activites { background-image: var(--bk-whitegradrad), url('img/15 colton-sturgeon-sqr_rev.jpg'); } .item.activites .titbkg { background-image: url('img/15 colton-sturgeon-sqr_rev.jpg'); } .cours { background-image: var(--bk-whitegradrad), url('img/18 shawn-day-sqr½rev.jpg'); } .cours .titbkg { background-image: url('img/18 shawn-day-sqr½rev.jpg'); } .atels { background-image: var(--bk-whitegradrad), url('img/16 jennie-razumnaya-sqr_.jpg'); } .atels .titbkg { background-image: url('img/16 jennie-razumnaya-sqr_.jpg'); } .mesrs { background-image: var(--bk-whitegradrad), url('img/01 johan-rev.jpg'); } .mesrs .titbkg { background-image: url('img/01 johan-rev.jpg'); } .item#mesrB { background-image: var(--bk-whitegradrad), url('img/08 jordan-ladikos-rev.jpg'); } .item#mesrB .titbkg { background-image: url('img/08 jordan-ladikos-rev.jpg'); } .item#mesrR { background-image: var(--bk-whitegradrad), url('img/09 boitumelo-rev.jpg'); } .item#mesrR .titbkg { background-image: url('img/09 boitumelo-rev.jpg'); } .item#parta { background-image: var(--bk-whitegradrad), url('img/10 gerhard-kupfer-rev.jpg'); } .item#parta .titbkg { background-image: url('img/10 gerhard-kupfer-rev.jpg'); } .item#reci { background-image: var(--bk-whitegradrad), url('img/12 elaine-howlin-rev.jpg'); } .item#reci .titbkg { background-image: url('img/12 elaine-howlin-rev.jpg'); } .item#rega { background-image: var(--bk-whitegradrad), url('img/11 (03_file_squared.jpg'); } .item#rega .titbkg { background-image: url('img/11 (03_file_squared.jpg'); } .item#cont { background-image: var(--bk-whitegradrad), url('img/14 jinshuo-wang-rev.jpg'); } .item#cont .titbkg { background-image: url('img/14 jinshuo-wang-rev.jpg'); } .item#formto { background-image: var(--bk-whitegradrad), url('img/13 sandra-tan-rev.jpg'); } .item#formto .titbkg { background-image: url('img/13 sandra-tan-rev.jpg'); } /* fine tuning position , others TBC */ .item .bresu .titbkg { background-image: url('img/08 jordan-ladikos-rev.jpg'); } /* counter */ .item .rresu .titbkg { background-image: url('img/09 boitumelo-rev.jpg'); } /* counter */ /* .item.cours .titbkg { background-position: 0 -2.25rem; } */ /* WARNING override by JS since 0916 item+titbkg bk managmt */ .item#mesrL .intro.titbkg { background-position: center 40%; background-size: cover; background-attachment: fixed; } /* tree */ .item#mesrL .subitem .titbkg { background-position: center center; background-size: 150%; background-attachment: scroll; } /* intro sub-list */ .item#formto { max-width: 100%; } /* rem: .item.cours in CHAP disabled */ } @media (min-width: 9999px) { /* pack ajouts lefts _ - step 0815 TBC */ /* DESIGN */ .list .item { margin: revert; } .list li { margin: 0 0 0 1.5rem; font-size: 1.1rem; padding: .25rem 0; color: var(--c-blueFull); } .list ul { /* margin: .5rem 0 .5rem 3.5rem; */ list-style: disc; } .texto { margin-bottom: -.5rem; margin-right: -1.25rem; padding-bottom: .5rem; padding-right: 1.25rem; } @media (min-width: 600px) { li p { margin-left: 0; } } .descr { padding-bottom: 1rem; } @media (min-width: 750px) { .descr { padding-bottom: 2rem; } } /* COLORS */ .demofont { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; } li a, h3 a { background-image: none; } @media (min-width: 1000px) { .page-texte { background: rgba(255,255,255,.75); backdrop-filter: blur(5px); } } /* BRONX */ .demi { font-weight: var(--fw-semi); } h3 { margin: 1rem 0 0.5rem 0; } /* pack ajout : some chaps h2 + h2.lib */ .item#appr h2 .lib, .item#vals h2 .lib, .cours h2 .lib { display: inline-block; } .item#appr h2 .lib::before, .item#vals h2 .lib::before, .cours h2 .lib::before { top: -2px; min-width: 25px; left: 1px; position: relative; display: inline-block; /* alt invert symbol */ margin: auto; text-align: center; text-indent: 0; color: #ffffff; background: var(--c-blueMain); border-left: 2px solid var(--c-blueMain); mix-blend-mode: difference; /* height: 1.5rem; */ } .cours h2 .lib::before { border-top: 4px solid var(--c-blueMain); font-size: 1.15rem; height: 1.25rem; border-bottom: 3px solid var(--c-blueMain); } .item#vals h2 .lib::before { border-top: 4px solid var(--c-blueMain); font-size: var(--fs-h3); } @media (min-width: 600px) { .item#appr h2, .item#vals h2, .cours h2 { padding-left: 0; } } } @media all { /* OVERrides symbols - rev0912 */ /* layout */ [class*="over-"] { } [class*="over-"]::before { display: inline-block; width: 2rem; } b > a[class*="over-"]::before { display: inline-block; width: 1rem; } .over-rides::before { content: '¿' !important; } .over-rides .lib::before { content: '' !important; } .over-arrow::before { content: '▶' !important; } .over-arrow .lib::before { content: '' !important; } .over-cross::before { content: '✕' !important; } .over-cross .lib::before { content: '' !important; } .over-dnl::before { content: '🗎' !important; } .over-dnl .lib::before { content: '' !important; } .over-link::before { content: '⇒' !important; } .over-link .lib::before { content: '' !important; } .over-outlink::before { content: '>>' !important; } .over-outlink .lib::before { content: '' !important; } .over-mlist::before { content: '≡ ' !important; display: inline-block; margin-left: .75rem; margin-right: -.5rem; } /* counter width 2rem */ .over-mlist .lib::before { content: '' !important; } .over-warn::before { content: '△' !important; } .over-warn .lib::before { content: '' !important; } /* counter/revert from original ( activités, mesures ) */ [class*="over-"]::before { width: 1.5rem; } .demo .over-mlist { padding: 1rem!important; } .demo h2:not(.over-mlist) .lib { text-indent: 0; margin-left: 0; } .demofont h1 { text-indent: 0; } .demofont .heads * { padding: 1rem; margin: 1rem; display: block; } /* revert defaults */ .demofont h3 { display: block; } /* revert default inline-flex */ .demo .subitem > h3 { text-decoration: underline; } } /* .subitem > a { scroll-margin-top: 100px; } */ @media all { /* MIX rev0911b last LOCALS to move up */ @media { /* last SYMB */ /* layout */ h1 s, h2 s, h3 s { text-decoration: none; } /* counter default */ h1 s::before, h2 s::before, h3 s::before { display: inline-block } /* important */ h1, h2 { display: inline-flex; flex-shrink: 0; flex-grow: 0; } h1 > s, h2 > s { display: inline-block; } h1 s s, h2 s s { display: inline-block; } h1 > s { width: 30px; min-width: 30px; max-width: 30px; } h2 > s { width: 20px; min-width: 20px; max-width: 20px; } s s::before { width: 1em; height: 1em; padding-left: 0; padding-right: .5rem; display: inline-block; } h1 s s::before { width: 1em; height: 1em; padding-left: .25rem; padding-right: .5rem; display: inline-block; } /* counter above */ /* design */ h1 > .lib { padding-left: 0; margin-left: 1rem; text-indent: 0; display: inline-block; } h2 > .lib { padding-left: 0; margin-left: .75rem; text-indent: 0; display: inline-block; } h2 { padding-left: 0; margin-left: 0; } /* SYMB rev0916 SVG */ /* set to white + shadow */ h1 s s::before { filter: invert(100%) drop-shadow(0 0 5px rgb(0,0,0)) drop-shadow(0 0 3px rgba(0,0,0,.5)); } /* H2 set to blueMain - #2c6e9e, by css_filter_solver.py */ h2 s s::before { filter: invert(51%) sepia(58%) saturate(648%) hue-rotate(163deg) brightness(64%) contrast(83%); } /* H3 set for blueFull - #1e4a6b, by css_filter_solver.py */ h3 s s::before { filter: invert(45%) sepia(51%) saturate(257%) hue-rotate(163deg) brightness(71%) contrast(165%); } .association s s::before { content: url("img/symbAsso.svg"); transform: scale(1.1,1.1) translate(0, -.05em); } /* ⭘ - \002B58 */ .activites s s::before, .cours s s::before, .ateliers s s::before { content: url("img/symbActi.svg"); } /* ◅▻ - \0025C5 + \0025BB - mit transform */ .mesures s s::before { content: url("img/symbMesr.svg"); } /* ⟐ - \0027D0 losange + dot */ .partages s s::before, .reflets s s::before, .recits s s::before, .regards s s::before, .galerie s s::before { content: url("img/symbParta.svg"); } /* ⌘ - \002318 */ .contact s s::before { content: url("img/symbBubl.svg"); } /* 💬 - \01F4AC */ .empty s s::before { content: '#'; transform: scale(1) translateX(0); } } @media { /* DNL (link) cours rev0906 */ /* == rem: caractère 'i dans cercle' pour (courD) .over-dnl > diaporama css: \0024D8 */ .link { white-space: nowrap; color: white; font-size: .9em; font-weight: var(--fw-semi); background-color: var(--c-blueWind); } .link .over-dnl { color: blue; } .link .over-dnl::before { width: 1rem; font-size: 1.3em; } } @media { /* local mix rev0907 */ /* nav { touch-action: none; } /* DEV TBS (contact link!) */ /* p s, li s, div > s { background: #ddd; } /* text sugg/corr emphasis [ tmp ] */ .courD h3 { display: block; } /* special for dnload diaporamas in H3's */ .item#mesrB .titsubt { text-align: right; } /* goethe */ /* Synapse mention emphasis [GEN] */ q { color: var(--c-blueMain); font-weight: 600; font-size: 1.2em; line-height: .8em; } q::before, q::after { content: ''; } /* counter Quotation defaults */ /* custom pop-up image [ activites-cours ] */ .previews h3 { position: relative; font-size: var(--fs-h4); padding: 3px 3px 1px; } .previews h4 { letter-spacing: 0; position: relative; font-size: 1em; padding: 3px 3px 1px 0; margin-top: 0; } .previews .popup-image { position: absolute; width: 200px; top: -75px; right: -2rem; z-index: 100; display: none; /* +colors */ margin-top: 8px; border: 1px solid silver; box-shadow: 8px 8px 15px rgba(0,0,0,0.25); } .previews h3:hover .popup-image, .previews h4:hover .popup-image { display: block; } .previews .mit { background: linear-gradient(to right, var(--c-blueWind), transparent, transparent) } } @media { /* titles + sortie last rev */ h1 { padding: 0; } h1 .lib { height: 3em; } /* forcing */ h1.sortie .lib { height: revert; } h1.sortie { flex-direction: row; justify-content: end; display: flex; } } @media { /* ASSO edito+colcont */ .edito .descr span { display: inline-block; width: 100%; text-align: right; } /* pict legend - unused */ .edito ul { margin-top: -1em; margin-bottom: 1rem; } .edito ul li { margin-left: 1.5rem; } .colcont p { padding-bottom: 1.5rem; break-inside: avoid; } .colcont img { max-width: 100%; } .colcont h3 { margin: 1.5rem 0; column-span: all; line-height: 1.5; } .colcont { column-count: 1; gap: 2rem; } /* img special */ .edito .dnalt { display: none; } @media (min-width: 600px) { .edito .dnalt { display: revert; } .edito .upalt { display: none; } .colcont { column-count: 2; padding-bottom: 1.5rem; } } } @media { /* PARTA mitlink (& switch) */ .parta .mitlink li { list-style: '✦ ' outside; } /* .parta .mitlink li > div, .parta .mitlink span:first-of-type { width: calc(100% - 150px); display: inline-block; } */ .parta .mitlink .switch, .parta .mitlink p { padding-bottom: 0; } .parta .mitlink li div { padding-bottom: .5rem; } .parta .mitlink h4 { margin: .15rem 0; } .switch { overflow-anchor: none; } /* .switch > div { border: 1px solid silver; } */ } @media { /* GALYs PACK ____ rev0831 (lightbox, credit, illus, thumb, thumbs, galery) -- was '◪' -- */ .item#galy .thumbs .legend { background: white; display: none; } /* displayed when hover */ /* layout */ .item#galy .illus, .item#galy .illus div:first-child { align-items: center; flex-direction: column; display: flex; } .item#galy .illus div:first-child { align-items: center; flex-direction: column; display: flex; } .item#galy .illus div:first-child img { align-self: center; } .item#galy .thumbs { gap: 10px; display: grid; } .item#galy .thumbs h5 { height: 1.5rem; display: block; } .item#galy .thumb img { max-height: 100%; } .item#galy .thumb { max-height: 100%; height: 100%; width: 100%; } .gal-pict .pict img { max-height: 80vh; border-width: 2px; max-width: 100%; border-style: solid; border-color: black; } @media /* default */ { .item#galy .thumbs { grid-template-columns: 1fr 1fr; } } @media (min-width: 450px) { .item#galy .thumbs { grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 750px) { .item#galy .thumbs { grid-template-columns: 1fr 1fr 1fr 1fr!important; } .thumbs .image { max-width: 15vw; aspect-ratio: 1/1; } } /* design */ .item#galy .illus { margin: 1.5rem -1rem; } .item#galy .pict { width: 100%; } .item#galy div img { max-width: 100%; margin: auto; border: 2px solid black; } .item#galy .legend p { text-align: left; font-weight: var(--fw-semi); padding: .5rem 1.5rem 1.5rem 1.5rem; font-size: var(--fs-btn); } .item#galy .thumbs .titre { font-size: 90%; } .item#galy .thumbs .illus { margin: 0; padding: 1rem; } .item#galy .thumbs h5 { height: 1.5rem; margin: 0; padding: 0; width: 100%; text-align: center; display: block; } .item#galy .thumb { aspect-ratio: 1/1; margin: auto; padding: 0; width: 100%; max-width: 100%; } .item#galy .thumb img { max-height: 100%; border: 1px solid transparent; } .item#galy .galery h3 .lib { width: 100%; margin: 0; text-align: center; } .item#galy .galery h3 { width: 100%; margin: 0; } .item#galy .galery h3::before { width: .5rem; margin-top: -.3rem; padding-left: .5rem; font-size: 1.5rem; font-weight: var(--fw-semi); } /* colors */ .gal-pict h3::before { color: transparent; text-shadow: 0 0 0 var(--c-blueFull); } .item#galy .pict, .item#galy .thumb { background: rgba(30, 74, 107,.5); box-shadow: var(--shadow-grey); } .item#galy .pict:hover { background: var(--c-blueMain); } /* ratios */ .item#galy .ratio1 img { max-height: 40vh; } .item#galy .ratio15 img, .item#galy .ratio2 img { max-height: 45vh; } .item#galy .ratio05 div:first-child { margin: 0 -1rem; padding: 1rem 0; } .item#galy .ratio075 div:first-child { margin: 0 3rem; padding: 1rem 0; } .item#galy .ratio1 div:first-child { padding: 1rem; } .item#galy .ratio15 div:first-child, .item#galy .ratio2 div:first-child { width: auto; padding: 0 1rem; } @media (min-width: 1000px) { /* mostly ratios layout + design */ /* layout */ .item#galy .pict img { min-height: 0; max-height: 100%; } .item#galy .ratio05 .legend { align-self: start; } .item#galy .ratio05 .pict { min-height: auto; align-self: end; } .item#galy .ratio075 .pict, .item#galy .ratio1 .pict { min-height: auto; align-self: start; } .item#galy .ratio1 { flex-direction: row; } .item#galy .ratio1 .legend, .item#galy .ratio075 .legend { align-self: end; } .item#galy .ratio15 { flex-direction: row; align-items: center; } .item#galy .ratio15 img { max-height: 50vh; max-width: calc(50vh + 2rem); } .item#galy .ratio2 { flex-direction: row-reverse; align-items: center; height: 60vh; } .item#galy .ratio2 .pict { max-height: 60vh; } /* design */ .item#galy .legend p { padding: 1rem 1.5rem 1.5rem; } .item#galy .ratio05, .item#galy .ratio075 { width: 100%; } .item#galy .ratio05 .legend { width: 75%; margin-left: 2rem; } .item#galy .ratio05 .pict { width: 75%; margin-right: 1.5rem; padding: 0 1rem; } .item#galy .ratio075 .legend { width: 65%; margin-left: 2rem; } .item#galy .ratio075 .pict { width: 65%; margin: 0 0 0 4.5rem; padding: 0 1rem; } .item#galy .ratio1, .item#galy .ratio15, .item#galy .illus { margin: 1.5rem 0; } .item#galy .ratio1 .legend { width: 45%; } .item#galy .ratio1 .pict { width: 45%; margin-left: 3.5rem; padding: .5rem; } .item#galy .ratio15 .legend { width: auto; } .item#galy .ratio15 .pict { max-width: 45%; margin: 0 1rem 0 4.25rem; padding: 0 1rem; } .item#galy .ratio2 { margin: 0; } .item#galy .ratio2 .legend { width: auto; margin-left: 3rem; } .item#galy .ratio2 .pict { max-width: 30vh; margin: 0 2rem 0 1rem; padding: 0 1rem; } } /* galy-bis + add */ .item#galy .thumb:hover + .legend { padding: 0 1rem; max-width: 250px; position: absolute; display: block!important; } .item#galy .legend { padding: 0 1rem; } .item#galy .legend p { padding: .5rem 0 0!important; } /* lightbox + ____ rev0821 ____ require JS */ div#lightbox { z-index: 9999; inset: 0; align-items: center; position: fixed; display: none; /* JS>flex */ cursor: pointer; justify-content: center; background: rgba(0,0,0,.9); } div#lightbox img { max-height: 95vh; max-width: 95vw; } .gal-pict .pict > img { transition: transform 0.2s ease; cursor: zoom-in; } .gal-pict .pict > img:hover { transform: scale(1.03); } .credit { /* position: relative; display: inline-block; transform: translate(0,0) rotate(0deg); */ font-size: var(--fs-btn); } } @media { /* intro--panel -- rev0910 */ .intro--panel { background: linear-gradient(to right, var(--c-blueWind), transparent, transparent, var(--c-blueWind)); /* box-shadow: 0 0 100px -50px rgba(0,0,0,.5) inset; box-shadow: none; /* border: 1px solid blue; border-top: none; border-bottom: none; */ } .intro--panel p { text-align: justify; } @media (min-width: 600px) { .intro--panel { margin-left: -2em; margin-right: -2em; } .intro--panel p { margin: .5em 0; } .intro--panel p:first-of-type { padding-top: .5rem; } .intro--panel p:last-of-type { padding-bottom: .5rem; } } @media (min-width: 750px) { .intro--panel p { padding: 0 2rem;} } } em { display: inline; background: yellow; } .item > p:first-of-type { margin-top: 2rem; } .parta li { width: 100%; grid-template-columns: 1fr 3fr; display: grid; } footer { display: none; } }