#overlay { background-attachment: initial; background-color: rgb(18, 23, 29); } #overlay .perspective { background-attachment: initial; background-color: rgba(255, 255, 255, 0); } a, code, .blockquote-block, .tab-circle, .wpb_content_element.circle a, a.button-more,.pages a, .pages .current, .iron_widget_newsletter input[type="submit"]:hover, .iron_widget_twitter .twitter-logo, .iron_widget_twitter .twitter-logo-small, .blockquote-block, .tab-circle, a.meta-author-link, .post-categories a, .post-tags a, .comment-content a, .comment-author .fn, .comment-author .url, .comment-reply-link, .comment-reply-login, .comment-meta a:hover, .comment-reply-title small a:hover, .comments-title, .nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a, .iron_widget_recent_tweets .meta .time a, .carousel .datetime, .article .datetime, .single-post time, .meta .datetime, .blockquote-block .title, .blockquote-block figcaption, span.wpcf7-not-valid-tip-no-ajax, .wpcf7-response-output, .photos-list .hover-text span, .contact-box .phone, .error, .success span, .concerts-list .title-row .date, .concerts-list .expanded .title-row .link, .iron_widget_newsletter label span, .concerts-list .title-row .link, .icon-concert-dropdown, li.expanded .title-row .icon-concert-dropdown, .media-block a:hover .media-decoration.media-audio, .media-block a:hover .media-decoration.media-audio, .media-decoration.media-video, .carousel .video-box .btn-play, .terms-list small, .terms-list [class^="icon-"], .terms-list [class*=" icon-"], .nm_mc_form .nm_mc_button:hover, .footer-wrapper-backtotop:hover, #sidebar .panel-action, .tweet_text a, .iron_widget_newsletter .nm_mc_button input[type="submit"]:hover, #footer .iron_widget_newsletter input[type="submit"]:hover, #footer .nm_mc_form input[type="submit"]:hover, .iron_widget_newsletter input[type="submit"], .nm_mc_form input[type="submit"], .event-more-button, .nav-menu li:hover > a, ul.nav-menu li.menu-item ul.sub-menu li:hover a, ul.nav-menu ul a:hover, .nav-menu ul ul a:hover, .nav-menu .has-drop-down ul a:hover, .nav-menu li a.backbtn:hover, .wpb_content_element a, #sidebar .textwidget a, blockquote p, .footer__widgets ul a, .wooprice ins, .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price, .woocommerce div.product span.price, .woocommerce div.product p.price, .woocommerce #content div.product span.price, .woocommerce #content div.product p.price, .woocommerce-page div.product span.price, .woocommerce-page div.product p.price, .woocommerce-page #content div.product span.price, .woocommerce-page #content div.product p.price, .wooprice, .woocommerce .star-rating, .woocommerce-page .star-rating, .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .woocommerce #content nav.woocommerce-pagination ul li a, .woocommerce #content nav.woocommerce-pagination ul li span, .woocommerce-page nav.woocommerce-pagination ul li a, .woocommerce-page nav.woocommerce-pagination ul li span, .woocommerce-page #content nav.woocommerce-pagination ul li a, .woocommerce-page #content nav.woocommerce-pagination ul li span, .woocommerce table.cart a.remove, .woocommerce #content table.cart a.remove, .woocommerce-page table.cart a.remove, .woocommerce-page #content table.cart a.remove, .woocommerce .woocommerce-product-rating .star-rating, .woocommerce-page .woocommerce-product-rating .star-rating, .woo-thanks, .infobox-icon, .menu-toggle-off, a.back-btn, .playlist_enabled .player-box .jp-playlist ul li .button, .button.add_to_cart_button.product_type_simple, .post-password-form input[type="submit"], li:hover .has-drop-down-a .sub-arrow i, .social-networks a i:hover, .side-menu .social-networks a i:hover, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page #content input.button.alt, .shipping-calculator-button, .articles-classic .text-box a:hover h2, .articles-classic a.readmore-classic:hover, article a.more-link:hover, #commentform .form-submit #submit, .stickypost i, .simple-post-txt-wrap a:hover h2, .portfolio .portfolio-prev:hover .prev-text, .portfolio .portfolio-next:hover .next-text, .portfolio .portfolio-prev:hover i.fa-long-arrow-left, .portfolio .portfolio-next:hover i.fa-long-arrow-right, .portfolio .portfolio-mid-wrap i.fa-th:hover, .player-title-box .track-name, .audio-holder .jp-playlist ul.tracks-list li.jp-playlist-current div a, .articles-classic .post-categories a:hover, .articles-classic .post-tags a:hover { color: rgb(95, 95, 95); } .store-list a.button:hover, .panel-action:hover, .album-overlay, .pages .current, .listing-section .media-block a:hover, .pages a:hover, a.button-more:hover, .type-album .tracks-block .player-box, .iron_widget_newsletter, .iron_widget_newsletter input[type="email"], .nm_mc_form input[type="text"], #footer .newsletter-wrap, .concerts-list .title-row:hover .buttons .button, .store-list a.button:hover, .album-overlay, .marquee .tp-leftarrow, .marquee .tp-rightarrow, .marquee .more, .carousel .btn-prev:hover, .carousel .btn-next:hover, .carousel .slide a:hover, .concert-box .hover-box, .article a:hover, .pages .current, .pages a:hover, .button-more:hover, a.button, .comment-form #submit, .wpcf7-submit, .filters-block a.active, .form input[type="submit"], .concerts-list .title-row .time, .concerts-list .title-row.has_countdown:hover .buttons, .concerts-list .expanded .title-row .button, .concerts-list .expanded .title-row:after, .iron_widget_newsletter input[type="submit"]:focus, .iron_widget_newsletter input[type="submit"]:hover, .select-options .item-selected a, .concerts-list .expanded .title-row .opener:hover:after, .concerts-list .title-row .button, .media-decoration.media-audio, .tracks-list .btn-play [class^="icon-"], .tracks-list .btn-play [class*=" icon-"], .tracks-list .btn-pause [class^="icon-"], .tracks-list .btn-pause [class*=" icon-"], .player-box a:hover [class^="icon-"], .player-box a:hover [class*=" icon-"], .social-networks a:hover [class^="icon-"], .social-networks a:hover [class*=" icon-"], .carousel .video-box .icon-play, #searchform input[type="submit"], .news-grid-wrap a:hover, .iron_widget_videos .video-list article a:hover, a.back-btn:hover, .photo-wrap:hover .tab-text, .videogrid:hover .text-box, .page-template-archive-video .media-block:hover .text-box, .playlist_enabled .player-box .jp-playlist ul li .button:hover, .button.add_to_cart_button.product_type_simple:hover, .post-password-form input[type="submit"]:hover, .title-row.no-countdown:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce #content input.button:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page #content input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce #content input.button.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce table.cart a.remove:hover, .woocommerce #content table.cart a.remove:hover, .woocommerce-page table.cart a.remove:hover, .woocommerce-page #content table.cart a.remove:hover, .shipping-calculator-button:hover, .woocommerce #content nav.woocommerce-pagination ul li a:focus, .woocommerce #content nav.woocommerce-pagination ul li a:hover, .woocommerce #content nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce-page #content nav.woocommerce-pagination ul li a:focus, .woocommerce-page #content nav.woocommerce-pagination ul li a:hover, .woocommerce-page #content nav.woocommerce-pagination ul li span.current, .woocommerce-page nav.woocommerce-pagination ul li a:focus, .woocommerce-page nav.woocommerce-pagination ul li a:hover, .woocommerce-page nav.woocommerce-pagination ul li span.current, .playlist_enabled .player-box .jp-playlist ul li:hover, .woocommerce-message .button.wc-forward:hover, #commentform .form-submit #submit:hover, .news-grid-wrap a.sticky, .news-grid-wrap.isotope-item a.sticky, ins { background-color: rgb(95, 95, 95); } .tab-circle,a.button-more, .tab-circle, input.error, .event-more-button, .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info, .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message, .chosen-container-active .chosen-single, a.back-btn, .playlist_enabled .player-box .jp-playlist ul li .button, .button.add_to_cart_button.product_type_simple, .post-password-form input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page #content input.button.alt .shipping-calculator-button, .articles-classic a.readmore-classic:hover, article a.more-link:hover, #commentform .form-submit #submit, .page-template-archive-posts-classic-php .media-block.sticky .holder, blockquote, .portfolio .portfolio-rightside a.portfolio-button { border-color: rgb(95, 95, 95); } .footer__widgets > .iron_widget_newsletter input[type="submit"], .carousel .btn-prev, .carousel .btn-next, .panel .opener, .blockquote-box figcaption:before, .concerts-list .title-row .time, .form input[type="text"], .form input[type="email"], .form input[type="password"], .form textarea, .comment-form input, .comment-form textarea, .select-options, .jp-no-solution, .nav-menu li:hover > a, ul.nav-menu ul a:hover, .nav-menu ul ul a:hover, .nav-menu .has-drop-down ul a:hover, .nm_mc_form .nm_mc_button:hover, .comment-text, #footer .iron_widget_newsletter .nm_mc_button:hover { background-color: rgb(255, 255, 255); } #footer .iron_widget_newsletter input[type="email"], #footer .nm_mc_form input[type="text"], #footer .iron_widget_newsletter input[type="submit"], #footer .nm_mc_form input[type="submit"], .concerts-list .title-row:hover .buttons .button, .vc_span4 .concerts-list .title-row .datetime, .vc_span3 .concerts-list .title-row .datetime, .vc_span2 .concerts-list .title-row .datetime, #sidebar .concerts-list .title-row .datetime, .footer__widgets .panel__heading, .footer__widgets > .iron_widget_newsletter .control-append, .concerts-list .title-row .datetime, .event-row .datetime, .pages.full li a, .pages.full li span, .comment-reply-title small a, #footer .widget-area label.control-label, .page-numbers.dots { border-color: rgb(255, 255, 255); } .listing-section .media-block a, .blockquote-block, .store-list a.button, .event-row, .type-album .text-box, .tracks-list > li, .panel-action, .iron_widget_twitter .panel__body, .iron_widget_twitter .panel-action, .iron_widget_radio .panel__body, .photo-wrap .photo-album-tab, .news-grid-wrap a, .container .iron_widget_newsletter, .container .newsletter-wrap, .videogrid, .iron_widget_videos .video-list article a, blockquote, .articles-classic .media-block .holder, .pages a { background-color: rgb(18, 23, 29); } #sidebar .panel-action:hover, .iron_widget_newsletter .newsletter-wrap nm_mc_button, .iron_widget_newsletter input[type="submit"]:hover, a.button:hover, .wpb_accordion_section a, .ui-tabs-anchor { background-color: rgb(255, 255, 255); } .comment-respond, .container .iron_widget_newsletter input[type="email"], .container .nm_mc_form input[type="text"], .container .iron_widget_newsletter input[type="submit"], .container .nm_mc_form input[type="submit"], .post-password-form input[type="password"], .wpb_tabs_nav { border-color: rgb(255, 255, 255); } .footer-block.share { background-color: rgb(18, 23, 29); } .iron_widget_newsletter input[type="email"], .nm_mc_form input[type="text"], .nm_mc_form label, #footer .iron_widget_newsletter input[type="submit"], #footer .nm_mc_form input[type="submit"], .countdown-section, .countdown-amount, .countdown-period, .footer-block .social-networks a, .footer__widgets, .footer-row, .footer__widgets > .iron_widget_newsletter .control-label, .footer__widgets > .iron_widget_newsletter .form-control, .footer-row ul, .footer-row ul a, .concerts-list .title-row .open-link, .concerts-list .title-row .button:hover, .panel__heading, .panel__footer, .title-box, .title-box h2, .carousel .btn-prev:hover, .carousel .btn-next:hover, .media-decoration.media-audio, #header, .nav-menu li a, ul.nav-menu ul a, .nav-menu ul ul a, .iosSlider .slider .item .inner .text1 span, .iosSlider .slider .item .inner .text2 span, a.button:hover, .store-list a.button:hover, .concerts-list, .title-row:hover .icon-concert-dropdown, .concerts-list .title-row:hover .button:hover, .concerts-list .expanded .title-row .button:hover, .concerts-list .title-row .opener, .album-listen, .circle, .tracks-list, .tracks-list .button, .tracks-list .btn-play, .tracks-list .btn-pause, .gallery-caption, .pages .current, .pages a:hover, a.button-more:hover, .pages .current, .form input[type="submit"]:hover, .comment-form #submit, .wpcf7-submit, .comment-form #submit:hover, .wpcf7-submit:hover, .concert-box .time, .video-box .hover-box, .video-box h2, .video-box .icon-play, .marquee .more, .pages .current, .pages a:hover, .button-more:hover, .concerts-list .title-row.has_countdown:hover .button:hover, .concerts-list .title-row.has_countdown:hover .buttons .button, .iron_widget_newsletter .form-status, .concerts-list .title-row .button, .footer__widgets .iron_widget_radio .info-box, #footer .tweet_text, #footer .nm_mc_error #footer .textwidget, #footer .newsletter-title-wrap h3, #footer .newsletter-description-wrap, #footer .newsletter-description-wrap p, a.button, play-button, .darker-overlay h1, .darker-overlay h2, .darker-overlay h3, .darker-overlay h4, .darker-overlay h5, .darker-overlay h6, #footer .wp-calendar, #footer p, #footer ul, #footer li, #footer dl, #footer dt, #footer dd, #footer ol, #footer pre, #footer tr, #footer td, #footer th, #sidebar .button.wc-forward, .post-password-form input[type="password"], #footer .iron_widget_newsletter .newsletter-wrap .control-description, #footer .iron_widget_newsletter .nm_mc_button:hover { color: rgb(255, 255, 255); } #footer ::-webkit-input-placeholder { color: rgb(255, 255, 255); } #footer :-moz-placeholder { color: rgb(255, 255, 255); } #footer ::-moz-placeholder { color: rgb(255, 255, 255); } #footer :-ms-input-placeholder { color: rgb(255, 255, 255); } .photo-wrap:hover .tab-circle, .comment-list > li:after, .comment-list .children > li:before, .comment-reply-title, .woocommerce-page.single-product div.product .woocommerce-Tabs-panel--additional_information.panel, .single-product table.shop_attributes, .woocommerce-page #reviews #comments ol.commentlist li .comment-text { border-color: rgb(154, 154, 154); } body, .video-post, .single-post h2, .concerts-list .title-row .datetime, .event-row .datetime, .type-album .text-box h2, .tab-title, .tab-title .excerpt, .tracks-list .name, .comment-reply-title, h2.widgettitle, #sidebar .panel__heading, #sidebar .panel__heading h3, .media-block .datetime, .media-block .meta-simple, .media-block .category, .form input[type="submit"], .concerts-list .title-row .time, .concerts-list .expanded .title-row .button, .post_grid .tab-text time.datetime, h1, h3.widgettitle, .excerpt p, .tweet_text, .content-box, .available-now, .release-date, .store-list a.button, .container .nm_mc_form input[type="text"], .container .nm_mc_form label, .container .nm_mc_error, #sidebar .nm_mc_error, .event-row .button, .media-block h2, .tracks-list > li:before, .tab-date, .videogrid .text-box h2, .control-description, .wpb_content_element, .photo-wrap:hover .tab-circle, .lighter-overlay h1, .lighter-overlay h2, .lighter-overlay h3, .lighter-overlay h4, .lighter-overlay h5, .lighter-overlay h6, .news-grid-wrap a:hover time, .news-grid-wrap a:hover .meta-author-link, .news-grid-tab .datetime, .news-grid-tab .meta-author-link, .news-grid-tab .post-categories, .news-grid-tab .post-tags, .news-grid-wrap a:hover .post-categories, .news-grid-wrap a:hover .post-tags, #sidebar .textwidget, ul, li, dl, dt, dd, ol, pre, tr, td, th, .wooprice del, .woocommerce .woocommerce-message, .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-error, .woocommerce-page .woocommerce-info, .description_tab, .reviews_tab, h3, .news-grid-wrap a.sticky, .news-grid-wrap.isotope-item a.sticky, .portfolio-sidetitle, .portfolio-sidelist, .portfolio .portfolio-prev .prev-text, .portfolio .portfolio-next .next-text, .portfolio .portfolio-prev i.fa-long-arrow-left, .portfolio .portfolio-next i.fa-long-arrow-right, .portfolio .portfolio-mid-wrap i.fa-th, .panel-action:hover { color: rgb(154, 154, 154); } ::-webkit-input-placeholder { color: rgb(154, 154, 154); } :-moz-placeholder { color: rgb(154, 154, 154); } ::-moz-placeholder { color: rgb(154, 154, 154); } :-ms-input-placeholder { color: rgb(154, 154, 154); } .side-menu, .nav-menu .sub-menu, .nav-menu .children { background-attachment: initial; background-color: #353535; } ul.header-top-menu { background-color: #ffffff; } .fill-menuicon { fill: #000000; } .fill-closemenu { fill: #ffffff; } .menu-toggle-off i { color: #ffffff; } .responsive-header a.sandwich-icon { color: rgb(208, 208, 208); } .responsive-header a.sandwich-icon:hover { color: #ffffff; } body, .entry p, .single-product th, .single-product td, .single-product tr, .comment-text { font-family: Karla; font-weight: 400; font-style: normal; font-size: 15; line-height: 1.2; color: rgb(208, 208, 208); } h1 { font-family: Montserrat; font-weight: 600; font-style: normal; font-size: 44; line-height: 1.2; color: rgb(255, 255, 255); letter-spacing: 1px; } h2, .single-post h2, .text-box h2, .video-box h2, .title-box h2, .news .media-block h2, .iron_widget_recent_posts .news .media-block h2, .type-album .text-box h2 { font-family: Montserrat; font-weight: 600; font-style: normal; font-size: 34; line-height: 1.2; color: rgb(255, 255, 255); } h3, h3.widgettitle, .cr_it-playlist-title { font-family: Montserrat; font-weight: 500; font-style: normal; font-size: 26; line-height: 1.2; color: rgb(255, 255, 255); } h4 { font-family: Montserrat; font-weight: 500; font-style: normal; font-size: 20; line-height: 1.2; color: rgb(255, 255, 255); letter-spacing: 1px; border-color: rgb(255, 255, 255); } h5 { font-family: Montserrat; font-weight: 500; font-style: normal; font-size: 16; line-height: 1.2; color: rgb(255, 255, 255); letter-spacing: 1px; } h6 { font-family: Montserrat; font-weight: 500; font-style: normal; font-size: 14; line-height: 1.2; color: rgb(255, 255, 255); letter-spacing: 1px; } a.panel-action.panel-action__label { font-family: Montserrat; font-weight: 600; font-style: normal; font-size: 11; line-height: 1.2; text-transform: uppercase; color: rgb(255, 255, 255); letter-spacing: 1px; } a.button-widget { font-family: Montserrat; font-weight: 600; font-style: normal; font-size: 12; line-height: 1.2; text-transform: uppercase; color: rgb(255, 255, 255); letter-spacing: 1px; } h2 { letter-spacing: 1px; } h3 { letter-spacing: 1px; } span.heading-t, span.heading-b { background-color: rgb(255, 255, 255); } span.heading-t3, span.heading-b3 { background-color: rgb(255, 255, 255); } .lighter-overlay span.heading-t, .lighter-overlay span.heading-b { background-color: rgb(154, 154, 154); } .lighter-overlay span.heading-t3, .lighter-overlay span.heading-b3 { background-color: rgb(154, 154, 154); } .darker-overlay span.heading-t, .darker-overlay span.heading-b { background-color: rgb(255, 255, 255); } .darker-overlay span.heading-t3, .darker-overlay span.heading-b3 { background-color: rgb(255, 255, 255); } .classic-menu { width: calc( 100% - 0px - 0px ); margin-left: 0px; margin-right: 0px; margin-top: 8px; margin-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 8px; padding-bottom: 8px; } .classic-menu > ul > li { margin-left: 0px; margin-right: 0px; margin-top: 8px; margin-bottom: 8px; } .classic-menu > ul > li a { padding-left: 6px; padding-right: 6px; padding-top: 15px; padding-bottom: 15px; } .classic-menu > ul > li.logo { padding-left: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 0px; } .responsive-header { background-color: rgb(18, 23, 29); } .listing-section .holder:hover h2 { color: #ffffff; } .news-grid-wrap a:hover .tab-title { color: #ffffff; } .classic-menu > ul > li a, .classic-menu > ul > li.languages-selector > ul > li a { font-family: Montserrat; font-weight: 500; font-style: normal; font-size: 13; line-height: 1.2; text-transform: uppercase; color: rgb(208, 208, 208); } .classic-menu > ul > li > ul > li a { font-family: Montserrat; font-weight: 500; font-style: normal; font-size: 12; line-height: 1.2; color: rgb(208, 208, 208); background-color: rgb(18, 23, 29); } .classic-menu > ul > li a:hover, .classic-menu > ul > li.languages-selector > ul > li a:hover { background-color: rgb(18, 23, 29); color: rgb(255, 255, 255); } .classic-menu > ul > li.current-menu-item > a { background-color: rgb(18, 23, 29); color: #ffffff; } .classic-menu > ul > li.current-menu-ancestor > a { background-color: rgb(18, 23, 29); color: #ffffff; } .classic-menu > ul > li > ul > li a:hover { background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); } .classic-menu > ul > li > ul > li.current-menu-item > a { background-color: rgb(18, 23, 29); color: #ffffff; } .classic-menu > ul > li > a, .classic-menu > ul > li.languages-selector a { letter-spacing: 1px; } .classic-menu ul.sub-menu li a { letter-spacing: 1px; } .menu-item a:hover { text-decoration: none; } .color1_txt, .color1_txt p { color: rgb(95, 95, 95); } .color1_bg { background-color: rgb(95, 95, 95); } .color2_txt, .color2_txt p { color: rgb(255, 255, 255); } .color2_bg { background-color: rgb(255, 255, 255); } .color3_txt, .color3_txt p { color: rgb(18, 23, 29); } .color3_bg { background-color: rgb(18, 23, 29); } .color4_txt, .color4_txt p { color: rgb(255, 255, 255); } .color4_bg { background-color: rgb(255, 255, 255); } .color5_txt { color: rgb(255, 255, 255); } .color5_bg { background-color: rgb(255, 255, 255); } .color6_txt { color: rgb(154, 154, 154); } .color6_bg { background-color: rgb(154, 154, 154); } #footer, .footer-row { background-color: rgb(18, 23, 29); } .footer-row { padding-top: 0px; padding-bottom: 0px; } /* ========================================================= SYLVERMAY.COM — GLOBAL CUSTOM CSS Monochrome identity + Responsive ========================================================= */ /* ========================================================= 1. GLOBAL PALETTE ========================================================= */ :root { --syl-white: #ffffff; --syl-light: #d0d0d0; --syl-grey: #9a9a9a; --syl-grey-dark: #5f5f5f; --syl-border: #777777; --syl-charcoal: #12171d; --syl-black: #000000; } /* ========================================================= 2. GENERAL TRANSITIONS ========================================================= */ a, button { transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease !important; } /* ========================================================= 3. HEADER / MAIN MENU ========================================================= */ .classic-menu > ul > li > a { color: var(--syl-light) !important; } .classic-menu > ul > li > a:hover { color: var(--syl-white) !important; } .classic-menu > ul > li.current-menu-item > a, .classic-menu > ul > li.current_page_item > a, .classic-menu > ul > li.current-menu-ancestor > a { color: var(--syl-white) !important; } /* ========================================================= 4. HEADER SOCIAL ICONS ========================================================= */ .classic-menu > ul > li.hotlink:not(.languages-selector) > a, .classic-menu > ul > li.hotlink:not(.languages-selector) > a i, .classic-menu > ul > li.hotlink:not(.languages-selector) > a i::before { color: var(--syl-grey) !important; } .classic-menu > ul > li.hotlink:not(.languages-selector) > a:hover, .classic-menu > ul > li.hotlink:not(.languages-selector) > a:hover i, .classic-menu > ul > li.hotlink:not(.languages-selector) > a:hover i::before { color: var(--syl-white) !important; } /* ========================================================= 5. HEADER HOT LINKS — SOCIAL ICON SIZE ========================================================= */ .classic-menu > ul > li.hotlink:not(.languages-selector) > a i, .classic-menu > ul > li.hotlink:not(.languages-selector) > a i::before { font-size: 15px !important; line-height: 1 !important; } /* ========================================================= 6. GLOBAL SOCIAL NETWORKS ========================================================= */ .social-networks a, .social-networks a i, .social-networks a i::before { color: var(--syl-grey) !important; } .social-networks a:hover, .social-networks a:hover i, .social-networks a:hover i::before { color: var(--syl-white) !important; } /* ========================================================= 7. CROMA AUDIO PLAYER — TRACK TEXT ========================================================= */ .iron-audioplayer .playlist .audio-track, .iron-audioplayer .playlist .track-number, .iron-audioplayer .playlist .tracklist-item-title { color: var(--syl-light) !important; } /* ========================================================= 8. CROMA AUDIO PLAYER — DOWNLOAD / BUY TRACK ========================================================= */ .iron-audioplayer .playlist a.button { opacity: 1 !important; background: var(--syl-grey-dark) !important; background-color: var(--syl-grey-dark) !important; color: var(--syl-white) !important; border: 1px solid var(--syl-grey-dark) !important; border-radius: 3px !important; padding: 1px 6px !important; text-transform: uppercase !important; text-decoration: none !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } .iron-audioplayer .playlist a.button:hover { background: var(--syl-white) !important; background-color: var(--syl-white) !important; color: var(--syl-black) !important; border-color: var(--syl-white) !important; } /* ========================================================= 9. CROMA AUDIO PLAYER — TRACK ARROWS ========================================================= */ .iron-audioplayer .playlist .track-number svg rect, .iron-audioplayer .playlist .track-number svg path { fill: var(--syl-grey) !important; transition: fill 0.25s ease !important; } .iron-audioplayer .playlist li:hover .track-number svg rect, .iron-audioplayer .playlist li:hover .track-number svg path { fill: var(--syl-white) !important; } /* ========================================================= 10. CROMA DIVIDERS Removes divider-gold.png ========================================================= */ .dividerwrap { padding-top: 0 !important; padding-bottom: 0 !important; } .imagedivider { display: flex !important; justify-content: center !important; align-items: center !important; } img.imagedividerpic { display: none !important; } .imagedivider::before { content: "" !important; display: block !important; width: 1px !important; height: 42px !important; background-color: var(--syl-grey) !important; margin: 0 auto !important; } /* ========================================================= 11. CROMA BUTTON WIDGET VIEW ALL ALBUMS / VIEW MORE etc. ========================================================= */ a.button-widget { background: transparent !important; background-color: transparent !important; color: var(--syl-light) !important; border-width: 1px !important; border-color: var(--syl-border) !important; border-style: solid !important; text-decoration: none !important; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; } a.button-widget:hover { background: var(--syl-white) !important; background-color: var(--syl-white) !important; color: var(--syl-black) !important; border-color: var(--syl-white) !important; } /* ========================================================= 12. AVAILABLE NOW ========================================================= */ .available-now { color: var(--syl-light) !important; } /* ========================================================= 13. HEADINGS Typography itself is controlled in Croma Theme Options ========================================================= */ .vc_custom_heading, .wpb_wrapper h1, .wpb_wrapper h2, .wpb_wrapper h3, .wpb_wrapper h4, .wpb_wrapper h5, .wpb_wrapper h6 { color: var(--syl-white); } /* ========================================================= 15. BACK TO TOP — DESKTOP + MOBILE ========================================================= */ #back-to-top, #back-to-top-mobile, .footer-wrapper-backtotop, .footer-wrapper-backtotop-mobile { background: var(--syl-grey-dark) !important; background-color: var(--syl-grey-dark) !important; color: var(--syl-white) !important; } #back-to-top i, #back-to-top-mobile i, .footer-wrapper-backtotop i, .footer-wrapper-backtotop-mobile i { color: var(--syl-white) !important; } #back-to-top:hover, #back-to-top-mobile:hover, .footer-wrapper-backtotop:hover, .footer-wrapper-backtotop-mobile:hover { background: var(--syl-white) !important; background-color: var(--syl-white) !important; color: var(--syl-black) !important; } #back-to-top:hover i, #back-to-top-mobile:hover i, .footer-wrapper-backtotop:hover i, .footer-wrapper-backtotop-mobile:hover i { color: var(--syl-black) !important; } /* ========================================================= 16. FOOTER — SYLVERMAY BRAND LOGO ========================================================= */ .sylvermay-footer-brand { text-align: center !important; margin: 0 !important; padding: 0 !important; opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; } .sylvermay-footer-brand.is-visible { opacity: 1; transform: translateY(0); } .sylvermay-footer-logo-link { display: inline-block; } .sylvermay-footer-logo { display: block !important; width: 85px !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; transition: opacity 0.25s ease; } .sylvermay-footer-logo-link:hover .sylvermay-footer-logo { opacity: 0.75; } /* ========================================================= 17. FOOTER SOCIAL ICONS ========================================================= */ footer .footer-block.share { padding-top: 0 !important; margin-top: -58px !important; } footer .footer-block.share .social-networks { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; gap: 28px !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; } footer .footer-block.share .social-networks li { display: block !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; } footer .footer-block.share .social-networks a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; } footer .footer-block.share .social-networks a i, footer .footer-block.share .social-networks a i::before { font-size: 28px !important; line-height: 1 !important; color: var(--syl-grey) !important; } footer .footer-block.share .social-networks a:hover i, footer .footer-block.share .social-networks a:hover i::before { color: var(--syl-white) !important; } /* ========================================================= 18. FOOTER COPYRIGHT ========================================================= */ footer .footer-row .footer-wrapper { justify-content: center !important; } footer .footer-copyright { width: 100% !important; text-align: center !important; color: var(--syl-light) !important; transform: translateY(-5px); } footer .footer-copyright p { margin: 0 !important; text-align: center !important; color: var(--syl-light) !important; } footer .footer-copyright a { color: rgba(208, 208, 208, 0.48) !important; text-decoration: none !important; } footer .footer-copyright a:hover { color: var(--syl-white) !important; } footer .footer-author { display: none !important; } /* ========================================================= 19. TABLET / SMALL LAPTOP ========================================================= */ @media screen and (max-width: 1024px) { footer .footer-block.share .social-networks { gap: 24px !important; } footer .footer-block.share .social-networks a i, footer .footer-block.share .social-networks a i::before { font-size: 26px !important; } } /* ========================================================= 20. MOBILE ========================================================= */ @media screen and (max-width: 767px) { footer .footer-block.share { margin-top: -54px !important; } footer .footer-block.share .social-networks { gap: 10px !important; } footer .footer-block.share .social-networks a i, footer .footer-block.share .social-networks a i::before { font-size: 24px !important; } .sylvermay-footer-logo { width: 58px !important; } footer .footer-copyright { transform: translateY(-4px); } } /* ========================================================= 21. SMALL MOBILE ========================================================= */ @media screen and (max-width: 480px) { footer .footer-block.share { margin-top: -50px !important; } footer .footer-block.share .social-networks { gap: 8px !important; } footer .footer-block.share .social-networks a i, footer .footer-block.share .social-networks a i::before { font-size: 22px !important; } .sylvermay-footer-logo { width: 54px !important; } footer .footer-copyright { transform: translateY(-3px); } } /* ========================================================= 22. REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .sylvermay-footer-brand { opacity: 1; transform: none; transition: none; } } /* ========================================================= 23. SYLVERMAY — RELEASE SMARTLINK PAGE Clean consolidated version — responsive / full bleed ========================================================= */ /* --------------------------------------------------------- PAGE / WPBAKERY RESET — ONLY FOR RELEASE SMARTLINK ROW --------------------------------------------------------- */ .syl-release-page { position: relative !important; margin: 0 !important; padding: 0 !important; background: var(--syl-charcoal) !important; overflow: visible !important; } .syl-release-page > .vc_column_container, .syl-release-page > .wpb_column, .syl-release-page .vc_column-inner, .syl-release-page .wpb_wrapper, .syl-release-page .wpb_content_element { margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- MAIN SMARTLINK WRAPPER — FULL VIEWPORT WIDTH --------------------------------------------------------- */ .syl-smartlink { position: relative !important; width: auto !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; min-height: 100vh !important; min-height: 100svh !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; padding: clamp(54px, 7vh, 88px) 20px clamp(54px, 7vh, 88px) !important; box-sizing: border-box !important; overflow: hidden !important; background: var(--syl-charcoal) !important; } .syl-smartlink, .syl-smartlink * { box-sizing: border-box !important; } /* --------------------------------------------------------- BLURRED ARTWORK BACKGROUND --------------------------------------------------------- */ .syl-smartlink-bg { position: absolute !important; top: -60px !important; right: -60px !important; bottom: -60px !important; left: -60px !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; filter: blur(28px) brightness(0.72) saturate(0.85) !important; transform: scale(1.08) !important; transform-origin: center center !important; z-index: 0 !important; pointer-events: none !important; } .syl-smartlink::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.31) 100% ) !important; z-index: 1 !important; pointer-events: none !important; } /* --------------------------------------------------------- CENTRAL CONTENT Keep compact on desktop / 2K / 4K --------------------------------------------------------- */ .syl-smartlink-content { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 420px !important; margin: 0 auto !important; } /* --------------------------------------------------------- COVER / ARTWORK --------------------------------------------------------- */ .syl-smartlink-cover { width: 100% !important; max-width: 300px !important; margin: 0 auto 18px !important; text-align: center !important; } .syl-player-artwork { position: relative !important; width: 100% !important; margin: 0 auto !important; overflow: hidden !important; border-radius: 14px !important; isolation: isolate !important; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.38) !important; } .syl-player-artwork > img, .syl-smartlink-cover > img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 14px !important; object-fit: cover !important; box-shadow: none !important; } /* --------------------------------------------------------- AUDIO ELEMENT / OLD PLAYER ELEMENTS No native controls, no duration/progress display --------------------------------------------------------- */ .syl-player-audio { display: none !important; } .syl-player-controls, .syl-player-progress, .syl-player-time, .syl-player-current, .syl-player-duration { display: none !important; } /* --------------------------------------------------------- PLAY / PAUSE BUTTON Pure CSS icon — no SVG dependency --------------------------------------------------------- */ .syl-player-toggle { position: absolute !important; top: 50% !important; left: 50% !important; width: 64px !important; height: 64px !important; transform: translate(-50%, -50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.50) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; cursor: pointer !important; z-index: 10 !important; outline: none !important; transition: transform 0.20s ease, background-color 0.20s ease, border-color 0.20s ease !important; } .syl-player-toggle:hover { background: rgba(0, 0, 0, 0.70) !important; border-color: rgba(255, 255, 255, 0.36) !important; transform: translate(-50%, -50%) scale(1.06) !important; } .syl-player-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30) !important; } .syl-player-toggle-icon { position: relative !important; display: block !important; width: 28px !important; height: 30px !important; margin: 0 !important; background: none !important; background-image: none !important; } /* Play triangle */ .syl-player-toggle-icon::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; transform: translate(-38%, -50%) !important; border-top: 13px solid transparent !important; border-bottom: 13px solid transparent !important; border-left: 21px solid var(--syl-white) !important; } .syl-player-toggle-icon::after { content: none !important; } /* Pause bars */ .syl-player.is-playing .syl-player-toggle-icon::before, .syl-player.is-playing .syl-player-toggle-icon::after { content: "" !important; position: absolute !important; top: 3px !important; width: 7px !important; height: 24px !important; background: var(--syl-white) !important; border: 0 !important; transform: none !important; } .syl-player.is-playing .syl-player-toggle-icon::before { left: 4px !important; } .syl-player.is-playing .syl-player-toggle-icon::after { right: 4px !important; } /* --------------------------------------------------------- RELEASE INFO --------------------------------------------------------- */ .syl-smartlink-info { width: 100% !important; margin: 0 auto 22px !important; text-align: center !important; } .syl-smartlink-info h1 { margin: 0 0 6px !important; color: var(--syl-white) !important; font-size: clamp(20px, 1.8vw, 23px) !important; line-height: 1.25 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } .syl-smartlink-info p { margin: 0 !important; color: rgba(255, 255, 255, 0.74) !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 400 !important; } /* --------------------------------------------------------- SERVICES CARD Narrower than the content column for lnk.to-like proportions --------------------------------------------------------- */ .syl-smartlink-services { width: 100% !important; max-width: 400px !important; margin: 0 auto !important; background: var(--syl-white) !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 14px 42px rgba(0, 0, 0, 0.26) !important; } /* --------------------------------------------------------- SERVICE ROW --------------------------------------------------------- */ .syl-service { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 16px !important; width: 100% !important; min-height: 72px !important; padding: 11px 12px 11px 16px !important; background: var(--syl-white) !important; color: #171b22 !important; border-bottom: 1px solid #e5e8ed !important; text-decoration: none !important; transition: background-color 0.20s ease, color 0.20s ease !important; } .syl-service:last-child { border-bottom: 0 !important; } .syl-service:hover { background: #f6f7f9 !important; color: var(--syl-black) !important; } /* --------------------------------------------------------- OFFICIAL SERVICE LOGOS Original SVGs are 125 × 40 --------------------------------------------------------- */ .syl-service-brand { display: flex !important; align-items: center !important; justify-content: flex-start !important; min-width: 0 !important; overflow: hidden !important; } .syl-service-brand img { display: block !important; width: 125px !important; height: 40px !important; max-width: 100% !important; max-height: 40px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: left center !important; } /* --------------------------------------------------------- SERVICE ACTION BUTTON --------------------------------------------------------- */ .syl-service-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 82px !important; min-height: 40px !important; padding: 8px 12px !important; border-radius: 4px !important; background: #e8ebf0 !important; color: #171b22 !important; font-size: 10.5px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 0.35px !important; text-transform: uppercase !important; white-space: nowrap !important; transition: background-color 0.20s ease, color 0.20s ease, transform 0.20s ease !important; } .syl-service:hover .syl-service-action { background: #171b22 !important; color: var(--syl-white) !important; } /* ========================================================= 24. RELEASE SMARTLINK — TABLET / SMALL LAPTOP ========================================================= */ @media screen and (max-width: 1024px) { .syl-smartlink { padding: clamp(48px, 6vh, 72px) 20px 64px !important; } .syl-smartlink-content { max-width: 410px !important; } .syl-smartlink-cover { max-width: 290px !important; } .syl-smartlink-services { max-width: 390px !important; } } /* ========================================================= 25. RELEASE SMARTLINK — MOBILE / PORTRAIT ========================================================= */ @media screen and (max-width: 767px) { .syl-smartlink { min-height: 100vh !important; min-height: 100svh !important; padding: 38px 16px 52px !important; } .syl-smartlink-bg { top: -45px !important; right: -45px !important; bottom: -45px !important; left: -45px !important; filter: blur(22px) brightness(0.68) saturate(0.85) !important; transform: scale(1.10) !important; } .syl-smartlink-content { max-width: 390px !important; } .syl-smartlink-cover { width: min(280px, 78vw) !important; max-width: none !important; margin-bottom: 17px !important; } .syl-player-artwork, .syl-player-artwork > img, .syl-smartlink-cover > img { border-radius: 13px !important; } .syl-player-toggle { width: 58px !important; height: 58px !important; } .syl-smartlink-info { margin-bottom: 19px !important; } .syl-smartlink-info h1 { font-size: 20px !important; } .syl-smartlink-info p { font-size: 14px !important; } .syl-smartlink-services { max-width: 380px !important; } .syl-service { min-height: 68px !important; column-gap: 14px !important; padding: 10px 11px 10px 15px !important; } .syl-service-brand img { width: 118px !important; height: 38px !important; max-height: 38px !important; } .syl-service-action { min-width: 78px !important; min-height: 38px !important; padding: 7px 10px !important; font-size: 10px !important; } } /* ========================================================= 26. RELEASE SMARTLINK — SMALL MOBILE ========================================================= */ @media screen and (max-width: 480px) { .syl-smartlink { padding: 32px 13px 44px !important; } .syl-smartlink-content { max-width: 100% !important; } .syl-smartlink-cover { width: min(250px, 76vw) !important; margin-bottom: 16px !important; } .syl-player-artwork, .syl-player-artwork > img, .syl-smartlink-cover > img { border-radius: 12px !important; } .syl-player-toggle { width: 54px !important; height: 54px !important; } .syl-player-toggle-icon { width: 24px !important; height: 27px !important; } .syl-player-toggle-icon::before { border-top-width: 11px !important; border-bottom-width: 11px !important; border-left-width: 18px !important; } .syl-player.is-playing .syl-player-toggle-icon::before, .syl-player.is-playing .syl-player-toggle-icon::after { top: 3px !important; width: 6px !important; height: 21px !important; } .syl-smartlink-info { margin-bottom: 17px !important; } .syl-smartlink-info h1 { font-size: 18.5px !important; } .syl-smartlink-info p { font-size: 13.5px !important; } .syl-smartlink-services { width: calc(100% - 8px) !important; max-width: 360px !important; } .syl-service { min-height: 64px !important; column-gap: 11px !important; padding: 9px 10px 9px 13px !important; } .syl-service-brand img { width: 108px !important; height: 34px !important; max-height: 34px !important; } .syl-service-action { min-width: 72px !important; min-height: 36px !important; padding: 7px 8px !important; font-size: 9.5px !important; letter-spacing: 0.25px !important; } } /* ========================================================= 27. RELEASE SMARTLINK — VERY SMALL MOBILE 320 / 360 px class devices ========================================================= */ @media screen and (max-width: 360px) { .syl-smartlink { padding-left: 10px !important; padding-right: 10px !important; } .syl-smartlink-cover { width: min(235px, 74vw) !important; } .syl-smartlink-services { width: 100% !important; } .syl-service { column-gap: 9px !important; padding-left: 11px !important; padding-right: 9px !important; } .syl-service-brand img { width: 102px !important; height: 32px !important; } .syl-service-action { min-width: 68px !important; padding-left: 7px !important; padding-right: 7px !important; font-size: 9px !important; } } /* ========================================================= 28. RELEASE SMARTLINK — SHORT LANDSCAPE ========================================================= */ @media screen and (max-height: 600px) and (orientation: landscape) { .syl-smartlink { min-height: auto !important; padding: 28px 18px 40px !important; } .syl-smartlink-cover { width: min(220px, 28vw) !important; margin-bottom: 14px !important; } .syl-smartlink-info { margin-bottom: 16px !important; } .syl-smartlink-services { max-width: 380px !important; } } /* ========================================================= 29. RELEASE SMARTLINK — LARGE DESKTOP / 2K ========================================================= */ @media screen and (min-width: 1600px) { .syl-smartlink-content { max-width: 430px !important; } .syl-smartlink-cover { max-width: 310px !important; } .syl-smartlink-services { max-width: 400px !important; } } /* ========================================================= 30. RELEASE SMARTLINK — VERY LARGE / 4K / TV Keep the card intentionally compact ========================================================= */ @media screen and (min-width: 2560px) { .syl-smartlink { padding-top: 100px !important; padding-bottom: 100px !important; } .syl-smartlink-content { max-width: 450px !important; } .syl-smartlink-cover { max-width: 320px !important; } .syl-smartlink-services { max-width: 410px !important; } } /* ========================================================= 31. RELEASE SMARTLINK — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .syl-smartlink-bg { transform: none !important; } .syl-player-toggle, .syl-service, .syl-service-action { transition: none !important; } .syl-player-toggle:hover { transform: translate(-50%, -50%) !important; } } /* ========================================================= 32. RELEASE SMARTLINK — SOCIAL ICONS + COPYRIGHT Transparent / centered / stacked on blurred background ========================================================= */ .syl-smartlink-footer { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 30px auto 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; position: static !important; text-align: center !important; } /* --------------------------------------------------------- SOCIAL ICONS WRAPPER --------------------------------------------------------- */ .syl-smartlink-socials { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 auto 11px !important; padding: 0 !important; position: static !important; left: auto !important; right: auto !important; float: none !important; transform: none !important; background: transparent !important; } /* --------------------------------------------------------- SOCIAL ICONS LIST Equal slots keep the full group optically centered --------------------------------------------------------- */ .syl-smartlink-socials ul.social-networks { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 0 !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; position: static !important; left: auto !important; right: auto !important; float: none !important; transform: none !important; list-style: none !important; } .syl-smartlink-socials ul.social-networks > li { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 41px !important; float: none !important; width: 41px !important; height: 23px !important; margin: 0 !important; padding: 0 !important; position: static !important; } .syl-smartlink-socials ul.social-networks > li > a { display: flex !important; align-items: center !important; justify-content: center !important; width: 23px !important; height: 23px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; position: static !important; background: transparent !important; border: 0 !important; color: rgba(255, 255, 255, 0.58) !important; line-height: 1 !important; text-decoration: none !important; transform: none; transition: color 0.20s ease, opacity 0.20s ease, transform 0.20s ease !important; } .syl-smartlink-socials ul.social-networks > li > a i { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, 0.58) !important; font-size: 21px !important; line-height: 23px !important; text-align: center !important; transform: none !important; transition: color 0.20s ease !important; } .syl-smartlink-socials ul.social-networks > li > a i::before { display: inline-block !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, 0.58) !important; font-size: 21px !important; line-height: 23px !important; vertical-align: middle !important; } .syl-smartlink-socials ul.social-networks > li > a:hover { color: var(--syl-white) !important; transform: translateY(-1px) !important; } .syl-smartlink-socials ul.social-networks > li > a:hover i, .syl-smartlink-socials ul.social-networks > li > a:hover i::before { color: var(--syl-white) !important; } /* --------------------------------------------------------- COPYRIGHT — STATIC SMARTLINK TEXT --------------------------------------------------------- */ .syl-smartlink-copyright { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 10 !important; width: 100% !important; min-height: 15px !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, 0.55) !important; font-family: Karla, sans-serif !important; font-size: 10px !important; line-height: 15px !important; font-weight: 400 !important; text-align: center !important; overflow: visible !important; pointer-events: auto !important; } /* ========================================================= 33. RELEASE SMARTLINK FOOTER — TABLET / MOBILE ========================================================= */ @media screen and (max-width: 767px) { .syl-smartlink-footer { margin-top: 27px !important; } .syl-smartlink-socials { margin-bottom: 10px !important; } .syl-smartlink-socials ul.social-networks > li { flex-basis: 38px !important; width: 38px !important; height: 22px !important; } .syl-smartlink-socials ul.social-networks > li > a { width: 22px !important; height: 22px !important; } .syl-smartlink-socials ul.social-networks > li > a i, .syl-smartlink-socials ul.social-networks > li > a i::before { font-size: 20px !important; line-height: 22px !important; } } /* ========================================================= 34. RELEASE SMARTLINK FOOTER — SMALL MOBILE ========================================================= */ @media screen and (max-width: 480px) { .syl-smartlink-footer { margin-top: 24px !important; } .syl-smartlink-socials ul.social-networks > li { flex-basis: 34px !important; width: 34px !important; height: 21px !important; } .syl-smartlink-socials ul.social-networks > li > a { width: 21px !important; height: 21px !important; } .syl-smartlink-socials ul.social-networks > li > a i, .syl-smartlink-socials ul.social-networks > li > a i::before { font-size: 19px !important; line-height: 21px !important; } .syl-smartlink-copyright { font-size: 9.5px !important; } } /* ========================================================= 35. RELEASE SMARTLINK FOOTER — VERY SMALL MOBILE ========================================================= */ @media screen and (max-width: 360px) { .syl-smartlink-socials ul.social-networks > li { flex-basis: 31px !important; width: 31px !important; height: 20px !important; } .syl-smartlink-socials ul.social-networks > li > a { width: 20px !important; height: 20px !important; } .syl-smartlink-socials ul.social-networks > li > a i, .syl-smartlink-socials ul.social-networks > li > a i::before { font-size: 18px !important; line-height: 20px !important; } .syl-smartlink-copyright { font-size: 9px !important; } } /* ========================================================= 36. RELEASE SMARTLINK FOOTER — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .syl-smartlink-socials ul.social-networks > li > a { transition: none !important; } .syl-smartlink-socials ul.social-networks > li > a:hover { transform: none !important; } } /* ========================================================= SMARTLINK COPYRIGHT — FINAL VISIBILITY SAFEGUARD ========================================================= */ .syl-smartlink-footer > .syl-smartlink-copyright { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 20 !important; width: 100% !important; max-width: 100% !important; min-height: 15px !important; margin: 0 auto !important; padding: 0 !important; color: rgba(255, 255, 255, 0.55) !important; text-indent: 0 !important; white-space: normal !important; clip: auto !important; clip-path: none !important; transform: none !important; overflow: visible !important; } /* ========================================================= 37. RELEASE SMARTLINK — ONE-SCREEN DESKTOP MODE Keep Ayutthaya inside one viewport on desktop/laptop. Mobile remains scrollable when the content genuinely cannot fit at a readable size. ========================================================= */ /* The Smartlink already has its own social/copyright footer, so the native Croma footer must not add extra page height. */ body:has(.syl-release-page) footer { display: none !important; } /* Remove any residual bottom overflow from the release row. */ .syl-release-page { min-height: 100vh !important; min-height: 100svh !important; } /* --------------------------------------------------------- DESKTOP / TABLET LANDSCAPE --------------------------------------------------------- */ @media screen and (min-width: 768px) { html:has(.syl-release-page), body:has(.syl-release-page) { height: 100% !important; max-height: 100% !important; overflow-y: hidden !important; overscroll-behavior-y: none !important; } body:has(.syl-release-page) .syl-release-page { height: 100vh !important; height: 100svh !important; min-height: 0 !important; max-height: 100vh !important; max-height: 100svh !important; overflow: hidden !important; } body:has(.syl-release-page) .syl-smartlink { height: 100vh !important; height: 100svh !important; min-height: 0 !important; max-height: 100vh !important; max-height: 100svh !important; align-items: center !important; padding-top: clamp(18px, 2.7vh, 30px) !important; padding-bottom: clamp(18px, 2.7vh, 30px) !important; overflow: hidden !important; } } /* --------------------------------------------------------- LAPTOP / SHORT DESKTOP 768–900 px viewport height --------------------------------------------------------- */ @media screen and (min-width: 768px) and (max-height: 900px) { .syl-smartlink-content { max-width: 400px !important; } .syl-smartlink-cover { width: min(285px, 34vh) !important; max-width: 285px !important; margin-bottom: 14px !important; } .syl-smartlink-info { margin-bottom: 16px !important; } .syl-smartlink-info h1 { margin-bottom: 4px !important; font-size: 21px !important; line-height: 1.2 !important; } .syl-smartlink-info p { font-size: 13px !important; line-height: 1.35 !important; } .syl-smartlink-services { max-width: 380px !important; } .syl-service { min-height: 64px !important; padding-top: 8px !important; padding-bottom: 8px !important; } .syl-service-brand img { width: 118px !important; height: 38px !important; max-height: 38px !important; } .syl-service-action { min-width: 78px !important; min-height: 38px !important; padding-top: 7px !important; padding-bottom: 7px !important; } .syl-smartlink-footer { margin-top: 18px !important; } .syl-smartlink-socials { margin-bottom: 8px !important; } .syl-smartlink-copyright { line-height: 13px !important; } } /* --------------------------------------------------------- VERY SHORT DESKTOP / LANDSCAPE Compress further rather than clipping. --------------------------------------------------------- */ @media screen and (min-width: 768px) and (max-height: 760px) { body:has(.syl-release-page) .syl-smartlink { padding-top: 12px !important; padding-bottom: 12px !important; } .syl-smartlink-cover { width: min(245px, 32vh) !important; max-width: 245px !important; margin-bottom: 10px !important; } .syl-player-toggle { width: 56px !important; height: 56px !important; } .syl-smartlink-info { margin-bottom: 11px !important; } .syl-smartlink-info h1 { font-size: 19px !important; } .syl-smartlink-info p { font-size: 12px !important; } .syl-smartlink-services { max-width: 360px !important; } .syl-service { min-height: 56px !important; padding-top: 6px !important; padding-bottom: 6px !important; } .syl-service-brand img { width: 108px !important; height: 34px !important; max-height: 34px !important; } .syl-service-action { min-width: 72px !important; min-height: 34px !important; font-size: 9.5px !important; } .syl-smartlink-footer { margin-top: 12px !important; } .syl-smartlink-socials { margin-bottom: 6px !important; } .syl-smartlink-socials ul.social-networks > li { flex-basis: 36px !important; } .syl-smartlink-socials ul.social-networks > li > a i, .syl-smartlink-socials ul.social-networks > li > a i::before { font-size: 19px !important; } .syl-smartlink-copyright { font-size: 9px !important; line-height: 12px !important; } } /* --------------------------------------------------------- MOBILE Do NOT lock vertical scrolling on small screens. --------------------------------------------------------- */ @media screen and (max-width: 767px) { html:has(.syl-release-page), body:has(.syl-release-page) { height: auto !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior-y: auto !important; } body:has(.syl-release-page) .syl-release-page, body:has(.syl-release-page) .syl-smartlink { height: auto !important; max-height: none !important; min-height: 100vh !important; min-height: 100svh !important; overflow: visible !important; } } /* ========================================================= 38. RELEASE SMARTLINK — RESTORE TRUE FULL WIDTH Keep the one-screen desktop mode without clipping the full-bleed background to the WPBakery container width. ========================================================= */ @media screen and (min-width: 768px) { body:has(.syl-release-page) .syl-release-page { overflow: visible !important; } body:has(.syl-release-page) .syl-release-page > .vc_column_container, body:has(.syl-release-page) .syl-release-page > .wpb_column, body:has(.syl-release-page) .syl-release-page .vc_column-inner, body:has(.syl-release-page) .syl-release-page .wpb_wrapper { overflow: visible !important; } body:has(.syl-release-page) .syl-smartlink { width: auto !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; overflow: hidden !important; } html:has(.syl-release-page), body:has(.syl-release-page) { overflow-x: hidden !important; } } /* HEADER MENU — FIX GLOBAL LINE HEIGHT */ .classic-menu > ul > li > a, .classic-menu > ul > li.languages-selector > a { line-height: 18px !important; } /* ========================================================= HEADER — FINAL DESKTOP GEOMETRY Match logged-out/public rendering to the measured admin geometry without changing mobile/tablet behavior. ========================================================= */ @media screen and (min-width: 1025px) { /* Public outer rail = admin measurement: x 35px / right 35px at 1920px viewport */ body:not(.admin-bar) .classic-menu:not(.responsive) { left: 35px !important; right: 35px !important; width: auto !important; max-width: none !important; box-sizing: border-box !important; } body:not(.admin-bar) .classic-menu:not(.responsive) > ul { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* Public logo rail = admin measurement: parent x 35px + 10px inner offset = logo x 45px, with a 79px logo slot */ body:not(.admin-bar) .classic-menu:not(.responsive) > ul > li.logo { width: 79px !important; min-width: 79px !important; margin-left: 10px !important; box-sizing: border-box !important; } /* Restore the exact menu-link rhythm measured in admin. Do not artificially stretch the navigation. */ body:not(.admin-bar) .classic-menu:not(.responsive) > ul > li:not(.logo):not(.hotlink):not(.languages-selector) > a { padding-left: 6px !important; padding-right: 6px !important; } } /* ========================================================= HEADER — REMOVE LOGO LOAD / JUMP EFFECT Desktop only. Mobile keeps Croma's native logo positioning. ========================================================= */ @media screen and (min-width: 1025px) { .classic-menu:not(.responsive) > ul > li.logo, .classic-menu:not(.responsive) > ul > li.logo > a, .classic-menu:not(.responsive) > ul > li.logo::before, .classic-menu:not(.responsive) > ul > li.logo::after, .classic-menu:not(.responsive) > ul > li.logo > a::before, .classic-menu:not(.responsive) > ul > li.logo > a::after { animation: none !important; transition: none !important; } .classic-menu:not(.responsive) > ul > li.logo { top: 0 !important; bottom: auto !important; margin-top: 0 !important; transform: none !important; } .classic-menu:not(.responsive) > ul > li.logo > a { top: 0 !important; bottom: auto !important; margin-top: 0 !important; } } /* ========================================================= HEADER — HOTLINKS Keep Croma's native icon spacing; the corrected outer rail above provides the same right-side breathing room as admin. ========================================================= */ @media screen and (min-width: 1025px) { body:not(.admin-bar) .classic-menu:not(.responsive) > ul > li.hotlink:not(.languages-selector) { transform: none !important; } } /* ========================================================= 39. WPBAKERY SEPARATORS — MONOCHROME Override inline Croma/WPBakery gold separator colors ========================================================= */ .vc_separator .vc_sep_holder .vc_sep_line, .vc_separator.vc_sep_color_custom .vc_sep_holder .vc_sep_line { border-color: var(--syl-grey) !important; border-top-color: var(--syl-grey) !important; } /* ========================================================= HERO — TABLETTES EN ORIENTATION PORTRAIT Utilise le Slider portrait au lieu du Slider desktop ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { /* Masque toute la Row du Hero paysage */ body .vc_row.syl-hero-desktop { display: none !important; } /* Force l’affichage du Hero portrait malgré WPBakery */ body .syl-hero-portrait { display: block !important; } } /* ========================================================= HERO — IPAD PAYSAGE / PETITS ÉCRANS HORIZONTAUX Descend le chevron sans modifier les grands écrans ========================================================= */ @media screen and (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) { #slider-2-slide-2-layer-0 { position: relative !important; top: 70px !important; } } /* ========================================================= RESPONSIVE HEADER LOGO — PORTRAIT / LANDSCAPE ========================================================= */ .classic-menu.responsive > ul > li.logo { display: block !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } .classic-menu.responsive > ul > li.logo > a { display: flex !important; align-items: center !important; position: relative !important; margin: 0 !important; overflow: visible !important; } /* On neutralise l'image que Croma change automatiquement */ .classic-menu.responsive > ul > li.logo img.classic-menu-logo { display: none !important; } /* --------------------------------------------------------- PORTRAIT : logo SYLVERMAY complet --------------------------------------------------------- */ @media (orientation: portrait) { .classic-menu.responsive > ul > li.logo > a { width: 180px !important; height: 50px !important; } .classic-menu.responsive > ul > li.logo > a::before { content: ""; display: block; width: 100%; height: 44px; background-image: url("https://sylvermay.com/media/content/2026/08/white.png"); background-size: contain; background-position: left center; background-repeat: no-repeat; transform: translateY(2px) !important; } } /* --------------------------------------------------------- PAYSAGE : symbole compact par défaut --------------------------------------------------------- */ @media (orientation: landscape) { .classic-menu.responsive > ul > li.logo > a { width: 46px !important; height: 50px !important; } .classic-menu.responsive > ul > li.logo > a::before { content: ""; display: block; width: 42px; height: 42px; background-image: url("https://sylvermay.com/media/content/2026/08/footer_w.png"); background-size: contain; background-position: left center; background-repeat: no-repeat; } } /* ========================================================= RESPONSIVE HEADER — SMARTPHONE LANDSCAPE Full SYLVERMAY logo ========================================================= */ @media screen and (orientation: landscape) and (max-height: 600px) { .classic-menu.responsive > ul > li.logo > a { width: 165px !important; height: 50px !important; } .classic-menu.responsive > ul > li.logo > a::before { width: 160px !important; height: 44px !important; background-image: url("https://sylvermay.com/media/content/2026/08/white.png") !important; background-size: contain !important; background-position: left center !important; background-repeat: no-repeat !important; flex: 0 0 160px !important; transform: translateY(2px) !important; } } /* ========================================================= SHOP PAGE — FULL BLEED SPREADSHOP ========================================================= */ body.page-id-258 .syl-shop-fullwidth, body.page-id-258 .syl-shop-fullwidth .vc_column-inner, body.page-id-258 .syl-shop-fullwidth .wpb_wrapper { overflow: visible !important; } body.page-id-258 #myShop { position: relative !important; width: 100vw !important; max-width: none !important; left: 50% !important; transform: translateX(-50%) !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ================================================== PAGE ABOUT — BIOGRAPHIE (VERSION CONSOLIDÉE) Structure WPBakery attendue : - Row extérieure : about-page-cinematic - Inner Row titre : about-page-intro - Inner Row biographie : about-page-story - Inner Row citation/signature : about-page-signature - Text Block citation : about-page-quote - Single Image signature : about-page-signature-image ================================================== */ /* ================================================== BASE — DESKTOP ================================================== */ body .vc_row.about-page-cinematic { position: relative; isolation: isolate; box-sizing: border-box; overflow: hidden; min-height: clamp(760px, 46vw, 900px) !important; padding: clamp(120px, 8vw, 155px) 0 55px !important; background-color: #18242d !important; background-image: url("https://sylvermay.com/media/content/2026/09/sylvermay-about-biography-duotone-desktop.webp") !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center top !important; } /* Voile colorimétrique et fondu inférieur */ body .vc_row.about-page-cinematic::before { content: "" !important; display: block !important; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( rgba(8, 17, 24, 0.26), rgba(8, 17, 24, 0.26) ), linear-gradient( to bottom, rgba(8, 15, 21, 0) 0%, rgba(8, 15, 21, 0.18) 34%, rgba(8, 15, 21, 0.68) 66%, rgba(8, 15, 21, 0.92) 100% ) !important; } body .vc_row.about-page-cinematic > .wpb_column { position: relative; z-index: 1; } /* Conteneurs communs */ body .about-page-intro, body .about-page-story, body .about-page-signature { position: relative; z-index: 1; box-sizing: border-box; width: calc(100% - 64px) !important; max-width: 1160px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } /* ================================================== TITRE ET SOUS-TITRE ================================================== */ body .about-page-intro { margin-top: 0 !important; margin-bottom: 0 !important; } body .about-page-intro > .wpb_column, body .about-page-intro > .wpb_column > .vc_column-inner { margin: 0 !important; padding: 0 !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper { width: 100% !important; max-width: 590px !important; margin: 0 auto 0 0 !important; padding: 0 !important; text-align: left !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > * { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:first-child { margin-top: 0 !important; margin-bottom: 24px !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:first-child * { max-width: 100% !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:first-child :is(h1, h2, h3, h4, h5, h6) { margin: 0 !important; color: #ffffff !important; font-size: clamp(26px, 1.7vw, 32px) !important; line-height: 1.16 !important; font-weight: 600 !important; letter-spacing: 0.035em !important; text-align: left !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:first-child :is(h1, h2, h3, h4, h5, h6) span { color: inherit !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:nth-child(2) { margin-top: 0 !important; margin-bottom: 0 !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:nth-child(2) :is(h1, h2, h3, h4, h5, h6) { margin: 0 !important; color: #ffffff !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: 0.09em !important; text-align: left !important; } /* ================================================== BIOGRAPHIE ================================================== */ body .about-page-story { margin-top: clamp(120px, 8vw, 155px) !important; margin-bottom: 0 !important; } body .about-page-story > .wpb_column { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body .about-page-story > .wpb_column:first-child > .vc_column-inner { padding-left: 0 !important; padding-right: 28px !important; } body .about-page-story > .wpb_column:last-child > .vc_column-inner { padding-left: 28px !important; padding-right: 0 !important; } body .about-page-story > .wpb_column > .vc_column-inner, body .about-page-story .wpb_text_column, body .about-page-story .wpb_text_column > .wpb_wrapper { margin-top: 0 !important; margin-bottom: 0 !important; } body .about-page-story .wpb_text_column, body .about-page-story .wpb_text_column > .wpb_wrapper { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body .about-page-story .wpb_text_column p { margin: 0 0 16px !important; color: #e0e4e7 !important; font-size: 18px !important; line-height: 1.68 !important; font-weight: 400 !important; letter-spacing: normal !important; word-spacing: normal !important; text-align: justify !important; text-align-last: left !important; text-justify: inter-word; -webkit-hyphens: none; hyphens: none; word-break: normal; overflow-wrap: normal; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.42); } /* La césure réduit les espaces imposés par la justification desktop. Elle est activée uniquement si le texte hérite de lang="en" (ou en-US, en-GB...). Sans langue anglaise déclarée, le comportement reste inchangé. Le dictionnaire de césure doit être disponible dans le navigateur. */ @media (min-width: 1025px) { body .about-page-story .wpb_text_column p:lang(en) { -webkit-hyphens: auto; hyphens: auto; } } body .about-page-story .wpb_text_column p:last-child { margin-bottom: 0 !important; } body .about-page-story .wpb_text_column em { color: #ffffff !important; } /* Neutralise l’ancienne lettrine Croma */ body .about-page-story .wpb_text_column p:first-letter { float: none !important; margin: 0 !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; } /* ================================================== CITATION ET SIGNATURE ================================================== */ body .about-page-signature { margin-top: 32px !important; margin-bottom: 0 !important; } body .about-page-signature > .wpb_column, body .about-page-signature > .wpb_column > .vc_column-inner { margin: 0 !important; padding: 0 !important; } body .about-page-signature > .wpb_column > .vc_column-inner > .wpb_wrapper { width: calc(50% - 28px) !important; margin: 0 0 0 auto !important; padding: 0 !important; } body .about-page-signature .about-page-quote, body .about-page-signature .about-page-quote > .wpb_wrapper { margin: 0 !important; padding: 0 !important; } body .about-page-signature .about-page-quote p { margin: 0 !important; color: #eef1f3 !important; font-size: 18.5px !important; line-height: 1.6 !important; font-weight: 400 !important; font-style: italic !important; letter-spacing: 0.01em !important; text-align: left !important; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.42); } body .about-page-signature .about-page-signature-image { display: block !important; margin: 16px 0 0 !important; padding: 0 !important; text-align: right !important; } body .about-page-signature .about-page-signature-image .vc_figure, body .about-page-signature .about-page-signature-image .vc_single_image-wrapper { display: inline-block !important; margin: 0 !important; padding: 0 !important; } body .about-page-signature .about-page-signature-image img { display: block !important; width: 175px !important; max-width: 100% !important; height: auto !important; opacity: 0.76 !important; filter: invert(1) grayscale(1) brightness(1.35); } /* ================================================== NOTEBOOK — 1025 À 1440 PX ================================================== */ @media (min-width: 1025px) and (max-width: 1440px) { body .vc_row.about-page-cinematic { min-height: 760px !important; padding: 110px 0 48px !important; } body .about-page-intro, body .about-page-story, body .about-page-signature { width: calc(100% - 80px) !important; max-width: 1120px !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper { max-width: 520px !important; } body .about-page-story { margin-top: 110px !important; } body .about-page-story .wpb_text_column p { font-size: 17.5px !important; line-height: 1.68 !important; } body .about-page-signature .about-page-quote p { font-size: 18px !important; } body .about-page-signature .about-page-signature-image img { width: 165px !important; } } /* ================================================== TABLETTE PAYSAGE — 600 À 1024 PX ================================================== */ @media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape) { body .vc_row.about-page-cinematic { min-height: 720px !important; padding: 90px 0 45px !important; background-position: center top !important; } body .about-page-intro, body .about-page-story, body .about-page-signature { width: calc(100% - 56px) !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper { width: 46vw !important; max-width: 470px !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:first-child :is(h1, h2, h3, h4, h5, h6) { font-size: 25px !important; } body .about-page-story { margin-top: 100px !important; } body .about-page-story > .wpb_column:first-child > .vc_column-inner { padding-left: 0 !important; padding-right: 18px !important; } body .about-page-story > .wpb_column:last-child > .vc_column-inner { padding-left: 18px !important; padding-right: 0 !important; } body .about-page-story .wpb_text_column p { font-size: 16.5px !important; line-height: 1.68 !important; text-align: left !important; text-align-last: left !important; } body .about-page-signature > .wpb_column > .vc_column-inner > .wpb_wrapper { width: calc(50% - 18px) !important; } body .about-page-signature .about-page-quote p { font-size: 16.5px !important; line-height: 1.65 !important; } body .about-page-signature .about-page-signature-image img { width: 155px !important; } } /* ================================================== PAGE ABOUT — PETITS SMARTPHONES PAYSAGE 600 à 767 px : les colonnes WPBakery s'empilent. On retire les gouttières tablette 18px pour que le second bloc reste exactement aligné avec le premier. ================================================== */ @media (min-width: 600px) and (max-width: 767px) and (max-height: 450px) and (orientation: landscape) { body .about-page-story > .wpb_column:first-child > .vc_column-inner, body .about-page-story > .wpb_column:last-child > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; } } /* ================================================== TABLETTE PORTRAIT — 600 À 1024 PX Photo en premier, contenu ensuite ================================================== */ @media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) { body .vc_row.about-page-cinematic { --about-page-photo-height: 125vw; min-height: 0 !important; padding: 0 0 64px !important; background-color: #11171d !important; background-image: url("https://sylvermay.com/media/content/2026/09/sylvermay-about-biography-duotone-portrait.webp") !important; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; } body .vc_row.about-page-cinematic::before { background: linear-gradient( rgba(8, 17, 24, 0.18), rgba(8, 17, 24, 0.18) ), linear-gradient( to bottom, rgba(8, 15, 21, 0) 0, rgba(8, 15, 21, 0.12) calc(var(--about-page-photo-height) - 230px), #11171d var(--about-page-photo-height), #11171d 100% ) !important; } body .vc_row.about-page-cinematic > .wpb_column > .vc_column-inner > .wpb_wrapper { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: var(--about-page-photo-height) auto auto !important; } body .about-page-intro { position: relative !important; grid-row: 1 !important; align-self: start !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin-top: 80px !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper { width: 36vw !important; max-width: 300px !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:first-child :is(h1, h2, h3, h4, h5, h6) { font-size: clamp(23px, 3.2vw, 27px) !important; } body .about-page-story { position: relative !important; grid-row: 2 !important; margin-top: 56px !important; margin-bottom: 0 !important; } body .about-page-story > .wpb_column { display: block !important; float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body .about-page-story > .wpb_column:first-child > .vc_column-inner, body .about-page-story > .wpb_column:last-child > .vc_column-inner { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body .about-page-story > .wpb_column + .wpb_column { margin-top: 28px !important; } body .about-page-story .wpb_text_column p { font-size: 16.5px !important; line-height: 1.7 !important; text-align: left !important; text-align-last: left !important; text-shadow: none; } body .about-page-signature { position: relative !important; grid-row: 3 !important; margin-top: 36px !important; margin-left: auto !important; margin-right: auto !important; } body .about-page-signature > .wpb_column > .vc_column-inner > .wpb_wrapper { width: 62% !important; margin-left: auto !important; margin-right: 0 !important; } body .about-page-signature .about-page-quote p { font-size: 16.5px !important; line-height: 1.65 !important; text-shadow: none; } body .about-page-signature .about-page-signature-image img { width: 155px !important; } } /* ================================================== SMARTPHONE — JUSQU’À 599 PX ================================================== */ @media (max-width: 599px) { body .vc_row.about-page-cinematic { --about-mobile-header-space: 60px; --about-page-photo-height: calc(125vw + var(--about-mobile-header-space)); min-height: 0 !important; padding: 0 0 52px !important; background-color: #11171d !important; background-image: url("https://sylvermay.com/media/content/2026/09/sylvermay-about-biography-duotone-portrait.webp") !important; background-size: 100% auto !important; background-position: center var(--about-mobile-header-space) !important; background-repeat: no-repeat !important; } body .vc_row.about-page-cinematic::before { background: linear-gradient( rgba(8, 17, 24, 0.16), rgba(8, 17, 24, 0.16) ), linear-gradient( to bottom, rgba(8, 15, 21, 0) 0, rgba(8, 15, 21, 0.16) calc(var(--about-page-photo-height) - 150px), #11171d var(--about-page-photo-height), #11171d 100% ) !important; } body .vc_row.about-page-cinematic > .wpb_column > .vc_column-inner > .wpb_wrapper { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: var(--about-page-photo-height) auto auto !important; } body .about-page-intro, body .about-page-story, body .about-page-signature { width: calc(100% - 40px) !important; } body .about-page-intro { position: relative !important; grid-row: 1 !important; align-self: start !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; margin-top: calc(var(--about-mobile-header-space) + 36px) !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper { width: 44% !important; max-width: 200px !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:first-child { margin-bottom: 20px !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:first-child :is(h1, h2, h3, h4, h5, h6) { font-size: 20px !important; line-height: 1.18 !important; letter-spacing: 0.025em !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:nth-child(2) :is(h1, h2, h3, h4, h5, h6) { font-size: 13px !important; } body .about-page-story { position: relative !important; display: block !important; grid-row: 2 !important; margin-top: 38px !important; margin-bottom: 0 !important; } body .about-page-story > .wpb_column { display: block !important; float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body .about-page-story > .wpb_column > .vc_column-inner, body .about-page-story .wpb_text_column, body .about-page-story .wpb_text_column > .wpb_wrapper { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* * Remise à zéro explicite des deux anciennes gouttières. * La précision :first-child / :last-child est nécessaire * pour dépasser les règles desktop utilisant !important. */ body .about-page-story > .wpb_column:first-child > .vc_column-inner, body .about-page-story > .wpb_column:last-child > .vc_column-inner { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body .about-page-story > .wpb_column + .wpb_column { margin-top: 24px !important; } body .about-page-story .wpb_text_column p { font-size: 15.5px !important; line-height: 1.72 !important; letter-spacing: 0.008em !important; text-align: left !important; text-align-last: left !important; hyphens: none; text-shadow: none; } body .about-page-signature { position: relative !important; grid-row: 3 !important; margin-top: 32px !important; margin-left: auto !important; margin-right: auto !important; } body .about-page-signature > .wpb_column > .vc_column-inner > .wpb_wrapper { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body .about-page-signature .about-page-quote p { font-size: 15.5px !important; line-height: 1.65 !important; text-shadow: none; } body .about-page-signature .about-page-signature-image img { width: 145px !important; } } /* ================================================== TRÈS PETITS SMARTPHONES — JUSQU’À 380 PX ================================================== */ @media (max-width: 380px) { body .about-page-intro, body .about-page-story, body .about-page-signature { width: calc(100% - 32px) !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper { width: 45% !important; max-width: 170px !important; } body .about-page-intro > .wpb_column > .vc_column-inner > .wpb_wrapper > *:first-child :is(h1, h2, h3, h4, h5, h6) { font-size: 19px !important; } body .about-page-story .wpb_text_column p { font-size: 15px !important; line-height: 1.7 !important; } body .about-page-signature .about-page-signature-image img { width: 135px !important; } } /* ================================================== HOME — ABOUT CINEMATIC Version consolidée — sans halo/carte locale Structure WPBakery : - rangée extérieure : about-cinematic - rangée intérieure : about-cinematic-inner ================================================== */ /* ================================================== BASE — DESKTOP ================================================== */ body .vc_row.about-cinematic { --home-about-bg: #0b141b; --home-about-height: clamp(680px, 48vw, 850px); position: relative !important; isolation: isolate; overflow: hidden !important; min-height: var(--home-about-height) !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; box-sizing: border-box !important; background-color: var(--home-about-bg) !important; background-image: none !important; } /* -------------------------------------------------- PHOTO Un seul calque image, fondu vers la droite. -------------------------------------------------- */ body .vc_row.about-cinematic::before { content: ""; display: block !important; position: absolute; z-index: 0; top: 0; bottom: 0; left: -10vw; width: clamp(1155px, 88vw, 1510px); height: auto !important; pointer-events: none; background-image: url("https://sylvermay.com/media/content/2026/09/sylvermay-home-about-desktop.webp"); background-repeat: no-repeat; background-position: left center; background-size: auto 100%; filter: brightness(0.76) contrast(0.96); -webkit-mask-image: linear-gradient( 90deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.92) 69%, rgba(0, 0, 0, 0.42) 83%, transparent 100% ); mask-image: linear-gradient( 90deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.92) 69%, rgba(0, 0, 0, 0.42) 83%, transparent 100% ); } /* -------------------------------------------------- VOILE GLOBAL La lisibilité du texte est obtenue ici. Aucun rectangle / halo local derrière le texte. -------------------------------------------------- */ body .vc_row.about-cinematic::after { content: ""; display: block !important; position: absolute; z-index: 0; inset: 0; width: auto !important; height: auto !important; pointer-events: none; background: linear-gradient( 90deg, rgba(5, 15, 22, 0.05) 0%, rgba(5, 15, 22, 0.07) 40%, rgba(5, 15, 22, 0.15) 47%, rgba(5, 15, 22, 0.36) 54%, rgba(5, 15, 22, 0.64) 62%, rgba(5, 15, 22, 0.84) 72%, rgba(11, 20, 27, 0.96) 84%, var(--home-about-bg) 100% ), linear-gradient( 180deg, rgba(15, 37, 48, 0.10) 0%, rgba(4, 12, 18, 0.22) 100% ) !important; } /* -------------------------------------------------- WPBAKERY — STRUCTURE ET RESET -------------------------------------------------- */ body .vc_row.about-cinematic > .wpb_column { position: relative !important; z-index: 1; } body .vc_row.about-cinematic > .wpb_column > .vc_column-inner, body .vc_row.about-cinematic > .wpb_column > .vc_column-inner > .wpb_wrapper { height: auto !important; overflow: visible !important; } body .vc_row.about-cinematic-inner { display: flex !important; flex-flow: row nowrap !important; align-items: center !important; width: calc(100% - 120px) !important; max-width: 1600px !important; min-height: var(--home-about-height) !important; margin: 0 auto !important; padding: 70px 0 !important; box-sizing: border-box !important; } body .vc_row.about-cinematic-inner, body .vc_row.about-cinematic-inner > .wpb_column, body .vc_row.about-cinematic-inner > .wpb_column > .vc_column-inner, body .vc_row.about-cinematic-inner > .wpb_column > .vc_column-inner > .wpb_wrapper, body .about-cinematic-inner .wpb_custom_heading, body .about-cinematic-inner .wpb_text_column, body .about-cinematic-inner .wpb_text_column > .wpb_wrapper { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } body .vc_row.about-cinematic-inner > .wpb_column { float: none !important; } body .vc_row.about-cinematic-inner > .wpb_column:first-child { flex: 0 0 46% !important; width: 46% !important; max-width: 46% !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child { flex: 0 0 54% !important; width: 54% !important; max-width: 54% !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner { position: relative !important; padding-left: clamp(44px, 4vw, 76px) !important; padding-right: clamp(24px, 3vw, 54px) !important; } /* Aucun pseudo-élément local derrière le texte. */ body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner::before { content: none !important; display: none !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner > .wpb_wrapper { position: relative !important; z-index: 1; width: 100% !important; max-width: 620px !important; margin: 0 !important; } /* -------------------------------------------------- TYPOGRAPHIE -------------------------------------------------- */ body .about-cinematic-inner .wpb_custom_heading { max-width: 610px !important; margin-top: 0 !important; margin-bottom: 24px !important; color: #ffffff !important; font-size: clamp(30px, 2vw, 40px) !important; line-height: 1.12 !important; letter-spacing: -0.015em !important; text-align: left !important; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28); } body .about-cinematic-inner .wpb_text_column, body .about-cinematic-inner .wpb_text_column > .wpb_wrapper { margin-left: 0 !important; margin-right: 0 !important; } body .about-cinematic-inner .wpb_text_column p { margin-top: 0 !important; margin-bottom: 16px !important; color: rgba(244, 247, 249, 0.91) !important; font-size: clamp(16px, 0.94vw, 18px) !important; line-height: 1.64 !important; letter-spacing: 0.002em !important; text-align: left !important; text-align-last: left !important; word-break: normal !important; overflow-wrap: normal !important; -webkit-hyphens: none !important; hyphens: none !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.30); } body .about-cinematic-inner .wpb_text_column p:last-child { margin-bottom: 0 !important; } body .about-cinematic-inner .wpb_text_column + * { margin-top: 28px !important; } /* -------------------------------------------------- DISCOVER THE STORY — SYLVERMAY BUTTON -------------------------------------------------- */ body .about-cinematic-inner .syl-about-story-btn .vc_btn3 { padding: 11px 20px !important; background: rgba(255, 255, 255, 0.04) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; border-radius: 2px !important; box-shadow: none !important; text-shadow: none !important; color: #ffffff !important; font-family: "Montserrat", sans-serif !important; font-size: 10.5px !important; line-height: 1.3 !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } body .about-cinematic-inner .syl-about-story-btn .vc_btn3:hover, body .about-cinematic-inner .syl-about-story-btn .vc_btn3:focus { background: #ffffff !important; background-image: none !important; border-color: #ffffff !important; color: #12171d !important; } /* ================================================== TABLETTES PAYSAGE / PETITS LAPTOPS 768 — 1366 px ================================================== */ @media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) { body .vc_row.about-cinematic { --home-about-height: clamp(650px, 67vw, 760px); } body .vc_row.about-cinematic::before { left: -12vw; width: clamp(1080px, 103vw, 1330px); } body .vc_row.about-cinematic::after { background: linear-gradient( 90deg, rgba(5, 15, 22, 0.04) 0%, rgba(5, 15, 22, 0.06) 39%, rgba(5, 15, 22, 0.15) 45%, rgba(5, 15, 22, 0.38) 51%, rgba(5, 15, 22, 0.65) 59%, rgba(5, 15, 22, 0.84) 69%, rgba(11, 20, 27, 0.96) 82%, var(--home-about-bg) 100% ) !important; } body .vc_row.about-cinematic-inner { width: calc(100% - 56px) !important; min-height: var(--home-about-height) !important; padding-top: 46px !important; padding-bottom: 46px !important; } body .vc_row.about-cinematic-inner > .wpb_column:first-child { flex-basis: 47% !important; width: 47% !important; max-width: 47% !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child { flex-basis: 53% !important; width: 53% !important; max-width: 53% !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner { padding-left: 42px !important; padding-right: 24px !important; } body .about-cinematic-inner .wpb_custom_heading { margin-bottom: 20px !important; font-size: clamp(27px, 2.45vw, 33px) !important; } body .about-cinematic-inner .wpb_text_column p { font-size: clamp(15.5px, 1.3vw, 16.5px) !important; line-height: 1.60 !important; } } /* ================================================== IPAD / TABLETTES PORTRAIT Photo en haut + texte intégré dans un voile diffus. Le voile ne devient jamais un panneau opaque. ================================================== */ @media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) { body .vc_row.about-cinematic { --home-about-photo-height: clamp(720px, 102vw, 850px); --home-about-content-offset: clamp(490px, 64vw, 550px); min-height: 0 !important; padding: 0 !important; background-color: var(--home-about-bg) !important; background-image: none !important; } /* Photo portrait */ body .vc_row.about-cinematic::before { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: var(--home-about-photo-height) !important; background-image: url("https://sylvermay.com/media/content/2026/09/sylvermay-home-about-mobile.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; filter: brightness(0.72) contrast(0.96); -webkit-mask-image: linear-gradient( 180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0.96) 72%, rgba(0, 0, 0, 0.62) 88%, transparent 100% ); mask-image: linear-gradient( 180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0.96) 72%, rgba(0, 0, 0, 0.62) 88%, transparent 100% ); } /* * Voile de lecture. * IMPORTANT : pas de second linear-gradient vertical. * C'était lui qui devenait presque opaque et donnait * l'impression d'un grand rectangle sombre sur iPad. */ body .vc_row.about-cinematic::after { inset: 0 !important; width: auto !important; height: 100% !important; background: radial-gradient( ellipse 70% 50% at 48% 64%, rgba(5, 13, 19, 0.76) 0%, rgba(5, 13, 19, 0.62) 40%, rgba(5, 13, 19, 0.40) 62%, rgba(5, 13, 19, 0.18) 78%, rgba(5, 13, 19, 0.06) 90%, transparent 100% ) !important; } body .vc_row.about-cinematic-inner { display: block !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: var(--home-about-content-offset) 28px 40px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body .vc_row.about-cinematic-inner::before, body .vc_row.about-cinematic-inner::after { content: none !important; display: none !important; } body .vc_row.about-cinematic-inner > .wpb_column:first-child { display: none !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child { display: block !important; width: 100% !important; max-width: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner::before, body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner::after { content: none !important; display: none !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner > .wpb_wrapper { width: 100% !important; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body .about-cinematic-inner .vc_custom_heading, body .about-cinematic-inner .wpb_custom_heading, body .about-cinematic-inner .wpb_text_column, body .about-cinematic-inner .wpb_text_column > .wpb_wrapper { background: transparent !important; border: 0 !important; box-shadow: none !important; } body .about-cinematic-inner .wpb_custom_heading { max-width: 720px !important; margin-bottom: 22px !important; font-size: clamp(29px, 4.35vw, 37px) !important; line-height: 1.14 !important; } body .about-cinematic-inner .wpb_text_column p { font-size: 16.5px !important; line-height: 1.64 !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28); } /* * Voile .about-copy tablette portrait. * On conserve le halo de lisibilité mais on autorise * son débordement pour éviter toute coupure rectangulaire. */ body .about-copy { position: relative !important; overflow: visible !important; background: transparent !important; } body .about-copy > .vc_column-inner, body .about-copy > .vc_column-inner > .wpb_wrapper { overflow: visible !important; background: transparent !important; } body .about-copy::before { content: "" !important; position: absolute !important; top: -90px !important; bottom: -70px !important; left: -120px !important; right: -80px !important; z-index: -1 !important; pointer-events: none !important; background: radial-gradient( ellipse 78% 72% at 54% 50%, rgba(17, 23, 29, 0.66) 0%, rgba(17, 23, 29, 0.50) 42%, rgba(17, 23, 29, 0) 66%, rgba(17, 23, 29, 0) 84%, transparent 100% ) !important; } } /* ================================================== SMARTPHONES PORTRAIT Conserve le rendu validé. ================================================== */ @media (max-width: 599px) { body .vc_row.about-cinematic { --home-about-photo-height: 125vw; --home-about-content-offset: 68vw; min-height: 0 !important; padding-bottom: 52px !important; background-image: none !important; } body .vc_row.about-cinematic::before { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: var(--home-about-photo-height) !important; background-image: url("https://sylvermay.com/media/content/2026/09/sylvermay-home-about-mobile.webp"); background-repeat: no-repeat; background-position: center top; background-size: 100% auto; filter: brightness(0.70) contrast(0.96); -webkit-mask-image: linear-gradient( 180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0.90) 69%, rgba(0, 0, 0, 0.34) 87%, transparent 100% ); mask-image: linear-gradient( 180deg, #000 0%, #000 55%, rgba(0, 0, 0, 0.90) 69%, rgba(0, 0, 0, 0.34) 87%, transparent 100% ); } body .vc_row.about-cinematic::after { top: 0; right: 0; bottom: auto; left: 0; height: var(--home-about-photo-height) !important; background: linear-gradient( 180deg, rgba(6, 18, 26, 0.08) 0%, rgba(6, 18, 26, 0.12) 38%, rgba(6, 18, 26, 0.34) 48%, rgba(6, 18, 26, 0.68) 57%, rgba(6, 18, 26, 0.90) 68%, var(--home-about-bg) 82%, var(--home-about-bg) 100% ) !important; } body .vc_row.about-cinematic-inner { display: block !important; width: calc(100% - 40px) !important; min-height: 0 !important; margin: 0 auto !important; padding: var(--home-about-content-offset) 0 0 !important; } body .vc_row.about-cinematic-inner > .wpb_column:first-child { display: none !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child { display: block !important; width: 100% !important; max-width: none !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner > .wpb_wrapper { max-width: none !important; } body .about-cinematic-inner .wpb_custom_heading { max-width: none !important; margin-bottom: 20px !important; font-size: clamp(25px, 7vw, 30px) !important; line-height: 1.16 !important; } body .about-cinematic-inner .wpb_text_column p { margin-bottom: 15px !important; font-size: 15.5px !important; line-height: 1.66 !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28); } body .about-cinematic-inner .wpb_text_column + * { margin-top: 24px !important; } } /* ================================================== SMARTPHONES PAYSAGE Le visage reste dans la partie image. Le fondu ne commence qu'à proximité du texte. ================================================== */ @media (max-height: 600px) and (orientation: landscape) { body .vc_row.about-cinematic { --home-about-height: clamp(620px, 78vw, 680px); min-height: var(--home-about-height) !important; padding-bottom: 0 !important; background-image: none !important; } body .vc_row.about-cinematic::before { top: 0; right: auto; bottom: 0; left: 0; width: 100%; height: 100% !important; background-image: url("https://sylvermay.com/media/content/2026/09/sylvermay-home-about-desktop.webp"); background-repeat: no-repeat; background-position: 76% center; background-size: auto 100%; filter: brightness(0.72) contrast(0.96); /* * Le masque est calculé dans la largeur de l'élément. * En gardant l'image opaque jusqu'à ~86 %, le visage * reste intact ; la transition se fait près du texte. */ -webkit-mask-image: linear-gradient( 90deg, #000 0%, #000 86%, rgba(0, 0, 0, 0.92) 90%, rgba(0, 0, 0, 0.62) 95%, transparent 100% ); mask-image: linear-gradient( 90deg, #000 0%, #000 86%, rgba(0, 0, 0, 0.92) 90%, rgba(0, 0, 0, 0.62) 95%, transparent 100% ); } body .vc_row.about-cinematic::after { inset: 0 !important; height: 100% !important; background: linear-gradient( 90deg, rgba(5, 15, 22, 0.03) 0%, rgba(5, 15, 22, 0.04) 45%, rgba(5, 15, 22, 0.08) 50%, rgba(5, 15, 22, 0.18) 55%, rgba(5, 15, 22, 0.38) 61%, rgba(5, 15, 22, 0.62) 68%, rgba(5, 15, 22, 0.82) 76%, rgba(11, 20, 27, 0.95) 87%, var(--home-about-bg) 100% ) !important; } body .vc_row.about-cinematic-inner { display: flex !important; flex-flow: row nowrap !important; align-items: center !important; width: calc(100% - 44px) !important; max-width: 980px !important; min-height: var(--home-about-height) !important; margin: 0 auto !important; padding: 36px 0 !important; } body .vc_row.about-cinematic-inner > .wpb_column:first-child { display: block !important; flex: 0 0 54% !important; width: 54% !important; max-width: 54% !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child { display: block !important; flex: 0 0 46% !important; width: 46% !important; max-width: 46% !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner { padding-left: 24px !important; padding-right: 10px !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner > .wpb_wrapper { max-width: 500px !important; } body .about-cinematic-inner .wpb_custom_heading { margin-bottom: 18px !important; font-size: clamp(23px, 3.6vw, 30px) !important; line-height: 1.14 !important; } body .about-cinematic-inner .wpb_text_column p { font-size: clamp(14.5px, 1.85vw, 15.5px) !important; line-height: 1.58 !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.30); } /* * Halo texte en paysage : * on remplace l'ancien linear-gradient tablette par un radial * qui tombe à 0 avant les bords, donc aucune ligne visible en haut. */ body .about-copy::before { background: radial-gradient( ellipse 82% 76% at 64% 50%, rgba(17, 23, 29, 0.62) 0%, rgba(17, 23, 29, 0.46) 42%, rgba(17, 23, 29, 0) 66%, rgba(17, 23, 29, 0) 84%, transparent 100% ) !important; } } /* ================================================== TRÈS PETITS SMARTPHONES — PAYSAGE iPhone SE / écrans ~667px de large Garde le DJ visible sans écraser la zone texte. ================================================== */ @media (max-width: 700px) and (max-height: 450px) and (orientation: landscape) { body .vc_row.about-cinematic::before { left: 0 !important; right: auto !important; width: 100% !important; height: 100% !important; background-position: 78% center !important; background-size: auto 100% !important; -webkit-mask-image: linear-gradient( 90deg, #000 0%, #000 54%, rgba(0, 0, 0, 0.94) 64%, rgba(0, 0, 0, 0.56) 78%, transparent 100% ) !important; mask-image: linear-gradient( 90deg, #000 0%, #000 54%, rgba(0, 0, 0, 0.94) 64%, rgba(0, 0, 0, 0.56) 78%, transparent 100% ) !important; } body .vc_row.about-cinematic-inner { width: calc(100% - 28px) !important; } body .vc_row.about-cinematic-inner > .wpb_column:first-child { flex: 0 0 55% !important; width: 55% !important; max-width: 55% !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child { flex: 0 0 45% !important; width: 45% !important; max-width: 45% !important; } body .vc_row.about-cinematic-inner > .wpb_column:last-child > .vc_column-inner { padding-left: 18px !important; padding-right: 6px !important; } body .about-copy h1, body .about-cinematic-inner .wpb_custom_heading { font-size: clamp(20px, 3.15vw, 22px) !important; line-height: 1.10 !important; } body .about-cinematic-inner .wpb_text_column p { font-size: 14px !important; line-height: 1.55 !important; } body .about-copy::before { background: radial-gradient( ellipse 76% 72% at 68% 50%, rgba(17, 23, 29, 0.58) 0%, rgba(17, 23, 29, 0.42) 40%, rgba(17, 23, 29, 0) 64%, rgba(17, 23, 29, 0) 82%, transparent 100% ) !important; } } /* ================================================== PAGE CONTACT — CINEMATIC v2 Scope strict : - Row principale : contact-cinematic - Colonne gauche : contact-form-panel - Colonne droite : contact-info-panel Base : v14 validée. Aucun style Home/About existant n'est modifié. ================================================== */ body .vc_row.contact-cinematic { --contact-bg: #0b141b; --contact-field: rgba(255, 255, 255, 0.055); --contact-field-focus: rgba(255, 255, 255, 0.075); --contact-border: rgba(255, 255, 255, 0.17); --contact-border-focus: rgba(255, 255, 255, 0.36); --contact-text: rgba(244, 247, 249, 0.94); --contact-muted: rgba(244, 247, 249, 0.72); position: relative !important; isolation: isolate; overflow: visible !important; display: flex !important; flex-flow: row nowrap !important; align-items: flex-start !important; width: calc(100% - 80px) !important; max-width: 1220px !important; margin: 0 auto !important; padding: 72px 0 86px !important; box-sizing: border-box !important; background: transparent !important; } body .vc_row.contact-cinematic::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; background: radial-gradient( circle at 76% 18%, rgba(76, 97, 111, 0.13) 0%, rgba(76, 97, 111, 0.055) 28%, transparent 54% ), radial-gradient( circle at 16% 82%, rgba(45, 65, 78, 0.07) 0%, transparent 40% ), var(--contact-bg); } body .vc_row.contact-cinematic::after { content: none !important; display: none !important; } /* -------------------------------------------------- RESET CROMA / WPBAKERY — CONTACT UNIQUEMENT -------------------------------------------------- */ body .contact-cinematic, body .contact-cinematic > .wpb_column, body .contact-cinematic > .wpb_column > .vc_column-inner, body .contact-cinematic > .wpb_column > .vc_column-inner > .wpb_wrapper, body .contact-cinematic .wpb_text_column, body .contact-cinematic .wpb_text_column > .wpb_wrapper { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Neutralise les grosses barres décoratives héritées de Croma. */ body .contact-cinematic .vc_custom_heading, body .contact-cinematic .wpb_custom_heading, body .contact-cinematic h1, body .contact-cinematic h2, body .contact-cinematic h3, body .contact-cinematic h4, body .contact-cinematic h5, body .contact-cinematic h6 { border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; } body .contact-cinematic .vc_custom_heading::before, body .contact-cinematic .vc_custom_heading::after, body .contact-cinematic .wpb_custom_heading::before, body .contact-cinematic .wpb_custom_heading::after, body .contact-cinematic h1::before, body .contact-cinematic h1::after, body .contact-cinematic h2::before, body .contact-cinematic h2::after, body .contact-cinematic h3::before, body .contact-cinematic h3::after, body .contact-cinematic h4::before, body .contact-cinematic h4::after, body .contact-cinematic h5::before, body .contact-cinematic h5::after, body .contact-cinematic h6::before, body .contact-cinematic h6::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: none !important; } /* -------------------------------------------------- SÉPARATEURS CROMA / WPBAKERY Remontés légèrement sans modifier le flux du contenu. -------------------------------------------------- */ body .contact-cinematic .vc_separator { transform: translateY(-12px) !important; } body .contact-cinematic .vc_separator .vc_sep_holder .vc_sep_line { border-top-width: 1px !important; } /* -------------------------------------------------- COLONNES — DESKTOP -------------------------------------------------- */ body .contact-cinematic > .contact-form-panel { float: none !important; flex: 0 0 64% !important; width: 64% !important; max-width: 64% !important; margin: 0 !important; padding: 0 72px 0 0 !important; box-sizing: border-box !important; } body .contact-cinematic > .contact-info-panel { position: relative !important; float: none !important; flex: 0 0 36% !important; width: 36% !important; max-width: 36% !important; margin: 0 !important; padding: clamp(50.8px, calc(2.42vw + 20px), 57.4px) 0 0 68px !important; box-sizing: border-box !important; } body .contact-cinematic > .contact-info-panel::before { content: "" !important; position: absolute !important; top: clamp(38.4px, calc(2.42vw + 7.6px), 45px) !important; bottom: 0 !important; left: 0 !important; width: 1px !important; background: rgba(255, 255, 255, 0.09) !important; pointer-events: none !important; } body .contact-form-panel > .vc_column-inner, body .contact-info-panel > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; } /* -------------------------------------------------- TITRE / INTRO GAUCHE -------------------------------------------------- */ body .contact-form-panel .vc_custom_heading, body .contact-form-panel .wpb_custom_heading { margin: 0 0 20px !important; padding: 0 !important; color: #ffffff !important; font-size: clamp(28px, 2.2vw, 34px) !important; line-height: 1.10 !important; font-weight: 600 !important; letter-spacing: 0.055em !important; text-align: left !important; text-transform: uppercase !important; } body .contact-form-panel .wpb_text_column { max-width: 650px !important; margin: 0 0 34px !important; padding: 0 !important; } body .contact-form-panel .wpb_text_column p { margin: 0 0 4px !important; color: rgba(244, 247, 249, 0.82) !important; font-size: 15.5px !important; line-height: 1.62 !important; letter-spacing: 0.002em !important; text-align: left !important; -webkit-hyphens: none !important; hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important; } /* -------------------------------------------------- COLONNE DROITE -------------------------------------------------- */ /* Le titre CONTACT interne est redondant avec le titre de page. */ body .contact-info-panel .vc_custom_heading, body .contact-info-panel .wpb_custom_heading { display: none !important; } body .contact-info-panel .wpb_text_column { position: relative !important; margin: 0 !important; padding: 0 0 36px !important; } body .contact-info-panel .wpb_text_column + .wpb_text_column { margin-top: 34px !important; padding-top: 34px !important; border-top: 1px solid rgba(255, 255, 255, 0.09) !important; } body .contact-info-panel .wpb_text_column h1, body .contact-info-panel .wpb_text_column h2, body .contact-info-panel .wpb_text_column h3, body .contact-info-panel .wpb_text_column h4, body .contact-info-panel .wpb_text_column h5, body .contact-info-panel .wpb_text_column h6 { margin: 0 0 16px !important; padding: 0 !important; color: #ffffff !important; font-size: 17px !important; line-height: 1.22 !important; font-weight: 700 !important; letter-spacing: 0.085em !important; text-transform: uppercase !important; } body .contact-info-panel .wpb_text_column p { margin: 0 !important; color: rgba(244, 247, 249, 0.88) !important; font-size: 16px !important; line-height: 1.62 !important; font-weight: 400 !important; text-align: left !important; -webkit-hyphens: none !important; hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important; } body .contact-info-panel .wpb_text_column a { color: #ffffff !important; font-size: 15.5px !important; font-weight: 500 !important; text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.23) !important; transition: color 0.20s ease, border-color 0.20s ease !important; } body .contact-info-panel .wpb_text_column a:hover { color: rgba(255, 255, 255, 0.78) !important; border-bottom-color: rgba(255, 255, 255, 0.48) !important; } /* ================================================== PAGE CONTACT — TABLETTE / PETIT DESKTOP ================================================== */ @media (min-width: 901px) and (max-width: 1180px) { body .vc_row.contact-cinematic { width: calc(100% - 64px) !important; padding-top: 64px !important; padding-bottom: 76px !important; } body .contact-cinematic > .contact-form-panel { flex-basis: 62% !important; width: 62% !important; max-width: 62% !important; padding-right: 46px !important; } body .contact-cinematic > .contact-info-panel { flex-basis: 38% !important; width: 38% !important; max-width: 38% !important; padding-left: 44px !important; } } /* ================================================== PAGE CONTACT — TABLETTE PORTRAIT / MOBILE ================================================== */ @media (max-width: 900px) { body .vc_row.contact-cinematic { display: block !important; width: calc(100% - 48px) !important; max-width: 720px !important; margin: 0 auto !important; padding: 56px 0 68px !important; } body .contact-cinematic > .contact-form-panel, body .contact-cinematic > .contact-info-panel { display: block !important; float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body .contact-cinematic > .contact-info-panel { margin-top: 58px !important; padding-top: 42px !important; border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important; } body .contact-cinematic > .contact-info-panel::before { content: none !important; display: none !important; } body .contact-form-panel .vc_custom_heading, body .contact-form-panel .wpb_custom_heading { font-size: 28px !important; } } /* ================================================== PAGE CONTACT — SMARTPHONE ================================================== */ @media (max-width: 599px) { body .vc_row.contact-cinematic { width: calc(100% - 40px) !important; padding-top: 46px !important; padding-bottom: 56px !important; } body .contact-form-panel .vc_custom_heading, body .contact-form-panel .wpb_custom_heading { font-size: 25px !important; } body .contact-form-panel .wpb_text_column p { font-size: 15px !important; } body .contact-cinematic > .contact-info-panel { margin-top: 50px !important; padding-top: 36px !important; } body .contact-info-panel .wpb_text_column h1, body .contact-info-panel .wpb_text_column h2, body .contact-info-panel .wpb_text_column h3, body .contact-info-panel .wpb_text_column h4, body .contact-info-panel .wpb_text_column h5, body .contact-info-panel .wpb_text_column h6 { font-size: 16px !important; } body .contact-info-panel .wpb_text_column p { font-size: 15.5px !important; } } /* ================================================== PAGE CONTACT — TRÈS PETITS SMARTPHONES ================================================== */ @media (max-width: 420px) { body .vc_row.contact-cinematic { width: calc(100% - 32px) !important; } } /* ========================================================= PAGE CONTACT — FLUENT FORMS Contact form — Fluent Forms Form ID: 3 ========================================================= */ /* -------------------------------------------------- WPBAKERY WRAPPER The intro text is limited to 650px. The form width is capped at 700px. -------------------------------------------------- */ body .contact-form-panel .wpb_text_column:has(#fluentform_3) { width: 100% !important; max-width: 700px !important; margin: 0 !important; padding: 0 !important; } body .contact-form-panel .wpb_text_column:has(#fluentform_3) > .wpb_wrapper { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* -------------------------------------------------- BOOKINGS — PRESS KIT NOTE -------------------------------------------------- */ .syl-press-kit-note { margin: 10px 0 0 !important; padding: 0 !important; font-size: 12.5px !important; line-height: 1.4 !important; text-align: left !important; } .syl-press-kit-note em { font-size: inherit !important; line-height: inherit !important; } /* -------------------------------------------------- FORM -------------------------------------------------- */ body .contact-cinematic .fluentform_wrapper_3, body .contact-cinematic #fluentform_3 { width: 100% !important; max-width: 700px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* -------------------------------------------------- STANDARD FIELD GROUPS Compact vertical rhythm for contact fields. -------------------------------------------------- */ body .contact-cinematic #fluentform_3 .ff-el-group { margin: 0 0 6px !important; padding: 0 !important; } /* -------------------------------------------------- LABELS Clean contact form typography -------------------------------------------------- */ body .contact-cinematic #fluentform_3 .ff-el-input--label { margin: 0 0 6px !important; padding: 0 !important; } body .contact-cinematic #fluentform_3 .ff-el-input--label label { display: block !important; margin: 0 !important; padding: 0 !important; color: rgba(244, 247, 249, 0.82) !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; } /* -------------------------------------------------- REQUIRED ASTERISK -------------------------------------------------- */ body .contact-cinematic #fluentform_3 .ff-el-input--label .ff-el-required, body .contact-cinematic #fluentform_3 .ff-el-input--label label .ff-el-required, body .contact-cinematic #fluentform_3 span.ff-el-required { color: rgba(244, 247, 249, 0.82) !important; margin-left: 0 !important; } body .contact-cinematic #fluentform_3 .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: rgba(244, 247, 249, 0.82) !important; margin-left: 0 !important; } /* -------------------------------------------------- INPUTS / SELECT / TEXTAREA -------------------------------------------------- */ body .contact-cinematic #fluentform_3 input[type="text"], body .contact-cinematic #fluentform_3 input[type="email"], body .contact-cinematic #fluentform_3 input[type="tel"], body .contact-cinematic #fluentform_3 input[type="url"], body .contact-cinematic #fluentform_3 input[type="number"], body .contact-cinematic #fluentform_3 select, body .contact-cinematic #fluentform_3 textarea { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; background: var(--contact-field) !important; background-color: var(--contact-field) !important; background-image: none !important; color: #ffffff !important; border: 1px solid var(--contact-border) !important; border-radius: 2px !important; box-shadow: none !important; outline: none !important; font-family: inherit !important; font-size: 15.5px !important; line-height: 1.42 !important; font-weight: 400 !important; transition: background-color 0.20s ease, border-color 0.20s ease !important; } /* Single-line fields */ body .contact-cinematic #fluentform_3 input[type="text"], body .contact-cinematic #fluentform_3 input[type="email"], body .contact-cinematic #fluentform_3 input[type="tel"], body .contact-cinematic #fluentform_3 input[type="url"], body .contact-cinematic #fluentform_3 input[type="number"], body .contact-cinematic #fluentform_3 select { height: 46px !important; min-height: 46px !important; padding: 10px 13px !important; } /* Message */ body .contact-cinematic #fluentform_3 textarea { min-height: 150px !important; padding: 10px 13px !important; resize: vertical !important; } /* -------------------------------------------------- FOCUS -------------------------------------------------- */ body .contact-cinematic #fluentform_3 input[type="text"]:focus, body .contact-cinematic #fluentform_3 input[type="email"]:focus, body .contact-cinematic #fluentform_3 input[type="tel"]:focus, body .contact-cinematic #fluentform_3 input[type="url"]:focus, body .contact-cinematic #fluentform_3 input[type="number"]:focus, body .contact-cinematic #fluentform_3 select:focus, body .contact-cinematic #fluentform_3 textarea:focus { background: var(--contact-field-focus) !important; background-color: var(--contact-field-focus) !important; border-color: var(--contact-border-focus) !important; box-shadow: none !important; outline: none !important; } /* -------------------------------------------------- PLACEHOLDERS -------------------------------------------------- */ body .contact-cinematic #fluentform_3 input::placeholder, body .contact-cinematic #fluentform_3 textarea::placeholder { color: rgba(244, 247, 249, 0.34) !important; opacity: 1 !important; } /* -------------------------------------------------- NEWSLETTER OPT-IN -------------------------------------------------- */ /* Slightly more bottom spacing than standard fields. */ body .contact-cinematic #fluentform_3 .ff-el-group:has(.ff-el-form-check) { margin: 0 0 8px !important; } body .contact-cinematic #fluentform_3 .ff-el-form-check { margin: 0 !important; padding: 0 !important; } body .contact-cinematic #fluentform_3 .ff-el-form-check-label { display: flex !important; align-items: flex-start !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; color: rgba(244, 247, 249, 0.62) !important; font-family: inherit !important; font-size: 11.5px !important; line-height: 1.5 !important; font-weight: 400 !important; letter-spacing: 0.005em !important; text-transform: none !important; cursor: pointer !important; } body .contact-cinematic #fluentform_3 input[type="checkbox"].ff-el-form-check-input { flex: 0 0 auto !important; width: 13px !important; height: 13px !important; margin: 2px 0 0 !important; accent-color: #ffffff !important; cursor: pointer !important; } /* -------------------------------------------------- SEND BUTTON Compact outlined contact button. -------------------------------------------------- */ body .contact-cinematic #fluentform_3 .ff_submit_btn_wrapper { margin: 4px 0 0 !important; padding: 0 !important; } body .contact-cinematic #fluentform_3 .ff-btn-submit, body .contact-cinematic #fluentform_3 button[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 164px !important; width: auto !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 22px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.34) !important; border-radius: 2px !important; box-shadow: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: 0.11em !important; text-transform: uppercase !important; cursor: pointer !important; opacity: 1 !important; transition: background-color 0.20s ease, color 0.20s ease, border-color 0.20s ease !important; -webkit-tap-highlight-color: transparent !important; } body .contact-cinematic #fluentform_3 .ff-btn-submit:hover, body .contact-cinematic #fluentform_3 .ff-btn-submit:focus-visible, body .contact-cinematic #fluentform_3 .ff-btn-submit:active, body .contact-cinematic #fluentform_3 button[type="submit"]:hover, body .contact-cinematic #fluentform_3 button[type="submit"]:focus-visible, body .contact-cinematic #fluentform_3 button[type="submit"]:active { background: #ffffff !important; background-color: #ffffff !important; color: var(--contact-bg) !important; border-color: #ffffff !important; } /* -------------------------------------------------- FIELD ERRORS -------------------------------------------------- */ body .contact-cinematic #fluentform_3 .error, body .contact-cinematic #fluentform_3 .text-danger { display: block !important; margin: 7px 0 0 !important; padding: 8px 10px !important; color: #fff0f0 !important; background: rgba(120, 28, 36, 0.30) !important; background-color: rgba(120, 28, 36, 0.30) !important; border: 1px solid rgba(255, 150, 160, 0.22) !important; border-radius: 2px !important; font-family: inherit !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 500 !important; } /* -------------------------------------------------- SUCCESS MESSAGE -------------------------------------------------- */ body .contact-cinematic .fluentform_wrapper_3 .ff-message-success { display: block !important; width: auto !important; margin: 22px 0 0 !important; padding: 11px 13px !important; color: #f6f7f8 !important; background: rgba(255, 255, 255, 0.035) !important; background-color: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 2px !important; box-shadow: none !important; font-family: inherit !important; font-size: 13px !important; line-height: 1.45 !important; text-align: left !important; } /* ================================================== FLUENT CONTACT — TABLETTE PORTRAIT / MOBILE ================================================== */ @media (max-width: 900px) { body .contact-form-panel .wpb_text_column:has(#fluentform_3), body .contact-cinematic .fluentform_wrapper_3, body .contact-cinematic #fluentform_3 { width: 100% !important; max-width: none !important; } } /* ================================================== FLUENT CONTACT — SMARTPHONE ================================================== */ @media (max-width: 599px) { body .contact-cinematic #fluentform_3 textarea { min-height: 140px !important; } } /* ================================================== FLUENT CONTACT — VERY SMALL MOBILE ================================================== */ @media (max-width: 420px) { body .contact-cinematic #fluentform_3 .ff-btn-submit, body .contact-cinematic #fluentform_3 button[type="submit"] { width: 100% !important; } } /* ================================================== FLUENT CONTACT — TOUCH ================================================== */ @media (hover: none) and (pointer: coarse) { body .contact-cinematic #fluentform_3 .ff-btn-submit:active, body .contact-cinematic #fluentform_3 .ff-btn-submit:focus, body .contact-cinematic #fluentform_3 button[type="submit"]:active, body .contact-cinematic #fluentform_3 button[type="submit"]:focus { background: #ffffff !important; background-color: #ffffff !important; color: var(--contact-bg) !important; border-color: #ffffff !important; } } /* ========================================================= MUSIC — SECTION SPACING Responsive Empty Space used before section separators ========================================================= */ body .music-section-space { height: 32px !important; } @media screen and (max-width: 1024px) { body .music-section-space { height: 20px !important; } } @media screen and (max-width: 767px) { body .music-section-space { height: 14px !important; } } /* ========================================================= VIDEOS — PAGE Featured performance + Essential Grid player ========================================================= */ /* --------------------------------------------------------- SECTION --------------------------------------------------------- */ body .videos-cinematic { padding-bottom: clamp(56px, 6vw, 84px) !important; } /* --------------------------------------------------------- TITLE → FEATURED SPACING --------------------------------------------------------- */ body .videos-cinematic .videos-title-space { height: 32px !important; } /* --------------------------------------------------------- PERFORMANCE TITLE — RESET / TYPOGRAPHY --------------------------------------------------------- */ body .videos-cinematic .videos-live-title { margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--syl-white) !important; font-family: "Montserrat", sans-serif !important; font-style: normal !important; text-align: left !important; text-transform: uppercase !important; } body .videos-cinematic .videos-live-title::before, body .videos-cinematic .videos-live-title::after { content: none !important; display: none !important; } /* --------------------------------------------------------- ESSENTIAL GRID --------------------------------------------------------- */ body .videos-cinematic .esg-grid { margin: 0 !important; } /* Essential Grid native glyph is replaced by Music player */ body .videos-cinematic .eg-vimeostream-203239-element-25.eg-icon-play::before { content: none !important; } /* Music-style button adapted to this darker live image */ body .videos-cinematic .eg-vimeostream-203239-element-25.syl-player-toggle { background: rgba(0, 0, 0, 0.62) !important; } body .videos-cinematic .eg-vimeostream-203239-element-25.syl-player-toggle:hover { background: rgba(0, 0, 0, 0.78) !important; } /* --------------------------------------------------------- IMAGE HOVER Essential Grid overlay reacts only to Play hover --------------------------------------------------------- */ body .videos-cinematic .eg-vimeostream-203239-wrapper .esg-overlay { opacity: 0 !important; transition: opacity 0.20s ease !important; } body .videos-cinematic .eg-vimeostream-203239-wrapper:has(.syl-player-toggle:hover) .esg-overlay { opacity: 1 !important; } /* --------------------------------------------------------- PERFORMANCE TITLE --------------------------------------------------------- */ body .videos-cinematic .videos-live-title { margin-top: 14px !important; margin-bottom: 0 !important; font-size: 16px !important; line-height: 1.25 !important; font-weight: 600 !important; letter-spacing: 0.055em !important; } /* --------------------------------------------------------- LOCATION / YEAR --------------------------------------------------------- */ body .videos-cinematic .videos-meta { margin: 6px 0 0 !important; padding: 0 !important; } body .videos-cinematic .videos-meta p { margin: 0 !important; padding: 0 !important; color: rgba(208, 208, 208, 0.82) !important; font-family: "Montserrat", sans-serif !important; font-size: 12.5px !important; line-height: 1.45 !important; font-weight: 400 !important; letter-spacing: 0.025em !important; } /* ========================================================= VIDEOS — TABLET ========================================================= */ @media screen and (max-width: 1024px) { body .videos-cinematic { padding-bottom: 64px !important; } body .videos-cinematic .videos-title-space { height: 20px !important; } body .videos-cinematic .videos-live-title { margin-top: 13px !important; font-size: 15.5px !important; } } /* ========================================================= VIDEOS — MOBILE ========================================================= */ @media screen and (max-width: 767px) { body .videos-cinematic { padding-bottom: 52px !important; } body .videos-cinematic .videos-title-space { height: 14px !important; } body .videos-cinematic .videos-live-title { margin-top: 12px !important; font-size: 15px !important; line-height: 1.25 !important; letter-spacing: 0.045em !important; } body .videos-cinematic .videos-meta { margin-top: 5px !important; } body .videos-cinematic .videos-meta p { font-size: 12px !important; } } /* ========================================================= CONTINUUM — PAGE ========================================================= */ body .continuum-cinematic { padding-bottom: clamp(56px, 6vw, 84px) !important; } /* ========================================================= CONTINUUM — SPACING ========================================================= */ body .continuum-cinematic .continuum-title-space, body .continuum-cinematic .continuum-content-space { height: 32px !important; } body .continuum-cinematic .continuum-section-space { height: 48px !important; } body .continuum-cinematic .continuum-episode-space { height: 32px !important; } /* ========================================================= CONTINUUM — HERO ========================================================= */ body .continuum-cinematic .continuum-hero-artwork { margin: 0 !important; padding: 0 !important; } body .continuum-cinematic .continuum-hero-artwork .vc_single_image-wrapper { display: block !important; width: 100% !important; } body .continuum-cinematic .continuum-hero-artwork img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; } /* ========================================================= CONTINUUM — INTRO ========================================================= */ body .continuum-cinematic .continuum-intro { max-width: 880px !important; margin: 0 auto !important; padding: 0 20px !important; text-align: center !important; } body .continuum-cinematic .continuum-intro p { margin: 0 !important; padding: 0 !important; color: rgba(208, 208, 208, .96) !important; font-family: "Montserrat", sans-serif !important; font-size: 16px !important; line-height: 1.75 !important; font-weight: 400 !important; letter-spacing: .01em !important; text-align: center !important; } /* ========================================================= CONTINUUM — LATEST EPISODE ========================================================= */ body .continuum-cinematic .continuum-latest-grid { width: 80% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* ========================================================= CONTINUUM — PLAY BUTTON ========================================================= */ body .continuum-cinematic .eg-continuum-episode-element-25.eg-icon-play::before { content: none !important; } body .continuum-cinematic .eg-continuum-episode-element-25.syl-player-toggle { background: rgba(0, 0, 0, .62) !important; } body .continuum-cinematic .eg-continuum-episode-element-25.syl-player-toggle:hover { background: rgba(0, 0, 0, .78) !important; } /* ========================================================= CONTINUUM — EPISODE IMAGE HOVER ========================================================= */ body .continuum-cinematic .eg-continuum-episode-wrapper .esg-overlay { opacity: 0 !important; transition: opacity .20s ease !important; } body .continuum-cinematic .eg-continuum-episode-wrapper:has(.syl-player-toggle:hover) .esg-overlay { opacity: 1 !important; } /* ========================================================= CONTINUUM — TABLET ========================================================= */ @media screen and (max-width: 1024px) { body .continuum-cinematic { padding-bottom: 64px !important; } body .continuum-cinematic .continuum-title-space, body .continuum-cinematic .continuum-content-space { height: 20px !important; } body .continuum-cinematic .continuum-section-space { height: 32px !important; } body .continuum-cinematic .continuum-episode-space { height: 20px !important; } body .continuum-cinematic .continuum-intro { max-width: 760px !important; } body .continuum-cinematic .continuum-intro p { font-size: 15px !important; line-height: 1.75 !important; } body .continuum-cinematic .continuum-latest-grid { width: 90% !important; } } /* ========================================================= CONTINUUM — MOBILE ========================================================= */ @media screen and (max-width: 767px) { body .continuum-cinematic { padding-bottom: 52px !important; } body .continuum-cinematic .continuum-title-space, body .continuum-cinematic .continuum-content-space { height: 14px !important; } body .continuum-cinematic .continuum-section-space { height: 24px !important; } body .continuum-cinematic .continuum-episode-space { height: 14px !important; } body .continuum-cinematic .continuum-intro { padding: 0 8px !important; } body .continuum-cinematic .continuum-intro p { font-size: 14px !important; line-height: 1.7 !important; } } /* ========================================================= SUBSCRIPTION CONFIRMED — PAGE ========================================================= */ body .subscription-confirmed-cinematic { text-align: center !important; padding-bottom: 72px !important; } /* ========================================================= SUBSCRIPTION CONFIRMED — SPACING ========================================================= */ body .subscription-confirmed-cinematic .subscription-confirmed-space-top { height: 32px !important; } body .subscription-confirmed-cinematic .subscription-confirmed-space-button { height: 24px !important; } /* ========================================================= SUBSCRIPTION CONFIRMED — MESSAGE ========================================================= */ body .subscription-confirmed-cinematic .subscription-confirmed-message { max-width: 680px !important; margin: 0 auto !important; padding: 0 20px !important; text-align: center !important; } body .subscription-confirmed-cinematic .subscription-confirmed-message p { margin: 0 !important; padding: 0 !important; color: rgba(208, 208, 208, .96) !important; font-family: "Montserrat", sans-serif !important; font-size: 16px !important; line-height: 1.7 !important; font-weight: 400 !important; letter-spacing: .01em !important; text-align: center !important; } /* ========================================================= SUBSCRIPTION CONFIRMED — BACK BUTTON ========================================================= */ body .subscription-confirmed-cinematic .subscription-confirmed-back { text-align: center !important; } body .subscription-confirmed-cinematic .subscription-confirmed-back .vc_btn3 { padding: 12px 24px !important; border: 1px solid rgba(255, 255, 255, .28) !important; border-radius: 2px !important; background: rgba(255, 255, 255, .04) !important; box-shadow: none !important; color: #ffffff !important; font-family: "Montserrat", sans-serif !important; font-size: 11px !important; line-height: 1.3 !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; transition: background .20s ease, border-color .20s ease, color .20s ease !important; } body .subscription-confirmed-cinematic .subscription-confirmed-back .vc_btn3:hover { background: #ffffff !important; border-color: #ffffff !important; color: #12171d !important; } /* ========================================================= SUBSCRIPTION CONFIRMED — TABLET ========================================================= */ @media screen and (max-width: 1024px) { body .subscription-confirmed-cinematic { padding-bottom: 60px !important; } body .subscription-confirmed-cinematic .subscription-confirmed-space-top { height: 24px !important; } body .subscription-confirmed-cinematic .subscription-confirmed-space-button { height: 20px !important; } body .subscription-confirmed-cinematic .subscription-confirmed-message p { font-size: 15px !important; } } /* ========================================================= SUBSCRIPTION CONFIRMED — MOBILE ========================================================= */ @media screen and (max-width: 767px) { body .subscription-confirmed-cinematic { padding-bottom: 48px !important; } body .subscription-confirmed-cinematic .subscription-confirmed-space-top { height: 18px !important; } body .subscription-confirmed-cinematic .subscription-confirmed-space-button { height: 18px !important; } body .subscription-confirmed-cinematic .subscription-confirmed-message { padding: 0 16px !important; } body .subscription-confirmed-cinematic .subscription-confirmed-message p { font-size: 14px !important; line-height: 1.65 !important; } body .subscription-confirmed-cinematic .subscription-confirmed-back .vc_btn3 { padding: 11px 20px !important; font-size: 10.5px !important; } } /* ========================================================= NEWSLETTER — HOME / MUSIC / CONTINUUM ========================================================= */ body .newsletter-cinematic { padding-bottom: 72px !important; text-align: center !important; } /* ========================================================= NEWSLETTER — INTRO ========================================================= */ body .newsletter-cinematic .newsletter-intro { max-width: 720px !important; margin: 0 auto 22px !important; padding: 0 20px !important; text-align: center !important; } body .newsletter-cinematic .newsletter-intro p { margin: 0 !important; color: rgba(208, 208, 208, .92) !important; font-family: "Montserrat", sans-serif !important; font-size: 14px !important; line-height: 1.7 !important; font-weight: 400 !important; letter-spacing: .01em !important; text-align: center !important; } /* ========================================================= NEWSLETTER — FORM WRAPPER ========================================================= */ body .newsletter-cinematic .syl-newsletter-form { width: 100% !important; max-width: 720px !important; margin: 0 auto !important; padding: 0 20px !important; box-sizing: border-box !important; } /* ========================================================= NEWSLETTER — FORM LAYOUT ========================================================= */ body .newsletter-cinematic .syl-newsletter-form .ff-t-container { display: flex !important; align-items: stretch !important; justify-content: center !important; width: 100% !important; margin: 0 !important; gap: 12px !important; } body .newsletter-cinematic .syl-newsletter-form .ff-t-cell { padding: 0 !important; } body .newsletter-cinematic .syl-newsletter-form .ff-t-cell:first-child { flex: 1 1 auto !important; width: auto !important; } body .newsletter-cinematic .syl-newsletter-form .ff-t-cell:last-child { flex: 0 0 auto !important; width: auto !important; } body .newsletter-cinematic .syl-newsletter-form .ff-el-group { margin: 0 !important; } /* ========================================================= NEWSLETTER — EMAIL FIELD ========================================================= */ body .newsletter-cinematic .syl-newsletter-form input[type="email"] { width: 100% !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, .24) !important; border-radius: 2px !important; background: rgba(255, 255, 255, .035) !important; box-shadow: none !important; color: #ffffff !important; font-family: "Montserrat", sans-serif !important; font-size: 12px !important; line-height: 46px !important; font-weight: 400 !important; outline: none !important; transition: border-color .20s ease, background .20s ease !important; } body .newsletter-cinematic .syl-newsletter-form input[type="email"]::placeholder { color: rgba(208, 208, 208, .58) !important; opacity: 1 !important; } body .newsletter-cinematic .syl-newsletter-form input[type="email"]:focus { border-color: rgba(255, 255, 255, .62) !important; background: rgba(255, 255, 255, .055) !important; } /* ========================================================= NEWSLETTER — BUTTON ========================================================= */ body .newsletter-cinematic .syl-newsletter-form .ff-btn-submit { width: auto !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 24px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, .30) !important; border-radius: 2px !important; background: rgba(255, 255, 255, .04) !important; box-shadow: none !important; color: #ffffff !important; font-family: "Montserrat", sans-serif !important; font-size: 11px !important; line-height: 44px !important; font-weight: 500 !important; letter-spacing: .12em !important; text-transform: uppercase !important; white-space: nowrap !important; transition: background .20s ease, border-color .20s ease, color .20s ease !important; } body .newsletter-cinematic .syl-newsletter-form .ff-btn-submit:hover, body .newsletter-cinematic .syl-newsletter-form .ff-btn-submit:focus { background: #ffffff !important; border-color: #ffffff !important; color: #12171d !important; } /* ========================================================= NEWSLETTER — ERRORS / SUCCESS ========================================================= */ body .newsletter-cinematic .syl-newsletter-form .error, body .newsletter-cinematic .syl-newsletter-form .text-danger { margin-top: 7px !important; color: #d0d0d0 !important; font-family: "Montserrat", sans-serif !important; font-size: 11px !important; line-height: 1.5 !important; } body .newsletter-cinematic .syl-newsletter-form .ff-message-success { max-width: 680px !important; margin: 18px auto 0 !important; padding: 16px 20px !important; box-sizing: border-box !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 2px !important; background: rgba(255, 255, 255, .035) !important; color: #d0d0d0 !important; font-family: "Montserrat", sans-serif !important; font-size: 13px !important; line-height: 1.65 !important; text-align: center !important; } /* ========================================================= NEWSLETTER — TABLET ========================================================= */ @media screen and (max-width: 1024px) { body .newsletter-cinematic { padding-bottom: 60px !important; } body .newsletter-cinematic .newsletter-intro { max-width: 640px !important; margin-bottom: 20px !important; } } /* ========================================================= NEWSLETTER — MOBILE ========================================================= */ @media screen and (max-width: 767px) { body .newsletter-cinematic { padding-bottom: 48px !important; } body .newsletter-cinematic .newsletter-intro { margin-bottom: 18px !important; padding: 0 16px !important; } body .newsletter-cinematic .newsletter-intro p { font-size: 13px !important; line-height: 1.65 !important; } body .newsletter-cinematic .syl-newsletter-form { max-width: 520px !important; padding: 0 16px !important; } body .newsletter-cinematic .syl-newsletter-form .ff-t-container { flex-direction: column !important; gap: 10px !important; } body .newsletter-cinematic .syl-newsletter-form .ff-t-cell, body .newsletter-cinematic .syl-newsletter-form .ff-t-cell:first-child, body .newsletter-cinematic .syl-newsletter-form .ff-t-cell:last-child { width: 100% !important; flex: 0 0 auto !important; } body .newsletter-cinematic .syl-newsletter-form input[type="email"], body .newsletter-cinematic .syl-newsletter-form .ff-btn-submit { width: 100% !important; height: 44px !important; min-height: 44px !important; } body .newsletter-cinematic .syl-newsletter-form .ff-btn-submit { padding: 0 20px !important; line-height: 42px !important; font-size: 10.5px !important; } } /* ========================================================= PRIVACY POLICY — CONTENT ========================================================= */ body .syl-privacy-copy { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } body .syl-privacy-copy > p, body .syl-privacy-copy > h4 { width: 100% !important; max-width: none !important; } body .syl-privacy-copy p { text-align: justify !important; text-align-last: left !important; text-justify: inter-word !important; } body .syl-privacy-copy h4 { text-align: left !important; } body .syl-privacy-copy p { -webkit-hyphens: none !important; hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important; } body .syl-privacy-copy p { margin: 0 0 14px !important; color: rgba(244, 247, 249, 0.82) !important; line-height: 1.65 !important; } body .syl-privacy-copy h4 { margin: 28px 0 10px !important; color: #ffffff !important; font-weight: 600 !important; } body .syl-privacy-copy h4:first-of-type { margin-top: 22px !important; } body .syl-privacy-copy a { color: #ffffff !important; text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important; } body .syl-privacy-copy a:hover { border-bottom-color: rgba(255, 255, 255, 0.55) !important; } /* ========================================================= PRIVACY POLICY — MOBILE ========================================================= */ @media (max-width: 767px) { body .syl-privacy-copy { width: calc(100% - 40px) !important; max-width: none !important; } body .syl-privacy-copy > p, body .syl-privacy-copy > h4 { max-width: none !important; } } /* ========================================================= COOKIE NOTICE — SYLVERMAY STYLE ========================================================= */ #cookie-notice { background: rgba(18, 23, 29, 0.98) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22) !important; } #cookie-notice .cookie-notice-container { display: flex; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 14px 20px !important; max-width: 1180px !important; margin: 0 auto !important; padding: 16px 24px !important; } #cookie-notice .cn-text-container { margin: 0 !important; color: rgba(208, 208, 208, 0.82) !important; font-size: 12px !important; line-height: 1.55 !important; letter-spacing: 0.01em !important; text-align: left !important; } #cookie-notice .cn-buttons-container { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; } #cookie-notice .cn-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 88px !important; margin: 0 !important; padding: 8px 16px !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; border-radius: 2px !important; box-shadow: none !important; color: rgba(255, 255, 255, 0.88) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: 0.06em !important; text-decoration: none !important; text-shadow: none !important; } #cookie-notice .cn-button:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.58) !important; color: #ffffff !important; } #cookie-notice .cn-close-icon { display: none !important; } /* ========================================================= COOKIE NOTICE — MOBILE ========================================================= */ @media screen and (max-width: 767px) { #cookie-notice .cookie-notice-container { display: block; padding: 15px 20px 16px !important; text-align: center !important; } #cookie-notice .cn-text-container { display: block !important; margin: 0 0 12px !important; font-size: 11px !important; line-height: 1.55 !important; text-align: center !important; } #cookie-notice .cn-buttons-container { display: flex !important; justify-content: center !important; width: 100% !important; gap: 8px !important; } #cookie-notice .cn-button { flex: 1 1 0 !important; max-width: 130px !important; min-width: 0 !important; padding: 8px 12px !important; } }.menu-toggle rect{ fill:#000000; }ul.header-top-menu li a{color:#000000;}.menu-toggle-off polygon{ fill:#ffffff; }