/* Theme Name: Dream Learn Pitch Theme URI: https://example.com/dream-learn-pitch Author: Kevin Smith - Claude Author URI: https://example.com Description: A flexible, Foundation-based WordPress theme with full Customizer control over colors, backgrounds and logos via CSS variables. Includes four page templates (Standard with sidebar, Standard no sidebar, Full Page, Blank), a horizontal logo+menu masthead with styled sub-menus, sidebar & footer widget areas, custom head-script / additional-CSS injectors, and a hardened custom login URL (dlp-login). Version: 1.0 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: dream-learn-pitch Tags: custom-logo, custom-menu, custom-background, featured-images, threaded-comments, translation-ready, two-columns, right-sidebar, full-width-template */ /* ========================================================================= 1. CSS variables (defaults). These are overridden at runtime by the Customizer output printed to by inc/dynamic-css.php. Every color / background in the theme resolves through these vars. ========================================================================= */ :root { /* Layout */ --dlp-content-width: 1200px; --dlp-sidebar-width: 300px; --dlp-gutter: 2rem; --dlp-radius: 4px; /* Space between the viewport edge and the logo / menu in the full-width header. Adjust here or in Customizer > Custom Code > Additional CSS. */ --dlp-header-gutter: 2.5rem; /* Brand + text colors */ --dlp-primary: #1779ba; --dlp-secondary: #767676; --dlp-body-text: #1e1e1e; --dlp-heading-text: #111111; --dlp-link: #1779ba; --dlp-link-hover: #0f5b8f; /* Body background (color + optional image/gradient layer) */ --dlp-body-bg-color: #ffffff; --dlp-body-bg-image: none; --dlp-body-bg-size: auto; --dlp-body-bg-repeat: repeat; --dlp-body-bg-position: left top; --dlp-body-bg-attachment: scroll; /* Header / masthead background */ --dlp-header-bg-color: #ffffff; --dlp-header-bg-image: none; --dlp-header-bg-size: cover; --dlp-header-bg-repeat: no-repeat; --dlp-header-bg-position: center; --dlp-header-bg-attachment: scroll; /* Main menu */ --dlp-menu-text: #1e1e1e; --dlp-menu-hover: #1779ba; /* Active item is outlined, not recoloured — this is the border color. */ --dlp-menu-active: #ffffff; --dlp-menu-active-border-width: 1px; /* Sub-menu (background is its own "background" group) */ --dlp-submenu-bg-color: #1779ba; --dlp-submenu-bg-image: none; --dlp-submenu-bg-size: auto; --dlp-submenu-bg-repeat: repeat; --dlp-submenu-bg-position: left top; --dlp-submenu-text: #ffffff; --dlp-submenu-hover-bg: rgba(0, 0, 0, 0.15); --dlp-submenu-hover-text: #ffffff; /* Footer (independent of body) */ --dlp-footer-bg-color: #0f1b2d; --dlp-footer-bg-image: none; --dlp-footer-bg-size: cover; --dlp-footer-bg-repeat: no-repeat; --dlp-footer-bg-position: center; --dlp-footer-bg-attachment: scroll; --dlp-footer-text: #cfd8e3; --dlp-footer-link: #ffffff; --dlp-footer-link-hover: #9ec5ff; } /* ========================================================================= 2. Base / reset-ish ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--dlp-body-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; background-color: var(--dlp-body-bg-color); background-image: var(--dlp-body-bg-image); background-size: var(--dlp-body-bg-size); background-repeat: var(--dlp-body-bg-repeat); background-position: var(--dlp-body-bg-position); background-attachment: var(--dlp-body-bg-attachment); } h1, h2, h3, h4, h5, h6 { color: var(--dlp-heading-text); line-height: 1.25; margin: 0 0 0.5em; } a { color: var(--dlp-link); text-decoration: none; } a:hover, a:focus { color: var(--dlp-link-hover); text-decoration: underline; } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--dlp-primary); outline-offset: 2px; } .dlp-primary-color { color: var(--dlp-primary); } .dlp-secondary-color { color: var(--dlp-secondary); } /* Accessibility: skip link + screen-reader text */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; word-wrap: normal !important; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: #fff; color: #111; padding: 0.75rem 1rem; border-radius: var(--dlp-radius); } .skip-link:focus { left: 8px; top: 8px; } /* ========================================================================= 3. Layout containers .dlp-container = centered max-width wrapper used by sidebar / no-sidebar Full Page template drops the max-width so content reaches the edges. ========================================================================= */ .dlp-container { width: 100%; max-width: var(--dlp-content-width); margin-left: auto; margin-right: auto; padding-left: var(--dlp-gutter); padding-right: var(--dlp-gutter); } .site-content { padding-top: 2.5rem; padding-bottom: 3rem; } /* Standard WITH sidebar: content + aside side by side */ .layout-sidebar .dlp-content-wrap { display: flex; flex-wrap: wrap; gap: var(--dlp-gutter); align-items: flex-start; } .layout-sidebar #primary { flex: 1 1 0; min-width: 0; } .layout-sidebar #secondary { flex: 0 0 var(--dlp-sidebar-width); max-width: 100%; } /* Standard NO sidebar: same total container width, body is wider (fills it) */ .layout-no-sidebar #primary { width: 100%; } /* Full Page: edge-to-edge content, no side margins/padding. Scoped to #content so the header/footer keep their normal container. */ .layout-full-page #content .dlp-container { max-width: none; padding-left: 0; padding-right: 0; } .layout-full-page #content.site-content { padding-top: 0; padding-bottom: 0; } @media (max-width: 800px) { .layout-sidebar .dlp-content-wrap { display: block; } .layout-sidebar #secondary { width: 100%; margin-top: 2.5rem; } } /* ========================================================================= 4. Masthead: logo + horizontal menu on the same row ========================================================================= */ .site-header { background-color: var(--dlp-header-bg-color); background-image: var(--dlp-header-bg-image); background-size: var(--dlp-header-bg-size); background-repeat: var(--dlp-header-bg-repeat); background-position: var(--dlp-header-bg-position); background-attachment: var(--dlp-header-bg-attachment); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } /* Masthead spans the full viewport width: logo hard left, menu hard right, separated from the edges only by the header gutter (not the content max-width). Body content below still uses the centered .dlp-container. */ .site-header .dlp-container { display: flex; align-items: center; justify-content: space-between; gap: var(--dlp-gutter); min-height: 84px; max-width: none; padding-left: var(--dlp-header-gutter); padding-right: var(--dlp-header-gutter); } /* Branding is the logo only — the site title and tagline are not rendered in the UI (they live in as metadata). */ .site-branding { display: flex; align-items: center; flex: 0 0 auto; } .site-branding .custom-logo-link img, .site-branding .custom-logo { display: block; max-height: 60px; width: auto; } /* Menu toggle (mobile) */ .dlp-menu-toggle { display: none; background: transparent; border: 1px solid currentColor; color: var(--dlp-menu-text); padding: 0.5rem 0.75rem; border-radius: var(--dlp-radius); cursor: pointer; font-size: 1rem; } .dlp-menu-toggle .fa-bars, .dlp-menu-toggle .fa-xmark { pointer-events: none; } /* ========================================================================= 5. Primary navigation + styled sub-menus ========================================================================= */ .main-navigation { flex: 1 1 auto; display: flex; justify-content: flex-end; } .main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; } .main-navigation li { position: relative; } .main-navigation a { display: block; padding: 0.75rem 1rem; color: var(--dlp-menu-text); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; line-height: 1.2; } .main-navigation > ul > li > a:hover, .main-navigation > ul > li > a:focus { color: var(--dlp-menu-hover); } /* Active item: outlined instead of recoloured. A transparent border of the same width sits on every top-level item so nothing shifts when it appears. */ .main-navigation > ul > li > a { border: var(--dlp-menu-active-border-width) solid transparent; border-radius: var(--dlp-radius); } .main-navigation > ul > li.current-menu-item > a, .main-navigation > ul > li.current_page_item > a, .main-navigation > ul > li.current-menu-ancestor > a, .main-navigation > ul > li.current-page-ancestor > a, .main-navigation > ul > li.current_page_ancestor > a, .main-navigation > ul > li.current-menu-parent > a { border-color: var(--dlp-menu-active); color: var(--dlp-menu-text); } /* Caret indicator for parents */ .main-navigation .menu-item-has-children > a::after { content: "\f107"; /* chevron down */ /* List both family names so it works on Font Awesome 6 and 7. */ font-family: "Font Awesome 7 Free", "Font Awesome 6 Free"; font-weight: 900; font-size: 0.7em; margin-left: 0.4em; vertical-align: middle; display: inline-block; } /* Sub-menu: styled dropdown */ .main-navigation ul ul { display: block; position: absolute; top: 100%; left: 0; min-width: 220px; background-color: var(--dlp-submenu-bg-color); background-image: var(--dlp-submenu-bg-image); background-size: var(--dlp-submenu-bg-size); background-repeat: var(--dlp-submenu-bg-repeat); background-position: var(--dlp-submenu-bg-position); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); border-radius: 0 0 var(--dlp-radius) var(--dlp-radius); padding: 0.35rem 0; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; } .main-navigation ul ul li { width: 100%; } .main-navigation ul ul a { color: var(--dlp-submenu-text); font-weight: 400; padding: 0.6rem 1.1rem; white-space: nowrap; } /* Active sub-menu item: same outlined treatment, inset so the dropdown edges stay clean. */ .main-navigation ul ul li.current-menu-item > a, .main-navigation ul ul li.current_page_item > a { box-shadow: inset 0 0 0 var(--dlp-menu-active-border-width) var(--dlp-menu-active); } .main-navigation ul ul a:hover, .main-navigation ul ul a:focus { background-color: var(--dlp-submenu-hover-bg); color: var(--dlp-submenu-hover-text); } /* Reveal on hover / keyboard focus */ .main-navigation li:hover > ul, .main-navigation li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); } /* Third level flyout */ .main-navigation ul ul ul { top: 0; left: 100%; border-radius: var(--dlp-radius); } .main-navigation ul ul .menu-item-has-children > a::after { content: "\f105"; /* chevron right */ float: right; margin-left: 0.5em; } /* --- Mobile navigation --- */ @media (max-width: 800px) { /* Full-width header stays edge-to-edge, but with a tighter gutter. */ :root { --dlp-header-gutter: 1.25rem; } .dlp-menu-toggle { display: inline-flex; align-items: center; gap: 0.4rem; } .main-navigation { display: none; flex: 1 0 100%; order: 3; margin-top: 0.75rem; } .main-navigation.is-open { display: block; } .main-navigation ul { display: block; } .main-navigation > ul > li { border-top: 1px solid rgba(0, 0, 0, 0.08); } /* Sub-menus become inline, revealed by tap (.submenu-open) */ .main-navigation ul ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; min-width: 0; display: none; border-radius: 0; } .main-navigation li.submenu-open > ul { display: block; } .main-navigation ul ul ul { left: auto; } .main-navigation .menu-item-has-children > a::after { float: right; content: "\f107"; } } /* ========================================================================= 6. Sidebar & widgets ========================================================================= */ .widget { margin-bottom: 2rem; } .widget:last-child { margin-bottom: 0; } .widget-title { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--dlp-primary); padding-bottom: 0.4rem; margin-bottom: 1rem; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget ul li { padding: 0.35rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } /* ========================================================================= 7. Footer (own background / text / link colors from Customizer) ========================================================================= */ .site-footer { background-color: var(--dlp-footer-bg-color); background-image: var(--dlp-footer-bg-image); background-size: var(--dlp-footer-bg-size); background-repeat: var(--dlp-footer-bg-repeat); background-position: var(--dlp-footer-bg-position); background-attachment: var(--dlp-footer-bg-attachment); color: var(--dlp-footer-text); padding: 3rem 0; } .site-footer .footer-widgets { color: var(--dlp-footer-text); } .site-footer a { color: var(--dlp-footer-link); } .site-footer a:hover, .site-footer a:focus { color: var(--dlp-footer-link-hover); } .site-footer .widget-title { color: var(--dlp-footer-text); border-bottom-color: currentColor; } .site-footer .widget ul li { border-bottom-color: rgba(255, 255, 255, 0.12); } .site-info { margin-top: 1.5rem; font-size: 0.85rem; opacity: 0.85; } /* ========================================================================= 8. Content elements ========================================================================= */ .entry-header { margin-bottom: 1.25rem; } .entry-title { font-size: 2rem; } .entry-content > * + * { margin-top: 1rem; } .entry-content img { border-radius: var(--dlp-radius); } .post-thumbnail { margin-bottom: 1.5rem; } .post-thumbnail img { border-radius: var(--dlp-radius); width: 100%; object-fit: cover; } .dlp-button, .entry-content .wp-block-button__link { display: inline-block; background-color: var(--dlp-primary); color: #fff; padding: 0.7rem 1.4rem; border-radius: var(--dlp-radius); font-weight: 600; text-decoration: none; } .dlp-button:hover { filter: brightness(0.92); color: #fff; text-decoration: none; } .entry-meta { color: var(--dlp-secondary); font-size: 0.85rem; margin-bottom: 1rem; } .entry-meta .fa-solid, .entry-meta i { margin-right: 0.35rem; color: var(--dlp-primary); } .pagination { margin-top: 2.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .pagination .page-numbers { display: inline-block; padding: 0.5rem 0.9rem; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: var(--dlp-radius); } .pagination .page-numbers.current { background: var(--dlp-primary); color: #fff; border-color: var(--dlp-primary); } /* Comments */ .comment-list { list-style: none; padding: 0; } .comment-list .comment { padding: 1rem 0; border-top: 1px solid rgba(0, 0, 0, 0.08); } .comment-list .children { list-style: none; margin-left: 2rem; } /* Blank template gets zero chrome; nothing to style here on purpose. */