/* ========================================================================== IGS Theme — drupal-overrides.css Styles Drupal's REAL block markup (site branding, search form, menus, language switcher) so live blocks match the hardcoded preview design. Loaded globally. Keep this separate from layout.css so your own edits there are never clobbered by theme updates. ========================================================================== */ /* -------------------------------------------------------------------------- Hero region → two-column grid On this site (base theme: false) {{ page.hero }} renders as an UNCLASSED
wrapper inside .hero > .container, holding the two block divs: .hero > .container > div > [id^="block-…"] (× 2) So we make THAT wrapper the grid. The .region* selectors are kept as a fallback for setups where Drupal does add the region wrapper class. BOTH blocks (hero copy + IGS price panel) must be in "Hero (front page)". -------------------------------------------------------------------------- */ .hero > .container > div, .hero .region, .hero .region-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-8); align-items: center; } .hero > .container > div > *, .hero .region > *, .hero .region-hero > * { margin: 0; min-width: 0; } /* If only ONE block is placed in the hero region, let it span full width instead of an awkward half column. (Progressive enhancement via :has.) */ .hero > .container > div:has(> :only-child) { grid-template-columns: 1fr; } @media (max-width: 880px) { .hero > .container > div, .hero .region, .hero .region-hero { grid-template-columns: 1fr; gap: var(--sp-6); } } /* -------------------------------------------------------------------------- Site branding block The page template already prints the logo on the left. If a Site Branding block is ALSO placed (e.g. in Header), suppress its name/slogan so the brand reads as logo-only (the intended design). If you want the block to BE the logo instead of the template's, remove the template logo — but don't run both. -------------------------------------------------------------------------- */ .site-header .block-system-branding-block { display: flex; align-items: center; } .site-header .block-system-branding-block img { height: 48px; width: auto; } /* Hide the text site name + slogan in the header (logo conveys the brand). */ .site-header .block-system-branding-block .site-branding__name, .site-header .block-system-branding-block .site-branding__slogan, .site-header .block-system-branding-block > a[rel="home"]:not(:has(img)), .site-header .block-system-branding-block .site-slogan { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Search form block → FULL-PAGE OVERLAY A persistent collapsing field is fragile in a real header, so instead a visible 🔍 toggle (rendered by the template) opens a full-screen search overlay (à la drupar/mahi). The template wraps the Header-region Search block inside .igs-search-overlay; search.js toggles `search-open` on . Keep the Search block in the Header region — nothing here moves it in the DOM. -------------------------------------------------------------------------- */ .search-toggle { display: grid; } .igs-search-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); background: radial-gradient(120% 120% at 50% -10%, rgba(74, 40, 63, .98), rgba(43, 22, 37, .985)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; } body.search-open .igs-search-overlay { opacity: 1; visibility: visible; } body.search-open { overflow: hidden; } .igs-search-panel { width: min(680px, 100%); text-align: center; transform: translateY(16px) scale(.985); opacity: 0; transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .3s ease; } body.search-open .igs-search-panel { transform: none; opacity: 1; } .igs-search-eyebrow { display: block; font-family: var(--igs-sans); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 600; color: var(--igs-gold-300, #e7c66b); margin-bottom: var(--sp-5); } .igs-search-hint { margin: var(--sp-5) 0 0; font-size: .82rem; color: rgba(231, 215, 223, .55); } /* Drupal renders
with a text field + submit. These rules style whatever input/button markup the block emits. */ .igs-search-overlay form { display: flex; gap: var(--sp-3); align-items: stretch; } .igs-search-overlay .form-item, .igs-search-overlay .js-form-item { margin: 0; flex: 1; min-width: 0; } .igs-search-overlay label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .igs-search-overlay input[type="search"], .igs-search-overlay input.form-search, .igs-search-overlay input.form-text { -webkit-appearance: none; appearance: none; width: 100%; padding: 18px 22px; font-family: var(--igs-serif); font-size: 1.3rem; color: var(--igs-ink, #2b1625); background: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-md); outline: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); transition: border-color .15s, box-shadow .15s; } .igs-search-overlay input[type="search"]::placeholder, .igs-search-overlay input.form-text::placeholder { color: var(--igs-muted, #8a7280); } .igs-search-overlay input[type="search"]:focus, .igs-search-overlay input.form-text:focus { border-color: var(--igs-gold-300, #e7c66b); box-shadow: 0 10px 40px rgba(0, 0, 0, .25), 0 0 0 4px rgba(231, 198, 107, .25); } .igs-search-overlay input[type="submit"], .igs-search-overlay button[type="submit"], .igs-search-overlay .search-form__submit { flex: 0 0 auto; padding: 0 26px; border: 0; border-radius: var(--r-md); background: var(--igs-gold-300, #e7c66b); color: var(--igs-maroon-900, #2b1625); font-family: var(--igs-sans); font-weight: 700; font-size: .95rem; cursor: pointer; transition: filter .15s, transform .05s; } .igs-search-overlay input[type="submit"]:hover, .igs-search-overlay button[type="submit"]:hover, .igs-search-overlay .search-form__submit:hover { filter: brightness(1.06); } .igs-search-overlay input[type="submit"]:active, .igs-search-overlay button[type="submit"]:active { transform: translateY(1px); } /* Close button — large, fixed top-right. */ .igs-search-close { position: fixed; top: clamp(16px, 4vw, 34px); right: clamp(16px, 4vw, 34px); z-index: 1001; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #f3e9ee; display: none; place-items: center; cursor: pointer; transition: background .15s, transform .2s ease; } body.search-open .igs-search-close { display: grid; } .igs-search-close:hover { background: rgba(255, 255, 255, .14); transform: rotate(90deg); } .igs-search-close:focus-visible { outline: 2px solid var(--igs-gold-300, #e7c66b); outline-offset: 2px; } /* -------------------------------------------------------------------------- Primary / secondary menu blocks Drupal menu blocks render . The template wraps the primary menu in