/* Only what theme.json cannot express. Tokens: design-system/jane-giles/MASTER.md */ /* Visible keyboard focus everywhere (3px sea teal). */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: 3px; } /* Tap targets >= 44px for buttons and navigation links. */ .wp-element-button, .wp-block-navigation-item__content { min-height: 44px; display: inline-flex; align-items: center; } /* Links stay readable on dark brand backgrounds. */ :where(.has-primary-dark-background-color, .has-accent-3-background-color, .jg-hero) a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--base); } /* Header phone: no underline, keeps brand colour. */ .jg-header-phone a { color: var(--wp--preset--color--primary-dark); text-decoration: none; } /* Header on small screens: keep menu + phone + CTA on one row. */ @media (max-width: 600px) { header .wp-element-button { padding: 0.6rem 1rem; font-size: 0.95rem; } } /* Hover transitions without layout shift. */ .wp-element-button, a { transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* Align submenu toggle ("Issues") with the other menu items. */ .wp-block-navigation .wp-block-navigation__container { align-items: center; } /* Navigation: submenu toggle sits on the same baseline as other items. */ .wp-block-navigation .wp-block-navigation-item { align-items: center; } .wp-block-navigation .wp-block-navigation-submenu__toggle { padding-top: 0; padding-bottom: 0; line-height: inherit; } /* ---------- Home ---------- */ /* Hero: background photo + brand gradient; text stays >= 4.5:1 on the dark side. */ .jg-hero { overflow: hidden; } .jg-hero__overlay { min-height: clamp(380px, 32vw, 480px); display: flex; flex-direction: column; justify-content: center; } /* ~ native aspect of the 1920x561 panorama: no upscaling blur */ .jg-hero__overlay > * { width: 100%; } /* flex + auto margins would shrink the content to 620px and centre it */ .jg-hero h1 { color: var(--wp--preset--color--base); } .jg-eyebrow { text-transform: uppercase; font-size: 0.85rem; margin: 0; } @media (max-width: 781px) { .jg-hero__overlay { background: rgba(15, 63, 115, 0.86) !important; } } /* Outline button variant on dark backgrounds. */ .jg-btn-on-dark .wp-block-button__link, .is-style-outline.jg-btn-on-dark .wp-block-button__link { color: var(--wp--preset--color--base); border: 2px solid var(--wp--preset--color--base); background: transparent; } .jg-btn-on-dark .wp-block-button__link:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--primary-dark); } /* Outline buttons on light backgrounds use brand blue. */ .wp-block-button.is-style-outline:not(.jg-btn-on-dark) .wp-block-button__link { color: var(--wp--preset--color--accent-3); border: 2px solid var(--wp--preset--color--accent-3); background: transparent; } .wp-block-button.is-style-outline:not(.jg-btn-on-dark) .wp-block-button__link:hover { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--base); } .jg-portrait img, .jg-book img { border-radius: 16px; box-shadow: var(--wp--preset--shadow--card); } /* Issue cards: whole card is one link (the heading link is stretched); hover lifts, no scale. */ .jg-card { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--wp--preset--shadow--card); transition: box-shadow 200ms ease; } .jg-card:hover, .jg-card:focus-within { box-shadow: var(--wp--preset--shadow--lifted); } .jg-card .wp-block-image { margin: 0; } .jg-card .wp-block-image img { width: 100%; display: block; } .jg-card__body { padding: 1.25rem 1.5rem 1.5rem; } .jg-card__body h3 { margin: 0 0 0.4rem; font-size: var(--wp--preset--font-size--large); } .jg-card__body p { margin: 0; color: var(--wp--preset--color--accent-4); } .jg-card h3 a { text-decoration: none; color: var(--wp--preset--color--primary-dark); } .jg-card h3 a::after { content: ""; position: absolute; inset: 0; } .jg-card h3 a:focus-visible { outline: none; } .jg-card:focus-within { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: 3px; } /* Steps */ .jg-step__num { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; margin: 0 0 0.75rem; background: var(--wp--preset--color--accent-5); color: var(--wp--preset--color--primary-dark); font-family: var(--wp--preset--font-family--lora); font-weight: 700; font-size: 1.25rem; } /* Testimonials */ .jg-testimonial { border-radius: 16px; padding: 1.75rem; box-shadow: var(--wp--preset--shadow--card); } .jg-quote { margin: 0; } .jg-quote cite { display: block; margin-top: 0.75rem; font-family: var(--wp--preset--font-family--open-sans); font-style: normal; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-4); } /* "More" links: comfortable tap target (>= 44px). */ .jg-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; } /* Compact cards on small screens (2 per row). */ @media (max-width: 600px) { .jg-card__body { padding: 0.9rem 1rem 1.1rem; } .jg-card__body h3 { font-size: 1.05rem; } .jg-card__body p { font-size: 0.9rem; } } /* Card grid: 4 → 3 → 2 columns (explicit, so phones never get 1 long column or 4 squeezed ones). */ .wp-block-group.jg-cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } @media (max-width: 1024px) { .wp-block-group.jg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 781px) { .wp-block-group.jg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.9rem !important; } } /* No block gap between card image and card body. */ .jg-card > * + * { margin-block-start: 0 !important; } /* Core sets nav links to display:block with higher specificity; centre the label vertically so links line up with the submenu