/* Theme Name: PAE (Blocksy Child) Theme URI: https://www.pak-ausengineersassociation.org Description: Child theme for the PAK-AUS Engineers Association. Carries the whole PAE design system, so the site looks right regardless of Customizer tinkering. Safe to update Blocksy at any time. Author: PAK-AUS Engineers Association Template: blocksy Version: 1.0.0 License: GNU General Public License v2 or later Text Domain: pae-blocksy-child */ /* ========================================================================== 1. Design tokens ========================================================================== */ :root { --pae-ink: #0f1c2e; --pae-ink-2: #5a6b80; --pae-ink-3: #5f7188; /* 5.0:1 on white — the lightest grey that still passes WCAG AA */ --pae-green: #0f7a4a; --pae-green-d: #0a5c37; --pae-green-l: rgba(15, 122, 74, .09); --pae-navy: #0b2545; --pae-navy-d: #08172c; --pae-gold: #e0a020; /* decorative only: fills, dots, gradients */ --pae-gold-ink: #8a610d; /* gold used as TEXT on a light background (5.5:1) */ --pae-gold-l: #ffd97a; /* gold used as text/outline on a DARK background */ --pae-line: #e8edf3; --pae-bg: #ffffff; --pae-bg-2: #f5f8fb; --pae-radius: 17px; --pae-radius-sm: 11px; --pae-radius-lg: 26px; --pae-wrap: 1200px; --pae-gutter: 32px; --pae-shadow: 0 16px 40px rgba(11, 37, 69, .10); --pae-shadow-lg: 0 26px 60px rgba(0, 0, 0, .42); --pae-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pae-section-y: 92px; } /* ========================================================================== 2. Base ========================================================================== */ body { font-family: var(--pae-font); color: var(--pae-ink); background: var(--pae-bg); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .pae-hero__title { font-family: var(--pae-font); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--pae-ink); } a { color: var(--pae-green); } a:hover { color: var(--pae-green-d); } img { max-width: 100%; height: auto; } /* Screen-reader-only text (used on the LinkedIn links) */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Visible focus ring — keyboard users and WCAG 2.4.7 */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .pae-btn:focus-visible { outline: 3px solid var(--pae-gold-ink); outline-offset: 3px; border-radius: 4px; } /* the same ring, inverted, where the background is dark */ .pae-hero :focus-visible, .pae-pagehead :focus-visible, .pae-cta :focus-visible, .ct-footer :focus-visible { outline-color: var(--pae-gold-l); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Every PAE component sizes itself border-box. Blocksy already sets this globally, but stating it here means the design cannot break if the parent theme, or a plugin, ever changes that. */ [class*="pae-"], [class*="pae-"]::before, [class*="pae-"]::after { box-sizing: border-box; } /* Let our full-bleed sections escape Blocksy's content container. `100vw` includes the width of the vertical scrollbar, so on any browser with classic (non-overlay) scrollbars this trick pushes ~15px of content past the right edge and creates a horizontal scroll. The guard on is what stops that; it is applied to rather than so Blocksy's sticky header keeps working. */ html { overflow-x: hidden; } .pae-hero, .pae-section, .pae-pagehead { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .pae-wrap { max-width: var(--pae-wrap); margin-inline: auto; padding-inline: var(--pae-gutter); width: 100%; } .pae-section { padding-block: var(--pae-section-y); } .pae-section--tint { background: var(--pae-bg-2); } .pae-section--flush { padding-top: 0; } /* ========================================================================== 3. Small components ========================================================================== */ .pae-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--pae-green-l); color: var(--pae-green); font-size: 12.5px; font-weight: 700; padding: 7px 15px; border-radius: 100px; letter-spacing: .02em; margin-bottom: 16px; } .pae-pill--dark { background: rgba(255, 255, 255, .14); color: #fff; } .pae-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pae-gold); } .pae-btn, .wp-block-button.pae-btn > .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--pae-green); color: #fff !important; padding: 13px 24px; border-radius: var(--pae-radius-sm); font-size: 14.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-decoration: none; border: 1.5px solid transparent; box-shadow: 0 6px 18px rgba(15, 122, 74, .26); transition: background .18s, transform .18s, box-shadow .18s; } .pae-btn:hover { background: var(--pae-green-d); color: #fff !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 122, 74, .32); } .pae-btn--light { background: #fff; color: var(--pae-navy) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); } .pae-btn--light:hover { background: #eef3f8; color: var(--pae-navy) !important; } .pae-btn--outline { background: transparent; color: var(--pae-ink) !important; border-color: var(--pae-line); box-shadow: none; } .pae-btn--outline:hover { background: #fff; color: var(--pae-ink) !important; border-color: var(--pae-ink-2); } .pae-btn--outline-light { background: rgba(255, 255, 255, .12); color: #fff !important; border-color: rgba(255, 255, 255, .28); box-shadow: none; } .pae-btn--outline-light:hover { background: rgba(255, 255, 255, .2); color: #fff !important; } .pae-acts { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 26px; } .pae-acts--center { justify-content: center; } .pae-acts--start { justify-content: flex-start; margin-top: 38px; } .pae-lead { font-size: 17.5px; color: var(--pae-ink-2); line-height: 1.7; } .pae-muted { color: var(--pae-ink-3); font-size: 14.5px; } .pae-shead { max-width: 660px; margin-bottom: 52px; } .pae-shead h2 { font-size: clamp(29px, 3.5vw, 42px); margin: 0 0 16px; } .pae-shead p { color: var(--pae-ink-2); font-size: 17.5px; margin: 0; } .pae-shead--mid { margin-inline: auto; text-align: center; } /* ========================================================================== 4. Hero ========================================================================== */ .pae-hero { position: relative; background: linear-gradient(155deg, #0b2545 0%, #0d3a2c 58%, #0f7a4a 130%); color: #fff; overflow: hidden; isolation: isolate; } .pae-hero__glow, .pae-hero__glow2 { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; } .pae-hero__glow { width: 620px; height: 620px; top: -220px; right: -120px; background: radial-gradient(circle, rgba(224, 160, 32, .30), transparent 66%); } .pae-hero__glow2 { width: 520px; height: 520px; bottom: -260px; left: -160px; background: radial-gradient(circle, rgba(15, 122, 74, .5), transparent 68%); } .pae-hero__inner { position: relative; z-index: 2; padding-block: 88px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; } .pae-hero__title { font-size: clamp(34px, 4.6vw, 56px); color: #fff; margin: 20px 0 0; } .pae-hero__title em { font-style: normal; background: linear-gradient(92deg, var(--pae-gold-l), var(--pae-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .pae-hero__lead { font-size: 18px; color: #e2ecf5; /* 4.5:1 even against the lightest end of the hero gradient */ margin: 20px 0 0; max-width: 520px; line-height: 1.7; } .pae-hero__art { position: relative; } .pae-hero__art img { border-radius: 20px; box-shadow: var(--pae-shadow-lg); display: block; width: 100%; } .pae-hero__float { position: absolute; bottom: -26px; left: -26px; background: #fff; color: var(--pae-ink); border-radius: 15px; padding: 16px 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, .26); display: flex; gap: 14px; align-items: center; } .pae-hero__float b { display: block; font-size: 23px; font-weight: 800; line-height: 1; color: var(--pae-green); } .pae-hero__float span { font-size: 12px; color: var(--pae-ink-2); font-weight: 600; } .pae-hero__sep { width: 1px; height: 34px; background: var(--pae-line); } /* Interior page heads reuse the hero gradient, quieter */ .pae-pagehead { background: linear-gradient(150deg, #0b2545 0%, #0d3a2c 100%); color: #fff; padding-block: 68px; } .pae-pagehead h1 { color: #fff; font-size: clamp(31px, 4vw, 46px); margin: 0; } .pae-pagehead .pae-lead { color: #c3d2e2; margin: 18px 0 0; max-width: 660px; } /* ========================================================================== 5. Grids and cards ========================================================================== */ .pae-grid { display: grid; gap: 26px; } .pae-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pae-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pae-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .pae-fcard { background: #fff; border: 1px solid var(--pae-line); border-radius: var(--pae-radius); padding: 30px; transition: box-shadow .2s, transform .2s, border-color .2s; } .pae-fcard:hover { border-color: transparent; box-shadow: var(--pae-shadow); transform: translateY(-3px); } .pae-fcard h3 { font-size: 18px; margin: 0 0 9px; } .pae-fcard p { margin: 0 0 0; color: var(--pae-ink-2); font-size: 14.5px; line-height: 1.65; } .pae-fcard p + p { margin-top: 14px; } .pae-fcard__ic { width: 46px; height: 46px; border-radius: 13px; background: var(--pae-green-l); color: var(--pae-green); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .pae-fcard__ic svg { width: 23px; height: 23px; } /* Leadership */ .pae-tcard { background: #fff; border: 1px solid var(--pae-line); border-radius: var(--pae-radius); padding: 26px; text-align: center; transition: box-shadow .2s, transform .2s; } .pae-tcard:hover { box-shadow: var(--pae-shadow); transform: translateY(-3px); } .pae-tcard__ph, .pae-tcard__init { width: 88px; height: 88px; border-radius: 24px; margin: 0 auto 15px; } .pae-tcard__ph { display: block; object-fit: cover; object-position: center top; background: var(--pae-bg-2); } .pae-tcard__init { display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--pae-green), var(--pae-navy)); color: #fff; font-size: 26px; font-weight: 800; letter-spacing: .02em; } .pae-tcard h3 { font-size: 16px; margin: 0; } .pae-tcard__role { font-size: 13px; color: var(--pae-green); font-weight: 700; margin: 6px 0 0; } .pae-tcard__link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; } /* Split section */ .pae-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .pae-split--narrow { gap: 56px; } .pae-split__media { margin: 0; } .pae-split__media img { border-radius: 19px; box-shadow: 0 18px 44px rgba(11, 37, 69, .14); width: 100%; display: block; } .pae-split__body h2 { font-size: clamp(27px, 3.2vw, 38px); margin: 0 0 16px; } .pae-vlist { list-style: none; margin: 26px 0 0; padding: 0; } .pae-vlist li { display: flex; gap: 13px; align-items: flex-start; padding: 11px 0; font-size: 15.5px; color: var(--pae-ink-2); } .pae-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pae-green-l); color: var(--pae-green); display: flex; align-items: center; justify-content: center; margin-top: 3px; } .pae-tick svg { width: 12px; height: 12px; } .pae-vlist strong { color: var(--pae-ink); font-weight: 700; } /* ========================================================================== 6. Prose (article bodies and simple pages) ========================================================================== */ .pae-prose { max-width: 760px; margin-inline: auto; } .pae-wrap > .pae-prose { margin-inline: auto; } .pae-prose > h2 { font-size: 27px; margin: 44px 0 14px; } .pae-prose > h3 { font-size: 21px; margin: 32px 0 10px; } .pae-prose > h2:first-child, .pae-prose > h3:first-child { margin-top: 0; } .pae-prose p { margin: 0 0 20px; font-size: 17px; line-height: 1.75; color: #24354a; } .pae-prose a { text-decoration: underline; text-underline-offset: 2px; } .pae-olist { list-style: none; margin: 0 0 24px; padding: 0; } .pae-olist li { position: relative; padding: 10px 0 10px 30px; font-size: 16.5px; line-height: 1.7; color: #24354a; } .pae-olist li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 9px; height: 9px; background: var(--pae-green); border-radius: 2px; transform: rotate(45deg); } .pae-olist--tight li { padding-block: 5px; font-size: 16px; } .pae-olist strong { color: var(--pae-ink); } .pae-linklist { list-style: none; margin: 0 0 24px; padding: 0; } .pae-linklist li { padding: 14px 18px; border: 1px solid var(--pae-line); border-radius: var(--pae-radius-sm); margin-bottom: 10px; font-size: 16px; } .pae-callout { background: var(--pae-bg-2); border: 1px solid var(--pae-line); border-left: 4px solid var(--pae-green); border-radius: var(--pae-radius-sm); padding: 24px 26px; margin: 0 0 26px; } .pae-callout h2, .pae-callout h3 { margin: 0 0 12px; font-size: 19px; } .pae-callout p { margin: 0; } .pae-deflist { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; } .pae-deflist dt { font-weight: 700; color: var(--pae-ink); font-size: 14.5px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; } .pae-deflist dd { margin: 0; color: #24354a; } .pae-quote { border: 0; border-left: 4px solid var(--pae-gold); background: #fffaf0; border-radius: 0 var(--pae-radius-sm) var(--pae-radius-sm) 0; margin: 0 0 24px; padding: 26px 30px; } .pae-quote p { font-size: 18px; line-height: 1.7; margin: 0 0 14px; } .pae-quote cite { font-style: normal; font-size: 14.5px; color: var(--pae-ink-2); } .pae-note { background: #fff8e6; border: 1px dashed #e3c473; border-radius: var(--pae-radius-sm); padding: 18px 22px; margin: 30px auto; max-width: 760px; font-size: 14.5px; line-height: 1.65; color: #6b5418; } .pae-note strong { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; margin-bottom: 6px; } .pae-figure { margin: 0 0 26px; } .pae-figure img { border-radius: var(--pae-radius-sm); width: 100%; display: block; } .pae-figure figcaption { font-size: 13.5px; color: var(--pae-ink-2); margin-top: 10px; line-height: 1.55; } .pae-figure--wide { max-width: none; } .pae-figrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .pae-contactlist { list-style: none; margin: 24px 0 0; padding: 0; } .pae-contactlist li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--pae-line); font-size: 16px; } .pae-contactlist li > span:first-child { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--pae-ink-3); padding-top: 4px; } /* ========================================================================== 7. Query loop (news / stories cards) ========================================================================== */ .pae-query .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; list-style: none; margin: 0; padding: 0; } .pae-query .wp-block-post-template > li { background: #fff; border: 1px solid var(--pae-line); border-radius: var(--pae-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; } .pae-query .wp-block-post-template > li:hover { box-shadow: 0 18px 44px rgba(11, 37, 69, .12); transform: translateY(-4px); } .pae-card__thumb { margin: 0 !important; } .pae-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .pae-query .wp-block-post-template > li:hover .pae-card__thumb img { transform: scale(1.05); } /* Posts with no featured image still need a top edge, otherwise the cards in a row start at different heights and the grid looks accidental. Give them a branded panel the same shape as a thumbnail. */ .pae-query .wp-block-post-template > li > :first-child { margin-top: 0; } @supports selector(:has(*)) { .pae-query .wp-block-post-template > li:not(:has(.pae-card__thumb))::before { content: ""; display: block; aspect-ratio: 16 / 10; background: radial-gradient(circle at 78% 18%, rgba(224, 160, 32, .30), transparent 58%), linear-gradient(140deg, var(--pae-navy) 0%, #0d3a2c 62%, var(--pae-green) 130%); } /* the PAE monogram, drawn in CSS so it needs no extra image request */ .pae-query .wp-block-post-template > li:not(:has(.pae-card__thumb)) { position: relative; } .pae-query .wp-block-post-template > li:not(:has(.pae-card__thumb))::after { content: "PAE"; position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; letter-spacing: .22em; color: rgba(255, 255, 255, .40); pointer-events: none; } } .pae-card__date { font-size: 11.5px; font-weight: 700; color: var(--pae-gold-ink); letter-spacing: .06em; text-transform: uppercase; margin: 24px 24px 0; } .pae-card__title { font-size: 18.5px; margin: 10px 24px; line-height: 1.3; } .pae-card__title a { color: var(--pae-ink); text-decoration: none; } .pae-card__title a:hover { color: var(--pae-green); } .pae-card__excerpt { font-size: 14.5px; color: var(--pae-ink-2); margin: 0 24px 24px; flex: 1; line-height: 1.62; } .pae-card__excerpt .wp-block-post-excerpt__more-link { display: block; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--pae-green); text-decoration: none; } .pae-card__excerpt .wp-block-post-excerpt__more-link:hover { color: var(--pae-green-d); } .pae-card__excerpt .wp-block-post-excerpt__more-link::after { content: " \2192"; } .pae-pagination { margin-top: 44px; gap: 8px; } .pae-pagination a, .pae-pagination .current { padding: 8px 14px; border-radius: 9px; border: 1px solid var(--pae-line); text-decoration: none; font-weight: 600; font-size: 14.5px; } .pae-pagination .current { background: var(--pae-green); color: #fff; border-color: var(--pae-green); } /* ========================================================================== 8. Gallery + lightbox ========================================================================== */ .pae-gallery.wp-block-gallery { gap: 18px; } .pae-gallery.wp-block-gallery figure.wp-block-image img { border-radius: var(--pae-radius-sm); } /* ========================================================================== 9. Call to action band ========================================================================== */ .pae-cta { background: linear-gradient(140deg, var(--pae-navy), #0d3a2c); border-radius: var(--pae-radius-lg); padding: 66px 56px; color: #fff; position: relative; overflow: hidden; text-align: center; } .pae-cta__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; top: -240px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(224, 160, 32, .26), transparent 66%); pointer-events: none; } .pae-cta h2 { font-size: clamp(28px, 3.4vw, 40px); color: #fff; position: relative; margin: 0; } .pae-cta p { color: #c3d2e2; font-size: 17.5px; max-width: 560px; margin: 18px auto 0; position: relative; } .pae-cta .pae-acts { position: relative; } /* ========================================================================== 10. Forms (Fluent Forms, and any plain form) ========================================================================== */ .pae-formwrap { background: #fff; border: 1px solid var(--pae-line); border-radius: var(--pae-radius); padding: 34px; box-shadow: var(--pae-shadow); max-width: 760px; margin-inline: auto; } .pae-formwrap h2 { font-size: 24px; margin: 0 0 20px; } .pae-formwrap .ff-el-group { margin-bottom: 18px; } .pae-formwrap .ff-el-input--label label { font-size: 14px; font-weight: 700; color: var(--pae-ink); margin-bottom: 7px; display: block; } .pae-formwrap input[type="text"], .pae-formwrap input[type="email"], .pae-formwrap input[type="tel"], .pae-formwrap input[type="url"], .pae-formwrap input[type="number"], .pae-formwrap select, .pae-formwrap textarea { box-sizing: border-box; width: 100%; max-width: 100%; font-family: inherit; font-size: 15.5px; color: var(--pae-ink); background: #fff; border: 1.5px solid var(--pae-line); border-radius: var(--pae-radius-sm); padding: 12px 14px; transition: border-color .16s, box-shadow .16s; } .pae-formwrap input:focus, .pae-formwrap select:focus, .pae-formwrap textarea:focus { border-color: var(--pae-green); box-shadow: 0 0 0 3px var(--pae-green-l); outline: none; } .pae-formwrap textarea { min-height: 150px; resize: vertical; } .pae-formwrap .ff-el-form-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin-bottom: 8px; } .pae-formwrap .ff-btn-submit, .pae-formwrap button[type="submit"], .pae-formwrap input[type="submit"] { background: var(--pae-green) !important; color: #fff !important; border: 0 !important; border-radius: var(--pae-radius-sm) !important; padding: 14px 30px !important; font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 122, 74, .26); transition: background .18s, transform .18s; } .pae-formwrap .ff-btn-submit:hover, .pae-formwrap button[type="submit"]:hover { background: var(--pae-green-d) !important; transform: translateY(-1px); } .pae-formwrap .ff-el-is-error input, .pae-formwrap .ff-el-is-error textarea { border-color: #d64545; } .pae-formwrap .error, .pae-formwrap .text-danger { color: #d64545; font-size: 13.5px; } .pae-formwrap .ff-message-success { background: var(--pae-green-l); border: 1px solid rgba(15,122,74,.3); color: var(--pae-green-d); border-radius: var(--pae-radius-sm); padding: 18px 20px; } /* --- Contact Form 7 specifics --- */ .pae-formwrap .wpcf7-form p { margin: 0; } .pae-formwrap .wpcf7-form-control-wrap { display: block; } .pae-formintro { color: var(--pae-ink-2); font-size: 15.5px; margin: 0 0 24px !important; } .pae-optional { font-weight: 500; color: var(--pae-ink-3); font-size: 12.5px; } .pae-fieldset-title { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pae-ink-3); margin: 30px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--pae-line); } .pae-fieldset-title:first-of-type { margin-top: 0; } .pae-formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .pae-formwrap .wpcf7-list-item { display: block; margin: 0 0 8px; } .pae-formwrap .wpcf7-list-item label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 500; cursor: pointer; } .pae-formwrap input[type="checkbox"], .pae-formwrap input[type="radio"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pae-green); flex: none; } .pae-formwrap .wpcf7-not-valid-tip { color: #c62828; font-size: 13.5px; font-weight: 600; margin-top: 6px; display: block; } .pae-formwrap .wpcf7-not-valid { border-color: #c62828 !important; } .pae-formwrap .wpcf7-response-output { margin: 22px 0 0 !important; padding: 16px 18px !important; border-radius: var(--pae-radius-sm) !important; border-width: 1px !important; font-size: 15px; } .pae-formwrap .wpcf7 form.sent .wpcf7-response-output { background: var(--pae-green-l); border-color: rgba(15, 122, 74, .35) !important; color: var(--pae-green-d); } .pae-formwrap .wpcf7 form.invalid .wpcf7-response-output, .pae-formwrap .wpcf7 form.failed .wpcf7-response-output { background: #fdecea; border-color: #f0b3ad !important; color: #a02a20; } .pae-formwrap .wpcf7-spinner { margin: 0 0 0 12px; } /* ========================================================================== 11. Blocksy header / footer alignment ========================================================================== */ .ct-header [data-row] { --header-height: 76px; } .site-logo-container img, .ct-header .site-logo-container img { max-height: 46px; width: auto; } /* Header menu */ .ct-header .menu > li > a { font-weight: 600; font-size: 14.5px; } /* Blocksy's default page container padding fights our full-bleed sections */ .pae-fullwidth .entry-content > .alignfull { margin-inline: 0; } /* Footer */ .ct-footer { background: var(--pae-navy-d); color: #8fa3ba; } .ct-footer a { color: #8fa3ba; } .ct-footer a:hover { color: #fff; } .ct-footer .widget-title, .ct-footer h3 { color: #fff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; } /* Skip link */ .skip-link:focus { background: #fff; color: var(--pae-ink); padding: 12px 18px; z-index: 100000; } /* ========================================================================== 12. Responsive — tablet then phone ========================================================================== */ @media (max-width: 1100px) { :root { --pae-section-y: 72px; --pae-gutter: 26px; } .pae-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pae-hero__inner { gap: 40px; } } /* Tablets (incl. iPad portrait at 768px and iPad Air at 820px) */ @media (max-width: 900px) { .pae-hero__inner { grid-template-columns: 1fr; padding-block: 64px 74px; } .pae-hero__art { order: -1; max-width: 560px; } .pae-hero__float { left: auto; right: -10px; bottom: -22px; } .pae-hero__lead { max-width: none; } .pae-split { grid-template-columns: 1fr; gap: 36px; } .pae-split__media { order: -1; } .pae-query .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pae-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pae-cta { padding: 52px 34px; border-radius: 20px; } .pae-shead { margin-bottom: 40px; } .pae-pagehead { padding-block: 54px; } } /* Large phones and small tablets */ @media (max-width: 680px) { :root { --pae-section-y: 56px; --pae-gutter: 20px; } body { font-size: 15.5px; } .pae-grid--2, .pae-grid--3, .pae-query .wp-block-post-template { grid-template-columns: 1fr; } /* Leadership cards stay two-up on a phone — eight full-width cards makes the page needlessly long, and these cards are compact enough to pair. */ .pae-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pae-grid--4 .pae-tcard { padding: 20px 12px; } .pae-grid--4 .pae-tcard__ph, .pae-grid--4 .pae-tcard__init { width: 72px; height: 72px; border-radius: 20px; font-size: 22px; } .pae-grid--4 .pae-tcard h3 { font-size: 15px; } .pae-grid--4 .pae-tcard__role { font-size: 12px; } /* but the objective cards, which carry a paragraph each, stay single column */ .pae-section .pae-grid--4:has(.pae-fcard) { grid-template-columns: 1fr; gap: 20px; } .pae-hero__inner { padding-block: 48px 60px; } .pae-hero__art { margin-inline: auto; } .pae-hero__float { position: static; margin: 16px auto 0; width: max-content; box-shadow: 0 10px 26px rgba(0, 0, 0, .18); } .pae-hero__lead { font-size: 16.5px; } .pae-fcard { padding: 24px; } .pae-formwrap { padding: 22px 18px; } .pae-cta { padding: 40px 22px; } .pae-acts { gap: 10px; } .pae-btn { width: 100%; } .pae-acts--start .pae-btn { width: auto; } .pae-figrow { grid-template-columns: 1fr; } .pae-deflist { grid-template-columns: 1fr; gap: 2px 0; } .pae-deflist dd { margin-bottom: 12px; } .pae-contactlist li { grid-template-columns: 1fr; gap: 2px; } .pae-prose p { font-size: 16.5px; } .pae-quote { padding: 20px 20px; } .pae-note { margin-inline: 0; } .pae-formrow { grid-template-columns: 1fr; gap: 0; } } /* Very small phones */ @media (max-width: 380px) { :root { --pae-gutter: 16px; } .pae-hero__float { flex-direction: column; gap: 8px; text-align: center; } .pae-hero__sep { width: 34px; height: 1px; } } /* Print */ @media print { .pae-hero__glow, .pae-hero__glow2, .pae-cta__glow, .ct-header, .ct-footer { display: none; } .pae-hero, .pae-pagehead, .pae-cta { background: none !important; color: #000 !important; } .pae-hero__title, .pae-pagehead h1 { color: #000 !important; } }