/* Theme Name: GeneratePress Child - ErfgoedLAB Theme URI: https://generatepress.com Description: GeneratePress child theme for the ErfgoedLAB Limburg landing page. Adds the brand palette, Montserrat typography and base styling. Author: ErfgoedLAB Limburg Template: generatepress Version: 1.0.0 Text Domain: generatepress-child-erfgoedlab */ /* ErfgoedLAB brand palette --el-blue #486d83 Blue Loneliness (headers, dark sections, text) --el-cream #faefe9 page background --el-peach #f4a384 accent / buttons --el-plum #7a5063 secondary / eyebrows / links --el-sand #e2d5c2 info card background */ :root { --el-blue: #486d83; --el-cream: #faefe9; --el-peach: #f4a384; --el-plum: #7a5063; --el-sand: #e2d5c2; } /* Smooth in-page scrolling for the anchor navigation */ html { scroll-behavior: smooth; } /* Offset for the sticky header so anchor targets aren't hidden underneath it */ :target { scroll-margin-top: 90px; } /* Global brand defaults */ body { font-family: 'Montserrat', sans-serif; color: var(--el-blue); background-color: var(--el-cream); -webkit-font-smoothing: antialiased; } /* Default link colour (outside the styled blocks) */ .entry-content a:not(.gb-text):not(.gb-element) { color: var(--el-plum); text-decoration: none; } .entry-content a:not(.gb-text):not(.gb-element):hover { color: var(--el-blue); } /* Let full-width blocks bleed edge-to-edge on the landing page. Requires the page Content container to be set to "Full Width" (see README). This strips residual padding just in case. */ .page-template-landing .site-content .content-area, .landing-full .entry-content { padding: 0; } /* ------------------------------------------------------------------------- Button text-colour safety net GenerateBlocks button/link text otherwise inherits the global link colour (they tie on specificity and the global rule wins by source order). These rules re-assert each button's own colour with a higher-specificity selector so the outline button on the blue hero is legible. ------------------------------------------------------------------------- */ a.gb-text.gb-text-txHeroBtn1 { color: var(--el-blue); } /* dark text on peach */ a.gb-text.gb-text-txHeroBtn2 { color: var(--el-cream); } /* cream text on blue */ a.gb-text.gb-text-txHeroBtn2:hover { color: var(--el-blue); } a.gb-text.gb-text-txConBtn { color: var(--el-blue); } a.gb-text.gb-text-txNavCta { color: var(--el-blue); } a.gb-text.gb-text-txNav1, a.gb-text.gb-text-txNav2, a.gb-text.gb-text-txNav3 { color: var(--el-cream); } a.gb-text.gb-text-txNav1:hover, a.gb-text.gb-text-txNav2:hover, a.gb-text.gb-text-txNav3:hover { color: var(--el-peach); } /* ------------------------------------------------------------------------- GeneratePress NATIVE header -> ErfgoedLAB look Use this if you keep GeneratePress's own header + menu (instead of the custom header block in the pattern). Free GeneratePress has no built-in sticky header, so we make it sticky with CSS. Menu setup (Appearance -> Menus): - items: Over het LAB (#over), Waarom (#belang), Kennisdeling (#kennis) - Contact (#contact) -> give it the CSS class el-button (Screen Options -> tick "CSS Classes" to reveal the field) ------------------------------------------------------------------------- */ /* Sticky goes on .header-wrap (its parent is ), not .site-header, whose parent is only as tall as the header — so it has no room to stick. */ .header-wrap { position: sticky; top: 0; z-index: 100; background: var(--el-blue); } .site-header { background: var(--el-blue); } .main-navigation, .main-navigation .main-nav > ul { background: transparent; } .main-navigation .main-nav ul li a { color: var(--el-cream); font-weight: 300; } .main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li.current-menu-item a { color: var(--el-peach); } /* Logo sizing to match the design (~44px tall cream logo) */ .site-header .site-logo img, .site-header .header-image { height: 44px; width: auto; } /* Contact menu item rendered as a peach pill button */ .main-navigation .main-nav ul li.el-button a { color: var(--el-blue); background: var(--el-peach); border-radius: 999px; padding: 10px 22px; font-weight: 600; margin: 4px 0; } .main-navigation .main-nav ul li.el-button a:hover, .main-navigation .main-nav ul li.el-button.current-menu-item a { color: var(--el-blue); background: var(--el-peach-light); } /* keep --el-peach-light available for the pill hover */ :root { --el-peach-light: #f5b884; }