/* ============================================================================ IRONSIGHTS.CSS — Preserve Academy live stylesheet (sibling to the Shoppe's fieldcraft.css; all Academy CSS goes here) Enqueue handle: pa-ironsights → /ironsights.css (after preserve-academy) Editorial 2A palette. NO default Divi/WordPress blue anywhere. ============================================================================ */ :root{ --ir-ink:#1c1a17; --ir-ground:#16140f; --ir-oxblood:#8f2418; --ir-oxblood-deep:#741b12; --ir-gold:#c9a159; --ir-paper:#faf6ed; --ir-bone:#f4ede0; --ir-rule:#e3d8c2; --ir-quiet:#6f665c; --ir-disp:'Playfair Display',Georgia,serif; --ir-serif:'Cormorant Garamond',Georgia,serif; --ir-sans:'Montserrat',-apple-system,system-ui,sans-serif; --ir-mono:'JetBrains Mono',ui-monospace,monospace; } /* ── 1 · LINKS — never default-blue; oxblood with ink hover ───────────────── */ a, a:visited{ color:var(--ir-oxblood); transition:color .15s ease; } a:hover, a:focus{ color:var(--ir-ink); } /* On dark grounds, links/hover go gold (set via a wrapper or section class) */ .ir-on-dark a, .ir-on-dark a:visited{ color:var(--ir-paper); } .ir-on-dark a:hover, .ir-on-dark a:focus{ color:var(--ir-gold); } /* ── 2 · BUTTONS — Divi .et_pb_button + WooCommerce + core ────────────────── */ .et_pb_button, .et_pb_button:visited, a.button, button.button, input.button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wp-block-button__link, input[type="submit"]{ background:var(--ir-oxblood) !important; color:var(--ir-paper) !important; border:1px solid var(--ir-oxblood) !important; border-radius:0 !important; font-family:var(--ir-mono) !important; font-weight:600 !important; letter-spacing:.12em !important; text-transform:uppercase !important; transition:background .15s ease, border-color .15s ease, color .15s ease !important; } .et_pb_button:hover, .et_pb_button:focus, a.button:hover, button.button:hover, input.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .wp-block-button__link:hover, input[type="submit"]:hover{ background:var(--ir-ink) !important; border-color:var(--ir-ink) !important; color:var(--ir-paper) !important; } /* Divi adds an arrow on hover via :after — keep it paper, not blue */ .et_pb_button:after{ color:var(--ir-paper) !important; } /* Ghost / secondary button (oxblood outline on light) */ .ir-btn-ghost, .ir-btn-ghost:visited{ background:transparent !important; color:var(--ir-oxblood) !important; border:1px solid var(--ir-oxblood) !important; } .ir-btn-ghost:hover{ background:var(--ir-oxblood) !important; color:var(--ir-paper) !important; } /* ── 3 · FORM FIELDS (Gravity Forms / Woo / core) ─────────────────────────── */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], textarea, select, .gfield input, .gfield textarea, .gfield select{ border:1px solid var(--ir-rule) !important; border-radius:0 !important; background:var(--ir-paper) !important; color:var(--ir-ink) !important; font-family:var(--ir-sans) !important; outline:none; } input:focus, textarea:focus, select:focus, .gfield input:focus, .gfield textarea:focus, .gfield select:focus{ border-color:var(--ir-oxblood) !important; box-shadow:0 0 0 2px rgba(143,36,24,.12) !important; } ::selection{ background:var(--ir-gold); color:var(--ir-ink); } /* ── 4 · CONSISTENCY GUARDS — kill any stray default-blue ─────────────────── */ .et_pb_module a.more, .read-more a, .entry-content a{ color:var(--ir-oxblood); } .et_pb_module a.more:hover, .read-more a:hover, .entry-content a:hover{ color:var(--ir-ink); } /* ── 5 · ACADEMY-SPECIFIC OVERRIDES (add below as we build) ───────────────── */ /* Gravity Forms — buttons, required marks, validation, page steps */ .gform_wrapper .gform_button, .gform_wrapper button, .gform_wrapper input[type="submit"]{ background:var(--ir-oxblood) !important; color:var(--ir-paper) !important; border:1px solid var(--ir-oxblood) !important; border-radius:0 !important; font-family:var(--ir-mono) !important; letter-spacing:.12em !important; text-transform:uppercase !important; } .gform_wrapper .gform_button:hover, .gform_wrapper input[type="submit"]:hover{ background:var(--ir-ink) !important; border-color:var(--ir-ink) !important; } .gform_wrapper .gfield_required{ color:var(--ir-oxblood) !important; } .gform_wrapper .gfield_error, .gform_wrapper .validation_message, .gform_wrapper .gform_validation_errors{ border-color:var(--ir-oxblood) !important; color:var(--ir-oxblood) !important; } .gform_wrapper .gf_progressbar_percentage, .gform_wrapper .gf_step_active .gf_step_number{ background:var(--ir-oxblood) !important; color:var(--ir-paper) !important; } .gform_wrapper a{ color:var(--ir-oxblood) !important; } /* GravityView — table headers, search submit, A-Z filters */ .gv-table-view thead th, .gv-table-multiple-container thead th{ background:var(--ir-ink) !important; color:var(--ir-paper) !important; } .gv-search-button, .gv-widget-search input[type="submit"]{ background:var(--ir-oxblood) !important; color:var(--ir-paper) !important; border:0 !important; } .gv-az-filter a.gv-az-active, .gv-az-filter a:hover{ color:var(--ir-oxblood) !important; } /* WooCommerce — notices, price, account nav, stars, bookings */ .woocommerce-message, .woocommerce-info{ border-top-color:var(--ir-oxblood) !important; } .woocommerce-error{ border-top-color:var(--ir-oxblood) !important; } .woocommerce div.product p.price, .woocommerce ul.products li.product .price, .woocommerce .price{ color:var(--ir-ink) !important; } .woocommerce .star-rating span::before, .woocommerce p.stars a{ color:var(--ir-gold) !important; } .woocommerce-MyAccount-navigation li.is-active a{ color:var(--ir-oxblood) !important; border-color:var(--ir-oxblood) !important; } .wc-bookings-booking-form .block.bookable.available, .wc-bookings-date-picker .ui-state-active{ background:var(--ir-oxblood) !important; color:var(--ir-paper) !important; } /* Modern Events Calendar (MEC) — neutralise default skin-blue to oxblood/gold */ .mec-event-color, .mec-color, .mec-color-hover:hover, .mec-events-meta-group .mec-booking .mec-book-form-price, .mec-wrap .mec-totalcal-box .mec-totalcal-view span.mec-color{ color:var(--ir-oxblood) !important; } .mec-wrap .mec-event-article .mec-booking-button, .mec-wrap .mec-booking button[type="submit"], .mec-book-form-gateway-checkout button{ background:var(--ir-oxblood) !important; color:var(--ir-paper) !important; border:0 !important; border-radius:0 !important; } .mec-calendar .mec-calendar-day.mec-has-event-for-days, .mec-calendar .mec-selected-day, .mec-calendar dl dt.mec-today{ background:var(--ir-oxblood) !important; color:var(--ir-paper) !important; } .mec-wrap a{ color:var(--ir-oxblood) !important; } .mec-wrap a:hover{ color:var(--ir-ink) !important; } /* LoginPress note: the login page is styled in LoginPress settings (separate from this sheet). */ /* ── Academy header nav — dynamic WP menu via [pa_menu] (matches the mock) ── */ .ah .ah__nav{ position:relative; z-index:2; padding:8px 26px 20px; } .ah .ah__nav ul, .ah .ah__nav ul.ah__menu{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; flex-wrap:wrap; gap:34px; } .ah .ah__nav li{ margin:0; position:relative; } .ah .ah__nav a{ color:rgba(250,246,237,.82); text-decoration:none; font:600 12px/1 var(--ir-sans); letter-spacing:.16em; text-transform:uppercase; padding-bottom:7px; display:inline-block; position:relative; transition:color .18s ease; } .ah .ah__nav a:hover, .ah .ah__nav a:focus{ color:var(--ir-gold); } .ah .ah__nav .current-menu-item > a, .ah .ah__nav .current_page_item > a, .ah .ah__nav .current-menu-ancestor > a{ color:var(--ir-paper); } .ah .ah__nav .current-menu-item > a, .ah .ah__nav .current_page_item > a{ border-bottom:2px solid var(--ir-oxblood); } /* sub-menus → hover dropdowns (ink panel, gold hover) */ .ah .ah__nav .sub-menu{ display:block; position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:210px; margin:0; padding:8px 0; list-style:none; background:var(--ir-ground); border:1px solid rgba(250,246,237,.14); box-shadow:0 14px 32px rgba(0,0,0,.42); opacity:0; visibility:hidden; transition:opacity .15s ease; z-index:1000; } .ah .ah__nav li:hover > .sub-menu, .ah .ah__nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; } .ah .ah__nav .sub-menu li{ display:block; } .ah .ah__nav .sub-menu a{ display:block; padding:8px 20px; font-size:11px; letter-spacing:.1em; white-space:nowrap; } .ah .ah__nav .sub-menu a::after{ display:none !important; } /* parent items with children get a small gold caret */ .ah .ah__nav .menu-item-has-children > a::after{ content:"\25BE"; margin-left:6px; font-size:8px; color:var(--ir-gold); vertical-align:middle; } .ah .ah__nav .sub-menu .menu-item-has-children > a::after{ content:"\203A"; } /* ── Submenu dropdowns rendered BEHIND the page content — stacking-context fix ── v2 (2.1.7): the header is pasted as an IN-PAGE Divi Code module, NOT a Theme- Builder header, so the earlier `.et-l--header`-only lift never matched on the live site. Find the real Divi wrapper that CONTAINS the header (`.ah`) with :has() and lift it above the body, stop any wrapper from clipping the open dropdown, and demote every section that FOLLOWS the header so it can't paint over the menu. (Keeps the `.et-l--header` rule too, for the TB-header case.) */ .et-l--header, .et-l--header .et_pb_section, .et-l--header .et_pb_row, .et_pb_section:has(.ah), .et_pb_row:has(.ah), .et_pb_column:has(.ah), .et_pb_module:has(.ah), .et_pb_code:has(.ah){ position:relative !important; z-index:900 !important; overflow:visible !important; } .ah, .ah__nav, .et_pb_code_inner:has(.ah){ overflow:visible !important; } .ah .ah__nav .sub-menu{ z-index:901; } /* Sections after the header must not mint a higher stacking layer than the menu. */ .et_pb_section:has(.ah) ~ .et_pb_section{ position:relative; z-index:1; } /* ============================================================ ACADEMY FOOTER — NATIVE Divi modules, styled to match the Footer master's near-black info panel (Preserve Academy - Footer.html). All rules scoped to .pa-foot (section) / .pa-foot-sub (Email Optin) so nothing leaks site-wide. Built native (not a Code module) so it's styled by THIS stylesheet before first paint — no load-flash, and the Mailchimp optin actually submits. STRUCTURE ASSUMED (stable): Row 1 = 4×(1_4) Directions · Located-at · Hours · Subscribe(optin); Row 2 = 2×(1_2) Social-follow · Copyright. ============================================================ */ .pa-foot{ background:#14120f !important; padding:52px 32px 30px !important; } .pa-foot .et_pb_row{ max-width:1280px !important; width:90% !important; } /* Base body text in the info columns (override Divi's default grey). */ .pa-foot .et_pb_text, .pa-foot .et_pb_text_inner{ font-family:"Montserrat",sans-serif !important; font-size:13px; line-height:1.6; color:rgba(244,237,224,.7) !important; } .pa-foot .et_pb_text_inner > div, .pa-foot .et_pb_text_inner > p{ margin:0 0 4px; } /* Column dividers (vertical hairlines between the 4 info columns). */ .pa-foot .et_pb_column_1_4{ padding:0 36px !important; border-left:1px solid rgba(244,237,224,.14); } .pa-foot .et_pb_column_1_4:first-of-type{ padding-left:0 !important; border-left:0; } .pa-foot .et_pb_column_1_4:last-of-type{ padding-right:0 !important; } /* Eyebrow — first line of each info column ("Preserve Academy" / "Hours"). */ .pa-foot .et_pb_column_1_4 .et_pb_text_inner > div:first-child{ font-family:"Montserrat",sans-serif; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#faf6ed !important; border-bottom:1px solid rgba(201,161,89,.4); padding-bottom:12px; margin-bottom:18px; } /* Gold mini-labels: Directions(col1) divs 2 & 4 ("Driving Directions","Phone"); Located(col2) div 2 ("Located At"). */ .pa-foot .et_pb_column_1_4:nth-of-type(1) .et_pb_text_inner > div:nth-child(2), .pa-foot .et_pb_column_1_4:nth-of-type(1) .et_pb_text_inner > div:nth-child(4), .pa-foot .et_pb_column_1_4:nth-of-type(2) .et_pb_text_inner > div:nth-child(2){ font-size:12px; font-weight:700; letter-spacing:.04em; color:#c9a159 !important; margin:2px 0 6px; } /* breathing room under the address block before "Phone" (col1 div 3) */ .pa-foot .et_pb_column_1_4:nth-of-type(1) .et_pb_text_inner > div:nth-child(3){ margin-bottom:18px; } /* Hours rows (col3 div 2 wrapper) — looser leading, paper day-names. */ .pa-foot .et_pb_column_1_4:nth-of-type(3) .et_pb_text_inner > div:nth-child(2){ line-height:2.05; } .pa-foot .et_pb_text_inner b, .pa-foot .et_pb_text_inner strong{ color:#faf6ed !important; font-weight:600; } /* Links (phone, etc.) — muted paper, gold on hover/focus (never blue). */ .pa-foot a{ color:rgba(244,237,224,.7) !important; text-decoration:none; transition:color .18s ease; } .pa-foot a:hover, .pa-foot a:focus{ color:#c9a159 !important; } /* ---- Subscribe (Divi Email Optin · .pa-foot-sub) ---- */ /* Kill the module's default filled box + padding so it blends into the dark column like the other three (Divi optins ship with a colored background). */ .pa-foot-sub, .pa-foot-sub.et_pb_newsletter, .pa-foot-sub .et_pb_newsletter_form, .pa-foot .et_pb_column_1_4 .et_pb_signup{ background:transparent !important; background-color:transparent !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } .pa-foot-sub .et_pb_newsletter_description{ margin:0 0 0 !important; padding:0 !important; } .pa-foot-sub .et_pb_module_header, .pa-foot-sub .et_pb_newsletter_description h1, .pa-foot-sub .et_pb_newsletter_description h2, .pa-foot-sub .et_pb_newsletter_description h3, .pa-foot-sub .et_pb_newsletter_description h4{ font-family:"Montserrat",sans-serif !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:#faf6ed !important; border-bottom:1px solid rgba(201,161,89,.4); padding-bottom:12px; margin:0 0 18px !important; line-height:1.3 !important; } .pa-foot-sub .et_pb_newsletter_form p{ margin:0 !important; } .pa-foot-sub input{ box-sizing:border-box; width:100% !important; padding:10px 2px !important; border:0 !important; border-bottom:1px solid rgba(244,237,224,.32) !important; background:transparent !important; border-radius:0 !important; box-shadow:none !important; font-family:"Cormorant Garamond",Georgia,serif !important; font-style:italic; font-size:16px !important; color:#faf6ed !important; margin-bottom:16px !important; } .pa-foot-sub input::placeholder{ color:rgba(244,237,224,.55) !important; font-style:italic; } .pa-foot-sub .et_pb_newsletter_button, .pa-foot-sub .et_pb_newsletter_button.et_pb_button{ box-sizing:border-box; width:100% !important; display:block !important; text-align:center; background:transparent !important; color:#faf6ed !important; border:1px solid #8f2418 !important; border-radius:0 !important; padding:13px !important; font-family:"Montserrat",sans-serif !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.2em !important; text-transform:uppercase !important; cursor:pointer; transition:background .2s ease,color .2s ease; } .pa-foot-sub .et_pb_newsletter_button:hover, .pa-foot-sub .et_pb_newsletter_button:focus{ background:#8f2418 !important; color:#faf6ed !important; padding:13px !important; } .pa-foot-sub .et_pb_newsletter_button:after{ display:none !important; } /* kill Divi's hover arrow + padding shift */ /* ---- Bottom bar: Social-follow + Copyright (Row 2) ---- */ .pa-foot .et_pb_row:nth-of-type(2){ border-top:1px solid rgba(244,237,224,.12); padding-top:22px !important; margin-top:8px; } /* Round dark social glyphs, oxblood on hover — override Divi's per-network colors. */ .pa-foot .et_pb_social_media_follow li a.icon, .pa-foot .et_social_icons_follow .icon{ background:#221e18 !important; border:1px solid rgba(244,237,224,.16) !important; border-radius:50% !important; } .pa-foot .et_pb_social_media_follow li a.icon:before{ color:rgba(244,237,224,.82) !important; } .pa-foot .et_pb_social_media_follow li a.icon:hover, .pa-foot .et_pb_social_media_follow li a.icon:focus{ background:#8f2418 !important; border-color:#8f2418 !important; } .pa-foot .et_pb_social_media_follow li a.icon:hover:before, .pa-foot .et_pb_social_media_follow li a.icon:focus:before{ color:#faf6ed !important; } /* Copyright — right-aligned, muted paper. */ .pa-foot .et_pb_row:nth-of-type(2) .et_pb_column_1_2:last-of-type{ text-align:right; } .pa-foot .et_pb_row:nth-of-type(2) .et_pb_column_1_2:last-of-type .et_pb_text_inner{ font-size:12px; color:rgba(244,237,224,.55) !important; } /* Mobile: drop the column dividers when Divi stacks them. */ @media (max-width:980px){ .pa-foot .et_pb_column_1_4{ border-left:0 !important; padding:0 0 26px !important; } .pa-foot .et_pb_row:nth-of-type(2) .et_pb_column_1_2:last-of-type{ text-align:left; } } /* ============================================================ ACADEMY HEADER — NATIVE Divi modules, styled to match the Header Code-module master (Academy Header - Code Module.html). Sections carry NO class, so we scope with :has() off the module classes the user DID set: .pa-logo (Image) → top band section; .pa-head-nav (Menu module) → nav section. .pa-ann-soc = announcement socials. Built native = no load-flash + bulletproof submenu stacking. STRUCTURE: Section 1 = Row1(1_2,1_2 announcement Text + Social) + Row2(4_4 centered logo Image); Section 2 = centered Menu module (sticky top). ============================================================ */ /* ---- Top band (announcement + logo) — dark gradient + 3px oxblood→gold hairline ---- */ .et_pb_section:has(.pa-logo){ position:relative; padding:0 !important; background:#16140f !important; background-image:linear-gradient(123deg,#16140f 0%,#1f1b16 72%,#2a221c 100%) !important; } .et_pb_section:has(.pa-logo)::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:6; background:linear-gradient(90deg,#8f2418,#c9a159); } .et_pb_section:has(.pa-logo) .et_pb_row{ width:90% !important; max-width:1280px !important; } /* announcement row (Row 1): hairline under, mono uppercase text left, socials right */ .et_pb_section:has(.pa-logo) .et_pb_row:nth-of-type(1){ border-bottom:1px solid rgba(250,246,237,.16); padding:9px 0 !important; } .et_pb_section:has(.pa-logo) .et_pb_row:nth-of-type(1) .et_pb_column{ display:flex; align-items:center; margin-bottom:0 !important; } .et_pb_section:has(.pa-logo) .et_pb_row:nth-of-type(1) .et_pb_column:last-of-type{ justify-content:flex-end; } .et_pb_section:has(.pa-logo) .et_pb_row:nth-of-type(1) .et_pb_text, .et_pb_section:has(.pa-logo) .et_pb_row:nth-of-type(1) .et_pb_text_inner{ font-family:"JetBrains Mono",monospace !important; font-size:10px !important; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(250,246,237,.62) !important; } .et_pb_section:has(.pa-logo) .et_pb_row:nth-of-type(1) .et_pb_text p{ margin:0 !important; } /* announcement socials — small gold-outline circles, oxblood on hover. NB: module_class lands ON the