/* * Sweet Revolution — retouches de la page concours. * * Chargée uniquement sur les pages qui utilisent tpl-concours.php * (voir App\Controller\ContestController::enqueueAssets), donc indépendamment * de la phase : la page se prépare en phase 1 et s'ouvre en phase 2. * * Même principe que les feuilles de phase : du CSS simple, écrit à la main et * hors du bundle webpack, qui doit pouvoir être retiré sans recompiler. */ /* --- Le cadre « comment participer » ----------------------------------- * * `medium-padding` ne pose que du padding vertical (`padding: 80px 0`), si * bien que le texte du cadre orange touchait ses deux bords. Le reste du site * ne s'en aperçoit pas : ailleurs, le contenu de ces cadres est dans un `.row` * dont les gouttières font office de marge. */ .page-template-tpl-concours #rules > .container { box-sizing: border-box; padding-left: 60px; padding-right: 60px; } @media screen and (max-width: 800px) { .page-template-tpl-concours #rules > .container { padding-left: 25px; padding-right: 25px; } } /* Les titres du thème sont dessinés avec un contour épais de la couleur du * fond. Sur le fond orange du cadre, ce contour mange la lettre et le titre * devient orange sur orange. Ici, aplat blanc et pas de contour. */ .page-template-tpl-concours #rules h2, .page-template-tpl-concours #rules h3 { color: #fff; -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none; } .page-template-tpl-concours #rules ol, .page-template-tpl-concours #rules ul { margin-bottom: 30px; } /* --- Les intertitres du formulaire ------------------------------------- * * « Jouw gegevens », « Jouw dessert »… sont des champs HTML de Ninja Forms * (`html-container`). Sans style ils sortent au corps du texte courant et ne * séparent plus rien. On leur rend le rôle de sous-titre, et on les décolle du * groupe de champs qui précède. */ .page-template-tpl-concours #contest-form .html-container { margin-top: 35px; } .page-template-tpl-concours #contest-form .html-container:first-child { margin-top: 0; } .page-template-tpl-concours #contest-form .html-container .nf-field-element { color: #312D5A; font-family: new-spirit-condensed, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2em; } /* --- Les desserts déjà partagés ---------------------------------------- * * Rien dans le bundle ne cible `#content` : le bouton se colle sous la * dernière rangée de vignettes, comme il le faisait sur la page d'accueil. */ .page-template-tpl-concours #content .recipes > .action { margin-top: 40px; } /* --- Les illustrations de la campagne ---------------------------------- * * Le thème a ses cinq dessins — orange, œuf, pomme, potiron, noix de coco — * mais chacun est verrouillé sur `.page-template-tpl-home` dans le bundle. On * les repose ici pour cette page, avec le même gabarit : carré de 250 px, * détouré, en position absolue, animé au défilement par `rellax`. * * Purement décoratifs : `pointer-events: none` pour ne jamais intercepter un * clic dans le formulaire, et masqués sous 1100 px, où il n'y a plus de marge * autour du contenu et où ils passeraient par-dessus le texte. */ .page-template-tpl-concours .deco { display: none; } @media screen and (min-width: 1100px) { .page-template-tpl-concours #rules, .page-template-tpl-concours #contest-form { position: relative; } .page-template-tpl-concours .deco { background-position: 50%; background-repeat: no-repeat; background-size: contain; display: block; height: 200px; pointer-events: none; position: absolute; width: 200px; z-index: 2; } .page-template-tpl-concours .deco-orange { background-image: url(/app/themes/lumber/static/gfx/orange.png); right: 30px; top: -30px; } .page-template-tpl-concours .deco-eie { background-image: url(/app/themes/lumber/static/gfx/eie.png); bottom: -20px; left: 10px; } .page-template-tpl-concours .deco-coco { background-image: url(/app/themes/lumber/static/gfx/coco.png); left: 40px; top: 60px; } .page-template-tpl-concours .deco-pump { background-image: url(/app/themes/lumber/static/gfx/pump.png); bottom: 60px; right: 40px; } } /* --- Le lettrage de campagne en tête ------------------------------------ * * Les visuels de la médiathèque (« Website illustrations… ») sont des titres * dessinés, très horizontaux, sur fond transparent. Centrés et bridés en * largeur, sinon ils écrasent le titre qui les suit. */ .page-template-tpl-concours #hero .intro-image { margin: 0 auto 35px; max-width: 620px; } .page-template-tpl-concours #hero .intro-image img { display: block; height: auto; margin: 0 auto; max-width: 100%; } /* --- La colonne de tête ------------------------------------------------ * * `container smallest` laisse au texte toute la largeur du site : sur un grand * écran, les lignes de l'introduction dépassent 140 caractères, bien au-delà * de ce qui se lit sans effort. On resserre à une colonne centrée, alignée sur * le lettrage qui la surmonte, et on centre le texte comme le fait déjà le * hero de la page d'accueil. */ .page-template-tpl-concours #hero .content { margin: 0 auto; max-width: 760px; text-align: center; } /* --- Le titre de la section formulaire ---------------------------------- * * Les titres du thème portent un contour épais de la couleur du fond, pensé * pour les grands aplats bleus. Sur le bleu clair de cette section il brouille * la lettre : aplat prune, sans contour, comme les intertitres du formulaire * juste en dessous. */ .page-template-tpl-concours #contest-form > .container > h2 { color: #312D5A; -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none; margin-bottom: 35px; } /* --- L'astérisque des champs obligatoires -------------------------------- * * Tous les champs du formulaire sont déclarés `required` (voir * _res/ninja-forms/generer.py), mais l'astérisque rouge n'apparaissait que sur * le nom, le prénom, le nombre et la case à cocher. Le bundle le masque pour * les autres : * * .field-wrap.email-wrap:not(.submit-wrap)>.nf-field-label .ninja-forms-req-symbol, * .field-wrap.textbox-wrap:not(.submit-wrap)>.nf-field-label .ninja-forms-req-symbol * { color:#fff!important; display:none; left:0!important } * * Deux sélecteurs qui couvrent en réalité huit champs : l'e-mail, les six * champs texte, et la photo du dessert — le conteneur du champ « file_upload » * porte `file_upload-wrap textbox-wrap`, il tombe donc dans la seconde règle. * * On reprend les mêmes sélecteurs, préfixés du modèle de page pour ne rien * changer aux pop-up, et on rétablit le rouge de Ninja Forms — mesuré * rgb(232, 0, 0) sur le prénom, celui que le client montre en exemple. * `!important` sur la couleur seulement : le bundle l'y met, pas sur `display`. */ .page-template-tpl-concours .field-wrap.email-wrap:not(.submit-wrap) > .nf-field-label .ninja-forms-req-symbol, .page-template-tpl-concours .field-wrap.textbox-wrap:not(.submit-wrap) > .nf-field-label .ninja-forms-req-symbol { color: #e80000 !important; display: inline; } /* --- L'éditeur enrichi de la liste d'ingrédients ------------------------- * * Le champ « liste des ingrédients » ouvre l'éditeur Summernote de Ninja * Forms. Livré tel quel, il pose un bloc gris clair au milieu du cadre bleu : * barre d'outils sur #F5F5F5, zone de saisie sur #F9F9F9 en texte noir, et * chaque bouton repris par la règle du thème * `.nf-form-content button{background:var(--main-color)!important; * border-radius:6px!important;padding:0 30px!important}` — d'où les grosses * pastilles bleues, larges de 105 px pour une icône de 20. * * On efface ces fonds pour que l'éditeur se fonde dans le cadre, comme les * autres champs : icônes blanches posées à même le bleu, filet de séparation * sous la barre d'outils, saisie en blanc. La feuille de Summernote est * chargée avant celle-ci, une spécificité égale suffit donc à l'emporter. */ .page-template-tpl-concours .note-editor.note-frame { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin-bottom: 0; } .page-template-tpl-concours .note-editor .note-toolbar { background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.45); border-radius: 0; padding: 0 0 6px; } /* Les boutons : plus de pastille, une icône blanche et un simple voile au survol. La règle du thème pose `!important` sur chacune de ses valeurs, il faut donc le reprendre — sans quoi la spécificité ne suffit pas et les boutons gardent leurs 30 px de rembourrage latéral. */ .page-template-tpl-concours .note-editor .note-toolbar .note-btn { background: transparent !important; border: 0 !important; border-radius: 4px !important; box-shadow: none; color: #fff !important; height: auto; line-height: 1; padding: 5px 8px !important; } .page-template-tpl-concours .note-editor .note-toolbar .note-btn:hover, .page-template-tpl-concours .note-editor .note-toolbar .note-btn:focus, .page-template-tpl-concours .note-editor .note-toolbar .note-btn.active { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; } .page-template-tpl-concours .note-editor .note-toolbar .note-btn .dashicons { color: #fff; vertical-align: middle; } /* La zone de saisie prend le fond du cadre et le blanc des autres champs. */ .page-template-tpl-concours .note-editor .note-editing-area .note-editable { background: transparent; border: 0; color: #fff; font-family: sofia-pro, sans-serif; line-height: 1.5; min-height: 150px; padding: 10px 0 0; } .page-template-tpl-concours .note-editor .note-editing-area .note-editable:focus { outline: 0; } .page-template-tpl-concours .note-editor .note-placeholder { color: rgba(255, 255, 255, 0.7); padding: 10px 0 0; } /* Le reset du thème neutralise ol/ul : sans ces deux règles, le participant qui clique sur « liste à puces » ne voit rien changer à l'écran, alors que le