Download raw (38.7 KB)
/* ========================================================================== Custom medias definitions ========================================================================== */ @custom-media --mobile only screen and (max-width: 767px); @custom-media --mobile-landscape only screen and (max-width: 767px) and (orientation: landscape); @custom-media --tablet-laptop only screen and (min-width: 768px) and (max-width: 1300px); @custom-media --desktop only screen and (min-width: 1300px); @custom-media --not-mobile only screen and (min-width: 768px); /* ========================================================================== Variables ========================================================================== */ :root { --primary-color:black; --green: #009933; --orange: #fe5000; --pink: #ff51a0; --violet: #913291; --blue: #006cdb; --scrollbar-thumb-color: black; --scrollbar-thumb-color--hover: var(--green); --scrollbar-track-color: white; } /* ========================================================================== Fonts ========================================================================== */ @font-face { font-family: 'Ume Mincho'; font-weight: normal; font-style: normal; src: url('../fonts/ume-mincho_balsa-webfont.ttf') format('woff'); } @font-face { font-family: 'Ume Mincho Bold'; font-weight: normal; font-style: normal; src: url('../fonts/ume-mincho_balsa-bold-webfont.ttf') format('woff'); } @font-face { font-family: 'Ume gothic'; font-weight: normal; font-style: normal; src: url('../fonts/ume-p-gothic-webfont.woff') format('woff'); } @font-face { font-family: 'Ume vertical'; font-weight: normal; font-style: normal; src: url('../fonts/ume-p-gothic-vertical-webfont.ttf') format('woff'); } @font-face { font-family: 'Belogodor'; src: url('../fonts/Belogodor.ttf'); font-weight: normal; font-style: normal; } .cadra { float: left; width: auto; } .cadra svg { overflow: visible; width: auto; height: 100%; margin-bottom: 100px; } /* ========================================================================== Reset ========================================================================== */ html { font-size: 20px; line-height: 28px; } body { overflow: hidden; /* FIXME: Move away from the reset section */ background-image: url('/theme/imgs/coin-de-boite-bas-gauche.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom left; font-family: 'Ume vertical'; font-size: 1em; line-height: 1.3em; } a { text-decoration: underline; color: inherit; /* FIXME: should the links be all pink? If not, ake it more specific */ text-decoration: var(--orange); /* color: var(--orange); */ } a:hover { color: var(--orange); } em { font-family: 'Ume Mincho'; } strong { font-family: 'Ume Mincho'; font-size: 1.2em; } hr { height: 1.375em; border: 0; clear: both; } hr + hr { clear: both; margin-top: -70pt; } /* ========================================================================== General structure ========================================================================== */ /* Main Header ========================================================================== */ .main-header { position: fixed; top: 100vh; left: 0; box-sizing: border-box; width: 100vh; height: 42px; padding-left: 42px; transform: rotate(-90deg); transform-origin: top left; text-align: right; font-size: 14px; line-height: 42px; direction: rtl; /* background-color: var(--orange); */ } .logo { max-height: 50px; padding-left: 10px; vertical-align: middle; } /* main menu */ .main-nav, .main-menu, .main-menu li { display: inline; } div.secondary { display: none; } /* .main-menu li + li:before { content: '\00B7\00A0'; } */ .main-menu a { padding: 1.05em 0.9em; text-decoration: none; } .main-menu a:hover { position: relative; z-index: 1000; background-color: var(--orange); /* outline: 2px solid black; */ color:white; } /* Main Footer ========================================================================== */ .main-footer { position: fixed; right: 0; bottom: 0; left: 0; box-sizing: border-box; height: 42px; text-align: right; line-height: 42px; display: inline; background-color: white; z-index: 9999; /* background-color: var(--orange); */ } .social-links, .subscription-wrapper, .enveloppe, .address, .telephone { float: right; } .social-links { display: inline-block; padding-right: 5px; } .social-link { padding-left: 3px; padding-right: 3px; } .address, .telephone { display: inline-block; box-sizing: border-box; padding-right: 5px; padding-left: 5px; vertical-align: middle; font-size: 14px; } .subscription-wrapper { display: inline-block; } @media (--mobile) { .newsletter { display: none; } .address, .telephone { display: inline-block; white-space: nowrap; font-size: 12px; } .address span.street { display: none; } .address span.zip:before { display: inline; content: "1 Av. Félix Marchal "; } .address span.street::after { content: " / "; } .address span.person { display: none; } span.tel { display: none; } span.tel-detail { display: none; } span.administration:before { content: "T. "; } } @media (--not-mobile) { .address > span { display: inline; } .address > span + span:before { content: " — "; } .address > span span + span::before { content: '\00B7\00A0'; } .newsletter { display: none; } } .subscribe { display: inline-block; } .subscribe__email, .subscribe__email-desktop { width: 15em; padding: 4px; color: inherit; border: 2px solid var(--orange); border-radius: 5px; font-family: inherit; } .subscribe__email:focus, .subscribe__email-desktop:focus { color: white; outline: none; background-color: var(--orange); } .subscribe__ok, .subscribe__ok-desktop { padding: 4px; color: inherit; border: 2px solid var(--orange); border-radius: 5px; background-color: transparent; font-family: inherit; } .subscribe__ok:focus, .subscribe__ok-desktop:focus { color: white; outline: none; background-color: var(--orange); } @media (--mobile-landscape) { /* FIXME: remove that rule and fix the layout */ .subscribe { display: none; } } a.enveloppe{ display: inline; padding-right: 5px; padding-left: 5px; } img.envlp{ max-width: 100%; } img.envlp-small { display: none; } form#subscribe{ display: none; padding-right: 5px; padding-left: 5px; } form#subscribe input[type=text] { border-radius: 0px; height: 20px; border: 1px solid black; padding: 3px; } form#subscribe input[type=submit] { border-radius: 1em; padding: 5px; border: none; padding-left: 5px; padding-right: 5px; background-color: var(--green); } form#subscribe input[type=submit]:hover{ background-color: white; outline: 3px solid var(--green); cursor: pointer; } p.newsletter-signup{ position: fixed; background: blue; display: inline; box-sizing: border-box; padding-right: 5px; float: left; padding-right: 5px; padding-left: 5px; } /* Main area ========================================================================== */ /** * The main area of the page is everything but the main header and footer. In * other words, this is everything inside the "box". */ .main-area { position: fixed; top: 0; right: 0; bottom: 42px; left: 42px; border-bottom: 2px solid var(--green); border-left: 2px solid var(--green); background-size: 15px; } @media (--mobile) { .main-area { overflow-y: hidden; font-size: .75em; line-height: 1.375em; } img.envlp{ display: none } img.envlp-small { display: initial; } .newsletter-active .main-area { bottom: 126px; } .newsletter-active .main-footer { height: 126px; } .newsletter-active .main-footer .social-links { display: none; } } @media (--mobile-landscape) { body { background-image: url('/theme/imgs/coin-de-boite-haut-gauche.svg'); background-position: top left; } .main-area { border-top: 2px solid var(--orange); } .main-header { top: 0; left: 0; width: 100vw; transform: rotate(0deg); } .newsletter-active .main-area { left: 126px; bottom: 42px; } .main-footer { position: fixed; top: 100vh; left: 0; width: 100vh; transform: rotate(-90deg); transform-origin: top left; } .address { padding-left: 5px; text-align: left; vertical-align: middle; } .main-area { top: 42px; bottom: 0; } .social-links, .subscription-wrapper, .enveloppe, .address, .telephone { float: left; } .telephone { display: none; } } /* Main content ========================================================================== */ @media (--mobile) { .main-content { position: absolute; top: 0; right: 30px; left: 0; overflow: auto; height: 100%; } } @media (--not-mobile) { .main-content { position: absolute; top: 0; left: 0; overflow-y: scroll; box-sizing: border-box; width: calc(100% - 500px); height: 100%; background-color: white; } } div.galerie figcaption{ display: none; } /* ========================================================================== Schedule ========================================================================== */ /** * The schedule module is made out has two parts: * * 1. the list of events; * 2. a timeline widget onto which is plotted the dates of the events. * * Below is the toplevel structure of the module * * <section class="schedule"> * <div class="schedule__list">...</div> * <div class="schedule__timeline timeline"></div> * </section> */ .schedule { position: relative; overflow: hidden; background-color: white; } .schedule__head { } .schedule__head h1{ font-family: 'Ume Mincho'; font-size: 1.5em; height: 34px; padding-top: 9px; padding-left: 1.2em; text-transform: uppercase; } .schedule__head .edito{ display: none; position: absolute; height: auto; top: 42px; box-sizing: border-box; z-index: 99999; width: 100%; padding-top: 2em; padding-bottom: 2em; background-color: white; } .schedule__head a.edito-toggle{ position: absolute; top: 10px; right: 20px; text-decoration: none; } .schedule__head .edito p{ padding-left: 1.2em; padding-right: 1.2em; font-family: 'Ume vertical'; font-size: 1em; padding-bottom: 0.6em; } @media (--mobile) { .schedule__head { position: absolute; right: 0; height: 42px; width: 30px; padding-top: 6px; padding-left: 0; text-align: center; } .schedule__head:before { float: left; margin-left: -25px; content: "\2190"; } .schedule__head:after { content: "17\00000A18"; } .schedule__head h1 { display: none; height: auto; } .schedule__head a.edito-toggle{ display: none; } .is-swiped .schedule__head { width: calc(100% - 44px); transition: width 0.5s ease; } .is-swiped .schedule__head::after { content: "\2192"; } .is-swiped .schedule__head::before { content: none; } .is-swiped .schedule__head h1, a.edito-toggle { display: block; } } p.schedule__category{ position: absolute; transform: rotate(-90deg); transform-origin: 60% 60%; left: -48px; height: 40px; width: 130px; max-height: 40px; max-width: 130px; text-align: right; font-size: 0.75em; } .schedule__category a{ text-decoration: none; } .schedule sup, .schedule sub { margin-left: 1px; font-size: 0.75em; line-height: 0; } .schedule sup { vertical-align: 0.3em; } .schedule sub { vertical-align: -0.3em; } .schedule__item { display: inline-block; width: calc(100% - 52px); padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 2em; position: relative; color: var(--primary-color); line-height: 1.3; } .schedule__item:target { /* FIXME: !important should not be used */ background-size: 100% 100%, 10px !important; } /* .schedule__header { color: white; } */ .schedule__dates { display: inline; float: right; margin-top: 12pt; padding: 2px 8px; font-family: 'Ume Mincho Bold'; font-size: 1em; } @media (--mobile){ .schedule__dates { padding: 2px 26px; } } .schedule__title { font-family: 'Ume Mincho'; font-size: 1.5em; line-height: 1.1em; text-transform: uppercase; } .schedule__title a { margin-left: -0.5em; padding: 0.25em 0.5em; text-decoration: none; } .schedule__authors { font-family: 'Ume vertical'; line-height: 1em; } .schedule__intro { padding-left: 2em; font-family: 'Ume vertical'; font-size: 1.5em; } .schedule__main-image { width: 50%; text-align: right; margin-bottom: 1em; margin-top: 1em; } .schedule__main-image img { max-width: 100%; margin-top: 0em; margin-bottom: 0em; } .schedule__booking { padding: 0.4em 0.6em 0.4em 0.6em; text-decoration: none; /* text-transform: uppercase; */ letter-spacing: 0.8pt; border: solid 1.5px black; font-size: 0.75em; } .schedule__booking:hover { background-color: white; color:black; } article[data-color="#ffffff"] .schedule__booking:hover { background-color: black; color:white; } .schedule__dates + .schedule__booking { position: relative; bottom: -20px; } /* FIXME: move to the pages itself */ #lecole-des-maitres-2017 .schedule__main-image { width: 90%; max-width: 200%; } #lecole-des-maitres-2017 .schedule__main-image img { max-width: 100%; margin-top: 0em; margin-bottom: 0em; margin-left: 0px; } #lecole-des-maitres-2017 .schedule__subhead { margin-top: 56px; } #les-oracles .schedule__main-image img { padding-left: 81px; } #up-pen-down .schedule__main-image { width: 53%; margin-top: 5pt; margin-left: 27pt; } #la-lettre-volee .schedule__main-image { width: 75%; margin-top: 33pt; margin-bottom: 19pt; margin-left: -6pt; } #should-i-stay-or-should-i-stay .schedule__main-image { width: 100%; } #les-lundis-en-coulisse .schedule__main-image { width: 33%; margin-left: 61pt; padding-top: 8pt; } #les-fortunes-de-la-viande .schedule__main-image { width: 117%; max-width: 150%; margin-left: -26pt; } #scripta-manent .schedule__main-image { width: 40%; margin-left: 53pt; } #i-clit .schedule__main-image { width: 85%; } #etna .schedule__main-image { width: 60%; margin-left: 60pt; } #les-loups .schedule__main-image { width: 69%; margin-left: -26pt; } #trilogie-de-rome .schedule__main-image { width: 100%; } #noel-au-theatre { padding-bottom: 17%; } #kunstenfestivaldesarts { padding-bottom: 17%; } .schedule__timeline { /* top: 42px; */ right: 0; width: 30px; height: calc(100%); margin-left: calc(100% - 30px); background: linear-gradient(to bottom, var(--primary-color) 0%, grey 100%); } @media (--mobile) { .schedule { position: absolute; top: 0; right: 0; height: 100%; transition: all 0.5s ease; } .schedule__head { position: fixed; } .is-swiped .schedule { width: 100%; } .schedule__list { position: absolute; /* top: 42px; */ right: 30px; left: 100%; overflow-x: hidden; overflow-y: scroll; width: 100%; height: calc(100%); transition: all 0.5s ease; } .is-swiped .schedule__list { left: 0%; } .schedule__timeline { position: fixed; /* top: 42px; */ right: 0; width: 30px; /* height: calc(100% - 87px); */ } } @media (--not-mobile) { .schedule { position: absolute; top: 0; right: 0; overflow: hidden; box-sizing: border-box; width: 500px; height: 100%; } .schedule__list { position: absolute; /* top: 42px; */ right: 60px; left: 0; overflow-y: scroll; height: calc(100%); } .schedule__timeline { position: absolute; /* top: 42px; */ right: 0; width: 60px; height: calc(100%); } } /* timeline */ .timeline__year { position: absolute; top: 0px; right: 30px; height: 30px; padding-right: .5em; transform: rotate(-90deg); transform-origin: top right; text-align: right; font-size: 10px; line-height: 30px; } .timeline__month { position: absolute; top: 30px; right: 30px; box-sizing: border-box; height: 30px; padding-top: 10px; padding-right: .5em; transform: rotate(-90deg); transform-origin: top right; text-align: right; border-right: 1px solid; color: black; text-transform: uppercase; font-size: 0.5em; font-family: 'Ume vertical'; line-height: 23px; } .timeline__point { position: absolute; right: 15px; display: block; width: 10.5px; min-height: 10px; /* border-radius: 5px; */ background-color: #ffffffad; background-size: 10px; box-shadow: 0 0 2px 0px black; border: 1px solid black; } .timeline__point:hover { background: black; } hr.timeline__currentDateMaker{ position: absolute; display: block; height: 10px; width: 100%; border-top: 1px dotted grey; z-index: 9999 !important; } .timeline__point__last{ background-color: transparent; outline: 1px solid white; } .timeline__point:hover {} @media (--not-mobile) { .timeline__month { right: 60px; height: 80px; padding-top: 38px; } .timeline__point { right: 35px; } /*.timeline__point { right: 55px; } .timeline__point:nth-child(2n+0) { right: 45px; } .timeline__point:nth-child(3n+0) { right: 35px; } .timeline__point:nth-child(4n+0) { right: 25px; }*/ } /* ========================================================================== Show detail ========================================================================== */ .show-detail__header { box-sizing: border-box; padding: 1em; color: var(--primary-color); background-size: 25px; } /* FIXME: decide what to do with `.content` */ /* FIXME: re-order rules */ .content .show-detail__header h1 { margin-bottom: 0em; hyphens: auto; } .content .show-detail__header h2 { margin-top: 0.1em; margin-bottom: 0.4em; font-size: 1.8em; line-height: 1.25em; } .content .show-detail__header time, span.length, p.age { display: block; margin-left: 0em; padding-left: 0em; font-family: 'Ume Mincho'; font-size: 1.3em; line-height: 1.1em; } .content .show-detail__type { display: block; margin-left: 0em; padding-left: 0em; font-family: 'Ume Mincho'; font-size: 1.3em; line-height: 1.1em; } .content p.detail-prix { font-family: 'Ume vertical'; font-size: 12pt; line-height: 1.1em; } .content p.show-detail__subhead { margin-top: 12pt; letter-spacing: 0.04em; font-family: 'Ume Mincho'; font-size: 10.5pt; line-height: 1.3em; } .show-detail__header .partner_logos { float: left; margin-top: 1em; margin-bottom: 1em; } .show-detail__header .partner_logo { height: 35px; margin-right: 10px; max-width: 200px; } .show-detail__image img { max-width: 100%; width: 100%; text-align: center; margin-top: 0.5em; } .show-detail__body p img{ max-width: 95%; margin-top: 0.5em; margin-bottom: 0.5em; } .show-detail__body p img.half{ max-width: 50%; margin-top: 0.5em; margin-bottom: 0.5em; } .show-detail__body p img.third{ max-width: 32%; margin-top: 0.5em; margin-bottom: 0.5em; } .show-detail__body p img.quarter{ max-width: 23%; margin-top: 0.5em; margin-bottom: 0.5em; } .show-detail__body-images { float: left; box-sizing: border-box; margin-bottom: -8px; padding: 1em 2em; padding-bottom: 0em; /* background-color: white; */ } .show-detail__body-images + .show-detail__body { margin-top: 0em; } .show-detail__body-images p { float: left; margin-right: 0.3em; text-indent: 0 !important; } .show-detail__body-images .video-wrapper { position: relative; margin: 0; margin-right: 0px; margin-right: 4px; } figure { display: inline-block; } figcaption p, .show-detail__body figcaption p { font-size: 0.75em; } .show-detail__body-images img{ max-width: 100px; /* max-height: 70px; */ /* outline: 1px solid var(--green); */ } .show-detail__body-images.photos-spectacle img, .show-detail__body-images iframe { max-width: 100px; max-height: 70px; /* outline: 1px solid var(--green); */ } .show-detail__body-images img.demi { max-width: 50px; max-height: 100px; } .show-detail__body-images img:hover { cursor: pointer; background-size: 10px; } .galerie.photos-spectacle.show-detail__body-images p { display: contents; } .galerie.photos-spectacle.show-detail__body-images p.video-wrapper { display: inline-block; } .galerie.photos-spectacle.show-detail__body-images p + p { margin-top: 0; } .thumb-overlay { position: absolute; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; } .show-detail__body { box-sizing: border-box; padding: 8px 12px; padding-bottom: 2em; color: var(--primary-color); background-color: white; } /*FIXME: See if we can find a more appropriate class name `.photo` */ .show-detail__body .photo { display: none; float: left; overflow: hidden; width: 100%; height: auto; margin-right: 1.375em; margin-bottom: 1.375em; cursor: n-resize; background-size: 10px; } .show-detail__body .photo.jcarousel__inner { width: 10000%; } .show-detail__body .photo img { width: auto; max-width: 100%; max-height: 500px; outline: none !important; } .show-detail__body .photo iframe { width: 100%; height: 400px; } .show-detail__body blockquote + p, .show-detail__body p + blockquote { margin-top: 1em; } .show-detail__body blockquote { padding-left: 2em; } .show-detail__body blockquote p { /* FIXME: !important should not be used */ font-size: 1.3em !important; line-height: 1.25em; } .show-detail__body blockquote footer { font-family: 'Ume vertical'; /* FIXME: !important should not be used */ font-size: 1.3em !important; } .show-detail__body blockquote footer:before { content: "– "; } .show-detail__body dl { margin-top: 1.3em; margin-bottom: 0.3em; font-size: .9em; line-height: 1.3em; } .show-detail__body h3 { text-transform: uppercase; font-family: "Ume Mincho"; font-size: 2.2em; margin-top: .5em; line-height: 1em; } .show-detail__body h3 a, .show-detail__body h3 + p, .show-detail__body .dates { color: var(--orange); } article.schedule__item { border: solid 2px black; margin-top: -2pt; } /* .schedule__title a:hover { color: var(--orange); } */ .show-detail__body .programme{ text-transform: uppercase; font-size: .9em; margin-top: 1.5em; } /* .show-detail__body .dates { font-family: "Ume Mincho"; font-size: 1.5em; } */ .show-detail__body h3 + dl { margin-top: .8em; } .show-detail__body .production { text-indent: 0pt; font-family: 'Ume vertical'; } .show-detail__body .production + .production { margin-top: 0em; text-indent: 3em; } @media (--mobile) { .show-detail__header { border-bottom: 2px solid; } .show-detail__body-images { width: 100%; } } @media (--tablet-laptop) { .show-detail__header { border-bottom: 2px solid; } .show-detail__body-images { width: 100%; } .photo { width: 50%; } } @media (--desktop) { .show-detail__header { float: left; width: 40%; min-height: calc(100vh - 44px); padding: 2rem; } .show-detail__body-images { width: 60%; } .show-detail__body { float: left; width: 60%; padding: 8px 35px; } .photo { width: auto; } } /* ========================================================================== General pages ========================================================================== */ .page-detail { padding: 1em; color: var(--primary-color); } .page-detail__header, .page-detail__body { box-sizing: border-box; } .page-detail__body a:hover { color: var(--orange); } .page-detail dl { margin-top: 1em; } .page-detail dt { font-family: 'Ume Mincho'; } .page-detail dd { break-before: avoid-column; } .page-detail dt + dd { margin-right: 10px; } .page-detail dd { break-inside: avoid-column; } .page-detail__header h2 { margin-bottom: 0 !important; } .page-detail__header h3 { margin-top: 0.5em !important; font-family: "Ume vertical" !important; font-size: 1.5em; } .page-detail h2#un-theatre-a-letat-pur, .page-detail h2#a-theatre-in-its-pure-state { margin-top: 0em; margin-bottom: 0em; } h3#un-projet-ethique-pour-les-5-saisons-a-venir { margin-top: 2em; } .page-detail h2#acces + .section3 dl dd { display: block; } .page-detail h2#acces + p { margin-bottom: 12pt; } .page-detail h2#tarifs + dl, .page-detail h2#rates + dl { column-width: 20em; column-gap: 2em; } .page-detail h2#tarifs + dl dd, .page-detail h2#rates + dl dd { display: block; padding-left: 12px; } .page-detail h2#tarifs + dl dd + dt, .page-detail h2#rates + dl dd + dt { margin-top: 10px; } .page-detail .no-display { display: none; } .page-detail .sous-tarif { text-decoration: underline; border: 0px solid black; } .show-detail__body p.production, .page-detail .footnote, .page-detail dd.footnote { margin-top: 12pt; text-indent: 0pt; font-family: "Ume vertical"; font-size: .9em; line-height: 1.3em; column-width: 20em; } .show-detail__body p.pedagogique { margin-top: 24pt; text-indent: 0pt; font-family: "Ume Mincho"; font-size: 1em; line-height: 1.3em; column-width: 20em; } .show-detail__body p.production { column-count: 1; } .page-detail dd.footnote { margin-top: 0; } .page-detail .footnote ol li + li { margin-bottom: 1em; text-indent: 2em; } .page-detail .footnote ol li::before { content: " "; } .page-detail .footnote ol { column-width: 20em; } .page-detail .no-display { display: none; } .page-detail img { max-width: 100%; margin-top: 1em; margin-bottom: 1em; } #page-billetterie .page-detail img[alt="logo label united stages"] { max-width: 75px !important; } #page-billetterie .page-detail img { width: 100%; margin-top: 0em !important; margin-bottom: 0em !important; } .page-detail img[alt="logo label united stages"], .page-detail img[alt="logo accessibilite"] { margin: 0pt; padding-right: 4pt; } @media (--desktop) { .page-detail img.map { /* float: right; */ width: 100%; } } @media (--mobile) { width: 100%; } .page-detail p + p img { } .page-detail p, .page-detail ul { font-size: 1em; /* line-height: 28px; */ } @media (--mobile) { .section2 h2 ~ * { display: none; } .section2 h2:target ~ * { display: block; } } @media (--mobile) { .page-detail__header { border-bottom: 2px solid; } } @media (--tablet-laptop) { .page-detail__header { width: 100%; padding: 2rem; padding-bottom: 0; } .page-detail__body { width: 100%; padding: 2rem; padding-top: 0; } } @media (--desktop) { /* FIXME: does not really work */ .page-detail__header { position: fixed; width: 25%; min-height: 100vh; padding: 2rem; } .page-detail__body { /* float: left; */ width: 55%; margin-left: 45%; padding: 2rem; } } @media (--not-mobile) { .newsletter-active .address, .newsletter-active .telephone { display: none; } } /* ========================================================================== ??? ========================================================================== */ /* FIXME: decide what to do with `.content` */ /* FIXME: Move `.show-detail` classes to the appropriate place */ .content h1 { font-family: 'Ume Mincho'; text-transform: uppercase; font-size: 4em; line-height: 0.9em; hyphens: auto; } .content h1#actualites { font-size: 2em; margin-bottom: 1.5em; } #page-la-balsamine .content .page-detail__body h1 { font-size: 1.5em; margin-bottom: 0.5em; } p + h1, section + section h1 { margin-top: 1em; } h1 + p img { margin: 0; } .content h2 { font-size: 1.1em; line-height: 1.4em; } .content h2 + p { margin-top: 0.4em; } .content.page-detail h3 { margin-top: 1.9em; margin-bottom: 0.5em; font-size: 0.8em; text-transform: uppercase; } .content h4 { margin-top: 1.375em; margin-bottom: 0em; font-size: 1em; line-height: 1.375em; } .content h5 { margin-top: 1.375em; margin-bottom: 0em; font-size: 1em; line-height: 1.375em; } .content a { /* border-radius: 1em; */ /* font-family: 'Ume Mincho'; font-size: 1.2em; */ } .content a:hover { color: var(--orange); } #origine .schedule__title a:hover, #ou-suis-je .schedule__title a:hover, #valhalla .schedule__title a:hover, #lost-in-ballets-russes .schedule__title a:hover, #les-carnets-de-peter .schedule__title a:hover, #laboratoire-poison .schedule__title a:hover, #xx-time .schedule__title a:hover, #Ludum .schedule__title a:hover, #kunsten .schedule__title a:hover, #pif4 .schedule__title a:hover { color: black; } /* article#balsatoile1 .schedule__header, article#balsatoile2 .schedule__header, article#balsatoile3 .schedule__header, article#balsatoile4 .schedule__header, article#balsatoile5 .schedule__header, article#balsatoile6 .schedule__header, article#pianisphère .schedule__header, article#noel-au-theatre .schedule__header, article#soixante-plus .schedule__header, article#Stage .schedule__header */ article .schedule__header { color: black ; height: 10vh; } #origine .schedule__header, #ou-suis-je .schedule__header, #valhalla .schedule__header, #lost-in-ballets-russes .schedule__header, #les-carnets-de-peter .schedule__header, #laboratoire-poison .schedule__header, #xx-time .schedule__header, #Ludum .schedule__header, #kunsten .schedule__header, #pif4 .schedule__header { color: white; height: auto; } .show-detail__body p { font-size: 1.3em; line-height: 1.2em; } .show-detail__body p.production { font-size: .9em; line-height: 1.3em; } h2.show-detail__author { text-transform: none; } .content p, .content ul, .content ol, .content pre, .content table, .content blockquote { margin-top: 0em; margin-bottom: 0em; } .content p + p { margin-top: 1em;} .content ul ul, .content ol ol, .content ul ol, .content ol ul { margin-top: 0em; margin-bottom: 0em; } /* Let's make sure all's aligned */ .content a, .content b, .content i, .content strong, .content em, .content small, .content code { line-height: 0; } .content sub, .content sup { margin-left: 1px; font-size: 0.75em; line-height: 0; } .content sup { vertical-align: 0.45em; } .content sub { vertical-align: -0.45em; } .content dt { font-size: 0.9em; text-transform: uppercase; letter-spacing: .3pt; font-family: 'Ume Mincho'; } #page-billetterie dt { font-size: 1.3em; } #page-billetterie img[alt="tarifs-enfants"]{ float: left; width: 30%; padding-right: 1em; padding-bottom: 1em; } #page-billetterie img[alt="tarifs-groupes"] { float: left; width: 30%; padding-right: 1em; padding-bottom: 1em; } .content dd { padding-left: 0em; font-family: 'Ume vertical'; } .content dd + dd:before { } .content li:before { content: "- "; } .content pre { margin-top: 1em; padding: 1em; color: black; border: 1px solid var(--primary-color); } .content time { display: block; margin-left: 0em; } /* <<<<<<<<< */ /* <<<<<<<<< */ /* ========================================================================== Misc styles ========================================================================== */ /* Reservation link ========================================================================== */ /* FIXME: Merge with `.schedule__booking` and use `--` modifier */ .reservation-link { display: inline-block; float: right; margin: 0.2em 1; margin-top: 1em; /* margin-bottom: 21pt; */ /* FIXME: !important should not be used */ padding: 0.8em !important; text-decoration: none; letter-spacing: 0.04em; font-size: 12pt; color:white; } article[data-color="#ffffff"] .reservation-link { background-color: black !important; } a.reservation-link:hover { /* FIXME: !important should not be used */ background-color: white !important; outline: 2px solid black; color:black; } /* ========================================================================== Slideshow ========================================================================== */ /* FIXME: rename .jcarousel to something more elegant */ .jcarousel { position: relative; overflow: hidden; width: 100%; margin-bottom: 1em; border: 2px solid; } .jcarousel__inner { position: relative; width: 10000%; } .jcarousel__item { float: left; width: 1%; text-align: center; } .jcarousel__item img { width: 100%; } .jcarousel__item figcaption { text-align: left; padding-left: 7px; } .jcarousel__controls { position: absolute; bottom: 15px; width: 100%; font-family: "Ume Mincho Bold"; font-size: 2em; } .jcarousel__control-prev, .jcarousel__control-next { position: absolute !important; top: -15px; display: block; box-sizing: border-box; width: 30px; height: 30px; padding-top: 15px; text-align: center; text-decoration: none; opacity: 0.75; color: black; background-color: white; } .jcarousel__control-prev:hover, .jcarousel__control-next:hover { /* opacity: 1; */ /* background-color: white; */ /* box-shadow: 3px 2px 6px 1px var(--primary-color); */ } .jcarousel__control-prev { left: 10px; } .jcarousel__control-next { right: 10px; } .jcarousel__control-prev.inactive, .jcarousel__control-next.inactive { cursor: default; opacity: .5; } .nojcarousel-item { opacity: 0.5; border-bottom: 1px dotted red; } .nojcarousel-item.active { opacity: 1; } /* FIXME: !important should not be used */ .jcarousel__inner a { border: none !important; } /* <<<<<<<<< */ /* Scrollbar Balsa theme ========================================================================== */ .ps__scrollbar-y-rail:before, .ps__scrollbar-y-rail:after { position: absolute; z-index: 10000; padding-left: 7px; color: var(--green); /*mix-blend-mode: exclusion;*/ font-family: 'Ume Mincho'; font-size: 13px; font-weight: bold; } /* .ps__scrollbar-y-rail:before { top: 0; content: ">"; transform: rotate(-90deg); } .ps__scrollbar-y-rail:after { bottom: 0; content: ">"; transform: rotate(90deg); } */ .ps__scrollbar-y { width: 6px !important; right: 0px !important; background-size: 10px; background-color: var(--scrollbar-thumb-color) !important; opacity: 0.9 !important; } .ps__scrollbar-y:hover { background-color: var(--scrollbar-thumb-color--hover) !important; opacity: 1; } .ps__scrollbar-y-rail { width: 6px !important; } .ps--theme_balsa:hover > .ps__scrollbar-y-rail:hover { background-color: var(--scrollbar-track-color) } /* ========================================================================== TRANSLATION BUTTON ========================================================================== */ .translations { margin-top: 1em; margin-bottom: 2em; } .translations a { padding: 0.2em; /* padding-top: 0.4em; */ text-decoration: none; /* text-transform: uppercase; */ border: 2px solid black; } .translations a:hover { background-color: var(--orange); background-position: 10px; color:white; } /* ========================================================================== TABLE OF CONTENTS ========================================================================== */ .toc ul { font-size: 1em; line-height: 1.3em; text-transform: uppercase; } .toc ul ul { display: none; } #page-home .toclink { text-decoration: none; } .no-touch .toclink { text-decoration: none; } @media (--mobile) { .toc { margin-bottom: 1.3em; column-count: 2; } } @media (--tablet-laptop) { .toc { column-count: 2; } } @media (--desktop) { .toc { } } /* ========================================================================== HOME ========================================================================== */ #page-home .content h1 { /* display: none; */ } #page-home .content h1#saison-1819 { font-size: 2.3em; margin-bottom: 0pt; } #page-home .content h1#saison-1819 { } #page-home .page-detail > div { box-sizing: border-box; padding: 0 1em; padding-bottom: 1em; } #page-home .content div img { margin: 0; } #page-home .content p { margin-bottom: 1.3em; text-indent: 0; } #page-home .content em { text-transform: uppercase; } #page-home .content .small { font-size: 0.6em; } #page-home .content .announcement { color: var(--orange); /*float: left; min-width: 60px; background-color: blue;*/ } #page-home .content small { font-size: 0.6em; } @media (--mobile) { div.video-embed { width: 100%; height: 250px; } div.video-embed iframe{ top: 0; left: 0; width: 100%; height: 100%; } } @media (--desktop) { #page-home .page-detail > div { float: left; width: 50%; } #page-home .page-detail > div.single-column-home { width: 80%; max-width: 900px; margin: 0 auto; float: none; } div.video-embed { width: 100%; height: 500px; } div.video-embed iframe{ top: 0; left: 0; width: 100%; height: 100%; } #page-home .page-detail img.half{ width: 48%; margin-right: 1%; } #page-home .page-detail img.third{ width: 33%; margin-right: 2%; } #page-home .page-detail img.quarter{ width: 22%; margin-right: 2%; } } .clear { clear:both; }