/* Owen Lewis Design — theme stylesheet.
Everything expressible in theme.json lives there; this file carries the
layout the original 2014 design relied on: the fixed photographic
background, the grey content overlay, the nav buttons straddling the
header edge, the compact fixed header, portfolio layouts, pricing columns
and forms. Selectors are class-based and shallow so blocks stay overridable. */
:root {
--ol-line: #dde2e6;
--ol-slate-dark: #1f3242;
--ol-pale: #c9d3dc;
--ol-slate: #2f495e;
--ol-slate-light: #416582;
--ol-olive: #983030; /* the accent is the logo red */
--ol-red: var(--ol-olive); /* alias: the accent IS the logo red */
--ol-red-dark: #7d2727;
--ol-red-light: #e7a7a7; /* AA on the slate bands */
--ol-olive-text: #7d2727; /* accent dark enough for small text on white (AA) */
/* The original olive, back for embellishment: bullets, ticks, the USP
rules, the dials and the live indicator. Red keeps the buttons and the
eyebrows, so the two never compete. */
--ol-green: #80955d;
--ol-green-dark: #6b7d4d; /* same olive, dark enough for small text on white (AA, 4.5:1) */
--ol-green-bright: #80955d; /* the pulsing live dot */
--ol-green-light: #a8bd88; /* the olive lifted to read on the slate bands (AA, 4.6:1) */
--ol-green-pale: #eff2e9;
--ol-green-tint: #f3f6ee; /* the "ours" column in the comparison table */
/* The soft drifting light on the dark bands and both heroes. RGB channels,
not a hex, because it is used at two opacities in one gradient. */
--ol-glow: 128, 149, 93; /* the olive */
--ol-charcoal: #333;
--ol-mid-grey: #999;
--ol-content-width: min(80%, 1280px);
--ol-header-width: var(--ol-content-width); /* the bar lines up with the content column */
--ol-text-width: min(100%, 960px); /* one reading width for every run of body text */
--ol-header-h: 108px; /* the sticky slot; the bar inside it may shrink */
}
html { -webkit-text-size-adjust: 100%; }
@media (max-width: 1600px) { :root { --ol-content-width: min(88%, 1280px); } }
@media (max-width: 1100px) { :root { --ol-content-width: 90%; } }
@media (max-width: 600px) { :root { --ol-content-width: 88%; } }
body {
margin: 0;
background: #fff;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* The original site's photograph, kept as a fixed watermark behind every page.
Light bands are slightly translucent so it ghosts through; dark bands cover it. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 1;
background: url("../images/home-bg-light.webp") no-repeat center center;
background-size: auto 100%;
opacity: .5;
pointer-events: none;
}
@media (max-width: 900px) { body::before { background-size: auto 90%; background-position: center 30%; opacity: .35; } }
@media print { body::before { display: none; } }
::selection { background: var(--ol-red); color: #fff; }
/* ---------- Layout scaffolding ---------- */
/* The watermark (body::before) paints above the section backgrounds, so everything
that has to stay crisp is lifted above it. Anything not listed keeps the ghosted
photograph behind it, which is the whole point of the treatment. */
.ol-header,
.ol-footer,
.ol-section > *,
.ol-main__inner,
.ol-prose,
.ol-cta-box,
.wp-block-template-part { position: relative; z-index: 2; }
.ol-hero > *,
.ol-page-hero > *,
.ol-section--dark > * { position: relative; z-index: 2; }
/* Core puts the theme's block gap between top-level template blocks (header → nav → main → footer).
Each section sets its own spacing, so that gap is only ever a stray white strip. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.ol-header,
.ol-nav,
.ol-main,
.ol-footer { width: 100%; }
.ol-main__inner,
.ol-footer__inner { width: var(--ol-content-width); margin-left: auto; margin-right: auto; }
.ol-header__inner { width: var(--ol-header-width); margin-left: auto; margin-right: auto; }
/* Constrained layouts nest (group > post-content), and each would apply the 80%
content width again. Inside the 80% column everything is simply full width. */
.ol-main__inner .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.ol-main__inner.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.ol-header.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.ol-header__inner.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
/* Same for the home page and every section band, which don't sit inside .ol-main__inner:
without this, theme.json's 80% contentSize quietly narrows FAQ rows, step text and
card copy — the home page rendered them at 80% while inner pages did not. */
.ol-home .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.ol-section .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.ol-hero .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.ol-page-hero .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.ol-footer .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: none;
}
/* ---------- Header (slim, sticky) ---------- */
.ol-header { background: #fff; border-bottom: 1px solid var(--ol-line, #dde2e6); padding-left: 0; padding-right: 0; }
/* core's has-global-padding would narrow the bar's containing block, so the inner
column would no longer line up with the content column below it. */
/* Core wraps the part in a div, so that wrapper is what sticks. */
/* The sticky slot keeps a constant height so shrinking the bar never moves the page (that feedback jitters). */
.wp-block-template-part:has(> .ol-header), .wp-block-template-part:has(> .ol-skip-link) { position: sticky; top: 0; z-index: 100; height: var(--ol-header-h); pointer-events: none; }
.ol-header { pointer-events: auto; }
.ol-header__inner { min-height: var(--ol-header-h); gap: 24px; transition: min-height .35s cubic-bezier(.2,.7,.2,1); }
.ol-header__logo { margin: 0; line-height: 0; }
.ol-header__logo img { width: 320px; height: auto; display: block; }
.ol-header__nav { gap: 24px; }
.ol-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { display: inline-block; padding: 8px 0; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ol-charcoal); background: none; border-radius: 0; position: relative; }
.ol-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: var(--ol-red); transition: right .25s ease; }
.ol-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover::after,
.ol-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content::after { right: 0; }
.ol-header .wp-block-navigation__container { gap: 28px; }
.ol-header__cta .wp-block-button__link { padding: 12px 20px; font-size: 13px; letter-spacing: .06em; background: var(--ol-red); }
.ol-header__cta .wp-block-button__link:hover { background: var(--ol-red-dark); }
.ol-header .wp-block-navigation__responsive-container-open {
position: relative; width: 34px; height: 24px; padding: 0; color: var(--ol-slate);
/* Core's icon is two bars; draw three instead (middle bar is the background). */
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 3px; background-position: center; background-repeat: no-repeat;
}
.ol-header .wp-block-navigation__responsive-container-open svg { display: none; }
.ol-header .wp-block-navigation__responsive-container-open::before,
.ol-header .wp-block-navigation__responsive-container-open::after {
content: ""; position: absolute; left: 0; right: 0; height: 3px; background: currentColor; border-radius: 1px;
transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.ol-header .wp-block-navigation__responsive-container-open::before { top: 0; }
.ol-header .wp-block-navigation__responsive-container-open::after { bottom: 0; }
.ol-header .wp-block-navigation__responsive-container-open:hover::before { transform: translateY(-1px); }
.ol-header .wp-block-navigation__responsive-container-open:hover::after { transform: translateY(1px); }
.ol-header .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.ol-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content { color: #fff; font-size: 18px; padding: 12px 0; }
.ol-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.ol-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 48px; }
.ol-header .wp-block-navigation-item__content,
.ol-header__cta .wp-block-button__link { white-space: nowrap; }
@media (max-width: 1400px) { .ol-header__logo img { width: 280px; } }
@media (max-width: 1200px) { .ol-header__logo img { width: 240px; } .ol-header .wp-block-navigation__container { gap: 20px; } }
/* Core switches its own burger on at 600px; the menu needs it sooner than that here. */
@media (max-width: 1024px) {
:root { --ol-header-h: 88px; }
.ol-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
.ol-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
.ol-header__nav { gap: 16px; }
.ol-header__nav .wp-block-navigation { order: 2; } /* burger sits last, on the right */
}
@media (max-width: 600px) { :root { --ol-header-h: 76px; } .ol-header__logo img { width: 200px; } .ol-header .ol-header__cta.ol-header__cta { display: none; } }
/* The overlay carries the proposal link as its last item; on desktop the button does that job. */
.ol-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:last-child { display: none; }
.ol-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child .wp-block-navigation-item__content { margin-top: 12px; padding: 12px 20px; color: #fff; background: var(--ol-olive); border-radius: 4px; }
/* ---------- Main content ---------- */
.ol-main { background: transparent; padding: 0; }
.ol-main img { max-width: 100%; height: auto; }
.wp-block-heading.is-style-ol-cta-heading a { text-decoration: underline; }
.ol-main--plain { background: transparent; }
/* Page hero band (every page except home) */
.ol-page-hero { position: relative; overflow: hidden; background: var(--ol-slate); color: #fff; padding: 72px 0 80px; text-align: center; }
.ol-page-hero::before { content: ""; position: absolute; inset: -240px 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.ol-page-hero > * { position: relative; }
.ol-page-hero__inner { width: var(--ol-content-width); max-width: var(--ol-text-width); margin: 0 auto; }
.ol-page-hero__eyebrow { margin: 0 0 18px !important; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ol-pale); text-align: center; }
.ol-page-hero__title, .ol-page-hero h1 { margin: 0 !important; padding: 0; border: 0; font-size: clamp(2.25rem, 4.6vw, 3.75rem); font-weight: 900; line-height: 1; text-transform: var(--ol-heading-transform, uppercase); color: #fff; text-align: center; text-wrap: balance; }
.ol-page-hero__lead { max-width: var(--ol-text-width); margin: 20px auto 0 !important; font-size: 19px; line-height: 1.5; color: var(--ol-pale); text-align: center; }
.ol-page-hero__meta { margin-top: 22px !important; gap: 10px 24px; font-size: 15px; }
.ol-page-hero__meta > * { margin: 0 !important; }
.ol-page-hero .ol-portfolio-link { margin: 0; font-size: 16px; line-height: 1.4; text-align: center; }
.ol-page-hero .ol-portfolio-link a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ol-page-hero .ol-services { margin: 0; justify-content: center; font-size: 12px; color: var(--ol-pale); }
.ol-page-hero .ol-services a { padding: 6px 10px; color: #fff; background: rgba(255,255,255,.1); border-radius: 3px; }
.ol-page-hero .ol-services a:hover { background: var(--ol-olive); }
@media (max-width: 600px) { .ol-page-hero { padding: 48px 0 56px; } }
/* Prose pages: one readable column */
.ol-prose { background: transparent; width: var(--ol-content-width); max-width: var(--ol-text-width); margin: 0 auto; padding: 64px 0 96px; line-height: 1.65; color: var(--ol-charcoal); }
.ol-prose .wp-block-post-content > * + * { margin-top: 1.25rem; }
.ol-prose .wp-block-post-content > h2 { margin-top: 2.5rem; }
.ol-prose h2 + p, .ol-prose h2 + ul, .ol-prose h2 + ol { margin-top: .5rem; }
.ol-prose ul, .ol-prose ol { padding-left: 24px; }
.ol-prose p { text-align: left; }
.ol-prose .wp-block-post-title { display: none; }
/* Sectioned pages: bands run full-bleed, each sets its own width */
.ol-main--sections .ol-main__inner, .ol-main--sections .wp-block-post-content { width: auto; padding: 0 !important; max-width: none; }
.ol-main--sections .wp-block-post-content > *, .ol-main--sections .ol-main__inner > * { max-width: none; margin-left: 0; margin-right: 0; margin-block-start: 0; }
.ol-mt { margin-top: 40px !important; }
/* ---------- Home (v2 concept) ---------- */
.ol-home, .ol-home .wp-block-post-content { padding-left: 0 !important; padding-right: 0 !important; max-width: none; }
.ol-home .wp-block-post-content > * { max-width: none; margin-left: 0; margin-right: 0; }
.ol-section { padding: 96px 0; }
@media (max-width: 1024px) { .ol-section { padding: 72px 0; } }
@media (max-width: 600px) { .ol-section { padding: 56px 0; } }
.ol-section--off { background: #f5f7f8; }
.ol-section--white { background: #fff; }
.ol-section--dark { background: var(--ol-slate); color: #fff; }
.ol-section__inner { width: var(--ol-content-width); margin: 0 auto; }
.ol-section__inner.is-layout-constrained > * { max-width: none; margin-left: 0; margin-right: 0; }
.ol-section__inner > * + * { margin-block-start: 0; }
.ol-section__inner > p + p { margin-block-start: 1.1rem; }
.ol-section--dark { color: #fff; } .ol-section--dark p, .ol-section--dark li { color: var(--ol-pale); }
.ol-eyebrow { margin: 0 0 14px !important; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ol-olive-text); text-align: center; }
.ol-section--dark .ol-eyebrow { color: var(--ol-pale); }
/* On slate, bullets and rules read white rather than red. */
.ol-section--dark ul.ol-checklist li::before { background: url("data:image/svg+xml;utf8,") no-repeat center / contain; }
.ol-section__title { margin: 0 0 16px !important; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 900; line-height: 1.05; text-transform: var(--ol-heading-transform, uppercase); text-align: center; text-wrap: balance; }
.ol-section__title:has(br) { text-wrap: normal; }
.ol-section__title br { display: block; content: ""; }
.ol-section--dark .ol-section__title { color: #fff; }
.ol-section__lead { max-width: var(--ol-text-width); margin: 0 auto 56px !important; font-size: 19px; line-height: 1.5; text-align: center; color: #5f676d; }
.ol-section--dark .ol-section__lead { color: var(--ol-pale); }
/* Flex rows: core's flow layout would add a block gap to every sibling after the first. */
.ol-hero__inner > *, .ol-built > *, .ol-studio > *, .ol-faq-cta > * { margin-block-start: 0 !important; }
/* Hero */
.ol-hero { position: relative; overflow: hidden; background: var(--ol-slate); color: #fff; padding: 96px 0; }
.ol-hero::before { content: ""; position: absolute; inset: -240px 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.ol-hero__inner { position: relative; width: var(--ol-content-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.ol-hero__copy { flex: 0 1 680px; min-width: 0; }
.ol-hero__eyebrow { margin: 0 0 24px !important; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ol-pale); text-align: left; }
.ol-hero__title { margin: 0 0 24px !important; font-size: clamp(2.5rem, 5vw, 4.125rem); font-weight: 900; line-height: .98; text-transform: var(--ol-heading-transform, uppercase); color: #fff; text-align: left; text-wrap: balance; }
.ol-hero__lead { max-width: 620px; margin: 0 0 28px !important; font-size: 20px; line-height: 1.5; color: var(--ol-pale); text-align: left; }
.ol-hero__buttons { margin: 0 0 28px !important; gap: 12px; }
.ol-hero__buttons .wp-block-button__link { padding: 15px 26px; font-size: 14px; letter-spacing: .08em; }
.ol-hero__buttons .is-style-fill .wp-block-button__link { background: var(--ol-olive); }
.ol-hero__buttons .is-style-fill .wp-block-button__link:hover { background: #7d2727; }
.ol-hero .ol-hero__buttons .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border: 2px solid #fff; background: transparent; padding: 13px 24px; }
.ol-hero .ol-hero__buttons .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--ol-slate); }
.ol-badges { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 !important; padding: 0; list-style: none; font-size: 14px; color: #fff; text-align: left; }
.ol-badges li { position: relative; padding-left: 16px; margin: 0; }
.ol-badges li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.ol-badges li:first-child { font-weight: 700; }
.ol-hero__card { flex: 0 0 500px; }
@media (max-width: 1200px) { .ol-hero__inner { gap: 40px; } .ol-hero__card { flex: 0 1 440px; } }
@media (max-width: 1024px) { .ol-hero { padding: 72px 0; } .ol-hero__inner { flex-direction: column; align-items: flex-start; gap: 44px; } .ol-hero__copy, .ol-hero__card { flex: 0 0 auto; width: 100%; } .ol-hero__card { max-width: 560px; } }
/* Comparison table */
/* Comparison strips.
*
* Still a real
, because this is genuinely tabular and the row and
* column headers are what a screen reader needs. Only the presentation
* changes: `border-spacing` opens a gap between rows so each one reads as its
* own card, matching the step cards rather than a spreadsheet. The rounding is
* applied to the end cells of each row, since a
cannot take a radius. */
.ol-compare { width: 100%; max-width: 1100px; margin: 0 auto !important; border: 0; background: none; }
.ol-compare table { border-collapse: separate; border-spacing: 0 14px; width: 100%; font-size: 15px; line-height: 1.45; }
.ol-compare th, .ol-compare td { padding: 22px 26px; border: 0; text-align: left; vertical-align: top; }
/* Column headings: a rule beneath each, olive under ours, hairline under theirs. */
.ol-compare thead th { padding: 0 26px 12px; background: none; font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ol-mid-grey); }
/* The table is has-fixed-layout, so column widths are taken from the first row
only. Setting this on the body cell has no effect. */
.ol-compare thead th:first-child { width: 210px; padding: 0; }
/* Red for the alternative, olive for ours: the two accents read as "this one,
not that one" far faster than grey ever did. Both rules are the same weight,
so the colour and the olive tint behind our column carry the distinction. */
.ol-compare thead th:nth-child(2) { color: var(--ol-olive-text); box-shadow: inset 0 -3px 0 var(--ol-red-light); }
.ol-compare thead th:last-child { color: var(--ol-charcoal); box-shadow: inset 0 -3px 0 var(--ol-green); }
/* Each row is a bordered strip; the key column is tinted like a card header. */
.ol-compare tbody th, .ol-compare tbody td { border-block: 1px solid var(--ol-line); background: #fff; }
.ol-compare tbody th { width: 210px; background: #f5f7f8; border-left: 1px solid var(--ol-line); border-radius: 8px 0 0 8px; font-size: 14px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.ol-compare tbody td:last-child { border-right: 1px solid var(--ol-line); border-radius: 0 8px 8px 0; }
.ol-compare tbody td:nth-child(2) { color: #5f676d; }
.ol-compare tbody td:nth-child(2)::before, .ol-compare tbody td:nth-child(3)::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: middle; background: var(--ol-red); opacity: .9; }
.ol-compare tbody td:nth-child(3) { background: var(--ol-green-tint) !important; font-weight: 500; }
.ol-compare tbody td:nth-child(3)::before { background: var(--ol-green); opacity: 1; }
.ol-compare__note { margin: 20px 0 0 !important; font-size: 13px; text-align: center; color: #5f676d; }
@media (max-width: 800px) {
/* Stacked on a phone: one card per point, so the strip borders and radii
move from the individual cells to the row itself. */
.ol-compare table { border-spacing: 0 12px; }
.ol-compare tbody th { width: auto; display: block; padding-bottom: 0; } .ol-compare tbody td { display: block; padding-top: 8px; } .ol-compare thead { display: none; }
.ol-compare tbody tr { display: block; border: 1px solid var(--ol-line); border-radius: 8px; overflow: hidden; }
.ol-compare tbody th, .ol-compare tbody td { border: 0; border-radius: 0; background: #fff; }
.ol-compare tbody th { background: #f5f7f8; padding-top: 16px; padding-bottom: 14px; }
.ol-compare tbody td:nth-child(2)::before, .ol-compare tbody td:nth-child(3)::before { display: block; width: auto; height: auto; margin: 0 0 2px; border-radius: 0; background: none !important; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a9299; }
.ol-compare tbody td:nth-child(2)::before { content: "Site builders"; color: var(--ol-olive-text); }
.ol-compare tbody td:nth-child(3)::before { content: "Owen Lewis Design"; color: var(--ol-green-dark); }
}
/* Under the bonnet */
.ol-built { display: flex; align-items: center; gap: 40px; max-width: 1100px; margin: 0 auto; }
.ol-built__features { flex: 0 0 440px; display: flex; flex-direction: column; gap: 20px; margin: 0 !important; padding: 0; list-style: none; }
.ol-built__features li { position: relative; padding-left: 18px; margin: 0; text-align: left; line-height: 1.5; }
.ol-built__features li::before { content: ""; position: absolute; left: 0; top: 4px; width: 4px; height: 44px; border-radius: 2px; background: var(--ol-green); }
.ol-built__features b { display: block; font-size: 18px; margin-bottom: 4px; }
.ol-built__features span { font-size: 15px; color: #5f676d; }
.ol-built__demo { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1200px) { .ol-built { gap: 32px; } .ol-built__features { flex: 0 1 380px; } }
@media (max-width: 1000px) { .ol-built { flex-direction: column; align-items: stretch; } .ol-built__features, .ol-built__demo { flex: 0 0 auto; } }
/* Studio band */
.ol-studio { display: flex; gap: 40px; max-width: 1100px; margin: 0 auto; }
.ol-studio__col { flex: 1 1 0; text-align: left; }
.ol-studio__col:nth-child(2) .ol-studio__bar { background: var(--ol-green-light) !important; }
.ol-studio__bar { width: 40px !important; max-width: 40px; height: 4px; margin: 0 0 12px !important; border: 0 !important; opacity: 1 !important; background: var(--ol-green-light) !important; transform-origin: left; }
.ol-studio__col h3 { margin: 0 0 8px !important; font-size: 22px; font-weight: 700; color: #fff; text-transform: none; }
.ol-studio__col p { margin: 0 !important; font-size: 16px; line-height: 1.55; color: var(--ol-pale); text-align: left; }
@media (max-width: 800px) { .ol-studio { flex-direction: column; gap: 28px; } .ol-studio__col { flex: 0 0 auto; } }
/* FAQ + CTA side by side on the home page */
.ol-faq-cta { display: flex; align-items: flex-start; gap: 48px; width: var(--ol-content-width); margin: 0 auto; }
.ol-faq-cta__faq { flex: 1 1 auto; width: 100%; min-width: 0; }
/* The heading spans the band; the card starts level with the first FAQ row. */
.ol-faq-cta__title { width: auto; max-width: none; margin: 0 0 28px !important; font-size: 36px; text-align: left; }
.ol-cta-card h3 { margin: 0 0 12px !important; font-size: 28px; font-weight: 900; text-transform: var(--ol-heading-transform, uppercase); line-height: 1.1; color: #fff; text-align: center; }
.ol-cta-card { flex: 0 0 auto; width: 32%; max-width: 400px; min-width: 300px; padding: 36px; border-radius: 8px; background: var(--ol-slate-dark); color: #fff; text-align: center; }
.ol-cta-card p { margin: 0 0 16px !important; font-size: 16px; line-height: 1.5; color: var(--ol-pale); text-align: center; }
.ol-cta-card .wp-block-buttons { justify-content: center; }
.ol-cta-card .wp-block-button__link { background: var(--ol-olive); padding: 15px 26px; }
.ol-cta-card .wp-block-button__link:hover { background: #7d2727; }
.ol-cta-card .ol-cta-card__small { margin: 12px 0 0 !important; font-size: 13px; }
@media (max-width: 1100px) { .ol-faq-cta { gap: 32px; } .ol-cta-card { width: 34%; max-width: 340px; min-width: 280px; padding: 28px; } }
@media (max-width: 900px) { .ol-faq-cta { flex-direction: column; } .ol-faq-cta__faq, .ol-cta-card { flex: 0 0 auto; width: 100%; max-width: none; } }
/* Steps, pricing, checklists and prose inside section bands */
.ol-section .ol-steps { max-width: 1280px; margin: 0 auto !important; grid-template-columns: repeat(var(--ol-steps-cols, 3), 1fr) !important; }
.ol-section .ol-steps--5 { --ol-steps-cols: 5; }
.ol-section .ol-steps--5 .ol-step, .ol-section .ol-steps--4 .ol-step { padding: 24px 22px 24px; }
.ol-section .ol-steps--5 .ol-step::before, .ol-section .ol-steps--4 .ol-step::before { position: static; margin-bottom: 14px; }
.ol-section .ol-steps--5 .ol-step__text { font-size: 15px; } .ol-section .ol-steps--6 { --ol-steps-cols: 3; } .ol-section .ol-steps--4 { --ol-steps-cols: 4; }
@media (max-width: 1100px) { .ol-section .ol-steps, .ol-section .ol-steps--5, .ol-section .ol-steps--4 { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 700px) { .ol-section .ol-steps, .ol-section .ol-steps--5, .ol-section .ol-steps--4, .ol-section .ol-steps--6 { grid-template-columns: 1fr !important; } }
.ol-section .ol-pricing { max-width: 1100px; margin: 0 auto !important; }
.ol-section .ol-pricing-col { flex-basis: 300px; }
.ol-section .ol-pay-note { margin: 28px 0 0 !important; text-align: center; font-size: 16px; color: #5f676d; }
.ol-section .ol-pay-note a { font-weight: 700; color: var(--ol-red); }
.ol-section__prose a, .ol-prose a, .ol-split a, .ol-step__text a { color: var(--ol-red); text-decoration: underline; text-underline-offset: 2px; }
.ol-section__prose a:hover, .ol-prose a:hover, .ol-split a:hover, .ol-step__text a:hover { color: var(--ol-red-dark); }
.ol-section--dark a { color: var(--ol-red-light); }
.ol-section ul.ol-checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 40px; font-size: 16px; line-height: 1.5; }
.ol-section ul.ol-checklist li { position: relative; padding-left: 32px; margin: 0; }
.ol-section ul.ol-checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: url("data:image/svg+xml;utf8,") no-repeat center / contain; }
@media (max-width: 700px) { .ol-section ul.ol-checklist { grid-template-columns: 1fr; } }
/* Two-column split inside a band */
.ol-split { display: flex; gap: 64px; align-items: flex-start; max-width: 1100px; margin: 0 auto; }
.ol-split > * { flex: 1 1 0; min-width: 0; margin-block-start: 0 !important; }
.ol-split h3, .ol-section__inner > h3 { margin: 0 0 14px !important; font-size: 24px; font-weight: 700; text-transform: none; line-height: 1.25; text-align: left; }
.ol-split p, .ol-split li { text-align: left; font-size: 16px; line-height: 1.6; color: #4a4a4a; }
.ol-split p + p, .ol-split p + ul { margin-top: 12px !important; }
.ol-split ul { padding-left: 20px; margin: 0; }
.ol-main .ol-split ul.ol-checklist { grid-template-columns: 1fr; gap: 10px; padding-left: 0; }
.ol-split li + li { margin-top: 6px; }
@media (max-width: 900px) { .ol-split { flex-direction: column; gap: 40px; } .ol-split > * { flex: 0 0 auto; } }
/* Narrow prose inside a band */
.ol-section__prose { max-width: var(--ol-text-width); margin: 0 auto; font-size: 17px; line-height: 1.65; color: #4a4a4a; text-align: center; }
.ol-section__prose > * + * { margin-top: 1.1rem !important; }
.ol-section__prose p, .ol-section__prose h2, .ol-section__prose h3 { text-align: center; }
.ol-section__prose ul, .ol-section__prose ol { display: inline-block; text-align: left; }
/* FAQ + CTA card sits in a band on any page; FAQ alone stays narrow */
.ol-section .ol-faq-cta { width: auto; max-width: 1280px; }
.ol-section > .ol-section__inner > .ol-faq { max-width: var(--ol-text-width); margin: 0 auto; }
/* CTA pattern rendered as a band: the card look from the home page, centred */
.ol-section .ol-cta-box, .ol-main .ol-cta-box { max-width: 760px; margin: 0 auto; padding: 48px 40px; background: var(--ol-slate-dark); color: #fff; border-radius: 8px; box-shadow: none; text-align: center; }
.ol-cta-box .ol-cta-box__title { margin: 0 0 12px !important; font-size: 30px; color: #fff; text-align: center; }
.ol-cta-box p { margin: 0 !important; color: var(--ol-pale); font-size: 17px; line-height: 1.5; text-align: center; }
.ol-cta-box .wp-block-buttons { margin-top: 24px !important; }
.ol-cta-box .is-style-fill .wp-block-button__link { background: var(--ol-olive); }
.ol-cta-box .is-style-fill .wp-block-button__link:hover { background: #7d2727; }
.ol-cta-box .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; background: transparent; }
.ol-cta-box .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--ol-slate); }
/* Forms in a band */
.ol-section .ol-form { margin: 0 auto; border: 1px solid var(--ol-line); box-shadow: 0 8px 24px rgba(0,0,0,.06); border-radius: 8px; }
.ol-section .ol-form__note { margin-top: 20px; }
/* Portfolio single: gallery + prev/next inside the white band */
.ol-section .ol-portfolio-nav { margin: 48px 0 0; padding: 0; border: 0; }
.ol-section .wp-block-gallery.is-style-ol-justified { margin: 0; }
.ol-section .wp-block-gallery.is-style-ol-justified figure.wp-block-image img { border: 1px solid var(--ol-line); }
.ol-section .wp-block-post-content > p { max-width: var(--ol-text-width); margin: 32px auto 0; font-size: 17px; line-height: 1.65; text-align: center; color: #4a4a4a; }
/* Portfolio grid page */
.ol-section .wp-block-query.is-style-ol-portfolio-grid .wp-block-post-template { gap: 24px; }
/* ---------- Motion (progressive: only when JS adds html.ol-js) ---------- */
/* Reveal-on-scroll. theme.js marks elements .ol-reveal (+ a variant) with --i for stagger. */
html.ol-js .ol-reveal, html.ol-js .ol-anim { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1), letter-spacing .9s cubic-bezier(.2,.7,.2,1), clip-path .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; }
html.ol-js .ol-reveal--left { transform: translateX(-36px); }
html.ol-js .ol-reveal--right { transform: translateX(36px); }
html.ol-js .ol-reveal--scale { transform: scale(.9) translateY(12px); }
html.ol-js .ol-reveal--tilt { transform: perspective(1200px) rotateY(-10deg) translateX(40px); }
html.ol-js .ol-reveal--track { transform: none; letter-spacing: .4em; }
html.ol-js .ol-reveal.is-in, html.ol-js .ol-anim.is-in { opacity: 1; transform: none; }
html.ol-js .ol-reveal--track.is-in { letter-spacing: .14em; }
html.ol-js .ol-reveal.is-in { will-change: auto; }
/* Headlines rise word by word */
html.ol-js .ol-hero__title .ol-word, html.ol-js .ol-page-hero__title .ol-word { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(1.5deg); transform-origin: left bottom; transition: opacity .55s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
html.ol-js .ol-hero__title.is-in .ol-word, html.ol-js .ol-page-hero__title.is-in .ol-word { opacity: 1; transform: none; }
/* Section titles: a clipped rise */
html.ol-js .ol-section__title.ol-reveal { clip-path: inset(0 0 100% 0); transform: translateY(16px); }
html.ol-js .ol-section__title.ol-reveal.is-in { clip-path: inset(-10% 0 -10% 0); }
/* Comparison rows slide in from alternate sides */
html.ol-js .ol-compare { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
html.ol-js .ol-compare.is-in { opacity: 1; transform: none; }
html.ol-js .ol-compare tbody tr { opacity: 0; transform: translateX(-24px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.25s + var(--i, 0) * 80ms); }
html.ol-js .ol-compare tbody tr:nth-child(even) { transform: translateX(24px); }
html.ol-js .ol-compare.is-in tbody tr { opacity: 1; transform: none; }
/* Studio bars draw, step numbers pop, gallery frames wipe */
html.ol-js .ol-studio__bar { transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.2s + var(--i, 0) * 120ms); }
html.ol-js .ol-studio__col.is-in .ol-studio__bar { transform: none; }
html.ol-js .ol-step::before { transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s; transition-delay: calc(.2s + var(--i, 0) * 110ms); }
html.ol-js .ol-step.is-in::before { transform: none; opacity: 1; }
html.ol-js .ol-built__features li::before { transform: scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.15s + var(--i, 0) * 90ms); }
html.ol-js .ol-built__features li.is-in::before { transform: none; }
html.ol-js .wp-block-gallery figure.ol-reveal img { clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
html.ol-js .wp-block-gallery figure.ol-reveal.is-in img { clip-path: inset(0); }
/* Scorecard card floats up and settles */
html.ol-js .ol-hero__card.is-in { animation: ol-float 7s ease-in-out 1.2s infinite; }
@keyframes ol-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* ---- Layers: parallax on scroll (--sy is the scroll position, published by theme.js) ---- */
html.ol-js .ol-hero__inner, html.ol-js .ol-page-hero__inner, html.ol-js .ol-page-hero__meta { transform: translate3d(0, calc(var(--sy, 0) * .22px), 0); opacity: clamp(0, calc(1 - var(--sy, 0) / 520), 1); }
html.ol-js .ol-hero::before, html.ol-js .ol-page-hero::before { transform: translate3d(0, calc(var(--sy, 0) * -.12px), 0); animation: ol-grid-drift 60s linear infinite; }
@keyframes ol-grid-drift { to { background-position: 48px 48px; } }
/* Soft light that drifts across the dark bands */
.ol-hero::after, .ol-page-hero::after, .ol-section--dark::after {
content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; right: -20vw; top: -30%; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(var(--ol-glow), .22), rgba(var(--ol-glow), 0));
filter: blur(20px);
}
.ol-section--dark { position: relative; overflow: hidden; }
.ol-section--dark > * { position: relative; z-index: 1; }
.ol-page-hero > *, .ol-hero > *, .ol-section--dark > *, .ol-section--off > * { position: relative; z-index: 1; }
.ol-hero::before, .ol-page-hero::before, .ol-hero::after, .ol-page-hero::after, .ol-section--dark::after, .ol-section--off::before { z-index: 0; }
html.ol-js .ol-hero::after, html.ol-js .ol-page-hero::after, html.ol-js .ol-section--dark::after { animation: ol-orb 18s ease-in-out infinite alternate; }
@keyframes ol-orb { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-18vw, 14%, 0) scale(1.15); } }
/* Off-white bands get a faint slate shape that slides slower than the page */
.ol-section--off { position: relative; overflow: hidden; }
.ol-section--off > * { position: relative; z-index: 1; }
.ol-section--off::before { content: ""; position: absolute; left: -12vw; bottom: -30%; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47,73,94,.07), rgba(47,73,94,0)); pointer-events: none; }
html.ol-js .ol-section--off::before { transform: translate3d(0, calc(var(--sy, 0) * -.08px), 0); }
/* Header settles once the page moves */
.ol-header { transition: box-shadow .3s ease; }
/* Shrinking is done with transform only, so the header's height never changes mid-scroll (a height change here feeds back into the scroll position and jitters). */
.ol-header__logo img { transform-origin: left center; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ol-header.is-scrolled { box-shadow: 0 6px 24px rgba(31,50,66,.08); }
.ol-header.is-scrolled .ol-header__inner { min-height: 80px; }
.ol-header.is-scrolled .ol-header__logo img { transform: scale(.78); }
@media (max-width: 600px) { .ol-header.is-scrolled .ol-header__inner { min-height: 64px; } .ol-header.is-scrolled .ol-header__logo img { transform: scale(.85); } }
/* Portfolio tiles and step cards respond to the pointer */
.ol-step, .ol-cta-card, .ol-scorecard { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, opacity .75s cubic-bezier(.2,.7,.2,1); }
.ol-cta-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(31,50,66,.25); }
.ol-faq .wp-block-details summary { transition: padding-left .25s cubic-bezier(.2,.7,.2,1); }
.ol-faq .wp-block-details:hover summary { padding-left: 26px; }
@media (prefers-reduced-motion: reduce) {
html.ol-js .ol-reveal, html.ol-js .ol-anim, html.ol-js .ol-hero__title .ol-word, html.ol-js .ol-page-hero__title .ol-word, html.ol-js .ol-compare, html.ol-js .ol-compare tbody tr, html.ol-js .ol-built__features li::before, html.ol-js .ol-studio__bar, html.ol-js .ol-step::before, html.ol-js .wp-block-gallery figure.ol-reveal img { opacity: 1 !important; transform: none !important; transition: none !important; clip-path: none !important; letter-spacing: inherit; }
html.ol-js .ol-hero__inner, html.ol-js .ol-page-hero__inner, html.ol-js .ol-hero::before, html.ol-js .ol-page-hero::before, html.ol-js .ol-section--off::before { transform: none !important; opacity: 1 !important; animation: none !important; }
.ol-hero::after, .ol-page-hero::after, .ol-section--dark::after { animation: none !important; }
}
/* ---------- Portfolio grid (Query Loop, style "Portfolio grid") ---------- */
.wp-block-query.is-style-ol-portfolio-grid .wp-block-post-template {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
/* Each tile is a 3D card: the featured image on the front, title + View Project on the back.
Hover or keyboard focus flips it; touch devices simply tap through the image link. */
.wp-block-query.is-style-ol-portfolio-grid .wp-block-post-template { perspective: 1400px; }
.wp-block-query.is-style-ol-portfolio-grid .wp-block-post {
position: relative;
box-sizing: border-box; /* the theme has no global border-box; without this the border grows the tile */
margin: 0;
aspect-ratio: 1 / 1;
border: 1px solid #ddd;
transform-style: preserve-3d;
transition: transform .6s cubic-bezier(.4, .2, .2, 1);
}
.wp-block-query.is-style-ol-portfolio-grid .wp-block-post:hover,
.wp-block-query.is-style-ol-portfolio-grid .wp-block-post:focus-within { transform: rotateY(180deg); }
.wp-block-query.is-style-ol-portfolio-grid .ol-flip__front,
.wp-block-query.is-style-ol-portfolio-grid .ol-flip__back {
position: absolute;
inset: 0;
margin: 0;
background: #fff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.wp-block-query.is-style-ol-portfolio-grid .ol-flip__front a,
.wp-block-query.is-style-ol-portfolio-grid .ol-flip__front img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-block-query.is-style-ol-portfolio-grid .ol-flip__back {
transform: rotateY(180deg);
padding: 20px;
gap: 16px;
text-align: center;
}
.wp-block-query.is-style-ol-portfolio-grid .ol-flip__title { margin: 0; padding: 0; border: 0; font-size: 18px; font-weight: 700; line-height: 1.3; text-transform: none; color: var(--ol-charcoal); }
.wp-block-query.is-style-ol-portfolio-grid .ol-flip__button {
display: inline-block;
padding: 12px 20px;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background: var(--ol-slate);
border-radius: 3px;
}
.wp-block-query.is-style-ol-portfolio-grid .ol-flip__button:hover { background: var(--ol-slate-light); color: #fff; }
@media (prefers-reduced-motion: reduce) {
.wp-block-query.is-style-ol-portfolio-grid .wp-block-post { transition: none; }
}
@media (max-width: 1100px) { .wp-block-query.is-style-ol-portfolio-grid .wp-block-post-template { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .wp-block-query.is-style-ol-portfolio-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .wp-block-query.is-style-ol-portfolio-grid .wp-block-post-template { grid-template-columns: 1fr; } }
/* ---------- Portfolio single ---------- */
.ol-portfolio-link { text-align: center; font-size: 20px; line-height: 20px; margin: 4px 0 0; }
.ol-portfolio-link a { font-weight: 700; }
.ol-portfolio-nav { margin: 0; }
.ol-portfolio-nav a,
.ol-portfolio-nav .post-navigation-link-placeholder {
display: inline-block;
position: relative;
padding: 8px 16px 6px;
font-size: 14px;
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background: var(--ol-slate);
border-radius: 4px;
transition: background-color .2s ease, transform .2s ease;
}
.ol-portfolio-nav a:hover { background: var(--ol-slate-light); color: #fff; transform: translateY(-1px); }
.ol-portfolio-nav__back a { padding-left: 38px; }
.ol-portfolio-nav__next a { padding-right: 38px; }
.ol-portfolio-nav__back a::before,
.ol-portfolio-nav__next a::after {
content: "";
position: absolute;
top: 50%;
width: 18px; height: 18px;
margin-top: -9px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.ol-portfolio-nav__back a::before { left: 10px; }
.ol-portfolio-nav__next a::after { right: 10px; transform: scaleX(-1); }
.ol-services { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 20px 0 0; font-size: 12px; line-height: 14px; text-transform: uppercase; font-weight: 700; color: var(--ol-charcoal); }
.ol-services .wp-block-post-terms__prefix { font-weight: 900; font-size: 14px; padding: 8px 10px 8px 0; }
.ol-services a { display: inline-block; padding: 8px 10px; color: var(--ol-charcoal); text-decoration: none; font-weight: 700; border-radius: 3px; }
.ol-services .wp-block-post-terms__separator { display: none; }
/* Justified gallery row (core gallery with style "Justified row"; lightbox is core's own). */
/* Each figure grows in proportion to its aspect ratio (--ol-ar, set by the theme
at render time), so every image in a row shares the same height and the row
fills the width — the justified layout of the original. */
.wp-block-gallery.is-style-ol-justified { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px !important; margin: 20px 0 0; }
.wp-block-gallery.is-style-ol-justified figure.wp-block-image {
--ol-ar: 1;
flex: var(--ol-ar) 1 calc(var(--ol-ar) * 240px);
width: auto !important;
max-width: calc(var(--ol-ar) * 520px);
margin: 0;
}
.wp-block-gallery.is-style-ol-justified figure.wp-block-image img {
display: block; width: 100% !important; height: auto !important; aspect-ratio: var(--ol-ar);
object-fit: cover; border: 1px solid var(--ol-mid-grey); box-sizing: border-box;
}
@media (max-width: 560px) { .wp-block-gallery.is-style-ol-justified { gap: 12px !important; } .wp-block-gallery.is-style-ol-justified figure.wp-block-image { flex-basis: calc(50% - 6px); max-width: none; } }
.ol-cta { font-size: 24px; margin-top: 1.25rem; }
/* ---------- Forms (owen-lewis/form block) ---------- */
.ol-form { max-width: var(--ol-text-width); margin: 40px auto; padding: 40px; background: #fff; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.08); box-sizing: border-box; text-align: left; line-height: 1.4; scroll-margin-top: 100px; }
.ol-form__fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 24px; }
.ol-field { grid-column: span 6; }
.ol-field--half { grid-column: span 3; }
.ol-field--third { grid-column: span 2; }
.ol-field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.ol-field label .req { color: #a33; }
.ol-field input[type=text], .ol-field input[type=email], .ol-field input[type=tel], .ol-field input[type=url], .ol-field input[type=number], .ol-field select, .ol-field textarea {
width: 100%; box-sizing: border-box; height: 48px; padding: 8px 12px; font: inherit; font-size: 15px; color: var(--ol-charcoal); border: 1px solid #999; border-radius: 3px; background: #fff;
}
.ol-field textarea { height: 140px; resize: vertical; line-height: 1.5; }
.ol-field input:focus, .ol-field select:focus, .ol-field textarea:focus { outline: 2px solid var(--ol-slate-light); outline-offset: 1px; border-color: var(--ol-slate); }
.ol-field .ol-choices { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ol-field .ol-choices label { font-weight: 400; margin: 0; display: inline-flex; gap: 8px; align-items: center; }
.ol-field__help { font-size: 13px; color: #666; margin: 6px 0 0; text-align: left; }
.ol-form, .ol-form p, .ol-form label { text-align: left; }
.ol-field.is-invalid input, .ol-field.is-invalid select, .ol-field.is-invalid textarea { border-color: #a33; }
.ol-form__hp { position: absolute; left: -9999px; }
.ol-form__submit { margin-top: 30px; text-align: center; }
.ol-form__submit button { border: 0; padding: 22px 42px; font: inherit; font-weight: 700; font-size: 22px; text-transform: uppercase; color: #fff; background: var(--ol-slate); border-radius: 3px; cursor: pointer; }
.ol-form__submit button:hover { background: var(--ol-slate-light); }
.ol-form__submit button[disabled] { opacity: .6; cursor: wait; }
.ol-form__message { margin-top: 20px; padding: 14px 18px; text-align: left; font-size: 15px; line-height: 1.5; border-radius: 3px; border-left: 4px solid transparent; display: none; }
.ol-form__message.is-error { display: block; background: #fbeeee; border-left-color: #a33; color: #7a1f1f; }
/* Success is olive; only a real error is red. A confirmation in the same red as
a validation failure makes good news read as a problem for a second. */
.ol-form__message.is-success { display: block; background: var(--ol-green-pale); border-left-color: var(--ol-green); color: #4e5c38; font-size: 17px; padding: 24px; text-align: center; }
/* The Direct Debit confirmation is several paragraphs on a page of its own, not
a one-line reply under a form, so it reads as prose rather than a banner. */
/* Two classes, to outrank .ol-form__message.is-success on text-align. */
.ol-form__message.ol-gc-result { text-align: left; margin-top: 0; }
.ol-gc-result p { margin: 0 0 .9em; }
.ol-gc-result p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .ol-form { padding: 24px 16px; } .ol-field--half, .ol-field--third { grid-column: span 6; } }
/* ---------- Footer ---------- */
.ol-footer { padding: 20px 0; font-size: 12px; line-height: 18px; }
.ol-footer__inner { padding: 20px 0; }
.ol-footer a { color: #fff; font-weight: 400; text-decoration: none; }
.ol-footer a:hover { color: var(--ol-red-light); }
.ol-footer p { margin: 0; line-height: 30px; text-align: left; }
.ol-footer__copyright { text-align: right; }
@media (max-width: 460px) { .ol-footer__inner { flex-direction: column; } .ol-footer p, .ol-footer__copyright { width: 100%; text-align: center; } }
/* ---------- Responsive (mirrors the original breakpoints) ---------- */
@media (max-width: 780px) { .ol-header { padding-top: 0; } }
@media (max-width: 600px) {
.ol-header__contact { font-size: 15px; }
}
@media (max-width: 490px) { .ol-header__contact { font-size: 14px; line-height: 36px; } }
@media (max-width: 440px) { .ol-header__contact { font-size: 13px; line-height: 32px; } }
@media (max-width: 400px) { .ol-header__contact { font-size: 12px; line-height: 28px; } }
@media (max-width: 380px) {
.ol-header__contact { display: none; }
.ol-header__icons { display: block; }
}
/* ---------- Editor niceties ---------- */
.editor-styles-wrapper .ol-form { outline: 1px dashed #bbb; }
/* ==================================================================
Improvement pass (16 Sep 2026): accessibility, sales sections, footer
================================================================== */
/* Skip link + visible focus everywhere */
.ol-skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 10px 16px; background: var(--ol-slate); color: #fff; font-weight: 700; border-radius: 3px; }
.ol-skip-link:focus { left: 8px; outline: 2px solid #fff; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 3px solid var(--ol-olive); outline-offset: 2px; }
/* Buttons: hover motion, outline style, large variant */
.wp-block-button__link { transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ol-slate); border: 2px solid var(--ol-slate); padding: 8px 14px; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--ol-slate); color: #fff; }
.ol-button--large .wp-block-button__link { padding: 16px 28px; font-size: 15px; }
.ol-button--large.is-style-outline .wp-block-button__link { padding: 14px 26px; }
/* Lead paragraph under a page title */
.ol-lead { font-size: 20px; line-height: 1.6; text-align: center; max-width: var(--ol-text-width); margin-left: auto; margin-right: auto; }
/* Numbered steps */
.ol-steps { counter-reset: ol-step; gap: 20px !important; margin-top: 1.5rem; grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 1000px) { .ol-steps { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .ol-steps { grid-template-columns: 1fr !important; } }
.ol-step { counter-increment: ol-step; position: relative; padding: 26px 22px 24px 76px; background: #fff; border: 1px solid var(--ol-line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.05); line-height: 1.5; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.ol-step:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.09); }
.ol-section--white .ol-step { background: #f5f7f8; border-color: transparent; box-shadow: none; }
.ol-step::before {
content: counter(ol-step);
position: absolute; left: 20px; top: 22px;
width: 36px; height: 36px; border-radius: 50%; box-sizing: border-box;
display: flex; align-items: center; justify-content: center;
/* DIN's line box sits ~1.4px above the cap centre, so the digit reads high in a
circle; 3px of top padding moves the centred line down by half that. */
padding-top: 2px;
line-height: 1.05; font-variant-numeric: tabular-nums;
background: var(--ol-slate); color: #fff; font-weight: 900; font-size: 18px;
}
.ol-step__title { margin: 0 0 6px !important; font-size: 17px !important; font-weight: 700; text-transform: none !important; line-height: 1.3 !important; }
.ol-step__text { margin: 0 !important; font-size: 15px; line-height: 1.55; text-align: left; }
/* Checklist */
.ol-main ul.ol-checklist { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 32px; }
@media (max-width: 900px) { .ol-main ul.ol-checklist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ol-main ul.ol-checklist { grid-template-columns: 1fr; } }
.ol-main ul.ol-checklist li { position: relative; padding-left: 30px; margin: 0; line-height: 1.5; padding-top: 4px; padding-bottom: 4px; }
.ol-main ul.ol-checklist li::before {
content: ""; position: absolute; left: 0; top: 7px; width: 20px; height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* FAQ (core Details blocks) */
.ol-faq { display: flex; flex-direction: column; gap: 12px; }
.ol-faq .wp-block-details { margin: 0 !important; background: #f5f7f8; border-radius: 4px; box-shadow: none; transition: background-color .2s ease; }
.ol-faq .wp-block-details:hover, .ol-faq .wp-block-details[open] { background: #eef2f4; }
.ol-faq .wp-block-details summary { padding: 18px 56px 18px 20px; font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; position: relative; line-height: 1.35; color: var(--ol-charcoal); }
.ol-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.ol-faq .wp-block-details summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; line-height: 1; color: var(--ol-green-dark); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.ol-faq .wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ol-faq .wp-block-details > :not(summary) { padding: 0 20px 18px; margin: 0; font-size: 16px; line-height: 1.6; text-align: left; color: #4a4a4a; }
.ol-faq .wp-block-details[open] > :not(summary) { animation: ol-faq-open .3s ease; }
@keyframes ol-faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* CTA box (inside .ol-section on every page; see band rules above) */
.ol-cta-box .wp-block-buttons { gap: 12px; }
/* Forms: privacy note, invalid state */
.ol-form__note { margin: 16px 0 0; font-size: 13px; color: #666; text-align: center; }
.ol-field[aria-invalid="true"] input, .ol-field[aria-invalid="true"] select, .ol-field[aria-invalid="true"] textarea { border-color: #a33; }
.ol-form__message.is-error:focus, .ol-form__message.is-success:focus { outline: none; }
/* Footer columns */
.ol-footer__inner { gap: 24px 48px; }
.ol-footer__brand { flex: 0 1 auto; }
.ol-footer__links { display: flex; flex-wrap: wrap; gap: 24px 64px; margin-left: auto; }
.ol-footer__links .ol-footer__col { flex: 0 0 auto; min-width: 150px; }
.ol-footer__col { flex: 1 1 200px; }
.ol-footer__col.is-layout-constrained > * { max-width: none; margin-left: 0; margin-right: 0; }
.ol-footer__col--right.is-layout-constrained > * { margin-left: auto; }
.ol-footer__col--right { flex: 1 1 260px; text-align: right; }
.ol-footer__logo { margin: 0 0 22px !important; }
.ol-footer__logo img { width: 260px; max-width: 100%; height: auto; filter: brightness(1.1) saturate(1.5) contrast(1.1); }
@media (max-width: 640px) { .ol-footer__logo { margin-bottom: 16px !important; } .ol-footer__logo img { width: 220px; } }
.ol-footer__heading { margin: 0 0 4px !important; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; line-height: 30px; color: #fff; }
.ol-footer .ol-footer__col p { line-height: 30px; }
@media (max-width: 900px) { .ol-footer__links { gap: 24px 40px; margin-left: 0; } }
@media (max-width: 640px) {
.ol-footer__col, .ol-footer__col--right { flex-basis: 100%; text-align: center; }
.ol-footer__col--right p { text-align: center; }
.ol-footer__links { width: 100%; justify-content: flex-start; gap: 20px 32px; }
.ol-footer__links .ol-footer__col { flex: 1 1 130px; text-align: left; }
}
/* ---------- Brief wizard: one question per screen, in a modal ---------- */
/* Launcher (only shown once JS can open the dialog; without JS the form is inline) */
.ol-launch { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ol-launch__btn {
position: relative; padding: 22px 54px; font: inherit; font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: #fff; background: var(--ol-red); border: 0; border-radius: 6px; cursor: pointer;
box-shadow: 0 14px 30px rgba(152, 48, 48, .28);
transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background-color .2s ease;
}
.ol-launch__btn:hover { background: var(--ol-red-dark); transform: translateY(-2px); box-shadow: 0 20px 40px rgba(152, 48, 48, .34); }
.ol-launch__btn:active { transform: translateY(0); }
.ol-launch__note { margin: 0 !important; max-width: 34rem; font-size: 15px; color: #5f676d; text-align: center; }
/* The dialog itself */
.ol-modal { width: min(94vw, 880px); max-width: none; max-height: 88vh; margin: 6vh auto; padding: 0; border: 0; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 40px 100px rgba(16, 26, 34, .45); }
.ol-modal::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; z-index: 4; background: linear-gradient(90deg, var(--ol-slate), var(--ol-slate-light) 55%, var(--ol-red)); }
/* The gap above the dialog needs this specificity to survive. WordPress ships
`:root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }`,
which at (0,2,0) outranks a single class, and the dialog is inserted before
the form so it really is the first child. Two classes plus the element wins. */
html .ol-modal.ol-modal { margin-block-start: 6vh; }
.ol-modal::backdrop { background: rgba(18, 30, 40, .72); backdrop-filter: blur(6px); }
.ol-modal[open] { animation: ol-modal-in .3s cubic-bezier(.2,.7,.2,1); }
.ol-modal[open]::backdrop { animation: ol-fade-in .3s ease; }
@keyframes ol-modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ol-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ol-modal__shell { position: relative; max-height: 88vh; overflow-y: auto; }
.ol-modal__close {
position: absolute; top: 18px; right: 18px; z-index: 3; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
font-size: 26px; line-height: 1; color: #5f676d; background: #f5f7f8; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.ol-modal__close:hover { background: var(--ol-slate); color: #fff; }
html.ol-modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ol-modal[open], .ol-modal[open]::backdrop { animation: none; } }
/* The form inside the modal: centred, generous, large type */
.ol-form--wizard { max-width: 760px; }
.ol-form--wizard.is-modal { max-width: none; width: 100%; margin: 0; padding: 64px 64px 56px; border: 0; border-radius: 0; box-shadow: none; background: #fff; text-align: center; }
.ol-form--wizard.is-wizard-on .ol-form__fields { display: block; min-height: 320px; }
.ol-form--wizard.is-modal .ol-form__fields { display: flex; align-items: center; justify-content: center; min-height: 340px; }
.ol-form--wizard.is-modal .ol-field { width: 100%; }
.ol-form--wizard .ol-field { grid-column: auto; }
/* The question is the headline on the screen */
.ol-form--wizard.is-wizard-on .ol-field > label,
.ol-form--wizard.is-wizard-on .ol-field .ol-field__label {
display: block; margin-bottom: 26px; font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 900; line-height: 1.12; letter-spacing: -.015em;
color: var(--ol-charcoal); text-align: center; text-wrap: balance;
}
.ol-form--wizard.is-wizard-on .ol-field .req { color: var(--ol-slate-light); }
.ol-form--wizard.is-wizard-on .ol-field__help { margin: 18px auto 0; max-width: 34rem; font-size: 16px; line-height: 1.5; color: #5f676d; text-align: center; }
.ol-form--wizard.is-wizard-on input[type=text], .ol-form--wizard.is-wizard-on input[type=email],
.ol-form--wizard.is-wizard-on input[type=tel], .ol-form--wizard.is-wizard-on input[type=url],
.ol-form--wizard.is-wizard-on input[type=number], .ol-form--wizard.is-wizard-on select {
height: 68px; max-width: 34rem; margin: 0 auto; font-size: 20px; text-align: center; border: 2px solid var(--ol-line); border-radius: 8px; background: #fbfcfc;
}
.ol-form--wizard.is-wizard-on textarea { max-width: 38rem; margin: 0 auto; min-height: 170px; font-size: 18px; line-height: 1.55; border: 2px solid var(--ol-line); border-radius: 8px; background: #fbfcfc; }
.ol-form--wizard.is-wizard-on input:focus, .ol-form--wizard.is-wizard-on select:focus, .ol-form--wizard.is-wizard-on textarea:focus {
border-color: var(--ol-slate); outline: none; box-shadow: 0 0 0 4px rgba(47, 73, 94, .14); background: #fff;
}
/* Options as centred cards */
.ol-form--wizard.is-wizard-on .ol-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; max-width: 40rem; margin: 0 auto; }
.ol-form--wizard.is-wizard-on .ol-field--radio .ol-choices,
.ol-form--wizard.is-wizard-on .ol-field--checkbox .ol-choices { justify-items: stretch; }
.ol-form--wizard.is-wizard-on .ol-choices label {
position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 20px 22px; font-size: 17px; line-height: 1.35; text-align: left;
background: #fff; border: 2px solid #e1e7ec; border-radius: 10px; cursor: pointer;
transition: border-color .18s ease, background-color .18s ease, transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease;
}
.ol-form--wizard.is-wizard-on .ol-choices label:hover { border-color: var(--ol-slate-light); background: #f7fafc; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16, 26, 34, .09); }
.ol-form--wizard.is-wizard-on .ol-choices label:has(input:checked) { border-color: var(--ol-slate); background: #eef3f7; box-shadow: 0 8px 20px rgba(47, 73, 94, .16); }
.ol-form--wizard.is-wizard-on .ol-choices label:has(input:focus-visible) { outline: 3px solid rgba(47, 73, 94, .35); outline-offset: 2px; }
/* Custom control: a slate ring that fills when chosen. */
.ol-form--wizard.is-wizard-on .ol-choices input {
appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 24px; height: 24px; margin: 0;
border: 2px solid #c9d3dc; border-radius: 50%; background: #fff; cursor: pointer; transition: border-color .18s ease, background-color .18s ease;
}
.ol-form--wizard.is-wizard-on .ol-choices input[type=checkbox] { border-radius: 7px; }
.ol-form--wizard.is-wizard-on .ol-choices input:checked { border-color: var(--ol-slate); background: var(--ol-slate); }
.ol-form--wizard.is-wizard-on .ol-choices input[type=radio]:checked::after {
content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff;
}
.ol-form--wizard.is-wizard-on .ol-choices input[type=checkbox]:checked::after {
content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.ol-form--wizard.is-wizard-on .ol-choices label:has(input:checked) { font-weight: 500; }
/* Progress: a bar and a percentage, no counting */
.ol-form--wizard .ol-form__progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px; margin-bottom: 36px; }
.ol-form--wizard .ol-form__step-label { grid-column: 1; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ol-slate); text-align: left; }
.ol-form--wizard .ol-form__pct { grid-column: 2; grid-row: 1 / span 2; font-size: 13px; font-weight: 700; color: var(--ol-slate); font-variant-numeric: tabular-nums; }
.ol-form--wizard .ol-form__bar { grid-column: 1; height: 8px; border-radius: 4px; background: #e8edf1; overflow: hidden; }
.ol-form--wizard .ol-form__bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--ol-slate), var(--ol-slate-light)); transition: width .45s cubic-bezier(.2,.7,.2,1); }
/* Entering animation */
html.ol-js .ol-form--wizard .ol-field.is-entering { animation: ol-q-in .35s cubic-bezier(.2,.7,.2,1) both; }
html.ol-js .ol-form--wizard .ol-field.is-entering-back { animation: ol-q-back .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ol-q-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ol-q-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
html.ol-js .ol-form--wizard .ol-field.is-entering, html.ol-js .ol-form--wizard .ol-field.is-entering-back { animation: none; }
}
/* Controls */
.ol-form--wizard .ol-form__submit { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 40px; }
.ol-form--wizard .ol-form__next, .ol-form--wizard .ol-form__submit button[type=submit] {
margin: 0; padding: 18px 44px; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: #fff; background: var(--ol-red); border: 0; border-radius: 6px; cursor: pointer; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ol-form--wizard .ol-form__next:hover, .ol-form--wizard .ol-form__submit button[type=submit]:hover { background: var(--ol-red-dark); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(152, 48, 48, .25); }
.ol-form--wizard .ol-form__back { padding: 16px 28px; font-size: 15px; color: #5f676d; background: transparent; border: 2px solid var(--ol-line); border-radius: 6px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.ol-form--wizard .ol-form__back:hover { border-color: var(--ol-slate); color: var(--ol-slate); }
.ol-form--wizard .ol-form__message { text-align: center; }
.ol-form--wizard .ol-form__saved { margin: 24px 0 0; font-size: 13px; color: #8a9299; text-align: center; }
.ol-form--wizard .ol-form__saved a { color: var(--ol-red); text-decoration: underline; }
/* Review screen */
.ol-form__review-title { margin: 0 0 24px !important; font-size: 30px; font-weight: 900; text-transform: var(--ol-heading-transform, uppercase); text-align: center; }
.ol-form__review-list { margin: 0 auto; max-width: 40rem; text-align: left; }
.ol-form__review-chapter { margin: 26px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ol-slate); }
.ol-form__review-list dt { margin: 0; padding: 12px 0 2px; font-size: 14px; color: #8a9299; }
.ol-form__review-list dd { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 0 0 8px; padding: 0 0 12px; border-bottom: 1px solid var(--ol-line); font-size: 17px; line-height: 1.45; }
.ol-form__review-list dd .is-empty { color: #8a9299; font-style: italic; }
.ol-form__edit { flex: 0 0 auto; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--ol-slate); background: #f5f7f8; border: 0; border-radius: 4px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.ol-form__edit:hover { background: var(--ol-red); color: #fff; }
@media (max-width: 782px) {
.ol-modal { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; }
html .ol-modal.ol-modal { margin-block-start: 0; } /* full screen on phones, no gap */
.ol-modal__shell { max-height: 100vh; min-height: 100vh; }
.ol-form--wizard.is-modal { padding: 76px 22px 32px; }
.ol-form--wizard.is-wizard-on .ol-field > label, .ol-form--wizard.is-wizard-on .ol-field .ol-field__label { font-size: 22px; margin-bottom: 20px; }
.ol-form--wizard.is-modal .ol-form__fields { min-height: 260px; }
.ol-form--wizard.is-wizard-on .ol-choices { grid-template-columns: 1fr; }
.ol-form--wizard .ol-form__submit { margin-top: 28px; }
.ol-form--wizard .ol-form__next, .ol-form--wizard .ol-form__submit button[type=submit] { flex: 1 1 auto; padding: 17px 20px; }
.ol-form--wizard .ol-form__back { flex: 0 0 auto; }
.ol-launch__btn { width: 100%; padding: 20px 24px; font-size: 16px; }
}
/* ---------- Forms: sections and steps ---------- */
.ol-field--section { grid-column: span 6; margin-top: 8px; padding-bottom: 4px; border-bottom: 1px dashed #bbb; }
.ol-field--section:first-child { margin-top: 0; }
.ol-fsection__title { margin: 0 !important; font-size: 20px !important; font-weight: 900; text-transform: var(--ol-heading-transform, uppercase); line-height: 1.3 !important; }
.ol-fsection__intro { margin: 4px 0 0; font-size: 14px; color: #666; line-height: 1.5; }
.ol-form--steps .ol-field--section { border-bottom: 0; padding-bottom: 0; }
.ol-form__progress { margin: 0 0 24px; }
.ol-form__step-label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #666; margin-bottom: 8px; }
.ol-form__bar { height: 6px; background: #e5e5e5; border-radius: 3px; overflow: hidden; }
.ol-form__bar span { display: block; height: 100%; background: var(--ol-olive); border-radius: 3px; transition: width .35s ease; }
.ol-form--steps .ol-form__submit { display: flex; justify-content: space-between; gap: 12px; }
.ol-form--steps .ol-form__submit .ol-form__back { background: transparent; color: var(--ol-slate); border: 2px solid var(--ol-slate); padding: 14px 26px; font-size: 16px; }
.ol-form--steps .ol-form__submit .ol-form__back:hover { background: var(--ol-slate); color: #fff; }
.ol-form--steps .ol-form__submit .ol-form__next,
.ol-form--steps .ol-form__submit button[type=submit] { margin-left: auto; padding: 16px 34px; font-size: 16px; }
.ol-form--steps .ol-form__submit .ol-form__back[hidden] + .ol-form__next { margin-left: auto; }
.ol-form__submit button[hidden] { display: none; }
.ol-field .ol-choices label { line-height: 1.4; }
.ol-field--checkbox .ol-choices, .ol-field--radio .ol-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 8px 16px; }
/* The column track suits a list of short options. A lone choice is usually a
sentence — a consent tick, say — so let it have the whole row. */
.ol-field--checkbox .ol-choices:has(label:only-child),
.ol-field--radio .ol-choices:has(label:only-child) { grid-template-columns: 1fr; }
.ol-choices label:only-child { align-items: flex-start; }
.ol-choices label:only-child input { margin-top: .15em; }
.ol-field--checkbox input, .ol-field--radio input { width: 18px; height: 18px; accent-color: var(--ol-slate); flex: 0 0 auto; }
.ol-field .ol-field__label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
/* Heading case switch. The display headings are uppercase by default; the
ol_heading_case option adds this class, which lets the real case show.
See mu-plugins/owen-lewis-core/inc/heading-case.php. */
body.ol-headings-title { --ol-heading-transform: none; }
/* theme.json also uppercases headings as elements, which the class rules above
never reach. Specific rules such as .ol-footer__heading still win over this,
so the small-caps UI chrome is untouched. */
body.ol-headings-title h1,
body.ol-headings-title h2,
body.ol-headings-title h3 { text-transform: none; }
/* Printing has no scrolling, so nothing ever intersects and un-revealed blocks
would print blank. The JS safety net no longer covers this, by design: it
only rescues what is on screen. */
@media print {
html.ol-js .ol-reveal, html.ol-js .ol-anim,
html.ol-js .ol-hero__title .ol-word, html.ol-js .ol-page-hero__title .ol-word,
html.ol-js .ol-compare, html.ol-js .ol-compare tbody tr,
html.ol-js .ol-built__features li::before, html.ol-js .ol-studio__bar,
html.ol-js .ol-step::before, html.ol-js .wp-block-gallery figure.ol-reveal img {
opacity: 1 !important; transform: none !important; transition: none !important;
clip-path: none !important; letter-spacing: inherit;
}
}
/* Scroll past: blocks drift and fade as they leave, the way the hero does.
The hero uses a global --sy, which only works because it sits at the top of
the page; every other block needs its own progress, so this uses a
scroll-driven view() timeline instead. It runs off the main thread, and
where it is unsupported the blocks simply scroll away normally.
.is-settled is added by theme.js once the entry transition has finished. */
@supports (animation-timeline: view()) {
/* .wp-block-post is excluded because the portfolio tiles are 3D flip cards.
They own their transform for the hover flip, and an animation outranks a
transition, so this would hold translateY permanently, flatten the
preserve-3d context and leave the back face showing mirrored. They keep
their entry reveal and their flip; they just do not fade on the way out. */
html.ol-js :is(.ol-reveal, .ol-anim).is-settled:not(.ol-hero__card):not(.wp-block-post):not(:where(.ol-hero, .ol-page-hero) *) {
animation: ol-scroll-past linear both;
animation-timeline: view();
/* `cover`, not `exit`: an exit range is measured against the element's
own height, so a one-line paragraph would blink out over 30px of
scroll while a tall section faded gently. `cover` spans the whole
journey through the viewport, so every block fades over the same
distance no matter its size, like the hero does. */
animation-range: cover 88% cover 100%;
}
@keyframes ol-scroll-past {
to { opacity: 0; transform: translateY(44px); }
}
@media (prefers-reduced-motion: reduce) {
html.ol-js :is(.ol-reveal, .ol-anim).is-settled { animation: none !important; }
}
}
/* The review screen renders in a sibling of .ol-form__fields, so the fields
box has to be removed from the flow, not merely emptied: its min-height
otherwise leaves a tall gap above "Check your answers". */
.ol-form--wizard.is-reviewing .ol-form__fields { display: none !important; }
/* The brief page puts its launcher in the hero, which is dark: the note and
the fine print need to lift off slate rather than sit at body-grey. */
.ol-launch--hero { margin-top: 36px; }
.ol-launch--hero .ol-launch__note { max-width: 36rem; color: var(--ol-pale); }
.ol-launch__fine { margin: 0 !important; max-width: 36rem; font-size: 13px; text-align: center; color: #9fb2c0; }
.ol-launch--hero .ol-launch__fine a { color: #cfdae2; }
/* A section whose only content is now a dialog should take up no room. */
.ol-section.is-modal-host { padding: 0; }
/* ---------------------------------------------------------------- steps
Arrows between the cards, a pronounced 1-to-n cascade on reveal, a stronger
hover, and a slow idle demonstration of that hover so the sequence reads as
a sequence even if nobody touches it.
Everything here animates `translate` and `scale` rather than `transform`,
because .ol-step is a reveal target and the scroll-past animation already
owns `transform`. The independent properties compose; a second `transform`
would simply lose. */
/* A clearer cascade: the cards arrive one after another, not almost together. */
html.ol-js .ol-steps > .ol-step.ol-reveal { transition-delay: calc(var(--i, 0) * 150ms) !important; }
html.ol-js .ol-step::before { transition-delay: calc(.12s + var(--i, 0) * 150ms); }
/* The arrow sits in the gap between two cards. */
.ol-steps > .ol-step::after {
content: ""; position: absolute; top: 50%; right: -19px; z-index: 2;
width: 16px; height: 16px; margin-top: -8px; pointer-events: none;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: .85;
}
.ol-steps > .ol-step:last-child::after { content: none; }
/* Six steps wrap to two rows of three, so the third must not point off the end. */
.ol-steps--6 > .ol-step:nth-child(3n)::after { content: none; }
/* Between 700px and 1100px the columns no longer match the step count, so a
row-end arrow would point at nothing. Below 700px everything is one column
and the arrow turns to point down the list instead. */
@media (max-width: 1100px) { .ol-steps > .ol-step::after { content: none; } }
@media (max-width: 700px) {
.ol-steps > .ol-step:not(:last-child)::after {
content: ""; top: auto; bottom: -18px; right: auto; left: 50%;
margin: 0 0 0 -8px; rotate: 90deg;
}
}
/* Hover: lift, grow a little, and turn the number olive. */
.ol-step:hover, .ol-step:focus-within { translate: 0 -6px; scale: 1.03; }
.ol-step:hover::before, .ol-step:focus-within::before { background: var(--ol-green); scale: 1.08; }
.ol-step::before { transition: background .25s ease, scale .25s cubic-bezier(.34,1.56,.64,1); }
/* The idle demonstration: each card plays the hover look in turn, then the
sequence rests. Hovering anywhere in the group stops it at once so a real
pointer is never fighting the animation for the same properties. */
@keyframes ol-step-demo {
0%, 3%, 12%, 100% { translate: 0 0; scale: 1; filter: none; }
6%, 9% { translate: 0 -6px; scale: 1.03; filter: drop-shadow(0 14px 26px rgba(0,0,0,.10)); }
}
@keyframes ol-step-demo-num {
0%, 3%, 12%, 100% { background: var(--ol-slate); scale: 1; }
6%, 9% { background: var(--ol-green); scale: 1.08; }
}
/* Both animations, declared together and deliberately more specific than the
scroll-past rule above. They do not conflict: the exit fade owns opacity and
transform, the demo owns translate, scale and filter. But `animation` is a
shorthand, so whichever rule wins replaces the other's list entirely, and the
scroll-past selector is the more specific of the two. Hence both here. */
html.ol-js .ol-steps > .ol-step.ol-reveal.is-settled {
animation: ol-scroll-past linear both, ol-step-demo 9s ease-in-out infinite;
animation-timeline: view(), auto;
animation-range: cover 88% cover 100%, normal;
animation-delay: 0s, calc(2s + var(--i, 0) * .75s);
}
html.ol-js .ol-step.is-settled::before {
animation: ol-step-demo-num 9s ease-in-out infinite;
animation-delay: calc(2s + var(--i, 0) * .75s);
}
/* Hovering stops the demo outright rather than pausing it: a paused animation
still holds translate and scale, so the real hover would have nothing to do.
The exit fade goes too, which costs nothing while the pointer is on it. */
html.ol-js .ol-steps:hover > .ol-step.ol-reveal.is-settled,
html.ol-js .ol-steps:focus-within > .ol-step.ol-reveal.is-settled,
html.ol-js .ol-steps:hover > .ol-step.is-settled::before,
html.ol-js .ol-steps:focus-within > .ol-step.is-settled::before {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
html.ol-js .ol-steps > .ol-step.ol-reveal.is-settled,
html.ol-js .ol-step.is-settled::before { animation: none; }
}
/* Shortcut back to the review after editing one answer. Styled as a secondary
action: it should not compete with Next for attention. */
.ol-form--wizard .ol-form__to-review {
padding: 16px 26px; font-size: 15px; font-weight: 700; color: var(--ol-slate);
background: transparent; border: 2px solid var(--ol-slate); border-radius: 6px;
cursor: pointer; transition: background .2s ease, color .2s ease;
}
.ol-form--wizard .ol-form__to-review:hover { background: var(--ol-slate); color: #fff; }
@media (max-width: 782px) { .ol-form--wizard .ol-form__to-review { flex: 1 1 100%; order: 3; } }
/* The USP bars redraw in sequence now and then, the same idea as the steps.
Uses the independent `scale` property: the li owns `transform` for its
entry reveal and the scroll-past fade, and a second transform would lose. */
@keyframes ol-bar-redraw {
0% { scale: 1 0; }
9%, 100% { scale: 1 1; }
}
html.ol-js .ol-built__features li.is-settled::before {
transform-origin: top;
animation: ol-bar-redraw 11s cubic-bezier(.2,.7,.2,1) infinite;
animation-delay: calc(2.5s + var(--i, 0) * .45s);
}
@media (prefers-reduced-motion: reduce) {
html.ol-js .ol-built__features li.is-settled::before { animation: none; }
}