/*! * nexrail-wp.css - WordPress integration layer for the Nexrail Site plugin. * Loaded LAST, after nexrail-modules.css and nexrail-theme.css. It only * reconciles WordPress with the site's own stylesheet - it never restyles * the site. Brand: primary #005d69, hover #007b84, secondary #e0752e. */ /* 1. ADMIN BAR - WordPress prints html{margin-top:32px!important}, which breaks the sticky navbar and the fullscreen home header. Neutralise it, pad instead, push the sticky nav / offcanvas clear of the bar. */ html { margin-top: 0 !important; } body.admin-bar { padding-top: 32px; } body.admin-bar #to-shine-page-navigation, body.admin-bar .offcanvas { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar { padding-top: 46px; } body.admin-bar #to-shine-page-navigation, body.admin-bar .offcanvas { top: 46px; } } /* Below 600px WordPress un-fixes the admin bar (it scrolls away with the document), so the sticky nav sits flush against the viewport again. The body padding stays: it reserves the space the absolute bar overlays. */ @media screen and (max-width: 600px) { body.admin-bar #to-shine-page-navigation, body.admin-bar .offcanvas { top: 0; } } /* 2. STRAY THEME / CORE OUTPUT - the plugin bypasses the theme via template_include, but wp_body_open and wp_footer still let a theme print its own chrome. Suppress the usual suspects (top level only) and tame the core emoji images. */ body > #page, body > #masthead, body > #colophon, body > .site-header, body > .site-footer, body > .wp-site-blocks, body > header[role="banner"], body > footer[role="contentinfo"] { display: none !important; } img.wp-smiley, img.emoji { display: inline !important; width: 1em !important; height: 1em !important; margin: 0 0.07em !important; padding: 0 !important; vertical-align: -0.1em !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* 3. ACCESSIBILITY HELPER - WordPress .screen-reader-text conventions. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); border: 0; word-wrap: normal !important; } .screen-reader-text:focus { z-index: 100000; top: 5px; left: 5px; width: auto; height: auto; padding: 15px 23px 14px; clip: auto !important; clip-path: none; color: #005d69; font-size: 0.875rem; line-height: normal; text-decoration: none; background-color: #fff; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); } /* 4. CONTACT FORM (.nexrail-form) - mirrors the original .LiveForm.Default: square controls, Montserrat, teal focus ring. The DNN form theme is not bundled, so the field box model is reproduced here. */ .nexrail-form { font-family: "Montserrat", sans-serif; font-style: normal; font-weight: 400; } .nexrail-form .page-break-section { margin: 0; padding: 1rem !important; list-style: none; background-color: rgba(0, 0, 0, 0.05) !important; border-radius: 0 !important; box-shadow: none !important; } .nexrail-form .Field { position: relative; margin-bottom: 1rem; padding-left: 12px; } .nexrail-form .Field:last-child { margin-bottom: 0; } .nexrail-form label { display: block; margin-bottom: 0.25rem; font-weight: 400; } /* Required-field asterisk, as the original .page-break-section rule does. */ .nexrail-form .Field.Required::before, .nexrail-form .required::before { content: "* "; position: absolute; top: 0; left: 0; } .nexrail-form .form-control, .nexrail-form input[type="text"], .nexrail-form input[type="email"], .nexrail-form input[type="tel"], .nexrail-form textarea, .nexrail-form select { display: block; width: 100%; padding: 0.5rem 0.75rem; color: #212529; font-family: "Montserrat", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0 !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .nexrail-form textarea { min-height: 250px; resize: vertical; } /* The bundled theme paints a black focus ring; use the brand teal instead. */ .nexrail-form .form-control:focus, .nexrail-form input[type="text"]:focus, .nexrail-form input[type="email"]:focus, .nexrail-form input[type="tel"]:focus, .nexrail-form textarea:focus, .nexrail-form select:focus { outline: 0; border-color: #005d69 !important; box-shadow: 0 0 0 0.2rem rgba(0, 93, 105, 0.3) !important; } .nexrail-form input[type="submit"], .nexrail-form button[type="submit"] { display: inline-block; padding: 0.5rem 1.5rem; color: #fff; font-family: "Montserrat", sans-serif; font-weight: 600; line-height: 1.5; text-decoration: none; background-color: #005d69; border: 1px solid #005d69; border-radius: 0 !important; cursor: pointer; } .nexrail-form input[type="submit"]:hover, .nexrail-form button[type="submit"]:hover { background-color: #00464f; border-color: #00464f; } .nexrail-form input[type="submit"]:focus, .nexrail-form button[type="submit"]:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 93, 105, 0.4); } /* Honeypot: never visible, never in the tab order. */ .nexrail-form .nexrail-hp, .nexrail-form input[name="nexrail_hp"] { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; } /* reCAPTCHA / privacy note under the form (original background + offset). */ .nexrail-form .recaptcha { background: url(../img/recaptcha.png) no-repeat left center; padding-left: 60px; } /* 5. FORM FEEDBACK NOTICES - .alert-success is absent from the compiled theme CSS, so its Bootstrap 5 variables are defined here; both go square. */ .alert.alert-success, .alert.alert-danger { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: 0; } .alert.alert-success { --bs-alert-color: #143d29; --bs-alert-bg: #d7e8de; --bs-alert-border-color: #bcd8c7; } /* 6. PAGINATION (news archive) in the brand colours. */ .pagination { --bs-pagination-color: #005d69; --bs-pagination-border-radius: 0; --bs-pagination-hover-color: #fff; --bs-pagination-hover-bg: #007b84; --bs-pagination-hover-border-color: #007b84; --bs-pagination-focus-color: #fff; --bs-pagination-focus-bg: #007b84; --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 93, 105, 0.3); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: #005d69; --bs-pagination-active-border-color: #005d69; margin-top: 2rem; margin-bottom: 0; } .pagination .page-link { border-radius: 0 !important; text-decoration: none; } /* 7. PRINT - drop the navigation, the footer and the back-to-top button. */ @media print { #to-shine-page-navigation, #to-shine-page-footer, #to-shine-to-top, .Notificatiewrapper, #wpadminbar { display: none !important; } body, body.admin-bar { padding-top: 0 !important; background: #fff !important; } }