/** * Ready2Teach page title and banner polish * Version 1.11.8 * * This file is deliberately visual-only. It does not alter planner, lesson, * editor, resource, entitlement or REST behaviour. */ /* Remove only the title generated by the WordPress theme/template. */ body.r2tpci-wide-page article > header.entry-header, body.r2tpci-wide-page .entry > header.entry-header, body.r2tpci-wide-page main > header.page-header, body.r2tpci-wide-page .site-main > header.page-header, body.r2tpci-wide-page .wp-block-post-title, body.r2tpci-wide-page h1.entry-title, body.r2tpci-wide-page h1.page-title { display: none !important; } body.r2tpci-wide-page .entry-content, body.r2tpci-wide-page .page-content, body.r2tpci-wide-page .wp-block-post-content { margin-top: 0 !important; padding-top: 0 !important; } :root { --r2t-title-font: "Arial Rounded MT Bold", "Trebuchet MS", "Aptos Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --r2t-shared-banner-artwork: url("../images/r2t-subject-artwork.webp"); } /* Add the shared artwork to existing dark Ready2Teach banners. */ body.r2tpci-wide-page :is( .r2t-home-hero, .r2t-classroom-hero, .r2t-profile-hero, .r2t-ts-hero, .r2t-loader-hero, .r2t-demo-hero, .r2t-planner-topbar, .r2t-print-hero, .r2t-manual-lesson-header, .r2t-ll-header, .r2t-map-subject-banner, .r2t-hero:not(.r2t-v10-hero-light):not(.r2t-v11-hero-light) ) { background-image: linear-gradient( 135deg, rgba(7, 24, 45, 0.20), rgba(7, 24, 45, 0.03) ), var(--r2t-shared-banner-artwork) !important; background-repeat: no-repeat !important; background-position: center, center !important; background-size: cover, cover !important; background-blend-mode: multiply, soft-light !important; isolation: isolate; } /* Keep light public heroes pale while retaining the pattern. */ body.r2tpci-wide-page :is( .r2t-v10-hero-light, .r2t-v11-hero-light ) { background-color: #fffaf0 !important; background-image: linear-gradient( 135deg, rgba(255, 250, 240, 0.86), rgba(244, 234, 213, 0.74) ), var(--r2t-shared-banner-artwork) !important; background-repeat: no-repeat !important; background-position: center, center !important; background-size: cover, cover !important; background-blend-mode: normal, soft-light !important; } /* More distinctive title typography inside existing Ready2Teach banners. */ body.r2tpci-wide-page :is( .r2t-home-hero, .r2t-classroom-hero, .r2t-profile-hero, .r2t-ts-hero, .r2t-loader-hero, .r2t-demo-hero, .r2t-planner-topbar, .r2t-hero ) h1, body.r2tpci-wide-page .r2t-print-title h1 { font-family: var(--r2t-title-font) !important; font-weight: 900 !important; letter-spacing: -0.045em !important; text-wrap: balance; } /* Three-colour Ready2Teach accent beneath major titles. */ body.r2tpci-wide-page :is( .r2t-home-hero, .r2t-classroom-hero, .r2t-profile-hero, .r2t-ts-hero, .r2t-loader-hero, .r2t-demo-hero, .r2t-planner-topbar, .r2t-hero ) h1::after, body.r2tpci-wide-page .r2t-print-title h1::after { content: ""; display: block; width: min(220px, 62%); height: 7px; margin-top: 16px; border-radius: 999px; background: linear-gradient( 90deg, #b84b31 0 33%, #df9a2f 33% 66%, #2f7a70 66% 100% ); box-shadow: 0 4px 14px rgba(7, 24, 45, 0.14); } body.r2tpci-wide-page :is( .r2t-v10-hero-light, .r2t-v11-hero-light ) h1 { color: #3f2a21 !important; text-shadow: 0 2px 0 rgba(223, 154, 47, 0.12); } /* Lesson Launch remains editable, but reads as a designed title. */ body.r2tpci-wide-page .r2t-ll-header .r2t-header-title-edit input { font-family: var(--r2t-title-font) !important; font-weight: 900 !important; letter-spacing: -0.035em !important; border-color: rgba(255, 255, 255, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 26px rgba(7, 24, 45, 0.12); } body.r2tpci-wide-page .r2t-map-subject-banner h3, body.r2tpci-wide-page .r2t-manual-lesson-header h1 { font-family: var(--r2t-title-font) !important; font-weight: 900 !important; letter-spacing: -0.035em !important; } @media print { body.r2tpci-wide-page :is( .r2t-ll-header, .r2t-map-subject-banner, .r2t-manual-lesson-header ) { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } @media (max-width: 700px) { body.r2tpci-wide-page :is( .r2t-home-hero, .r2t-classroom-hero, .r2t-profile-hero, .r2t-ts-hero, .r2t-loader-hero, .r2t-demo-hero, .r2t-planner-topbar, .r2t-hero ) h1::after, body.r2tpci-wide-page .r2t-print-title h1::after { width: 140px; height: 6px; margin-top: 12px; } } /* ========================================================= My Planner banner readability refinement Version 1.11.8 ========================================================= */ /* * The shared artwork has both pale and dark areas. Give the title side a * stronger navy veil so the artwork remains visible without competing with * the planner heading. */ body.r2tpci-wide-page .r2t-planner-topbar { background-color: #102846 !important; background-image: linear-gradient( 90deg, rgba(5, 20, 38, 0.82) 0%, rgba(8, 31, 56, 0.64) 42%, rgba(8, 31, 56, 0.26) 72%, rgba(8, 31, 56, 0.12) 100% ), var(--r2t-shared-banner-artwork) !important; background-repeat: no-repeat !important; background-position: center, center 48% !important; background-size: cover, cover !important; background-blend-mode: normal, normal !important; } body.r2tpci-wide-page .r2t-planner-topbar h1 { color: #ffffff !important; font-size: clamp(2.35rem, 4.7vw, 4.65rem) !important; line-height: 0.96 !important; font-weight: 950 !important; letter-spacing: -0.055em !important; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.58), 0 1px 2px rgba(0, 0, 0, 0.74) !important; } body.r2tpci-wide-page .r2t-planner-topbar p { max-width: 790px !important; color: rgba(255, 255, 255, 0.96) !important; font-size: clamp(1rem, 1.55vw, 1.22rem) !important; line-height: 1.55 !important; font-weight: 650 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62), 0 1px 1px rgba(0, 0, 0, 0.72) !important; } body.r2tpci-wide-page .r2t-planner-topbar .r2t-btn-secondary { background: rgba(255, 255, 255, 0.94) !important; color: #102846 !important; border: 1px solid rgba(255, 255, 255, 0.72) !important; box-shadow: 0 10px 26px rgba(4, 18, 34, 0.26) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body.r2tpci-wide-page .r2t-planner-topbar .r2t-btn-secondary:hover, body.r2tpci-wide-page .r2t-planner-topbar .r2t-btn-secondary:focus-visible { background: #ffffff !important; color: #0b3158 !important; transform: translateY(-1px); } @media (max-width: 760px) { body.r2tpci-wide-page .r2t-planner-topbar { background-position: center, 36% center !important; } body.r2tpci-wide-page .r2t-planner-topbar h1 { font-size: clamp(2.2rem, 12vw, 3.5rem) !important; } }