/* * One Rawr — layout layer. * * Colours, fonts, sizes and button styles live in theme.json. This file only * handles what theme.json can't: overlaps, responsive re-flows, the menu, the * footer grid, transitions and scroll reveals. Every rule targets an or-* class * on a core block, so each section stays an editable Gutenberg block. */ /* ------------------------------------------------------------------ base */ /* Template parts and landing sections sit flush; each section owns its spacing. */ :where(.wp-site-blocks) > * { margin-block-start: 0; margin-block-end: 0; } .or-landing .wp-block-post-content > * { margin-block-start: 0; } img { max-width: 100%; height: auto; } /* ------------------------------------------------------ interaction states */ /* Colour changes ease in rather than snapping. */ a, .wp-block-button__link, .wp-block-navigation-item__content { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } /* Buttons lift slightly on hover. */ .wp-block-button__link:hover, .wp-block-button__link:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(188, 13, 143, 0.28); } .wp-block-button__link:active { transform: translateY(0); box-shadow: none; } /* ---------------------------------------------------------------- header */ .or-header { border-radius: 40px; min-height: 87px; padding: 14px 62px 14px 38px; } .or-header .wp-block-site-logo img { width: 142px; height: auto; } .or-header .wp-block-button__link { white-space: nowrap; } /* Menu sits right, next to the button, as in the design. */ .or-header .wp-block-navigation { margin-left: auto; margin-right: 22px; } .or-header .wp-block-navigation__container { gap: 0; } .or-header .wp-block-navigation__container > .wp-block-navigation-item { padding: 4px 16px; } .or-header .wp-block-navigation-item__content:hover, .or-header .current-menu-item > .wp-block-navigation-item__content, .or-header .current-menu-ancestor > .wp-block-navigation-item__content, .or-header [aria-current="page"] { color: var(--wp--preset--color--magenta); } .or-header .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--magenta); } .or-header .wp-block-navigation__responsive-container-open svg { width: 34px; height: 34px; } .or-btn-sm .wp-block-button__link { padding: 4px 26px; font-size: 15px; } /* Desktop: dropdowns open on hover and on keyboard focus (core behaviour). */ @media (min-width: 1001px) { .or-header .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item { border-left: 1px solid rgba(255, 255, 255, 0.28); } .or-header .wp-block-navigation__submenu-container { background: var(--wp--preset--color--navy) !important; border: 0 !important; border-radius: 14px; padding: 8px 0; min-width: 260px !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); } .or-header .wp-block-navigation__submenu-container > .wp-block-navigation-item + .wp-block-navigation-item { border-top: 1px solid rgba(255, 255, 255, 0.14); } .or-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 11px 22px !important; white-space: nowrap; /* one line per page; the dropdown widens to fit */ } .or-subtoggle { display: none; } /* * Dropdowns fade and rise into place instead of snapping. Core collapses a * closed dropdown to 0x0, which leaves nothing to fade out, so keep it * full-size and hide it with visibility and opacity instead. */ .or-header .has-child > .wp-block-navigation__submenu-container { width: auto !important; height: auto !important; max-height: none !important; /* ignore any height the mobile accordion left behind */ overflow: visible !important; visibility: hidden !important; opacity: 0 !important; transform: translateY(6px); /* Close after a short pause, so a diagonal move from the menu item to a link in the dropdown keeps it open. */ transition: opacity 0.2s ease 0.12s, transform 0.2s ease 0.12s, visibility 0s linear 0.32s !important; } .or-header .has-child:hover > .wp-block-navigation__submenu-container, .or-header .has-child:focus-within > .wp-block-navigation__submenu-container { visibility: visible !important; opacity: 1 !important; transform: none; transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s !important; } } /* Tablet and mobile: hamburger + full-screen menu. */ @keyframes or-menu-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } @media (max-width: 1000px) { .or-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; } .or-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; } /* Order: logo · Let's Talk · hamburger. */ .or-header .wp-block-buttons { margin-left: auto; } .or-header .wp-block-navigation { order: 3; margin-left: 10px; margin-right: 0; } .or-header .wp-block-navigation__responsive-container.is-menu-open { padding: 22px 26px 40px !important; } .or-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--white); } .or-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: 56px !important; } .or-header .is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; } /* Each top-level row: label on the left, arrow on the right, hairline between rows. */ .or-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; padding: 15px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 20px; } .or-header .is-menu-open .wp-block-navigation-item__content { padding: 0 !important; } /* Arrow that folds a parent's pages open (added by functions.php, toggled by onerawr.js). */ .or-subtoggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px -12px -10px 0; padding: 0; background: none; border: 0; color: var(--wp--preset--color--white); cursor: pointer; } .or-subtoggle svg { transition: transform 0.3s ease; } .or-subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); } .or-header .is-menu-open .wp-block-navigation__submenu-container { flex-basis: 100%; flex-direction: column; /* The desktop menu is right-justified; the overlay would inherit that. */ align-items: flex-start !important; text-align: left; width: 100% !important; min-width: 0 !important; margin: 12px 0 0 !important; padding: 0 0 0 16px !important; background: transparent !important; box-shadow: none !important; border: 0 !important; border-left: 2px solid var(--wp--preset--color--magenta) !important; border-radius: 0 !important; } /* * Folded until tapped, then slides open, as on the current site. Only once * onerawr.js has booted, so every page stays reachable if the script fails. */ html.or-booted .or-header .is-menu-open .wp-block-navigation__submenu-container { display: flex !important; max-height: 0; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; margin-top: 0 !important; transition: max-height 0.35s ease, margin-top 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s !important; } html.or-booted .or-header .is-menu-open .or-subtoggle[aria-expanded="true"] + .wp-block-navigation__submenu-container { max-height: 640px; opacity: 1 !important; visibility: visible !important; margin-top: 12px !important; transition: max-height 0.35s ease, margin-top 0.35s ease, opacity 0.3s ease 0.05s, visibility 0s !important; } .or-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { padding: 9px 0 !important; font-size: 17px; } .or-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0 !important; } } @media (max-width: 1000px) and (prefers-reduced-motion: no-preference) { /* Core fades the menu in over 0.1s; slow it to something that reads as intentional. */ .or-header .wp-block-navigation__responsive-container.is-menu-open { animation: or-menu-in 0.35s ease-out both !important; } } @media (max-width: 781px) { .or-header { border-radius: 30px; min-height: 70px; padding: 12px 18px 12px 22px; } .or-header .wp-block-site-logo img { width: 118px; } } /* ------------------------------------------------------------------ hero */ .or-hero { margin-block: 0; } .or-hero img { display: block; width: 100%; height: 446px; object-fit: cover; border-radius: 40px; } /* White card rising over the bottom of the hero image. */ .or-hero-card { position: relative; z-index: 1; max-width: 980px !important; margin: -296px auto 0 !important; border-radius: 40px 40px 0 0; padding: 80px 140px 0; } @media (max-width: 781px) { /* The mobile design drops the hero image; the card becomes the page top. */ .or-hero { display: none !important; } .or-hero-card { margin-top: 0 !important; padding: 48px 0 0; border-radius: 0; } .or-hero-card p.has-text-align-center { text-align: left; } } /* -------------------------------------------------------------- services */ .or-service-card { text-align: center; } .or-service-card .or-icon-tile { margin-bottom: 8px; } .or-icon-tile img { width: 100px; height: 100px; padding: 12px; box-sizing: border-box; object-fit: contain; background: var(--wp--preset--color--sky); border-radius: 10px; } @media (max-width: 781px) { .or-services-grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 64px !important; } } /* ---------------------------------------------------- benefits (navy) */ .or-benefits { border-radius: 50px; } .or-benefits .or-benefit-row + .or-benefit-row { margin-top: 60px; } .or-benefit-icon img { width: 66px; height: auto; } @media (max-width: 781px) { .or-benefits { border-radius: 0; } .or-benefits .wp-block-heading { text-align: center; } } /* ------------------------------------------------------------- qualities */ .or-qualities strong { font-family: var(--wp--preset--font-family--figtree); font-weight: 600; } /* Three separate photos, each rounded, so the column reads as three pictures rather than one strip (Harps, 16 Sep). The 12% gap is the 41px the stacked artwork had at this column width. */ .or-qualities-img img { display: block; width: 100%; height: auto; border-radius: 30px; } .or-qualities-stack > .or-qualities-img { margin-block: 0; } .or-qualities-stack > .or-qualities-img + .or-qualities-img { margin-block-start: 12%; } @media (max-width: 781px) { /* On mobile the design shows only the middle photo of the three. */ .or-qualities-stack > .or-qualities-img:not(:nth-child(2)) { display: none; } /* The hidden siblings would otherwise leave their 12% gap behind. */ .or-qualities-stack > .or-qualities-img + .or-qualities-img { margin-block-start: 0; } .or-qualities-img img { aspect-ratio: 350 / 392; object-fit: cover; object-position: 50% 50%; } } /* ------------------------------------------------------ booking (HubSpot) */ .or-book .meetings-iframe-container { max-width: 852px; margin-inline: auto; } .or-book .meetings-iframe-container iframe { width: 100%; } /* HubSpot sizes its iframe to at least 312px; below 360px that outgrows the padded column, so run it edge to edge. !important: the constrained layout pins children to margin-inline auto !important. */ @media (max-width: 359px) { .or-book .meetings-iframe-container { margin-inline: -24px !important; } } /* ---------------------------------------------------------------- helpers */ @media (max-width: 781px) { .or-center-mobile { text-align: center !important; } /* Content buttons go full width on mobile, as in the design. */ .or-main .wp-block-buttons > .wp-block-button, .or-main .wp-block-buttons > .wp-block-button .wp-block-button__link { width: 100%; } } /* ------------------------------------------------------ lists & quick links */ /* Section jumps (quick links, "Let's Chat!") glide instead of snapping. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } [id] { scroll-margin-top: 24px; } /* A left-aligned list sitting centred under centred text, as in the hero cards. */ .or-list-center { width: fit-content; max-width: 100%; margin-inline: auto !important; text-align: left; } .or-quicklinks a { color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--figtree); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .or-quicklinks a:hover { color: var(--wp--preset--color--magenta); } .or-quicklinks li + li { margin-top: 4px; } @media (max-width: 781px) { .or-list-center { margin-inline: 0 !important; } .or-quicklinks { list-style: none; padding-left: 0; } } /* ---------------------------------------------------- image + text rows */ .or-split { gap: 50px !important; } .or-split-img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 30px; } .or-dotted { width: min(830px, 100%) !important; max-width: none !important; height: 0 !important; margin: clamp(48px, 6vw, 72px) auto !important; border: 0 !important; border-top: 2px dotted rgba(27, 25, 64, 0.55) !important; background: none !important; opacity: 1 !important; } .or-cta-band p { max-width: 700px; } @media (max-width: 781px) { .or-split-img img { aspect-ratio: 16 / 9; } /* Image above text on mobile, whichever side it sits on desktop. */ .or-split > .or-split-media { order: -1; } } /* ------------------------------------------------------------------- FAQ */ .or-faq-img img { display: block; width: 100%; height: auto; border-radius: 30px; } .or-faq .wp-block-details { margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--navy); } .or-faq .wp-block-details:last-of-type { border-bottom: 1px solid var(--wp--preset--color--navy); } .or-faq summary { position: relative; padding: 30px 56px 30px 10px; font-size: 19px; line-height: 1.45; color: var(--wp--preset--color--navy); list-style: none; cursor: pointer; transition: color 0.3s ease; } .or-faq summary::-webkit-details-marker { display: none; } .or-faq summary:hover { color: var(--wp--preset--color--magenta); } /* Chevron: points down when closed, up when open. */ .or-faq summary::after { content: ""; position: absolute; top: 50%; right: 20px; width: 10px; height: 10px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform 0.3s ease; } .or-faq details[open] > summary::after { transform: translateY(-25%) rotate(-135deg); } .or-faq .wp-block-details > :not(summary) { margin: 0; padding: 0 56px 30px 10px; } /* Smooth open and close where the browser supports animating details (Chrome 131+); others open instantly. */ @supports (interpolate-size: allow-keywords) { .or-faq { interpolate-size: allow-keywords; } .or-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete; } .or-faq details[open]::details-content { block-size: auto; } } @media (max-width: 781px) { /* Full-bleed landscape photo above the questions, as in the mobile design. */ .or-faq-img { margin-inline: -24px !important; } .or-faq-img img { aspect-ratio: 640 / 300; object-fit: cover; border-radius: 0; } } /* -------------------------------------------------- shared section tweaks */ .or-hero-card .wp-block-list { margin-block: 36px !important; } .or-benefits strong { font-family: var(--wp--preset--font-family--figtree); font-weight: 600; } .or-benefits-split { gap: 70px !important; } .or-faq .wp-block-heading + .wp-block-details { margin-top: 36px; } /* 350px photo, then a ~50px gap before the questions, as in the design. */ .or-faq .wp-block-columns { gap: 48px !important; } /* Desktop design: the heading starts ~48px below the photo's top edge (mobile overrides below). */ .or-faq .wp-block-heading { margin-top: 48px; } /* Art-directed image pairs: one image block for desktop, one for mobile. */ @media (min-width: 782px) { .or-only-mobile { display: none !important; } } @media (max-width: 781px) { .or-only-desktop { display: none !important; } } /* The pair shares a column, so neither photo takes the flow gap above it. */ .or-faq-img { margin-block-start: 0 !important; } @media (max-width: 781px) { /* Mobile design: wide photo flush under the navy block, then an indented heading and larger questions on a narrow measure, chevron level with the first line. */ .or-faq { padding-top: 0 !important; } .or-faq .wp-block-columns { gap: 0 !important; } .or-faq .wp-block-heading { margin-top: 56px; padding-left: 17px; } .or-faq .wp-block-heading + .wp-block-details { margin-top: 20px; } .or-faq summary { padding: 20px 26% 14px 20px; font-size: 20px; line-height: 1.2; } .or-faq summary::after { top: 32px; right: 26px; width: 12px; height: 12px; } .or-faq .wp-block-details > :not(summary) { padding: 4px 20px 12px 20px; font-size: 16px; line-height: 1.5; } } @media (max-width: 781px) { /* The closing band keeps a compact button on mobile, as in the design. */ .or-cta-band .wp-block-buttons > .wp-block-button, .or-cta-band .wp-block-buttons > .wp-block-button .wp-block-button__link { width: auto; } } /* ---------------------------------------------------------------- footer */ .or-footer { border-radius: 50px 50px 0 0; font-size: 16px; } .or-footer a { color: var(--wp--preset--color--white); text-decoration: none; } /* Text links only: the button's hover background is magenta-bright too, so its label would vanish. */ .or-footer a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--magenta-bright); } .or-footer .wp-block-list { list-style: none; padding: 0; margin: 0; } /* Column labels (Services, Industries, Call us, Email us). Questrial has no bold, so use Figtree. */ .or-footer strong { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; } /* A little space under each label. In the contact paragraphs the label is followed by a line break, so make the label a block and hide that break instead. */ .or-footer :is(.or-f-services, .or-f-industries) > li:first-child { margin-bottom: 10px; } .or-footer :is(.or-f-call, .or-f-email) > strong { display: block; margin-bottom: 10px; } .or-footer :is(.or-f-call, .or-f-email) > strong + br { display: none; } /* Sized to stay on one line, as in the design, from tablet up. */ .or-f-title { font-size: clamp(24px, 2.25vw, 30px); } .or-f-tagline { max-width: 330px; } .or-footer .or-f-social { line-height: 0; } .or-footer .or-f-social img { width: 24px; } .or-footer-grid { display: grid; grid-template-columns: 1.6fr 0.75fr 0.8fr 1fr; column-gap: 28px; grid-template-areas: "making services industries call" "making services industries email" "making services industries social" "making services industries address" "badge . logo logo" "legal . logo logo"; } .or-footer .or-footer-grid > * { margin-block: 0; } .or-footer .or-f-making { grid-area: making; padding-right: 48px; } .or-footer .or-f-services { grid-area: services; } .or-footer .or-f-industries { grid-area: industries; } .or-footer .or-f-call { grid-area: call; } .or-footer .or-f-email { grid-area: email; margin-top: 36px; } .or-footer .or-f-social { grid-area: social; margin-top: 26px; } .or-footer .or-f-address { grid-area: address; margin-top: 30px; } .or-footer .or-f-badge { grid-area: badge; margin-top: 48px; } .or-footer .or-f-legal { grid-area: legal; margin-top: 40px; } .or-footer .or-f-logo { grid-area: logo; justify-self: end; align-self: end; } @media (max-width: 781px) { .or-footer { border-radius: 40px 40px 0 0; } .or-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 28px; grid-template-areas: "logo logo" "making making" "call email" "address address" "services industries" "badge social" "legal legal"; } .or-footer .or-f-making { padding-right: 0; } .or-footer .or-f-email, .or-footer .or-f-address, .or-footer .or-f-badge, .or-footer .or-f-legal { margin-top: 0; } .or-footer .or-f-social { margin-top: 0; align-self: center; } .or-footer .or-f-logo { justify-self: center; } .or-footer .or-f-logo img { width: 300px; } /* Mobile keeps only the button from the "Making it happen" block. */ .or-f-making .or-f-title, .or-f-making .or-f-tagline { display: none; } .or-f-making .wp-block-buttons { margin-top: 0 !important; } .or-f-making .wp-block-button, .or-f-making .wp-block-button__link { width: 100%; } } /* ---------------------------------------------------------- scroll reveals */ /* * Matches the live site's entrance animations, measured with anim-probe.js: * service icons fade in over 1.4s, the navy block over 1.2s (ease-in-sine), the * footer columns over 1.2s, and the footer button wipes in left to right. * * Targets are hidden only while has .or-js (set in before first * paint, so nothing flashes) and never for reduced-motion users. onerawr.js adds * .is-visible to each as it enters the viewport; its list must match this one. * The block editor never gets .or-js, so nothing is hidden while editing. */ @keyframes or-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes or-wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: no-preference) { html.or-js:not(.or-anim-off) :is( .or-service-card .or-icon-tile, .or-benefits, .or-footer .or-f-services, .or-footer .or-f-industries, .or-footer .or-f-call, .or-footer .or-f-email, .or-footer .or-f-social, .or-footer .or-f-address, .or-footer .or-f-legal ):not(.is-visible) { opacity: 0; } /* The wrapper is what onerawr.js watches, so clip the button inside it: a fully clipped element may never register as scrolled into view. */ html.or-js:not(.or-anim-off) .or-footer .or-f-making .wp-block-buttons:not(.is-visible) > .wp-block-button { clip-path: inset(0 100% 0 0); } .or-service-card .or-icon-tile.is-visible { animation: or-fade-in 1.4s cubic-bezier(0.445, 0.05, 0.55, 0.95) backwards; } .or-benefits.is-visible { animation: or-fade-in 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) backwards; } .or-footer :is(.or-f-services, .or-f-industries, .or-f-call, .or-f-email, .or-f-social, .or-f-address, .or-f-legal).is-visible { animation: or-fade-in 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) backwards; } .or-footer .or-f-making .wp-block-buttons.is-visible > .wp-block-button { animation: or-wipe-in 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) backwards; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ------------------------------------------------- AI Agents page (page 3) */ /* Hero card holding only a title and button. */ .or-hero-short { padding-bottom: clamp(48px, 6vw, 72px) !important; } .or-agents .wp-block-heading { margin-bottom: 48px; } .or-agent-row { gap: 24px !important; } .or-agents .wp-block-columns + .wp-block-columns { margin-top: 24px; } .or-agent-card { height: 100%; border-radius: 26px; padding: 64px 26px 40px; } .or-agent-card .wp-block-heading { margin: 0 0 14px; font-size: 19px; } .or-agent-card p { margin: 0; } /* The cards' text glides in from the sides (onerawr.js function 5, "Entrance effects" at the end of this file). The section clips so the off-screen start position never adds a horizontal scrollbar. */ .or-agents { overflow-x: clip; } @supports not (overflow: clip) { .or-agents { overflow-x: hidden; } } /* Harps's feedback, 15 Sep: the cards should fill the width as they do on the live page, which holds them 20px from each edge at every size (measured at 1351, 1440 and 1920 — never capped). The section is full-width; on desktop its rows drop the 950px column and its padding tightens to the live 20px. Wider cards also get the live page's roomier side padding (~64px at 1351) so lines keep a similar length. Mobile is untouched: the rows already fill the screen there. */ @media (min-width: 782px) { .or-agents { padding-left: 20px !important; padding-right: 20px !important; } .or-agents > .or-agent-row { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* Anwar, 15 Sep: roomier cards — more space at the sides and top and bottom so the boxes read taller. At 1351: 88 top, 80 sides, 64 bottom (was 64 / 63 / 40). Each value scales down on narrower desktops so text columns are not squeezed. */ .or-agent-card { padding-top: clamp(64px, 6.5vw, 88px); padding-right: clamp(26px, 5.9vw, 80px); padding-bottom: clamp(40px, 4.75vw, 64px); padding-left: clamp(26px, 5.9vw, 80px); } } .or-ready-split { gap: 36px !important; } .or-ready-img img { display: block; width: 100%; height: auto; border-radius: 30px; } @media (max-width: 781px) { /* Mobile design: the copy sits in a grey card, the photo below it, full width. */ .or-ready-split > .wp-block-column:first-child { background: var(--wp--preset--color--mist); border-radius: 30px; padding: 44px 24px; text-align: center; } .or-ready-split .wp-block-buttons { justify-content: center; } .or-ready-split { gap: 32px !important; } .or-agent-card { padding: 36px 24px 32px; } .or-agents .wp-block-heading { margin-bottom: 28px; } /* This page has no FAQ photo on mobile, so the section keeps its own top padding. */ .or-faq-plain { padding-top: clamp(48px, 8vw, 72px) !important; } } @media (max-width: 781px) { /* Mobile design runs the hero button straight into the next heading (~40px), so the card's bottom padding and the section's top padding must not stack up. */ .or-hero-short { padding-bottom: 8px !important; } .or-intro { padding-top: 32px !important; } } /* ------------------------------- Marketing Consulting and Coaching (page 4) */ /* Sections where a photo or panel runs to the edge of the window. */ .or-bleed { overflow-x: clip; } .or-bleed-row { gap: 0 !important; } .or-bleed-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .or-bleed-media > .wp-block-image { margin: 0; height: 100%; } .or-bleed-text { padding: 0 clamp(24px, 5vw, 80px); } .or-strategy .or-bleed-img img { height: clamp(320px, 36vw, 490px); border-radius: 0 40px 40px 0; } .or-bleed-tall img { min-height: 100%; border-radius: 0 40px 40px 0; } .or-coach .or-bleed-tall img { border-radius: 40px 0 0 40px; } /* Sky panel tucked against the section edge, overlapping the photo column. */ .or-side-panel { border-radius: 40px; padding: clamp(32px, 4vw, 56px) clamp(24px, 3.5vw, 56px); margin-top: 48px; } .or-side-panel-right { border-radius: 40px 0 0 40px; margin-right: calc(-1 * clamp(24px, 5vw, 80px)); } .or-side-panel-left { border-radius: 0 40px 40px 0; margin-left: calc(-1 * clamp(24px, 5vw, 80px)); } .or-side-panel .wp-block-heading { margin-bottom: 20px; } /* Navy panel that fills the left half of its section. */ .or-when-panel { height: 100%; border-radius: 0 40px 40px 0; padding: clamp(40px, 6vw, 90px) clamp(28px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; } .or-whento .wp-block-list { margin-top: 28px; } /* Upskill: four photos in a sky panel, each with a white caption card. */ .or-upskill-panel { border-radius: 40px; padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 48px) clamp(32px, 4vw, 56px); margin-top: 36px; } .or-upskill-row { gap: 20px !important; } /* 30px, up from 20: Harps asked for rounder photos here (16 Sep). */ .or-upskill-photo img { display: block; width: 100%; aspect-ratio: 45 / 67; object-fit: cover; border-radius: 30px; } /* 30px caption cards, matching the photos above them (Harps, 16 Sep). */ .or-upskill-caption { position: relative; width: 88%; margin: -56px auto 0; padding: 18px 20px; border-radius: 30px; } .or-upskill-caption p { margin: 0; font-size: 15px; } .or-upskill-panel .wp-block-buttons { margin-top: 8px; } /* The Process: four numbered steps between magenta rules. */ .or-step-row { gap: 28px !important; } .or-step { border-top: 2px solid var(--wp--preset--color--magenta); border-bottom: 2px solid var(--wp--preset--color--magenta); padding: 22px 0 26px; height: 100%; } .or-step .wp-block-heading { display: flex; gap: 10px; align-items: baseline; margin: 0 0 16px; font-size: 19px; } .or-step-n { flex: none; white-space: nowrap; font-family: var(--wp--preset--font-family--questrial); font-size: 26px; opacity: 0.9; } .or-step p { margin: 0; } /* Industries: bordered cards, two per row. */ .or-industry-row { gap: 24px !important; } .or-industry-row + .or-industry-row { margin-top: 24px; } .or-industry-card { height: 100%; border: 1px solid var(--wp--preset--color--navy); border-radius: 26px; padding: 44px 32px; } .or-industry-card .wp-block-heading { margin: 0 0 18px; font-size: 24px; font-weight: 400; } .or-industry-card p { margin: 0; } /* The cards' titles and text glide in on desktop (onerawr.js function 5): the left column from 400px left, the right one from off-screen right, as on the live page. */ /* FAQ column with two stacked photos. */ .or-faq .or-faq-img + .or-faq-img { margin-top: 24px; } @media (max-width: 781px) { /* Everything stacks; the bleeding photos become full-width bands. */ .or-bleed-text { padding: 32px 0 0; } /* Mobile design keeps these photos inset and rounded, not edge to edge. */ .or-strategy .or-bleed-img img, .or-bleed-tall img { height: auto; min-height: 0; aspect-ratio: 16 / 11; border-radius: 30px !important; } /* Panels stay inset on mobile, matching the mobile frame. */ .or-side-panel, .or-side-panel-right, .or-side-panel-left { margin-inline: 0 !important; border-radius: 30px; padding: 32px 24px; } .or-when-panel { border-radius: 30px; padding: 40px 24px; } .or-upskill-row { gap: 28px !important; } .or-upskill-panel { margin-inline: -24px !important; padding: 32px 20px; border-radius: 0; } .or-step-row { gap: 0 !important; } .or-step { margin-bottom: 24px; } .or-industry-card { padding: 32px 24px; } .or-industry-card .wp-block-heading { font-size: 21px; } } /* Industries grid is narrower than the content column in the design. */ .or-industries .or-industry-row { max-width: 700px; margin-inline: auto; } @media (max-width: 781px) { .or-industries .or-industry-row { max-width: none; } } /* --- page 4: measured against the desktop frame (1351 CSS wide) ------------ */ /* Text columns beside a bleeding photo are narrow in the design: they start ~64px after the photo and stop ~210px short of the window edge. */ .or-bleed-text { padding: 0 clamp(24px, 15.5vw, 210px) 0 clamp(24px, 4.7vw, 64px); } /* Sky panels overlap the photo column and run to the window edge. */ .or-side-panel-right { margin-left: -95px; margin-right: clamp(-210px, -15.5vw, -24px); } .or-side-panel-left { margin-left: clamp(-64px, -4.7vw, -24px); margin-right: -40px; } .or-side-panel .wp-block-heading { font-size: 26px; } /* The navy panel fills the full height of its section in the design. */ .or-whento { padding-top: 0 !important; padding-bottom: 0 !important; } .or-whento .or-bleed-text { padding-top: 44px; padding-bottom: 44px; } /* Industry cards carry more top padding in the design. */ .or-industry-card { padding: 64px 32px 40px; } /* Hero: the design wraps the title onto three lines and lifts the card higher over the photo. */ .or-hero-narrow .wp-block-heading { max-width: 580px; margin-inline: auto; } .or-hero-narrow { margin-top: -341px !important; } @media (max-width: 781px) { .or-bleed-text { padding: 32px 0 0 !important; } .or-side-panel-right, .or-side-panel-left { margin-left: 0 !important; margin-right: 0 !important; } .or-whento { padding-top: 0 !important; padding-bottom: 0 !important; } .or-whento .or-bleed-text { padding-top: 28px !important; } .or-industry-card { padding: 32px 24px; } .or-hero-narrow { margin-top: 0 !important; } .or-hero-narrow .wp-block-heading { max-width: none; } } /* Flex items default to min-width:auto, so a long text column was stealing width from the photo column and the 50/50 and 33/64 splits never took effect. */ .or-bleed-row > .wp-block-column { min-width: 0; } /* Per-section gutters, measured off the desktop frame. */ .or-strategy .or-bleed-text { padding-left: 57px; } .or-consultant .or-bleed-text, .or-coach .or-bleed-text { padding-left: 83px; } .or-whento .or-bleed-text { padding-left: 62px; } .or-side-panel-right { margin-left: -114px; } .or-industries .or-industry-row { max-width: 670px; } @media (max-width: 781px) { .or-strategy .or-bleed-text, .or-consultant .or-bleed-text, .or-coach .or-bleed-text, .or-whento .or-bleed-text { padding-left: 0 !important; } } /* These columns size as content-box, so gutters were added on top of the 50%/34% widths and the row shrank both columns. Border-box makes the set ratios hold. */ .or-bleed-row > .wp-block-column { box-sizing: border-box; } /* The sky panel is wider than the content column in the design (1278 of 1351). */ .or-upskill-panel { max-width: 1280px !important; margin-inline: auto; } @media (max-width: 781px) { .or-upskill-panel { max-width: none !important; } } /* The panel is wider than the section's content column, so it needs to break out of it. */ .or-upskill-panel { width: min(1280px, calc(100vw - 48px)); max-width: none !important; /* core forces margin:auto !important on constrained children */ margin-inline: calc((100% - min(1280px, 100vw - 48px)) / 2) !important; } @media (max-width: 781px) { .or-upskill-panel { width: auto; margin-inline: -24px !important; } } /* Panel text lines up with the copy above it, and its heading is full section size in the design. */ .or-side-panel-right { padding-left: 114px; padding-right: 214px; } .or-side-panel-left { margin-left: -202px; padding-left: 202px; padding-right: 56px; } .or-side-panel .wp-block-heading { font-size: var(--wp--preset--font-size--heading); } /* Coach section: copy starts on the content grid, photo takes the right third. */ .or-coach .or-bleed-text { padding-left: 202px; padding-right: 8px; } @media (max-width: 781px) { .or-side-panel-right, .or-side-panel-left { padding-left: 24px !important; padding-right: 24px !important; margin-left: 0 !important; } .or-coach .or-bleed-text { padding-left: 0 !important; padding-right: 0 !important; } .or-side-panel .wp-block-heading { font-size: 27px; } } /* Vertical rhythm measured against the desktop frame (section tops within ~20px). */ .or-hero-narrow { padding-bottom: 141px !important; } .or-upskill { padding-bottom: 40px !important; } .or-upskill-panel { padding-top: 36px !important; padding-bottom: 36px !important; } .or-upskill-photo img { aspect-ratio: 45 / 58; } .or-whento .or-bleed-text { padding-top: 72px; padding-bottom: 72px; } .or-whento .wp-block-list li { margin-bottom: 6px; } .or-faq-consult { padding-bottom: 24px !important; } @media (max-width: 781px) { .or-hero-narrow { padding-bottom: 8px !important; } .or-upskill { padding-bottom: 48px !important; } .or-upskill-photo img { aspect-ratio: 45 / 67; } .or-whento .or-bleed-text { padding-top: 28px !important; padding-bottom: 32px !important; } } /* Final vertical tuning against the frame. */ .or-process { padding-top: 130px !important; padding-bottom: 130px !important; } .or-upskill { padding-top: 40px !important; } .or-side-panel { margin-top: 32px; padding: 40px clamp(24px, 3.5vw, 56px); } .or-faq-consult { padding-top: 60px !important; } @media (max-width: 781px) { .or-process { padding-top: 56px !important; padding-bottom: 56px !important; } .or-upskill { padding-top: 48px !important; } .or-side-panel { padding: 32px 24px !important; } .or-faq-consult { padding-top: 48px !important; } } @media (max-width: 781px) { /* This page's mobile frame sets section headings ~30px (pages 1-3 use 27px, so scope it). */ .or-strategy .wp-block-heading, .or-upskill > .wp-block-heading, .or-process > .wp-block-heading, .or-consultant .or-bleed-text > .wp-block-heading, .or-whento .or-when-panel .wp-block-heading, .or-coach .or-bleed-text > .wp-block-heading, .or-both .wp-block-heading, .or-industries > .wp-block-heading, .or-faq-consult .wp-block-heading, .or-cta-navy .wp-block-heading, .or-book .wp-block-heading { font-size: 30px; } } @media (max-width: 781px) { /* Mobile frame: the sky panel stays inset with rounded corners, and its photos are close to square rather than tall portraits. */ .or-upskill-panel { width: auto !important; margin-inline: 0 !important; border-radius: 30px; padding: 24px 20px 32px !important; } .or-upskill-photo img { aspect-ratio: 26 / 25; border-radius: 30px; } .or-upskill-caption { width: 84%; margin: -40px 0 0 12%; } } /* Navy panel: the frame indents its text 202px from the left and 218px from the right. */ .or-when-panel { padding: 90px 218px 90px 202px !important; } @media (max-width: 1000px) { .or-when-panel { padding: 60px 40px !important; } } @media (max-width: 781px) { .or-when-panel { padding: 40px 24px !important; } } /* --- revision round: measured at 1351 (design) and checked at 1920 --------- */ /* 1 + 5. Beyond the design width the columns keep stretching, so the text ran to ~1100px lines. Cap each text block to the measure the frame uses. */ .or-strategy .or-bleed-text > *:not(.or-side-panel) { max-width: 390px; } .or-whento .or-bleed-text > *:not(.or-side-panel) { max-width: 410px; } .or-consultant .or-bleed-text > *:not(.or-side-panel), .or-side-panel-right > * { max-width: 600px; } .or-coach .or-bleed-text > *:not(.or-side-panel), .or-side-panel-left > * { max-width: 710px; } /* 3. Panel gutters (a later rule had flattened these to 56px both sides). */ .or-side-panel-right { padding-left: 114px !important; padding-right: 214px !important; } .or-side-panel-left { padding-left: 202px !important; padding-right: 56px !important; } /* 2. Breathing room under "Need more Guidance?" before the button. */ .or-upskill-panel > p { margin-bottom: 28px; } /* 4. The frame left-aligns this button under the heading. */ .or-when-panel .wp-block-buttons { justify-content: flex-start !important; } /* 6. Lighter card padding, and clip the section so the glide-in can't flash a scrollbar. */ .or-industry-card { padding: 44px 32px 36px; } .or-industries { overflow-x: clip; } @supports not (overflow: clip) { .or-industries { overflow-x: hidden; } } /* 7. Room under the FAQ and under its stacked photos. */ .or-faq-consult { padding-bottom: 72px !important; } .or-faq-consult .or-faq-img:last-child { margin-bottom: 40px; } @media (max-width: 781px) { .or-strategy .or-bleed-text > *, .or-whento .or-bleed-text > *, .or-consultant .or-bleed-text > *, .or-coach .or-bleed-text > *, .or-side-panel-right > *, .or-side-panel-left > * { max-width: none; } .or-side-panel-right, .or-side-panel-left { padding-left: 24px !important; padding-right: 24px !important; } .or-industry-card { padding: 32px 24px; } .or-faq-consult { padding-bottom: 48px !important; } } /* The button sits left under the heading in the frame; the panel's flex layout was centring it. */ .or-when-panel { align-items: flex-start; } .or-when-panel > * { width: 100%; } .or-when-panel .wp-block-buttons { justify-content: flex-start !important; } /* Constrained groups centre their children; the panels align left with the copy above them. */ .or-side-panel > * { margin-left: 0 !important; margin-right: auto !important; } @media (max-width: 781px) { /* Consultant and coach use their own mobile crops (640x720) rather than the tall desktop photos. */ .or-bleed-mobile img { aspect-ratio: 640 / 720 !important; height: auto !important; min-height: 0 !important; border-radius: 30px !important; object-fit: cover; } } @media (max-width: 781px) { /* 8. The mobile frame uses 38px side gutters for content (root padding is 24px, so add 14), and insets the full-width navy bands by 18px instead of running them edge to edge. */ .or-strategy, .or-upskill, .or-consultant, .or-whento, .or-coach, .or-industries, .or-faq-consult, .or-book { padding-left: 14px !important; padding-right: 14px !important; } .or-process, .or-both, .or-cta-navy { margin-inline: 18px !important; padding-left: 20px !important; padding-right: 20px !important; } /* Steps stack the number above the title on mobile. */ .or-step .wp-block-heading { flex-direction: column; align-items: flex-start; gap: 2px; } } @media (max-width: 781px) { /* 8 (corrected). Mobile frame: text sits 38px from each edge, while photos, panels, cards and the navy bands sit 18px in. Sections that hold both use 18px and push their text in by a further 20px. */ .or-strategy, .or-consultant, .or-whento, .or-coach, .or-industries { padding-left: 18px !important; padding-right: 18px !important; } .or-upskill, .or-faq-consult { padding-left: 38px !important; padding-right: 38px !important; } .or-book { padding-left: 24px !important; padding-right: 24px !important; } .or-bleed-text { padding-left: 20px !important; padding-right: 20px !important; } /* Full-width bands: keep core's escape from the root padding, then inset by 18px. */ .or-process, .or-both, .or-cta-navy { margin-left: -6px !important; margin-right: -6px !important; padding-left: 20px !important; padding-right: 20px !important; } /* Panels sit 18px in, with their own 20px of inner padding. */ .or-upskill-panel { margin-inline: -20px !important; padding-left: 20px !important; padding-right: 20px !important; } .or-side-panel-right, .or-side-panel-left { margin-inline: -20px !important; padding-left: 20px !important; padding-right: 20px !important; } .or-when-panel { padding-left: 20px !important; padding-right: 20px !important; } /* Industry cards: 18px from the edge, text 20px inside them. */ .or-industries > .wp-block-heading, .or-industries > .wp-block-buttons { padding-left: 20px; padding-right: 20px; } .or-industry-card { padding: 28px 20px; } } @media (max-width: 781px) { /* Full-width sections start at 0 (they escape the page padding); normal sections start at 24px. Target: text 38px in, photos/panels/cards 18px in. */ .or-strategy .or-bleed-text, .or-consultant .or-bleed-text, .or-coach .or-bleed-text, .or-whento .or-bleed-text { padding-left: 20px !important; padding-right: 20px !important; } .or-upskill, .or-faq-consult, .or-industries { padding-left: 14px !important; padding-right: 14px !important; } .or-hero-narrow { padding-left: 14px !important; padding-right: 14px !important; } .or-book { padding-left: 14px !important; padding-right: 14px !important; } .or-industries > .wp-block-heading, .or-industries > .wp-block-buttons { padding-left: 0; padding-right: 0; } .or-industry-row { margin-left: -20px !important; margin-right: -20px !important; } } @media (max-width: 359px) { /* HubSpot's calendar needs 312px; below 360 the booking section gives up its gutters. */ .or-book { padding-left: 0 !important; padding-right: 0 !important; } .or-book .meetings-iframe-container { margin-inline: -24px !important; } } /* ===== revision 2: mobile measured from the frame's pixels ================== The mobile export carries a 10px white border around a 320px canvas. Measured there: text ~22px from each edge, navy bands and the upskill panel full-bleed, the other sky panels and the industry cards inset 16px, photos full-bleed. */ @media (max-width: 781px) { /* Sections keep the page's own 24px gutters for text. */ .or-strategy, .or-consultant, .or-whento, .or-coach, .or-industries, .or-upskill, .or-faq-consult { padding-left: 24px !important; padding-right: 24px !important; } .or-hero-narrow { padding-left: 0 !important; padding-right: 0 !important; } .or-book { padding-left: 24px !important; padding-right: 24px !important; } .or-strategy .or-bleed-text, .or-consultant .or-bleed-text, .or-coach .or-bleed-text, .or-whento .or-bleed-text { padding-left: 0 !important; padding-right: 0 !important; } /* 6, 7, 10, 12: navy bands and the upskill panel run edge to edge. */ .or-process, .or-both, .or-cta-navy { margin-left: 0 !important; margin-right: 0 !important; padding-left: 24px !important; padding-right: 24px !important; } .or-upskill-panel { margin-left: -24px !important; margin-right: -24px !important; padding-left: 20px !important; padding-right: 20px !important; border-radius: 30px; } /* Photos are full-bleed on mobile. */ .or-bleed-media { margin-left: -24px !important; margin-right: -24px !important; } .or-bleed-mobile img, .or-strategy .or-bleed-img img { border-radius: 0 !important; } /* The two overlapping panels and the cards sit 16px in (24 - 8). */ .or-side-panel-right, .or-side-panel-left { margin-left: -8px !important; margin-right: -8px !important; padding-left: 20px !important; padding-right: 20px !important; } .or-industry-row { margin-left: -8px !important; margin-right: -8px !important; } .or-industries > .wp-block-heading, .or-industries > .wp-block-buttons { padding-left: 0; padding-right: 0; } /* 8. Space above the navy Process band. */ .or-process { margin-top: 40px !important; } /* 9. The frame shows the coach photo above its heading. */ .or-coach .or-bleed-row { display: flex; flex-direction: column; } .or-coach .or-bleed-media { order: -1; margin-bottom: 28px; } /* 11. No glide on mobile here, and nothing clipping the card borders. */ html.or-js .or-industry-card, html.or-js:not(.or-anim-off) .or-industry-card { opacity: 1 !important; animation: none !important; transform: none !important; } .or-industries { overflow-x: visible; } } /* ===== revision 2: desktop items ========================================== */ /* 1. Space above "Need more Guidance?". */ .or-upskill-panel > p { margin-top: 34px; } /* 2. Caption cards share one height across the row. */ .or-upskill-row > .wp-block-column { display: flex; } .or-upskill-card { display: flex; flex-direction: column; width: 100%; } .or-upskill-caption { flex: 1 1 auto; display: flex; align-items: center; } /* 3. The advantage panel sits lower in the frame. */ .or-side-panel { margin-top: 72px; } /* 4. Tighter gaps between the industry cards. */ .or-industry-row { gap: 16px !important; } .or-industry-row + .or-industry-row { margin-top: 16px; } /* 5. Space between the two stacked FAQ photos. */ .or-faq-consult .or-faq-img + .or-faq-img { margin-top: 32px; } @media (max-width: 781px) { /* Full-bleed means escaping the page's 24px padding, not zeroing the margin. */ .or-process, .or-both, .or-cta-navy { margin-left: -24px !important; margin-right: -24px !important; } .or-upskill-panel { width: auto !important; margin-left: -24px !important; margin-right: -24px !important; } } @media (max-width: 781px) { /* Core sets margin:auto !important on constrained/wide children with higher specificity, so these need to out-specify it to reach the screen edges. */ .or-upskill .or-upskill-panel.alignwide { width: auto !important; max-width: none !important; margin-left: -24px !important; margin-right: -24px !important; } .or-industries .or-industry-row { max-width: none !important; margin-left: -8px !important; margin-right: -8px !important; } } @media (max-width: 781px) { /* Normal sections already sit inside the page's 24px padding; adding their own doubled it, so panels could never reach the screen edge. Full-width sections still need their 24px. */ .or-upskill, .or-industries, .or-faq-consult, .or-book { padding-left: 0 !important; padding-right: 0 !important; } } /* FAQ photos: the page-2 rule zeroes the flow gap with !important, so this needs it too. */ .or-faq-consult .or-faq-img + .or-faq-img { margin-top: 32px !important; } @media (max-width: 781px) { /* White space above the navy "When should you bring in..." box and below the "Working with One Rawr" panel, as in the mobile frame. */ .or-whento { margin-top: 40px !important; } .or-side-panel-left { margin-bottom: 40px !important; } } /* ===== page 5: ABOUT US | Team ============================================== * Measured off the two design frames — desktop 2702px with no export border * (1351 CSS), mobile 656px with an 8px white border (320 CSS). Type sizes were * fitted by rendering the theme's own fonts against the frames' text widths, so * the line breaks in both frames are reproduced exactly. Written mobile-first: * the plain rules are the 320 frame, the min-width block is the 1351 frame, and * the hero's inner geometry is in percentages of its 980px column so the two * measured widths interpolate instead of jumping at the breakpoint. */ /* --- hero ---------------------------------------------------------------- */ /* The mobile frame drops the photo and leads with the headline. */ .or-team-photo { display: none; } .or-team-photo img { display: block; width: 100%; border-radius: 35px; } /* Flush under the photo: the flow gap would drop the row 22px in the frame. */ .or-team-hero-row { margin-block-start: 0; } .or-team-hero { padding-top: 43px; /* The mobile frame leaves only 3px between the card and the navy band; Anwar asked for breathing room there, so mobile opens to 40px and desktop keeps the frame's 53px. */ padding-bottom: clamp(40px, calc(35.96px + 1.261vw), 53px); } .or-team-title { margin: 0; font-size: clamp(35.5px, calc(26.97px + 2.667vw), 63px); line-height: 1.06; } .or-team-card { box-sizing: border-box; border-radius: 35px; box-shadow: 0 8px 30px rgba(27, 25, 64, 0.08); padding: clamp(34.5px, calc(16.4px + 5.66vw), 93px) clamp(23px, calc(12.14px + 3.3947vw), 58px); } .or-team-card p { font-size: 14px; line-height: 22px; margin: 0; } /* One blank line between paragraphs, as in both frames (the reset above would drop it). */ .or-team-card p + p { margin-top: 22px; } @media (min-width: 782px) { .or-team-photo { display: block; } .or-team-hero { padding-top: 0; } /* Headline left, card right and lifted over the photo. The frame's values — card 536, right inset 84, headline drop 100, lift 96 — hold from 1028px up, where the column reaches its full 980; below that each keeps its share of the narrower column. (A percentage would resolve against the section, not this column, so the sizes are written against the viewport instead.) */ .or-team-hero-row { display: flex; align-items: flex-start; padding-right: min(84px, calc(8.57vw - 4.11px)); } .or-team-title { flex: 1 1 auto; min-width: 0; padding-top: min(100px, calc(10.2vw - 4.9px)); } .or-team-card { flex: 0 0 min(536px, calc(54.69vw - 26.25px)); margin-top: max(-96px, calc(4.7px - 9.8vw)); } .or-team-card p { font-size: 15px; } } /* --- why one rawr (navy band) -------------------------------------------- */ .or-team-why { padding-top: clamp(17px, calc(1.48px + 4.85vw), 67px); padding-bottom: clamp(40px, calc(23.55px + 5.14vw), 93px); } .or-team-why p { font-size: 14px; line-height: 19.6px; } .or-team-why p + p { margin-block-start: 19.6px; } /* Short rule under the heading: 120x2.5 in the desktop frame, 31x3 in the mobile one. */ .or-team-rule.wp-block-separator { width: 31px; height: 3px; border: 0; /* White, named outright: currentColor resolved to core's grey separator colour (rgb 128,128,128), not the band's white text — Harps's feedback, 15 Sep. */ background: var(--wp--preset--color--white); color: var(--wp--preset--color--white); opacity: 1; margin: 18px auto 12px; } /* The desktop frame breaks the founder paragraph after "marketing"; the mobile frame runs it on, so the break only exists above the breakpoint. */ .or-team-why .or-team-rule + p { margin-block-start: 0; } .or-br-lg { display: none; } @media (min-width: 782px) { .or-team-why p { font-size: 15px; line-height: 22px; } .or-team-why p + p { margin-block-start: 22px; } .or-team-rule.wp-block-separator { width: 120px; height: 2.5px; margin: 8px auto 59px; } .or-br-lg { display: inline; } } /* Every section here is full-width, so WordPress gives its children the site's 24px root padding. The mobile frame insets them 20px instead — which is what sets the line breaks — and the scheduler sits 5px from each edge. */ @media (max-width: 781px) { .or-team-hero, .or-team-why, .or-team-values { padding-left: 20px !important; padding-right: 20px !important; } .or-team-book { padding-left: 5px !important; padding-right: 5px !important; } } /* --- our values ---------------------------------------------------------- */ .or-team-values { padding-top: clamp(42px, calc(36.7px + 1.65vw), 59px); padding-bottom: clamp(49.5px, calc(27.3px + 6.94vw), 121px); } .or-team-values-h { margin: 0; } /* Mobile: 2x2, each 70px tall, columns sized to their art so the pairs stay as close together as the frame shows. The frame also leads with Take Care of Others, which `order` does without disturbing the reading order. */ .or-team-values-row { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; justify-items: center; column-gap: 14px; row-gap: 19px; margin-top: clamp(24.5px, calc(12.5px + 3.74vw), 63px); } .or-team-values-row > figure { margin: 0; } .or-team-values-row img { display: block; width: auto; height: 70px; } @media (max-width: 781px) { .or-team-values-row > :nth-child(1) { order: 2; } .or-team-values-row > :nth-child(2) { order: 3; } .or-team-values-row > :nth-child(3) { order: 1; } .or-team-values-row > :nth-child(4) { order: 4; } } @media (min-width: 782px) { /* One row, each at a third of its natural size, 97px apart — all measured. */ .or-team-values-row { grid-template-columns: repeat(4, auto); column-gap: 97px; } .or-team-values-row img { height: auto; } .or-team-values-row > :nth-child(1) img { width: 151px; } .or-team-values-row > :nth-child(2) img { width: 149px; } .or-team-values-row > :nth-child(3) img { width: 169px; } .or-team-values-row > :nth-child(4) img { width: 119px; } } /* --- book a meeting ------------------------------------------------------ */ .or-team-book { padding-top: 0; padding-bottom: clamp(51.5px, calc(41.1px + 3.25vw), 85px); } /* ===== page 6: ABOUT US | Contact =========================================== * One section — heading, paragraph, scheduler. Measured off the frames: desktop * 2702px (1351 CSS), mobile 640px with no export border (320 CSS). Mobile-first; * the min-width block is the desktop frame. Sizes interpolate between the two * measured widths so nothing jumps at the breakpoint. */ .or-contact-intro { padding-top: clamp(46px, calc(32.34px + 4.268vw), 90px); padding-bottom: 0; } /* Black in both frames, not the navy the other headings use. 40px at 1351, 28px at 320 — matched on ink width and cap height together, which is what told us the frame's heading is Figtree 700 and not the live page's Questrial. */ .or-contact-h { margin: 0 0 clamp(17.6px, calc(3.2px + 4.501vw), 64px); font-size: clamp(28px, calc(24.28px + 1.1639vw), 40px); } .or-contact-lead { margin: 0; font-size: 14px; line-height: 22px; } .or-contact-book { /* Halved from the frame's 129/70 at Harps's request (15 Sep): now 64 on desktop — the same gap as heading to paragraph above it — and 40 on mobile. */ padding-top: clamp(40px, calc(32.55px + 2.328vw), 64px); padding-bottom: clamp(48px, calc(42.41px + 1.746vw), 66px); } @media (min-width: 782px) { .or-contact-lead { font-size: 15px; } } /* Both sections are full-width, so WordPress gives their children the site's 24px root padding. The mobile frame insets the text 20px — which is what produces its seven lines — and the scheduler 7px. */ @media (max-width: 781px) { .or-contact-intro { padding-left: 20px !important; padding-right: 20px !important; } .or-contact-book { padding-left: 7px !important; padding-right: 7px !important; } } /* ===== page 7: ABOUT US | Privacy Policy ==================================== * A single column of legal copy. Measured off the frames: desktop 2702px * (1351 CSS), mobile 640px (320 CSS), neither with an export border. The whole * page runs on the theme's 22px line-and-gap rhythm, which is what both frames * show, so the only spacing rules here are the ones that depart from it. */ .or-privacy { padding-top: clamp(46px, calc(32.34px + 4.268vw), 90px); padding-bottom: clamp(46.5px, calc(11.8px + 10.844vw), 158.3px); } /* Black, as on the Contact page — not the navy the rest of the site's headings use. */ .or-privacy-h { margin: 0 0 clamp(17.6px, calc(11.52px + 1.9vw), 37.2px); font-size: clamp(28px, calc(24.28px + 1.1639vw), 40px); } /* The section labels are h2 for structure and search, but both frames set them as ordinary body text — same face, size, weight and colour — sitting directly above their paragraph with no gap, on the same 22px rhythm. */ .or-privacy-sub { /* One blank line above, none below: the label and its paragraph read as one unit in both frames. A plain margin:0 here also cancelled the gap above. */ margin-block-start: 22px; margin-block-end: 0; font-family: var(--wp--preset--font-family--questrial); font-size: 14px; font-weight: 400; line-height: 22px; color: var(--wp--preset--color--navy); } .or-privacy-sub + p { margin-block-start: 0; } /* The heading owns the gap below it; on mobile its 17.6px is smaller than the flow gap, which would otherwise win the collapse and push the text down. */ .or-privacy-h + p { margin-block-start: 0; } .or-privacy p, .or-privacy li { font-size: 14px; line-height: 22px; } .or-privacy li { margin: 0; } /* Same as the labels: the flow gap is the rhythm, so keep it above and drop it below. */ .or-privacy ul { margin-block-start: 22px; margin-block-end: 0; padding-left: 14px; } /* Two blank lines before the effective date, and the frames set it in bold italic Figtree — the body face has neither, so it is named explicitly. */ .or-privacy-date { margin-block-start: 44px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-style: italic; } @media (min-width: 782px) { .or-privacy p, .or-privacy li, .or-privacy-sub { font-size: 15px; } .or-privacy ul { padding-left: 23px; } } /* Full-width section, so its children carry the root padding; the mobile frame insets the text 20px, which is what sets its line breaks. */ @media (max-width: 781px) { /* The frame's mobile column runs x20..295.5 — 276 wide, sitting 20 from the left. */ .or-privacy { padding-left: 20px !important; padding-right: 24px !important; } /* The mobile frame's line pitch is bimodal 22/23px across 213 gaps — a fractional 22.4px line height (14px x 1.6), not the 22px the desktop frame uses. Keeping the blank-line gaps on the same 22.4 rhythm holds the whole column in step. */ .or-privacy p, .or-privacy li, .or-privacy-sub { line-height: 22.4px; } .or-privacy > * { margin-block-start: 22.4px; } .or-privacy > .or-privacy-h { margin-block-start: 0; } .or-privacy > .or-privacy-date { margin-block-start: 44.8px; } .or-privacy-h + p, .or-privacy-sub + p { margin-block-start: 0; } /* The mobile frame draws no bullets: list items sit on the body margin like paragraphs, which also gives them the frame's wider text column. The markup stays a real list, so structure and screen readers are unaffected. */ .or-privacy ul { padding-left: 0; list-style: none; } } /* ===== page 8: SERVICES | Fractional VP Marketing =========================== * Measured off the frames: desktop 3003px with a 150px white export border each * side (a 1351 CSS canvas inside it), mobile 640px with none (320 CSS). Type was * fitted by ink width against the theme's own fonts: headings 40px desktop / 25px * mobile (Figtree 700, 1.2), body 15px/22 on both, card titles 24px Questrial at * -0.02em desktop / 15px Figtree 700 mobile, FAQ questions 20px. Column widths are * the ones at which every paragraph breaks where the frame breaks it. * Mobile-first: plain rules are the 320 frame, the min-width block is the 1351 one. * Numbers and sources: vp-marketing-design.md. */ /* Shared bits: 22px body rhythm, 45px buttons (35 on mobile). */ :is(.or-vp-hero, .or-vp-what, .or-vp-band, .or-vp-why, .or-vp-panel, .or-vp-path, .or-vp-faq) p { font-size: 15px; line-height: 22px; } .or-vp-h { margin: 0; line-height: 1.2; font-size: 25px; } .or-vp-btns .wp-block-button__link { padding: 6px 21px; box-sizing: border-box; } /* The frames change a few colours between desktop and mobile; each is named per breakpoint rather than inherited. */ .or-vp-title, .or-vp-speak-h { color: var(--wp--preset--color--black); } .or-vp-path-h { color: var(--wp--preset--color--navy); } /* --- hero ------------------------------------------------------------------ */ .or-vp-hero-img { display: none; margin: 0; } .or-vp-hero-img img { display: block; width: 100%; height: 489px; object-fit: cover; border-radius: 0; } .or-vp-hero { padding: 0 30px; } /* margin 0: the hidden photo still counts as a first child for the flow gap. */ .or-vp-hero-card { margin-top: 0; padding: 44.75px 0 0; } .or-vp-hero-card > * { margin-block: 0; } .or-vp-title { text-align: center; font-size: 25px; line-height: 1.2; } .or-vp-hero-card > .or-vp-lead { margin-top: 25.35px; } .or-vp-hero-card > .or-vp-btns { margin-top: 24.9px; } /* --- what is ---------------------------------------------------------------- */ .or-vp-what { padding: 44.75px 30px 44.9px !important; } .or-vp-what > * { margin-block: 0; } .or-vp-what > .or-vp-h + p { margin-top: 25.35px; } .or-vp-what > p + p { margin-top: 22px; } /* --- unlock band ------------------------------------------------------------ */ .or-vp-band { padding: 50.25px 30px 50px !important; } .or-vp-band > * { margin-block: 0; } .or-vp-band .or-vp-h { text-align: center; } .or-vp-band > .or-vp-btns { margin-top: 29.75px; } /* --- why choose + cards ----------------------------------------------------- */ .or-vp-why { padding: 50.25px 30px 50px !important; } .or-vp-why > * { margin-block: 0; } .or-vp-why > .or-vp-h + p { margin-top: 24.85px; } .or-vp-why > .or-vp-cards.wp-block-columns { max-width: none !important; margin: 24.9px -30px 0 !important; gap: 25px !important; } .or-vp-card { box-sizing: border-box; height: 100%; border-radius: 35px; padding: 26.55px 30px 29.45px; } .or-vp-card > * { margin-block: 0; } .or-vp-card-title { font-family: var(--wp--preset--font-family--figtree); font-size: 15px; font-weight: 700; line-height: 22px; color: inherit; } .or-vp-card > p { margin-top: 15px; } .or-vp-card-cost, .or-vp-card-seamless { color: var(--wp--preset--color--navy); } /* --- ready (navy panel) ----------------------------------------------------- */ .or-vp-panel { border-radius: 35px; padding: 31.4px 30px 29.1px; } .or-vp-panel-cols.wp-block-columns { margin: 0; gap: 19.35px !important; } .or-vp-panel-cols > .wp-block-column > * { margin-block: 0; } .or-vp-panel .or-vp-h { text-align: center; } .or-vp-panel-copy > p { padding-inline: 2px; } .or-vp-panel-copy > .or-vp-btns { margin-top: 20.2px; } /* --- path to success -------------------------------------------------------- */ /* Anwar, 16 Sep: more air above this section than the frame shows (20px mobile, 0 desktop). */ .or-vp-path { padding: 40px 0 0; } .or-vp-path-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-vp-path-img { margin: 0; } /* 320x200 in the frame; the ratio holds on wider phones and tablets. */ .or-vp-path-img img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; object-position: 50% 50%; border-radius: 35px; } .or-vp-path-copy { padding: 70.9px 30px 0; } .or-vp-path-copy > * { margin-block: 0; } .or-vp-path-copy > .or-vp-h + p { margin-top: 24.85px; } .or-vp-path-copy > p + ul, .or-vp-path-copy > ul + p { margin-top: 22px; } .or-vp-path-copy ul { padding-left: 23px; font-size: 15px; line-height: 22px; } .or-vp-path-copy > .or-vp-btns { margin-top: 24.9px; } /* --- speak to our CEO ------------------------------------------------------- */ /* HubSpot insets its card 4px inside a 312px-minimum iframe: 4px here puts the card 8px in, as in the frame. */ .or-vp-speak { padding: 88.25px 4px 0 !important; } .or-vp-speak > * { margin-block: 0; } .or-vp-speak-h { text-align: center; } .or-vp-speak > .or-vp-h + * { margin-top: 27.75px; } .or-vp-speak .meetings-iframe-container iframe { display: block; width: 100%; } /* --- FAQ: the shared accordion, re-measured ---------------------------------- */ .or-vp-faq { padding: 0 30px 61.5px !important; } .or-vp-faq-media { display: none; } .or-vp-faq .or-vp-faq-cols.wp-block-columns { margin: 0; gap: 0 !important; } /* HubSpot leaves ~89px of empty iframe under its card on phones; the frame puts this heading 63px under the card, so it rises into that blank space. */ .or-vp-faq .or-vp-faq-list > .or-vp-h { font-size: 27px; line-height: 1.05; margin: -29.2px 0 0; padding-left: 17px; } .or-vp-faq .or-vp-faq-list > .or-vp-h + .wp-block-details { margin-top: 20px; } .or-vp-faq .wp-block-details { margin-block: 0; } /* min-height 87: a two-line question gets 20px above and below, longer ones 20 and 11. */ .or-vp-faq.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-vp-faq.or-faq .wp-block-details > :not(summary) { padding: 9.4px 20px 10.5px 20px; font-size: 16px; line-height: 24px; } .or-vp-faq.or-faq summary::after { top: 34.5px; right: 29px; width: 11px; height: 11px; } .or-vp-faq.or-faq details[open] > summary::after { top: 35.5px; } /* ----------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-vp-h { font-size: 40px; } .or-vp-btns .wp-block-button__link { padding: 9.5px 21px; } .or-vp-btns-fixed .wp-block-button__link { min-width: 155px; } .or-vp-btns-center { justify-content: center; } .or-main .or-vp-btns > .wp-block-button, .or-main .or-vp-btns > .wp-block-button .wp-block-button__link { width: auto; } .or-vp-title { color: var(--wp--preset--color--navy); } .or-vp-speak-h { color: var(--wp--preset--color--navy); } .or-vp-path-h { color: var(--wp--preset--color--black); } /* Hero: full-width photo, 980px card lifted 339px over it; the headline sits left on a narrower measure than the centred paragraph under it. */ .or-vp-hero { padding: 0; } .or-vp-hero-img { display: block; } .or-vp-hero-card { position: relative; box-sizing: border-box; width: min(980px, calc(100% - 48px)); margin: -339px auto 0; border-radius: 35px 35px 0 0; padding: 94.3px clamp(40px, calc(11.2vw - 41px), 110px) 0; } /* Anwar, 16 Sep: centred, where the frame sets it left. The 540px measure stays, so the headline still breaks over the frame's three lines. */ .or-vp-hero-card > .or-vp-title { font-size: 40px; text-align: center; max-width: 540px; } .or-vp-hero-card > .or-vp-lead { margin-top: 55.8px; text-align: center; } .or-vp-hero-card > .or-vp-btns { margin-top: 41.9px; } .or-vp-what { padding: 68.3px 24px 106.9px !important; text-align: center; } .or-vp-what > .or-vp-h + p { margin-top: 48.8px; } .or-vp-band { padding: 82.3px 24px 61.5px !important; } .or-vp-band > .or-vp-btns { margin-top: 41.7px; } .or-vp-why { padding: 64.3px 24px 70px !important; text-align: center; } .or-vp-why > .or-vp-h + p { margin-top: 25.8px; } /* 947.5 wide: wider than the text column above it. */ .or-vp-why > .or-vp-cards.wp-block-columns { max-width: 1007.5px !important; margin: 37.9px auto 0 !important; gap: 30px !important; text-align: left; } /* Each column holds its share of 306 / 348 / 293.5 at any width. */ .or-vp-cards.wp-block-columns > .wp-block-column { flex-basis: 0; min-width: 0; } .or-vp-cards.wp-block-columns > .wp-block-column.or-vp-card-col-expertise { flex-grow: 306; } .or-vp-cards.wp-block-columns > .wp-block-column.or-vp-card-col-cost { flex-grow: 348; } .or-vp-cards.wp-block-columns > .wp-block-column.or-vp-card-col-seamless { flex-grow: 293.5; } /* 40px sides at 1351, easing to 24 on narrow desktops so the first card keeps a usable measure. */ .or-vp-card { padding: 40.2px clamp(24px, calc(8.4vw - 73.5px), 40px) 33.9px; } .or-vp-card-title { font-family: var(--wp--preset--font-family--questrial); font-size: 24px; font-weight: 400; line-height: 25px; letter-spacing: -0.02em; /* Narrower than the body copy: 215 is the only width that breaks all three titles as the frame does. */ max-width: 215px; } .or-vp-card > .or-vp-card-title { margin-left: 0 !important; } .or-vp-card > p { margin-top: 23.9px; } .or-vp-card-cost, .or-vp-card-seamless { color: var(--wp--preset--color--black); } .or-vp-card-cost.has-mist-background-color { background-color: #fafafa !important; } /* Navy panel: headline column from x258, copy column from x713.5. */ .or-vp-panel { padding: 131.8px 24px 172.2px; } .or-vp-panel-cols.wp-block-columns { max-width: 835px; margin: 0 auto; gap: 61.5px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-vp-panel-cols > .or-vp-panel-head.wp-block-column { flex: 0 1 394px; min-width: 0; padding-left: 1.5px; } .or-vp-panel-cols > .or-vp-panel-copy.wp-block-column { flex: 0 1 379.5px; min-width: 0; padding-top: 10.8px; padding-left: 0.5px; } .or-vp-panel .or-vp-h { text-align: left; } .or-vp-panel-copy > p { padding-inline: 0; } /* The frame sets the button 7px left of the copy above it. */ .or-vp-panel-copy > .or-vp-btns { margin-top: 63.4px; margin-left: -7px; } /* Path: 501x784 photo flush left, copy 119px after it. */ .or-vp-path { padding: 64px 0 0; } .or-vp-path-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: flex-start !important; } .or-vp-path-cols > .or-vp-path-media.wp-block-column { flex: 0 0 min(501px, 37.08vw); } .or-vp-path-img img { height: 784px; aspect-ratio: auto; border-radius: 30px; } .or-vp-path-cols > .or-vp-path-copy.wp-block-column { flex: 1 1 auto; min-width: 0; padding: 78.3px 24px 0 clamp(40px, 8.8vw, 119px); } .or-vp-path-copy > .or-vp-h { max-width: 560px; } .or-vp-path-copy > :not(.or-vp-h) { max-width: 518px; margin-left: 10px; } .or-vp-path-copy > .or-vp-h + p { margin-top: 74.3px; } .or-vp-path-copy .wp-block-button__link { padding-inline: 24px; } .or-vp-path-copy > .or-vp-btns { margin-top: 86.9px; } .or-vp-speak { padding: 82.3px 24px 0 !important; } /* HubSpot draws its card 14px inside the top of its iframe and ~70px above the bottom, so both gaps are set against that card, not the iframe box. */ .or-vp-speak > .or-vp-h + * { margin-top: 44px; } /* FAQ: 350px photo, 53px gap, 550px list. */ .or-vp-faq { padding: 46.8px 23px 86px 25px !important; } .or-vp-faq .or-vp-faq-cols.wp-block-columns { gap: 53px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-vp-faq-media { display: block; } .or-vp-faq-cols > .or-vp-faq-media.wp-block-column { flex: 0 0 350px; } .or-vp-faq-cols > .or-vp-faq-list.wp-block-column { flex: 1 1 550px; min-width: 0; } .or-vp-faq-img img { height: 712px; object-fit: cover; object-position: 50% 100%; border-radius: 30px 30px 0 0; } .or-vp-faq .or-vp-faq-list > .or-vp-h { font-size: 40px; line-height: 1.2; margin-top: 12.3px; padding-left: 0; } .or-vp-faq .or-vp-faq-list > .or-vp-h + .wp-block-details { margin-top: 19.7px; } .or-vp-faq.or-faq summary { display: flex; align-items: center; box-sizing: border-box; min-height: 99px; padding: 22px 70px 22px 10px; line-height: 28px; } .or-vp-faq.or-faq details[open] > summary { padding-top: 28.6px; } .or-vp-faq.or-faq summary::after { top: 50%; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } /* Open, the frame keeps the chevron level with the first line of the question. */ .or-vp-faq.or-faq details[open] > summary::after { top: 45px; margin-top: 0; } .or-vp-faq.or-faq .wp-block-details > :not(summary) { padding: 3px 60px 28.4px 10px; font-size: 15px; line-height: 22px; color: var(--wp--preset--color--black); } } /* ===== page 9: SERVICES | Outsourced Marketing Team ========================== * Measured off the frames: desktop 2744px with a 36px/4px white export border (a 1352 CSS * canvas), mobile 640px with none (320 CSS). Type fitted by ink width against the theme's * fonts: headings 40px desktop / 25px mobile (Figtree 700), "We are One Rawr." 60px / 25px, * card titles 20px / 15px Figtree 700, body 15px/22 on both. Every column width is the one at * which the frame's paragraphs break where they do (fitted on line ink widths, not guessed). * Mobile-first: plain rules are the 320 frame, the min-width block is the 1352 one. * Numbers and sources: outsourced-team-design.md. */ /* Shared: body rhythm, heading size, 45px buttons (35 on mobile). */ :is(.or-om-hero, .or-om-band, .or-om-split, .or-om-compare, .or-om-benefits, .or-om-what, .or-om-cards-panel, .or-om-weare, .or-om-quote, .or-om-faq) p { font-size: 15px; line-height: 22px; } .or-om-h, .or-om-title, .or-om-weare-h { margin: 0; font-size: 25px; line-height: 30px; } .or-om-btns .wp-block-button__link { padding: 6px 21px; box-sizing: border-box; } /* Paragraphs one frame runs together: or-om-run-m flow inline on mobile, or-om-run-d on desktop. Inline paragraphs keep the space between them from the markup's line breaks. */ @media (max-width: 781px) { .or-om-run-m { display: inline; } } @media (min-width: 782px) { .or-om-run-d { display: inline; } } /* Colours the frames set per breakpoint. */ .or-om-title, .or-om-split-h, .or-om-speak-h { color: var(--wp--preset--color--black); } .or-om-compare-h, .or-om-what-h, .or-om-faq .or-om-h { color: var(--wp--preset--color--navy); } :is(.or-om-split-copy, .or-om-compare-copy, .or-om-quote-card) p, .or-om-card { color: var(--wp--preset--color--navy); } /* Photos: rounded 35 on both frames. */ .or-om-photo { margin: 0; } .or-om-photo img { display: block; width: 100%; height: auto; border-radius: 35px; } /* --- hero ------------------------------------------------------------------ */ .or-om-hero-img { display: none; margin: 0; } .or-om-hero { padding: 0 30px; } .or-om-hero-card { margin-top: 0; padding: 45.25px 0 45px; } .or-om-hero-card > * { margin-block: 0; } .or-om-title { text-align: center; } .or-om-hero-card > .or-om-model { margin-top: 24.75px; } .or-om-model img { display: block; width: 100%; height: auto; } .or-om-hero-card > .or-om-model.or-only-mobile { margin-inline: -30px !important; max-width: none !important; } .or-om-hero-card > .or-om-model + .or-om-model + p { margin-top: 26.3px; } .or-om-hero-card > p + p { margin-top: 22px; } .or-om-hero-card > .or-om-btns { margin-top: 24.4px; } /* --- eliminate (navy band) ------------------------------------------------- */ .or-om-band { padding: 49.75px 30px 50px !important; } .or-om-band > * { margin-block: 0; } .or-om-band-h { text-align: center; } .or-om-band > .or-om-btns { margin-top: 30.25px; } /* --- in-house vs outsourced ---------------------------------------------- */ .or-om-split { padding: 30px 0 0; } .or-om-split-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-om-split-img img { aspect-ratio: 320 / 215; object-fit: cover; } .or-om-split-copy { padding: 25.75px 30px 0; } .or-om-split-copy > * { margin-block: 0; } .or-om-split-copy > .or-om-h + p { margin-top: 24.85px; } .or-om-split-copy > p + p { margin-top: 22px; } .or-om-split-copy > .or-om-btns { margin-top: 24.9px; } /* --- let's compare ---------------------------------------------------------- */ .or-om-compare { padding: 45px 0 0; } .or-om-compare-cols.wp-block-columns { margin: 0; gap: 0 !important; } /* The photo leads on mobile, follows the copy on desktop. */ .or-om-compare-cols > .or-om-compare-media { order: -1; } .or-om-compare-img img { aspect-ratio: 1; object-fit: cover; } .or-om-compare-copy { padding: 25.25px 30px 49.4px; } .or-om-compare-copy > * { margin-block: 0; } .or-om-compare-copy > .or-om-h + p { margin-top: 25.35px; } .or-om-compare-copy > p + p { margin-top: 22px; } /* No blank line before these two on mobile — the frame runs them on. */ .or-om-compare-copy > p.or-om-tight-m { margin-top: 0; } /* An inline run has no top margin of its own, so the blank line above it comes from the paragraph before it. */ @media (max-width: 781px) { .or-om-compare-copy > p:has(+ p.or-om-run-m) { margin-bottom: 22px; } } /* Styled as body text in both frames; underlined on phones, where the frame underlines it. */ .or-om-compare-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .or-om-compare-copy a:hover { color: var(--wp--preset--color--magenta); } /* --- the benefits are endless (navy panel) --------------------------------- */ .or-om-benefits { padding: 29.75px 30px 30px !important; } .or-om-benefits > * { margin-block: 0; } .or-om-benefits .or-om-h { text-align: center; } .or-om-benefits > .or-om-h + p { margin-top: 20.35px; } .or-om-benefits > p { padding-inline: 2px; } .or-om-benefits > p + p { margin-top: 22px; } .or-om-benefits > .or-om-btns { margin-top: 19.9px; } /* --- what makes us different ------------------------------------------------ */ .or-om-what { padding: 50.25px 30px 24.9px !important; } .or-om-what > * { margin-block: 0; } .or-om-what > .or-om-h + p { margin-top: 25.35px; } .or-om-what > p + p { margin-top: 22px; } /* --- four cards --------------------------------------------------------------- */ /* Mobile: four separate sky cards, 25px apart. Desktop: one sky panel holding four columns. */ .or-om-cards-panel.has-sky-deep-background-color { background: none !important; padding: 0 0 25px; } .or-om-cards.wp-block-columns { margin: 0; gap: 25px !important; } .or-om-card { box-sizing: border-box; height: 100%; padding: 30px 30px 29.4px; border-radius: 35px; background: var(--wp--preset--color--sky-deep); } .or-om-card > * { margin-block: 0; } .or-om-card-img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 35px; } /* Anwar, 16 Sep: the four card photos were exported with white rounded corners baked in. At 210px (desktop) the 35px corner hides them; at phone sizes the baked corners outgrow it and show as a white rim, so the photo is zoomed 6% inside a clipped frame there. */ @media (max-width: 781px) { .or-om-card-img { overflow: hidden; border-radius: 35px; } .or-om-card-img img { scale: 1.06; } } .or-om-card-title { margin-top: 17.55px !important; font-family: var(--wp--preset--font-family--figtree); font-size: 15px; font-weight: 700; line-height: 22px; color: inherit; } .or-om-card > p { margin-top: 19.05px; } /* --- we are one rawr (magenta) ------------------------------------------------ */ .or-om-weare { border-radius: 35px; padding: 30.25px 30px 29.4px; } .or-om-weare-cols.wp-block-columns { margin: 0; gap: 20.35px !important; } .or-om-weare-cols > .wp-block-column > * { margin-block: 0; } /* Two lines, as in the frame: narrow enough that "One" drops to the second line. */ .or-om-weare-h { text-align: center; max-width: 124px; margin-inline: auto !important; } .or-om-weare-copy > p { padding-inline: 3px; } /* --- white card over the abstract photo -------------------------------------- */ .or-om-quote { position: relative; padding: 50px 30px 56px; } .or-om-quote > .or-om-quote-bg { position: absolute; inset: 0; margin: 0; } .or-om-quote > .or-om-quote-bg img { display: block; width: 100%; height: 100%; object-fit: cover; } .or-om-quote-card { position: relative; margin: 0 !important; border-radius: 35px; padding: 30.1px 30px 23.9px; } .or-om-quote-card > * { margin-block: 0; } .or-om-quote-card > p + p { margin-top: 22px; } /* --- FAQ: the shared accordion, as re-measured on page 8 --------------------- */ .or-om-faq { padding: 0 30px 101.25px !important; } .or-om-faq-media { display: none; } .or-om-faq .or-om-faq-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-om-faq .or-om-faq-list > .or-om-h { font-size: 27px; line-height: 1.05; margin: 58.8px 0 0; padding-left: 17px; } .or-om-faq .or-om-faq-list > .or-om-h + .wp-block-details { margin-top: 20px; } .or-om-faq .wp-block-details { margin-block: 0; } .or-om-faq.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-om-faq.or-faq .wp-block-details > :not(summary) { padding: 9.4px 20px 10.5px 20px; font-size: 16px; line-height: 24px; } .or-om-faq.or-faq summary::after { top: 34.5px; right: 29px; width: 11px; height: 11px; } .or-om-faq.or-faq details[open] > summary::after { top: 35.5px; } /* The frame leaves the last question a little more room above the closing rule. */ @media (max-width: 781px) { .or-om-faq.or-faq .wp-block-details:last-of-type > summary { padding-bottom: 19.8px; } } /* --- speak to our CEO today ------------------------------------------------- */ .or-om-speak { padding: 0 4px 0 !important; } .or-om-speak > * { margin-block: 0; } /* The section runs 4px from the edges for HubSpot; the heading keeps the 260px text column. */ .or-om-speak-h { text-align: center; max-width: 260px; margin-inline: auto !important; } .or-om-speak > .or-om-h + * { margin-top: 29.75px; } .or-om-speak .meetings-iframe-container iframe { display: block; width: 100%; } /* ------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-om-h { font-size: 40px; line-height: 48px; } /* The frame sizes these buttons, not their labels: 170 wide, 179 in the split section, 220 in the hero. */ .or-om-btns .wp-block-button__link { padding: 10px 21px; min-width: 170px; } .or-om-split-copy .or-om-btns .wp-block-button__link { min-width: 179px; } .or-om-hero-card .or-om-btns .wp-block-button__link { min-width: 220px; } .or-om-btns-center { justify-content: center; } .or-main .or-om-btns > .wp-block-button, .or-main .or-om-btns > .wp-block-button .wp-block-button__link { width: auto; } .or-om-speak-h { color: var(--wp--preset--color--navy); max-width: none; } :is(.or-om-split-copy, .or-om-compare-copy, .or-om-quote-card) p, .or-om-card { color: var(--wp--preset--color--black); } /* Hero: 445px photo, 980px card lifted 295px over it. */ .or-om-hero { padding: 0; } .or-om-hero-img { display: block; } .or-om-hero-img img { display: block; width: 100%; height: 445px; object-fit: cover; border-radius: 0 0 30px 30px; } .or-om-hero-card { position: relative; box-sizing: border-box; width: min(980px, calc(100% - 48px)); margin: -295px auto 0; border-radius: 35px 35px 0 0; padding: 80.3px clamp(40px, calc(11.6vw - 26.8px), 94px) 49px clamp(40px, calc(15.9vw - 84.7px), 130px); } .or-om-hero-card > .or-om-title { font-size: 40px; line-height: 48px; text-align: left; max-width: 677px; margin-left: 0 !important; } /* Centred on the card, which is not the centre of the text column (130 / 94 padding). */ .or-om-hero-card > .or-om-model { margin-top: 22.7px; max-width: 703px; position: relative; left: -27.5px; } .or-om-hero-card > .or-om-model + .or-om-model + p { margin-top: 38.6px; } .or-om-hero-card > .or-om-btns { margin-top: 40.4px; position: relative; left: -17px; } /* Band: the heading runs on a 68px line. */ .or-om-band { padding: 53.3px 24px 49px !important; } .or-om-band-h { line-height: 68px; } .or-om-band > .or-om-btns { margin-top: 29.7px; } /* In-house vs outsourced: 531x682 photo flush left, copy 64px after it. */ /* Anwar, 16 Sep: space above this section, where the frame runs the photo straight off the band. */ .or-om-split { padding: 64px 0 0; } .or-om-split-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: flex-start !important; } .or-om-split-cols > .or-om-split-media.wp-block-column { flex: 0 0 min(531px, 39.3vw); } .or-om-split-img img { aspect-ratio: auto; height: 682px; } .or-om-split-cols > .or-om-split-copy.wp-block-column { flex: 1 1 auto; min-width: 0; padding: 52.3px 24px 0 64px; } .or-om-split-copy > * { max-width: 556px; } .or-om-split-h { line-height: 64px; } .or-om-split-copy > .or-om-h + p { margin-top: 35.8px; } .or-om-split-copy > .or-om-btns { margin-top: 44.9px; } /* Let's compare: copy from x202, 492x827 photo flush right. */ .or-om-compare { padding: 2px 0 0; } .or-om-compare-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: flex-start !important; } .or-om-compare-cols > .or-om-compare-media { order: 0; } .or-om-compare-cols > .or-om-compare-copy.wp-block-column { flex: 1 1 auto; min-width: 0; padding: 107.8px 24px 0 clamp(24px, calc(26.8vw - 160px), 202px); } /* Same reason: the inline runs need the 605px measure on the column itself. Padding percentages resolve against the whole row, so the photo column is subtracted too. */ .or-om-compare-cols > .or-om-compare-copy.wp-block-column { padding-right: max(24px, calc(100% - min(492px, 36.4vw) - 605px - clamp(24px, calc(26.8vw - 160px), 202px))); } .or-om-compare-copy > * { max-width: 605px; } .or-om-compare-cols > .or-om-compare-media.wp-block-column { flex: 0 0 min(492px, 36.4vw); } .or-om-compare-img img { aspect-ratio: auto; height: 827px; } .or-om-compare-copy > .or-om-h + p { margin-top: 33.3px; } .or-om-compare-copy > p.or-om-tight-m { margin-top: 22px; } /* "What do you do then?" opens the last paragraph on desktop, after a blank line. */ .or-om-compare-copy > p:has(+ p.or-om-run-d) { margin-bottom: 22px; } .or-om-compare-copy a { text-decoration: none; } .or-om-compare-copy a:hover { text-decoration: underline; } /* Benefits: navy panel, rounded, full width. */ /* The copy runs inline here, and an inline run takes the section's own width, so the 897px column is made with padding rather than the layout's max-width. The section is full-width, so its percentages resolve against the content box inside the root padding. */ .or-om-benefits { border-radius: 35px; padding: 112.3px max(24px, calc((100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right) - 897px) / 2)) 110.8px !important; text-align: center; } /* The copy below is an inline run on desktop, so the gap belongs to the heading. */ .or-om-benefits > .or-om-h { margin-bottom: 67.3px; } .or-om-benefits > p { padding-inline: 0; } .or-om-benefits > .or-om-btns { margin-top: 65.4px; } /* What makes us different: a 50px heading line. */ .or-om-what { padding: 69.3px max(24px, calc((100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right) - 891px) / 2)) 121.9px !important; } .or-om-what-h { line-height: 50px; text-align: center; max-width: 634px !important; } .or-om-what > .or-om-h { margin-bottom: 76.8px; } /* Cards: one sky panel; 210px columns 36px apart, centred. */ .or-om-cards-panel.has-sky-deep-background-color { background: var(--wp--preset--color--sky-deep) !important; border-radius: 35px; padding: 46px 24px 70px; } .or-om-cards.wp-block-columns { max-width: 1032px; margin: 0 auto; gap: 64px !important; flex-wrap: nowrap !important; } .or-om-cards.wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; } .or-om-card { padding: 0; border-radius: 0; background: none; } .or-om-card-title { margin-top: 20.65px !important; font-size: 20px; line-height: 27.5px; min-height: 82.5px; } .or-om-card-title .or-br-sm { display: none; } .or-om-card > p { margin-top: 16.95px; } /* We are One Rawr: heading left at x203, copy in a 590px column from x565. */ .or-om-weare { padding: 112px 24px 113px; } .or-om-weare-cols.wp-block-columns { max-width: 952px; margin: 0 auto; position: relative; left: 3px; gap: 75px !important; flex-wrap: nowrap !important; align-items: center !important; } .or-om-weare-cols > .or-om-weare-head.wp-block-column { flex: 0 0 287px; } .or-om-weare-cols > .or-om-weare-copy.wp-block-column { flex: 0 1 590px; min-width: 0; } .or-om-weare-h { font-size: 60px; line-height: 66px; text-align: left; max-width: none; margin-inline: 0 !important; } .or-om-weare-copy > p { padding-inline: 0; } /* Quote card: 862 wide, 70px into the photo band and 63px above its foot. */ .or-om-quote { padding: 70px 24px 63px; } .or-om-quote-card { box-sizing: border-box; max-width: 862px; margin: 0 auto !important; left: -1px; padding: 81.1px 61.5px 70.4px 40.5px; } /* FAQ: 353px photo, 50px gap, 550px list. */ .or-om-faq { padding: 52px 25.5px 53.4px 22.5px !important; } .or-om-faq .or-om-faq-cols.wp-block-columns { gap: 50px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-om-faq-media { display: block; } .or-om-faq-cols > .or-om-faq-media.wp-block-column { flex: 0 0 353px; } .or-om-faq-cols > .or-om-faq-list.wp-block-column { flex: 1 1 550px; min-width: 0; } .or-om-faq-img img { height: 747px; object-fit: cover; border-radius: 30px; } .or-om-faq .or-om-faq-list > .or-om-h { font-size: 40px; line-height: 48px; margin-top: 60.3px; padding-left: 0; } .or-om-faq .or-om-faq-list > .or-om-h + .wp-block-details { margin-top: 19.7px; } .or-om-faq.or-faq summary { display: flex; align-items: center; min-height: 99px; padding: 22px 38px 22px 10px; line-height: 27.5px; } .or-om-faq.or-faq details[open] > summary { padding-top: 29.35px; } .or-om-faq.or-faq summary::after { top: 50%; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } .or-om-faq.or-faq details[open] > summary::after { top: 43.5px; margin-top: 0; } .or-om-faq.or-faq .wp-block-details > :not(summary) { padding: 3.25px 66px 28.4px 10px; font-size: 15px; line-height: 22px; color: var(--wp--preset--color--black); } /* Speak: HubSpot's card sits 14px inside its iframe and ~70px above the iframe's foot. */ .or-om-speak { padding: 53.4px 24px 17px !important; } .or-om-speak > .or-om-h + * { margin-top: 43.2px; } } /* ===== page 10: SERVICES | Fractional CMO =================================== * Measured off the frames: desktop 2704px (a 1352 CSS canvas, no border), mobile 598px at * 1.869x — a 320 CSS canvas, exported smaller to stay under 32,768px tall. Type fitted by ink * width: headings 40px desktop / 25px mobile (Figtree 700), body 15px/22 on both. Column widths * are the ones that reproduce the frame's line breaks. Several rows in this frame are placed * freely rather than on a grid, so a few offsets are set per row. * Mobile-first: plain rules are the 320 frame, the min-width block is the 1352 one. * Numbers and sources: fractional-cmo-design.md. */ :is(.or-fc-hero, .or-fc-resp, .or-fc-qual, .or-fc-who, .or-fc-future, .or-fc-hire, .or-fc-cost, .or-fc-why, .or-fc-strat, .or-fc-serv, .or-fc-faq, .or-fc-quick) :is(p, li) { font-size: 15px; line-height: 22px; } .or-fc-h, .or-fc-title { margin: 0; font-size: 25px; line-height: 30px; } .or-fc-title { color: var(--wp--preset--color--black); text-align: center; } .or-fc-btns .wp-block-button__link { padding: 6px 21px; box-sizing: border-box; } /* The phone frame keeps the 16px button label (the theme's fluid size drops to 14px at 320) and sets five headings in black or charcoal rather than navy. */ @media (max-width: 781px) { .or-fc-btns .wp-block-button__link { padding-block: 4.5px; font-size: 16px; } :is(.or-fc-qual-h, .or-fc-why-h, .or-fc-speak-h) { color: var(--wp--preset--color--black); } :is(.or-fc-who-h, .or-fc-hire-h) { color: #282627; } } /* Links in body copy: underlined, in the text colour, as both frames show them. */ :is(.or-fc-hero-card, .or-fc-future, .or-fc-hire, .or-fc-cost, .or-fc-why, .or-fc-serv, .or-fc-quick) p a, .or-fc-hire li a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } :is(.or-fc-hero-card, .or-fc-future, .or-fc-hire, .or-fc-cost, .or-fc-why, .or-fc-serv, .or-fc-quick) p a:hover, .or-fc-hire li a:hover { color: var(--wp--preset--color--magenta); } /* Paragraphs the desktop frame runs together flow inline there; the mobile frame drops the blank line before some of them. */ @media (min-width: 782px) { .or-fc-run-d { display: inline; } } @media (max-width: 781px) { p.or-fc-tight-m { margin-top: 0 !important; } } @media (min-width: 782px) { .or-br-sm { display: none; } } .or-fc-photo { margin: 0; } .or-fc-photo img { display: block; width: 100%; height: auto; border-radius: 35px; } /* --- hero + what is -------------------------------------------------------- */ .or-fc-hero-img { display: none; margin: 0; } .or-fc-hero { padding: 0 30px; } .or-fc-hero-card { margin-top: 0; padding: 45px 0 45.2px; } .or-fc-hero-card > * { margin-block: 0; } .or-fc-hero-card > .or-fc-hero-lead { margin-top: 26px; } .or-fc-hero-card > .or-fc-btns { margin-top: 25px; } .or-fc-hero-card > .or-fc-what-h { margin-top: 24.1px; } .or-fc-hero-card > .or-fc-what-h + p { margin-top: 25px; } .or-fc-hero-card > p + p { margin-top: 22px; } /* --- responsibilities / cost (navy panels) --------------------------------- */ :is(.or-fc-resp, .or-fc-cost) { border-radius: 35px; padding: 50px 30px 50px !important; } :is(.or-fc-resp, .or-fc-cost) > * { margin-block: 0; } .or-fc-icon-head { text-align: center; } .or-fc-icon-head > * { margin-block: 0; } .or-fc-icon { margin: 0 auto 20px !important; } .or-fc-icon img { display: block; margin: 0 auto; } .or-fc-icon-head-resp .or-fc-icon img { width: 68px; } .or-fc-icon-head-cost .or-fc-icon img { width: 72px; } :is(.or-fc-resp, .or-fc-cost) > .or-fc-icon-head + p { margin-top: 30.4px; } :is(.or-fc-resp, .or-fc-cost) > p + p { margin-top: 22px; } :is(.or-fc-resp, .or-fc-cost) > .or-fc-btns { margin-top: 29.2px; } @media (max-width: 781px) { .or-fc-resp > .or-fc-btns { margin-inline: -6px !important; } } /* --- qualities ---------------------------------------------------------------- */ .or-fc-qual { padding: 46px 30px 46.6px !important; } .or-fc-qual > * { margin-block: 0; } .or-fc-qual > .or-fc-qual-lead { margin-top: 25px; } .or-fc-qual-list { margin-top: 20.3px !important; } .or-fc-qual-item { border-bottom: 1.6px solid var(--wp--preset--color--navy); padding-bottom: 8.3px; } .or-fc-qual-item + .or-fc-qual-item { margin-top: 20.8px; } .or-fc-qual-item > * { margin-block: 0; } .or-fc-qual-num { font-size: 37px !important; line-height: 38px !important; } .or-fc-qual-label { margin-top: 4.8px !important; font-size: 20px !important; line-height: 26px !important; } /* --- who should hire ----------------------------------------------------------- */ .or-fc-who-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-fc-who-cols > .or-fc-who-media { order: -1; } .or-fc-who-img img { aspect-ratio: 1; object-fit: cover; } .or-fc-who-copy { padding: 26px 30px 0; } .or-fc-who-copy > * { margin-block: 0; } .or-fc-who-copy > .or-fc-h + p { margin-top: 25px; } .or-fc-list { margin-top: 22px !important; padding-left: 23px; } .or-fc-who-copy > .or-fc-btns { margin-top: 25px; } /* --- the future (sky panel) ------------------------------------------------------ */ .or-fc-future { margin-top: 44px !important; border-radius: 35px; padding: 39.9px 30px 39.2px !important; } .or-fc-future > * { margin-block: 0; } .or-fc-future-h { text-align: center; } .or-fc-future > .or-fc-h + p { margin-top: 21.1px; } .or-fc-future > p { padding-inline: 2px; } .or-fc-future > p + p { margin-top: 22px; } .or-fc-future > .or-fc-btns { margin-top: 19.5px; } /* --- is hiring the right model --------------------------------------------------- */ .or-fc-hire { padding: 44.8px 30px 45.1px !important; } .or-fc-hire > * { margin-block: 0; } .or-fc-hire > .or-fc-h + p { margin-top: 25px; } .or-fc-hire > .or-fc-btns { margin-top: 25px; } /* --- why hire us ------------------------------------------------------------------ */ .or-fc-why { padding: 45.2px 30px 46px !important; } .or-fc-why > * { margin-block: 0; } .or-fc-why > .or-fc-h + p { margin-top: 26px; } .or-fc-why > p + p { margin-top: 22px; } /* Each reason: photo, number, title, copy, then a dotted rule (after every row on phones). */ .or-fc-row.wp-block-columns { margin: 25px 0 0; gap: 0 !important; padding-bottom: 18.2px; border-bottom: 1.6px dotted var(--wp--preset--color--navy); } .or-fc-why > p + .or-fc-row.wp-block-columns { margin-top: 24.1px; } .or-fc-row > .or-fc-row-media { order: -1; } .or-fc-row-img img { aspect-ratio: 260 / 150.4; object-fit: cover; } .or-fc-row-copy > * { margin-block: 0; } .or-fc-row-num { margin-top: 15.4px !important; font-size: 35px !important; line-height: 38px !important; } .or-fc-row-h { margin-top: 14.6px !important; font-family: var(--wp--preset--font-family--questrial); font-size: 18px; font-weight: 400; line-height: 26px; } /* The phone frame spaces the number and title out a little and puts a full stop after the number. */ @media (max-width: 781px) { .or-fc-row-num { letter-spacing: 0.85px; } .or-fc-row-h { letter-spacing: 0.05em; } .or-fc-row-num::after { content: "."; } } .or-fc-row-copy > .or-fc-h + p { margin-top: 20.4px; } .or-fc-row-empowers .or-fc-row-copy > .or-fc-h + p { margin-top: 22.4px; } /* --- need a strategy (navy band) --------------------------------------------------- */ .or-fc-strat { padding: 50px 30px 50px; } .or-fc-strat-copy > p { padding-inline: 2px; } .or-fc-strat-cols.wp-block-columns { margin: 0; gap: 20px !important; } .or-fc-strat-cols > .wp-block-column > * { margin-block: 0; } .or-fc-strat-h { text-align: center; } .or-fc-strat-copy > .or-fc-btns { margin-top: 19.4px; } /* --- services ------------------------------------------------------------------------- */ .or-fc-serv { padding: 51.3px 30px 50px !important; } .or-fc-serv > * { margin-block: 0; } .or-fc-serv > .or-fc-h + p { margin-top: 25px; } .or-fc-serv > .or-fc-btns { margin-top: 25px; } .or-fc-serv > .or-fc-cards.wp-block-columns { margin: 25px -30px 0 !important; max-width: none !important; gap: 24.9px !important; } @media (max-width: 781px) { .or-fc-serv > .or-fc-cards + .or-fc-cards.wp-block-columns { margin-top: 24.9px !important; } } .or-fc-card { box-sizing: border-box; height: 100%; padding: 30px 30px 28.7px; border-radius: 35px; background: var(--wp--preset--color--sky-deep); } .or-fc-card > * { margin-block: 0; } .or-fc-card-top > * { margin-block: 0; } .or-fc-card-img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 35px; } .or-fc-card-title { margin-top: 17.8px !important; font-family: var(--wp--preset--font-family--figtree); font-size: 15px; font-weight: 700; line-height: 22px; color: var(--wp--preset--color--navy); } .or-fc-card > p { margin-top: 19.2px; } /* Three of the four card photos were exported with white rounded corners; at phone widths the baked corners outgrow the 35px clip, so the photo is zoomed inside a clipped frame. */ @media (max-width: 781px) { .or-fc-card-img { overflow: hidden; border-radius: 35px; } .or-fc-card-img img { scale: 1.06; } } /* --- speak to our CEO -------------------------------------------------------------------- */ .or-fc-speak { padding: 41px 4px 0 !important; } .or-fc-speak > * { margin-block: 0; } .or-fc-speak-h { text-align: center; max-width: 260px; margin-inline: auto !important; } .or-fc-speak > .or-fc-h + * { margin-top: 30px; } .or-fc-speak .meetings-iframe-container iframe { display: block; width: 100%; } /* --- FAQ: the shared accordion, as on pages 8 and 9 -------------------------------------- */ .or-fc-faq { padding: 0 30px 21px !important; } .or-fc-faq-media { display: none; } .or-fc-faq .or-fc-faq-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-fc-faq .or-fc-faq-list > .or-fc-h { font-size: 27px; line-height: 1.05; margin: 9.8px 0 0; padding-left: 17px; } .or-fc-faq .or-fc-faq-list > .or-fc-h + .wp-block-details { margin-top: 20px; } .or-fc-faq .wp-block-details { margin-block: 0; } .or-fc-faq.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-fc-faq.or-faq .wp-block-details > :not(summary) { padding: 9.4px 20px 10.5px 20px; font-size: 16px; line-height: 24px; } .or-fc-faq.or-faq summary::after { top: 34.5px; right: 29px; width: 11px; height: 11px; } .or-fc-faq.or-faq details[open] > summary::after { top: 35.5px; } @media (max-width: 781px) { .or-fc-faq.or-faq .wp-block-details:last-of-type > summary { padding-bottom: 19.8px; } } /* --- quick links ---------------------------------------------------------------------------- */ .or-fc-quick { padding: 40px 30px 45px !important; } .or-fc-quick > * { margin-block: 0; } .or-fc-quick > p + p { margin-top: 22px; } @media (max-width: 781px) { .or-fc-quick > p + p { margin-top: 23.3px; } } /* ----------------------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-fc-h, .or-fc-title { font-size: 40px; line-height: 48px; } .or-fc-btns .wp-block-button__link { padding: 10px 21px; } .or-fc-btns-center { justify-content: center; } .or-main .or-fc-btns > .wp-block-button, .or-main .or-fc-btns > .wp-block-button .wp-block-button__link { width: auto; } /* Fixed-width buttons in this frame (label widths differ). */ .or-fc-hero-card .or-fc-btns .wp-block-button__link { min-width: 226px; } .or-fc-resp .or-fc-btns .wp-block-button__link { min-width: 265px; } .or-fc-who-copy .or-fc-btns .wp-block-button__link { min-width: 163.5px; } .or-fc-future .or-fc-btns .wp-block-button__link { min-width: 118px; } .or-fc-hire .or-fc-btns .wp-block-button__link { min-width: 164px; } .or-fc-cost .or-fc-btns .wp-block-button__link { min-width: 204px; } .or-fc-strat .or-fc-btns .wp-block-button__link { min-width: 228px; } .or-fc-serv .or-fc-btns .wp-block-button__link { min-width: 154px; } /* Hero: 490px photo, 980px card lifted 340px over it; copy in a 716px column from x314. */ .or-fc-hero { padding: 0; } .or-fc-hero-img { display: block; } .or-fc-hero-img img { display: block; width: 100%; height: 490px; object-fit: cover; } .or-fc-hero-card { position: relative; box-sizing: border-box; width: min(980px, calc(100% - 48px)); margin: -340px auto 0; border-radius: 35px 35px 0 0; padding: 80.3px clamp(24px, calc(11.3vw - 16px), 136px) 65px clamp(24px, calc(10.5vw - 14px), 128px); } .or-fc-hero-card > * { max-width: 716px; margin-left: 0 !important; } /* Centred on the card (x676), which sits 8px right of the text column's centre. */ .or-fc-hero-card > .or-fc-btns { max-width: none; margin-right: -8px !important; } .or-fc-title { text-align: left; } .or-fc-hero-card > .or-fc-hero-lead { margin-top: 37.8px; } .or-fc-hero-card > .or-fc-hero-lead + .or-fc-btns { margin-top: 44.9px; } .or-fc-hero-card > .or-fc-what-h { margin-top: 48.3px; } .or-fc-hero-card > .or-fc-what-h + p { margin-top: 56.8px; } .or-fc-hero-card > .or-fc-what-btns { margin-top: 62.4px; } /* Navy panels: icon beside the heading, copy centred. */ :is(.or-fc-resp, .or-fc-cost) { text-align: center; } .or-fc-resp { padding: 104.5px 24px 104px !important; } .or-fc-cost { padding: 100px max(24px, calc((100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right) - 950px) / 2)) 100px !important; } .or-fc-icon-head { display: flex; align-items: center; justify-content: center; max-width: none !important; position: relative; } .or-fc-icon { margin: 0 !important; } .or-fc-icon-head-resp { gap: 47px; left: -4px; } .or-fc-icon-head-cost { gap: 42px; left: -3px; } .or-fc-icon-head .or-fc-h { margin: 0; } .or-fc-resp > .or-fc-icon-head + p { margin-top: 67.1px; } .or-fc-cost > .or-fc-icon-head { margin-bottom: 73.1px !important; } .or-fc-resp > .or-fc-btns { margin-top: 80.9px; } .or-fc-cost > .or-fc-btns { margin-top: 72.9px; } :is(.or-fc-cost, .or-fc-future) > p, .or-fc-strat-copy > p { padding-inline: 0; } /* Qualities: centred heading, 657px lead, five 158px columns 40px apart. */ .or-fc-qual { padding: 122.3px 24px 125px !important; } .or-fc-qual-h { text-align: center; } .or-fc-qual > .or-fc-qual-lead { margin-top: 28.8px; max-width: 657px !important; } .or-fc-qual-list { display: grid; grid-template-columns: repeat(5, minmax(0, 158px)); column-gap: clamp(16px, 3vw, 40px); justify-content: center; margin-top: 75.9px !important; } .or-fc-qual-item { border-bottom-width: 3px; } .or-fc-qual-item + .or-fc-qual-item { margin-top: 0; } .or-fc-qual-num { font-size: 38px !important; } .or-fc-qual-label { margin-top: 12.1px !important; min-height: 66px; font-size: 18px !important; line-height: 32.4px !important; } .or-fc-qual-item:last-child .or-fc-qual-label { line-height: 22px !important; } /* The frame breaks the first label after "Strategic"; no shared column width does that. */ .or-fc-qual-item:first-child .or-fc-qual-label { max-width: 110px; } /* Who should hire: copy from x202.5, 676x883 photo flush right. */ .or-fc-who-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: flex-start !important; } .or-fc-who-cols > .or-fc-who-media { order: 0; } .or-fc-who-cols > .or-fc-who-copy.wp-block-column { flex: 1 1 auto; min-width: 0; padding: 85.3px 24px 0 clamp(24px, calc(26.4vw - 154px), 202.5px); } .or-fc-who-cols > .or-fc-who-media.wp-block-column { flex: 0 0 min(676px, 50vw); } .or-fc-who-img img { aspect-ratio: auto; height: 883px; } .or-fc-who-copy > .or-fc-h { max-width: 340px; line-height: 46px; } .or-fc-who-copy > p, .or-fc-who-copy > .or-fc-list { max-width: 408px; } .or-fc-who-copy > .or-fc-h + p { margin-top: 39.8px; } .or-fc-list { padding-left: 24px; } .or-fc-who-copy > .or-fc-btns { margin-top: 76.4px; margin-left: 15px; } /* The future: sky panel 49px under the photo; heading indented 66.5px from the copy. */ .or-fc-future { margin-top: 49px !important; padding: 99.3px 24px 100px !important; } .or-fc-future-h { text-align: left; max-width: 760px; margin-left: max(0px, calc((100% - 948px) / 2 + 62.5px)) !important; } .or-fc-future > .or-fc-h + p { margin-top: 88.8px; } .or-fc-future > .or-fc-btns { margin-top: 87.9px; } /* Is hiring the right model. */ .or-fc-hire { padding: 111.8px 24px 120px !important; } .or-fc-hire-h { line-height: 57px; } .or-fc-hire > .or-fc-h + p { margin-top: 55.3px; } /* 925-927px of text is the only range that breaks all six questions as the frame does. */ .or-fc-hire-list { padding-left: 23px; max-width: 950px !important; } /* The linked phrase shapes a hair wider than plain text; this item needs 3px more to keep its first line. */ .or-fc-hire-list > li:nth-child(3) { margin-right: -3px; } .or-fc-hire > .or-fc-btns { margin-top: 63.4px; } /* Why hire us: heading and intro from x228; four rows placed as in the frame. */ .or-fc-why { padding: 141.3px 24px 128.9px !important; } .or-fc-why > .or-fc-h, .or-fc-why > p { max-width: 880px !important; margin-left: max(0px, calc((100% - 980px) / 2 + 42px)) !important; } .or-fc-why > .or-fc-h + p { margin-top: 71.8px; } .or-fc-row.wp-block-columns { flex-wrap: nowrap !important; align-items: flex-start !important; padding-bottom: 0; border-bottom: 1px dotted rgba(27, 25, 64, 0.5); } .or-fc-why > p + .or-fc-row.wp-block-columns { margin-top: 79.3px; } .or-fc-row > .or-fc-row-media { order: 0; } /* Out-specify core's flex-basis:0 / flex-grow:1 on columns, which shared the row between them. */ /* Fixed frame widths at 1352; below that the columns give way together rather than overflow. */ .or-fc-row.wp-block-columns > .wp-block-column { flex: 0 1 auto; min-width: 0; } .or-fc-row.wp-block-columns > .or-fc-row-media.wp-block-column { width: 377.5px; } .or-fc-row-img img { aspect-ratio: auto; height: 283px; } .or-fc-row-num { margin-top: 0 !important; font-size: 30px !important; line-height: 30px !important; } .or-fc-row-h { font-family: var(--wp--preset--font-family--figtree); font-size: 40px; font-weight: 700; line-height: 60px; } /* Row 1: photo from x239.5, copy from x673 (465 wide). */ .or-fc-row-elevate.wp-block-columns { margin-top: 79.3px; padding: 0 0 96.9px 53.5px; gap: 55.5px !important; } .or-fc-row-elevate > .or-fc-row-media { margin-top: 34.6px; } .or-fc-row-elevate > .or-fc-row-copy { width: 465px; } .or-fc-row-elevate .or-fc-row-h { margin-top: 5.9px !important; } .or-fc-row-elevate .or-fc-row-copy > .or-fc-h + p { margin-top: 70.8px; margin-left: 2.5px; margin-right: -2.5px; } /* Row 2: copy from x227 (427 wide), photo from x750.5. */ .or-fc-row-opportunities.wp-block-columns { margin-top: 0; padding: 57.35px 0 72.9px 41px; gap: 96.5px !important; } .or-fc-row-opportunities > .or-fc-row-copy { width: 427px; } .or-fc-row-opportunities > .or-fc-row-media { margin-top: 0.15px; } .or-fc-row-opportunities .or-fc-row-h { margin-top: 7.95px !important; max-width: 267px; } .or-fc-row-opportunities .or-fc-row-copy > .or-fc-h + p { margin-top: 39.8px; } /* Row 3: photo from x227.5, copy from x667.5 (498 wide). */ .or-fc-row-empowers.wp-block-columns { margin-top: 0; padding: 60.5px 0 83.9px 41.5px; gap: 62.5px !important; } .or-fc-row-empowers > .or-fc-row-copy { width: 498px; margin-top: 8.85px; } .or-fc-row-empowers .or-fc-row-h { margin-top: 10.45px !important; max-width: 452px; } .or-fc-row-empowers .or-fc-row-copy > .or-fc-h + p { margin-top: 54.3px; } /* Row 4: copy from x225 (452 wide), photo from x747.5; no rule after it. */ .or-fc-row-growth.wp-block-columns { margin-top: 0; padding: 58.35px 0 0 39px; gap: 70.5px !important; border-bottom: 0; } .or-fc-row-growth > .or-fc-row-copy { width: 452px; } .or-fc-row-growth > .or-fc-row-media { margin-top: 15.65px; } .or-fc-row-growth .or-fc-row-h { margin-top: 7.95px !important; max-width: 359px; } .or-fc-row-growth .or-fc-row-copy > .or-fc-h + p { margin-top: 71.3px; } /* Need a strategy: heading from x202.5, copy from x664.5. */ .or-fc-strat { padding: 114.8px 24px 112.7px; } .or-fc-strat-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: flex-start !important; gap: 52px !important; padding-left: clamp(0px, calc(26.4vw - 178px), 178.5px); } /* The frame sets this heading on five lines (290px); it wraps to four here, so the column keeps the frame's height. */ .or-fc-strat-cols > .or-fc-strat-head.wp-block-column { flex: 0 0 410px; min-height: 290px; } .or-fc-strat-cols > .or-fc-strat-copy.wp-block-column { flex: 0 1 478px; min-width: 0; padding-top: 47.8px; } .or-fc-strat-h { text-align: left; line-height: 58px; } .or-fc-strat-copy > .or-fc-btns { margin-top: 70.9px; } /* Services: centred header, then two rows of 499px cards 17px apart. */ .or-fc-serv { padding: 104.3px 24px 0 !important; text-align: center; } .or-fc-serv > .or-fc-h + p { margin-top: 40.8px; max-width: 783px !important; } .or-fc-serv > .or-fc-btns { margin-top: 38.9px; } .or-fc-serv > .or-fc-cards.wp-block-columns { max-width: 1015px !important; margin: 80px auto 0 !important; gap: 17px !important; flex-wrap: nowrap !important; text-align: left; } .or-fc-serv > .or-fc-cards + .or-fc-cards { margin-top: 26.5px !important; } .or-fc-cards > .wp-block-column { flex: 1 1 0; min-width: 0; } .or-fc-card { padding: 40px 30px 39.9px; } .or-fc-card-top { display: flex; align-items: center; gap: 22px; } .or-fc-card-img { flex: 0 0 240px; } .or-fc-card-title { margin-top: 0 !important; font-family: var(--wp--preset--font-family--questrial); font-size: 35px; font-weight: 400; line-height: 42px; } .or-fc-card > p { margin-top: 40.1px; } .or-fc-card-startups > p { max-width: 425px; } .or-fc-card-saas > p { max-width: 434px; } /* Speak: HubSpot's card sits 14px inside its iframe, ~70px above the iframe's foot. */ .or-fc-speak { padding: 209.3px 24px 0 !important; } .or-fc-speak-h { max-width: none; } .or-fc-speak > .or-fc-h + * { margin-top: 46.7px; } /* FAQ: 350px photo, 53px gap, 550px list centred beside it. */ .or-fc-faq { padding: 49px 22.5px 103.1px 25.5px !important; } .or-fc-faq .or-fc-faq-cols.wp-block-columns { gap: 53px !important; flex-wrap: nowrap !important; align-items: center !important; } .or-fc-faq-media { display: block; } .or-fc-faq-cols > .or-fc-faq-media.wp-block-column { flex: 0 0 350px; } /* Centred beside the photo, 4px high as in the frame. */ .or-fc-faq-cols > .or-fc-faq-list.wp-block-column { flex: 1 1 550px; min-width: 0; margin-bottom: 8px; } .or-fc-faq-img img { height: 747px; object-fit: cover; object-position: 50% 100%; border-radius: 30px; } .or-fc-faq .or-fc-faq-list > .or-fc-h { font-size: 40px; line-height: 48px; margin-top: 0; padding-left: 0; } .or-fc-faq .or-fc-faq-list > .or-fc-h + .wp-block-details { margin-top: 19.7px; } .or-fc-faq.or-faq summary { display: flex; align-items: center; min-height: 99px; padding: 21px 66.5px 21px 10px; line-height: 28.5px; } .or-fc-faq.or-faq details[open] > summary { min-height: 0; padding-top: 24.1px; padding-bottom: 23px; } .or-fc-faq.or-faq summary::after { top: 50%; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } .or-fc-faq.or-faq details[open] > summary::after { top: 39px; margin-top: 0; } .or-fc-faq.or-faq .wp-block-details > :not(summary) { padding: 3px 60px 28.9px 10px; font-size: 15px; line-height: 22px; } /* Quick links. */ .or-fc-quick { padding: 0 24px 118.4px !important; } } /* Between the phone and 1352 frames there is no room for photo and title side by side. */ @media (min-width: 782px) and (max-width: 1199px) { .or-fc-card-top { display: block; } .or-fc-card-img { max-width: 240px; } .or-fc-card-title { margin-top: 22px !important; font-size: 28px; line-height: 34px; } .or-fc-card > p { margin-top: 22px; } } /* ===== page 11: INDUSTRIES | Accounting & Tax Firms ======================== * Measured off the frames: desktop 3000px with a 148px export border (a 1352 CSS canvas at 2x), * mobile 528px at 1.65x (a 320 CSS canvas). Mobile-first: plain rules are the 320 frame, the * min-width block is the 1352 one. Numbers and sources: accounting-tax-firms-design.md. */ :is(.or-at-hero, .or-at-intro, .or-at-tiles-wrap, .or-at-band, .or-at-wwd, .or-at-why, .or-at-steps, .or-at-video, .or-at-start, .or-at-evo, .or-at-spec, .or-at-ready, .or-at-team, .or-at-cost, .or-at-reasons, .or-at-speak, .or-at-faq) { margin-block: 0 !important; } :is(.or-at-hero, .or-at-intro, .or-at-tiles-wrap, .or-at-band, .or-at-wwd, .or-at-why, .or-at-steps, .or-at-video, .or-at-start, .or-at-evo, .or-at-spec, .or-at-ready, .or-at-team, .or-at-cost, .or-at-reasons, .or-at-faq) :is(p, li) { font-size: 15px; line-height: 22px; } :is(.or-at-hero, .or-at-intro, .or-at-tiles-wrap, .or-at-band, .or-at-wwd, .or-at-why, .or-at-steps, .or-at-video, .or-at-start, .or-at-evo, .or-at-spec, .or-at-ready, .or-at-team, .or-at-cost, .or-at-reasons, .or-at-speak, .or-at-faq) :is(h1, h2, h3, p, ul, figure, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-at-tiles-wrap, .or-at-wwd, .or-at-why, .or-at-steps, .or-at-video, .or-at-start, .or-at-spec, .or-at-team, .or-at-cost, .or-at-reasons, .or-at-faq) .wp-block-column { box-sizing: border-box; } .or-at-h, .or-at-title { font-size: 25px; line-height: 30px; } .or-at-btns .wp-block-button__link { padding: 4.5px 21px; box-sizing: border-box; font-size: 16px; } :where(.or-at-hero, .or-at-tiles-wrap, .or-at-why, .or-at-start, .or-at-team, .or-at-faq) figure img { display: block; width: 100%; height: auto; } /* --- hero ------------------------------------------------------------------- */ .or-at-hero { padding: 0; } .or-at-hero-img img { aspect-ratio: 1; object-fit: cover; border-radius: 0 0 35px 35px; } .or-at-hero-card { margin-top: 0 !important; padding: 24.7px 30px 0; text-align: center; } .or-at-title { color: var(--wp--preset--color--black); } .or-at-hero-card > .or-at-btns { margin-top: 24.7px; } .or-at-intro { padding: 26.1px 30px 0 !important; } /* --- three tiles -------------------------------------------------------------- */ .or-at-tiles-wrap { padding: 23.4px 0 0; } .or-at-tiles.wp-block-columns { margin: 0; gap: 24.4px !important; } .or-at-tile { box-sizing: border-box; border-radius: 35px; overflow: hidden; } .or-at-tile > * { margin-block: 0 !important; } .or-at-tile-magenta { padding: 29.9px 30px 30.4px; background: var(--wp--preset--color--magenta); } .or-at-tile-quote { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-at-tile-sky { padding: 32px 30px 30.8px; background: var(--wp--preset--color--sky); } .or-at-tile-h { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-at-tile-sky > .or-at-tile-h + p { margin-top: 20px !important; } .or-at-tile-list { margin-top: 20px !important; padding-left: 24.1px; } .or-at-tile-photo img { aspect-ratio: 320 / 269; object-fit: cover; } .or-at-band { padding: 51.3px 30px 48.4px !important; margin-top: 44.2px !important; } .or-at-band > .or-at-btns { margin-top: 30px !important; } /* --- what we do -------------------------------------------------------------- */ .or-at-wwd { padding: 47.8px 14.5px 44px !important; text-align: center; } .or-at-wwd > .or-at-eyebrow { font-size: 18px; line-height: 20px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-at-wwd-title { margin-top: 29px !important; color: var(--wp--preset--color--black); } .or-at-wwd-cards.wp-block-columns { margin-top: 24.1px !important; gap: 24.4px !important; text-align: left; } .or-at-wwd-card { box-sizing: border-box; border: 1px solid var(--wp--preset--color--black); border-radius: 35px; padding: 25px 25px 30px 30px; } .or-at-wwd-card > * { margin-block: 0 !important; } .or-at-wwd-icon img { width: 36.5px !important; } .or-at-wwd-h { margin-top: 27.6px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: #001621; } .or-at-wwd-card p { color: var(--wp--preset--color--black); } .or-at-wwd-h + p { margin-top: 22.6px !important; } /* --- why choose ---------------------------------------------------------------- */ .or-at-why { padding: 0; } .or-at-why-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-at-why-intro { padding: 50px 30px 49.8px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-at-why-intro > * { margin-block: 0 !important; } .or-at-why-title { max-width: 150px; margin-inline: auto !important; text-align: center; color: var(--wp--preset--color--magenta); } .or-at-why-intro > p { font-size: 18px !important; line-height: 26.6px !important; letter-spacing: 0.05em; } .or-at-why-intro > .or-at-h + p { margin-top: 18px !important; } .or-at-why-intro > p + p { margin-top: 24.6px !important; } .or-at-why-panel { padding: 47.2px 30px 45.9px; background: var(--wp--preset--color--sky); border-radius: 0 0 35px 35px; } .or-at-why-cards.wp-block-columns { margin: 0; gap: 38px !important; } .or-at-why-card > * { margin-block: 0 !important; } .or-at-why-img img { aspect-ratio: 1; object-fit: cover; border-radius: 35px; } .or-at-why-h { margin-top: 20px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--black); } .or-at-why-h + p { margin-top: 22px !important; } /* Colours read off the frames; several differ between the phone and desktop frames. */ :is(.or-at-why-card, .or-at-step) p { color: var(--wp--preset--color--black); } /* --- four steps ---------------------------------------------------------------- */ .or-at-steps { padding: 89.7px 0 44px !important; } .or-at-steps-cols.wp-block-columns { margin: 0; gap: 24.6px !important; } .or-at-steps-head { padding: 0 30px; } .or-at-steps-title { color: var(--wp--preset--color--black); } .or-at-steps-grid { display: grid; gap: 24.4px; } .or-at-steps-grid > .or-at-step { margin: 0 !important; } /* Phones: icon and title side by side (title from x105), copy below. */ .or-at-step { display: grid; grid-template-columns: 75px 1fr; align-items: center; box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky); padding: 30px 30px 29px; } .or-at-step > * { margin-block: 0 !important; } .or-at-step-icon img { height: auto; } .or-at-step-assess .or-at-step-icon img { width: 46px !important; } .or-at-step-strategize .or-at-step-icon img { width: 51px !important; } .or-at-step-execute .or-at-step-icon img { width: 53px !important; } .or-at-step-optimize .or-at-step-icon img { width: 29px !important; } .or-at-step-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: 0.05em; color: var(--wp--preset--color--magenta); } .or-at-step-h + p { grid-column: 1 / -1; margin-top: 16.5px !important; } /* --- video ------------------------------------------------------------------------- */ .or-at-video { padding: 49.7px 0 !important; } .or-at-video-card { box-sizing: border-box; margin: 0 30px !important; max-width: none !important; border-radius: 35px; background: var(--wp--preset--color--magenta); padding: 32.5px 12px 22px; } .or-at-video-cols.wp-block-columns { margin: 0; gap: 19.9px !important; } .or-at-video-copy > * { margin-block: 0 !important; } @media (max-width: 781px) { .or-at-video-copy { padding-left: 18px; } .or-at-video-title { max-width: 200px; } } .or-at-video-copy > .or-at-eyebrow { font-size: 15px; line-height: 20px; color: var(--wp--preset--color--white); } .or-at-video-title { margin-top: 17.4px !important; color: var(--wp--preset--color--white); } .or-at-video-embed { margin: 0 !important; } .or-at-video-embed iframe { border-radius: 20px; } /* --- get started -------------------------------------------------------------------- */ .or-at-start { padding: 0; } .or-at-start-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-at-start-copy { padding: 44px 30px 23.6px; } .or-at-start-copy > * { margin-block: 0 !important; } .or-at-start-title { color: var(--wp--preset--color--black); } .or-at-start-sub { margin-top: 25.9px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-at-start-sub + p { margin-top: 27.3px !important; } .or-at-start-copy > p + p { margin-top: 22px !important; } .or-at-start-copy > .or-at-btns { margin-top: 25px !important; } .or-at-start-img img { aspect-ratio: 320 / 319.5; object-fit: cover; border-radius: 35px; } /* --- the industry is evolving -------------------------------------------------------- */ .or-at-evo { margin-top: 44.8px !important; padding: 39.5px 30px 46.2px !important; background: var(--wp--preset--color--sky); } .or-at-evo > * { margin-block: 0 !important; } .or-at-evo-title { text-align: center; color: var(--wp--preset--color--navy); } .or-at-evo-item { margin-top: 19px !important; } .or-at-evo-item + .or-at-evo-item { margin-top: 15.6px !important; } .or-at-evo-item > * { margin-block: 0 !important; } .or-at-evo-h { position: relative; padding-left: 34px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } /* The arrow before each heading is decoration, drawn as a mask so it takes the text colour. */ .or-at-evo-h::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 14px; background: var(--wp--preset--color--black); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 7h18M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 7h18M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; } .or-at-evo-item > :not(.or-at-evo-h) { margin-left: 34px !important; } .or-at-evo-item > p { max-width: 192px; } .or-at-evo-h + * { margin-top: 23.2px !important; } .or-at-evo-list { max-width: 191px; padding-left: 23px; } .or-at-evo-item > p + p { margin-top: 22px !important; } .or-at-evo-item > p + ul { margin-top: 0 !important; } .or-at-evo-item > p.or-at-tight { margin-top: 0 !important; } .or-at-evo > .or-at-btns { margin-top: 18px !important; } /* --- why specialized -------------------------------------------------------------------- */ .or-at-spec { padding: 45.5px 0 44.8px !important; } .or-at-spec-title { padding: 0 30px; color: var(--wp--preset--color--black); } .or-at-spec-cards.wp-block-columns { margin: 25px 0 0 !important; gap: 24.4px !important; } .or-at-spec-cards + .or-at-spec-cards.wp-block-columns { margin-top: 24.4px !important; } .or-at-spec-card { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky); padding: 30px 30px 28.6px; } .or-at-spec-card > * { margin-block: 0 !important; } .or-at-spec-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 600; font-size: 15px; line-height: 22.4px; color: var(--wp--preset--color--navy); } .or-at-spec-h + p { margin-top: 18.8px !important; } .or-at-ready { padding: 50.3px 30px 50px !important; text-align: center; } .or-at-ready > .or-at-h { color: var(--wp--preset--color--white); } .or-at-ready > .or-at-btns { margin-top: 20px !important; } /* --- complete team ---------------------------------------------------------------------- */ .or-at-team { padding: 29.7px 0 0; } .or-at-team-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-at-team-media { display: none; } .or-at-team-copy { padding: 0 30px; } .or-at-team-copy > * { margin-block: 0 !important; } .or-at-team-title { color: var(--wp--preset--color--black); } .or-at-team-copy > .or-at-more { margin-top: 41.3px !important; } .or-at-team-copy > .or-at-more-toggle + .or-at-more, .or-at-team-copy > .or-at-more + .or-at-more { margin-top: 32.7px !important; } .or-at-more-toggle { display: none; } .or-at-team-copy > .or-at-btns { margin-top: 45.5px !important; } /* --- cost comparison ------------------------------------------------------------------------ */ .or-at-cost { padding: 55px 0 0 !important; } .or-at-cost-title { padding: 0 30px; color: var(--wp--preset--color--navy); } .or-at-cost-panel { margin-top: 25px !important; border-radius: 35px; background: #dcf2ff; padding: 31.2px 30px 30px; } .or-at-cost-cols.wp-block-columns { margin: 0; gap: 25px !important; } .or-at-cost-col > * { margin-block: 0 !important; } .or-at-cost-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 26px; color: var(--wp--preset--color--navy); } .or-at-cost-label { font-size: 18px !important; line-height: 26.5px !important; letter-spacing: 0.05em; } .or-at-cost-list { margin-top: 13px !important; padding-left: 24.1px; } /* --- why accounting firms choose ------------------------------------------------------------ */ .or-at-reasons { margin-top: 49px !important; padding: 50px 0 50.3px !important; text-align: center; } .or-at-reasons > .or-at-reasons-sub { margin-top: 26.4px !important; padding: 0 30px; font-size: 18px !important; line-height: 24.6px !important; letter-spacing: 0.05em; } .or-at-reasons-title { padding: 0 30px; color: var(--wp--preset--color--white); } .or-at-reasons-row.wp-block-columns { margin-top: 32px !important; gap: 29px !important; } .or-at-reasons-row + .or-at-reasons-row.wp-block-columns { margin-top: 29px !important; } .or-at-reason { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); padding: 39px 30px 30px; } .or-at-reason > * { margin-block: 0 !important; } .or-at-reason-num { width: 85px; height: 85px; margin: 0 auto !important; border-radius: 50%; background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--white); font-size: 37px !important; line-height: 85px !important; } .or-at-reason-h { margin-top: 10px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; } .or-at-reason-h + p { margin-top: 27.5px !important; } /* --- speak / FAQ -------------------------------------------------------------------------------- */ .or-at-speak { padding: 39.3px 4px 0 !important; } .or-at-speak-title { text-align: center; color: var(--wp--preset--color--black); } .or-at-speak > .or-at-h + * { margin-top: 30px !important; } .or-at-speak .meetings-iframe-container iframe { display: block; width: 100%; } .or-at-faq { padding: 0 30px 60px !important; } .or-at-faq-media { display: none; } .or-at-faq .or-at-faq-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-at-faq .or-at-faq-list > .or-at-h { font-size: 27px; line-height: 1.05; margin: 23.4px 0 0; padding-left: 17px; color: var(--wp--preset--color--navy); } .or-at-faq .or-at-faq-list > .or-at-h + .wp-block-details { margin-top: 20px; } .or-at-faq .wp-block-details { margin-block: 0; } .or-at-faq.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-at-faq.or-faq .wp-block-details > :not(summary) { padding: 0 20px 10.5px 20px; } .or-at-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-at-faq.or-faq .wp-block-details > summary + * { padding-top: 8.3px; } .or-at-faq.or-faq .wp-block-details :is(p, li) { font-size: 16px; line-height: 24px; } .or-at-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 0; padding-left: 44.5px; } /* ----------------------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-at-h, .or-at-title { font-size: 40px; line-height: 48px; } .or-at-btns .wp-block-button__link { padding: 10.5px 26px; } .or-main .or-at-btns > .wp-block-button, .or-main .or-at-btns > .wp-block-button .wp-block-button__link { width: auto; } /* Hero: 434px photo, 978px white card lifted 297px over it. */ .or-at-hero-img img { aspect-ratio: auto; height: 434px; border-radius: 0 0 30px 30px; } .or-at-hero-card { position: relative; box-sizing: border-box; width: min(978.5px, calc(100% - 48px)); margin: -297px auto 0 !important; border-radius: 35px 35px 0 0; background: var(--wp--preset--color--white); padding: 50px 24px 40px 135.5px; text-align: left; } .or-at-title { max-width: 600px; } :is(.or-at-title, .or-at-start-title, .or-at-spec-title, .or-at-speak-title) { color: var(--wp--preset--color--navy); } .or-at-tile-h { color: var(--wp--preset--color--black); } :is(.or-at-wwd > .or-at-eyebrow, .or-at-wwd-title) { color: #001621; } .or-at-faq.or-faq .wp-block-details :is(p, li) { color: var(--wp--preset--color--black); } .or-at-hero-card > .or-at-btns { margin-top: 17.5px; } .or-at-hero-card .or-at-btns .wp-block-button__link { min-width: 219.5px; } .or-at-intro { padding: 44px 24px 0 !important; text-align: center; } .or-at-intro > p { max-width: 860px; margin-inline: auto !important; position: relative; left: 7.5px; } /* Tiles: 324 / 314 / 313 across x200..1151, 402 tall. */ .or-at-tiles-wrap { padding: 82px 24px 0; } .or-at-tiles.wp-block-columns { max-width: 951px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } .or-at-tiles.wp-block-columns > .wp-block-column { flex: 0 0 auto; min-width: 0; min-height: 402px; } .or-at-tiles > .or-at-tile-magenta { width: 324px; padding: 80.5px 40px 0; } .or-at-tiles > .or-at-tile-sky { width: 314px; padding: 70px 40px 0; } .or-at-tiles > .or-at-tile-photo { width: 313px; } .or-at-tile-quote { font-size: 23px; line-height: 30px; letter-spacing: 0; } .or-at-tile-h { font-size: 23px; line-height: 30px; letter-spacing: 0; } .or-at-tile-sky > .or-at-tile-h + p { margin-top: 18px !important; } .or-at-tile-list { margin-top: 22px !important; padding-left: 23px; } .or-at-tile-photo img { height: 402px; aspect-ratio: auto; } .or-at-band { margin-top: 0 !important; padding: 84px 24px 62px !important; text-align: center; } .or-at-band > p { max-width: 860px; margin-inline: auto !important; } .or-at-band > .or-at-btns { margin-top: 44px !important; justify-content: center; } .or-at-band .or-at-btns .wp-block-button__link { min-width: 219px; } /* What we do: four 236px cards across x201..1150. */ .or-at-wwd { padding: 42.5px 24px 61px !important; text-align: left; } .or-at-wwd > * { max-width: 949px; margin-inline: auto !important; } .or-at-wwd > .or-at-eyebrow { font-size: 18px; letter-spacing: 0; } .or-at-wwd-title { margin-top: 15px !important; } .or-at-wwd > .or-at-wwd-title { max-width: 949px; padding-right: 300px; box-sizing: border-box; } .or-at-wwd-cards.wp-block-columns { margin-top: 58.5px !important; gap: 1px !important; flex-wrap: nowrap !important; } .or-at-wwd-cards > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 340px; } .or-at-wwd-card { padding: 35px 20px 20px 32px; } .or-at-wwd-h { max-width: 165px; margin-top: 14px !important; font-size: 24px; line-height: 22px; letter-spacing: 0; } .or-at-wwd-card p { max-width: 178px; color: var(--wp--preset--color--black); } .or-at-wwd-fast p { max-width: 170px; } .or-at-wwd-fast .or-at-wwd-h { max-width: 152px; } .or-at-wwd-h + p { margin-top: 17.5px !important; } .or-at-wwd-built p { max-width: 172px; color: var(--wp--preset--color--navy); } .or-at-wwd-built.or-at-wwd-card { padding-left: 29px; } /* Why choose: navy x0..444, sky x444..1352, 688 tall; 202px photos. */ .or-at-why-cols.wp-block-columns { flex-wrap: nowrap !important; min-height: 688px; } .or-at-why-cols > .wp-block-column { min-width: 0; } .or-at-why-cols > .or-at-why-intro { flex: 0 0 32.84% !important; padding: 98px 30px 0 max(24px, calc((100vw - 946px) / 2)); } /* Client change 16 Sep 2026: flush left with the copy below (a phone centring rule had pushed it 30px in). */ .or-at-why-title { max-width: none; text-align: left; margin-left: 0 !important; } .or-at-why-intro > p { font-size: 15px !important; line-height: 22px !important; letter-spacing: -0.02em; max-width: 201px; } .or-at-why-card:nth-child(2) p { max-width: 193px; letter-spacing: -0.01em; } .or-at-why-card:nth-child(3) p { max-width: 197px; letter-spacing: -0.01em; } .or-at-why-intro > .or-at-h + p { margin-top: 19px !important; } .or-at-why-intro > p + p { margin-top: 22px !important; } .or-at-why-cols > .or-at-why-panel { flex: 1 1 auto !important; border-radius: 0; padding: 73px 24px 0 41px; } .or-at-why-cards.wp-block-columns { max-width: 662px; gap: 32px !important; flex-wrap: nowrap !important; } .or-at-why-cards > .wp-block-column { flex: 0 0 202px !important; } .or-at-why-h { margin-top: 28px !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 17px; line-height: 23.5px; letter-spacing: 0; } .or-at-why-h + p { margin-top: 28.5px !important; } .or-at-why-card:nth-child(1) .or-at-why-h { margin-top: 26px !important; } .or-at-why-card:nth-child(2) .or-at-why-h { margin-top: 21.5px !important; } .or-at-why-card:nth-child(2) .or-at-why-h + p { margin-top: 27.5px !important; } .or-at-why-card:nth-child(3) { margin-left: -6px; } .or-at-why-card:nth-child(3) .or-at-why-h { margin-top: 24px !important; } /* Steps: heading left, 260x280 cards at x604 / x891, the right column 168px lower. */ .or-at-steps { padding: 67px 24px 67px !important; } .or-at-steps-cols.wp-block-columns { max-width: 948px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-at-steps-head { flex: 0 0 401px !important; padding: 156px 0 0; } .or-at-steps-title { max-width: 300px; } .or-at-steps-body { flex: 0 0 547px !important; } .or-at-steps-grid { grid-template-columns: 260px 260px; column-gap: 27px; row-gap: 57px; padding-bottom: 168px; } .or-at-step { display: block; min-height: 280px; padding: 23px 28px 0; } .or-at-step-h { font-weight: 700; letter-spacing: 0; } .or-at-step-h { line-height: 24px; } .or-at-step-icon img { height: auto; } .or-at-step-assess .or-at-step-icon img { width: 46px !important; } .or-at-step-strategize .or-at-step-icon img { width: 51px !important; } .or-at-step-execute .or-at-step-icon img { width: 53px !important; } .or-at-step-optimize .or-at-step-icon img { width: 29px !important; } /* The frame places each card's icon, title and copy freely; these reproduce it. */ .or-at-step-assess { padding: 23px 62px 0 28px; } .or-at-step-assess .or-at-step-h { margin-top: 20px !important; } .or-at-step-assess .or-at-step-h + p { margin-top: 7.5px !important; } .or-at-step-strategize { padding: 25px 34px 0 21.5px; } .or-at-step-strategize .or-at-step-h { margin-top: 17px !important; } .or-at-step-strategize .or-at-step-h + p { margin-top: 6.5px !important; } .or-at-step-execute { padding: 38px 42px 0 28px; } .or-at-step-execute .or-at-step-h { margin-top: 21px !important; } .or-at-step-execute .or-at-step-h + p { margin-top: 19.5px !important; } .or-at-step-optimize { padding: 20px 60px 0 21.5px; } .or-at-step-optimize .or-at-step-h { margin-top: 12px !important; } .or-at-step-optimize .or-at-step-h + p { margin-top: 10px !important; } .or-at-step:nth-child(2n) { transform: translateY(168px); } .or-at-step-icon { float: none; margin: 0 !important; } .or-at-step-h { font-size: 20px; } /* Video: magenta card x202..1150, 394 tall, inside a navy band. */ .or-at-video { padding: 66px 24px 65px !important; } .or-at-video-copy { padding-left: 0; } .or-at-video-title { max-width: none; } .or-at-video-card { max-width: 948px !important; margin: 0 auto !important; min-height: 394px; padding: 29.5px 28px 0 52.5px; } .or-at-video-embed .wp-block-embed__wrapper::before { padding-top: 337.5px !important; } .or-at-video-cols.wp-block-columns { gap: 23.5px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-at-video-copy { flex: 0 0 260px !important; padding-top: 56px; } .or-at-video-media { flex: 1 1 auto !important; } .or-at-video-copy > .or-at-eyebrow { font-size: 18px; } .or-at-video-title { margin-top: 11px !important; } .or-at-video-card { padding-top: 29.5px; } /* Get started: grey panel x0..680, photo x786..1352, 595 tall. */ /* Client change 16 Sep 2026: space below the section (the frame runs it straight into the sky panel). */ .or-at-start { padding-bottom: 64px !important; } .or-at-start-cols.wp-block-columns { flex-wrap: nowrap !important; justify-content: space-between; min-height: 595px; } .or-at-start-copy { flex: 0 0 680px !important; background: #fafafa; padding: 46px 24px 0 max(24px, calc((100% - 946px) / 2 + 4px)); } .or-at-start-copy > * { max-width: 513px; } /* The copy runs 26px past the grey panel, as in the frame. */ .or-at-start-copy > p { width: 513px; } .or-at-start-sub { margin-top: 28.75px !important; font-size: 22px; line-height: 31.5px; letter-spacing: 0; max-width: 400px; } .or-at-start-sub + p { margin-top: 33.75px !important; } .or-at-start-copy > p + p { margin-top: 22px !important; } .or-at-start-copy > .or-at-btns { margin-top: 41.5px !important; } .or-at-start .or-at-btns .wp-block-button__link { min-width: 156px; } .or-at-start-media { flex: 0 0 566px !important; margin-left: auto; } .or-at-start-img img { aspect-ratio: auto; height: 595px; border-radius: 35px 0 0 35px; } /* Evolving: sky panel 933 tall, copy block from x361. */ .or-at-evo { margin-top: 0 !important; padding: 78px 24px 89px !important; border-radius: 35px; } .or-at-evo > * { max-width: 630px; margin-inline: auto !important; } .or-at-evo > .or-at-evo-title { max-width: none; } .or-at-evo-item { margin-top: 50px !important; } .or-at-evo-item + .or-at-evo-item { margin-top: 31px !important; } .or-at-evo-h { padding-left: 54px; font-size: 24px; line-height: 29px; letter-spacing: 0; } .or-at-evo-item > :not(.or-at-evo-h) { margin-left: 54px !important; } .or-at-evo-h { max-width: 524px; } .or-at-evo-h + * { margin-top: 24px !important; } .or-at-evo-list { max-width: none; padding-left: 26px; } .or-at-evo-item > p { max-width: none; } .or-at-evo-item > p + ul { margin-top: 22px !important; } .or-at-evo > .or-at-btns { margin-top: 55px !important; justify-content: center; } .or-at-evo .or-at-btns .wp-block-button__link { min-width: 382px; } /* Specialized: 302 / 308 / 303 cards, 376 tall. */ .or-at-spec { padding: 51.6px 24px 55px !important; } .or-at-spec-title { max-width: 560px; margin: 0 auto !important; padding: 0; text-align: center; position: relative; left: 7.5px; } .or-at-spec-cards.wp-block-columns { max-width: 949px; margin: 47.5px auto 0 !important; gap: 17px !important; flex-wrap: nowrap !important; } .or-at-spec-cards + .or-at-spec-cards.wp-block-columns { margin-top: 38px !important; } .or-at-spec-cards > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 376px; } .or-at-spec-card { padding: 72px 0 0 34px; } .or-at-spec > .or-at-spec-cards:nth-child(2) > .or-at-spec-card:nth-child(1) p { max-width: 239px; } .or-at-spec > .or-at-spec-cards:nth-child(2) > .or-at-spec-card:nth-child(2) p { max-width: 233px; } .or-at-spec > .or-at-spec-cards:nth-child(2) > .or-at-spec-card:nth-child(3) p { max-width: 244px; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(1) p { max-width: 216px !important; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(2) p { max-width: 215px; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(3) p { max-width: 237px; } .or-at-spec-h { max-width: 222px; } /* Each card in the frame sets its own title breaks and spacing; these reproduce them. */ .or-at-spec > .or-at-spec-cards:nth-child(2) > .or-at-spec-card:nth-child(1) .or-at-spec-h + p { margin-top: 16.6px !important; } .or-at-spec > .or-at-spec-cards:nth-child(2) > .or-at-spec-card:nth-child(2) { padding-left: 36px; } .or-at-spec > .or-at-spec-cards:nth-child(2) > .or-at-spec-card:nth-child(2) .or-at-spec-h + p { margin-top: 9.6px !important; } .or-at-spec > .or-at-spec-cards:nth-child(2) > .or-at-spec-card:nth-child(3) { padding-top: 68.6px; padding-left: 38.5px; } .or-at-spec > .or-at-spec-cards:nth-child(2) > .or-at-spec-card:nth-child(3) .or-at-spec-h + p { margin-top: 15px !important; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(1) .or-at-spec-h { max-width: 150px; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(1) p { max-width: 222px; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(1) .or-at-spec-h + p { margin-top: 10.5px !important; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(2) { padding-top: 51.6px; padding-left: 36px; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(2) .or-at-spec-h { max-width: 170px; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(2) .or-at-spec-h + p { margin-top: 10.6px !important; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(3) { padding-left: 36.5px; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(3) .or-at-spec-h { max-width: 140px; } .or-at-spec > .or-at-spec-cards:nth-child(3) > .or-at-spec-card:nth-child(3) .or-at-spec-h + p { margin-top: 16.1px !important; } .or-at-spec-h { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 20px; line-height: 22.5px; } .or-at-spec-h + p { margin-top: 14px !important; } .or-at-ready { padding: 56px 24px 41px !important; } .or-at-ready > .or-at-h { max-width: 480px; margin-inline: auto !important; } .or-at-ready > .or-at-btns { margin-top: 33px !important; justify-content: center; } .or-at-ready .or-at-btns .wp-block-button__link { min-width: 154px; } /* Team: 500x886 image left, copy from x623. */ .or-at-team { padding: 0 24px 0 0; } .or-at-team-cols.wp-block-columns { flex-wrap: nowrap !important; gap: 122px !important; } .or-at-team-media { display: block; flex: 0 0 501px !important; } .or-at-team-img img { height: 886px; object-fit: cover; border-radius: 0 35px 35px 0; } .or-at-team-copy { flex: 0 1 530px !important; padding: 79px 0 0; } .or-at-team-title { max-width: 480px; } .or-at-team .or-at-btns .wp-block-button__link { min-width: 206px; padding-inline: 21px; } .or-at-team-copy > .or-at-more { margin-top: 53.6px !important; } .or-at-team-copy > .or-at-more-toggle + .or-at-more { margin-top: 29.5px !important; } .or-at-more.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .or-at-more-toggle { display: block; margin-top: 0 !important; padding: 0; border: 0; background: none; margin-top: 3px !important; font: inherit; font-size: 15px; line-height: 22px; text-decoration: underline; color: var(--wp--preset--color--black); cursor: pointer; } .or-at-team-copy > .or-at-btns { margin-top: 38px !important; } /* Cost: sky panel x44..1308, 510 tall; three columns. */ .or-at-cost { padding: 119px 24px 34px !important; } .or-at-cost-title { max-width: 620px; margin: 0 auto !important; padding: 0; text-align: center; } .or-at-cost-panel { margin: 57px auto 0 !important; max-width: 1264px !important; min-height: 510px; box-sizing: border-box; padding: 104px 24px 0 158px; } .or-at-cost-cols.wp-block-columns { gap: 20px !important; flex-wrap: nowrap !important; } .or-at-cost-head { flex: 0 0 270px !important; padding-top: 8.6px; } .or-at-cost-h { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 24px; line-height: 39px; } .or-at-cost-inhouse { flex: 0 0 350px !important; padding-top: 5.1px; } .or-at-cost-inhouse .or-at-cost-list { max-width: 262px; margin-top: 25.6px !important; padding-left: 17.5px; } .or-at-cost-rawr { flex: 0 0 300px !important; padding-top: 5.1px; } .or-at-cost-rawr .or-at-cost-list { margin-top: 13.5px !important; padding-left: 16px; } .or-at-cost-label { font-size: 20px !important; line-height: 28px !important; letter-spacing: 0; max-width: 200px; } .or-at-cost-list { margin-top: 30px !important; } /* Reasons: 319px white cards with a 74px magenta disc across the top edge. */ .or-at-reasons { margin-top: 0 !important; padding: 99px 24px 131.5px !important; } .or-at-reason { padding-top: 0; } .or-at-reasons > .or-at-reasons-sub { margin-top: 34px !important; font-size: 28px !important; line-height: 32px !important; letter-spacing: 0; } .or-at-reasons > .or-at-reasons-sub { margin-top: 28px !important; } .or-at-reasons-row.wp-block-columns { max-width: 979px; margin: 48px auto 0 !important; gap: 10px !important; flex-wrap: nowrap !important; } .or-at-reasons-row + .or-at-reasons-row.wp-block-columns { margin-top: 84px !important; } .or-at-reasons-row > .wp-block-column { flex: 1 1 0; min-width: 0; } .or-at-reason { min-height: 368px; padding: 0 32px 40px; margin-top: 26px; } .or-at-reason-num { width: 84px; height: 84px; margin: -26px auto 0 !important; font-size: 36px !important; line-height: 84px !important; } .or-at-reason-h { max-width: 200px; margin: 34px auto 0 !important; font-size: 20px; line-height: 27.5px; letter-spacing: 0; } .or-at-reason-h + p { margin-top: 37px !important; } .or-at-speak { padding: 47.6px 24px 0 !important; } .or-at-speak > .or-at-h + * { margin-top: 60px !important; max-width: 850px; margin-inline: auto !important; } .or-at-faq { padding: 82.4px 24px 106px !important; } .or-at-faq .or-at-faq-cols.wp-block-columns { max-width: 953px; margin: 0 auto; gap: 53px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-at-faq-media { display: block; flex: 0 0 350px !important; } .or-at-faq-img-top img { height: 632px; object-fit: cover; border-radius: 30px; } .or-at-faq-img-bottom { margin-top: 42px !important; } .or-at-faq-img-bottom img { height: 374px; object-fit: cover; border-radius: 30px; } .or-at-faq-cols > .or-at-faq-list.wp-block-column { flex: 1 1 550px !important; min-width: 0; } .or-at-faq .or-at-faq-list > .or-at-h { font-size: 40px; line-height: 48px; margin-top: -5px; padding-left: 0; } .or-at-faq .or-at-faq-list > .or-at-h + .wp-block-details { margin-top: 15px; } .or-at-faq.or-faq summary { display: flex; align-items: center; min-height: 93px; padding: 18px 66.5px 18px 10px; font-size: 20px; line-height: 28.5px; } .or-at-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 2.5px; padding-left: 35.5px; } .or-at-faq.or-faq .wp-block-details > summary + * { padding-top: 0; } .or-at-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-at-faq.or-faq details[open] > summary { padding-top: 24.7px; padding-bottom: 22px; } .or-at-faq.or-faq details[open] > :last-child { padding-bottom: 23.7px; } .or-at-faq.or-faq summary::after { top: 50%; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } .or-at-faq.or-faq .wp-block-details > :not(summary) { padding: 0 40px 20px 10px; } .or-at-faq.or-faq .wp-block-details :is(p, li) { font-size: 15px; line-height: 22px; } } /* Between the phone and 1352 frames (no frame exists for these widths) the fixed frame widths give way together instead of overflowing, and fixed heights become minimums. */ @media (min-width: 782px) and (max-width: 1351px) { .or-at-tiles.wp-block-columns > .wp-block-column { flex-shrink: 1; height: auto; min-height: 402px; } .or-at-tile-photo img { height: 100%; min-height: 402px; object-fit: cover; } .or-at-wwd-cards > .wp-block-column { height: auto; min-height: 340px; } .or-at-why-cols > .or-at-why-intro { padding-left: 24px; } .or-at-why-cards > .wp-block-column { flex: 0 1 202px !important; min-width: 0; } .or-at-why-card:nth-child(3) { margin-left: 0; } .or-at-steps-head { flex: 0 1 401px !important; min-width: 0; } .or-at-steps-body { flex: 0 1 547px !important; min-width: 0; } .or-at-steps-grid { grid-template-columns: minmax(0, 260px) minmax(0, 260px); } .or-at-step { height: auto; min-height: 280px; padding-bottom: 20px; } .or-at-video-card { height: auto; min-height: 394px; } .or-at-video-copy { flex: 0 1 260px !important; min-width: 0; } .or-at-start-cols.wp-block-columns { height: auto; min-height: 595px; } .or-at-start-copy { flex: 1 1 680px !important; min-width: 0; padding-bottom: 40px; } .or-at-start-copy > p { width: auto; } .or-at-start-media { display: flex; flex: 0 1 566px !important; min-width: 0; } .or-at-start-img { position: relative; flex: 1 1 auto; min-height: 595px; } .or-at-start .or-at-start-img img { position: absolute; inset: 0; height: 100%; } .or-at-spec-cards > .wp-block-column { height: auto; min-height: 376px; padding-bottom: 24px; } .or-at-team-cols.wp-block-columns { gap: clamp(48px, 9vw, 122px) !important; } .or-at-team-media { flex: 0 1 501px !important; min-width: 0; } .or-at-team-copy { padding-bottom: 60px; } .or-at-cost-panel { height: auto; min-height: 510px; padding: 104px 24px 48px clamp(24px, calc((100vw - 1036px) / 2), 158px); } .or-at-cost-cols > .wp-block-column { flex-shrink: 1 !important; min-width: 0; } .or-at-cost-inhouse .or-at-cost-list { max-width: none; } } /* ===== page 12: ABOUT US | Working With One Rawr =========================== * Measured off the frames: desktop 3840px (a 1920 CSS canvas at 2x — wider than the 1352 frames * of the other pages), mobile 640px (320 at 2x). Mobile-first: plain rules are the 320 frame, the * min-width block is the 1920 one. Numbers and sources: about-design.md. */ :where(.or-ab-hero, .or-ab-how, .or-ab-approach, .or-ab-strat, .or-ab-speak) { margin-block: 0 !important; } :is(.or-ab-hero, .or-ab-how, .or-ab-approach, .or-ab-strat) :is(p, li) { font-size: 15px; line-height: 22px; } :is(.or-ab-hero, .or-ab-how, .or-ab-approach, .or-ab-strat, .or-ab-speak) :is(h1, h2, h3, p, figure, .wp-block-buttons, .wp-block-columns, hr) { margin-block: 0; } :is(.or-ab-hero, .or-ab-how, .or-ab-strat) .wp-block-column { box-sizing: border-box; } :where(.or-ab-hero, .or-ab-how) figure img { display: block; width: 100%; height: auto; } .or-ab-h, .or-ab-title { font-size: 25px; line-height: 30px; } .or-ab-btns .wp-block-button__link { padding: 4.5px 21px; box-sizing: border-box; font-size: 16px; } /* --- hero ----------------------------------------------------------------------- */ .or-ab-hero { padding: 45px 30px 0; } .or-ab-hero-img { display: none; } .or-ab-hero-card { margin-top: 0 !important; } .or-ab-hero-card > * { margin-block: 0 !important; } .or-ab-title { text-align: center; color: var(--wp--preset--color--black); } .or-ab-lead { max-width: 225px; margin-top: 26px !important; } /* --- how we work ----------------------------------------------------------------- */ .or-ab-how { padding: 24px 0 0; } .or-ab-how-cols.wp-block-columns { margin: 0; gap: 25px !important; } .or-ab-how-img img { aspect-ratio: 320 / 210; object-fit: cover; border-radius: 35px; } .or-ab-how-panel { padding: 29.5px 30px 29px; border-radius: 35px; background: #fafafa; } .or-ab-how-panel > * { margin-block: 0 !important; } .or-ab-how-h { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 20px; line-height: 26px; color: var(--wp--preset--color--navy); } .or-ab-how-h + p { margin-top: 17.5px !important; } .or-ab-how-panel > p + .or-ab-how-h { margin-top: 23.5px !important; } /* --- a results-driven approach ------------------------------------------------------ */ .or-ab-approach { padding: 44.5px 30px 44px !important; } .or-ab-approach > * { margin-block: 0 !important; } .or-ab-approach-title { line-height: 31px; color: var(--wp--preset--color--black); } .or-ab-approach-lead { margin-top: 24px !important; } .or-ab-approach-fluff { margin-top: 22px !important; } .or-ab-approach > .or-ab-btns { margin-top: 24px !important; } /* Six steps: label, subtitle, a dotted marker and dashed connector (CSS), then the icon disc cropped out of its image. The phone frame shrinks the disc to 71px but not the marker. */ .or-ab-steps { display: grid; max-width: none !important; grid-template-columns: repeat(3, 90px); justify-content: space-between; row-gap: 44px; margin: 27.5px -5px 0 !important; text-align: center; } .or-ab-steps > .or-ab-step { margin: 0 !important; } .or-ab-step { display: flex; flex-direction: column; align-items: center; } .or-ab-step > * { margin-block: 0 !important; } .or-ab-step-n { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 16.5px !important; line-height: 20px !important; color: var(--wp--preset--color--black); } .or-ab-step-magenta .or-ab-step-n { color: var(--wp--preset--color--magenta); } .or-ab-step-label { margin-top: 7.5px !important; font-family: var(--wp--preset--font-family--figtree); font-size: 15.7px !important; line-height: 18px !important; color: #9a9a9a; } /* The phone frame wraps most subtitles after the first word; these widths reproduce it. */ .or-ab-step-label { max-width: 70px; } :is(.or-ab-step-3, .or-ab-step-5) .or-ab-step-label { max-width: 92px; } .or-ab-step-label::after { content: ""; display: block; width: 22px; height: 22px; margin: 6px auto 0; background: currentColor; } .or-ab-step-label::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9.6' fill='none' stroke='black' stroke-width='2.4' stroke-dasharray='4.3 3.24'/%3E%3Ccircle cx='11' cy='11' r='3.5'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9.6' fill='none' stroke='black' stroke-width='2.4' stroke-dasharray='4.3 3.24'/%3E%3Ccircle cx='11' cy='11' r='3.5'/%3E%3C/svg%3E") no-repeat center / contain; } .or-ab-step-magenta .or-ab-step-label::after { background: var(--wp--preset--color--magenta); } .or-ab-step-navy .or-ab-step-label::after { background: var(--wp--preset--color--black); } /* Steps 3 and 5 are navy in both frames; step 1 is black. */ :is(.or-ab-step-3, .or-ab-step-5) .or-ab-step-n { color: var(--wp--preset--color--navy); } :is(.or-ab-step-3, .or-ab-step-5) .or-ab-step-label::after { background: var(--wp--preset--color--navy); } /* The dashed connector, 47.5px, between the marker and the disc. */ .or-ab-step-icon { position: relative; width: 71px; height: 71px; margin-top: 48.5px !important; overflow: visible; } .or-ab-step-icon::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 47.5px; margin: 0 0 1px -0.75px; background: repeating-linear-gradient(to bottom, #9a9a9a 0 4px, transparent 4px 7px); } .or-ab-step-icon img { position: absolute; left: 50%; bottom: 0; width: 71px !important; max-width: none; height: auto; transform: translateX(-50%); clip-path: inset(calc(100% - 71px) 0 0 0); } .or-ab-step-icon-wide img { width: calc(71px * 376 / 264) !important; } .or-ab-approach-after { margin-top: 25.5px !important; } .or-ab-approach-after + .or-ab-approach-after { margin-top: 21.5px !important; } /* --- need a strategy fast? ----------------------------------------------------------------- */ .or-ab-strat { padding: 49.5px 30px 50px !important; } .or-ab-strat-cols.wp-block-columns { margin: 0; gap: 30.5px !important; } .or-ab-strat-cols .wp-block-column > * { margin-block: 0 !important; } .or-ab-strat-title { text-align: center; } .or-ab-strat-copy.wp-block-column > p + p { margin-top: 22.5px !important; } .or-ab-strat-rule { display: none; } .or-ab-strat-copy > .or-ab-btns { margin-top: 29.5px !important; } /* --- speak ---------------------------------------------------------------------------------------- */ .or-ab-speak { padding: 42.5px 4px 0 !important; } .or-ab-speak-title { text-align: center; color: var(--wp--preset--color--black); } .or-ab-speak > .or-ab-h + * { margin-top: 27.5px !important; } .or-ab-speak .meetings-iframe-container iframe { display: block; width: 100%; } /* ----------------------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-ab-h, .or-ab-title { font-size: 40px; line-height: 48px; } .or-ab-btns .wp-block-button__link { padding: 10.5px 21px; } .or-main .or-ab-btns > .wp-block-button, .or-main .or-ab-btns > .wp-block-button .wp-block-button__link { width: auto; } .or-ab-btns { justify-content: center; } /* Hero: photo under the header, 980px white card rising 297.5px over it. */ .or-ab-hero { padding: 0; } .or-ab-hero-img { display: block; } .or-ab-hero-img img { height: 447.5px; object-fit: cover; } .or-ab-hero-card { position: relative; box-sizing: border-box; width: min(980px, calc(100% - 48px)); margin: -297.5px auto 0 !important; border-radius: 35px 35px 0 0; background: var(--wp--preset--color--white); padding: 50px 0 42.5px 26px; text-align: center; } .or-ab-title { color: var(--wp--preset--color--navy); } .or-ab-lead { max-width: none; margin-top: 46px !important; } .or-ab-hero-card > .or-ab-btns { margin-top: 44px !important; } .or-ab-hero .or-ab-btns .wp-block-button__link { min-width: 129px; } /* How: 590x483.5 photo from the content edge, 840px grey panel 71.5px lower, under it. */ .or-ab-how { padding: 58.5px 24px 0 max(24px, calc((100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right) - 980px) / 2)); } .or-ab-how-cols.wp-block-columns { gap: 0 !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-ab-how-media { position: relative; z-index: 1; flex: 0 0 590px !important; } .or-ab-how-img img { aspect-ratio: auto; height: 483.5px; border-radius: 0; } .or-ab-how-panel { flex: 0 0 840px !important; margin: 71.5px 0 0 -100px !important; padding: 62px 40px 68px 200px; } .or-ab-how-panel > * { max-width: 428px; } .or-ab-how-h { font-size: 30px; line-height: 36px; } .or-ab-how-h + p { margin-top: 14.5px !important; } .or-ab-how-panel > p + .or-ab-how-h { margin-top: 51px !important; } .or-ab-how-panel > p + .or-ab-how-h + p + .or-ab-how-h { margin-top: 59px !important; } /* Approach: centred copy, six steps 188px apart. */ .or-ab-approach { padding: 132px 24px 75px !important; text-align: center; } .or-ab-approach > p { max-width: 540px; margin-inline: auto !important; } .or-ab-approach-title { line-height: 48px; color: var(--wp--preset--color--black); } .or-ab-approach-lead { margin-top: 39px !important; } .or-ab-approach-fluff { margin-top: 53.5px !important; } .or-ab-approach > .or-ab-btns { margin-top: 44.5px !important; } .or-ab-approach .or-ab-btns .wp-block-button__link { min-width: 118px; } .or-ab-steps { grid-template-columns: repeat(6, 188px); justify-content: center; margin: 64px auto 0 !important; } .or-ab-step-n { font-size: 20.8px !important; line-height: 25px !important; } .or-ab-step-label { max-width: none; margin-top: 8px !important; font-size: 15.6px !important; line-height: 20px !important; white-space: nowrap; } :is(.or-ab-step-3, .or-ab-step-5) .or-ab-step-label { max-width: none; } .or-ab-step-label::after { margin-top: 8px; } .or-ab-step-icon { width: 134px; height: 134px; } .or-ab-step-icon img { width: 134px !important; clip-path: inset(calc(100% - 134px) 0 0 0); } .or-ab-step-icon-wide img { width: calc(134px * 376 / 264) !important; } .or-ab-approach > .or-ab-approach-after { max-width: 870px; margin-top: 61px !important; } .or-ab-approach > .or-ab-approach-after:first-of-type { max-width: 822px; } .or-ab-approach > .or-ab-approach-after + .or-ab-approach-after { margin-top: 69px !important; } /* Strategy band: full width, 387px, rounded; heading from x518, copy from x896. */ .or-ab-strat { padding: 63.5px 24px 59.5px !important; border-radius: 35px; } .or-ab-strat-cols.wp-block-columns { max-width: 902px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; position: relative; left: 8px; } .or-ab-strat-head { flex: 0 0 378px !important; } .or-ab-strat-title { max-width: 260px; text-align: left; } .or-ab-strat-copy { flex: 0 0 524px !important; } .or-ab-strat-q { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px !important; line-height: 28px !important; } .or-ab-strat-copy.wp-block-column > p + p { margin-top: 13.5px !important; font-size: 16px !important; line-height: 29px !important; } .or-ab-strat-rule { display: block; width: 65px; margin: 15px 0 0 !important; border: 0; border-top: 1.5px solid rgba(255, 255, 255, 0.6); opacity: 1; } .or-ab-strat-copy > .or-ab-strat-rule { margin-top: 15px !important; } .or-ab-strat-copy > .or-ab-btns { margin-top: 19px !important; justify-content: flex-start; } .or-ab-strat .or-ab-btns .wp-block-button__link { min-width: 154.5px; padding-block: 8px; } .or-ab-speak { padding: 140.5px 24px 100px !important; } .or-ab-speak-title { color: var(--wp--preset--color--navy); } .or-ab-speak > .or-ab-h + * { margin-top: 42px !important; max-width: 855px; margin-inline: auto !important; } } /* Below the 1920 frame (no frame for these widths): the grey panel gives way instead of running off the right edge, and the six steps fall to two rows of three when a single row won't fit. */ @media (min-width: 782px) and (max-width: 1919px) { .or-ab-how-cols > .or-ab-how-media { flex: 0 1 590px !important; min-width: 0; } .or-ab-how-img img { height: auto; aspect-ratio: 590 / 483.5; } .or-ab-how-cols > .or-ab-how-panel { flex: 0 1 840px !important; min-width: 0; padding-left: calc(100px + clamp(24px, 5.2vw, 100px)); padding-right: 24px; } } @media (min-width: 782px) and (max-width: 1199px) { .or-ab-steps { grid-template-columns: repeat(3, 188px); row-gap: 48px; } } @media (min-width: 782px) and (max-width: 1023px) { .or-ab-strat-head { flex: 0 1 300px !important; min-width: 0; } .or-ab-strat-copy { flex: 0 1 524px !important; min-width: 0; } .or-ab-strat-cols.wp-block-columns { left: 0; } } /* ===== page 13: INDUSTRIES | SaaS =========================================== * Same family as page 11 (Accounting & Tax Firms), measured off its own frames: desktop 3840px (a * 1920 CSS canvas at 2x), mobile 558px at 1.74375x (a 320 CSS canvas). Mobile-first: plain rules * are the 320 frame, the min-width block is the 1920 one. Numbers and sources: saas-design.md. */ :is(.or-sa-hero, .or-sa-intro, .or-sa-tiles-wrap, .or-sa-band, .or-sa-wwd, .or-sa-why, .or-sa-steps, .or-sa-results, .or-sa-ready, .or-sa-need, .or-sa-team, .or-sa-cost, .or-sa-reasons, .or-sa-go, .or-sa-speak, .or-sa-faq) { margin-block: 0 !important; } :is(.or-sa-hero, .or-sa-intro, .or-sa-tiles-wrap, .or-sa-band, .or-sa-wwd, .or-sa-why, .or-sa-steps, .or-sa-results, .or-sa-ready, .or-sa-need, .or-sa-team, .or-sa-cost, .or-sa-reasons, .or-sa-go, .or-sa-faq) :is(p, li) { font-size: 15px; line-height: 22px; } :is(.or-sa-hero, .or-sa-intro, .or-sa-tiles-wrap, .or-sa-band, .or-sa-wwd, .or-sa-why, .or-sa-steps, .or-sa-results, .or-sa-ready, .or-sa-need, .or-sa-team, .or-sa-cost, .or-sa-reasons, .or-sa-go, .or-sa-speak, .or-sa-faq) :is(h1, h2, h3, p, ul, figure, hr, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-sa-tiles-wrap, .or-sa-wwd, .or-sa-why, .or-sa-steps, .or-sa-ready, .or-sa-need, .or-sa-team, .or-sa-cost, .or-sa-reasons, .or-sa-go, .or-sa-faq) .wp-block-column { box-sizing: border-box; } .or-sa-h, .or-sa-title { font-size: 25px; line-height: 30px; } .or-sa-btns .wp-block-button__link { padding: 4.5px 21px; box-sizing: border-box; font-size: 16px; } :where(.or-sa-hero, .or-sa-tiles-wrap, .or-sa-why, .or-sa-ready, .or-sa-team, .or-sa-faq) figure img { display: block; width: 100%; height: auto; } /* --- hero ------------------------------------------------------------------- */ .or-sa-hero { padding: 0; } .or-sa-hero-img img { aspect-ratio: 1; object-fit: cover; border-radius: 0 0 35px 35px; } .or-sa-hero-card { margin-top: 0 !important; padding: 29.7px 30px 0; text-align: center; } .or-sa-title { color: var(--wp--preset--color--black); } .or-sa-hero-card > .or-sa-btns { margin-top: 24.7px; } .or-sa-intro { padding: 26.1px 30px 0 !important; } /* --- three tiles -------------------------------------------------------------- */ .or-sa-tiles-wrap { padding: 23.6px 0 0; } .or-sa-tiles.wp-block-columns { margin: 0; gap: 24.4px !important; } .or-sa-tile { box-sizing: border-box; border-radius: 35px; overflow: hidden; } /* Phones: the two text tiles are 320px squares with their copy in the middle. */ @media (max-width: 781px) { :is(.or-sa-tile-magenta, .or-sa-tile-sky) { display: flex; flex-direction: column; justify-content: center; min-height: 320px; } .or-sa-wwd-title br { display: none; } .or-sa-wwd > .or-sa-wwd-title { max-width: 250px; margin-inline: auto !important; } .or-sa-slides { padding-inline: 28px !important; } /* The phone frame runs the three result lines together as one paragraph. */ .or-sa-slide-facts br { display: none; } .or-sa-slides .or-sa-slides-nav { margin-top: -97px; } .or-sa-slides .or-sa-slides-prev { left: -9px; } .or-sa-slides .or-sa-slides-next { right: -7px; } .or-sa-slides .or-sa-slides-dots { gap: 16px; margin-top: 40px; } .or-sa-slides .or-sa-slides-dots button[aria-current="true"] { width: 9px; height: 9px; margin-top: -1.5px; } .or-sa-slides .or-sa-slides-nav::before { width: 13px; height: 13px; border-width: 0 0 3px 3px; } /* The phone frame keeps the service lists collapsed too: three lines and a bold toggle. */ .or-sa-more.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } #or-at-more-4.or-sa-more.is-clamped { -webkit-line-clamp: 2; } .or-sa-team-copy .or-at-more-toggle { display: block; margin: 0 !important; padding: 0; border: 0; background: none; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 15px; line-height: 22px; color: var(--wp--preset--color--navy); cursor: pointer; } } .or-sa-tile > * { margin-block: 0 !important; } .or-sa-tile-magenta { padding: 29.9px 30px 30.4px; background: var(--wp--preset--color--magenta); } .or-sa-tile-quote { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-sa-tile-sky { padding: 56px 30px 30.8px; background: var(--wp--preset--color--sky); } .or-sa-tile-h { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-sa-tile-list { margin-top: 20px !important; padding-left: 24.1px; } .or-sa-tile-photo img { aspect-ratio: 320 / 269; object-fit: cover; } .or-sa-band { padding: 51.3px 30px 48.4px !important; margin-top: 44.2px !important; } .or-sa-band > .or-sa-btns { margin-top: 30px !important; } /* --- what we do -------------------------------------------------------------- */ .or-sa-wwd { padding: 47.8px 14.5px 44px !important; text-align: center; } .or-sa-wwd > .or-sa-eyebrow { font-size: 18px; line-height: 20px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-sa-wwd-title { margin-top: 29px !important; color: var(--wp--preset--color--black); } .or-sa-wwd-cards.wp-block-columns { margin-top: 24.1px !important; gap: 24.4px !important; text-align: left; } .or-sa-wwd-card { box-sizing: border-box; border: 1px solid var(--wp--preset--color--black); border-radius: 35px; padding: 25px 25px 30px 30px; } .or-sa-wwd-card > * { margin-block: 0 !important; } .or-sa-wwd-icon img { width: 36.5px !important; } .or-sa-wwd-h { margin-top: 27.6px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: #001621; } .or-sa-wwd-card p { color: var(--wp--preset--color--black); } .or-sa-wwd-h + p { margin-top: 22.6px !important; } /* --- why choose ---------------------------------------------------------------- */ .or-sa-why { padding: 0; } .or-sa-why-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-sa-why-intro { padding: 52px 30px 48.3px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-sa-why-intro > * { margin-block: 0 !important; } .or-sa-why-title { max-width: 150px; margin-inline: auto !important; text-align: center; color: var(--wp--preset--color--magenta); } .or-sa-why-intro > p { font-size: 18px !important; line-height: 26.6px !important; letter-spacing: 0.05em; } .or-sa-why-intro > .or-sa-h + p { margin-top: 18px !important; } .or-sa-why-intro > p + p { margin-top: 24.6px !important; } .or-sa-why-panel { padding: 49.2px 30px 25.6px; background: var(--wp--preset--color--sky); border-radius: 35px; } .or-sa-why-cards.wp-block-columns { margin: 0; gap: 31px !important; } .or-sa-why-card > * { margin-block: 0 !important; } .or-sa-why-img img { aspect-ratio: 260 / 266; object-fit: cover; border-radius: 35px; } .or-sa-why-h { margin-top: 20px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--black); } .or-sa-why-h + p { margin-top: 22px !important; } /* Colours read off the frames; several differ between the phone and desktop frames. */ :is(.or-sa-why-card, .or-sa-step) p { color: var(--wp--preset--color--black); } /* --- four steps ---------------------------------------------------------------- */ .or-sa-steps { padding: 92.5px 0 44px !important; } .or-sa-steps-cols.wp-block-columns { margin: 0; gap: 24.6px !important; } .or-sa-steps-head { padding: 0 30px; } .or-sa-steps-title { color: var(--wp--preset--color--black); } .or-sa-steps-grid { display: grid; gap: 24.4px; } .or-sa-steps-grid > .or-sa-step { margin: 0 !important; } /* Phones: icon and title side by side (title from x105), copy below. */ .or-sa-step { display: grid; grid-template-columns: 75px 1fr; align-items: center; box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky); padding: 30px 30px 29px; } .or-sa-step > * { margin-block: 0 !important; } .or-sa-step-icon img { height: auto; } .or-sa-step-assess .or-sa-step-icon img { width: 46px !important; } .or-sa-step-strategize .or-sa-step-icon img { width: 51px !important; } .or-sa-step-execute .or-sa-step-icon img { width: 53px !important; } .or-sa-step-optimize .or-sa-step-icon img { width: 29px !important; } .or-sa-step-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: 0.05em; color: var(--wp--preset--color--magenta); } .or-sa-step-h + p { grid-column: 1 / -1; margin-top: 16.5px !important; } /* --- results slideshow (navy) ------------------------------------------------------------ */ .or-sa-results { padding: 45px 30px 40px !important; text-align: center; } .or-sa-results-title { max-width: 220px; margin-inline: auto !important; } .or-sa-results > * { margin-block: 0 !important; } .or-sa-results-title { color: var(--wp--preset--color--white); } .or-sa-slides { position: relative; margin-top: 43px !important; } .or-sa-slide > * { margin-block: 0 !important; } .or-sa-slide + .or-sa-slide { margin-top: 40px !important; } .or-sa-slide-h { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-sa-slide-facts { margin-top: 37px !important; } .or-sa-slide-rule { width: 30px; margin: 13px auto 0 !important; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.6); opacity: 1; } .or-sa-slide-quote { margin-top: 20px !important; } .or-sa-slide-who { margin-top: 17px !important; } /* With script (onerawr.js adds .is-slideshow): one slide at a time, arrows at the sides, dots below. */ .or-sa-slides.is-slideshow > .or-sa-slide { display: none; margin-top: 0 !important; margin-bottom: 0 !important; } .or-sa-slides.is-slideshow > .or-sa-slide.is-active { display: block; } .or-sa-slides-nav { position: absolute; top: 50%; width: 30px; height: 44px; margin-top: -22px; padding: 0; border: 0; background: none; color: var(--wp--preset--color--white); cursor: pointer; } .or-sa-slides-nav::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: translate(-30%, -50%) rotate(45deg); } .or-sa-slides-next::before { transform: translate(-70%, -50%) rotate(-135deg); } .or-sa-slides-prev { left: -30px; } .or-sa-slides-next { right: -30px; } .or-sa-slides-nav:hover { color: var(--wp--preset--color--magenta); } .or-sa-slides-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 37px; } .or-sa-slides-dots button { width: 6px; height: 6px; padding: 0; border: 1px solid var(--wp--preset--color--white); border-radius: 50%; background: var(--wp--preset--color--white); cursor: pointer; } .or-sa-slides-dots button[aria-current="true"] { width: 8px; height: 8px; margin-top: -1px; background: transparent; } /* --- ready for marketing ------------------------------------------------------------------ */ .or-sa-ready { padding: 0; } .or-sa-ready-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-sa-ready-copy { padding: 50.4px 30px 21px; } .or-sa-ready-copy > * { margin-block: 0 !important; } .or-sa-ready-title { color: var(--wp--preset--color--black); } .or-sa-ready-sub { margin-top: 25px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-sa-ready-sub + p { margin-top: 25.9px !important; } .or-sa-ready-copy > .or-sa-btns { margin-top: 24px !important; } .or-sa-ready-img img { aspect-ratio: 1; object-fit: cover; border-radius: 35px; } /* --- why SaaS companies need fractional teams --------------------------------------------- */ .or-sa-need { padding: 47.6px 0 39.5px !important; } .or-sa-need > * { margin-block: 0 !important; } .or-sa-need-title, .or-sa-need-lead { padding: 0 30px; } .or-sa-need-title { color: var(--wp--preset--color--black); } .or-sa-need-lead { margin-top: 25px !important; } .or-sa-need-cards.wp-block-columns { margin: 25.2px 0 0 !important; gap: 24.7px !important; } .or-sa-need-cards + .or-sa-need-cards.wp-block-columns { margin-top: 24.7px !important; } .or-sa-need-card { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky); padding: 30px 30px 29px; } .or-sa-need-card > * { margin-block: 0 !important; } .or-sa-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 600; font-size: 15px; line-height: 22.4px; color: var(--wp--preset--color--navy); } .or-sa-need-h + p { margin-top: 18.8px !important; } .or-sa-team-copy > .or-sa-team-sub { margin-top: 40px !important; } .or-sa-team-sub { margin-top: 25px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } /* --- get started (magenta) ------------------------------------------------------------------ */ .or-sa-go { padding: 50.8px 30px 52.2px !important; text-align: center; } .or-sa-go-copy { text-align: left; } .or-sa-go-title { max-width: 240px; margin-inline: auto !important; } .or-sa-go-cols.wp-block-columns { margin: 0; gap: 31.3px !important; } .or-sa-go-cols .wp-block-column > * { margin-block: 0 !important; } .or-sa-go-copy > .or-sa-btns { margin-top: 25px !important; } .or-sa-btn-navy .wp-block-button__link { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-sa-btn-navy .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); } /* --- services: collapsible lists ---------------------------------------------------------------------- */ .or-sa-team { padding: 1.7px 0 0; } .or-sa-team-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-sa-team-media { display: none; } .or-sa-team-copy { padding: 0 32px 0 30px; } .or-sa-team-copy > * { margin-block: 0 !important; } .or-sa-team-title { color: var(--wp--preset--color--black); } .or-sa-team-copy > .or-sa-team-sub + .or-sa-more { margin-top: 43.3px !important; } .or-sa-team-copy > .or-at-more-toggle + .or-sa-more, .or-sa-team-copy > .or-sa-more + .or-sa-more { margin-top: 22px !important; } .or-sa-team-copy > .or-sa-btns { margin-top: 38.3px !important; } /* --- cost comparison ------------------------------------------------------------------------ */ .or-sa-cost { padding: 48px 0 0 !important; } .or-sa-cost-title { padding: 0 30px; color: var(--wp--preset--color--navy); } .or-sa-cost-panel { margin-top: 25px !important; border-radius: 35px; background: #dcf2ff; padding: 31.2px 30px 30px; } .or-sa-cost-cols.wp-block-columns { margin: 0; gap: 25px !important; } .or-sa-cost-col > * { margin-block: 0 !important; } .or-sa-cost-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 26px; color: var(--wp--preset--color--navy); } .or-sa-cost-label { font-size: 18px !important; line-height: 26.5px !important; letter-spacing: 0.05em; } .or-sa-cost-list { margin-top: 13px !important; padding-left: 24.1px; } /* --- why choose One Rawr for SaaS ------------------------------------------------------------ */ .or-sa-reasons { margin-top: 49.3px !important; padding: 50px 0 50.3px !important; text-align: center; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-sa-reasons > * { margin-block: 0 !important; } .or-sa-reasons > .or-sa-reasons-sub { margin-top: 26.4px !important; padding: 0 30px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-sa-reasons-title { max-width: 240px; margin-inline: auto !important; color: var(--wp--preset--color--white); } .or-sa-reasons-row.wp-block-columns { margin-top: 32px !important; gap: 29px !important; } .or-sa-reasons-row + .or-sa-reasons-row.wp-block-columns { margin-top: 29px !important; } .or-sa-reason { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); padding: 39px 30px 30px; } .or-sa-reason > * { margin-block: 0 !important; } .or-sa-reason-num { width: 85px; height: 85px; margin: 0 auto !important; border-radius: 50%; background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--white); font-size: 37px !important; line-height: 85px !important; } .or-sa-reason-h { margin-top: 10px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; } .or-sa-reason-h + p { margin-top: 27.5px !important; } /* --- speak / FAQ -------------------------------------------------------------------------------- */ .or-sa-speak { padding: 39.3px 4px 0 !important; } .or-sa-speak-title { text-align: center; color: var(--wp--preset--color--black); } .or-sa-speak > .or-sa-h + * { margin-top: 30px !important; } .or-sa-speak .meetings-iframe-container iframe { display: block; width: 100%; } .or-sa-faq { padding: 0 30px 100px !important; } .or-sa-faq-media { display: none; } .or-sa-faq .or-sa-faq-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-sa-faq .or-sa-faq-list > .or-sa-h { font-size: 27px; line-height: 1.05; margin: 2.3px 0 0; padding-left: 17px; color: var(--wp--preset--color--navy); } .or-sa-faq .or-sa-faq-list > .or-sa-h + .wp-block-details { margin-top: 20px; } .or-sa-faq .wp-block-details { margin-block: 0; } .or-sa-faq.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-sa-faq.or-faq .wp-block-details > :not(summary) { padding: 0 20px 10.5px 20px; } .or-sa-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-sa-faq.or-faq .wp-block-details > summary + * { padding-top: 8.3px; } .or-sa-faq.or-faq .wp-block-details :is(p, li) { font-size: 16px; line-height: 24px; } .or-sa-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 0; padding-left: 20px; list-style: none; } .or-sa-faq.or-faq .wp-block-details > ul.wp-block-list > li::before { content: "\2022"; } /* ----------------------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-sa-h, .or-sa-title { font-size: 40px; line-height: 48px; } .or-sa-btns .wp-block-button__link { padding: 10.5px 26px; } .or-main .or-sa-btns > .wp-block-button, .or-main .or-sa-btns > .wp-block-button .wp-block-button__link { width: auto; } /* Hero: 433px photo, 980px white card lifted 194px over it; copy centred. */ /* Like the live page: the square stock image cropped to the band from its centre, so narrower screens still show the whole composition; all four corners rounded. */ .or-sa-hero-img img { height: 433px; object-fit: cover; object-position: 50% 50%; border-radius: 35px; } .or-sa-hero-card { position: relative; box-sizing: border-box; width: min(980px, calc(100% - 48px)); margin: -194px auto 0 !important; border-radius: 35px 35px 0 0; background: var(--wp--preset--color--white); padding: 57.5px 24px 0; } .or-sa-title { max-width: 780px; margin-inline: auto !important; color: var(--wp--preset--color--navy); } .or-sa-hero-card > .or-sa-btns { margin-top: 69.5px; justify-content: center; } .or-sa-hero .or-sa-btns .wp-block-button__link { min-width: 217px; padding-block: 12px; } .or-sa-intro { padding: 74px 24px 0 !important; text-align: center; } .or-sa-intro > p { max-width: 560px; margin-inline: auto !important; } /* Tiles: magenta 519, sky and photo 501 across x199..1720, 387 tall. */ .or-sa-tiles-wrap { padding: 72px 24px 0; } .or-sa-tiles.wp-block-columns { max-width: 1521px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } .or-sa-tiles.wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 387px; } .or-sa-tiles > .or-sa-tile-magenta { flex-basis: 519px !important; padding: 81px 60px 0 106px; } .or-sa-tiles > .or-sa-tile-sky { flex-basis: 501px !important; margin-left: -1px; padding: 84px 40px 0 105px; } .or-sa-tiles > .or-sa-tile-photo { flex-basis: 501px !important; } .or-sa-tile-quote { max-width: 305px; font-size: 23px; line-height: 30px; letter-spacing: 0; } .or-sa-tile-h { font-size: 23px; line-height: 30px; letter-spacing: 0; color: var(--wp--preset--color--black); } .or-sa-tile-list { margin-top: 22px !important; max-width: 290px; padding-left: 23px; } .or-sa-tile-photo img { height: 387px; aspect-ratio: auto; } .or-sa-band { margin-top: 0 !important; padding: 65px 24px 64px !important; text-align: center; } .or-sa-band > p { max-width: 620px; margin-inline: auto !important; } .or-sa-band > .or-sa-btns { margin-top: 35px !important; justify-content: center; } .or-sa-band .or-sa-btns .wp-block-button__link { min-width: 225.5px; } /* What we do: four 358px cards across x204..1717. */ .or-sa-wwd { padding: 84px 24px 53px !important; text-align: left; } .or-sa-wwd > * { max-width: 1520px; margin-inline: auto !important; } .or-sa-wwd > .or-sa-eyebrow { letter-spacing: 0; color: #001621; } .or-sa-wwd > .or-sa-wwd-title { margin-inline: auto !important; max-width: 1520px; padding-right: 920px; box-sizing: border-box; } .or-sa-wwd-title { margin-top: 42px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 45px; line-height: 52px; color: #001621; } .or-sa-wwd-cards.wp-block-columns { margin-top: 33px !important; gap: 27px !important; flex-wrap: nowrap !important; } .or-sa-wwd-cards > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 340px; } .or-sa-wwd-card { padding: 58px 30px 20px 37px; } .or-sa-wwd-h { margin-top: 30px !important; font-size: 24px; line-height: 22px; letter-spacing: 0; } .or-sa-wwd-h + p { margin-top: 33px !important; } /* Why choose: navy x110..535, sky x535..1810, 664 tall. */ .or-sa-why { padding: 0 110px; } .or-sa-why-cols.wp-block-columns { max-width: 1700px; margin: 0 auto; flex-wrap: nowrap !important; min-height: 664px; } .or-sa-why-cols > .or-sa-why-intro { flex: 0 0 425px !important; padding: 51px 60px 0 90px; border-radius: 35px 0 0 35px; } .or-sa-why-title { max-width: none; margin-left: 0 !important; text-align: left; } .or-sa-why-intro > p { max-width: 240px; font-size: 15px !important; line-height: 22px !important; letter-spacing: 0; } .or-sa-why-intro > .or-sa-h + p { margin-top: 40px !important; } .or-sa-why-intro > p + p { margin-top: 22px !important; } .or-sa-why-cols > .or-sa-why-panel { flex: 1 1 auto !important; border-radius: 0 35px 35px 0; padding: 50px 90px 0; } .or-sa-why-cards.wp-block-columns { gap: 180px !important; flex-wrap: nowrap !important; } .or-sa-why-cards > .wp-block-column { flex: 0 0 245px !important; } .or-sa-why-h { margin-top: 31px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 20px; line-height: 28.5px; letter-spacing: 0; max-width: 240px; } .or-sa-why-h + p { margin-top: 29px !important; } /* Steps: heading left of centre, 260x280 cards at x1027 / x1314, the right column 168px lower. */ .or-sa-steps { padding: 88px 24px 88px !important; } .or-sa-steps-cols.wp-block-columns { max-width: 1227px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-sa-steps-head { flex: 0 0 680px !important; padding: 221px 0 0; } .or-sa-steps-title { max-width: 460px; } .or-sa-steps-body { flex: 0 0 547px !important; } .or-sa-steps-grid { grid-template-columns: 260px 260px; column-gap: 27px; row-gap: 57px; padding-bottom: 168px; } .or-sa-step { display: block; min-height: 280px; padding: 23px 28px 0 20px; } .or-sa-step:nth-child(2n) { transform: translateY(168px); } .or-sa-step-h { margin-top: 20px !important; font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0; } .or-sa-step-icon img { height: auto; } /* The frame places each card's icon, title and copy freely (same cards as the Accounting page). */ .or-sa-step-assess { padding: 23px 40px 0 20px; } .or-sa-step-assess .or-sa-step-h { margin-top: 20px !important; } .or-sa-step-assess .or-sa-step-h + p { margin-top: 7.5px !important; } .or-sa-step-strategize { padding: 25px 34px 0 21.5px; } .or-sa-step-strategize .or-sa-step-h { margin-top: 17px !important; } .or-sa-step-strategize .or-sa-step-h + p { margin-top: 6.5px !important; } .or-sa-step-execute { padding: 38px 42px 0 20px; } .or-sa-step-execute .or-sa-step-h { margin-top: 21px !important; } .or-sa-step-execute .or-sa-step-h + p { margin-top: 19.5px !important; } .or-sa-step-optimize { padding: 20px 60px 0 21.5px; } .or-sa-step-optimize .or-sa-step-h { margin-top: 12px !important; } .or-sa-step-optimize .or-sa-step-h + p { margin-top: 10px !important; } /* Results: full-width navy, rounded; one slide at a time between side arrows. */ .or-sa-results { padding: 107px 24px 74.5px !important; border-radius: 35px; } .or-sa-slides-dots { gap: 11px; } .or-sa-slides-dots button { width: 5px; height: 5px; } .or-sa-slides-dots button[aria-current="true"] { width: 7px; height: 7px; } .or-sa-slides { max-width: 1521px; margin: 46px auto 0 !important; padding-inline: 0 !important; } .or-sa-results-title { max-width: none; } .or-sa-reasons-title { padding: 0; } .or-sa-go-title { max-width: 460px; margin-inline: 0 !important; } .or-sa-slide { max-width: 640px; margin-inline: auto !important; } .or-sa-slide-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; } .or-sa-slide-facts { margin-top: 12px !important; } .or-sa-slide-rule { width: 30px; margin-top: 39.5px !important; } .or-sa-slide-quote { max-width: 445px; margin: 36px auto 0 !important; } .or-sa-slide-who { margin-top: 30px !important; } .or-sa-slides-dots { margin-top: 80px; } .or-sa-slides-prev { left: 0; } .or-sa-slides-next { right: 0; } /* Ready: grey panel x0..830, photo x830..1720, 488 tall. */ .or-sa-ready-cols.wp-block-columns { flex-wrap: nowrap !important; min-height: 488px; } .or-sa-ready-copy { flex: 0 0 830px !important; background: #fafafa; padding: 40px 24px 0 200px; } .or-sa-ready-copy > * { max-width: 470px; } .or-sa-ready-title { color: var(--wp--preset--color--navy); } .or-sa-ready-sub { margin-top: 39px !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; max-width: 440px; } .or-sa-ready-sub + p { margin-top: 40px !important; max-width: 400px; } .or-sa-ready-copy > .or-sa-btns { margin-top: 44px !important; } .or-sa-ready .or-sa-btns .wp-block-button__link { min-width: 222px; } .or-sa-ready-media { flex: 0 0 890px !important; } .or-sa-ready-img img { height: 488px; aspect-ratio: auto; border-radius: 0 35px 35px 35px; } /* Why SaaS needs: centred heading and lead, 568x420 cards across x84..1838. */ .or-sa-need { padding: 58px 24px 0 !important; text-align: center; } .or-sa-need-title { max-width: 540px; margin-inline: auto !important; padding: 0; } .or-sa-mbr { display: none; } .or-sa-need-lead { max-width: 730px; margin: 43px auto 0 !important; padding: 0; } .or-sa-need-cards.wp-block-columns { max-width: 1754px; margin: 58px auto 0 !important; gap: 25px !important; flex-wrap: nowrap !important; text-align: left; } .or-sa-need-cards + .or-sa-need-cards.wp-block-columns { margin-top: 25px !important; } .or-sa-need-cards > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 420px; } /* Copy sits in the vertical middle of each card, as in the frame. */ .or-sa-need-card { display: flex; flex-direction: column; justify-content: center; padding: 0 60px 0 134px; } .or-sa-need-cards:first-of-type > .or-sa-need-card:first-child { padding-left: 126px; } .or-sa-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; max-width: 320px; } .or-sa-need-h + p { margin-top: 32px !important; max-width: 297px; } .or-sa-need-cards:first-of-type > .or-sa-need-card:nth-child(2) p { max-width: 291px; } .or-sa-need-cards:first-of-type > .or-sa-need-card:nth-child(3) p { max-width: 286px; } /* Services: purple image x84..736, grey panel to the right edge, 891 tall. */ .or-sa-team { padding: 33px 0 0 84px; } .or-sa-team-copy > .or-sa-team-sub { margin-top: 30px !important; } .or-sa-team-cols.wp-block-columns { flex-wrap: nowrap !important; gap: 0 !important; background: #fafafa; } .or-sa-team-media { display: block; flex: 0 0 460px !important; } .or-sa-team-img img { height: 891px; object-fit: cover; border-radius: 35px; } .or-sa-team-copy { flex: 1 1 auto !important; padding: 76px 24px 60px 178px; } .or-sa-team-copy .or-at-more-toggle { text-decoration: none; color: var(--wp--preset--color--navy); } .or-sa-team-copy > * { max-width: 520px; } .or-sa-team-title { max-width: 400px; color: var(--wp--preset--color--black); } .or-sa-team-sub { margin-top: 30px !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--wp--preset--color--black); } /* Five lists where the frame shows four: tighter gaps keep the grey panel to the photo height. */ .or-sa-team-copy > .or-sa-team-sub + .or-sa-more { margin-top: 33px !important; } .or-sa-team-copy > .or-at-more-toggle + .or-sa-more { margin-top: 33px !important; } .or-sa-team-copy > .or-sa-btns { margin-top: 60px !important; } /* Cost: centred heading, sky panel x83..1837, 508 tall. */ .or-sa-cost { padding: 53px 24px 0 !important; } .or-sa-cost-title { max-width: 820px; margin: 0 auto !important; padding: 0; text-align: center; } .or-sa-cost-panel { max-width: 1754px !important; min-height: 508px; box-sizing: border-box; margin: 58px auto 0 !important; padding: 85px 24px 0 290px; } .or-sa-cost-cols.wp-block-columns { gap: 0 !important; flex-wrap: nowrap !important; } .or-sa-cost-head { flex: 0 0 476px !important; } .or-sa-cost-h { font-size: 40px; line-height: 48px; } .or-sa-cost-inhouse { flex: 0 0 390px !important; padding-top: 6px; } .or-sa-cost-list { max-width: 310px; } .or-sa-cost-inhouse .or-sa-cost-list { max-width: 262px; } .or-sa-cost-rawr { flex: 0 0 300px !important; padding-top: 6px; } .or-sa-cost-label { max-width: 250px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px !important; line-height: 28px !important; letter-spacing: 0; } .or-sa-cost-list { margin-top: 33px !important; padding-left: 28px; } .or-sa-cost-list li { font-size: 16px !important; line-height: 21px !important; } /* Reasons: heading on white, then the navy band with 320px cards. */ .or-sa-reasons { margin-top: 0 !important; padding: 80px 0 0 !important; background: none; color: var(--wp--preset--color--navy); } .or-sa-reasons-title { max-width: 800px; margin-inline: auto !important; color: var(--wp--preset--color--navy); } .or-sa-reasons > .or-sa-reasons-sub { margin-top: 50px !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--wp--preset--color--navy); } .or-sa-reasons > .or-sa-reasons-band { max-width: none !important; margin-inline: 0 !important; } .or-sa-reasons-band { margin-top: 31px !important; padding: 84px 24px 190px; background: var(--wp--preset--color--navy); } .or-sa-reasons-row.wp-block-columns { max-width: 979px; margin: 0 auto !important; gap: 10px !important; flex-wrap: nowrap !important; } .or-sa-reasons-row + .or-sa-reasons-row.wp-block-columns { margin-top: 118px !important; } .or-sa-reasons-row > .wp-block-column { flex: 1 1 0; min-width: 0; } .or-sa-reason { min-height: 330px; padding: 0 32px 40px; margin-top: 26px; } .or-sa-reason-num { width: 84px; height: 84px; margin: -26px auto 0 !important; font-size: 36px !important; line-height: 84px !important; } .or-sa-reason-h { max-width: 240px; margin: 34px auto 0 !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 17px; line-height: 28px; letter-spacing: 0; } .or-sa-reason-h + p { margin-top: 20px !important; } /* Get started: magenta band, heading x446, copy x1039. */ .or-sa-go { padding: 145px 24px 142px !important; text-align: left; } .or-sa-go-cols.wp-block-columns { max-width: 1030px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } .or-sa-go-head { flex: 0 0 593px !important; } .or-sa-go-title { max-width: 460px; } .or-sa-go-copy { flex: 0 0 437px !important; } .or-sa-go-copy > .or-sa-btns { margin-top: 33px !important; } .or-sa-go .or-sa-btns .wp-block-button__link { min-width: 170px; } .or-sa-speak { padding: 122.5px 24px 0 !important; } .or-sa-speak-title { color: var(--wp--preset--color--navy); } .or-sa-speak > .or-sa-h + * { margin-top: 60px !important; max-width: 855px; margin-inline: auto !important; } .or-sa-faq { padding: 70px 24px 140px !important; } .or-sa-faq .or-sa-faq-cols.wp-block-columns { max-width: 953px; margin: 0 auto; gap: 53px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-sa-faq-media { display: block; flex: 0 0 350px !important; } .or-sa-faq-img-top img { height: 632px; object-fit: cover; border-radius: 30px; } .or-sa-faq-img-bottom { margin-top: 42px !important; } .or-sa-faq-img-bottom img { height: 374px; object-fit: cover; border-radius: 30px; } .or-sa-faq-cols > .or-sa-faq-list.wp-block-column { flex: 1 1 550px !important; min-width: 0; } .or-sa-faq .or-sa-faq-list > .or-sa-h { font-size: 40px; line-height: 48px; margin-top: -5px; padding-left: 0; } .or-sa-faq .or-sa-faq-list > .or-sa-h + .wp-block-details { margin-top: 15px; } .or-sa-faq.or-faq summary { display: flex; align-items: center; min-height: 93px; padding: 18px 66.5px 18px 10px; font-size: 20px; line-height: 28.5px; } .or-sa-faq.or-faq details[open] > summary { padding-top: 24.7px; padding-bottom: 33.5px; } .or-sa-faq.or-faq summary::after { top: 50%; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } .or-sa-faq.or-faq .wp-block-details > :not(summary) { padding: 0 40px 20px 10px; } .or-sa-faq.or-faq .wp-block-details > summary + * { padding-top: 0; } .or-sa-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-sa-faq.or-faq details[open] > :last-child { padding-bottom: 34.7px; } .or-sa-faq.or-faq .wp-block-details :is(p, li) { font-size: 15px; line-height: 22px; } .or-sa-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 22px; padding-left: 35.5px; list-style: disc; } .or-sa-faq.or-faq .wp-block-details > ul.wp-block-list > li::before { content: none; } } /* Between the phone layout and the 1920 frame: the same desktop design, with the fixed frame widths allowed to shrink and the widest rows stacked, so nothing runs off the screen. */ @media (min-width: 782px) and (max-width: 1919px) { .or-sa-wwd > .or-sa-wwd-title { padding-right: max(0px, calc(100% - 600px)); } .or-sa-why { padding: 0 24px; } .or-sa-why-cols > .or-sa-why-intro { flex: 0 1 425px !important; min-width: 0; padding-left: clamp(40px, 4.7vw, 90px); } .or-sa-why-cols > .or-sa-why-panel { min-width: 0; padding: 50px clamp(30px, 4.7vw, 90px) 40px; } .or-sa-why-cards.wp-block-columns { gap: clamp(30px, 9.4vw - 100px, 180px) !important; } .or-sa-why-cards > .wp-block-column { flex: 0 1 245px !important; min-width: 0; } .or-sa-ready-cols.wp-block-columns { height: auto; min-height: 488px; } .or-sa-ready-copy { flex: 1 1 830px !important; min-width: 0; padding: 40px 40px 40px clamp(40px, 10.4vw, 200px); } .or-sa-ready-media { flex: 1 1 890px !important; min-width: 0; } .or-sa-ready-media { position: relative; } .or-sa-ready-media > .or-sa-ready-img { position: absolute; inset: 0; margin: 0 !important; } .or-sa-ready-img img { width: 100%; height: 100%; object-fit: cover; } .or-sa-team { padding-left: clamp(24px, 4.4vw, 84px); } .or-sa-team-media { flex: 0 1 460px !important; min-width: 0; } .or-sa-team-copy { min-width: 0; padding-left: clamp(40px, 9.3vw, 178px); } .or-sa-cost-panel { height: auto; min-height: 508px; padding: 85px 40px 60px clamp(40px, 15.1vw, 290px); } .or-sa-cost-head { flex: 0 1 476px !important; min-width: 0; padding-right: 24px; } .or-sa-cost-inhouse { flex: 0 1 390px !important; min-width: 0; padding-right: 24px; } .or-sa-cost-rawr { flex: 0 1 300px !important; min-width: 0; } .or-sa-need-card { padding: 40px clamp(30px, 3.1vw, 60px) 40px clamp(30px, 7vw, 134px); } .or-sa-need-cards:first-of-type > .or-sa-need-card:first-child { padding-left: clamp(30px, 6.6vw, 126px); } .or-sa-tiles > .or-sa-tile-magenta { padding-left: clamp(40px, 5.5vw, 106px); padding-right: 40px; } .or-sa-wwd-cards > .wp-block-column { height: auto !important; min-height: 340px; } } @media (min-width: 782px) and (max-width: 1279px) { .or-sa-steps-cols.wp-block-columns { flex-wrap: wrap !important; justify-content: center; } .or-sa-steps-head { flex: 0 0 100% !important; padding: 0; text-align: center; } .or-sa-steps-title { margin-inline: auto !important; } .or-sa-steps-body { flex: 0 0 547px !important; margin-top: 48px !important; } } @media (min-width: 782px) and (max-width: 1199px) { .or-sa-why-cols.wp-block-columns { flex-wrap: wrap !important; } .or-sa-why-cols > .or-sa-why-intro { flex: 0 0 100% !important; padding: 51px 40px 40px; border-radius: 35px 35px 0 0; } .or-sa-why-intro > p { max-width: 640px; } .or-sa-why-cols > .or-sa-why-panel { flex: 0 0 100% !important; padding: 40px; border-radius: 0 0 35px 35px; } .or-sa-why-cards.wp-block-columns { justify-content: space-between; gap: 30px !important; } .or-sa-cost-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; } .or-sa-cost-head { flex: 0 0 100% !important; } .or-sa-cost-inhouse, .or-sa-cost-rawr { flex: 1 1 0 !important; } .or-sa-cost-panel { padding-left: 60px; } .or-sa-go-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; max-width: 640px; } .or-sa-go-head, .or-sa-go-copy { flex: 0 0 100% !important; } .or-sa-need-cards > .wp-block-column { height: auto; min-height: 360px; } .or-sa-need-cards:first-of-type > .or-sa-need-card:first-child, .or-sa-need-card { padding: 40px 30px; } } @media (min-width: 782px) and (max-width: 1023px) { .or-sa-ready-cols.wp-block-columns { flex-wrap: wrap !important; } .or-sa-ready-copy, .or-sa-ready-media { flex: 0 0 100% !important; } .or-sa-ready-copy { padding: 48px 40px; } .or-sa-ready-media { height: 420px; } .or-sa-ready-img img { border-radius: 0 0 35px 35px; } .or-sa-team-media { display: none; } .or-sa-team { padding-left: 0; } .or-sa-team-copy { padding: 60px 40px; } .or-sa-team-copy > * { max-width: 640px; } .or-sa-wwd-cards.wp-block-columns { flex-wrap: wrap !important; row-gap: 27px !important; } .or-sa-wwd-cards > .wp-block-column { flex: 0 0 calc(50% - 13.5px) !important; min-height: 280px; } } @media (min-width: 782px) and (max-width: 959px) { .or-sa-need-cards.wp-block-columns { flex-wrap: wrap !important; justify-content: center; row-gap: 25px !important; } .or-sa-need-cards > .wp-block-column { flex: 0 0 calc(50% - 12.5px) !important; min-height: 300px; } } /* ===== page 14: INDUSTRIES | Healthcare ====================================== * Same family as page 13 (SaaS), measured off its own frames: desktop 3840px (a 1920 CSS canvas at * 2x), mobile 520px at 1.625x (a 320 CSS canvas). Mobile-first: plain rules are the 320 frame, the * min-width block is the 1920 one. Numbers and sources: healthcare-design.md. */ :is(.or-hc-hero, .or-hc-intro, .or-hc-tiles-wrap, .or-hc-band, .or-hc-wwd, .or-hc-why, .or-hc-steps, .or-hc-ready, .or-hc-need, .or-hc-team, .or-hc-cost, .or-hc-reasons, .or-hc-go, .or-hc-expert, .or-hc-unlock, .or-hc-speak, .or-hc-faq) { margin-block: 0 !important; } :is(.or-hc-hero, .or-hc-intro, .or-hc-tiles-wrap, .or-hc-band, .or-hc-wwd, .or-hc-why, .or-hc-steps, .or-hc-ready, .or-hc-need, .or-hc-team, .or-hc-cost, .or-hc-reasons, .or-hc-go, .or-hc-expert, .or-hc-unlock, .or-hc-faq) :is(p, li) { font-size: 15px; line-height: 22px; } :is(.or-hc-hero, .or-hc-intro, .or-hc-tiles-wrap, .or-hc-band, .or-hc-wwd, .or-hc-why, .or-hc-steps, .or-hc-ready, .or-hc-need, .or-hc-team, .or-hc-cost, .or-hc-reasons, .or-hc-go, .or-hc-expert, .or-hc-unlock, .or-hc-speak, .or-hc-faq) :is(h1, h2, h3, p, ul, figure, hr, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-hc-tiles-wrap, .or-hc-wwd, .or-hc-why, .or-hc-steps, .or-hc-ready, .or-hc-need, .or-hc-team, .or-hc-cost, .or-hc-reasons, .or-hc-go, .or-hc-expert, .or-hc-unlock, .or-hc-faq) .wp-block-column { box-sizing: border-box; } .or-hc-h, .or-hc-title { font-size: 25px; line-height: 30px; } .or-hc-btns .wp-block-button__link { padding: 4.5px 21px; box-sizing: border-box; font-size: 16px; } :where(.or-hc-hero, .or-hc-tiles-wrap, .or-hc-why, .or-hc-ready, .or-hc-team, .or-hc-faq) figure img { display: block; width: 100%; height: auto; } /* --- hero ------------------------------------------------------------------- */ .or-hc-hero { padding: 0; } .or-hc-hero-img img { aspect-ratio: 1; object-fit: cover; border-radius: 35px; } .or-hc-hero-card { margin-top: 0 !important; padding: 24.1px 30px 0; text-align: center; } .or-hc-title { color: var(--wp--preset--color--black); } .or-hc-hero-card > .or-hc-btns { margin-top: 24.7px; } .or-hc-intro { padding: 27.8px 30px 0 !important; } /* --- three tiles -------------------------------------------------------------- */ .or-hc-tiles-wrap { padding: 25.2px 0 0; } .or-hc-tiles.wp-block-columns { margin: 0; gap: 30.8px !important; } .or-hc-tile { box-sizing: border-box; border-radius: 35px; overflow: hidden; } /* Phones: the two text tiles are 320px squares with their copy in the middle. */ @media (max-width: 781px) { .or-hc-wwd > .or-hc-wwd-title { max-width: 260px; margin-inline: auto !important; } /* The phone frame runs the three result lines together as one paragraph. */ /* The phone frame keeps the service lists collapsed too: three lines and a bold toggle. */ .or-hc-more.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* The frame shows each list's title and subtitle; the first title takes two lines. */ #or-at-more-1.or-hc-more.is-clamped { -webkit-line-clamp: 4; } .or-hc-team-copy .or-at-more-toggle { display: block; margin: 0 !important; padding: 0; border: 0; background: none; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 15px; line-height: 22px; color: var(--wp--preset--color--navy); cursor: pointer; } } .or-hc-tile > * { margin-block: 0 !important; } .or-hc-tile-magenta { padding: 26.4px 30px 27.4px; background: var(--wp--preset--color--magenta); } .or-hc-tile-quote { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-hc-tile-sky { padding: 27px 30px 27px; background: var(--wp--preset--color--sky-deep); } .or-hc-tile-title { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 25.9px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-hc-tile-h { margin-top: 21.3px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 15px; line-height: 22px; color: var(--wp--preset--color--navy); } .or-hc-tile-list { margin-top: 0 !important; padding-left: 45px; padding-right: 4px; } .or-hc-tile-photo img { aspect-ratio: 320 / 263; object-fit: cover; } .or-hc-band { padding: 50.3px 30px 49.8px !important; margin-top: 48px !important; } .or-hc-band > .or-hc-btns { margin-top: 28.8px !important; } /* --- what we do -------------------------------------------------------------- */ .or-hc-wwd { padding: 47.8px 14.5px 44px !important; text-align: center; } .or-hc-wwd > .or-hc-eyebrow { font-size: 18px; line-height: 20px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-hc-wwd-title { margin-top: 29px !important; color: var(--wp--preset--color--black); } .or-hc-wwd-cards.wp-block-columns { margin-top: 24.1px !important; gap: 24.4px !important; text-align: left; } .or-hc-wwd-card { box-sizing: border-box; border: 1px solid var(--wp--preset--color--black); border-radius: 35px; padding: 25px 25px 30px 30px; } .or-hc-wwd-card > * { margin-block: 0 !important; } .or-hc-wwd-icon img { width: 36.5px !important; } .or-hc-wwd-h { margin-top: 27.6px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: #001621; } .or-hc-wwd-card p { color: var(--wp--preset--color--black); } .or-hc-wwd-h + p { margin-top: 22.6px !important; } /* --- why choose ---------------------------------------------------------------- */ .or-hc-why { padding: 0; } .or-hc-why-cols.wp-block-columns { margin: 0; gap: 3px !important; } .or-hc-why-intro { padding: 49.4px 30px 49.3px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-hc-why-intro > * { margin-block: 0 !important; } .or-hc-why-title { max-width: 150px; margin-inline: auto !important; text-align: center; color: var(--wp--preset--color--magenta); } .or-hc-why-intro > p { font-size: 18px !important; line-height: 26.6px !important; letter-spacing: 0.05em; } .or-hc-why-intro > .or-hc-h + p { margin-top: 18.8px !important; } .or-hc-why-intro > p + p { margin-top: 26.8px !important; } .or-hc-why-panel { padding: 46.8px 30px 46.1px; background: var(--wp--preset--color--sky-deep); border-radius: 35px; } .or-hc-why-cards.wp-block-columns { margin: 0; gap: 38.9px !important; } .or-hc-why-card > * { margin-block: 0 !important; } .or-hc-why-img img { aspect-ratio: 1; object-fit: cover; border-radius: 35px; } .or-hc-why-h { margin-top: 20px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--black); } .or-hc-why-h + p { margin-top: 20.9px !important; } /* Colours read off the frames; several differ between the phone and desktop frames. */ :is(.or-hc-why-card, .or-hc-step) p { color: var(--wp--preset--color--black); } /* --- four steps ---------------------------------------------------------------- */ .or-hc-steps { padding: 67px 0 38.8px !important; } .or-hc-steps-cols.wp-block-columns { margin: 0; gap: 24.6px !important; } .or-hc-steps-head { padding: 0 30px; } .or-hc-steps-title { color: var(--wp--preset--color--black); } .or-hc-steps-grid { display: grid; gap: 24.4px; } .or-hc-steps-grid > .or-hc-step { margin: 0 !important; } /* Phones: icon and title side by side (title from x105), copy below. */ .or-hc-step { display: grid; grid-template-columns: 75px 1fr; align-items: center; box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky-deep); padding: 30px 30px 29px; } .or-hc-step > * { margin-block: 0 !important; } .or-hc-step-icon img { height: auto; } .or-hc-step-assess .or-hc-step-icon img { width: 46px !important; } .or-hc-step-strategize .or-hc-step-icon img { width: 51px !important; } .or-hc-step-execute .or-hc-step-icon img { width: 53px !important; } .or-hc-step-optimize .or-hc-step-icon img { width: 29px !important; } .or-hc-step-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: 0.05em; color: var(--wp--preset--color--magenta); } .or-hc-step-h + p { grid-column: 1 / -1; margin-top: 16.5px !important; } /* --- ready for marketing ------------------------------------------------------------------ */ .or-hc-ready { padding: 0; } .or-hc-ready-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-hc-ready-copy { padding: 50.4px 30px 28.6px; } .or-hc-ready-copy > * { margin-block: 0 !important; } .or-hc-ready-title { color: var(--wp--preset--color--black); } .or-hc-ready-sub { margin-top: 25px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-hc-ready-sub + p { margin-top: 27.9px !important; } .or-hc-ready-copy > .or-hc-btns { margin-top: 22.5px !important; } .or-hc-ready-img img { aspect-ratio: 320 / 316; object-fit: cover; border-radius: 35px; } /* --- why SaaS companies need fractional teams --------------------------------------------- */ .or-hc-need { padding: 47.6px 0 37.5px !important; } .or-hc-need > * { margin-block: 0 !important; } .or-hc-need-title, .or-hc-need-lead { padding: 0 30px; } .or-hc-need-title { color: var(--wp--preset--color--black); } .or-hc-need-lead { margin-top: 25px !important; } .or-hc-need-cards.wp-block-columns { margin: 25.2px 0 0 !important; gap: 24.7px !important; } .or-hc-need-cards + .or-hc-need-cards.wp-block-columns { margin-top: 24.7px !important; } .or-hc-need-card { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky-deep); padding: 30px 30px 29px; } .or-hc-need-card > * { margin-block: 0 !important; } .or-hc-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 600; font-size: 15px; line-height: 22.4px; color: var(--wp--preset--color--navy); } .or-hc-need-h + p { margin-top: 18.8px !important; } /* --- expert leadership + unlock band ------------------------------------------------------ */ .or-hc-expert > *, .or-hc-unlock > * { margin-block: 0 !important; } .or-hc-expert { padding: 45.9px 30px 44.3px !important; } .or-hc-expert-title { color: var(--wp--preset--color--black); } .or-hc-expert > .or-hc-expert-sub { margin-top: 23.8px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-hc-expert > .or-hc-expert-lead { margin-top: 26.5px !important; } .or-hc-expert > .or-hc-expert-checks { margin-top: 21.4px !important; } .or-hc-expert > .or-hc-btns { margin-top: 24.1px !important; } .or-hc-expert .or-hc-btns .wp-block-button__link { padding-block: 9px; } .or-hc-unlock { padding: 50px 30px 49.9px !important; text-align: center; } .or-hc-unlock-title { max-width: 260px; margin-inline: auto !important; } .or-hc-unlock > .or-hc-btns { margin-top: 30px !important; } .or-hc-team-copy > .or-hc-team-sub { margin-top: 40px !important; } .or-hc-team-sub { margin-top: 25px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } /* --- get started (magenta) ------------------------------------------------------------------ */ .or-hc-go { padding: 48.9px 30px 48.2px !important; text-align: center; } .or-hc-go-copy { text-align: left; } .or-hc-go-title { max-width: 260px; margin-inline: auto !important; } .or-hc-go-cols.wp-block-columns { margin: 0; gap: 31.3px !important; } .or-hc-go-cols .wp-block-column > * { margin-block: 0 !important; } .or-hc-go-copy > .or-hc-btns { margin-top: 29px !important; } .or-hc-btn-navy .wp-block-button__link { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-hc-btn-navy .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); } /* --- services: collapsible lists ---------------------------------------------------------------------- */ .or-hc-team { padding: 0 0 46.7px; } .or-hc-team-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-hc-team-media { display: none; } .or-hc-team-copy { padding: 0 33.5px 0 30px; } .or-hc-team-copy > * { margin-block: 0 !important; } .or-hc-team-title { color: var(--wp--preset--color--black); } .or-hc-team-copy > .or-hc-team-sub + .or-hc-more { margin-top: 40.4px !important; } .or-hc-team-copy > .or-at-more-toggle + .or-hc-more, .or-hc-team-copy > .or-hc-more + .or-hc-more { margin-top: 23px !important; } .or-hc-team-copy > .or-hc-btns { margin-top: 39.6px !important; } /* --- cost comparison ------------------------------------------------------------------------ */ .or-hc-cost { padding: 53px 0 0 !important; } .or-hc-cost-title { padding: 0 30px; color: var(--wp--preset--color--navy); } .or-hc-cost-panel { margin-top: 25px !important; border-radius: 35px; background: #def1ff; padding: 26.6px 30px 17.7px; } .or-hc-cost-cols.wp-block-columns { margin: 0; gap: 31.3px !important; } .or-hc-cost-col > * { margin-block: 0 !important; } .or-hc-cost-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 26px; color: var(--wp--preset--color--navy); } .or-hc-cost-label { font-size: 18px !important; line-height: 26.5px !important; letter-spacing: 0.05em; } .or-hc-cost-list { margin-top: 11.6px !important; padding-left: 24.1px; } /* --- why choose One Rawr for SaaS ------------------------------------------------------------ */ .or-hc-reasons { margin-top: 53.5px !important; padding: 50px 0 63.4px !important; text-align: center; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-hc-reasons > * { margin-block: 0 !important; } .or-hc-reasons > .or-hc-reasons-sub { margin-top: 26.4px !important; padding: 0 30px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-hc-reasons-title { max-width: 260px; margin-inline: auto !important; color: var(--wp--preset--color--white); } .or-hc-reasons-row.wp-block-columns { margin-top: 25.5px !important; gap: 24.6px !important; } .or-hc-reasons-row + .or-hc-reasons-row.wp-block-columns { margin-top: 24.6px !important; } .or-hc-reason { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); padding: 29.9px 30px 28.1px; } .or-hc-reason > * { margin-block: 0 !important; } .or-hc-reason-num { width: 85px; height: 85px; margin: 0 auto !important; border-radius: 50%; background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--white); font-size: 37px !important; line-height: 85px !important; } .or-hc-reason-h { margin-top: 24.5px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; } .or-hc-reason-h + p { margin-top: 26.5px !important; } /* --- speak / FAQ -------------------------------------------------------------------------------- */ .or-hc-speak { padding: 39.3px 4px 0 !important; } .or-hc-speak-title { text-align: center; color: var(--wp--preset--color--black); } .or-hc-speak > .or-hc-h + * { margin-top: 30px !important; } .or-hc-speak .meetings-iframe-container iframe { display: block; width: 100%; } .or-hc-faq { padding: 0 30px 61px !important; } .or-hc-faq-media { display: none; } .or-hc-dbr { display: none; } .or-hc-faq .or-hc-faq-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-hc-faq .or-hc-faq-list > .or-hc-h { font-size: 27px; line-height: 1.05; margin: 10.5px 0 0; padding-left: 17px; color: var(--wp--preset--color--navy); } .or-hc-faq .or-hc-faq-list > .or-hc-h + .wp-block-details { margin-top: 20px; } .or-hc-faq .wp-block-details { margin-block: 0; } .or-hc-faq.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-hc-faq.or-faq .wp-block-details > :not(summary) { padding: 0 20px 12px 20px; } .or-hc-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-hc-faq.or-faq .wp-block-details > summary + * { padding-top: 9.7px; } .or-hc-faq.or-faq .wp-block-details :is(p, li) { font-size: 16px; line-height: 24px; } /* Phone frame: a normal list, bullets hanging at x60 and text from x74.5. */ .or-hc-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 0; padding-left: 44.5px; } /* ----------------------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-hc-h, .or-hc-title { font-size: 40px; line-height: 48px; } .or-hc-btns .wp-block-button__link { padding: 10.5px 26px; } .or-main .or-hc-btns > .wp-block-button, .or-main .or-hc-btns > .wp-block-button .wp-block-button__link { width: auto; } /* Hero: 433px photo, 980px white card lifted 194px over it; copy centred. */ /* Like the live page: the square stock image cropped to the band from its centre, so narrower screens still show the whole composition; all four corners rounded. */ .or-hc-hero-img img { height: 433px; object-fit: cover; object-position: 50% 50%; border-radius: 35px; } .or-hc-hero-img.or-only-mobile { display: none; } .or-hc-hero-card { position: relative; box-sizing: border-box; width: min(980px, calc(100% - 48px)); margin: -194px auto 0 !important; border-radius: 35px 35px 0 0; background: var(--wp--preset--color--white); padding: 63px 24px 0; } .or-hc-title { max-width: 840px; margin-inline: auto !important; color: var(--wp--preset--color--navy); } .or-hc-hero-card > .or-hc-btns { margin-top: 50.5px; justify-content: center; } .or-hc-hero .or-hc-btns .wp-block-button__link { min-width: 217px; padding-block: 11px; } .or-hc-intro { padding: 65.25px 24px 0 !important; text-align: center; } .or-hc-intro > p { max-width: 760px; margin-inline: auto !important; line-height: 21.5px !important; } /* Tiles: magenta 519, sky and photo 501 across x199..1720, 387 tall. */ .or-hc-tiles-wrap { padding: 70.25px 24px 0; } .or-hc-tiles.wp-block-columns { max-width: 1521px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } /* Three separate rounded tiles side by side (client change: no overlap): magenta x200..719, sky x719..1228, photo x1228..1721, all 436 tall. */ .or-hc-tiles.wp-block-columns { align-items: stretch !important; } .or-hc-tiles.wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 436px; } .or-hc-tiles > .or-hc-tile-magenta { position: relative; z-index: 0; display: block; flex-basis: 519px !important; padding: 78.5px 60px 0 106.5px; } .or-hc-tiles > .or-hc-tile-sky { position: relative; z-index: 2; display: block; flex-basis: 509px !important; padding: 79px 40px 0 105px; } .or-hc-tiles > .or-hc-tile-photo { position: relative; z-index: 1; flex-basis: 493px !important; } .or-hc-tile-quote { max-width: 310px; font-size: 23px; line-height: 30px; letter-spacing: 0; } .or-hc-tile-title { max-width: 301px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 23px; line-height: 30px; letter-spacing: 0; color: var(--wp--preset--color--black); } .or-hc-tile-h { margin-top: 22.5px !important; font-size: 15px; line-height: 22px; letter-spacing: 0; color: var(--wp--preset--color--navy); } .or-hc-tile-list { margin-top: 0 !important; max-width: 300px; padding-left: 23px; } .or-hc-tile-photo img { height: 436px; aspect-ratio: auto; } .or-hc-band { margin-top: 0 !important; padding: 78px 24px 57px !important; text-align: center; } .or-hc-band > p { max-width: 700px; margin-inline: auto !important; line-height: 21.8px !important; } .or-hc-band > .or-hc-btns { margin-top: 29.6px !important; justify-content: center; } .or-hc-band .or-hc-btns .wp-block-button__link { padding-block: 9.5px; } .or-hc-band .or-hc-btns .wp-block-button__link { min-width: 225.5px; } /* What we do: four 358px cards across x204..1717. */ .or-hc-wwd { padding: 70px 24px 69px !important; text-align: left; } .or-hc-wwd > * { max-width: 1520px; margin-inline: auto !important; } .or-hc-wwd > .or-hc-eyebrow { letter-spacing: 0; color: #001621; } .or-hc-wwd > .or-hc-wwd-title { margin-inline: auto !important; max-width: 1520px; padding-right: 920px; box-sizing: border-box; } .or-hc-wwd-title { margin-top: 38.5px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 45px; line-height: 52px; color: #001621; } .or-hc-wwd > .or-hc-wwd-cards.wp-block-columns { max-width: 1510px; } .or-hc-wwd-cards.wp-block-columns { margin-top: 38.5px !important; gap: 30px !important; flex-wrap: nowrap !important; } .or-hc-wwd-cards > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 338px; } .or-hc-wwd-card { padding: 58px 30px 20px 35px; } .or-hc-wwd-h { margin-top: 25.5px !important; font-size: 24px; line-height: 22px; letter-spacing: 0; } .or-hc-wwd-h + p { margin-top: 33.5px !important; } /* Why choose: navy x110..535, sky x535..1810, 664 tall. */ .or-hc-why { padding: 0 110px; } .or-hc-why-cols.wp-block-columns { max-width: 1700px; margin: 0 auto; flex-wrap: nowrap !important; min-height: 664px; } .or-hc-why-cols > .or-hc-why-intro { flex: 0 0 425px !important; padding: 51px 60px 0 90px; border-radius: 35px 0 0 35px; } .or-hc-why-title { max-width: none; margin-left: 0 !important; text-align: left; } .or-hc-why-intro > p { max-width: 240px; font-size: 15px !important; line-height: 22px !important; letter-spacing: 0; } .or-hc-why-img img { aspect-ratio: 1; } .or-hc-why-intro > .or-hc-h + p { margin-top: 40px !important; } .or-hc-why-intro > p + p { margin-top: 22px !important; } .or-hc-why-cols > .or-hc-why-panel { flex: 1 1 auto !important; border-radius: 0 35px 35px 0; padding: 50px 90px 0; } .or-hc-why-cards.wp-block-columns { gap: 180px !important; flex-wrap: nowrap !important; } .or-hc-why-cards > .wp-block-column { flex: 0 0 245px !important; } .or-hc-why-h { margin-top: 29.5px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 20px; line-height: 28.5px; letter-spacing: 0; max-width: 240px; } .or-hc-why-h + p { margin-top: 29px !important; } /* Steps: heading left of centre, 260x280 cards at x1027 / x1314, the right column 168px lower. */ .or-hc-steps { padding: 62px 24px 62px !important; } .or-hc-steps-cols.wp-block-columns { max-width: 1227px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-hc-steps-head { flex: 0 0 680px !important; padding: 221px 0 0; } .or-hc-steps-title { max-width: 460px; } .or-hc-steps-body { flex: 0 0 547px !important; } .or-hc-steps-grid { grid-template-columns: 260px 260px; column-gap: 27px; row-gap: 57px; padding-bottom: 168px; } .or-hc-step { display: block; min-height: 280px; padding: 23px 28px 0 20px; } .or-hc-step:nth-child(2n) { transform: translateY(168px); } .or-hc-step-h { margin-top: 20px !important; font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0; } .or-hc-step-icon img { height: auto; } /* The frame places each card's icon, title and copy freely (same cards as the Accounting page). */ .or-hc-step-assess { padding: 23px 40px 0 20px; } .or-hc-step-assess .or-hc-step-h { margin-top: 20px !important; } .or-hc-step-assess .or-hc-step-h + p { margin-top: 7.5px !important; } .or-hc-step-strategize { padding: 25px 34px 0 21.5px; } .or-hc-step-strategize .or-hc-step-h { margin-top: 17px !important; } .or-hc-step-strategize .or-hc-step-h + p { margin-top: 6.5px !important; } .or-hc-step-execute { padding: 38px 42px 0 20px; } .or-hc-step-execute .or-hc-step-h { margin-top: 21px !important; } .or-hc-step-execute .or-hc-step-h + p { margin-top: 19.5px !important; } .or-hc-step-optimize { padding: 20px 60px 0 21.5px; } .or-hc-step-optimize .or-hc-step-h { margin-top: 12px !important; } .or-hc-step-optimize .or-hc-step-h + p { margin-top: 10px !important; } .or-hc-reasons-title { padding: 0; } .or-hc-go-title { max-width: 460px; margin-inline: 0 !important; } /* Start growing: grey panel x0..960 and photo x960..1920, both 555 tall with 35px corners. */ .or-hc-ready-cols.wp-block-columns { flex-wrap: nowrap !important; min-height: 555px; } .or-hc-ready-copy { flex: 0 0 50% !important; border-radius: 35px; background: #fafafa; padding: 43.5px 24px 0 240px; } .or-hc-ready-title { max-width: 460px; color: var(--wp--preset--color--navy); } .or-hc-ready-sub { margin-top: 34.5px !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; max-width: 440px; color: var(--wp--preset--color--navy); } .or-hc-ready-sub + p { margin-top: 36px !important; max-width: 410px; line-height: 21.8px !important; } .or-hc-ready-copy > .or-hc-btns { margin-top: 36.2px !important; } .or-hc-ready .or-hc-btns .wp-block-button__link { min-width: 161.5px; padding-block: 10px; } .or-hc-ready-media { flex: 0 0 50% !important; } .or-hc-ready-img img { height: 555px; aspect-ratio: auto; border-radius: 35px; } /* Expert: centred on x967.5 as in the frame; checklist lines centred. */ .or-hc-expert { padding: 73.5px 9px 62px 24px !important; text-align: center; } .or-hc-expert-title { max-width: none; color: var(--wp--preset--color--navy); } .or-hc-expert > .or-hc-expert-sub { margin-top: 39.5px !important; } .or-hc-expert > .or-hc-expert-lead { max-width: 560px; margin: 23.5px auto 0 !important; } .or-hc-expert > .or-hc-expert-checks { margin-top: 24px !important; } .or-hc-expert > .or-hc-btns { margin-top: 37.5px !important; justify-content: center; } .or-hc-expert .or-hc-btns .wp-block-button__link { padding-block: 10px; } /* Unlock: full-width navy band, 35px corners, 328 tall. */ .or-hc-unlock { padding: 62.5px 24px 47px !important; border-radius: 35px; text-align: center; } .or-hc-unlock-title { max-width: 680px; margin-inline: auto !important; } .or-hc-unlock > .or-hc-btns { margin-top: 28.5px !important; justify-content: center; } .or-hc-unlock .or-hc-btns .wp-block-button__link { min-width: 161px; padding-block: 10px; } /* Why SaaS needs: centred heading and lead, 568x420 cards across x84..1838. */ .or-hc-need { padding: 76.5px 24px 0 !important; text-align: center; } .or-hc-need-title { color: var(--wp--preset--color--navy); max-width: 745px; margin-inline: auto !important; padding: 0; } .or-hc-mbr { display: none; } .or-hc-need-lead { max-width: 730px; margin: 16.5px auto 0 !important; padding: 0; } .or-hc-need-cards.wp-block-columns { max-width: 1754px; margin: 21px auto 0 !important; gap: 25px !important; flex-wrap: nowrap !important; text-align: left; } .or-hc-need-cards + .or-hc-need-cards.wp-block-columns { margin-top: 25px !important; } .or-hc-need-cards > .wp-block-column { flex: 0 0 calc((100% - 50px) / 3) !important; min-width: 0; min-height: 420px; } /* Copy sits in the vertical middle of each card, as in the frame; the first column starts at x208. */ .or-hc-need-card { display: flex; flex-direction: column; justify-content: center; padding: 0 40px 0 134px; } .or-hc-need-card:first-child { padding-left: 125.5px; } .or-hc-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; max-width: 310px; } .or-hc-need-h + p { margin-top: 32px !important; max-width: 316px; } .or-hc-need-cards:first-of-type > .or-hc-need-card:nth-child(3) p { max-width: 297px; } .or-hc-need-cards:last-of-type > .or-hc-need-card:first-child p { max-width: 325px; } .or-hc-need-cards:last-of-type > .or-hc-need-card:nth-child(2) p { max-width: 302px; } /* Services: purple image x83..705 (861 tall, 35px corners), copy from x863 on white. */ .or-hc-team { padding: 102px 24px 98px 83px; } .or-hc-team-copy > .or-hc-team-sub { margin-top: 39.5px !important; } .or-hc-team-cols.wp-block-columns { flex-wrap: nowrap !important; gap: 0 !important; } .or-hc-team-media { display: block; flex: 0 0 622px !important; } .or-hc-team-img img { height: 861px; object-fit: cover; border-radius: 35px; } .or-hc-team-copy { flex: 1 1 auto !important; padding: 52.5px 0 0 158px; } .or-hc-team-copy .or-at-more-toggle { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; } .or-hc-team-copy .or-at-more-toggle { text-decoration: none; color: var(--wp--preset--color--navy); } .or-hc-team-copy > * { max-width: 520px; } .or-hc-team-title { max-width: 520px; color: var(--wp--preset--color--black); } .or-hc-team-sub { margin-top: 39.5px !important; max-width: 520px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--wp--preset--color--navy); } .or-hc-team-copy > .or-hc-team-sub + .or-hc-more { margin-top: 25px !important; } .or-hc-team-copy > .or-at-more-toggle + .or-hc-more { margin-top: 47px !important; } .or-hc-team-copy > .or-at-more-toggle + .or-hc-more:last-of-type { margin-top: 29px !important; } .or-hc-team .or-hc-btns .wp-block-button__link { padding-block: 10px; } .or-hc-team-copy > .or-hc-btns { margin-top: 45px !important; } /* Cost: centred heading, sky panel x83..1837, 508 tall. */ /* Cost: centred heading, sky panel x83..1837, 508 tall; columns from x348 / x893 / x1273. */ .or-hc-cost { padding: 86.5px 24px 94px !important; } .or-hc-cost-title { max-width: none; margin: 0 auto !important; padding: 0; text-align: center; } .or-hc-cost-panel { max-width: 1754px !important; min-height: 508px; box-sizing: border-box; margin: 54.5px auto 0 !important; padding: 86.5px 24px 0 265px; } .or-hc-cost-cols.wp-block-columns { gap: 0 !important; flex-wrap: nowrap !important; } .or-hc-cost-head { flex: 0 0 545px !important; } .or-hc-cost-h { max-width: 470px; font-size: 40px; line-height: 48px; } .or-hc-cost-inhouse { flex: 0 0 380px !important; padding-top: 0; } .or-hc-cost-list { max-width: 312.5px; } .or-hc-cost-inhouse .or-hc-cost-list { max-width: 292.5px; } .or-hc-cost-rawr { flex: 0 0 330px !important; padding-top: 0; } .or-hc-cost-label { max-width: 300px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px !important; line-height: 28px !important; letter-spacing: 0; } .or-hc-cost-list { margin-top: 29px !important; padding-left: 22.5px; } .or-hc-cost-list li { font-size: 15px !important; line-height: 21px !important; } /* Reasons: one navy section (x0..1920, 1329 tall), 320px white cards at x470 / 799 / 1130. */ .or-hc-reasons { margin-top: 0 !important; padding: 68.5px 24px 66px !important; } .or-hc-reasons-title { max-width: 740px; margin-inline: auto !important; padding: 0; } .or-hc-reasons > .or-hc-reasons-sub { max-width: 370px; margin: 39px auto 0 !important; padding: 0; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; } .or-hc-reasons > .or-hc-reasons-band { max-width: 980px !important; margin: 99.5px auto 0 !important; } .or-hc-reasons-row.wp-block-columns { margin: 0 !important; gap: 10px !important; flex-wrap: nowrap !important; } .or-hc-reasons-row + .or-hc-reasons-row.wp-block-columns { margin-top: 84px !important; } .or-hc-reasons-row > .wp-block-column { flex: 1 1 0; min-width: 0; } .or-hc-reason { min-height: 424px; padding: 0 20px 40px; margin-top: 26px; } .or-hc-reasons-row + .or-hc-reasons-row > .or-hc-reason { min-height: 396px; } .or-hc-reason-num { width: 84px; height: 84px; margin: -26px auto 0 !important; font-size: 36px !important; line-height: 84px !important; } .or-hc-reason-h { max-width: 265px; margin: 31px auto 0 !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; } .or-hc-reasons-row:first-child > .or-hc-reason:nth-child(2) .or-hc-reason-h { max-width: 275px; } .or-hc-reason-h + p { max-width: 257px; margin: 22px auto 0 !important; } .or-hc-reasons-row:first-child > .or-hc-reason:nth-child(2) p { max-width: 237px; } .or-hc-reasons-row:first-child > .or-hc-reason:nth-child(3) p { max-width: 246px; } .or-hc-reasons-row:last-child > .or-hc-reason:nth-child(1) p { max-width: 248px; } .or-hc-reasons-row:last-child > .or-hc-reason:nth-child(2) p { max-width: 266px; } .or-hc-reasons-row:last-child > .or-hc-reason:nth-child(3) p { max-width: 237px; } /* Ready to elevate: navy band 544 tall, heading x494, copy x1014. */ .or-hc-go { padding: 171.5px 20px 172px 28px !important; text-align: left; } .or-hc-go-cols.wp-block-columns { max-width: 940px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } .or-hc-go-head { flex: 0 0 520px !important; } .or-hc-go-title { max-width: 460px; } .or-hc-go-copy { flex: 0 0 420px !important; padding-top: 1px; } .or-hc-go-copy > p { max-width: 418px; line-height: 21.75px !important; } .or-hc-go-copy > .or-hc-btns { margin-top: 45.75px !important; } .or-hc-go .or-hc-btns .wp-block-button__link { min-width: 174.5px; padding-block: 10px; } .or-hc-speak { padding: 113px 24px 0 !important; } .or-hc-speak-title { color: var(--wp--preset--color--navy); } .or-hc-speak > .or-hc-h + * { margin-top: 60px !important; max-width: 855px; margin-inline: auto !important; } .or-hc-faq { padding: 62.8px 24px 133px !important; } .or-hc-dbr { display: inline; } .or-hc-faq .or-hc-faq-cols.wp-block-columns { max-width: 953px; margin: 0 auto; gap: 53px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-hc-faq-media { display: block; flex: 0 0 350px !important; } .or-hc-faq-img-top img { height: 632px; object-fit: cover; border-radius: 30px; } .or-hc-faq-img-bottom { margin-top: 42px !important; } .or-hc-faq-img-bottom img { height: 374px; object-fit: cover; border-radius: 30px; } .or-hc-faq-cols > .or-hc-faq-list.wp-block-column { flex: 1 1 550px !important; min-width: 0; } .or-hc-faq .or-hc-faq-list > .or-hc-h { font-size: 40px; line-height: 48px; margin-top: -5px; padding-left: 0; } .or-hc-faq .or-hc-faq-list > .or-hc-h + .wp-block-details { margin-top: 19.5px; } .or-hc-faq.or-faq summary { display: flex; align-items: center; min-height: 93.5px; padding: 18px 50px 18px 10px; font-size: 20px; line-height: 28.5px; } .or-hc-faq.or-faq details[open] > summary { padding-top: 11.2px; padding-bottom: 21.5px; } .or-hc-faq.or-faq summary::after { top: 50%; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } .or-hc-faq.or-faq .wp-block-details > :not(summary) { padding: 0 40px 20px 10px; } .or-hc-faq.or-faq .wp-block-details > summary + * { padding-top: 0; } .or-hc-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-hc-faq.or-faq details[open] > :last-child { padding-bottom: 12.2px; } .or-hc-faq.or-faq .wp-block-details > p { max-width: 470px; } .or-hc-faq.or-faq .wp-block-details :is(p, li) { font-size: 15px; line-height: 22px; } .or-hc-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 22px; padding-left: 35.5px; list-style: disc; } .or-hc-faq.or-faq .wp-block-details > ul.wp-block-list > li::before { content: none; } } /* Between the phone layout and the 1920 frame: the same desktop design, with the fixed frame widths allowed to shrink and the widest rows stacked, so nothing runs off the screen. */ @media (min-width: 782px) and (max-width: 1919px) { .or-hc-wwd > .or-hc-wwd-title { padding-right: max(0px, calc(100% - 600px)); } .or-hc-why { padding: 0 24px; } .or-hc-why-cols > .or-hc-why-intro { flex: 0 1 425px !important; min-width: 0; padding-left: clamp(40px, 4.7vw, 90px); } .or-hc-why-cols > .or-hc-why-panel { min-width: 0; padding: 50px clamp(30px, 4.7vw, 90px) 40px; } .or-hc-why-cards.wp-block-columns { gap: clamp(30px, 9.4vw - 100px, 180px) !important; } .or-hc-why-cards > .wp-block-column { flex: 0 1 245px !important; min-width: 0; } .or-hc-ready-cols.wp-block-columns { height: auto; min-height: 488px; } .or-hc-ready-copy { flex: 1 1 830px !important; min-width: 0; padding: 40px 40px 40px clamp(40px, 10.4vw, 200px); } .or-hc-ready-media { flex: 1 1 890px !important; min-width: 0; } .or-hc-ready-media { position: relative; } .or-hc-ready-media > .or-hc-ready-img { position: absolute; inset: 0; margin: 0 !important; } .or-hc-ready-img img { width: 100%; height: 100%; object-fit: cover; } .or-hc-team { padding-left: clamp(24px, 4.4vw, 84px); } .or-hc-team-media { flex: 0 1 652px !important; min-width: 0; } .or-hc-team-copy { min-width: 0; padding-left: clamp(40px, 9.3vw, 178px); } .or-hc-cost-panel { height: auto; min-height: 508px; padding: 85px 40px 60px clamp(40px, 15.1vw, 290px); } .or-hc-cost-head { flex: 0 1 476px !important; min-width: 0; padding-right: 24px; } .or-hc-cost-inhouse { flex: 0 1 390px !important; min-width: 0; padding-right: 24px; } .or-hc-cost-rawr { flex: 0 1 300px !important; min-width: 0; } .or-hc-need-card { padding: 40px clamp(30px, 3.1vw, 60px) 40px clamp(30px, 7vw, 134px); } .or-hc-need-cards:first-of-type > .or-hc-need-card:first-child { padding-left: clamp(30px, 6.6vw, 126px); } .or-hc-tiles > .or-hc-tile-magenta { padding-left: clamp(40px, 5.5vw, 106px); padding-right: 40px; } .or-hc-wwd-cards > .wp-block-column { height: auto !important; min-height: 340px; } } @media (min-width: 782px) and (max-width: 1279px) { .or-hc-steps-cols.wp-block-columns { flex-wrap: wrap !important; justify-content: center; } .or-hc-steps-head { flex: 0 0 100% !important; padding: 0; text-align: center; } .or-hc-steps-title { margin-inline: auto !important; } .or-hc-steps-body { flex: 0 0 547px !important; margin-top: 48px !important; } } @media (min-width: 782px) and (max-width: 1199px) { .or-hc-why-cols.wp-block-columns { flex-wrap: wrap !important; } .or-hc-why-cols > .or-hc-why-intro { flex: 0 0 100% !important; padding: 51px 40px 40px; border-radius: 35px 35px 0 0; } .or-hc-why-intro > p { max-width: 640px; } .or-hc-why-cols > .or-hc-why-panel { flex: 0 0 100% !important; padding: 40px; border-radius: 0 0 35px 35px; } .or-hc-why-cards.wp-block-columns { justify-content: space-between; gap: 30px !important; } .or-hc-cost-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; } .or-hc-cost-head { flex: 0 0 100% !important; } .or-hc-cost-inhouse, .or-hc-cost-rawr { flex: 1 1 0 !important; } .or-hc-cost-panel { padding-left: 60px; } .or-hc-go-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; max-width: 640px; } .or-hc-go-head, .or-hc-go-copy { flex: 0 0 100% !important; } .or-hc-need-cards > .wp-block-column { height: auto; min-height: 360px; } .or-hc-need-cards:first-of-type > .or-hc-need-card:first-child, .or-hc-need-card { padding: 40px 30px; } } @media (min-width: 782px) and (max-width: 1023px) { .or-hc-ready-cols.wp-block-columns { flex-wrap: wrap !important; } .or-hc-ready-copy, .or-hc-ready-media { flex: 0 0 100% !important; } .or-hc-ready-copy { padding: 48px 40px; } .or-hc-ready-media { height: 420px; } .or-hc-ready-img img { border-radius: 0 0 35px 35px; } .or-hc-team-media { display: none; } .or-hc-team { padding-left: 0; } .or-hc-team-copy { padding: 60px 40px; } .or-hc-team-copy > * { max-width: 640px; } .or-hc-wwd-cards.wp-block-columns { flex-wrap: wrap !important; row-gap: 27px !important; } .or-hc-wwd-cards > .wp-block-column { flex: 0 0 calc(50% - 13.5px) !important; min-height: 280px; } } @media (min-width: 782px) and (max-width: 959px) { .or-hc-need-cards.wp-block-columns { flex-wrap: wrap !important; justify-content: center; row-gap: 25px !important; } .or-hc-need-cards > .wp-block-column { flex: 0 0 calc(50% - 12.5px) !important; min-height: 300px; } } @media (min-width: 782px) and (max-width: 1919px) { .or-hc-need-cards > .or-hc-need-card, .or-hc-need-cards > .or-hc-need-card:first-child { padding: 40px clamp(24px, 3.1vw, 40px) 40px clamp(24px, 6.5vw, 125.5px); } } /* ===== page 15: INDUSTRIES | Educational Technology ========================= * Same family as pages 13-14 (SaaS, Healthcare), measured off its own frames: desktop 3840px (a 1920 * CSS canvas at 2x), mobile 532px at 1.6625x (a 320 CSS canvas). Mobile-first: plain rules are the * 320 frame, the min-width block is the 1920 one. Numbers and sources: edtech-design.md. */ :is(.or-et-hero, .or-et-intro, .or-et-tiles-wrap, .or-et-band, .or-et-wwd, .or-et-why, .or-et-steps, .or-et-ready, .or-et-need, .or-et-team, .or-et-cost, .or-et-reasons, .or-et-go, .or-et-unlock, .or-et-speak, .or-et-faq) { margin-block: 0 !important; } :is(.or-et-hero, .or-et-intro, .or-et-tiles-wrap, .or-et-band, .or-et-wwd, .or-et-why, .or-et-steps, .or-et-ready, .or-et-need, .or-et-team, .or-et-cost, .or-et-reasons, .or-et-go, .or-et-unlock, .or-et-faq) :is(p, li) { font-size: 15px; line-height: 22px; } :is(.or-et-hero, .or-et-intro, .or-et-tiles-wrap, .or-et-band, .or-et-wwd, .or-et-why, .or-et-steps, .or-et-ready, .or-et-need, .or-et-team, .or-et-cost, .or-et-reasons, .or-et-go, .or-et-unlock, .or-et-speak, .or-et-faq) :is(h1, h2, h3, p, ul, figure, hr, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-et-tiles-wrap, .or-et-wwd, .or-et-why, .or-et-steps, .or-et-ready, .or-et-need, .or-et-team, .or-et-cost, .or-et-reasons, .or-et-go, .or-et-unlock, .or-et-faq) .wp-block-column { box-sizing: border-box; } .or-et-h, .or-et-title { font-size: 25px; line-height: 30px; } .or-et-btns .wp-block-button__link { padding: 4.5px 21px; box-sizing: border-box; font-size: 16px; } :where(.or-et-hero, .or-et-tiles-wrap, .or-et-why, .or-et-ready, .or-et-team, .or-et-faq) figure img { display: block; width: 100%; height: auto; } /* --- hero ------------------------------------------------------------------- */ .or-et-hero { padding: 0; } .or-et-hero-img img { aspect-ratio: 320 / 316; object-fit: cover; border-radius: 35px; } .or-et-hero-card { margin-top: 0 !important; padding: 28.4px 30px 0; text-align: center; } .or-et-title { color: var(--wp--preset--color--black); } .or-et-hero-card > .or-et-btns { margin-top: 24.7px; } .or-et-intro { padding: 27.8px 35px 0 30px !important; } /* --- three tiles -------------------------------------------------------------- */ .or-et-tiles-wrap { padding: 25.4px 0 0; } .or-et-tiles.wp-block-columns { margin: 0; gap: 30.8px !important; } .or-et-tile { box-sizing: border-box; border-radius: 35px; overflow: hidden; } /* Phones: the two text tiles are 320px squares with their copy in the middle. */ @media (max-width: 781px) { .or-et-wwd > .or-et-wwd-title { max-width: 260px; margin-inline: auto !important; } /* The phone frame runs the three result lines together as one paragraph. */ /* The phone frame keeps the service lists collapsed too: three lines and a bold toggle. */ .or-et-more.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* The frame shows each list's title and subtitle; the first title takes two lines. */ :is(#or-at-more-1, #or-at-more-4, #or-at-more-5).or-et-more.is-clamped { -webkit-line-clamp: 4; } :is(#or-at-more-2, #or-at-more-3).or-et-more.is-clamped { -webkit-line-clamp: 5; } .or-et-team-copy .or-at-more-toggle { display: block; margin: 0 !important; padding: 0; border: 0; background: none; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 15px; line-height: 22px; color: var(--wp--preset--color--navy); cursor: pointer; } } .or-et-tile > * { margin-block: 0 !important; } .or-et-tile-magenta { padding: 26.4px 30px 27.4px; background: var(--wp--preset--color--magenta); } .or-et-tile-quote { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-et-tile-sky { padding: 27px 30px 27px; background: var(--wp--preset--color--sky-deep); } .or-et-tile-h { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 25.9px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-et-tile-list { margin-top: 20.3px !important; padding-left: 22.9px; } .or-et-tile-photo img { aspect-ratio: 320 / 263; object-fit: cover; } .or-et-band { padding: 50.3px 30px 49.8px !important; margin-top: 48px !important; } .or-et-band > .or-et-btns { margin-top: 28.8px !important; } /* --- what we do -------------------------------------------------------------- */ .or-et-wwd { padding: 47.8px 14.5px 44px !important; text-align: center; } .or-et-wwd > .or-et-eyebrow { font-size: 18px; line-height: 20px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-et-wwd-title { margin-top: 29px !important; color: var(--wp--preset--color--black); } .or-et-wwd-cards.wp-block-columns { margin-top: 24.1px !important; gap: 24.4px !important; text-align: left; } .or-et-wwd-card { box-sizing: border-box; border: 1px solid var(--wp--preset--color--black); border-radius: 35px; padding: 25px 25px 30px 30px; } .or-et-wwd-card > * { margin-block: 0 !important; } .or-et-wwd-icon img { width: 36.5px !important; } .or-et-wwd-h { margin-top: 27.6px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: #001621; } .or-et-wwd-card p { color: var(--wp--preset--color--black); } .or-et-wwd-h + p { margin-top: 22.6px !important; } /* --- why choose ---------------------------------------------------------------- */ .or-et-why { padding: 0; } .or-et-why-cols.wp-block-columns { margin: 0; gap: 3px !important; } .or-et-why-intro { padding: 46.5px 30px 45.4px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-et-why-intro > * { margin-block: 0 !important; } .or-et-why-title { max-width: none; margin-inline: 0 !important; text-align: left; color: var(--wp--preset--color--magenta); } .or-et-why-intro > p { font-size: 18px !important; line-height: 26.6px !important; letter-spacing: 0.05em; } .or-et-why-intro > .or-et-h + p { margin-top: 18.8px !important; } .or-et-why-intro > p + p { margin-top: 28.3px !important; } .or-et-why-panel { padding: 46.8px 30px 46.1px; background: var(--wp--preset--color--sky-deep); border-radius: 35px; } .or-et-why-cards.wp-block-columns { margin: 0; gap: 38.9px !important; } .or-et-why-card > * { margin-block: 0 !important; } .or-et-why-img img { aspect-ratio: 1; object-fit: cover; border-radius: 35px; } .or-et-why-h { margin-top: 20px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--black); } .or-et-why-h + p { margin-top: 20.9px !important; } /* Colours read off the frames; several differ between the phone and desktop frames. */ :is(.or-et-why-card, .or-et-step) p { color: var(--wp--preset--color--black); } /* --- four steps ---------------------------------------------------------------- */ .or-et-steps { padding: 92.9px 0 39.7px !important; } .or-et-steps-cols.wp-block-columns { margin: 0; gap: 24.6px !important; } .or-et-steps-head { padding: 0 30px; } .or-et-steps-title { color: var(--wp--preset--color--black); } .or-et-steps-grid { display: grid; gap: 24.4px; } .or-et-steps-grid > .or-et-step { margin: 0 !important; } /* Phones: icon and title side by side (title from x105), copy below. */ .or-et-step { display: grid; grid-template-columns: 75px 1fr; align-items: center; box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky-deep); padding: 30px 30px 29px; } .or-et-step > * { margin-block: 0 !important; } .or-et-step-icon img { height: auto; } .or-et-step-assess .or-et-step-icon img { width: 46px !important; } .or-et-step-strategize .or-et-step-icon img { width: 51px !important; } .or-et-step-execute .or-et-step-icon img { width: 53px !important; } .or-et-step-optimize .or-et-step-icon img { width: 29px !important; } .or-et-step-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: 0.05em; color: var(--wp--preset--color--magenta); } .or-et-step-h + p { grid-column: 1 / -1; margin-top: 16.5px !important; } /* --- ready for marketing ------------------------------------------------------------------ */ .or-et-ready { padding: 0 0 45px; } .or-et-ready-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-et-ready-copy { padding: 50.4px 30px 24px; } .or-et-ready-copy > * { margin-block: 0 !important; } .or-et-ready-title { text-align: center; color: var(--wp--preset--color--black); } .or-et-ready-sub { margin-top: 26.3px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-et-ready-sub + p { margin-top: 26.9px !important; } .or-et-ready-copy > .or-et-btns { margin-top: 24px !important; } .or-et-ready-img img { aspect-ratio: 1; object-fit: cover; border-radius: 35px; } /* --- why SaaS companies need fractional teams --------------------------------------------- */ .or-et-need { padding: 47.6px 0 45px !important; } .or-et-need > * { margin-block: 0 !important; } .or-et-need-title, .or-et-need-lead { padding: 0 30px; } .or-et-need-title { max-width: 250px; margin-inline: auto !important; padding: 0 !important; text-align: center; color: var(--wp--preset--color--black); } .or-et-need-lead { margin-top: 25px !important; } .or-et-need-cards.wp-block-columns { margin: 25.2px 0 0 !important; gap: 24.7px !important; } .or-et-need-cards + .or-et-need-cards.wp-block-columns { margin-top: 24.7px !important; } .or-et-need-card { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky-deep); padding: 30px 30px 29px; } .or-et-need-card > * { margin-block: 0 !important; } .or-et-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 600; font-size: 15px; line-height: 22.4px; color: var(--wp--preset--color--navy); } .or-et-need-h + p { margin-top: 18.8px !important; } .or-et-nw { white-space: nowrap; } /* --- expert leadership + unlock band ------------------------------------------------------ */ .or-et-unlock { padding: 50px 30px 49.9px !important; text-align: center; } .or-et-unlock-title { max-width: 260px; margin-inline: auto !important; } .or-et-unlock > .or-et-btns { margin-top: 30px !important; } .or-et-team-copy > .or-et-team-sub { margin-top: 40px !important; } .or-et-team-sub { margin-top: 25px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } /* --- get started (magenta) ------------------------------------------------------------------ */ .or-et-go { padding: 48.9px 30px 48.2px !important; text-align: center; } .or-et-go-copy { text-align: left; } .or-et-go-title { max-width: 260px; margin-inline: auto !important; } .or-et-go-cols.wp-block-columns { margin: 0; gap: 31.3px !important; } .or-et-go-cols .wp-block-column > * { margin-block: 0 !important; } .or-et-go-copy > .or-et-btns { margin-top: 29px !important; } .or-et-btn-navy .wp-block-button__link { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-et-btn-navy .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); } /* --- services: collapsible lists ---------------------------------------------------------------------- */ .or-et-team { padding: 0 0 46.7px; } .or-et-team-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-et-team-copy { padding: 39.6px 30px 0; } .or-et-team-copy > * { margin-block: 0 !important; } .or-et-team-title { text-align: center; color: var(--wp--preset--color--black); } .or-et-team-copy > .or-et-team-sub + .or-et-more { margin-top: 40.4px !important; } .or-et-team-copy > .or-at-more-toggle + .or-et-more, .or-et-team-copy > .or-et-more + .or-et-more { margin-top: 23px !important; } .or-et-team-copy > .or-et-btns { margin-top: 39.6px !important; } .or-et-team-copy > .or-et-team-title + .or-et-more { margin-top: 42.4px !important; } /* --- cost comparison ------------------------------------------------------------------------ */ .or-et-cost { padding: 53px 0 0 !important; } .or-et-cost-title { max-width: 240px; margin-inline: auto !important; text-align: center; color: var(--wp--preset--color--navy); } .or-et-cost-panel { margin-top: 25px !important; border-radius: 35px; background: #def1ff; padding: 26.6px 30px 25.3px; } .or-et-cost-cols.wp-block-columns { margin: 0; gap: 24.8px !important; } .or-et-cost-cols > .or-et-cost-head { margin-bottom: 5.1px; } .or-et-cost-col > * { margin-block: 0 !important; } .or-et-cost-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28.3px; color: var(--wp--preset--color--navy); } .or-et-cost-label { font-size: 18px !important; line-height: 25.9px !important; letter-spacing: 0.05em; } .or-et-cost-list { margin-top: 11.6px !important; padding-left: 24.1px; } /* --- why choose One Rawr for SaaS ------------------------------------------------------------ */ .or-et-reasons { margin-top: 53.5px !important; padding: 50px 0 63.4px !important; text-align: center; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-et-reasons > * { margin-block: 0 !important; } .or-et-reasons > .or-et-reasons-sub { margin-top: 27.1px !important; padding: 0 30px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-et-reasons-title { max-width: 260px; margin-inline: auto !important; color: var(--wp--preset--color--white); } .or-et-reasons-row.wp-block-columns { margin-top: 25.5px !important; gap: 24.6px !important; } .or-et-reasons-row + .or-et-reasons-row.wp-block-columns { margin-top: 24.6px !important; } .or-et-reason { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); padding: 29.9px 30px 28.1px; } .or-et-reason > * { margin-block: 0 !important; } .or-et-reason-num { width: 85px; height: 85px; margin: 0 auto !important; border-radius: 50%; background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--white); font-size: 37px !important; line-height: 85px !important; } .or-et-reason-h { margin-top: 24.5px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; } .or-et-reason-h + p { margin-top: 26.5px !important; } /* --- speak / FAQ -------------------------------------------------------------------------------- */ .or-et-speak { padding: 39.3px 4px 0 !important; } .or-et-speak-title { text-align: center; color: var(--wp--preset--color--black); } .or-et-speak > .or-et-h + * { margin-top: 30px !important; } .or-et-speak .meetings-iframe-container iframe { display: block; width: 100%; } .or-et-faq { padding: 0 30px 63.4px !important; } .or-et-faq-media { display: none; } .or-et-dbr { display: none; } .or-et-faq .or-et-faq-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-et-faq .or-et-faq-list > .or-et-h { font-size: 27px; line-height: 1.05; margin: 10.5px 0 0; padding-left: 17px; color: var(--wp--preset--color--navy); } .or-et-faq .or-et-faq-list > .or-et-h + .wp-block-details { margin-top: 20px; } .or-et-faq .wp-block-details { margin-block: 0; } .or-et-faq.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-et-faq.or-faq .wp-block-details > :not(summary) { padding: 0 20px 12px 20px; } .or-et-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-et-faq.or-faq .wp-block-details > summary + * { padding-top: 9.7px; } .or-et-faq.or-faq .wp-block-details :is(p, li) { font-size: 16px; line-height: 24px; } /* Phone frame: a normal list, bullets hanging at x60 and text from x74.5. */ .or-et-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 0; padding-left: 44.5px; } /* ----------------------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-et-h, .or-et-title { font-size: 40px; line-height: 48px; } .or-et-btns .wp-block-button__link { padding: 10.5px 26px; } .or-main .or-et-btns > .wp-block-button, .or-main .or-et-btns > .wp-block-button .wp-block-button__link { width: auto; } /* Hero: 433px photo, 980px white card lifted 194px over it; copy centred. */ /* Like the live page: the square stock image cropped to the band from its centre, so narrower screens still show the whole composition; all four corners rounded. */ .or-et-hero-img img { height: 433px; object-fit: cover; object-position: 50% 50%; border-radius: 35px; } .or-et-hero-img.or-only-mobile { display: none; } .or-et-hero-card { position: relative; box-sizing: border-box; width: min(980px, calc(100% - 48px)); margin: -194px auto 0 !important; border-radius: 35px 35px 0 0; background: var(--wp--preset--color--white); padding: 63px 24px 0; } .or-et-title { max-width: 745px; margin-inline: auto !important; color: var(--wp--preset--color--navy); } .or-et-hero-card > .or-et-btns { margin-top: 50.5px; justify-content: center; } .or-et-hero .or-et-btns .wp-block-button__link { min-width: 221px; padding-block: 10px; } .or-et-intro { padding: 53.75px 24px 0 !important; text-align: center; } .or-et-intro > p { max-width: 760px; margin-inline: auto !important; line-height: 22.2px !important; } /* Tiles: magenta 519, sky and photo 501 across x199..1720, 387 tall. */ .or-et-tiles-wrap { padding: 57.75px 24px 0; } .or-et-tiles.wp-block-columns { max-width: 1521px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } /* Three separate rounded tiles side by side (client change: no overlap): magenta x200..719, sky x719..1228, photo x1228..1721, all 436 tall. */ .or-et-tiles.wp-block-columns { align-items: stretch !important; } .or-et-tiles.wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 436px; } .or-et-tiles > .or-et-tile-magenta { position: relative; z-index: 0; display: block; flex-basis: 519px !important; padding: 78.5px 60px 0 106.5px; } .or-et-tiles > .or-et-tile-sky { position: relative; z-index: 2; display: block; flex-basis: 509px !important; padding: 80px 40px 0 105px; } .or-et-tiles > .or-et-tile-photo { position: relative; z-index: 1; flex-basis: 493px !important; } .or-et-tile-quote { max-width: 285px; font-size: 23px; line-height: 30px; letter-spacing: 0; } .or-et-tile-h { max-width: 301px; font-size: 23px; line-height: 30px; letter-spacing: 0; color: var(--wp--preset--color--black); } .or-et-tile-list { margin-top: 22px !important; max-width: 300px; padding-left: 23px; } .or-et-tile-photo img { height: 436px; aspect-ratio: auto; } .or-et-band { margin-top: 0 !important; padding: 64px 24px 63.7px !important; text-align: center; } .or-et-band > p { max-width: 700px; margin-inline: auto !important; line-height: 21.8px !important; } .or-et-band > .or-et-btns { margin-top: 36.1px !important; justify-content: center; } .or-et-band .or-et-btns .wp-block-button__link { padding-block: 9.5px; } .or-et-band .or-et-btns .wp-block-button__link { min-width: 225.5px; } /* What we do: four 358px cards across x204..1717. */ .or-et-wwd { padding: 89.5px 24px 53px !important; text-align: left; } .or-et-wwd > * { max-width: 1520px; margin-inline: auto !important; } .or-et-wwd > .or-et-eyebrow { letter-spacing: 0; color: #001621; } .or-et-wwd > .or-et-wwd-title { margin-inline: auto !important; max-width: 1520px; padding-right: 920px; box-sizing: border-box; } .or-et-wwd-title { margin-top: 39px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 45px; line-height: 52px; color: #001621; } .or-et-wwd > .or-et-wwd-cards.wp-block-columns { max-width: 1520px; } .or-et-wwd-cards.wp-block-columns { margin-top: 37px !important; gap: 20.5px !important; flex-wrap: nowrap !important; } .or-et-wwd-cards > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 340px; } .or-et-wwd-card { padding: 58px 30px 20px 40px; } .or-et-wwd-h { margin-top: 33.5px !important; font-size: 24px; line-height: 22px; letter-spacing: 0; } .or-et-wwd-h + p { margin-top: 33.5px !important; } /* Why choose: navy x110..535, sky x535..1810, 664 tall. */ .or-et-why { padding: 0 110px; } .or-et-why-cols.wp-block-columns { max-width: 1700px; margin: 0 auto; flex-wrap: nowrap !important; min-height: 664px; } .or-et-why-cols > .or-et-why-intro { flex: 0 0 425px !important; padding: 51px 60px 0 90px; border-radius: 35px 0 0 35px; } .or-et-why-title { max-width: none; margin-left: 0 !important; text-align: left; } .or-et-why-intro > p { max-width: 240px; font-size: 15px !important; line-height: 22px !important; letter-spacing: 0; } .or-et-why-img img { aspect-ratio: 1; } .or-et-why-intro > .or-et-h + p { margin-top: 40px !important; } .or-et-why-intro > p + p { margin-top: 22px !important; } .or-et-why-cols > .or-et-why-panel { flex: 1 1 auto !important; border-radius: 0 35px 35px 0; padding: 50px 90px 0; } .or-et-why-cards.wp-block-columns { gap: 180px !important; flex-wrap: nowrap !important; } .or-et-why-cards > .wp-block-column { flex: 0 0 245px !important; } .or-et-why-h { margin-top: 29.5px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 20px; line-height: 28.5px; letter-spacing: 0; max-width: 240px; } .or-et-why-h + p { margin-top: 29px !important; } /* Steps: heading left of centre, 260x280 cards at x1027 / x1314, the right column 168px lower. */ .or-et-steps { padding: 62px 24px 62px !important; } .or-et-steps-cols.wp-block-columns { max-width: 1227px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-et-steps-head { flex: 0 0 680px !important; padding: 221px 0 0; } .or-et-steps-title { max-width: 460px; } .or-et-steps-body { flex: 0 0 547px !important; } .or-et-steps-grid { grid-template-columns: 260px 260px; column-gap: 27px; row-gap: 57px; padding-bottom: 168px; } .or-et-step { display: block; min-height: 280px; padding: 23px 28px 0 20px; } .or-et-step:nth-child(2n) { transform: translateY(168px); } .or-et-step-h { margin-top: 20px !important; font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0; } .or-et-step-icon img { height: auto; } /* The frame places each card's icon, title and copy freely (same cards as the Accounting page). */ .or-et-step-assess { padding: 23px 40px 0 20px; } .or-et-step-assess .or-et-step-h { margin-top: 20px !important; } .or-et-step-assess .or-et-step-h + p { margin-top: 7.5px !important; } .or-et-step-strategize { padding: 25px 34px 0 21.5px; } .or-et-step-strategize .or-et-step-h { margin-top: 17px !important; } .or-et-step-strategize .or-et-step-h + p { margin-top: 6.5px !important; } .or-et-step-execute { padding: 38px 42px 0 20px; } .or-et-step-execute .or-et-step-h { margin-top: 21px !important; } .or-et-step-execute .or-et-step-h + p { margin-top: 19.5px !important; } .or-et-step-optimize { padding: 20px 60px 0 21.5px; } .or-et-step-optimize .or-et-step-h { margin-top: 12px !important; } .or-et-step-optimize .or-et-step-h + p { margin-top: 10px !important; } .or-et-reasons-title { padding: 0; } .or-et-go-title { max-width: 460px; margin-inline: 0 !important; } /* Start growing: grey panel x0..960 and photo x960..1920, both 555 tall with 35px corners. */ .or-et-ready { padding: 0 !important; } .or-et-ready-cols.wp-block-columns { flex-wrap: nowrap !important; min-height: 555px; } .or-et-ready-copy { flex: 0 0 50% !important; border-radius: 35px; background: #fafafa; padding: 43.5px 24px 0 240px; } .or-et-ready-title { max-width: 460px; text-align: left; color: var(--wp--preset--color--navy); } .or-et-ready-sub { margin-top: 34.5px !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; max-width: 440px; color: var(--wp--preset--color--navy); } .or-et-ready-sub + p { margin-top: 30px !important; max-width: 480px; line-height: 21.8px !important; } .or-et-ready-copy > .or-et-btns { margin-top: 71px !important; } .or-et-ready .or-et-btns .wp-block-button__link { min-width: 161.5px; padding-block: 10px; } .or-et-ready-media { flex: 0 0 50% !important; } .or-et-ready-img img { height: 555px; aspect-ratio: auto; border-radius: 35px; } /* Unlock: full-width navy band, 35px corners, 328 tall. */ .or-et-unlock { padding: 62.5px 28.5px 47px 19.5px !important; border-radius: 0; text-align: center; } .or-et-unlock-title { max-width: 680px; margin-inline: auto !important; } .or-et-unlock > .or-et-btns { margin-top: 28.5px !important; justify-content: center; } .or-et-unlock .or-et-btns .wp-block-button__link { min-width: 161px; padding-block: 10px; } /* Why SaaS needs: centred heading and lead, 568x420 cards across x84..1838. */ .or-et-need { padding: 81.5px 24px 67px !important; text-align: center; } .or-et-need-title { color: var(--wp--preset--color--navy); text-align: center; max-width: 760px; margin-inline: auto !important; padding: 0; } .or-et-mbr { display: none; } .or-et-need-lead { max-width: 730px; margin: 16.5px auto 0 !important; padding: 0; } .or-et-need-cards.wp-block-columns { max-width: 1754px; margin: 40.5px auto 0 !important; gap: 25px !important; flex-wrap: nowrap !important; text-align: left; } .or-et-need-cards + .or-et-need-cards.wp-block-columns { margin-top: 25px !important; } .or-et-need-cards > .wp-block-column { flex: 0 0 calc((100% - 50px) / 3) !important; min-width: 0; min-height: 420px; } /* Copy sits in the vertical middle of each card, as in the frame; the first column starts at x208. */ .or-et-need-card { display: flex; flex-direction: column; justify-content: center; padding: 0 40px 0 134px; } .or-et-need-card:first-child { padding-left: 125.5px; } .or-et-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; max-width: 310px; } .or-et-need-h + p { margin-top: 32px !important; max-width: 316px; } .or-et-need-cards:first-of-type > .or-et-need-card:nth-child(3) p { max-width: 297px; } .or-et-need-cards:last-of-type > .or-et-need-card:first-child p { max-width: 325px; } .or-et-need-cards:last-of-type > .or-et-need-card:nth-child(2) p { max-width: 307px; } .or-et-need-cards:first-of-type > .or-et-need-card:first-child p { max-width: 325px; } .or-et-need-cards:first-of-type > .or-et-need-card:nth-child(2) p { max-width: 299px; } /* Services: photo x5..728 (814 tall, 35px corners) right under the navy band, grey panel x728..1917, copy from x866. The list gaps vary in the frame; each is set as drawn. */ .or-et-team { padding: 0 3px 0 5px; } .or-et-team-cols.wp-block-columns { flex-wrap: nowrap !important; gap: 0 !important; } .or-et-team-media { display: block; flex: 0 0 723px !important; } .or-et-team-img img { height: 814px; object-fit: cover; border-radius: 35px; } .or-et-team-copy { flex: 1 1 auto !important; padding: 41.5px 24px 0 138px; background: #fafafa; } .or-et-team-copy .or-at-more-toggle { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; } .or-et-team-copy .or-at-more-toggle { text-decoration: none; color: var(--wp--preset--color--navy); } .or-et-team-copy > * { max-width: 560px; } .or-et-team-title { max-width: 700px !important; text-align: left; color: var(--wp--preset--color--black); } .or-et-team-copy > .or-et-team-title + .or-et-more { margin-top: 54.5px !important; } .or-et-team-copy > .or-at-more-toggle + .or-et-more { margin-top: 44px !important; } .or-et-team-copy > .or-at-more-toggle + p.or-et-more:nth-of-type(3) { margin-top: 34px !important; } .or-et-team-copy > .or-at-more-toggle + p.or-et-more:nth-of-type(4) { margin-top: 46px !important; } .or-et-team-copy > .or-at-more-toggle + p.or-et-more:nth-of-type(5) { margin-top: 47px !important; } .or-et-team .or-et-btns .wp-block-button__link { min-width: 228.5px; padding-block: 10px; } .or-et-team-copy > .or-et-btns { margin-top: 45px !important; } /* Cost: centred heading, sky panel x83..1837, 508 tall. */ /* Cost: centred heading, sky panel x83..1837, 508 tall; columns from x348 / x893 / x1273. */ .or-et-cost { padding: 86.5px 24px 0 !important; } .or-et-cost-title { max-width: 600px; margin: 0 auto !important; padding: 0; text-align: center; } .or-et-cost-panel { max-width: 1754px !important; min-height: 508px; box-sizing: border-box; margin: 69.5px auto 0 !important; padding: 117px 24px 0 265px; } .or-et-cost-cols.wp-block-columns { gap: 0 !important; flex-wrap: nowrap !important; } .or-et-cost-head { flex: 0 0 545px !important; } .or-et-cost-h { max-width: 470px; font-size: 40px; line-height: 48px; } .or-et-cost-cols > .or-et-cost-head { margin-bottom: 0; } .or-et-cost-inhouse { flex: 0 0 380px !important; padding-top: 0; } .or-et-cost-list { max-width: 290px; } .or-et-cost-inhouse .or-et-cost-list { max-width: 292.5px; } .or-et-cost-rawr { flex: 0 0 330px !important; padding-top: 0; } .or-et-cost-label { max-width: 300px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px !important; line-height: 28px !important; letter-spacing: 0; } .or-et-cost-list { margin-top: 27.5px !important; padding-left: 22.5px; } .or-et-cost-list li { font-size: 15px !important; line-height: 21px !important; } /* Reasons: heading and subheading on white, then a full-width navy band (8309..9372) holding 320px white cards at x470 / 799 / 1130. */ .or-et-reasons { margin-top: 0 !important; padding: 93.5px 0 0 !important; background: none; color: var(--wp--preset--color--navy); } .or-et-reasons-title { max-width: 780px; margin-inline: auto !important; padding: 0; color: var(--wp--preset--color--navy); } .or-et-reasons > .or-et-reasons-sub { max-width: none; margin: 56.5px auto 0 !important; padding: 0 24px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--wp--preset--color--navy); } .or-et-reasons > .or-et-reasons-band { max-width: none !important; margin: 86px 0 0 !important; padding: 91px 24px 67px; background: var(--wp--preset--color--navy); } .or-et-reasons-row.wp-block-columns { max-width: 980px; margin: 0 auto !important; gap: 10px !important; flex-wrap: nowrap !important; } .or-et-reasons-row + .or-et-reasons-row.wp-block-columns { margin-top: 82px !important; } .or-et-reasons-row > .wp-block-column { flex: 1 1 0; min-width: 0; } .or-et-reason { min-height: 425px; padding: 0 20px 40px; margin-top: 26px; } .or-et-reasons-row + .or-et-reasons-row > .or-et-reason { min-height: 396px; padding-bottom: 25px; } .or-et-reason-num { width: 84px; height: 84px; margin: -26px auto 0 !important; font-size: 36px !important; line-height: 84px !important; } .or-et-reason-h { max-width: 265px; margin: 31px auto 0 !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; } .or-et-reasons-row:first-child > .or-et-reason:nth-child(2) .or-et-reason-h { max-width: 275px; } .or-et-reasons-row:last-child > .or-et-reason:nth-child(2) .or-et-reason-h { max-width: 255px; } .or-et-reason-h + p { max-width: 267px; margin: 22px auto 0 !important; } .or-et-reasons-row:first-child > .or-et-reason:nth-child(2) p { max-width: 238px; } .or-et-reasons-row:first-child > .or-et-reason:nth-child(3) p { max-width: 256px; } .or-et-reasons-row:last-child > .or-et-reason:nth-child(1) p { max-width: 249px; } .or-et-reasons-row:last-child > .or-et-reason:nth-child(2) p { max-width: 232px; } .or-et-reasons-row:last-child > .or-et-reason:nth-child(3) p { max-width: 223px; } /* Ready to elevate: navy band 544 tall, heading x494, copy x1014. */ .or-et-go { padding: 171.5px 20px 172px 28px !important; text-align: left; } .or-et-go-cols.wp-block-columns { max-width: 940px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } .or-et-go-head { flex: 0 0 520px !important; } .or-et-go-title { max-width: 410px; } .or-et-go-copy { flex: 0 0 420px !important; padding-top: 1px; } .or-et-go-copy > p { max-width: 418px; line-height: 21.75px !important; } .or-et-go-copy > .or-et-btns { margin-top: 45.75px !important; } .or-et-go .or-et-btns .wp-block-button__link { min-width: 174.5px; padding-block: 10px; } .or-et-speak { padding: 97.5px 24px 0 !important; } .or-et-speak-title { color: var(--wp--preset--color--navy); } .or-et-speak > .or-et-h + * { margin-top: 60px !important; max-width: 855px; margin-inline: auto !important; } .or-et-faq { padding: 16px 24px 100px !important; } .or-et-dbr { display: inline; } .or-et-faq .or-et-faq-cols.wp-block-columns { max-width: 953px; margin: 0 auto; gap: 53px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-et-faq-media { display: block; flex: 0 0 350px !important; } .or-et-faq-img-top img { height: 632px; object-fit: cover; border-radius: 30px; } .or-et-faq-img-bottom { margin-top: 42px !important; } .or-et-faq-img-bottom img { height: 374px; object-fit: cover; border-radius: 30px; } .or-et-faq-cols > .or-et-faq-list.wp-block-column { flex: 1 1 550px !important; min-width: 0; } .or-et-faq .or-et-faq-list > .or-et-h { font-size: 40px; line-height: 48px; margin-top: -5px; padding-left: 0; } .or-et-faq .or-et-faq-list > .or-et-h + .wp-block-details { margin-top: 19.5px; } .or-et-faq.or-faq summary { display: flex; align-items: center; min-height: 93.5px; padding: 18px 36px 18px 10px; font-size: 20px; line-height: 28.5px; } .or-et-faq.or-faq details[open] > summary { padding-top: 11.2px; padding-bottom: 25px; } .or-et-faq.or-faq summary::after { top: 32px; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } .or-et-faq.or-faq .wp-block-details > :not(summary) { padding: 0 40px 20px 10px; } .or-et-faq.or-faq .wp-block-details > summary + * { padding-top: 0; } .or-et-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-et-faq.or-faq details[open] > :last-child { padding-bottom: 19.7px; } .or-et-faq.or-faq .wp-block-details > p { max-width: 470px; } .or-et-faq.or-faq .wp-block-details :is(p, li) { font-size: 15px; line-height: 22px; } .or-et-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 22px; padding-left: 35.5px; list-style: disc; } .or-et-faq.or-faq .wp-block-details > ul.wp-block-list > li::before { content: none; } } /* Between the phone layout and the 1920 frame: the same desktop design, with the fixed frame widths allowed to shrink and the widest rows stacked, so nothing runs off the screen. */ @media (min-width: 782px) and (max-width: 1919px) { .or-et-wwd > .or-et-wwd-title { padding-right: max(0px, calc(100% - 600px)); } .or-et-why { padding: 0 24px; } .or-et-why-cols > .or-et-why-intro { flex: 0 1 425px !important; min-width: 0; padding-left: clamp(40px, 4.7vw, 90px); } .or-et-why-cols > .or-et-why-panel { min-width: 0; padding: 50px clamp(30px, 4.7vw, 90px) 40px; } .or-et-why-cards.wp-block-columns { gap: clamp(30px, 9.4vw - 100px, 180px) !important; } .or-et-why-cards > .wp-block-column { flex: 0 1 245px !important; min-width: 0; } .or-et-ready-cols.wp-block-columns { height: auto; min-height: 488px; } .or-et-ready-copy { flex: 1 1 830px !important; min-width: 0; padding: 40px 40px 40px clamp(40px, 10.4vw, 200px); } .or-et-ready-media { flex: 1 1 890px !important; min-width: 0; } .or-et-ready-media { position: relative; } .or-et-ready-media > .or-et-ready-img { position: absolute; inset: 0; margin: 0 !important; } .or-et-ready-img img { width: 100%; height: 100%; object-fit: cover; } .or-et-team { padding-left: clamp(24px, 4.4vw, 84px); } .or-et-team-media { flex: 0 1 652px !important; min-width: 0; } .or-et-team-copy { min-width: 0; padding-left: clamp(40px, 9.3vw, 178px); } .or-et-cost-panel { height: auto; min-height: 508px; padding: 85px 40px 60px clamp(40px, 15.1vw, 290px); } .or-et-cost-head { flex: 0 1 476px !important; min-width: 0; padding-right: 24px; } .or-et-cost-inhouse { flex: 0 1 390px !important; min-width: 0; padding-right: 24px; } .or-et-cost-rawr { flex: 0 1 300px !important; min-width: 0; } .or-et-need-card { padding: 40px clamp(30px, 3.1vw, 60px) 40px clamp(30px, 7vw, 134px); } .or-et-need-cards:first-of-type > .or-et-need-card:first-child { padding-left: clamp(30px, 6.6vw, 126px); } .or-et-tiles > .or-et-tile-magenta { padding-left: clamp(40px, 5.5vw, 106px); padding-right: 40px; } .or-et-wwd-cards > .wp-block-column { height: auto !important; min-height: 340px; } } @media (min-width: 782px) and (max-width: 1279px) { .or-et-steps-cols.wp-block-columns { flex-wrap: wrap !important; justify-content: center; } .or-et-steps-head { flex: 0 0 100% !important; padding: 0; text-align: center; } .or-et-steps-title { margin-inline: auto !important; } .or-et-steps-body { flex: 0 0 547px !important; margin-top: 48px !important; } } @media (min-width: 782px) and (max-width: 1199px) { .or-et-why-cols.wp-block-columns { flex-wrap: wrap !important; } .or-et-why-cols > .or-et-why-intro { flex: 0 0 100% !important; padding: 51px 40px 40px; border-radius: 35px 35px 0 0; } .or-et-why-intro > p { max-width: 640px; } .or-et-why-cols > .or-et-why-panel { flex: 0 0 100% !important; padding: 40px; border-radius: 0 0 35px 35px; } .or-et-why-cards.wp-block-columns { justify-content: space-between; gap: 30px !important; } .or-et-cost-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; } .or-et-cost-head { flex: 0 0 100% !important; } .or-et-cost-inhouse, .or-et-cost-rawr { flex: 1 1 0 !important; } .or-et-cost-panel { padding-left: 60px; } .or-et-go-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; max-width: 640px; } .or-et-go-head, .or-et-go-copy { flex: 0 0 100% !important; } .or-et-need-cards > .wp-block-column { height: auto; min-height: 360px; } .or-et-need-cards:first-of-type > .or-et-need-card:first-child, .or-et-need-card { padding: 40px 30px; } } @media (min-width: 782px) and (max-width: 1023px) { .or-et-ready-cols.wp-block-columns { flex-wrap: wrap !important; } .or-et-ready-copy, .or-et-ready-media { flex: 0 0 100% !important; } .or-et-ready-copy { padding: 48px 40px; } .or-et-ready-media { height: 420px; } .or-et-ready-img img { border-radius: 0 0 35px 35px; } .or-et-team-media { display: none; } .or-et-team { padding-left: 0; } .or-et-team-copy { padding: 60px 40px; } .or-et-team-copy > * { max-width: 640px; } .or-et-wwd-cards.wp-block-columns { flex-wrap: wrap !important; row-gap: 27px !important; } .or-et-wwd-cards > .wp-block-column { flex: 0 0 calc(50% - 13.5px) !important; min-height: 280px; } } @media (min-width: 782px) and (max-width: 959px) { .or-et-need-cards.wp-block-columns { flex-wrap: wrap !important; justify-content: center; row-gap: 25px !important; } .or-et-need-cards > .wp-block-column { flex: 0 0 calc(50% - 12.5px) !important; min-height: 300px; } } @media (min-width: 782px) and (max-width: 1919px) { .or-et-need-cards > .or-et-need-card, .or-et-need-cards > .or-et-need-card:first-child { padding: 40px clamp(24px, 3.1vw, 40px) 40px clamp(24px, 6.5vw, 125.5px); } } /* ===== page 16: INDUSTRIES | Fintech ======================================== * No frames for this page: Harps asked for the SaaS / Healthcare / EdTech template, so this is the * EdTech section (page 15) renamed, without the rules fitted to EdTech's exact wording, plus the * Fintech additions at the end (sky-tile title, the Accounting "market is evolving" section). * Notes: fintech-design.md. */ :is(.or-ft-hero, .or-ft-intro, .or-ft-tiles-wrap, .or-ft-band, .or-ft-wwd, .or-ft-why, .or-ft-steps, .or-ft-ready, .or-ft-need, .or-ft-team, .or-ft-cost, .or-ft-reasons, .or-ft-go, .or-ft-unlock, .or-ft-speak, .or-ft-faq) { margin-block: 0 !important; } :is(.or-ft-hero, .or-ft-intro, .or-ft-tiles-wrap, .or-ft-band, .or-ft-wwd, .or-ft-why, .or-ft-steps, .or-ft-ready, .or-ft-need, .or-ft-team, .or-ft-cost, .or-ft-reasons, .or-ft-go, .or-ft-unlock, .or-ft-faq) :is(p, li) { font-size: 15px; line-height: 22px; } :is(.or-ft-hero, .or-ft-intro, .or-ft-tiles-wrap, .or-ft-band, .or-ft-wwd, .or-ft-why, .or-ft-steps, .or-ft-ready, .or-ft-need, .or-ft-team, .or-ft-cost, .or-ft-reasons, .or-ft-go, .or-ft-unlock, .or-ft-speak, .or-ft-faq) :is(h1, h2, h3, p, ul, figure, hr, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-ft-tiles-wrap, .or-ft-wwd, .or-ft-why, .or-ft-steps, .or-ft-ready, .or-ft-need, .or-ft-team, .or-ft-cost, .or-ft-reasons, .or-ft-go, .or-ft-unlock, .or-ft-faq) .wp-block-column { box-sizing: border-box; } .or-ft-h, .or-ft-title { font-size: 25px; line-height: 30px; } .or-ft-btns .wp-block-button__link { padding: 4.5px 21px; box-sizing: border-box; font-size: 16px; } :where(.or-ft-hero, .or-ft-tiles-wrap, .or-ft-why, .or-ft-ready, .or-ft-team, .or-ft-faq) figure img { display: block; width: 100%; height: auto; } /* --- hero ------------------------------------------------------------------- */ .or-ft-hero { padding: 0; } .or-ft-hero-img img { aspect-ratio: 320 / 316; object-fit: cover; border-radius: 35px; } .or-ft-hero-card { margin-top: 0 !important; padding: 28.4px 30px 0; text-align: center; } .or-ft-title { color: var(--wp--preset--color--black); } .or-ft-hero-card > .or-ft-btns { margin-top: 24.7px; } .or-ft-intro { padding: 27.8px 35px 0 30px !important; } /* --- three tiles -------------------------------------------------------------- */ .or-ft-tiles-wrap { padding: 25.4px 0 0; } .or-ft-tiles.wp-block-columns { margin: 0; gap: 30.8px !important; } .or-ft-tile { box-sizing: border-box; border-radius: 35px; overflow: hidden; } /* Phones: the two text tiles are 320px squares with their copy in the middle. */ @media (max-width: 781px) { .or-ft-wwd > .or-ft-wwd-title { max-width: 260px; margin-inline: auto !important; } /* The phone frame runs the three result lines together as one paragraph. */ /* The phone frame keeps the service lists collapsed too: three lines and a bold toggle. */ .or-ft-more.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* The frame shows each list's title and subtitle; the first title takes two lines. */ .or-ft-team-copy .or-at-more-toggle { display: block; margin: 0 !important; padding: 0; border: 0; background: none; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 15px; line-height: 22px; color: var(--wp--preset--color--navy); cursor: pointer; } } .or-ft-tile > * { margin-block: 0 !important; } .or-ft-tile-magenta { padding: 26.4px 30px 27.4px; background: var(--wp--preset--color--magenta); } .or-ft-tile-quote { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-ft-tile-sky { padding: 27px 30px 27px; background: var(--wp--preset--color--sky-deep); } .or-ft-tile-h { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 25.9px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-ft-tile-list { margin-top: 20.3px !important; padding-left: 22.9px; } .or-ft-tile-photo img { aspect-ratio: 320 / 263; object-fit: cover; } .or-ft-band { padding: 50.3px 30px 49.8px !important; margin-top: 48px !important; } .or-ft-band > .or-ft-btns { margin-top: 28.8px !important; } /* --- what we do -------------------------------------------------------------- */ .or-ft-wwd { padding: 47.8px 14.5px 44px !important; text-align: center; } .or-ft-wwd > .or-ft-eyebrow { font-size: 18px; line-height: 20px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-ft-wwd-title { margin-top: 29px !important; color: var(--wp--preset--color--black); } .or-ft-wwd-cards.wp-block-columns { margin-top: 24.1px !important; gap: 24.4px !important; text-align: left; } .or-ft-wwd-card { box-sizing: border-box; border: 1px solid var(--wp--preset--color--black); border-radius: 35px; padding: 25px 25px 30px 30px; } .or-ft-wwd-card > * { margin-block: 0 !important; } .or-ft-wwd-icon img { width: 36.5px !important; } .or-ft-wwd-h { margin-top: 27.6px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: #001621; } .or-ft-wwd-card p { color: var(--wp--preset--color--black); } .or-ft-wwd-h + p { margin-top: 22.6px !important; } /* --- why choose ---------------------------------------------------------------- */ .or-ft-why { padding: 0; } .or-ft-why-cols.wp-block-columns { margin: 0; gap: 3px !important; } .or-ft-why-intro { padding: 46.5px 30px 45.4px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-ft-why-intro > * { margin-block: 0 !important; } .or-ft-why-title { max-width: none; margin-inline: 0 !important; text-align: left; color: var(--wp--preset--color--magenta); } .or-ft-why-intro > p { font-size: 18px !important; line-height: 26.6px !important; letter-spacing: 0.05em; } .or-ft-why-intro > .or-ft-h + p { margin-top: 18.8px !important; } .or-ft-why-intro > p + p { margin-top: 28.3px !important; } .or-ft-why-panel { padding: 46.8px 30px 46.1px; background: var(--wp--preset--color--sky-deep); border-radius: 35px; } .or-ft-why-cards.wp-block-columns { margin: 0; gap: 38.9px !important; } .or-ft-why-card > * { margin-block: 0 !important; } .or-ft-why-img img { aspect-ratio: 1; object-fit: cover; border-radius: 35px; } .or-ft-why-h { margin-top: 20px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 24.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--black); } .or-ft-why-h + p { margin-top: 20.9px !important; } /* Colours read off the frames; several differ between the phone and desktop frames. */ :is(.or-ft-why-card, .or-ft-step) p { color: var(--wp--preset--color--black); } /* --- four steps ---------------------------------------------------------------- */ .or-ft-steps { padding: 92.9px 0 39.7px !important; } .or-ft-steps-cols.wp-block-columns { margin: 0; gap: 24.6px !important; } .or-ft-steps-head { padding: 0 30px; } .or-ft-steps-title { color: var(--wp--preset--color--black); } .or-ft-steps-grid { display: grid; gap: 24.4px; } .or-ft-steps-grid > .or-ft-step { margin: 0 !important; } /* Phones: icon and title side by side (title from x105), copy below. */ .or-ft-step { display: grid; grid-template-columns: 75px 1fr; align-items: center; box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky-deep); padding: 30px 30px 29px; } .or-ft-step > * { margin-block: 0 !important; } .or-ft-step-icon img { height: auto; } .or-ft-step-assess .or-ft-step-icon img { width: 46px !important; } .or-ft-step-strategize .or-ft-step-icon img { width: 51px !important; } .or-ft-step-execute .or-ft-step-icon img { width: 53px !important; } .or-ft-step-optimize .or-ft-step-icon img { width: 29px !important; } .or-ft-step-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: 0.05em; color: var(--wp--preset--color--magenta); } .or-ft-step-h + p { grid-column: 1 / -1; margin-top: 16.5px !important; } /* --- ready for marketing ------------------------------------------------------------------ */ .or-ft-ready { padding: 0 0 45px; } .or-ft-ready-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-ft-ready-copy { padding: 50.4px 30px 24px; } .or-ft-ready-copy > * { margin-block: 0 !important; } .or-ft-ready-title { text-align: center; color: var(--wp--preset--color--black); } .or-ft-ready-sub { margin-top: 26.3px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-ft-ready-sub + p { margin-top: 26.9px !important; } .or-ft-ready-copy > .or-ft-btns { margin-top: 24px !important; } .or-ft-ready-img img { aspect-ratio: 1; object-fit: cover; border-radius: 35px; } /* --- why SaaS companies need fractional teams --------------------------------------------- */ .or-ft-need { padding: 47.6px 0 45px !important; } .or-ft-need > * { margin-block: 0 !important; } .or-ft-need-title, .or-ft-need-lead { padding: 0 30px; } .or-ft-need-title { max-width: 250px; margin-inline: auto !important; padding: 0 !important; text-align: center; color: var(--wp--preset--color--black); } .or-ft-need-lead { margin-top: 25px !important; } .or-ft-need-cards.wp-block-columns { margin: 25.2px 0 0 !important; gap: 24.7px !important; } .or-ft-need-cards + .or-ft-need-cards.wp-block-columns { margin-top: 24.7px !important; } .or-ft-need-card { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky-deep); padding: 30px 30px 29px; } .or-ft-need-card > * { margin-block: 0 !important; } .or-ft-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 600; font-size: 15px; line-height: 22.4px; color: var(--wp--preset--color--navy); } .or-ft-need-h + p { margin-top: 18.8px !important; } /* --- expert leadership + unlock band ------------------------------------------------------ */ .or-ft-unlock { padding: 50px 30px 49.9px !important; text-align: center; } .or-ft-unlock-title { max-width: 260px; margin-inline: auto !important; } .or-ft-unlock > .or-ft-btns { margin-top: 30px !important; } .or-ft-team-copy > .or-ft-team-sub { margin-top: 40px !important; } .or-ft-team-sub { margin-top: 25px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } /* --- get started (magenta) ------------------------------------------------------------------ */ .or-ft-go { padding: 48.9px 30px 48.2px !important; text-align: center; } .or-ft-go-copy { text-align: left; } .or-ft-go-title { max-width: 260px; margin-inline: auto !important; } .or-ft-go-cols.wp-block-columns { margin: 0; gap: 31.3px !important; } .or-ft-go-cols .wp-block-column > * { margin-block: 0 !important; } .or-ft-go-copy > .or-ft-btns { margin-top: 29px !important; } .or-ft-btn-navy .wp-block-button__link { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-ft-btn-navy .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); } /* --- services: collapsible lists ---------------------------------------------------------------------- */ .or-ft-team { padding: 0 0 46.7px; } .or-ft-team-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-ft-team-copy { padding: 39.6px 30px 0; } .or-ft-team-copy > * { margin-block: 0 !important; } .or-ft-team-title { text-align: center; color: var(--wp--preset--color--black); } .or-ft-team-copy > .or-ft-team-sub + .or-ft-more { margin-top: 40.4px !important; } .or-ft-team-copy > .or-at-more-toggle + .or-ft-more, .or-ft-team-copy > .or-ft-more + .or-ft-more { margin-top: 23px !important; } .or-ft-team-copy > .or-ft-btns { margin-top: 39.6px !important; } .or-ft-team-copy > .or-ft-team-title + .or-ft-more { margin-top: 42.4px !important; } /* --- cost comparison ------------------------------------------------------------------------ */ .or-ft-cost { padding: 53px 0 0 !important; } .or-ft-cost-title { max-width: 240px; margin-inline: auto !important; text-align: center; color: var(--wp--preset--color--navy); } .or-ft-cost-panel { margin-top: 25px !important; border-radius: 35px; background: #def1ff; padding: 26.6px 30px 25.3px; } .or-ft-cost-cols.wp-block-columns { margin: 0; gap: 24.8px !important; } .or-ft-cost-cols > .or-ft-cost-head { margin-bottom: 5.1px; } .or-ft-cost-col > * { margin-block: 0 !important; } .or-ft-cost-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28.3px; color: var(--wp--preset--color--navy); } .or-ft-cost-label { font-size: 18px !important; line-height: 25.9px !important; letter-spacing: 0.05em; } .or-ft-cost-list { margin-top: 11.6px !important; padding-left: 24.1px; } /* --- why choose One Rawr for SaaS ------------------------------------------------------------ */ .or-ft-reasons { margin-top: 53.5px !important; padding: 50px 0 63.4px !important; text-align: center; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-ft-reasons > * { margin-block: 0 !important; } .or-ft-reasons > .or-ft-reasons-sub { margin-top: 27.1px !important; padding: 0 30px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-ft-reasons-title { max-width: 260px; margin-inline: auto !important; color: var(--wp--preset--color--white); } .or-ft-reasons-row.wp-block-columns { margin-top: 25.5px !important; gap: 24.6px !important; } .or-ft-reasons-row + .or-ft-reasons-row.wp-block-columns { margin-top: 24.6px !important; } .or-ft-reason { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); padding: 29.9px 30px 28.1px; } .or-ft-reason > * { margin-block: 0 !important; } .or-ft-reason-num { width: 85px; height: 85px; margin: 0 auto !important; border-radius: 50%; background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--white); font-size: 37px !important; line-height: 85px !important; } .or-ft-reason-h { margin-top: 24.5px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; } .or-ft-reason-h + p { margin-top: 26.5px !important; } /* --- speak / FAQ -------------------------------------------------------------------------------- */ .or-ft-speak { padding: 39.3px 4px 0 !important; } .or-ft-speak-title { text-align: center; color: var(--wp--preset--color--black); } .or-ft-speak > .or-ft-h + * { margin-top: 30px !important; } .or-ft-speak .meetings-iframe-container iframe { display: block; width: 100%; } .or-ft-faq { padding: 0 30px 63.4px !important; } .or-ft-faq-media { display: none; } .or-ft-dbr { display: none; } .or-ft-faq .or-ft-faq-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-ft-faq .or-ft-faq-list > .or-ft-h { font-size: 27px; line-height: 1.05; margin: 10.5px 0 0; padding-left: 17px; color: var(--wp--preset--color--navy); } .or-ft-faq .or-ft-faq-list > .or-ft-h + .wp-block-details { margin-top: 20px; } .or-ft-faq .wp-block-details { margin-block: 0; } .or-ft-faq.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-ft-faq.or-faq .wp-block-details > :not(summary) { padding: 0 20px 12px 20px; } .or-ft-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-ft-faq.or-faq .wp-block-details > summary + * { padding-top: 9.7px; } .or-ft-faq.or-faq .wp-block-details :is(p, li) { font-size: 16px; line-height: 24px; } /* Phone frame: a normal list, bullets hanging at x60 and text from x74.5. */ .or-ft-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 0; padding-left: 44.5px; } /* ----------------------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-ft-h, .or-ft-title { font-size: 40px; line-height: 48px; } .or-ft-btns .wp-block-button__link { padding: 10.5px 26px; } .or-main .or-ft-btns > .wp-block-button, .or-main .or-ft-btns > .wp-block-button .wp-block-button__link { width: auto; } /* Hero: 433px photo, 980px white card lifted 194px over it; copy centred. */ /* Like the live page: the square stock image cropped to the band from its centre, so narrower screens still show the whole composition; all four corners rounded. */ .or-ft-hero-img img { height: 433px; object-fit: cover; object-position: 50% 50%; border-radius: 35px; } .or-ft-hero-img.or-only-mobile { display: none; } .or-ft-hero-card { position: relative; box-sizing: border-box; width: min(980px, calc(100% - 48px)); margin: -194px auto 0 !important; border-radius: 35px 35px 0 0; background: var(--wp--preset--color--white); padding: 63px 24px 0; } .or-ft-title { max-width: 745px; margin-inline: auto !important; color: var(--wp--preset--color--navy); } .or-ft-hero-card > .or-ft-btns { margin-top: 50.5px; justify-content: center; } .or-ft-hero .or-ft-btns .wp-block-button__link { min-width: 221px; padding-block: 10px; } .or-ft-intro { padding: 53.75px 24px 0 !important; text-align: center; } .or-ft-intro > p { max-width: 760px; margin-inline: auto !important; line-height: 22.2px !important; } /* Tiles: magenta 519, sky and photo 501 across x199..1720, 387 tall. */ .or-ft-tiles-wrap { padding: 57.75px 24px 0; } .or-ft-tiles.wp-block-columns { max-width: 1521px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } /* Three separate rounded tiles side by side (client change: no overlap): magenta x200..719, sky x719..1228, photo x1228..1721, all 436 tall. */ .or-ft-tiles.wp-block-columns { align-items: stretch !important; } .or-ft-tiles.wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 436px; } .or-ft-tiles > .or-ft-tile-magenta { position: relative; z-index: 0; display: block; flex-basis: 519px !important; padding: 78.5px 60px 0 106.5px; } .or-ft-tiles > .or-ft-tile-sky { position: relative; z-index: 2; display: block; flex-basis: 509px !important; padding: 80px 40px 0 105px; } .or-ft-tiles > .or-ft-tile-photo { position: relative; z-index: 1; flex-basis: 493px !important; } .or-ft-tile-quote { max-width: 285px; font-size: 23px; line-height: 30px; letter-spacing: 0; } .or-ft-tile-h { max-width: 301px; font-size: 23px; line-height: 30px; letter-spacing: 0; color: var(--wp--preset--color--black); } .or-ft-tile-list { margin-top: 22px !important; max-width: 300px; padding-left: 23px; } .or-ft-tile-photo img { height: 436px; aspect-ratio: auto; } .or-ft-band { margin-top: 0 !important; padding: 64px 24px 63.7px !important; text-align: center; } .or-ft-band > p { max-width: 700px; margin-inline: auto !important; line-height: 21.8px !important; } .or-ft-band > .or-ft-btns { margin-top: 36.1px !important; justify-content: center; } .or-ft-band .or-ft-btns .wp-block-button__link { padding-block: 9.5px; } .or-ft-band .or-ft-btns .wp-block-button__link { min-width: 225.5px; } /* What we do: four 358px cards across x204..1717. */ .or-ft-wwd { padding: 89.5px 24px 53px !important; text-align: left; } .or-ft-wwd > * { max-width: 1520px; margin-inline: auto !important; } .or-ft-wwd > .or-ft-eyebrow { letter-spacing: 0; color: #001621; } .or-ft-wwd > .or-ft-wwd-title { margin-inline: auto !important; max-width: 1520px; padding-right: 920px; box-sizing: border-box; } .or-ft-wwd-title { margin-top: 39px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 45px; line-height: 52px; color: #001621; } .or-ft-wwd > .or-ft-wwd-cards.wp-block-columns { max-width: 1520px; } .or-ft-wwd-cards.wp-block-columns { margin-top: 37px !important; gap: 20.5px !important; flex-wrap: nowrap !important; } .or-ft-wwd-cards > .wp-block-column { flex: 1 1 0; min-width: 0; min-height: 340px; } .or-ft-wwd-card { padding: 58px 30px 20px 40px; } .or-ft-wwd-h { margin-top: 33.5px !important; font-size: 24px; line-height: 22px; letter-spacing: 0; } .or-ft-wwd-h + p { margin-top: 33.5px !important; } /* Why choose: navy x110..535, sky x535..1810, 664 tall. */ .or-ft-why { padding: 0 110px; } .or-ft-why-cols.wp-block-columns { max-width: 1700px; margin: 0 auto; flex-wrap: nowrap !important; min-height: 664px; } .or-ft-why-cols > .or-ft-why-intro { flex: 0 0 425px !important; padding: 51px 60px 0 90px; border-radius: 35px 0 0 35px; } .or-ft-why-title { max-width: none; margin-left: 0 !important; text-align: left; } .or-ft-why-intro > p { max-width: 240px; font-size: 15px !important; line-height: 22px !important; letter-spacing: 0; } .or-ft-why-img img { aspect-ratio: 1; } .or-ft-why-intro > .or-ft-h + p { margin-top: 40px !important; } .or-ft-why-intro > p + p { margin-top: 22px !important; } .or-ft-why-cols > .or-ft-why-panel { flex: 1 1 auto !important; border-radius: 0 35px 35px 0; padding: 50px 90px 0; } .or-ft-why-cards.wp-block-columns { gap: 180px !important; flex-wrap: nowrap !important; } .or-ft-why-cards > .wp-block-column { flex: 0 0 245px !important; } .or-ft-why-h { margin-top: 29.5px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 20px; line-height: 28.5px; letter-spacing: 0; max-width: 240px; } .or-ft-why-h + p { margin-top: 29px !important; } /* Steps: heading left of centre, 260x280 cards at x1027 / x1314, the right column 168px lower. */ .or-ft-steps { padding: 62px 24px 62px !important; } .or-ft-steps-cols.wp-block-columns { max-width: 1227px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-ft-steps-head { flex: 0 0 680px !important; padding: 221px 0 0; } .or-ft-steps-title { max-width: 460px; } .or-ft-steps-body { flex: 0 0 547px !important; } .or-ft-steps-grid { grid-template-columns: 260px 260px; column-gap: 27px; row-gap: 57px; padding-bottom: 168px; } .or-ft-step { display: block; min-height: 280px; padding: 23px 28px 0 20px; } .or-ft-step:nth-child(2n) { transform: translateY(168px); } .or-ft-step-h { margin-top: 20px !important; font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0; } .or-ft-step-icon img { height: auto; } /* The frame places each card's icon, title and copy freely (same cards as the Accounting page). */ .or-ft-step-assess { padding: 23px 40px 0 20px; } .or-ft-step-assess .or-ft-step-h { margin-top: 20px !important; } .or-ft-step-assess .or-ft-step-h + p { margin-top: 7.5px !important; } .or-ft-step-strategize { padding: 25px 34px 0 21.5px; } .or-ft-step-strategize .or-ft-step-h { margin-top: 17px !important; } .or-ft-step-strategize .or-ft-step-h + p { margin-top: 6.5px !important; } .or-ft-step-execute { padding: 38px 42px 0 20px; } .or-ft-step-execute .or-ft-step-h { margin-top: 21px !important; } .or-ft-step-execute .or-ft-step-h + p { margin-top: 19.5px !important; } .or-ft-step-optimize { padding: 20px 60px 0 21.5px; } .or-ft-step-optimize .or-ft-step-h { margin-top: 12px !important; } .or-ft-step-optimize .or-ft-step-h + p { margin-top: 10px !important; } .or-ft-reasons-title { padding: 0; } .or-ft-go-title { max-width: 460px; margin-inline: 0 !important; } /* Start growing: grey panel x0..960 and photo x960..1920, both 555 tall with 35px corners. */ .or-ft-ready { padding: 0 !important; } .or-ft-ready-cols.wp-block-columns { flex-wrap: nowrap !important; min-height: 555px; } .or-ft-ready-copy { flex: 0 0 50% !important; border-radius: 35px; background: #fafafa; padding: 43.5px 24px 0 240px; } .or-ft-ready-title { max-width: 460px; text-align: left; color: var(--wp--preset--color--navy); } .or-ft-ready-sub { margin-top: 34.5px !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; max-width: 440px; color: var(--wp--preset--color--navy); } .or-ft-ready-sub + p { margin-top: 30px !important; max-width: 480px; line-height: 21.8px !important; } .or-ft-ready-copy > .or-ft-btns { margin-top: 71px !important; } .or-ft-ready .or-ft-btns .wp-block-button__link { min-width: 161.5px; padding-block: 10px; } .or-ft-ready-media { flex: 0 0 50% !important; } .or-ft-ready-img img { height: 555px; aspect-ratio: auto; border-radius: 35px; } /* Unlock: full-width navy band, 35px corners, 328 tall. */ .or-ft-unlock { padding: 62.5px 28.5px 47px 19.5px !important; border-radius: 0; text-align: center; } .or-ft-unlock-title { max-width: 680px; margin-inline: auto !important; } .or-ft-unlock > .or-ft-btns { margin-top: 28.5px !important; justify-content: center; } .or-ft-unlock .or-ft-btns .wp-block-button__link { min-width: 161px; padding-block: 10px; } /* Why SaaS needs: centred heading and lead, 568x420 cards across x84..1838. */ .or-ft-need { padding: 81.5px 24px 67px !important; text-align: center; } .or-ft-need-title { color: var(--wp--preset--color--navy); text-align: center; max-width: 760px; margin-inline: auto !important; padding: 0; } .or-ft-mbr { display: none; } .or-ft-need-lead { max-width: 730px; margin: 16.5px auto 0 !important; padding: 0; } .or-ft-need-cards.wp-block-columns { max-width: 1754px; margin: 40.5px auto 0 !important; gap: 25px !important; flex-wrap: nowrap !important; text-align: left; } .or-ft-need-cards + .or-ft-need-cards.wp-block-columns { margin-top: 25px !important; } .or-ft-need-cards > .wp-block-column { flex: 0 0 calc((100% - 50px) / 3) !important; min-width: 0; min-height: 420px; } /* Copy sits in the vertical middle of each card, as in the frame; the first column starts at x208. */ .or-ft-need-card { display: flex; flex-direction: column; justify-content: center; padding: 0 40px 0 134px; } .or-ft-need-card:first-child { padding-left: 125.5px; } .or-ft-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; max-width: 310px; } .or-ft-need-h + p { margin-top: 32px !important; max-width: 316px; } /* Services: photo x5..728 (814 tall, 35px corners) right under the navy band, grey panel x728..1917, copy from x866. The list gaps vary in the frame; each is set as drawn. */ .or-ft-team { padding: 0 3px 0 5px; } .or-ft-team-cols.wp-block-columns { flex-wrap: nowrap !important; gap: 0 !important; } .or-ft-team-media { display: block; flex: 0 0 723px !important; } .or-ft-team-img img { height: 814px; object-fit: cover; border-radius: 35px; } .or-ft-team-copy { flex: 1 1 auto !important; padding: 41.5px 24px 0 138px; background: #fafafa; } .or-ft-team-copy .or-at-more-toggle { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; } .or-ft-team-copy .or-at-more-toggle { text-decoration: none; color: var(--wp--preset--color--navy); } .or-ft-team-copy > * { max-width: 560px; } .or-ft-team-title { max-width: 700px !important; text-align: left; color: var(--wp--preset--color--black); } .or-ft-team-copy > .or-ft-team-title + .or-ft-more { margin-top: 54.5px !important; } .or-ft-team-copy > .or-at-more-toggle + .or-ft-more { margin-top: 44px !important; } .or-ft-team .or-ft-btns .wp-block-button__link { min-width: 228.5px; padding-block: 10px; } .or-ft-team-copy > .or-ft-btns { margin-top: 45px !important; } /* Cost: centred heading, sky panel x83..1837, 508 tall. */ /* Cost: centred heading, sky panel x83..1837, 508 tall; columns from x348 / x893 / x1273. */ .or-ft-cost { padding: 86.5px 24px 0 !important; } .or-ft-cost-title { max-width: 600px; margin: 0 auto !important; padding: 0; text-align: center; } .or-ft-cost-panel { max-width: 1754px !important; min-height: 508px; box-sizing: border-box; margin: 69.5px auto 0 !important; padding: 117px 24px 0 265px; } .or-ft-cost-cols.wp-block-columns { gap: 0 !important; flex-wrap: nowrap !important; } .or-ft-cost-head { flex: 0 0 545px !important; } .or-ft-cost-h { max-width: 470px; font-size: 40px; line-height: 48px; } .or-ft-cost-cols > .or-ft-cost-head { margin-bottom: 0; } .or-ft-cost-inhouse { flex: 0 0 380px !important; padding-top: 0; } .or-ft-cost-list { max-width: 290px; } .or-ft-cost-inhouse .or-ft-cost-list { max-width: 292.5px; } .or-ft-cost-rawr { flex: 0 0 330px !important; padding-top: 0; } .or-ft-cost-label { max-width: 300px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px !important; line-height: 28px !important; letter-spacing: 0; } .or-ft-cost-list { margin-top: 27.5px !important; padding-left: 22.5px; } .or-ft-cost-list li { font-size: 15px !important; line-height: 21px !important; } /* Reasons: heading and subheading on white, then a full-width navy band (8309..9372) holding 320px white cards at x470 / 799 / 1130. */ .or-ft-reasons { margin-top: 0 !important; padding: 93.5px 0 0 !important; background: none; color: var(--wp--preset--color--navy); } .or-ft-reasons-title { max-width: 780px; margin-inline: auto !important; padding: 0; color: var(--wp--preset--color--navy); } .or-ft-reasons > .or-ft-reasons-sub { max-width: none; margin: 56.5px auto 0 !important; padding: 0 24px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--wp--preset--color--navy); } .or-ft-reasons > .or-ft-reasons-band { max-width: none !important; margin: 86px 0 0 !important; padding: 91px 24px 67px; background: var(--wp--preset--color--navy); } .or-ft-reasons-row.wp-block-columns { max-width: 980px; margin: 0 auto !important; gap: 10px !important; flex-wrap: nowrap !important; } .or-ft-reasons-row + .or-ft-reasons-row.wp-block-columns { margin-top: 82px !important; } .or-ft-reasons-row > .wp-block-column { flex: 1 1 0; min-width: 0; } .or-ft-reason { min-height: 425px; padding: 0 20px 40px; margin-top: 26px; } .or-ft-reasons-row + .or-ft-reasons-row > .or-ft-reason { min-height: 396px; padding-bottom: 25px; } .or-ft-reason-num { width: 84px; height: 84px; margin: -26px auto 0 !important; font-size: 36px !important; line-height: 84px !important; } .or-ft-reason-h { max-width: 265px; margin: 31px auto 0 !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; } .or-ft-reason-h + p { max-width: 267px; margin: 22px auto 0 !important; } /* Ready to elevate: navy band 544 tall, heading x494, copy x1014. */ .or-ft-go { padding: 171.5px 20px 172px 28px !important; text-align: left; } .or-ft-go-cols.wp-block-columns { max-width: 940px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } .or-ft-go-head { flex: 0 0 520px !important; } .or-ft-go-title { max-width: 410px; } .or-ft-go-copy { flex: 0 0 420px !important; padding-top: 1px; } .or-ft-go-copy > p { max-width: 418px; line-height: 21.75px !important; } .or-ft-go-copy > .or-ft-btns { margin-top: 45.75px !important; } .or-ft-go .or-ft-btns .wp-block-button__link { min-width: 174.5px; padding-block: 10px; } .or-ft-speak { padding: 97.5px 24px 0 !important; } .or-ft-speak-title { color: var(--wp--preset--color--navy); } .or-ft-speak > .or-ft-h + * { margin-top: 60px !important; max-width: 855px; margin-inline: auto !important; } .or-ft-faq { padding: 16px 24px 100px !important; } .or-ft-dbr { display: inline; } .or-ft-faq .or-ft-faq-cols.wp-block-columns { max-width: 953px; margin: 0 auto; gap: 53px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-ft-faq-media { display: block; flex: 0 0 350px !important; } .or-ft-faq-img-top img { height: 632px; object-fit: cover; border-radius: 30px; } .or-ft-faq-img-bottom { margin-top: 42px !important; } .or-ft-faq-img-bottom img { height: 374px; object-fit: cover; border-radius: 30px; } .or-ft-faq-cols > .or-ft-faq-list.wp-block-column { flex: 1 1 550px !important; min-width: 0; } .or-ft-faq .or-ft-faq-list > .or-ft-h { font-size: 40px; line-height: 48px; margin-top: -5px; padding-left: 0; } .or-ft-faq .or-ft-faq-list > .or-ft-h + .wp-block-details { margin-top: 19.5px; } .or-ft-faq.or-faq summary { display: flex; align-items: center; min-height: 93.5px; padding: 18px 36px 18px 10px; font-size: 20px; line-height: 28.5px; } .or-ft-faq.or-faq details[open] > summary { padding-top: 11.2px; padding-bottom: 25px; } .or-ft-faq.or-faq summary::after { top: 32px; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } .or-ft-faq.or-faq .wp-block-details > :not(summary) { padding: 0 40px 20px 10px; } .or-ft-faq.or-faq .wp-block-details > summary + * { padding-top: 0; } .or-ft-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-ft-faq.or-faq details[open] > :last-child { padding-bottom: 19.7px; } .or-ft-faq.or-faq .wp-block-details > p { max-width: 470px; } .or-ft-faq.or-faq .wp-block-details :is(p, li) { font-size: 15px; line-height: 22px; } .or-ft-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 22px; padding-left: 35.5px; list-style: disc; } .or-ft-faq.or-faq .wp-block-details > ul.wp-block-list > li::before { content: none; } } /* Between the phone layout and the 1920 frame: the same desktop design, with the fixed frame widths allowed to shrink and the widest rows stacked, so nothing runs off the screen. */ @media (min-width: 782px) and (max-width: 1919px) { .or-ft-wwd > .or-ft-wwd-title { padding-right: max(0px, calc(100% - 600px)); } .or-ft-why { padding: 0 24px; } .or-ft-why-cols > .or-ft-why-intro { flex: 0 1 425px !important; min-width: 0; padding-left: clamp(40px, 4.7vw, 90px); } .or-ft-why-cols > .or-ft-why-panel { min-width: 0; padding: 50px clamp(30px, 4.7vw, 90px) 40px; } .or-ft-why-cards.wp-block-columns { gap: clamp(30px, 9.4vw - 100px, 180px) !important; } .or-ft-why-cards > .wp-block-column { flex: 0 1 245px !important; min-width: 0; } .or-ft-ready-cols.wp-block-columns { height: auto; min-height: 488px; } .or-ft-ready-copy { flex: 1 1 830px !important; min-width: 0; padding: 40px 40px 40px clamp(40px, 10.4vw, 200px); } .or-ft-ready-media { flex: 1 1 890px !important; min-width: 0; } .or-ft-ready-media { position: relative; } .or-ft-ready-media > .or-ft-ready-img { position: absolute; inset: 0; margin: 0 !important; } .or-ft-ready-img img { width: 100%; height: 100%; object-fit: cover; } .or-ft-team { padding-left: clamp(24px, 4.4vw, 84px); } .or-ft-team-media { flex: 0 1 652px !important; min-width: 0; } .or-ft-team-copy { min-width: 0; padding-left: clamp(40px, 9.3vw, 178px); } .or-ft-cost-panel { height: auto; min-height: 508px; padding: 85px 40px 60px clamp(40px, 15.1vw, 290px); } .or-ft-cost-head { flex: 0 1 476px !important; min-width: 0; padding-right: 24px; } .or-ft-cost-inhouse { flex: 0 1 390px !important; min-width: 0; padding-right: 24px; } .or-ft-cost-rawr { flex: 0 1 300px !important; min-width: 0; } .or-ft-need-card { padding: 40px clamp(30px, 3.1vw, 60px) 40px clamp(30px, 7vw, 134px); } .or-ft-tiles > .or-ft-tile-magenta { padding-left: clamp(40px, 5.5vw, 106px); padding-right: 40px; } .or-ft-wwd-cards > .wp-block-column { height: auto !important; min-height: 340px; } } @media (min-width: 782px) and (max-width: 1279px) { .or-ft-steps-cols.wp-block-columns { flex-wrap: wrap !important; justify-content: center; } .or-ft-steps-head { flex: 0 0 100% !important; padding: 0; text-align: center; } .or-ft-steps-title { margin-inline: auto !important; } .or-ft-steps-body { flex: 0 0 547px !important; margin-top: 48px !important; } } @media (min-width: 782px) and (max-width: 1199px) { .or-ft-why-cols.wp-block-columns { flex-wrap: wrap !important; } .or-ft-why-cols > .or-ft-why-intro { flex: 0 0 100% !important; padding: 51px 40px 40px; border-radius: 35px 35px 0 0; } .or-ft-why-intro > p { max-width: 640px; } .or-ft-why-cols > .or-ft-why-panel { flex: 0 0 100% !important; padding: 40px; border-radius: 0 0 35px 35px; } .or-ft-why-cards.wp-block-columns { justify-content: space-between; gap: 30px !important; } .or-ft-cost-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; } .or-ft-cost-head { flex: 0 0 100% !important; } .or-ft-cost-inhouse, .or-ft-cost-rawr { flex: 1 1 0 !important; } .or-ft-cost-panel { padding-left: 60px; } .or-ft-go-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; max-width: 640px; } .or-ft-go-head, .or-ft-go-copy { flex: 0 0 100% !important; } .or-ft-need-cards > .wp-block-column { height: auto; min-height: 360px; } } @media (min-width: 782px) and (max-width: 1023px) { .or-ft-ready-cols.wp-block-columns { flex-wrap: wrap !important; } .or-ft-ready-copy, .or-ft-ready-media { flex: 0 0 100% !important; } .or-ft-ready-copy { padding: 48px 40px; } .or-ft-ready-media { height: 420px; } .or-ft-ready-img img { border-radius: 0 0 35px 35px; } .or-ft-team-media { display: none; } .or-ft-team { padding-left: 0; } .or-ft-team-copy { padding: 60px 40px; } .or-ft-team-copy > * { max-width: 640px; } .or-ft-wwd-cards.wp-block-columns { flex-wrap: wrap !important; row-gap: 27px !important; } .or-ft-wwd-cards > .wp-block-column { flex: 0 0 calc(50% - 13.5px) !important; min-height: 280px; } } @media (min-width: 782px) and (max-width: 959px) { .or-ft-need-cards.wp-block-columns { flex-wrap: wrap !important; justify-content: center; row-gap: 25px !important; } .or-ft-need-cards > .wp-block-column { flex: 0 0 calc(50% - 12.5px) !important; min-height: 300px; } } @media (min-width: 782px) and (max-width: 1919px) { .or-ft-need-cards > .or-ft-need-card, .or-ft-need-cards > .or-ft-need-card:first-child { padding: 40px clamp(24px, 3.1vw, 40px) 40px clamp(24px, 6.5vw, 125.5px); } } /* --- Fintech additions --------------------------------------------------------------------- */ :is(.or-ft-evo) :is(h1, h2, h3, p, ul, figure, hr, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-ft-evo) :is(p, li) { font-size: 15px; line-height: 22px; } /* Sky tile: a title above the heading and list, as the Healthcare page. */ .or-ft-tile-title { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 25.9px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-ft-tile-sky > .or-ft-tile-h { margin-top: 21.3px !important; font-size: 15px; line-height: 22px; letter-spacing: 0; } .or-ft-tile-sky > .or-ft-tile-list { margin-top: 0 !important; } /* The services image is an abstract graphic: hidden on phones, as on the SaaS and Healthcare pages. */ .or-ft-team-media { display: none; } .or-ft-team-copy { padding-top: 45px; } /* The U.S. fintech market (Accounting's "industry is evolving" section, on sky-deep). */ .or-ft-evo { margin-top: 44.8px !important; padding: 39.5px 30px 46.2px !important; background: var(--wp--preset--color--sky); } .or-ft-evo > * { margin-block: 0 !important; } .or-ft-evo-title { text-align: center; color: var(--wp--preset--color--navy); } .or-ft-evo-item { margin-top: 19px !important; } .or-ft-evo-item + .or-ft-evo-item { margin-top: 15.6px !important; } .or-ft-evo-item > * { margin-block: 0 !important; } .or-ft-evo-h { position: relative; padding-left: 34px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-ft-evo-h::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 14px; background: var(--wp--preset--color--black); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 7h18M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 7h18M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; } .or-ft-evo-item > :not(.or-ft-evo-h) { margin-left: 34px !important; } .or-ft-evo-item > p { max-width: 192px; } .or-ft-evo-h + * { margin-top: 23.2px !important; } .or-ft-evo-list { max-width: 191px; padding-left: 23px; } .or-ft-evo-item > p + p { margin-top: 22px !important; } .or-ft-evo-item > p + ul { margin-top: 0 !important; } .or-ft-evo-item > p.or-ft-tight { margin-top: 0 !important; } .or-ft-evo > .or-ft-btns { margin-top: 18px !important; } .or-ft-evo { background: var(--wp--preset--color--sky-deep); } .or-ft-evo > .or-ft-evo-lead { margin-top: 20px !important; } .or-ft-evo > .or-ft-evo-lead + .or-ft-evo-lead { margin-top: 22px !important; } .or-ft-evo-item > p { max-width: none; } .or-ft-evo-list { max-width: none; } @media (min-width: 782px) { .or-ft-tile-title { max-width: 301px; font-size: 23px; line-height: 30px; letter-spacing: 0; color: var(--wp--preset--color--black); } .or-ft-tile-sky > .or-ft-tile-h { margin-top: 22.5px !important; color: var(--wp--preset--color--navy); } .or-ft-team-media { display: block; } /* Narrow services image, as Harps asked for the SaaS page (19 Sep 2026). */ .or-ft-team .or-ft-team-media { flex: 0 1 460px !important; min-width: 0; } .or-ft-team-img img { height: 100%; min-height: 814px; } .or-ft-team .or-ft-team-copy { padding-top: 41.5px; padding-bottom: 60px; } .or-ft-team-copy > .or-at-more-toggle + .or-ft-more { margin-top: 44px !important; } .or-ft-need-h + p { max-width: 316px; } .or-ft-reason-h + p { max-width: 260px; } .or-ft-unlock-title { max-width: 620px; } .or-ft-evo { margin-top: 0 !important; padding: 78px 24px 89px !important; border-radius: 35px; } .or-ft-evo > * { max-width: 630px; margin-inline: auto !important; } .or-ft-evo > .or-ft-evo-title { max-width: none; } .or-ft-evo-item { margin-top: 50px !important; } .or-ft-evo-item + .or-ft-evo-item { margin-top: 31px !important; } .or-ft-evo-h { padding-left: 54px; font-size: 24px; line-height: 29px; letter-spacing: 0; } .or-ft-evo-item > :not(.or-ft-evo-h) { margin-left: 54px !important; } .or-ft-evo-h { max-width: 524px; } .or-ft-evo-h + * { margin-top: 24px !important; } .or-ft-evo-list { max-width: none; padding-left: 26px; } .or-ft-evo-item > p { max-width: none; } .or-ft-evo-item > p + ul { margin-top: 22px !important; } .or-ft-evo > .or-ft-btns { margin-top: 55px !important; justify-content: center; } .or-ft-evo .or-ft-btns .wp-block-button__link { min-width: 382px; } .or-ft-evo > * { max-width: 760px; } .or-ft-evo > .or-ft-evo-title { max-width: 880px; } .or-ft-evo > .or-ft-evo-lead { margin-top: 40px !important; } .or-ft-evo > .or-ft-evo-lead + .or-ft-evo-lead { margin-top: 22px !important; } .or-ft-evo .or-ft-btns .wp-block-button__link { min-width: 180px; } } /* Keeps "Full-Time" whole in the reasons heading (it broke after the hyphen at 1920; 22 Sep). */ .or-ft-nw { white-space: nowrap; } /* ===== page 17: INDUSTRIES | Accounting › Firm of the Future ================ * No frames: the Fintech section (page 16, itself EdTech's) renamed, without the sections this * page doesn't have, plus the parts at the end (three-part sky panel, Q&A accordion, spacing). * Notes: firm-of-the-future-design.md. */ :is(.or-ff-hero, .or-ff-intro, .or-ff-tiles-wrap, .or-ff-band, .or-ff-wwd, .or-ff-why, .or-ff-steps, .or-ff-ready, .or-ff-need, .or-ff-team, .or-ff-cost, .or-ff-reasons, .or-ff-go, .or-ff-unlock, .or-ff-speak, .or-ff-faq) { margin-block: 0 !important; } :is(.or-ff-hero, .or-ff-intro, .or-ff-tiles-wrap, .or-ff-band, .or-ff-wwd, .or-ff-why, .or-ff-steps, .or-ff-ready, .or-ff-need, .or-ff-team, .or-ff-cost, .or-ff-reasons, .or-ff-go, .or-ff-unlock, .or-ff-faq) :is(p, li) { font-size: 15px; line-height: 22px; } :is(.or-ff-hero, .or-ff-intro, .or-ff-tiles-wrap, .or-ff-band, .or-ff-wwd, .or-ff-why, .or-ff-steps, .or-ff-ready, .or-ff-need, .or-ff-team, .or-ff-cost, .or-ff-reasons, .or-ff-go, .or-ff-unlock, .or-ff-speak, .or-ff-faq) :is(h1, h2, h3, p, ul, figure, hr, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-ff-tiles-wrap, .or-ff-wwd, .or-ff-why, .or-ff-steps, .or-ff-ready, .or-ff-need, .or-ff-team, .or-ff-cost, .or-ff-reasons, .or-ff-go, .or-ff-unlock, .or-ff-faq) .wp-block-column { box-sizing: border-box; } .or-ff-h, .or-ff-title { font-size: 25px; line-height: 30px; } .or-ff-btns .wp-block-button__link { padding: 4.5px 21px; box-sizing: border-box; font-size: 16px; } :where(.or-ff-hero, .or-ff-tiles-wrap, .or-ff-why, .or-ff-ready, .or-ff-team, .or-ff-faq) figure img { display: block; width: 100%; height: auto; } /* --- hero ------------------------------------------------------------------- */ .or-ff-hero { padding: 0; } .or-ff-hero-img img { aspect-ratio: 320 / 316; object-fit: cover; border-radius: 35px; } .or-ff-hero-card { margin-top: 0 !important; padding: 28.4px 30px 0; text-align: center; } .or-ff-title { color: var(--wp--preset--color--black); } .or-ff-hero-card > .or-ff-btns { margin-top: 24.7px; } .or-ff-intro { padding: 27.8px 35px 0 30px !important; } /* --- three tiles -------------------------------------------------------------- */ /* Phones: the two text tiles are 320px squares with their copy in the middle. */ @media (max-width: 781px) { /* The phone frame runs the three result lines together as one paragraph. */ /* The phone frame keeps the service lists collapsed too: three lines and a bold toggle. */ .or-ff-more.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* The frame shows each list's title and subtitle; the first title takes two lines. */ .or-ff-team-copy .or-at-more-toggle { display: block; margin: 0 !important; padding: 0; border: 0; background: none; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 15px; line-height: 22px; color: var(--wp--preset--color--navy); cursor: pointer; } } /* --- what we do -------------------------------------------------------------- */ /* --- why choose ---------------------------------------------------------------- */ /* Colours read off the frames; several differ between the phone and desktop frames. */ /* --- four steps ---------------------------------------------------------------- */ /* Phones: icon and title side by side (title from x105), copy below. */ /* --- ready for marketing ------------------------------------------------------------------ */ .or-ff-ready { padding: 0 0 45px; } .or-ff-ready-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-ff-ready-copy { padding: 50.4px 30px 24px; } .or-ff-ready-copy > * { margin-block: 0 !important; } .or-ff-ready-title { text-align: center; color: var(--wp--preset--color--black); } .or-ff-ready-sub { margin-top: 26.3px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-ff-ready-sub + p { margin-top: 26.9px !important; } .or-ff-ready-copy > .or-ff-btns { margin-top: 24px !important; } .or-ff-ready-img img { aspect-ratio: 1; object-fit: cover; border-radius: 35px; } /* --- why SaaS companies need fractional teams --------------------------------------------- */ .or-ff-need { padding: 47.6px 0 45px !important; } .or-ff-need > * { margin-block: 0 !important; } .or-ff-need-title, .or-ff-need-lead { padding: 0 30px; } .or-ff-need-title { max-width: 250px; margin-inline: auto !important; padding: 0 !important; text-align: center; color: var(--wp--preset--color--black); } .or-ff-need-lead { margin-top: 25px !important; } .or-ff-need-cards.wp-block-columns { margin: 25.2px 0 0 !important; gap: 24.7px !important; } .or-ff-need-cards + .or-ff-need-cards.wp-block-columns { margin-top: 24.7px !important; } .or-ff-need-card { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky-deep); padding: 30px 30px 29px; } .or-ff-need-card > * { margin-block: 0 !important; } .or-ff-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 600; font-size: 15px; line-height: 22.4px; color: var(--wp--preset--color--navy); } .or-ff-need-h + p { margin-top: 18.8px !important; } /* --- expert leadership + unlock band ------------------------------------------------------ */ .or-ff-unlock { padding: 50px 30px 49.9px !important; text-align: center; } .or-ff-unlock-title { max-width: 260px; margin-inline: auto !important; } .or-ff-unlock > .or-ff-btns { margin-top: 30px !important; } .or-ff-team-copy > .or-ff-team-sub { margin-top: 40px !important; } .or-ff-team-sub { margin-top: 25px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } /* --- get started (magenta) ------------------------------------------------------------------ */ .or-ff-go { padding: 48.9px 30px 48.2px !important; text-align: center; } .or-ff-go-copy { text-align: left; } .or-ff-go-title { max-width: 260px; margin-inline: auto !important; } .or-ff-go-cols.wp-block-columns { margin: 0; gap: 31.3px !important; } .or-ff-go-cols .wp-block-column > * { margin-block: 0 !important; } .or-ff-go-copy > .or-ff-btns { margin-top: 29px !important; } .or-ff-btn-navy .wp-block-button__link { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-ff-btn-navy .wp-block-button__link:hover { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); } /* --- services: collapsible lists ---------------------------------------------------------------------- */ .or-ff-team { padding: 0 0 46.7px; } .or-ff-team-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-ff-team-copy { padding: 39.6px 30px 0; } .or-ff-team-copy > * { margin-block: 0 !important; } .or-ff-team-title { text-align: center; color: var(--wp--preset--color--black); } .or-ff-team-copy > .or-ff-team-sub + .or-ff-more { margin-top: 40.4px !important; } .or-ff-team-copy > .or-at-more-toggle + .or-ff-more, .or-ff-team-copy > .or-ff-more + .or-ff-more { margin-top: 23px !important; } .or-ff-team-copy > .or-ff-btns { margin-top: 39.6px !important; } .or-ff-team-copy > .or-ff-team-title + .or-ff-more { margin-top: 42.4px !important; } /* --- cost comparison ------------------------------------------------------------------------ */ /* --- why choose One Rawr for SaaS ------------------------------------------------------------ */ .or-ff-reasons { margin-top: 53.5px !important; padding: 50px 0 63.4px !important; text-align: center; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-ff-reasons > * { margin-block: 0 !important; } .or-ff-reasons > .or-ff-reasons-sub { margin-top: 27.1px !important; padding: 0 30px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-ff-reasons-title { max-width: 260px; margin-inline: auto !important; color: var(--wp--preset--color--white); } .or-ff-reasons-row.wp-block-columns { margin-top: 25.5px !important; gap: 24.6px !important; } .or-ff-reasons-row + .or-ff-reasons-row.wp-block-columns { margin-top: 24.6px !important; } .or-ff-reason { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); padding: 29.9px 30px 28.1px; } .or-ff-reason > * { margin-block: 0 !important; } .or-ff-reason-num { width: 85px; height: 85px; margin: 0 auto !important; border-radius: 50%; background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--white); font-size: 37px !important; line-height: 85px !important; } .or-ff-reason-h { margin-top: 24.5px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; } .or-ff-reason-h + p { margin-top: 26.5px !important; } /* --- speak / FAQ -------------------------------------------------------------------------------- */ .or-ff-speak { padding: 39.3px 4px 0 !important; } .or-ff-speak-title { text-align: center; color: var(--wp--preset--color--black); } .or-ff-speak > .or-ff-h + * { margin-top: 30px !important; } .or-ff-speak .meetings-iframe-container iframe { display: block; width: 100%; } .or-ff-faq { padding: 0 30px 63.4px !important; } .or-ff-faq-media { display: none; } .or-ff-dbr { display: none; } .or-ff-faq .or-ff-faq-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-ff-faq .or-ff-faq-list > .or-ff-h { font-size: 27px; line-height: 1.05; margin: 10.5px 0 0; padding-left: 17px; color: var(--wp--preset--color--navy); } .or-ff-faq .or-ff-faq-list > .or-ff-h + .wp-block-details { margin-top: 20px; } .or-ff-faq .wp-block-details { margin-block: 0; } .or-ff-faq.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-ff-faq.or-faq .wp-block-details > :not(summary) { padding: 0 20px 12px 20px; } .or-ff-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-ff-faq.or-faq .wp-block-details > summary + * { padding-top: 9.7px; } .or-ff-faq.or-faq .wp-block-details :is(p, li) { font-size: 16px; line-height: 24px; } /* Phone frame: a normal list, bullets hanging at x60 and text from x74.5. */ .or-ff-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 0; padding-left: 44.5px; } /* ----------------------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-ff-h, .or-ff-title { font-size: 40px; line-height: 48px; } .or-ff-btns .wp-block-button__link { padding: 10.5px 26px; } .or-main .or-ff-btns > .wp-block-button, .or-main .or-ff-btns > .wp-block-button .wp-block-button__link { width: auto; } /* Hero: 433px photo, 980px white card lifted 194px over it; copy centred. */ /* Like the live page: the square stock image cropped to the band from its centre, so narrower screens still show the whole composition; all four corners rounded. */ .or-ff-hero-img img { height: 433px; object-fit: cover; object-position: 50% 50%; border-radius: 35px; } .or-ff-hero-img.or-only-mobile { display: none; } .or-ff-hero-card { position: relative; box-sizing: border-box; width: min(980px, calc(100% - 48px)); margin: -194px auto 0 !important; border-radius: 35px 35px 0 0; background: var(--wp--preset--color--white); padding: 63px 24px 0; } .or-ff-title { max-width: 745px; margin-inline: auto !important; color: var(--wp--preset--color--navy); } .or-ff-hero-card > .or-ff-btns { margin-top: 50.5px; justify-content: center; } .or-ff-hero .or-ff-btns .wp-block-button__link { min-width: 221px; padding-block: 10px; } .or-ff-intro { padding: 53.75px 24px 0 !important; text-align: center; } .or-ff-intro > p { max-width: 760px; margin-inline: auto !important; line-height: 22.2px !important; } /* Tiles: magenta 519, sky and photo 501 across x199..1720, 387 tall. */ /* Three separate rounded tiles side by side (client change: no overlap): magenta x200..719, sky x719..1228, photo x1228..1721, all 436 tall. */ /* What we do: four 358px cards across x204..1717. */ /* Why choose: navy x110..535, sky x535..1810, 664 tall. */ /* Steps: heading left of centre, 260x280 cards at x1027 / x1314, the right column 168px lower. */ /* The frame places each card's icon, title and copy freely (same cards as the Accounting page). */ .or-ff-reasons-title { padding: 0; } .or-ff-go-title { max-width: 460px; margin-inline: 0 !important; } /* Start growing: grey panel x0..960 and photo x960..1920, both 555 tall with 35px corners. */ .or-ff-ready { padding: 0 !important; } .or-ff-ready-cols.wp-block-columns { flex-wrap: nowrap !important; min-height: 555px; } .or-ff-ready-copy { flex: 0 0 50% !important; border-radius: 35px; background: #fafafa; padding: 43.5px 24px 0 240px; } .or-ff-ready-title { max-width: 460px; text-align: left; color: var(--wp--preset--color--navy); } .or-ff-ready-sub { margin-top: 34.5px !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; max-width: 440px; color: var(--wp--preset--color--navy); } .or-ff-ready-sub + p { margin-top: 30px !important; max-width: 480px; line-height: 21.8px !important; } .or-ff-ready-copy > .or-ff-btns { margin-top: 71px !important; } .or-ff-ready .or-ff-btns .wp-block-button__link { min-width: 161.5px; padding-block: 10px; } .or-ff-ready-media { flex: 0 0 50% !important; } .or-ff-ready-img img { height: 555px; aspect-ratio: auto; border-radius: 35px; } /* Unlock: full-width navy band, 35px corners, 328 tall. */ .or-ff-unlock { padding: 62.5px 28.5px 47px 19.5px !important; border-radius: 0; text-align: center; } .or-ff-unlock-title { max-width: 680px; margin-inline: auto !important; } .or-ff-unlock > .or-ff-btns { margin-top: 28.5px !important; justify-content: center; } .or-ff-unlock .or-ff-btns .wp-block-button__link { min-width: 161px; padding-block: 10px; } /* Why SaaS needs: centred heading and lead, 568x420 cards across x84..1838. */ .or-ff-need { padding: 81.5px 24px 67px !important; text-align: center; } .or-ff-need-title { color: var(--wp--preset--color--navy); text-align: center; max-width: 760px; margin-inline: auto !important; padding: 0; } .or-ff-mbr { display: none; } .or-ff-need-lead { max-width: 730px; margin: 16.5px auto 0 !important; padding: 0; } .or-ff-need-cards.wp-block-columns { max-width: 1754px; margin: 40.5px auto 0 !important; gap: 25px !important; flex-wrap: nowrap !important; text-align: left; } .or-ff-need-cards + .or-ff-need-cards.wp-block-columns { margin-top: 25px !important; } .or-ff-need-cards > .wp-block-column { flex: 0 0 calc((100% - 50px) / 3) !important; min-width: 0; min-height: 420px; } /* Copy sits in the vertical middle of each card, as in the frame; the first column starts at x208. */ .or-ff-need-card { display: flex; flex-direction: column; justify-content: center; padding: 0 40px 0 134px; } .or-ff-need-card:first-child { padding-left: 125.5px; } .or-ff-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; max-width: 310px; } .or-ff-need-h + p { margin-top: 32px !important; max-width: 316px; } /* Services: photo x5..728 (814 tall, 35px corners) right under the navy band, grey panel x728..1917, copy from x866. The list gaps vary in the frame; each is set as drawn. */ .or-ff-team { padding: 0 3px 0 5px; } .or-ff-team-cols.wp-block-columns { flex-wrap: nowrap !important; gap: 0 !important; } .or-ff-team-media { display: block; flex: 0 0 723px !important; } .or-ff-team-img img { height: 814px; object-fit: cover; border-radius: 35px; } .or-ff-team-copy { flex: 1 1 auto !important; padding: 41.5px 24px 0 138px; background: #fafafa; } .or-ff-team-copy .or-at-more-toggle { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; } .or-ff-team-copy .or-at-more-toggle { text-decoration: none; color: var(--wp--preset--color--navy); } .or-ff-team-copy > * { max-width: 560px; } .or-ff-team-title { max-width: 700px !important; text-align: left; color: var(--wp--preset--color--black); } .or-ff-team-copy > .or-ff-team-title + .or-ff-more { margin-top: 54.5px !important; } .or-ff-team-copy > .or-at-more-toggle + .or-ff-more { margin-top: 44px !important; } .or-ff-team .or-ff-btns .wp-block-button__link { min-width: 228.5px; padding-block: 10px; } .or-ff-team-copy > .or-ff-btns { margin-top: 45px !important; } /* Cost: centred heading, sky panel x83..1837, 508 tall. */ /* Cost: centred heading, sky panel x83..1837, 508 tall; columns from x348 / x893 / x1273. */ /* Reasons: heading and subheading on white, then a full-width navy band (8309..9372) holding 320px white cards at x470 / 799 / 1130. */ .or-ff-reasons { margin-top: 0 !important; padding: 93.5px 0 0 !important; background: none; color: var(--wp--preset--color--navy); } .or-ff-reasons-title { max-width: 780px; margin-inline: auto !important; padding: 0; color: var(--wp--preset--color--navy); } .or-ff-reasons > .or-ff-reasons-sub { max-width: none; margin: 56.5px auto 0 !important; padding: 0 24px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--wp--preset--color--navy); } .or-ff-reasons > .or-ff-reasons-band { max-width: none !important; margin: 86px 0 0 !important; padding: 91px 24px 67px; background: var(--wp--preset--color--navy); } .or-ff-reasons-row.wp-block-columns { max-width: 980px; margin: 0 auto !important; gap: 10px !important; flex-wrap: nowrap !important; } .or-ff-reasons-row + .or-ff-reasons-row.wp-block-columns { margin-top: 82px !important; } .or-ff-reasons-row > .wp-block-column { flex: 1 1 0; min-width: 0; } .or-ff-reason { min-height: 425px; padding: 0 20px 40px; margin-top: 26px; } .or-ff-reasons-row + .or-ff-reasons-row > .or-ff-reason { min-height: 396px; padding-bottom: 25px; } .or-ff-reason-num { width: 84px; height: 84px; margin: -26px auto 0 !important; font-size: 36px !important; line-height: 84px !important; } .or-ff-reason-h { max-width: 265px; margin: 31px auto 0 !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; } .or-ff-reason-h + p { max-width: 267px; margin: 22px auto 0 !important; } /* Ready to elevate: navy band 544 tall, heading x494, copy x1014. */ .or-ff-go { padding: 171.5px 20px 172px 28px !important; text-align: left; } .or-ff-go-cols.wp-block-columns { max-width: 940px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } .or-ff-go-head { flex: 0 0 520px !important; } .or-ff-go-title { max-width: 410px; } .or-ff-go-copy { flex: 0 0 420px !important; padding-top: 1px; } .or-ff-go-copy > p { max-width: 418px; line-height: 21.75px !important; } .or-ff-go-copy > .or-ff-btns { margin-top: 45.75px !important; } .or-ff-go .or-ff-btns .wp-block-button__link { min-width: 174.5px; padding-block: 10px; } .or-ff-speak { padding: 97.5px 24px 0 !important; } .or-ff-speak-title { color: var(--wp--preset--color--navy); } .or-ff-speak > .or-ff-h + * { margin-top: 60px !important; max-width: 855px; margin-inline: auto !important; } .or-ff-faq { padding: 16px 24px 100px !important; } .or-ff-dbr { display: inline; } .or-ff-faq .or-ff-faq-cols.wp-block-columns { max-width: 953px; margin: 0 auto; gap: 53px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-ff-faq-media { display: block; flex: 0 0 350px !important; } .or-ff-faq-img-top img { height: 632px; object-fit: cover; border-radius: 30px; } .or-ff-faq-img-bottom { margin-top: 42px !important; } .or-ff-faq-img-bottom img { height: 374px; object-fit: cover; border-radius: 30px; } .or-ff-faq-cols > .or-ff-faq-list.wp-block-column { flex: 1 1 550px !important; min-width: 0; } .or-ff-faq .or-ff-faq-list > .or-ff-h { font-size: 40px; line-height: 48px; margin-top: -5px; padding-left: 0; } .or-ff-faq .or-ff-faq-list > .or-ff-h + .wp-block-details { margin-top: 19.5px; } .or-ff-faq.or-faq summary { display: flex; align-items: center; min-height: 93.5px; padding: 18px 36px 18px 10px; font-size: 20px; line-height: 28.5px; } .or-ff-faq.or-faq details[open] > summary { padding-top: 11.2px; padding-bottom: 25px; } .or-ff-faq.or-faq summary::after { top: 32px; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } .or-ff-faq.or-faq .wp-block-details > :not(summary) { padding: 0 40px 20px 10px; } .or-ff-faq.or-faq .wp-block-details > summary + * { padding-top: 0; } .or-ff-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-ff-faq.or-faq details[open] > :last-child { padding-bottom: 19.7px; } .or-ff-faq.or-faq .wp-block-details > p { max-width: 470px; } .or-ff-faq.or-faq .wp-block-details :is(p, li) { font-size: 15px; line-height: 22px; } .or-ff-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 22px; padding-left: 35.5px; list-style: disc; } .or-ff-faq.or-faq .wp-block-details > ul.wp-block-list > li::before { content: none; } } /* Between the phone layout and the 1920 frame: the same desktop design, with the fixed frame widths allowed to shrink and the widest rows stacked, so nothing runs off the screen. */ @media (min-width: 782px) and (max-width: 1919px) { .or-ff-ready-cols.wp-block-columns { height: auto; min-height: 488px; } .or-ff-ready-copy { flex: 1 1 830px !important; min-width: 0; padding: 40px 40px 40px clamp(40px, 10.4vw, 200px); } .or-ff-ready-media { flex: 1 1 890px !important; min-width: 0; } .or-ff-ready-media { position: relative; } .or-ff-ready-media > .or-ff-ready-img { position: absolute; inset: 0; margin: 0 !important; } .or-ff-ready-img img { width: 100%; height: 100%; object-fit: cover; } .or-ff-team { padding-left: clamp(24px, 4.4vw, 84px); } .or-ff-team-media { flex: 0 1 652px !important; min-width: 0; } .or-ff-team-copy { min-width: 0; padding-left: clamp(40px, 9.3vw, 178px); } .or-ff-need-card { padding: 40px clamp(30px, 3.1vw, 60px) 40px clamp(30px, 7vw, 134px); } } @media (min-width: 782px) and (max-width: 1279px) { } @media (min-width: 782px) and (max-width: 1199px) { .or-ff-go-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; max-width: 640px; } .or-ff-go-head, .or-ff-go-copy { flex: 0 0 100% !important; } .or-ff-need-cards > .wp-block-column { height: auto; min-height: 360px; } } @media (min-width: 782px) and (max-width: 1023px) { .or-ff-ready-cols.wp-block-columns { flex-wrap: wrap !important; } .or-ff-ready-copy, .or-ff-ready-media { flex: 0 0 100% !important; } .or-ff-ready-copy { padding: 48px 40px; } .or-ff-ready-media { height: 420px; } .or-ff-ready-img img { border-radius: 0 0 35px 35px; } .or-ff-team-media { display: none; } .or-ff-team { padding-left: 0; } .or-ff-team-copy { padding: 60px 40px; } .or-ff-team-copy > * { max-width: 640px; } } @media (min-width: 782px) and (max-width: 959px) { .or-ff-need-cards.wp-block-columns { flex-wrap: wrap !important; justify-content: center; row-gap: 25px !important; } .or-ff-need-cards > .wp-block-column { flex: 0 0 calc(50% - 12.5px) !important; min-height: 300px; } } @media (min-width: 782px) and (max-width: 1919px) { .or-ff-need-cards > .or-ff-need-card, .or-ff-need-cards > .or-ff-need-card:first-child { padding: 40px clamp(24px, 3.1vw, 40px) 40px clamp(24px, 6.5vw, 125.5px); } } /* --- Fintech additions --------------------------------------------------------------------- */ :is(.or-ff-evo) :is(h1, h2, h3, p, ul, figure, hr, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-ff-evo) :is(p, li) { font-size: 15px; line-height: 22px; } /* Sky tile: a title above the heading and list, as the Healthcare page. */ /* The services image is an abstract graphic: hidden on phones, as on the SaaS and Healthcare pages. */ .or-ff-team-media { display: none; } .or-ff-team-copy { padding-top: 45px; } /* The U.S. fintech market (Accounting's "industry is evolving" section, on sky-deep). */ .or-ff-evo { margin-top: 44.8px !important; padding: 39.5px 30px 46.2px !important; background: var(--wp--preset--color--sky); } .or-ff-evo > * { margin-block: 0 !important; } .or-ff-evo-title { text-align: center; color: var(--wp--preset--color--navy); } .or-ff-evo-item { margin-top: 19px !important; } .or-ff-evo-item + .or-ff-evo-item { margin-top: 15.6px !important; } .or-ff-evo-item > * { margin-block: 0 !important; } .or-ff-evo-h { position: relative; padding-left: 34px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } .or-ff-evo-h::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 14px; background: var(--wp--preset--color--black); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 7h18M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M0 7h18M12 1l6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; } .or-ff-evo-item > :not(.or-ff-evo-h) { margin-left: 34px !important; } .or-ff-evo-item > p { max-width: 192px; } .or-ff-evo-h + * { margin-top: 23.2px !important; } .or-ff-evo-list { max-width: 191px; padding-left: 23px; } .or-ff-evo-item > p + p { margin-top: 22px !important; } .or-ff-evo-item > p + ul { margin-top: 0 !important; } .or-ff-evo-item > p.or-ff-tight { margin-top: 0 !important; } .or-ff-evo > .or-ff-btns { margin-top: 18px !important; } .or-ff-evo { background: var(--wp--preset--color--sky-deep); } .or-ff-evo > .or-ff-evo-lead { margin-top: 20px !important; } .or-ff-evo > .or-ff-evo-lead + .or-ff-evo-lead { margin-top: 22px !important; } .or-ff-evo-item > p { max-width: none; } .or-ff-evo-list { max-width: none; } @media (min-width: 782px) { .or-ff-team-media { display: block; } /* Narrow services image, as Harps asked for the SaaS page (19 Sep 2026). */ .or-ff-team .or-ff-team-media { flex: 0 1 460px !important; min-width: 0; } .or-ff-team-img img { height: 100%; min-height: 814px; } .or-ff-team .or-ff-team-copy { padding-top: 41.5px; padding-bottom: 60px; } .or-ff-team-copy > .or-at-more-toggle + .or-ff-more { margin-top: 44px !important; } .or-ff-need-h + p { max-width: 316px; } .or-ff-reason-h + p { max-width: 260px; } .or-ff-unlock-title { max-width: 620px; } .or-ff-evo { margin-top: 0 !important; padding: 78px 24px 89px !important; border-radius: 35px; } .or-ff-evo > * { max-width: 630px; margin-inline: auto !important; } .or-ff-evo > .or-ff-evo-title { max-width: none; } .or-ff-evo-item { margin-top: 50px !important; } .or-ff-evo-item + .or-ff-evo-item { margin-top: 31px !important; } .or-ff-evo-h { padding-left: 54px; font-size: 24px; line-height: 29px; letter-spacing: 0; } .or-ff-evo-item > :not(.or-ff-evo-h) { margin-left: 54px !important; } .or-ff-evo-h { max-width: 524px; } .or-ff-evo-h + * { margin-top: 24px !important; } .or-ff-evo-list { max-width: none; padding-left: 26px; } .or-ff-evo-item > p { max-width: none; } .or-ff-evo-item > p + ul { margin-top: 22px !important; } .or-ff-evo > .or-ff-btns { margin-top: 55px !important; justify-content: center; } .or-ff-evo .or-ff-btns .wp-block-button__link { min-width: 382px; } .or-ff-evo > * { max-width: 760px; } .or-ff-evo > .or-ff-evo-title { max-width: 880px; } .or-ff-evo > .or-ff-evo-lead { margin-top: 40px !important; } .or-ff-evo > .or-ff-evo-lead + .or-ff-evo-lead { margin-top: 22px !important; } .or-ff-evo .or-ff-btns .wp-block-button__link { min-width: 180px; } } /* --- Firm of the Future parts -------------------------------------------------------------- */ :is(.or-ff-help, .or-ff-qa) { margin-block: 0 !important; } :is(.or-ff-help, .or-ff-qa) :is(h1, h2, h3, p, ul, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-ff-help, .or-ff-qa) :is(p, li) { font-size: 15px; line-height: 22px; } :is(.or-ff-help, .or-ff-qa) .wp-block-column { box-sizing: border-box; } /* Hero card holds the title only; the intro and its button follow. */ .or-ff-hero-card { padding-bottom: 0; } .or-ff-intro > .or-ff-btns { margin-top: 24px !important; justify-content: center; } /* "What is a firm of the future": the traits list sits under the lead, before the arrow items. */ .or-ff-evo > .or-ff-evo-traits { margin-top: 8px !important; padding-left: 23px; } .or-ff-evo-item > p + p { margin-top: 22px !important; } /* How fractional marketing helps: a light-blue panel in three parts. */ .or-ff-help { padding: 45px 0 0 !important; } .or-ff-help-panel { border-radius: 35px; background: var(--wp--preset--color--sky-deep); padding: 30px; } .or-ff-help-cols.wp-block-columns { margin: 0; gap: 22px !important; } .or-ff-help-col > * { margin-block: 0 !important; } .or-ff-help-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 26px; color: var(--wp--preset--color--navy); } .or-ff-help-list { margin-top: 8px !important; padding-left: 23px; } .or-ff-help-col { color: var(--wp--preset--color--navy); } /* Approach cards: one row, height from the copy. */ .or-ff-need-cards > .wp-block-column { height: auto !important; } /* Ready to become: two paragraphs. */ .or-ff-go-copy > p + p { margin-top: 22px !important; } /* Example outcomes: title, lead, list, button (image hidden on phones, as the services image). */ .or-ff-team-media { display: none; } .or-ff-team-copy { padding-top: 45px; } .or-ff-team-copy > .or-ff-out-lead { margin-top: 25px !important; } .or-ff-team-copy > .or-ff-out-list { margin-top: 8px !important; padding-left: 23px; } /* Questions CPA firms ask: an accordion like the FAQ. */ /* Space under the last question: the Get Started panel sat on its line (Anwar, 22 Sep). */ .or-ff-qa { padding: 50px 30px 45px !important; } .or-ff-qa-cols.wp-block-columns { margin: 0; gap: 20px !important; } .or-ff-qa-title { color: var(--wp--preset--color--navy); } .or-ff-qa .wp-block-details { margin-block: 0; } .or-ff-qa.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-ff-qa.or-faq .wp-block-details > :not(summary) { padding: 0 20px 12px 20px; } .or-ff-qa.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-ff-qa.or-faq .wp-block-details > summary + * { padding-top: 9.7px; } .or-ff-qa.or-faq .wp-block-details :is(p, li) { font-size: 16px; line-height: 24px; } .or-ff-qa.or-faq .wp-block-details > ul.wp-block-list { margin-top: 0; padding-left: 44.5px; } /* Get started: longer copy than the template. */ .or-ff-ready-copy > p + p { margin-top: 22px !important; } @media (min-width: 782px) { .or-ff-hero-card { padding-bottom: 20px; } .or-ff-title { max-width: 820px; } .or-ff-intro > .or-ff-btns { margin-top: 36px !important; } /* The button sat on the sky panel's edge (Anwar, 22 Sep): the page's 72px between sections. */ .or-ff-intro { padding-bottom: 72px !important; } .or-ff-intro .or-ff-btns .wp-block-button__link { min-width: 200px; padding-block: 10px; } .or-ff-evo > .or-ff-evo-traits { padding-left: 26px; } .or-ff-evo .or-ff-btns .wp-block-button__link { min-width: 382px; } .or-ff-help { padding: 72px 24px 72px !important; } .or-ff-help-panel { max-width: 1521px; margin: 0 auto !important; padding: 64px clamp(40px, 6vw, 120px); } .or-ff-help-cols.wp-block-columns { flex-wrap: nowrap !important; gap: clamp(32px, 4vw, 72px) !important; align-items: center !important; } .or-ff-help-head { flex: 0 1 400px !important; min-width: 0; } .or-ff-help-h { font-size: 30px; line-height: 38px; } .or-ff-help-col { flex: 1 1 0 !important; min-width: 0; } .or-ff-need { padding-bottom: 72px !important; } .or-ff-need-cards.wp-block-columns { max-width: 1521px; } .or-ff-need-cards > .wp-block-column { min-height: 280px; } .or-ff-need-card, .or-ff-need-card:first-child { padding: 40px clamp(30px, 3.4vw, 60px); } .or-ff-need-h { max-width: none; } .or-ff-need-h + p { margin-top: 20px !important; max-width: 360px; } .or-ff-team .or-ff-team-media { display: block; flex: 0 1 460px !important; min-width: 0; } .or-ff-team-img img { height: 100%; min-height: 560px; } .or-ff-team .or-ff-team-copy { display: flex; flex-direction: column; justify-content: center; padding: 60px 24px 60px clamp(40px, 7vw, 138px); } .or-ff-team-copy > .or-ff-out-lead { margin-top: 36px !important; } .or-ff-team-copy > .or-ff-btns { margin-top: 40px !important; } .or-ff-qa { padding: 110px 24px 72px !important; } .or-ff-qa-cols.wp-block-columns { max-width: 1227px; margin: 0 auto; gap: clamp(40px, 6vw, 110px) !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-ff-qa-head { flex: 0 1 400px !important; min-width: 0; } .or-ff-qa-list { flex: 1 1 0 !important; min-width: 0; } .or-ff-qa.or-faq summary { display: flex; align-items: center; min-height: 93.5px; padding: 18px 36px 18px 10px; font-size: 20px; line-height: 28.5px; } .or-ff-qa.or-faq details[open] > summary { padding-top: 11.2px; padding-bottom: 25px; } .or-ff-qa.or-faq summary::after { top: 32px; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } .or-ff-qa.or-faq .wp-block-details > :not(summary) { padding: 0 40px 20px 10px; } .or-ff-qa.or-faq .wp-block-details > summary + * { padding-top: 0; } .or-ff-qa.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-ff-qa.or-faq details[open] > :last-child { padding-bottom: 19.7px; } .or-ff-qa.or-faq .wp-block-details > p { max-width: 470px; } .or-ff-qa.or-faq .wp-block-details :is(p, li) { font-size: 15px; line-height: 22px; } .or-ff-qa.or-faq .wp-block-details > ul.wp-block-list { margin-top: 22px; padding-left: 35.5px; list-style: disc; } .or-ff-qa.or-faq .wp-block-details > ul.wp-block-list > li::before { content: none; } .or-ff-qa.or-faq details[open] > summary { padding-top: 18px; } .or-ff-ready-cols.wp-block-columns { height: auto; min-height: 555px; } .or-ff-ready-copy { padding-bottom: 48px; } .or-ff-ready-media { position: relative; } .or-ff-ready-media > .or-ff-ready-img { position: absolute; inset: 0; margin: 0 !important; } .or-ff-ready-img img { width: 100%; height: 100%; object-fit: cover; } .or-ff-ready-copy > .or-ff-btns { margin-top: 40px !important; } } @media (min-width: 782px) and (max-width: 1199px) { .or-ff-help-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 24px !important; align-items: flex-start !important; } .or-ff-help-head { flex: 0 0 100% !important; } } @media (min-width: 782px) and (max-width: 1023px) { .or-ff-qa-cols.wp-block-columns { flex-wrap: wrap !important; } .or-ff-qa-head { flex: 0 0 100% !important; } .or-ff-need-cards.wp-block-columns { flex-wrap: wrap !important; } .or-ff-need-cards > .wp-block-column { flex: 0 0 100% !important; min-height: 0; } } /* ===== page 18: INDUSTRIES | Logistics ======================================= * No frames: the Fintech section (page 16, itself EdTech's) renamed, without the sections this * page doesn't have, plus the parts at the end (Healthcare's expert section, the verticals panel). * Notes: logistics-design.md. */ :is(.or-lg-hero, .or-lg-intro, .or-lg-tiles-wrap, .or-lg-band, .or-lg-wwd, .or-lg-why, .or-lg-steps, .or-lg-ready, .or-lg-need, .or-lg-team, .or-lg-cost, .or-lg-reasons, .or-lg-go, .or-lg-unlock, .or-lg-expert, .or-lg-vert, .or-lg-speak, .or-lg-faq) { margin-block: 0 !important; } :is(.or-lg-hero, .or-lg-intro, .or-lg-tiles-wrap, .or-lg-band, .or-lg-wwd, .or-lg-why, .or-lg-steps, .or-lg-ready, .or-lg-need, .or-lg-team, .or-lg-cost, .or-lg-reasons, .or-lg-go, .or-lg-unlock, .or-lg-expert, .or-lg-vert, .or-lg-faq) :is(p, li) { font-size: 15px; line-height: 22px; } :is(.or-lg-hero, .or-lg-intro, .or-lg-tiles-wrap, .or-lg-band, .or-lg-wwd, .or-lg-why, .or-lg-steps, .or-lg-ready, .or-lg-need, .or-lg-team, .or-lg-cost, .or-lg-reasons, .or-lg-go, .or-lg-unlock, .or-lg-expert, .or-lg-vert, .or-lg-speak, .or-lg-faq) :is(h1, h2, h3, p, ul, figure, hr, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-lg-tiles-wrap, .or-lg-wwd, .or-lg-why, .or-lg-steps, .or-lg-ready, .or-lg-need, .or-lg-team, .or-lg-cost, .or-lg-reasons, .or-lg-go, .or-lg-unlock, .or-lg-expert, .or-lg-vert, .or-lg-faq) .wp-block-column { box-sizing: border-box; } .or-lg-h, .or-lg-title { font-size: 25px; line-height: 30px; } .or-lg-btns .wp-block-button__link { padding: 4.5px 21px; box-sizing: border-box; font-size: 16px; } :where(.or-lg-hero, .or-lg-tiles-wrap, .or-lg-why, .or-lg-ready, .or-lg-team, .or-lg-faq) figure img { display: block; width: 100%; height: auto; } /* --- hero ------------------------------------------------------------------- */ .or-lg-hero { padding: 0; } .or-lg-hero-img img { aspect-ratio: 320 / 316; object-fit: cover; border-radius: 35px; } .or-lg-hero-card { margin-top: 0 !important; padding: 28.4px 30px 0; text-align: center; } .or-lg-title { color: var(--wp--preset--color--black); } .or-lg-hero-card > .or-lg-btns { margin-top: 24.7px; } .or-lg-intro { padding: 27.8px 35px 0 30px !important; } @media (max-width: 781px) { /* The phone frame keeps the service lists collapsed too: three lines and a bold toggle. */ .or-lg-more.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* The frame shows each list's title and subtitle; the first title takes two lines. */ .or-lg-team-copy .or-at-more-toggle { display: block; margin: 0 !important; padding: 0; border: 0; background: none; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 15px; line-height: 22px; color: var(--wp--preset--color--navy); cursor: pointer; } } :is(.or-lg-why-card, .or-lg-step) p { color: var(--wp--preset--color--black); } /* --- why SaaS companies need fractional teams --------------------------------------------- */ .or-lg-need { padding: 47.6px 0 45px !important; } .or-lg-need > * { margin-block: 0 !important; } .or-lg-need-title, .or-lg-need-lead { padding: 0 30px; } .or-lg-need-title { max-width: 250px; margin-inline: auto !important; padding: 0 !important; text-align: center; color: var(--wp--preset--color--black); } .or-lg-need-lead { margin-top: 25px !important; } .or-lg-need-cards.wp-block-columns { margin: 25.2px 0 0 !important; gap: 24.7px !important; } .or-lg-need-cards + .or-lg-need-cards.wp-block-columns { margin-top: 24.7px !important; } .or-lg-need-card { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--sky-deep); padding: 30px 30px 29px; } .or-lg-need-card > * { margin-block: 0 !important; } .or-lg-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 600; font-size: 15px; line-height: 22.4px; color: var(--wp--preset--color--navy); } .or-lg-need-h + p { margin-top: 18.8px !important; } /* --- expert leadership + unlock band ------------------------------------------------------ */ .or-lg-unlock { padding: 50px 30px 49.9px !important; text-align: center; } .or-lg-unlock-title { max-width: 260px; margin-inline: auto !important; } .or-lg-unlock > .or-lg-btns { margin-top: 30px !important; } .or-lg-team-copy > .or-lg-team-sub { margin-top: 40px !important; } /* --- get started (magenta) ------------------------------------------------------------------ */ .or-lg-go { padding: 48.9px 30px 48.2px !important; text-align: center; } .or-lg-go-copy { text-align: left; } .or-lg-go-title { max-width: 260px; margin-inline: auto !important; } .or-lg-go-cols.wp-block-columns { margin: 0; gap: 31.3px !important; } .or-lg-go-cols .wp-block-column > * { margin-block: 0 !important; } .or-lg-go-copy > .or-lg-btns { margin-top: 29px !important; } /* --- services: collapsible lists ---------------------------------------------------------------------- */ .or-lg-team { padding: 0 0 46.7px; } .or-lg-team-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-lg-team-copy { padding: 39.6px 30px 0; } .or-lg-team-copy > * { margin-block: 0 !important; } .or-lg-team-title { text-align: center; color: var(--wp--preset--color--black); } .or-lg-team-copy > .or-lg-team-sub + .or-lg-more { margin-top: 40.4px !important; } .or-lg-team-copy > .or-at-more-toggle + .or-lg-more, .or-lg-team-copy > .or-lg-more + .or-lg-more { margin-top: 23px !important; } .or-lg-team-copy > .or-lg-btns { margin-top: 39.6px !important; } .or-lg-team-copy > .or-lg-team-title + .or-lg-more { margin-top: 42.4px !important; } /* --- cost comparison ------------------------------------------------------------------------ */ .or-lg-cost { padding: 53px 0 0 !important; } .or-lg-cost-title { max-width: 240px; margin-inline: auto !important; text-align: center; color: var(--wp--preset--color--navy); } .or-lg-cost-panel { margin-top: 25px !important; border-radius: 35px; background: #def1ff; padding: 26.6px 30px 25.3px; } .or-lg-cost-cols.wp-block-columns { margin: 0; gap: 24.8px !important; } .or-lg-cost-cols > .or-lg-cost-head { margin-bottom: 5.1px; } .or-lg-cost-col > * { margin-block: 0 !important; } .or-lg-cost-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28.3px; color: var(--wp--preset--color--navy); } .or-lg-cost-label { font-size: 18px !important; line-height: 25.9px !important; letter-spacing: 0.05em; } .or-lg-cost-list { margin-top: 11.6px !important; padding-left: 24.1px; } /* --- why choose One Rawr for SaaS ------------------------------------------------------------ */ .or-lg-reasons { margin-top: 53.5px !important; padding: 50px 0 63.4px !important; text-align: center; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-lg-reasons > * { margin-block: 0 !important; } .or-lg-reasons > .or-lg-reasons-sub { margin-top: 27.1px !important; padding: 0 30px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26.6px; letter-spacing: 0.05em; color: var(--wp--preset--color--white); } .or-lg-reasons-title { max-width: 260px; margin-inline: auto !important; color: var(--wp--preset--color--white); } .or-lg-reasons-row.wp-block-columns { margin-top: 25.5px !important; gap: 24.6px !important; } .or-lg-reasons-row + .or-lg-reasons-row.wp-block-columns { margin-top: 24.6px !important; } .or-lg-reason { box-sizing: border-box; border-radius: 35px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); padding: 29.9px 30px 28.1px; } .or-lg-reason > * { margin-block: 0 !important; } .or-lg-reason-num { width: 85px; height: 85px; margin: 0 auto !important; border-radius: 50%; background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--white); font-size: 37px !important; line-height: 85px !important; } .or-lg-reason-h { margin-top: 24.5px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; } .or-lg-reason-h + p { margin-top: 26.5px !important; } /* --- speak / FAQ -------------------------------------------------------------------------------- */ .or-lg-speak { padding: 39.3px 4px 0 !important; } .or-lg-speak-title { text-align: center; color: var(--wp--preset--color--black); } .or-lg-speak > .or-lg-h + * { margin-top: 30px !important; } .or-lg-speak .meetings-iframe-container iframe { display: block; width: 100%; } .or-lg-faq { padding: 0 30px 63.4px !important; } .or-lg-faq-media { display: none; } .or-lg-dbr { display: none; } .or-lg-faq .or-lg-faq-cols.wp-block-columns { margin: 0; gap: 0 !important; } .or-lg-faq .or-lg-faq-list > .or-lg-h { font-size: 27px; line-height: 1.05; margin: 10.5px 0 0; padding-left: 17px; color: var(--wp--preset--color--navy); } .or-lg-faq .or-lg-faq-list > .or-lg-h + .wp-block-details { margin-top: 20px; } .or-lg-faq .wp-block-details { margin-block: 0; } .or-lg-faq.or-faq summary { box-sizing: border-box; min-height: 87px; padding: 20px 76px 11px 20px; font-size: 20px; line-height: 24px; } .or-lg-faq.or-faq .wp-block-details > :not(summary) { padding: 0 20px 12px 20px; } .or-lg-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-lg-faq.or-faq .wp-block-details > summary + * { padding-top: 9.7px; } .or-lg-faq.or-faq .wp-block-details :is(p, li) { font-size: 16px; line-height: 24px; } /* Phone frame: a normal list, bullets hanging at x60 and text from x74.5. */ .or-lg-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 0; padding-left: 44.5px; } /* ----------------------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-lg-h, .or-lg-title { font-size: 40px; line-height: 48px; } .or-lg-btns .wp-block-button__link { padding: 10.5px 26px; } .or-main .or-lg-btns > .wp-block-button, .or-main .or-lg-btns > .wp-block-button .wp-block-button__link { width: auto; } /* Hero: 433px photo, 980px white card lifted 194px over it; copy centred. */ /* Like the live page: the square stock image cropped to the band from its centre, so narrower screens still show the whole composition; all four corners rounded. */ .or-lg-hero-img img { height: 433px; object-fit: cover; object-position: 50% 50%; border-radius: 35px; } .or-lg-hero-img.or-only-mobile { display: none; } .or-lg-hero-card { position: relative; box-sizing: border-box; width: min(980px, calc(100% - 48px)); margin: -194px auto 0 !important; border-radius: 35px 35px 0 0; background: var(--wp--preset--color--white); padding: 63px 24px 0; } .or-lg-title { max-width: 745px; margin-inline: auto !important; color: var(--wp--preset--color--navy); } .or-lg-hero-card > .or-lg-btns { margin-top: 50.5px; justify-content: center; } .or-lg-hero .or-lg-btns .wp-block-button__link { min-width: 221px; padding-block: 10px; } .or-lg-intro { padding: 53.75px 24px 0 !important; text-align: center; } .or-lg-intro > p { max-width: 760px; margin-inline: auto !important; line-height: 22.2px !important; } .or-lg-reasons-title { padding: 0; } .or-lg-go-title { max-width: 460px; margin-inline: 0 !important; } /* Unlock: full-width navy band, 35px corners, 328 tall. */ .or-lg-unlock { padding: 62.5px 28.5px 47px 19.5px !important; border-radius: 0; text-align: center; } .or-lg-unlock-title { max-width: 680px; margin-inline: auto !important; } .or-lg-unlock > .or-lg-btns { margin-top: 28.5px !important; justify-content: center; } .or-lg-unlock .or-lg-btns .wp-block-button__link { min-width: 161px; padding-block: 10px; } /* Why SaaS needs: centred heading and lead, 568x420 cards across x84..1838. */ .or-lg-need { padding: 81.5px 24px 67px !important; text-align: center; } .or-lg-need-title { color: var(--wp--preset--color--navy); text-align: center; max-width: 760px; margin-inline: auto !important; padding: 0; } .or-lg-need-lead { max-width: 730px; margin: 16.5px auto 0 !important; padding: 0; } .or-lg-need-cards.wp-block-columns { max-width: 1754px; margin: 40.5px auto 0 !important; gap: 25px !important; flex-wrap: nowrap !important; text-align: left; } .or-lg-need-cards + .or-lg-need-cards.wp-block-columns { margin-top: 25px !important; } .or-lg-need-cards > .wp-block-column { flex: 0 0 calc((100% - 50px) / 3) !important; min-width: 0; min-height: 420px; } /* Copy sits in the vertical middle of each card, as in the frame; the first column starts at x208. */ .or-lg-need-card { display: flex; flex-direction: column; justify-content: center; padding: 0 40px 0 134px; } .or-lg-need-card:first-child { padding-left: 125.5px; } .or-lg-need-h { font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; max-width: 310px; } .or-lg-need-h + p { margin-top: 32px !important; max-width: 316px; } /* Services: photo x5..728 (814 tall, 35px corners) right under the navy band, grey panel x728..1917, copy from x866. The list gaps vary in the frame; each is set as drawn. */ .or-lg-team { padding: 0 3px 0 5px; } .or-lg-team-cols.wp-block-columns { flex-wrap: nowrap !important; gap: 0 !important; } .or-lg-team-media { display: block; flex: 0 0 723px !important; } .or-lg-team-img img { height: 814px; object-fit: cover; border-radius: 35px; } .or-lg-team-copy { flex: 1 1 auto !important; padding: 41.5px 24px 0 138px; background: #fafafa; } .or-lg-team-copy .or-at-more-toggle { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; } .or-lg-team-copy .or-at-more-toggle { text-decoration: none; color: var(--wp--preset--color--navy); } .or-lg-team-copy > * { max-width: 560px; } .or-lg-team-title { max-width: 700px !important; text-align: left; color: var(--wp--preset--color--black); } .or-lg-team-copy > .or-lg-team-title + .or-lg-more { margin-top: 54.5px !important; } .or-lg-team-copy > .or-at-more-toggle + .or-lg-more { margin-top: 44px !important; } .or-lg-team .or-lg-btns .wp-block-button__link { min-width: 228.5px; padding-block: 10px; } .or-lg-team-copy > .or-lg-btns { margin-top: 45px !important; } /* Cost: centred heading, sky panel x83..1837, 508 tall. */ /* Cost: centred heading, sky panel x83..1837, 508 tall; columns from x348 / x893 / x1273. */ .or-lg-cost { padding: 86.5px 24px 0 !important; } .or-lg-cost-title { max-width: 600px; margin: 0 auto !important; padding: 0; text-align: center; } .or-lg-cost-panel { max-width: 1754px !important; min-height: 508px; box-sizing: border-box; margin: 69.5px auto 0 !important; padding: 117px 24px 0 265px; } .or-lg-cost-cols.wp-block-columns { gap: 0 !important; flex-wrap: nowrap !important; } .or-lg-cost-head { flex: 0 0 545px !important; } .or-lg-cost-h { max-width: 470px; font-size: 40px; line-height: 48px; } .or-lg-cost-cols > .or-lg-cost-head { margin-bottom: 0; } .or-lg-cost-inhouse { flex: 0 0 380px !important; padding-top: 0; } .or-lg-cost-list { max-width: 290px; } .or-lg-cost-inhouse .or-lg-cost-list { max-width: 292.5px; } .or-lg-cost-rawr { flex: 0 0 330px !important; padding-top: 0; } .or-lg-cost-label { max-width: 300px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px !important; line-height: 28px !important; letter-spacing: 0; } .or-lg-cost-list { margin-top: 27.5px !important; padding-left: 22.5px; } .or-lg-cost-list li { font-size: 15px !important; line-height: 21px !important; } /* Reasons: heading and subheading on white, then a full-width navy band (8309..9372) holding 320px white cards at x470 / 799 / 1130. */ .or-lg-reasons { margin-top: 0 !important; padding: 93.5px 0 0 !important; background: none; color: var(--wp--preset--color--navy); } .or-lg-reasons-title { max-width: 780px; margin-inline: auto !important; padding: 0; color: var(--wp--preset--color--navy); } .or-lg-reasons > .or-lg-reasons-sub { max-width: none; margin: 56.5px auto 0 !important; padding: 0 24px; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; color: var(--wp--preset--color--navy); } .or-lg-reasons > .or-lg-reasons-band { max-width: none !important; margin: 86px 0 0 !important; padding: 91px 24px 67px; background: var(--wp--preset--color--navy); } .or-lg-reasons-row.wp-block-columns { max-width: 980px; margin: 0 auto !important; gap: 10px !important; flex-wrap: nowrap !important; } .or-lg-reasons-row + .or-lg-reasons-row.wp-block-columns { margin-top: 82px !important; } .or-lg-reasons-row > .wp-block-column { flex: 1 1 0; min-width: 0; } .or-lg-reason { min-height: 425px; padding: 0 20px 40px; margin-top: 26px; } .or-lg-reasons-row + .or-lg-reasons-row > .or-lg-reason { min-height: 396px; padding-bottom: 25px; } .or-lg-reason-num { width: 84px; height: 84px; margin: -26px auto 0 !important; font-size: 36px !important; line-height: 84px !important; } .or-lg-reason-h { max-width: 265px; margin: 31px auto 0 !important; font-family: var(--wp--preset--font-family--figtree); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: 0; } .or-lg-reason-h + p { max-width: 267px; margin: 22px auto 0 !important; } /* Ready to elevate: navy band 544 tall, heading x494, copy x1014. */ .or-lg-go { padding: 171.5px 20px 172px 28px !important; text-align: left; } .or-lg-go-cols.wp-block-columns { max-width: 940px; margin: 0 auto; gap: 0 !important; flex-wrap: nowrap !important; } .or-lg-go-head { flex: 0 0 520px !important; } .or-lg-go-title { max-width: 410px; } .or-lg-go-copy { flex: 0 0 420px !important; padding-top: 1px; } .or-lg-go-copy > p { max-width: 418px; line-height: 21.75px !important; } .or-lg-go-copy > .or-lg-btns { margin-top: 45.75px !important; } .or-lg-go .or-lg-btns .wp-block-button__link { min-width: 174.5px; padding-block: 10px; } .or-lg-speak { padding: 97.5px 24px 0 !important; } .or-lg-speak-title { color: var(--wp--preset--color--navy); } .or-lg-speak > .or-lg-h + * { margin-top: 60px !important; max-width: 855px; margin-inline: auto !important; } .or-lg-faq { padding: 16px 24px 100px !important; } .or-lg-dbr { display: inline; } .or-lg-faq .or-lg-faq-cols.wp-block-columns { max-width: 953px; margin: 0 auto; gap: 53px !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .or-lg-faq-media { display: block; flex: 0 0 350px !important; } .or-lg-faq-img-top img { height: 632px; object-fit: cover; border-radius: 30px; } .or-lg-faq-img-bottom { margin-top: 42px !important; } .or-lg-faq-img-bottom img { height: 374px; object-fit: cover; border-radius: 30px; } .or-lg-faq-cols > .or-lg-faq-list.wp-block-column { flex: 1 1 550px !important; min-width: 0; } .or-lg-faq .or-lg-faq-list > .or-lg-h { font-size: 40px; line-height: 48px; margin-top: -5px; padding-left: 0; } .or-lg-faq .or-lg-faq-list > .or-lg-h + .wp-block-details { margin-top: 19.5px; } .or-lg-faq.or-faq summary { display: flex; align-items: center; min-height: 93.5px; padding: 18px 36px 18px 10px; font-size: 20px; line-height: 28.5px; } .or-lg-faq.or-faq details[open] > summary { padding-top: 11.2px; padding-bottom: 25px; } .or-lg-faq.or-faq summary::after { top: 32px; right: 18.4px; width: 11.5px; height: 11.5px; margin-top: -1.8px; border-width: 0 1.5px 1.5px 0; } .or-lg-faq.or-faq .wp-block-details > :not(summary) { padding: 0 40px 20px 10px; } .or-lg-faq.or-faq .wp-block-details > summary + * { padding-top: 0; } .or-lg-faq.or-faq .wp-block-details > :not(summary):not(:last-child) { padding-bottom: 0; } .or-lg-faq.or-faq details[open] > :last-child { padding-bottom: 19.7px; } .or-lg-faq.or-faq .wp-block-details > p { max-width: 470px; } .or-lg-faq.or-faq .wp-block-details :is(p, li) { font-size: 15px; line-height: 22px; } .or-lg-faq.or-faq .wp-block-details > ul.wp-block-list { margin-top: 22px; padding-left: 35.5px; list-style: disc; } .or-lg-faq.or-faq .wp-block-details > ul.wp-block-list > li::before { content: none; } } /* Between the phone layout and the 1920 frame: the same desktop design, with the fixed frame widths allowed to shrink and the widest rows stacked, so nothing runs off the screen. */ @media (min-width: 782px) and (max-width: 1919px) { .or-lg-team { padding-left: clamp(24px, 4.4vw, 84px); } .or-lg-team-media { flex: 0 1 652px !important; min-width: 0; } .or-lg-team-copy { min-width: 0; padding-left: clamp(40px, 9.3vw, 178px); } .or-lg-cost-panel { height: auto; min-height: 508px; padding: 85px 40px 60px clamp(40px, 15.1vw, 290px); } .or-lg-cost-head { flex: 0 1 476px !important; min-width: 0; padding-right: 24px; } .or-lg-cost-inhouse { flex: 0 1 390px !important; min-width: 0; padding-right: 24px; } .or-lg-cost-rawr { flex: 0 1 300px !important; min-width: 0; } .or-lg-need-card { padding: 40px clamp(30px, 3.1vw, 60px) 40px clamp(30px, 7vw, 134px); } } @media (min-width: 782px) and (max-width: 1279px) { } @media (min-width: 782px) and (max-width: 1199px) { .or-lg-cost-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; } .or-lg-cost-head { flex: 0 0 100% !important; } .or-lg-cost-inhouse, .or-lg-cost-rawr { flex: 1 1 0 !important; } .or-lg-cost-panel { padding-left: 60px; } .or-lg-go-cols.wp-block-columns { flex-wrap: wrap !important; row-gap: 32px !important; max-width: 640px; } .or-lg-go-head, .or-lg-go-copy { flex: 0 0 100% !important; } .or-lg-need-cards > .wp-block-column { height: auto; min-height: 360px; } } @media (min-width: 782px) and (max-width: 1023px) { .or-lg-team-media { display: none; } .or-lg-team { padding-left: 0; } .or-lg-team-copy { padding: 60px 40px; } .or-lg-team-copy > * { max-width: 640px; } } @media (min-width: 782px) and (max-width: 959px) { .or-lg-need-cards.wp-block-columns { flex-wrap: wrap !important; justify-content: center; row-gap: 25px !important; } .or-lg-need-cards > .wp-block-column { flex: 0 0 calc(50% - 12.5px) !important; min-height: 300px; } } @media (min-width: 782px) and (max-width: 1919px) { .or-lg-need-cards > .or-lg-need-card, .or-lg-need-cards > .or-lg-need-card:first-child { padding: 40px clamp(24px, 3.1vw, 40px) 40px clamp(24px, 6.5vw, 125.5px); } } /* --- carried over from Fintech ------------------------------------------------------------- */ :is(.or-lg-evo) :is(h1, h2, h3, p, ul, figure, hr, .wp-block-buttons, .wp-block-columns) { margin-block: 0; } :is(.or-lg-evo) :is(p, li) { font-size: 15px; line-height: 22px; } /* The services image is an abstract graphic: hidden on phones, as on the SaaS and Healthcare pages. */ .or-lg-team-media { display: none; } .or-lg-team-copy { padding-top: 45px; } /* The sky panel (Accounting's "industry is evolving" section, on sky-deep): Built for Growth. */ .or-lg-evo { margin-top: 44.8px !important; padding: 39.5px 30px 46.2px !important; background: var(--wp--preset--color--sky); } .or-lg-evo > * { margin-block: 0 !important; } .or-lg-evo-title { text-align: center; color: var(--wp--preset--color--navy); } .or-lg-evo > .or-lg-btns { margin-top: 18px !important; } .or-lg-evo { background: var(--wp--preset--color--sky-deep); } .or-lg-evo > .or-lg-evo-lead { margin-top: 20px !important; } .or-lg-evo > .or-lg-evo-lead + .or-lg-evo-lead { margin-top: 22px !important; } @media (min-width: 782px) { .or-lg-team-media { display: block; } /* Narrow services image, as Harps asked for the SaaS page (19 Sep 2026). */ .or-lg-team .or-lg-team-media { flex: 0 1 460px !important; min-width: 0; } .or-lg-team-img img { height: 100%; min-height: 814px; } .or-lg-team .or-lg-team-copy { padding-top: 41.5px; padding-bottom: 60px; } .or-lg-team-copy > .or-at-more-toggle + .or-lg-more { margin-top: 44px !important; } .or-lg-need-h + p { max-width: 316px; } .or-lg-reason-h + p { max-width: 260px; } .or-lg-unlock-title { max-width: 620px; } .or-lg-evo { margin-top: 0 !important; padding: 78px 24px 89px !important; border-radius: 35px; } .or-lg-evo > * { max-width: 630px; margin-inline: auto !important; } .or-lg-evo > .or-lg-evo-title { max-width: none; } .or-lg-evo > .or-lg-btns { margin-top: 55px !important; justify-content: center; } .or-lg-evo .or-lg-btns .wp-block-button__link { min-width: 382px; } .or-lg-evo > * { max-width: 760px; } .or-lg-evo > .or-lg-evo-title { max-width: 880px; } .or-lg-evo > .or-lg-evo-lead { margin-top: 40px !important; } .or-lg-evo > .or-lg-evo-lead + .or-lg-evo-lead { margin-top: 22px !important; } .or-lg-evo .or-lg-btns .wp-block-button__link { min-width: 180px; } } /* --- Logistics parts ----------------------------------------------------------------------- */ /* Win more business: Healthcare's expert section (heading, lead, check lines, button). */ .or-lg-expert > *, .or-lg-unlock > * { margin-block: 0 !important; } .or-lg-expert { padding: 45.9px 30px 44.3px !important; } .or-lg-expert-title { color: var(--wp--preset--color--black); } .or-lg-expert > .or-lg-expert-lead { margin-top: 26.5px !important; } .or-lg-expert > .or-lg-expert-checks { margin-top: 21.4px !important; } .or-lg-expert > .or-lg-btns { margin-top: 24.1px !important; } .or-lg-expert .or-lg-btns .wp-block-button__link { padding-block: 9px; } /* Under the hero card (more room above, Anwar 22 Sep: 75px); on phones the sky panel's own 45px margin gives the gap below. */ .or-lg-expert { padding: 75px 30px 0 !important; } /* Built for growth: the sky panel (Fintech's evolving section) with a title and two paragraphs. */ .or-lg-evo-title { max-width: 260px; margin-inline: auto !important; } /* Experience across verticals: a sky panel with six round photos, two across on phones. */ .or-lg-vert { padding: 39.5px 30px 46.2px !important; background: var(--wp--preset--color--sky-deep); } .or-lg-vert > * { margin-block: 0 !important; } .or-lg-vert-title { max-width: 260px; margin-inline: auto !important; text-align: center; color: var(--wp--preset--color--navy); } .or-lg-vert > .or-lg-vert-lead { margin-top: 20px !important; } .or-lg-vert > .or-lg-vert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; margin-top: 32px !important; } .or-lg-vert-grid > .or-lg-vert-item { margin: 0 !important; text-align: center; } .or-lg-vert-item > * { margin-block: 0 !important; } .or-lg-vert-img { margin: 0 !important; } .or-lg-vert-img img { display: block; width: 100px !important; height: 100px !important; margin: 0 auto; border-radius: 50%; object-fit: cover; } .or-lg-vert-h { margin-top: 12px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: 0.05em; color: var(--wp--preset--color--navy); } /* Keeps "Full-Time" whole in the reasons heading (it broke after the hyphen at 1920). */ .or-lg-nw { white-space: nowrap; } @media (min-width: 782px) { .or-lg-expert { padding: 73.5px 9px 62px 24px !important; text-align: center; } .or-lg-expert-title { max-width: none; color: var(--wp--preset--color--navy); } .or-lg-expert > .or-lg-expert-lead { max-width: 560px; margin: 23.5px auto 0 !important; } .or-lg-expert > .or-lg-expert-checks { margin-top: 24px !important; } .or-lg-expert > .or-lg-btns { margin-top: 37.5px !important; justify-content: center; } .or-lg-expert .or-lg-btns .wp-block-button__link { padding-block: 10px; } /* Above: 110px under the hero button (Anwar asked twice for more room, 22 Sep); below: 72px to the sky panel. */ .or-lg-expert { padding: 110px 24px 72px !important; } .or-lg-expert-title { max-width: 820px; margin-inline: auto !important; } .or-lg-expert > .or-lg-expert-lead { max-width: 760px; } .or-lg-expert .or-lg-btns .wp-block-button__link { min-width: 200px; } .or-lg-evo { text-align: center; } .or-lg-evo > .or-lg-evo-title { max-width: 620px; } .or-lg-vert { padding: 78px 24px 89px !important; border-radius: 35px; } .or-lg-vert > * { max-width: 760px; margin-inline: auto !important; } .or-lg-vert > .or-lg-vert-title { max-width: 880px; } .or-lg-vert > .or-lg-vert-lead { margin-top: 40px !important; text-align: center; } .or-lg-vert > .or-lg-vert-grid { max-width: 1020px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; margin-top: 56px !important; } .or-lg-vert-img img { width: 121px !important; height: 121px !important; } .or-lg-vert-h { margin-top: 18px !important; font-size: 20px; line-height: 28px; letter-spacing: 0; } /* Services: four lists, so the image takes the grey panel's height rather than the template's 814px. */ .or-lg-team .or-lg-team-media { position: relative; } .or-lg-team-media > .or-lg-team-img { position: absolute; inset: 0; margin: 0 !important; } .or-lg-team-img img { height: 100%; min-height: 0; } } /* ===== page 19: HOME ======================================================== * Desktop: the 1920 frame (designs/Homepage/UI), which is the live homepage at 1920 with rounded * panels. Type sizes and letter spacing come from the live page; positions were measured on the * frame and each margin set from glyph positions (Questrial: ascent .82, descent .21, cap .672, * ascender .703). Between 782 and 1919 the frame's column splits and indents scale with the width. * Phones: the mobile frame, in its section order (hero, eliminate, tiles, specializations, work, * help, time, different, create, serve, testimonials, FAQ, blog cards, let's talk), with its line spacing; * the FAQ follows the live page (the frame's FAQ text is broken mid-word). Notes: home-design.md. */ :is(.or-hm-hero, .or-hm-tiles-wrap, .or-hm-elim, .or-hm-work, .or-hm-spec, .or-hm-quotes, .or-hm-help, .or-hm-time, .or-hm-diff, .or-hm-serve, .or-hm-create, .or-hm-talk, .or-hm-blog, .or-hm-faq) { margin-block: 0 !important; } :is(.or-hm-hero, .or-hm-tiles-wrap, .or-hm-elim, .or-hm-work, .or-hm-spec, .or-hm-quotes, .or-hm-help, .or-hm-time, .or-hm-diff, .or-hm-serve, .or-hm-create, .or-hm-talk, .or-hm-blog) :is(h1, h2, h3, p, figure, hr, .wp-block-buttons, .wp-block-columns, .wp-block-group) { margin-block: 0; } :is(.or-hm-hero, .or-hm-tiles-wrap, .or-hm-elim, .or-hm-work, .or-hm-spec, .or-hm-quotes, .or-hm-help, .or-hm-time, .or-hm-diff, .or-hm-serve, .or-hm-create, .or-hm-talk, .or-hm-blog) :is(h1, h2, h3) { font-family: var(--wp--preset--font-family--questrial); font-weight: 400; } :is(.or-hm-hero, .or-hm-tiles-wrap, .or-hm-elim, .or-hm-work, .or-hm-spec, .or-hm-quotes, .or-hm-help, .or-hm-time, .or-hm-diff, .or-hm-serve, .or-hm-create, .or-hm-talk, .or-hm-blog) .wp-block-column { box-sizing: border-box; min-width: 0; } :is(.or-hm-hero, .or-hm-tiles-wrap, .or-hm-elim, .or-hm-work, .or-hm-spec, .or-hm-help, .or-hm-serve, .or-hm-create) figure img { display: block; } .or-hm-h { color: var(--wp--preset--color--black); } /* Buttons: Questrial pills, 160x40.5 on phones (the frame) and 164x45 on desktop (the live page). */ .or-hm-btns { gap: 0 !important; } .or-hm-btns .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 40.5px; padding: 0 10px; border-radius: 35px; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 16px; line-height: 24px; white-space: nowrap; } .or-main .or-hm-btns > .wp-block-button { width: auto; } .or-main .or-hm-btns > .wp-block-button .wp-block-button__link { width: 160px; } /* Phones: the frame's section order. The markup keeps the desktop order. */ @media (max-width: 781px) { .wp-block-post-content:has(> .or-hm-hero) { display: flex; flex-direction: column; } .or-hm-hero { order: 1; } .or-hm-elim { order: 2; } .or-hm-tiles-wrap { order: 3; } .or-hm-spec { order: 4; } .or-hm-work { order: 5; } .or-hm-help { order: 6; } .or-hm-time { order: 7; } .or-hm-diff { order: 8; } .or-hm-create { order: 9; } .or-hm-serve { order: 10; } .or-hm-quotes { order: 11; } .or-hm-faq { order: 12; } .or-hm-blog { order: 13; } .or-hm-talk { order: 14; } } /* --- hero ---------------------------------------------------------------------------- */ .or-hm-hero-cols.wp-block-columns { margin: 0 !important; gap: 0 !important; } .or-hm-hero-media { display: none; } .or-hm-hero-copy { padding: 20.3px 20px 30.6px; border-radius: 35px; background: #f0f0f0; } .or-hm-title { font-size: 30px; line-height: 32.3px; letter-spacing: -0.05em; color: var(--wp--preset--color--black); } .or-hm-hero-lead { font-size: 16px; line-height: 21.7px; letter-spacing: -0.01em; color: var(--wp--preset--color--black); } .or-hm-hero-copy > .or-hm-title + .or-hm-hero-lead { margin-top: 11.7px !important; } .or-hm-hero-copy > .or-hm-btns { margin-top: 25.8px !important; justify-content: center; } .or-main .or-hm-hero .or-hm-btns .wp-block-button__link { font-size: 14px; border-radius: 30px; } /* --- about / who we are / who we support ----------------------------------------------- */ .or-hm-tiles-wrap { padding: 11px 0 0; } .or-hm-tiles.wp-block-columns { margin: 0 !important; gap: 0 !important; } .or-hm-tile { border-radius: 35px; } .or-hm-tile-about { padding: 20px 20px 42.5px; background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--white); } .or-hm-tile-who, .or-hm-tile-support { background: var(--wp--preset--color--sky-deep); color: var(--wp--preset--color--navy); } .or-hm-tiles > .or-hm-tile-who { margin-top: 11.6px !important; padding: 20.7px 20px 19.6px; } .or-hm-tiles > .or-hm-tile-support { margin-top: 21.5px !important; padding: 20.3px 20px 14.2px; } .or-hm-tile-h { font-size: 23px; line-height: 23.4px; letter-spacing: -0.02em; color: var(--wp--preset--color--black); } .or-hm-tile-about .or-hm-tile-h { color: var(--wp--preset--color--white); } .or-hm-tile-who .or-hm-tile-h { line-height: 25px; } .or-hm-tile-support .or-hm-tile-h { font-size: 22px; line-height: 22.1px; } .or-hm-tile p { font-size: 16px; line-height: 22.2px; } .or-hm-tile-about > .or-hm-tile-h + p { letter-spacing: -0.01em; } .or-hm-tile > .or-hm-tile-h + p { margin-top: 10.9px !important; } .or-hm-tile-who > .or-hm-tile-h + p { margin-top: 8.3px !important; } .or-hm-tile-support > .or-hm-tile-h + p { margin-top: 11.9px !important; } /* --- eliminate the limitations (grey + navy) ---------------------------------------------- */ .or-hm-elim { padding: 32px 0 0; } .or-hm-elim-cols.wp-block-columns { margin: 0 !important; gap: 0 !important; } .or-hm-elim-copy { padding: 18.8px 20px 20.8px; border-radius: 35px; background: #f0f0f0; } .or-hm-elim-title { font-size: 25px; line-height: 27.6px; letter-spacing: -0.05em; } .or-hm-elim-copy > p { font-size: 14px; line-height: 19px; letter-spacing: -0.01em; color: var(--wp--preset--color--black); } .or-hm-elim-copy > .or-hm-elim-title + p { margin-top: 9px !important; } .or-hm-elim-copy > p + p { margin-top: 19px !important; } .or-hm-elim-copy > .or-hm-btns { margin-top: 20.7px !important; justify-content: center; } .or-main .or-hm-elim .or-hm-btns > .wp-block-button .wp-block-button__link { width: 140px; font-size: 15px; } .or-hm-elim-items { padding: 28.6px 20px 20.5px; border-radius: 35px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-hm-elim-head.is-layout-flex { display: block; } .or-hm-elim-icon img { width: 40px; height: 40px; } .or-hm-elim-head > .or-hm-elim-label { margin-top: 10.7px !important; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; color: var(--wp--preset--color--white); } .or-hm-elim-item > .or-hm-elim-h { margin-top: 10.1px !important; font-size: 22px; line-height: 30px; letter-spacing: -0.04em; color: var(--wp--preset--color--white); } .or-hm-elim-item > .or-hm-elim-text { margin-top: 9.7px !important; font-size: 14px; line-height: 18px; letter-spacing: -0.01em; } .or-hm-elim-items > .or-hm-elim-rule { box-sizing: border-box; width: auto !important; max-width: none !important; height: 1.5px; margin: 20.1px 0 24.8px !important; border: 0 !important; background: var(--wp--preset--color--white) !important; opacity: 1; } /* --- our work ----------------------------------------------------------------------------- */ .or-hm-work-cols.wp-block-columns { margin: 0 !important; gap: 0 !important; } .or-hm-work-intro { padding: 40px 20px 53.9px; border-radius: 35px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .or-hm-work-title { font-size: 30px; line-height: 36px; letter-spacing: -0.05em; color: var(--wp--preset--color--magenta-bright); } .or-hm-work-intro > p { font-size: 14px; line-height: 18.9px; } .or-hm-work-intro > .or-hm-work-title + p { margin-top: 20.7px !important; } .or-hm-work-intro > p + p { margin-top: 18.9px !important; } .or-hm-work-panel { padding: 23.1px 20px 24.7px; border-radius: 35px; background: var(--wp--preset--color--sky-deep); } .or-hm-projects.wp-block-columns { margin: 0 !important; gap: 0 !important; } .or-hm-projects > .or-hm-project-scale { margin-top: 41px !important; } .or-hm-projects > .or-hm-project-messaging { margin-top: 47.5px !important; } .or-hm-work-img { width: 223px; margin-inline: auto !important; } .or-hm-work-img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 35px; } .or-hm-project > .or-hm-work-h { margin-top: 21.8px !important; font-size: 17px; line-height: 20.8px; letter-spacing: -0.01em; color: var(--wp--preset--color--black); } .or-hm-project > p { margin-top: 19.1px !important; font-size: 14px; line-height: 18.9px; letter-spacing: -0.01em; color: var(--wp--preset--color--black); } /* --- our specializations -------------------------------------------------------------------- */ .or-hm-spec { padding: 81.4px 0 51.5px; } .or-hm-spec > .or-hm-eyebrow { padding-inline: 20px; font-size: 18px; line-height: 27px; letter-spacing: -0.01em; color: rgb(0, 23, 33); } .or-hm-spec > .or-hm-spec-title { margin-top: 9.2px !important; padding-inline: 20px; font-size: 28px; line-height: 30.8px; letter-spacing: -0.02em; color: rgb(0, 23, 33); } .or-hm-spec > .or-hm-spec-cards.wp-block-columns { margin: 66.3px 0 0 !important; gap: 1.1px !important; } .or-hm-spec-card { padding: 30.4px 20px 32.5px 19px; border: 1px solid var(--wp--preset--color--navy); border-radius: 35px; background: var(--wp--preset--color--white); } .or-hm-spec-card.or-hm-spec-revops { padding-bottom: 63.2px; } .or-hm-spec-icon img { width: 40px; height: auto; } .or-hm-spec-card > .or-hm-spec-h { margin-top: 10.4px !important; font-size: 19px; line-height: 20px; letter-spacing: -0.15px; color: rgb(0, 23, 33); } .or-hm-dbr { display: none; } .or-hm-spec-card > p { margin-top: 8.4px !important; font-size: 16px; line-height: 22.6px; color: var(--wp--preset--color--black); } .or-hm-spec-content > p { font-size: 15px; line-height: 20.9px; color: var(--wp--preset--color--navy); } /* --- testimonials (navy band; onerawr.js turns it into a slideshow) --------------------------- */ .or-hm-quotes { padding: 0; } /* Phones: a white gap between the grey industries panel and the band, as in the frame. */ @media (max-width: 781px) { .or-hm-quotes { margin-top: 56.8px !important; } } .or-hm-slides { position: relative; padding: 40.4px 39px 18.5px; } .or-hm-slide { text-align: center; } .or-hm-slide + .or-hm-slide { margin-top: 40px !important; } .or-hm-slide > .or-hm-slide-who { font-family: var(--wp--preset--font-family--figtree); font-weight: 800; font-size: 16px; line-height: 20.3px; color: var(--wp--preset--color--white); } .or-hm-slide > .or-hm-slide-rule { box-sizing: border-box; width: 21px !important; max-width: none !important; height: 1px; margin: 31.3px auto 0 !important; border: 0 !important; background: var(--wp--preset--color--white) !important; opacity: 1; } .or-hm-slide > .or-hm-slide-quote { font-size: 17px; line-height: 22px; color: var(--wp--preset--color--white); } .or-hm-slide > .or-hm-slide-rule + .or-hm-slide-quote { margin-top: 32.2px !important; } .or-hm-slide > .or-hm-slide-quote + .or-hm-slide-quote { margin-top: 22px !important; } .or-hm-slides.is-slideshow > .or-hm-slide { display: none; margin-top: 0 !important; } .or-hm-slides.is-slideshow > .or-hm-slide.is-active { display: block; } .or-hm-slides-nav { display: none; position: absolute; top: 50%; width: 44px; height: 48px; margin-top: -24px; padding: 0; border: 0; background: none; color: var(--wp--preset--color--white); cursor: pointer; } .or-hm-slides-nav::before { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: translate(-25%, -50%) rotate(45deg); } .or-hm-slides-next::before { transform: translate(-75%, -50%) rotate(-135deg); } .or-hm-slides-nav:hover { color: var(--wp--preset--color--magenta-bright); } .or-hm-slides-dots { display: flex; justify-content: center; align-items: center; gap: 10.3px; margin-top: 43px; } .or-hm-slides-dots button { box-sizing: border-box; width: 6px; height: 6px; padding: 0; border: 1.5px solid var(--wp--preset--color--white); border-radius: 50%; background: var(--wp--preset--color--white); cursor: pointer; } .or-hm-slides-dots button[aria-current="true"] { width: 9px; height: 9px; background: transparent; } /* --- let us help you rawr (staggered cards) ------------------------------------------------ */ .or-hm-help { padding: 32.1px 20px 27.1px; } .or-hm-help-cols.wp-block-columns { margin: 0 !important; gap: 0 !important; } .or-hm-help-title { font-size: 26px; line-height: 26px; letter-spacing: -0.05em; } .or-hm-help-cols > .or-hm-help-body { margin-top: 131.5px !important; } .or-hm-help-cards { display: flex; flex-direction: column; gap: 6.6px; } .or-hm-help-card { padding: 12.5px 20px 12.4px; border-radius: 35px; background: var(--wp--preset--color--sky-deep); text-align: center; } .or-hm-help-icon img { width: auto; margin-inline: auto; } .or-hm-help-power .or-hm-help-icon img { height: 35.5px; } .or-hm-help-scale .or-hm-help-icon img { width: 57.8px; height: auto; } .or-hm-help-skills .or-hm-help-icon img { width: 53.2px; height: auto; } .or-hm-help-card > .or-hm-help-h { margin-top: 10.5px !important; font-size: 17px; line-height: 22.1px; color: var(--wp--preset--color--magenta); } .or-hm-help-card > p { margin-top: 12px !important; font-size: 15px; line-height: 23.5px; color: var(--wp--preset--color--black); } .or-hm-help-skills > p { color: var(--wp--preset--color--navy); } /* --- time to change (navy band) ------------------------------------------------------------- */ .or-hm-time { padding: 38.3px 20px 58.7px; } .or-hm-time-cols.wp-block-columns { margin: 0 !important; gap: 0 !important; } .or-hm-time-title { font-size: 28px; line-height: 37px; } .or-hm-time-head > .or-hm-time-sub { margin-top: 13.6px !important; font-size: 25px; line-height: 35px; color: #c520aa; } .or-hm-time-cols > .or-hm-time-copy { margin-top: 68.8px !important; } .or-hm-time-copy > p { font-size: 18px; line-height: 26.6px; color: var(--wp--preset--color--white); } .or-hm-time-copy > p + p { margin-top: 26.6px !important; } .or-hm-time-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .or-hm-time-copy a:hover { color: var(--wp--preset--color--sky); } /* --- what makes us different --------------------------------------------------------------- */ .or-hm-diff { padding: 27.1px 20px 49.2px; text-align: center; } .or-hm-diff-title { font-size: 25px; line-height: 27.5px; letter-spacing: -0.05em; } .or-hm-diff > p { margin-top: 21.2px !important; font-size: 14px; line-height: 22.2px; color: var(--wp--preset--color--black); } .or-hm-diff > .or-hm-btns { margin-top: 38.3px !important; justify-content: center; } .or-main .or-hm-diff .or-hm-btns .wp-block-button__link { height: 41px; } /* --- we create your marketing machine --------------------------------------------------------- */ .or-hm-create { padding: 0 0 68.8px; } .or-hm-create-title { padding-inline: 20px; font-size: 25px; line-height: 25px; letter-spacing: -0.05em; } .or-hm-create > .or-hm-create-cols.wp-block-columns { margin: 11.8px 0 0 !important; gap: 0 !important; } .or-hm-create-img img { width: 100%; height: 199.7px; object-fit: cover; border-radius: 35px; } .or-hm-create-card { padding: 0 20px; text-align: center; } .or-hm-create-card > .or-hm-create-h { font-size: 19px; line-height: 26.6px; color: var(--wp--preset--color--navy); } .or-hm-create-card > .or-hm-create-h:first-child { margin-top: 32.2px !important; } .or-hm-create-card > p + .or-hm-create-h { margin-top: 31.2px !important; } .or-hm-create-card > p + .or-hm-create-h + p + .or-hm-create-h { margin-top: 28.3px !important; } .or-hm-create-card > p { margin-top: 21.6px !important; font-size: 14px; line-height: 24px; color: var(--wp--preset--color--navy); } .or-hm-create-card > .or-hm-create-h:first-child + p { margin-top: 20.5px !important; } .or-hm-create-card a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .or-hm-create-card a:hover { color: var(--wp--preset--color--magenta); } /* --- who we serve ------------------------------------------------------------------------- */ .or-hm-serve { padding: 30.3px 0 123.4px; background: #f0f0f0; } .or-hm-serve > .or-hm-eyebrow { padding-inline: 20px; font-size: 15px; line-height: 18px; color: var(--wp--preset--color--navy); } .or-hm-serve > .or-hm-serve-title { margin-top: 11.1px !important; padding-inline: 20px; font-size: 25px; line-height: 29.5px; } .or-hm-serve > .or-hm-ind-grid { display: flex; flex-direction: column; gap: 11.4px; margin-top: 29.4px !important; } .or-hm-ind { display: flex; flex-direction: column; align-items: center; padding: 17.1px 20px 17.4px; border-radius: 25px; background: var(--wp--preset--color--white); text-align: center; } .or-hm-ind-icon img { width: auto; height: 63.5px; } .or-hm-ind > .or-hm-ind-h { margin-top: 16.5px !important; font-size: 15px; line-height: 21px; color: var(--wp--preset--color--navy); } .or-hm-ind > .or-hm-btns { margin-top: 17px !important; justify-content: center; } .or-hm-ind-tech { padding-bottom: 18.8px; } /* --- let's talk ------------------------------------------------------------------------- */ .or-hm-talk { padding: 20.5px 20px 40px; } .or-hm-talk-title { text-align: center; font-size: 26px; line-height: 36.4px; } .or-hm-talk > .or-hm-talk-title + * { margin-top: 30px !important; } .or-hm-talk .meetings-iframe-container { max-width: 852px; margin-inline: auto; } .or-hm-talk .meetings-iframe-container iframe { display: block; width: 100%; } /* HubSpot sizes its iframe to at least 312px; below 360px run it edge to edge. */ @media (max-width: 359px) { .or-hm-talk .meetings-iframe-container { margin-inline: -20px; } } /* --- blog cards: the three newest posts (a query loop) ---------------------------------------------- Harps, 1 Oct 2026: rounder, not as long, with a call to read more. Each card is as tall as its text and a "Read More" button (the cards in a row match), with the homepage's pill button at the bottom. Phones (after the FAQ): text-only cards with 25px corners, 16px apart, title 22px on 25.15px lines and excerpt 16px on 22.85px lines (three lines each), 20px inside the border. Desktop: see the 782px rules. The title link covers the whole card; the button sits above it. */ .or-hm-blog { padding: 14.1px 20px 14.6px; } .or-hm-blog-list.wp-block-post-template { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; } .or-hm-blog-list > li { position: relative; display: flex; flex-direction: column; margin: 0 !important; overflow: hidden; border: 1px solid rgba(188, 13, 143, 0.21); border-radius: 25px; background: var(--wp--preset--color--white); } .or-hm-blog-img { display: none; } .or-hm-blog-card-body { box-sizing: border-box; display: flex; flex: 1 1 auto; flex-direction: column; padding: 27.5px 20px 24px; } /* By class: the title and excerpt sit inside (text as typed; functions.php), not directly in the body. */ .or-hm-blog-card-title { margin: 0 !important; } .or-hm-blog-card-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-family: var(--wp--preset--font-family--questrial); font-size: 22px; font-weight: 400; line-height: 25.15px; color: var(--wp--preset--color--navy); } .or-hm-blog-card-title a { display: inline; color: inherit; text-decoration: none; } .or-hm-blog-card-title a::after { content: ""; position: absolute; inset: 0; } .or-hm-blog-excerpt { margin: 11.5px 0 0 !important; padding-left: 1.1px; } .or-hm-blog-excerpt p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-family: var(--wp--preset--font-family--questrial); font-size: 16px; line-height: 22.85px; color: var(--wp--preset--color--navy); } .or-hm-blog-excerpt .wp-block-post-excerpt__more-text { display: none; } .or-hm-blog-excerpt { margin-bottom: 22px !important; } .or-hm-blog-more { position: relative; z-index: 1; display: inline-flex; align-items: center; align-self: flex-start; justify-content: center; box-sizing: border-box; width: 160px; height: 40.5px; margin-top: auto; border-radius: 35px; background: var(--wp--preset--color--magenta); font-family: var(--wp--preset--font-family--questrial); font-size: 16px; line-height: 24px; color: var(--wp--preset--color--white); text-decoration: none; } .or-hm-blog-more:hover, .or-hm-blog-more:focus-visible { color: var(--wp--preset--color--white); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(188, 13, 143, 0.28); } /* --- FAQ: the site's new FAQ (Harps, 1 Oct 2026), styled by the shared .or-faq rules like the service pages: the photo beside the questions on desktop, as a wide strip above them on phones (cropped on the team's faces). The old boxed version copied the live homepage. */ @media (max-width: 781px) { .or-hm-faq-wide img { object-position: 50% 9%; } } /* Phones: the frame renders this text a little wider than the browser does, so these boxes are narrowed until the lines break where the frame's do (same line counts, same heights). */ @media (max-width: 781px) { .or-hm-elim-items > .or-hm-elim-rule { margin-top: 21.5px !important; } .or-hm-elim-items > .or-hm-elim-rule:nth-child(4) { margin-top: 18.7px !important; } .or-hm-project > p { max-width: 264px; } .or-hm-help-card > .or-hm-help-h { max-width: 220px; margin-inline: auto !important; } .or-hm-help-scale > .or-hm-help-h { max-width: 178px; } .or-hm-create-card > p { max-width: 273px; margin-inline: auto !important; } .or-hm-serve > .or-hm-serve-title { max-width: 239px; } .or-hm-spec-content > p { margin-top: 9.8px !important; } .or-hm-spec-revops > .or-hm-spec-h { margin-top: 8.2px !important; } .or-hm-spec-revops > p { margin-top: 10.2px !important; } .or-hm-help-scale > .or-hm-help-h { margin-top: 10.1px !important; } .or-hm-help-scale > p { margin-top: 11.5px !important; } .or-hm-help-skills > .or-hm-help-h { margin-top: 13.5px !important; } .or-hm-help-skills > p { margin-top: 15px !important; } .or-hm-help-power { padding-bottom: 13.2px; } .or-hm-help-scale { padding-bottom: 14px; } .or-hm-help-skills { padding-bottom: 9.6px; } .or-hm-slide > .or-hm-slide-rule { margin-top: 29.8px !important; } } /* ----------------------------------------------------------------------------------- desktop */ @media (min-width: 782px) { .or-hm-btns .wp-block-button__link { height: 45px; } .or-main .or-hm-btns > .wp-block-button .wp-block-button__link { width: 164px; } /* Hero: grey panel x0..652.5 and the photo to the right edge, both 837 tall with 35px corners. */ .or-hm-hero-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: stretch !important; } .or-hm-hero-copy.wp-block-column { flex: 0 0 33.984% !important; min-height: clamp(560px, 43.594vw, 837px); padding: clamp(96px, 8.802vw, 169px) 24px 64px clamp(40px, 8.333vw, 160px); } .or-hm-hero-media.wp-block-column { display: block; flex: 1 1 0 !important; position: relative; } .or-hm-hero-img { position: absolute; inset: 0; margin: 0 !important; } .or-hm-hero-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 35px; } .or-hm-title { max-width: 5em; font-size: clamp(44px, 3.542vw, 68px); line-height: 1.1; } .or-hm-hero-lead { max-width: 330px; line-height: 23.5px; } .or-hm-hero-copy > .or-hm-title + .or-hm-hero-lead { margin-top: 29.6px !important; } .or-hm-hero-copy > .or-hm-btns { margin-top: 34.4px !important; justify-content: flex-start; } .or-main .or-hm-hero .or-hm-btns .wp-block-button__link { width: 164.5px; } /* Tiles: magenta x0..654.5, one sky panel for the other two; copy from x163 / 809 / 1442. */ .or-hm-tiles-wrap { padding: 0; } .or-hm-tiles.wp-block-columns { flex-wrap: nowrap !important; align-items: stretch !important; } .or-hm-tiles > .or-hm-tile.wp-block-column { min-height: clamp(300px, 21.406vw, 411px); margin-top: 0 !important; padding: 64.5px 24px 40px clamp(28px, 8.49vw, 163px); } .or-hm-tiles > .or-hm-tile-about.wp-block-column { flex: 0 0 34.089% !important; } .or-hm-tiles > :is(.or-hm-tile-who, .or-hm-tile-support).wp-block-column { flex: 1 1 0 !important; padding-left: clamp(28px, 8.047vw, 154.5px); } .or-hm-tile-who { border-radius: 35px 0 0 35px; } .or-hm-tiles > .or-hm-tile-who.wp-block-column { padding-top: 65.5px; } .or-hm-tile-support { border-radius: 0 35px 35px 0; } .or-hm-tile-h, .or-hm-tile-who .or-hm-tile-h, .or-hm-tile-support .or-hm-tile-h { font-size: 24px; line-height: 24.7px; } .or-hm-tile > .or-hm-tile-h + p, .or-hm-tile-who > .or-hm-tile-h + p, .or-hm-tile-support > .or-hm-tile-h + p { margin-top: 19.5px !important; } .or-hm-tile-who > .or-hm-tile-h + p { margin-top: 18.8px !important; } .or-hm-tile-about p { max-width: 330px; line-height: 23.5px; } .or-hm-tile-who p { max-width: 323px; line-height: 22.4px; } .or-hm-tile-support p { max-width: 293px; line-height: 22.4px; } /* Eliminate: grey x0..960 and navy x960..1920, 1149 tall, on the frame's pale section colour. */ .or-hm-elim { padding: 0; border-radius: 35px; background: #f8f6f7; } .or-hm-elim-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: stretch !important; } .or-hm-elim-copy.wp-block-column { flex: 0 0 50% !important; padding: clamp(80px, 6.667vw, 128px) 24px 64px clamp(40px, 5.938vw, 114px); background: #f0eeef; } .or-hm-elim-title { max-width: 7.234em; font-size: clamp(36px, 2.448vw, 47px); line-height: 1.1; } .or-hm-elim-copy > p { max-width: 376px; font-size: 16px; line-height: 23.5px; } .or-hm-elim-copy > .or-hm-elim-title + p { margin-top: 23.5px !important; } .or-hm-elim-copy > p + p { margin-top: 24px !important; } .or-hm-elim-copy > .or-hm-btns { margin-top: 51px !important; justify-content: flex-start; } .or-main .or-hm-elim .or-hm-btns > .wp-block-button .wp-block-button__link { width: 164px; font-size: 16px; } .or-hm-elim-items.wp-block-column { flex: 0 0 50% !important; padding: 50px 24px 104.2px 49px; } .or-hm-elim-item { max-width: 441px; } .or-hm-elim-head.is-layout-flex { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 25px; } .or-hm-elim-icon img { width: 48px; height: 48px; } .or-hm-elim-head > .or-hm-elim-label { margin-top: 0 !important; } .or-hm-elim-item > .or-hm-elim-h { font-size: 34px; line-height: 40px; } .or-hm-elim-content > .or-hm-elim-h { margin-top: 44px !important; } .or-hm-elim-channel > .or-hm-elim-h { margin-top: 50.5px !important; } .or-hm-elim-demand > .or-hm-elim-h { margin-top: 55px !important; } .or-hm-elim-item > .or-hm-elim-text { max-width: 433px; margin-top: 26.5px !important; font-size: 18px; line-height: 19px; } :is(.or-hm-elim-channel, .or-hm-elim-demand) > .or-hm-elim-text { margin-top: 25.6px !important; } .or-hm-elim-items > .or-hm-elim-rule { max-width: 440px !important; margin: 81.5px 0 45.5px !important; } .or-hm-elim-items > .or-hm-elim-rule:nth-child(4) { margin-top: 81.1px !important; } /* Our Work: four 480px columns, the navy intro and a sky panel holding the three projects. */ .or-hm-work-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: stretch !important; } .or-hm-work-intro.wp-block-column { flex: 0 0 25% !important; padding: 116.9px 24px 64px clamp(24px, 6.146vw, 118px); } .or-hm-work-title { font-size: clamp(36px, 2.448vw, 47px); line-height: 1.1; } .or-hm-work-intro > p { max-width: 245px; font-size: 16px; line-height: 22.4px; } .or-hm-work-intro > .or-hm-work-title + p { margin-top: 69px !important; } .or-hm-work-intro > p + p { margin-top: 22.6px !important; } .or-hm-work-panel.wp-block-column { flex: 1 1 0 !important; padding: 0; } .or-hm-projects.wp-block-columns { flex-wrap: nowrap !important; align-items: stretch !important; } .or-hm-projects > .or-hm-project.wp-block-column { flex: 1 1 0 !important; margin-top: 0 !important; padding: 106px 24px 80.4px clamp(24px, 6.146vw, 118px); } .or-hm-work-img { width: 245px; max-width: 100%; margin-inline: 0 !important; } .or-hm-project-scale .or-hm-work-img { width: 238px; } .or-hm-project > .or-hm-work-h { max-width: 245px; margin-top: 29.2px !important; font-size: 18px; line-height: 24px; } /* The 238px photo sits in a 245px slot, so the three titles line up. */ .or-hm-project-scale > .or-hm-work-h { margin-top: 36.2px !important; } .or-hm-project > p { max-width: 245px; margin-top: 21.9px !important; font-size: 16px; line-height: 23.5px; } /* Specializations: eyebrow and heading from x76, four 416px bordered cards edge to edge. */ .or-hm-spec { padding: 38.7px 0 64px; } .or-hm-spec > .or-hm-eyebrow { padding-inline: clamp(24px, 3.958vw, 76px); } .or-hm-spec > .or-hm-spec-title { margin-top: 7.2px !important; padding-inline: clamp(24px, 3.958vw, 76px); font-size: clamp(36px, 2.448vw, 47px); line-height: 1.1; } .or-hm-spec > .or-hm-spec-cards.wp-block-columns { flex-wrap: nowrap !important; align-items: stretch !important; margin: 33.9px 0 0 !important; padding: 0 1px; gap: 1px !important; } .or-hm-spec-cards > .or-hm-spec-card.wp-block-column { flex: 0 0 calc((100% - 3px) / 4) !important; min-height: 416px; padding: 86px 24px 40px clamp(24px, 6.51vw, 125px); } .or-hm-spec-cards > .or-hm-spec-demand.wp-block-column { padding-left: clamp(24px, 6.042vw, 116px); } .or-hm-spec-card.or-hm-spec-revops { padding-bottom: 40px; } .or-hm-spec-card > .or-hm-spec-h { max-width: 230px; margin-top: 9.6px !important; font-size: 26px; line-height: 25.5px; letter-spacing: -0.2px; } .or-hm-dbr { display: inline; } .or-hm-spec-card > p { max-width: 230px; margin-top: 12px !important; line-height: 23.5px; } .or-hm-spec-demand > p { max-width: 244px; } .or-hm-spec-content > p { line-height: 21px; } /* Testimonials: full-width navy band, 403 tall; arrows at the edges, dots under the quote. */ .or-hm-slides { padding: 65.4px 24px 45.5px; } /* The frame centres the testimonial text 5px right of the page centre (the dots stay centred). */ .or-hm-slide { box-sizing: border-box; max-width: 610px; margin-inline: auto !important; padding-left: 10px; } .or-hm-slide > .or-hm-slide-who { line-height: 21.5px; } .or-hm-slide > .or-hm-slide-rule { width: 36px !important; height: 1.5px; margin-top: 12.6px !important; } .or-hm-slide > .or-hm-slide-quote { max-width: 546px; margin-inline: auto !important; font-size: 20px; line-height: 26px; } .or-hm-slide > .or-hm-slide-rule + .or-hm-slide-quote { margin-top: 31.5px !important; } .or-hm-slide > .or-hm-slide-quote + .or-hm-slide-quote { margin-top: 26px !important; } .or-hm-slides-nav { display: block; } .or-hm-slides-prev { left: clamp(8px, 4.792vw, 92px); } .or-hm-slides-next { right: clamp(8px, 4.792vw, 92px); } .or-hm-slides-dots { gap: 16px; margin-top: 38.5px; } /* Let us help: heading from x278, cards 260 wide in two columns from x1026, the right one lower. */ .or-hm-help { padding: 34px 24px 83px clamp(24px, 14.479vw, 278px); } .or-hm-help-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: flex-start !important; } .or-hm-help-cols > .or-hm-help-head.wp-block-column { flex: 0 1 748px !important; padding-right: 24px; } .or-hm-help-title { max-width: 6.574em; margin-top: 177.4px !important; font-size: clamp(36px, 2.448vw, 47px); line-height: 1.1; } .or-hm-help-cols > .or-hm-help-body.wp-block-column { flex: 0 0 532px !important; margin-top: 0 !important; } .or-hm-help-cards { display: grid; grid-template-columns: 260px 260px; gap: 0 12px; } .or-hm-help-card { text-align: left; } .or-hm-help-power { grid-column: 1; grid-row: 1; padding: 23px 24px 36px 28px; } .or-hm-help-scale { grid-column: 1; grid-row: 2; margin-top: 57.5px !important; padding: 38px 24px 36px 28px; } .or-hm-help-skills { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 179.5px !important; padding: 28.5px 17px 24.4px 21px; } .or-hm-help-icon img { margin-inline: 0; } .or-hm-help-power .or-hm-help-icon { padding-left: 19.5px; } .or-hm-help-power .or-hm-help-icon img { width: 26px; height: auto; } .or-hm-help-scale .or-hm-help-icon img { width: 53px; } .or-hm-help-skills .or-hm-help-icon { padding-left: 7px; } .or-hm-help-skills .or-hm-help-icon img { width: 51px; } .or-hm-help-card > .or-hm-help-h { max-width: 203px; font-size: 18px; line-height: 25.2px; } .or-hm-help-power > .or-hm-help-h { margin-top: 28.1px !important; } .or-hm-help-scale > .or-hm-help-h { margin-top: 26.6px !important; } .or-hm-help-skills > .or-hm-help-h { margin-top: 17.6px !important; } .or-hm-help-card > p { max-width: 203px; font-size: 14px; line-height: 22.5px; } .or-hm-help-power > p { margin-top: 8.3px !important; } .or-hm-help-scale > p { margin-top: 12.1px !important; } .or-hm-help-skills > p { max-width: 222px; margin-top: 10.3px !important; } /* Time to change: navy band 533 tall, heading from x376, copy from x1056 (columns split at 768). */ .or-hm-time { padding: 76.8px 24px 79.8px; } .or-hm-time-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: flex-start !important; } .or-hm-time-cols > .or-hm-time-head.wp-block-column { flex: 0 0 calc(40vw - 24px) !important; padding-left: clamp(0px, 29.39vw - 212px, 352px); } .or-hm-time-title { max-width: 373px; font-size: clamp(40px, 2.708vw, 52px); line-height: 1.4; } .or-hm-time-head > .or-hm-time-sub { margin-top: 11.6px !important; font-size: clamp(36px, 2.448vw, 47px); line-height: 1.4; } .or-hm-time-cols > .or-hm-time-copy.wp-block-column { flex: 1 1 0 !important; margin-top: 23.6px !important; padding-left: clamp(24px, 15vw, 288px); } .or-hm-time-copy > p { max-width: 436px; line-height: 25.2px; } .or-hm-time-copy > p + p { margin-top: 25.2px !important; } /* What makes us different: centred heading, 835px paragraph, button. */ .or-hm-diff { padding: 67.1px 24px 41px; } .or-hm-diff-title { font-size: clamp(36px, 2.448vw, 47px); line-height: 1.1; } .or-hm-diff > p { max-width: 835px; margin: 26px auto 0 !important; font-size: 18px; line-height: 32.4px; } .or-hm-diff > .or-hm-btns { margin-top: 34.2px !important; } .or-main .or-hm-diff .or-hm-btns .wp-block-button__link { height: 45px; } /* Who we serve: eyebrow and heading from x121, then 332x249.5 cards on a 5-column grid (x110, 10px gaps): SaaS to Fintech in columns 2-5, Logistics to AI in columns 1-4. */ .or-hm-serve { padding: 84.7px 24px 40px; background: #fafafa; } .or-hm-serve > .or-hm-eyebrow { padding-inline: clamp(0px, 6.302vw - 24px, 97px) 0; font-size: 18px; line-height: 24px; } .or-hm-serve > .or-hm-serve-title { box-sizing: content-box; max-width: 13.955em; margin-top: 12.1px !important; padding-inline: clamp(0px, 6.198vw - 24px, 95px) 0; font-size: clamp(36px, 2.292vw, 44px); line-height: 1.2; } .or-hm-serve > .or-hm-ind-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 332px)); justify-content: center; gap: 10px; margin-top: 51.6px !important; } .or-hm-ind { position: relative; display: flex; align-items: flex-start; min-height: 249.5px; box-sizing: border-box; padding: 131px 16px 18.5px clamp(24px, 4.115vw, 79px); border-radius: 35px; text-align: left; } .or-hm-ind-grid > .or-hm-ind:nth-child(-n+4) { grid-row: 1; } .or-hm-ind-saas { grid-column: 2; } .or-hm-ind-health { grid-column: 3; } .or-hm-ind-tax { grid-column: 4; } .or-hm-ind-fintech { grid-column: 5; } .or-hm-ind-grid > .or-hm-ind:nth-child(n+5) { grid-row: 2; min-height: 249px; padding-bottom: 23px; } .or-hm-ind-logistics { grid-column: 1; } .or-hm-ind-tech { grid-column: 2; } .or-hm-ind-edtech { grid-column: 3; } .or-hm-ind-ai { grid-column: 4; } .or-hm-ind > .or-hm-ind-icon { position: absolute; left: clamp(24px, 4.115vw, 79px); margin: 0 !important; } .or-hm-ind-icon img { height: auto; } .or-hm-ind-saas > .or-hm-ind-icon { top: 42px; } .or-hm-ind-saas .or-hm-ind-icon img { width: 69px; } .or-hm-ind-health > .or-hm-ind-icon { top: 54px; } .or-hm-ind-health .or-hm-ind-icon img { width: 56px; } .or-hm-ind-tax > .or-hm-ind-icon { top: 60px; } .or-hm-ind-tax .or-hm-ind-icon img { width: 59px; } .or-hm-ind-fintech > .or-hm-ind-icon { top: 58px; } .or-hm-ind-fintech .or-hm-ind-icon img { width: 59px; } .or-hm-ind-logistics > .or-hm-ind-icon { top: 53px; } .or-hm-ind-logistics .or-hm-ind-icon img { width: 59px; } .or-hm-ind-tech > .or-hm-ind-icon { top: 52px; } .or-hm-ind-tech .or-hm-ind-icon img { width: 64px; } .or-hm-ind-edtech > .or-hm-ind-icon { top: 57.5px; margin-left: 6.5px !important; } .or-hm-ind-edtech .or-hm-ind-icon img { width: 46px; } .or-hm-ind-ai > .or-hm-ind-icon { top: 53px; } .or-hm-ind-ai .or-hm-ind-icon img { width: 59px; } .or-hm-ind > .or-hm-ind-h { max-width: 165px; margin-top: 0 !important; font-size: 18px; line-height: 25.2px; } .or-hm-ind > .or-hm-btns { margin: auto 0 0 -7px !important; justify-content: flex-start; } .or-hm-ind-fintech > .or-hm-btns { margin-bottom: 6px !important; margin-left: -4px !important; } .or-hm-ind .or-hm-btns .wp-block-button__link { border-color: var(--wp--preset--color--navy); background: var(--wp--preset--color--navy); } .or-hm-ind .or-hm-btns .wp-block-button__link:hover, .or-hm-ind .or-hm-btns .wp-block-button__link:focus-visible { border-color: var(--wp--preset--color--magenta); background: var(--wp--preset--color--magenta); } .or-hm-ind-tech { padding-bottom: 23px; } /* We create: heading from x475, photo 590x483 at x470 and a white card 840 wide at x960 overlapping it from 51px down. The frame's card is 786 tall with 129px under the text and 61px above it; Harps (1 Oct 2026): the gap at the bottom should match the top, so the card ends 61px under the text. */ .or-hm-create { padding: 103.9px 24px 37px; background: #f8f6f7; } .or-hm-create-title { padding-inline: clamp(0px, 24.74vw - 24px, 451px) 0; font-size: clamp(36px, 2.448vw, 47px); line-height: 1.1; } .or-hm-create > .or-hm-create-cols.wp-block-columns { flex-wrap: nowrap !important; align-items: flex-start !important; margin: 60.4px 0 0 !important; padding-left: clamp(0px, 24.479vw - 24px, 446px); } .or-hm-create-cols > .or-hm-create-media.wp-block-column { flex: 0 0 min(590px, 30.729vw) !important; } .or-hm-create-img img { height: auto; aspect-ratio: 590 / 483; border-radius: 35px; } .or-hm-create-cols > .or-hm-create-card.wp-block-column { position: relative; z-index: 1; flex: 0 1 840px !important; margin: 51px 0 0 calc(-1 * min(100px, 5.208vw)) !important; padding: 52.6px 24px 54.1px clamp(40px, 10.052vw, 193px); border-radius: 35px; background: var(--wp--preset--color--white); text-align: left; } .or-hm-create-card > .or-hm-create-h { font-size: 30px; line-height: 42px; } .or-hm-create-card > .or-hm-create-h:first-child { margin-top: 0 !important; } .or-hm-create-card > p { max-width: 432px; margin-top: 16.1px !important; padding-left: 6px; font-size: 16px; line-height: 28.8px; } .or-hm-create-card > .or-hm-create-h:first-child + p { max-width: 442px; margin-top: 16.1px !important; padding-left: 9px; } .or-hm-create-card > p + .or-hm-create-h { margin-top: 43.7px !important; } .or-hm-create-card > .or-hm-create-h + p + .or-hm-create-h + p { margin-top: 19.1px !important; } .or-hm-create-card > p + .or-hm-create-h + p + .or-hm-create-h { margin-top: 45.7px !important; } .or-hm-create-card > p + .or-hm-create-h + p:last-child { margin-top: 15.1px !important; } /* Let's talk: centred heading, the 852px scheduler. HubSpot's iframe has 16px of white above its calendar box and 68px below it, so the box sits where the frame draws it (x534, y8042-8714.5 at 1920) with the iframe 40.7px under the heading, and the blog cards follow the box as in the frame. */ .or-hm-talk { padding: 59.8px 24px 0; } .or-hm-talk-title { font-size: clamp(36px, 2.448vw, 47px); line-height: 1.4; } .or-hm-talk > .or-hm-talk-title + * { margin-top: 40.7px !important; } /* Blog cards: three 292px cards 32px apart, centred (as on the live page), with 30px corners: a 16:9 photo, then title 22px on 30.8px lines and excerpt 16px on 24px lines (three lines each), 24px in, and the "Read More" button 28px above the bottom (Harps, 1 Oct 2026; the text area was a fixed 320px). The top border is 75.5px below the calendar box (7.5px below the iframe). Narrower screens keep three cards, which shrink. */ .or-hm-blog { padding: 7.5px 24px 77px; } .or-hm-blog-list.wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 292px)); justify-content: center; gap: 32px; } .or-hm-blog-list > li { border-radius: 30px; } .or-hm-blog-img { display: block; margin: 0 !important; aspect-ratio: 16 / 9 !important; overflow: hidden; } .or-hm-blog-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .or-hm-blog-card-body { padding: 29.6px 24px 28px; } .or-hm-blog-more { width: 164px; height: 45px; } .or-hm-blog-card-title { line-height: 30.8px; } .or-hm-blog-excerpt { margin-top: 10.9px !important; padding-left: 0; } .or-hm-blog-excerpt p { line-height: 24px; } } /* From 1200 up: the live page's model, so laptop screens show what onerawr.com shows (measured on the live page at 1920, 1440, 1280 and 1200). Font sizes and vertical spacing stay as at 1920; each block keeps its width and is centred, or docked, inside the frame's proportional columns. At 1920 every value below equals the frame's. */ @media (min-width: 1200px) { /* Hero: the copy centred in the 34% panel, which keeps its 837px height. */ .or-hm-hero-copy.wp-block-column { min-height: 837px; padding: 169px 24px 64px calc(16.992% - 166.25px); } .or-hm-title { font-size: 68px; } /* Tiles: each tile's copy centred in its tile. */ .or-hm-tiles > .or-hm-tile.wp-block-column { min-height: 411px; padding-left: calc(17.045% - 164.3px); } .or-hm-tiles > :is(.or-hm-tile-who, .or-hm-tile-support).wp-block-column { padding-left: calc(16.479% - 161.9px); } /* Eliminate: heading and copy from x114. */ .or-hm-elim-copy.wp-block-column { padding-top: 128px; padding-left: 114px; } .or-hm-elim-title { font-size: 47px; } /* Our Work: each column's 245px copy centred in its quarter of the width. */ .or-hm-work-intro.wp-block-column { padding-left: calc(12.5% - 122px); } .or-hm-projects > .or-hm-project.wp-block-column { padding-left: calc(16.667% - 122px); } .or-hm-work-title { font-size: 47px; } /* Specializations: heading from x76; each card's copy centred. */ .or-hm-spec > .or-hm-eyebrow, .or-hm-spec > .or-hm-spec-title { padding-inline: 76px 24px; } .or-hm-spec > .or-hm-spec-title { font-size: 47px; } .or-hm-spec-cards > .or-hm-spec-card.wp-block-column { padding-left: calc(12.5% - 114.75px); } .or-hm-spec-cards > .or-hm-spec-demand.wp-block-column { padding-left: calc(12.5% - 123.75px); } /* Let us help: the heading centred in the left 40%, the cards centred in the right 60% (24px left of centre), inside 71px margins. */ .or-hm-help { padding: 34px 71px 83px; } .or-hm-help-cols > .or-hm-help-head.wp-block-column { flex: 0 0 40% !important; display: flex; justify-content: center; padding: 0 0 0 12px; } .or-hm-help-cols > .or-hm-help-body.wp-block-column { flex: 0 0 60% !important; display: flex; justify-content: center; padding-right: 48px; } .or-hm-help-title { font-size: 47px; } /* Time to change: the heading ends 19px short of the 40% split; the copy is a 576px block centred in the right 60%. Its first line lines up with the heading's first line (Anwar, 24 Sep 2026; the frame and the live page have it 14px lower), and the band keeps its 533px height. */ .or-hm-time { padding-inline: 0; padding-bottom: 93.1px; } .or-hm-time-cols > .or-hm-time-head.wp-block-column { flex: 0 0 40% !important; padding-left: calc(40% - 392px); } .or-hm-time-title { font-size: 52px; } .or-hm-time-head > .or-hm-time-sub { font-size: 47px; } .or-hm-time-cols > .or-hm-time-copy.wp-block-column { margin-top: 10.3px !important; padding-left: calc(30% - 288px); } /* What makes us different, Let's Talk: fixed title size. */ .or-hm-diff-title, .or-hm-talk-title { font-size: 47px; } /* Who we serve: heading from x121; the grid spans the width less 110px a side (10px gaps), and each card's 174px copy is centred in the card. */ .or-hm-serve > .or-hm-eyebrow { padding-inline: 97px 0; } .or-hm-serve > .or-hm-serve-title { padding-inline: 95px 0; font-size: 44px; } .or-hm-serve > .or-hm-ind-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-inline: 86px !important; } .or-hm-ind { padding-left: calc(50% - 87px); } .or-hm-ind > .or-hm-ind-icon { left: calc(50% - 87px); } /* We create: the heading 485px left of the page centre, the 590x483 photo 490px left of it, and the card from the centre to 120px short of the right edge (840px at most), its copy centred, 6px left. */ .or-hm-create { padding-inline: 0; } .or-hm-create-title { padding-inline: calc(50% - 485px) 24px; font-size: 47px; } .or-hm-create > .or-hm-create-cols.wp-block-columns { padding-left: calc(50% - 490px); } .or-hm-create-cols > .or-hm-create-media.wp-block-column { flex: 0 0 590px !important; } /* Below about 1220px the live card stops shrinking at 490px. */ .or-hm-create-cols > .or-hm-create-card.wp-block-column { flex: 0 0 clamp(490px, calc(100% - 610px), 840px) !important; margin-left: -100px !important; padding-left: clamp(18px, calc(50% - 532px), 193px); } } /* Hero photo (Anwar, 24 Sep 2026): a soft parallax. The photo moves up at a quarter of the scroll speed while its rounded frame scrolls away, so it seems to slide down through the frame. The column clips to the frame and the figure reaches 66px above it, which is all the extra picture needed: the frame's top edge leaves the window after 87px of scrolling (the header), and by then the photo has come down 66px (0.75 × 87); below, the photo only ever runs past the frame. CSS runs it off the scroll position (a scroll timeline), so it is as smooth as the scrolling itself. It uses the full live photo (hm-hero-modern-office-full), which has picture beyond the frame. Browsers without scroll timelines get the live page's fixed version (the photo stays put while the frame scrolls: the figure reaches a window height above and below, the photo sticks to the top). Without overflow: clip, or with reduced motion, the photo stays still. Desktop only. */ @supports (overflow: clip) { @media (min-width: 782px) and (prefers-reduced-motion: no-preference) { .or-hm-hero-media.wp-block-column { overflow: clip; border-radius: 35px; } .or-hm-hero-img { top: -100vh; bottom: -100vh; } .or-hm-hero-img img { position: sticky; top: 0; height: 100vh; border-radius: 0; } } @media (min-width: 1200px) and (prefers-reduced-motion: no-preference) { .or-hm-hero-img img { height: min(100vh, 924px); } } } @supports (overflow: clip) and (animation-timeline: scroll()) { @media (min-width: 782px) and (prefers-reduced-motion: no-preference) { .or-hm-hero-img { top: -66px; bottom: 0; } .or-hm-hero-img img { position: static; height: 100%; will-change: transform; animation: or-hm-hero-drift linear both; animation-timeline: scroll(root); animation-range: 0px 1000px; } } } /* 0.75px down the frame for every 1px scrolled (the photo itself rises 0.25px). */ @keyframes or-hm-hero-drift { to { transform: translate3d(0, 750px, 0); } } /* Between the phones and the 1920 frame: the frame's layout with its fixed widths allowed to shrink, and the widest rows stacked, so nothing runs off the screen. */ @media (min-width: 782px) and (max-width: 1199px) { /* Hero: a wider copy panel. */ .or-hm-hero-copy.wp-block-column { flex-basis: 44% !important; padding-right: 32px; } /* Tiles: equal columns, smaller indents. */ .or-hm-tiles > .or-hm-tile.wp-block-column { padding: 48px 28px 40px 32px; } .or-hm-tiles > .or-hm-tile-about.wp-block-column { flex: 1 1 0 !important; } .or-hm-tiles > :is(.or-hm-tile-who, .or-hm-tile-support).wp-block-column { padding-left: 32px; } /* Eliminate: the navy items get the room they need. */ .or-hm-elim-copy.wp-block-column { flex-basis: 45% !important; } .or-hm-elim-items.wp-block-column { flex: 1 1 0 !important; padding: 50px 32px 64px 40px; } .or-hm-elim-item > .or-hm-elim-text { max-width: none; } /* Our Work: the intro across the top, the three projects under it. */ .or-hm-work-cols.wp-block-columns { flex-wrap: wrap !important; } .or-hm-work-intro.wp-block-column { flex: 0 0 100% !important; padding: 56px 40px 48px; } .or-hm-work-intro > p { max-width: 640px; } .or-hm-work-intro > .or-hm-work-title + p { margin-top: 28px !important; } .or-hm-work-panel.wp-block-column { flex: 0 0 100% !important; } .or-hm-projects > .or-hm-project.wp-block-column { padding: 48px 20px 56px; } .or-hm-projects > .or-hm-project:first-child { padding-left: 40px; } .or-hm-projects > .or-hm-project:last-child { padding-right: 40px; } /* Specializations: two cards per row. */ .or-hm-spec > .or-hm-spec-cards.wp-block-columns { flex-wrap: wrap !important; } .or-hm-spec-cards > .or-hm-spec-card.wp-block-column, .or-hm-spec-cards > .or-hm-spec-demand.wp-block-column { flex: 0 0 calc(50% - 0.5px) !important; min-height: 340px; padding: 64px 40px 48px; } .or-hm-spec-card > .or-hm-spec-h, .or-hm-spec-card > p { max-width: 380px; } /* Help: the heading above the cards. */ .or-hm-help { padding: 64px 24px 83px; } .or-hm-help-cols.wp-block-columns { flex-wrap: wrap !important; justify-content: center; } .or-hm-help-cols > .or-hm-help-head.wp-block-column { flex: 0 0 100% !important; padding-right: 0; text-align: center; } .or-hm-help-title { max-width: none; margin-top: 0 !important; } .or-hm-help-cols > .or-hm-help-body.wp-block-column { margin-top: 48px !important; } /* Time: stacked, the copy under the heading. */ .or-hm-time-cols.wp-block-columns { flex-wrap: wrap !important; max-width: 640px; margin-inline: auto !important; } .or-hm-time-cols > .or-hm-time-head.wp-block-column, .or-hm-time-cols > .or-hm-time-copy.wp-block-column { flex: 0 0 100% !important; padding-left: 0; } .or-hm-time-title { max-width: none; } .or-hm-time-cols > .or-hm-time-copy.wp-block-column { margin-top: 40px !important; } .or-hm-time-copy > p { max-width: none; } /* Serve: four columns, no stagger. */ .or-hm-serve > .or-hm-ind-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .or-hm-ind-grid > .or-hm-ind:nth-child(n) { grid-row: auto; grid-column: auto; } .or-hm-ind { padding-left: 24px; padding-right: 12px; } .or-hm-ind > .or-hm-ind-icon { left: 24px; } .or-main .or-hm-ind .or-hm-btns > .wp-block-button .wp-block-button__link { width: min(164px, 100%); } .or-hm-ind > .or-hm-btns { margin-left: 0 !important; margin-right: 0 !important; } /* Create: the card under the photo, still overlapping it. */ .or-hm-create-title { padding-left: 0; } .or-hm-create > .or-hm-create-cols.wp-block-columns { flex-wrap: wrap !important; max-width: 720px; margin-inline: auto !important; padding-left: 0; } .or-hm-create-cols > .or-hm-create-media.wp-block-column { flex: 0 0 80% !important; } .or-hm-create-cols > .or-hm-create-card.wp-block-column { flex: 0 0 100% !important; min-height: 0; margin: -80px 0 0 !important; padding: 48px 48px 50px; } /* the same space under the text as above it */ .or-hm-create-card > p, .or-hm-create-card > .or-hm-create-h:first-child + p { max-width: none; padding-left: 0; } } @media (min-width: 782px) and (max-width: 1023px) { /* Tiles stack on narrow tablets. */ .or-hm-tiles.wp-block-columns { flex-wrap: wrap !important; row-gap: 12px !important; } .or-hm-tiles > .or-hm-tile.wp-block-column, .or-hm-tiles > .or-hm-tile-about.wp-block-column { flex: 0 0 100% !important; min-height: 0; border-radius: 35px; } /* Eliminate stacks too. */ .or-hm-elim-cols.wp-block-columns { flex-wrap: wrap !important; } .or-hm-elim-copy.wp-block-column, .or-hm-elim-items.wp-block-column { flex: 0 0 100% !important; } .or-hm-elim-copy.wp-block-column { padding: 64px 40px; } .or-hm-elim-copy > p { max-width: 640px; } /* Work: one project per row. */ .or-hm-projects.wp-block-columns { flex-wrap: wrap !important; } .or-hm-projects > .or-hm-project.wp-block-column { flex: 0 0 100% !important; padding: 40px 40px 0; } .or-hm-projects > .or-hm-project:last-child { padding-bottom: 48px; } .or-hm-project > .or-hm-work-h, .or-hm-project > p { max-width: 560px; } /* Serve: three columns. */ .or-hm-serve > .or-hm-ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Hero: half and half. */ .or-hm-hero-copy.wp-block-column { flex-basis: 50% !important; } } /* ===== Client changes, 19 Sep 2026 ============================================ * "See the Full List" / "See Less" underlined on the SaaS, Healthcare, EdTech (and Fintech) service lists, * so they read as links (Harps). */ .or-ft-team-copy .or-at-more-toggle, :is(.or-sa-team-copy, .or-hc-team-copy, .or-et-team-copy, .or-lg-team-copy) .or-at-more-toggle { text-decoration: underline !important; text-underline-offset: 3px; } /* Accounting & Tax Firms from 1352px up (Harps, 19 Sep 2026): the 1352 frame's fixed ~950px * layout left wide screens mostly empty, so the page now fills the width like the EdTech page, * using the same sizes (EdTech's 1920 frame), and scales down with it to 1352. */ @media (min-width: 1352px) { .or-at-hero-img img { height: 433px; border-radius: 35px; } .or-at-hero-card { width: min(980px, calc(100% - 48px)); margin: -194px auto 0 !important; padding: 63px 24px 0; } .or-at-title { max-width: 840px; margin-inline: auto !important; } .or-at-hero-card { text-align: center; } .or-at-hero-card > .or-at-btns { margin-top: 50.5px; justify-content: center; } .or-at-intro { padding: 53.75px 24px 0 !important; } .or-at-intro > p { max-width: 760px; left: 0; } .or-at-tiles-wrap { padding: 57.75px 24px 0; } .or-at-tiles.wp-block-columns { max-width: 1521px; } .or-at-tiles.wp-block-columns > .wp-block-column { flex: 1 1 0; width: auto; min-height: 436px; } .or-at-tiles > .or-at-tile-magenta { flex-basis: 519px !important; padding: 78.5px 60px 0 clamp(60px, 5.5vw, 106.5px); } .or-at-tiles > .or-at-tile-sky { flex-basis: 509px !important; padding: 80px 40px 0 clamp(60px, 5.5vw, 105px); } .or-at-tiles > .or-at-tile-photo { flex-basis: 493px !important; } .or-at-tile-photo img { height: 436px; } .or-at-band { padding: 64px 24px 63.7px !important; } .or-at-band > p { max-width: 700px; } .or-at-wwd { padding: 89.5px 24px 53px !important; } .or-at-wwd > * { max-width: 1520px; } .or-at-wwd > .or-at-wwd-title { max-width: 1520px; padding-right: max(0px, calc(min(100%, 1520px) - 600px)); } .or-at-wwd-title { margin-top: 39px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 45px; line-height: 52px; } .or-at-wwd-cards.wp-block-columns { margin-top: 37px !important; gap: 20.5px !important; } .or-at-wwd-card { padding: 58px 30px 20px 40px; } .or-at-wwd-built.or-at-wwd-card { padding-left: 40px; } .or-at-wwd-h, .or-at-wwd-fast .or-at-wwd-h { max-width: none; margin-top: 33.5px !important; } .or-at-wwd-card p, .or-at-wwd-fast p, .or-at-wwd-built p { max-width: none; } .or-at-wwd-h + p { margin-top: 33.5px !important; } .or-at-why { padding: 0 max(24px, min(110px, calc((100vw - 1700px) / 2))); } .or-at-why-cols.wp-block-columns { max-width: 1700px; margin: 0 auto; min-height: 664px; } .or-at-why-cols > .or-at-why-intro { flex: 0 1 425px !important; padding: 51px 60px 0 clamp(40px, 4.7vw, 90px); border-radius: 35px 0 0 35px; } .or-at-why-intro > p { max-width: 240px; letter-spacing: 0; } .or-at-why-intro > .or-at-h + p { margin-top: 40px !important; } .or-at-why-cols > .or-at-why-panel { border-radius: 0 35px 35px 0; padding: 50px clamp(30px, 4.7vw, 90px) 40px; } .or-at-why-cards.wp-block-columns { max-width: none; gap: clamp(30px, 9.4vw - 100px, 180px) !important; } .or-at-why-cards > .wp-block-column { flex: 0 1 245px !important; min-width: 0; } .or-at-why-card:nth-child(3) { margin-left: 0; } .or-at-why-card p, .or-at-why-card:nth-child(2) p, .or-at-why-card:nth-child(3) p { max-width: none; letter-spacing: 0; } .or-at-why-h, .or-at-why-card:nth-child(n) .or-at-why-h { margin-top: 31px !important; font-family: var(--wp--preset--font-family--questrial); font-weight: 400; font-size: 20px; line-height: 28.5px; max-width: 240px; } .or-at-why-h + p, .or-at-why-card:nth-child(2) .or-at-why-h + p { margin-top: 29px !important; } .or-at-steps-cols.wp-block-columns { max-width: 1227px; } .or-at-steps-head { flex: 0 0 680px !important; padding-top: 221px; } .or-at-steps-title { max-width: 460px; } .or-at-video-card { max-width: 1227px !important; height: auto; padding: 40px 40px 40px 60px; } .or-at-video-cols.wp-block-columns { align-items: center !important; gap: 48px !important; } .or-at-video-copy { flex: 0 0 300px !important; padding-top: 0; } .or-at-video-embed .wp-block-embed__wrapper::before { padding-top: 56.25% !important; } .or-at-start-cols.wp-block-columns { justify-content: flex-start; height: auto; min-height: 555px; } .or-at-start-copy { flex: 0 0 50% !important; min-width: 0; border-radius: 35px; padding: 43.5px 24px 40px clamp(40px, 12.5vw, 240px); } .or-at-start-copy > * { max-width: 480px; } .or-at-start-copy > p { width: auto; } .or-at-start-media { display: flex; flex: 0 0 50% !important; min-width: 0; margin-left: 0; } .or-at-start-img { position: relative; flex: 1 1 auto; min-height: 555px; margin: 0 !important; } .or-at-start .or-at-start-img img { position: absolute; inset: 0; height: 100%; border-radius: 35px; } .or-at-evo > * { max-width: 760px; } .or-at-spec-title { left: 0; max-width: 760px; } .or-at-spec-cards.wp-block-columns { max-width: 1754px; gap: 25px !important; } .or-at-spec-cards + .or-at-spec-cards.wp-block-columns { margin-top: 25px !important; } .or-at-spec-cards > .wp-block-column { flex: 0 0 calc((100% - 50px) / 3) !important; min-height: 420px; } .or-at-spec .or-at-spec-cards > .or-at-spec-card { display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(24px, 3.1vw, 40px) 0 clamp(40px, 6.5vw, 125px) !important; } .or-at-spec .or-at-spec-cards > .or-at-spec-card .or-at-spec-h { max-width: 310px !important; } .or-at-spec .or-at-spec-cards > .or-at-spec-card .or-at-spec-h + p { max-width: 316px !important; margin-top: 32px !important; } .or-at-team { padding: 0 5px; } .or-at-team-cols.wp-block-columns { gap: 0 !important; } .or-at-team-media { flex: 0 1 620px !important; min-width: 0; } .or-at-team-img img { border-radius: 35px; } .or-at-team-copy { flex: 1 1 auto !important; min-width: 0; padding: 76px 24px 60px clamp(40px, 7vw, 138px); background: #fafafa; } .or-at-team-copy > * { max-width: 560px; } .or-at-cost-panel { max-width: 1754px !important; padding-left: calc((100% - 1264px) / 2 + 158px); } } /* ===== Client changes, 23 Sep 2026 ============================================ * Harps's "Website Edits" document (23 Sep 2026). Notes: client-changes.md. */ @media (min-width: 782px) { /* What we do (industry pages): "WHAT WE DO" and the title start where the text inside the boxes starts (the box's 1px border + its left padding), not at the box edge. The title's right padding shrinks by the same amount, so its lines break as before. */ .or-at-wwd > .or-at-eyebrow, .or-sa-wwd > .or-sa-eyebrow, .or-hc-wwd > .or-hc-eyebrow, .or-et-wwd > .or-et-eyebrow, .or-ft-wwd > .or-ft-eyebrow { box-sizing: border-box; } .or-at-wwd > :is(.or-at-eyebrow, .or-at-wwd-title) { padding-left: 33px; } .or-at-wwd > .or-at-wwd-title { padding-right: 267px; } .or-sa-wwd > :is(.or-sa-eyebrow, .or-sa-wwd-title) { padding-left: 38px; } .or-sa-wwd > .or-sa-wwd-title { padding-right: max(0px, calc(min(100%, 1520px) - 638px)); } /* Healthcare's boxes sit in a 1510px row centred under the 1520px heading. */ .or-hc-wwd > :is(.or-hc-eyebrow, .or-hc-wwd-title) { padding-left: calc(36px + max(0px, (min(100%, 1520px) - 1510px) / 2)); } .or-hc-wwd > .or-hc-wwd-title { padding-right: max(0px, calc(min(100%, 1520px) - 636px - max(0px, (min(100%, 1520px) - 1510px) / 2))); } :is(.or-et-wwd > .or-et-eyebrow, .or-et-wwd > .or-et-wwd-title, .or-ft-wwd > .or-ft-eyebrow, .or-ft-wwd > .or-ft-wwd-title) { padding-left: 41px; } :is(.or-et-wwd > .or-et-wwd-title, .or-ft-wwd > .or-ft-wwd-title) { padding-right: max(0px, calc(min(100%, 1520px) - 641px)); } /* Accounting: a white gap above "Get Started with Fractional Marketing…", the same 64px as below it. */ .or-at-start { margin-top: 64px !important; } /* Healthcare's six blue boxes: the same margins in all six, and the text starts at the top (it was centred, so each box started at a different height; the first column also sat 8px left). */ .or-hc-need-cards > .or-hc-need-card { justify-content: flex-start; } .or-hc-need-cards:nth-of-type(n) > .or-hc-need-card:nth-child(n) p { max-width: 316px; } /* SaaS hero: less space above and below "Book a Discovery Call". */ .or-sa-hero-card > .or-sa-btns { margin-top: 40px; } .or-sa-intro { padding-top: 45px !important; } /* VP: the three coloured boxes the same size. */ .or-vp-cards.wp-block-columns > .wp-block-column:is(.or-vp-card-col-expertise, .or-vp-card-col-cost, .or-vp-card-col-seamless) { flex-grow: 1; } /* VP "Your Path to Success": less space above "Let's Make it Happen". */ .or-vp-path-copy > .or-vp-btns { margin-top: 40px; } /* About: the longer intro gets a readable line length; the button keeps its place now the thin line above it is gone (15px + 1.5px rule + 19px). */ .or-ab-lead { max-width: 700px; margin-inline: auto !important; } .or-ab-strat-copy > .or-ab-btns { margin-top: 35.5px !important; } } @media (min-width: 1352px) { .or-at-wwd > :is(.or-at-eyebrow, .or-at-wwd-title) { padding-left: 41px; } .or-at-wwd > .or-at-wwd-title { padding-right: max(0px, calc(min(100%, 1520px) - 641px)); } } @media (min-width: 1920px) { .or-hc-need-cards > .or-hc-need-card { padding: 89px 40px 40px 134px; } } @media (min-width: 782px) and (max-width: 1199px) { /* The first box had its own 30px left padding here; now all six match. */ .or-hc-need-cards:nth-of-type(n) > .or-hc-need-card:nth-child(n) { padding-left: clamp(24px, 6.5vw, 125.5px); padding-right: clamp(24px, 3.1vw, 40px); } } @media (min-width: 1200px) and (max-width: 1919px) { /* Text starts where the tallest box's text starts today, so every box still fits its copy. */ .or-hc-need-cards:nth-of-type(n) > .or-hc-need-card:nth-child(n) { padding-top: clamp(64px, 10.4vw - 61px, 89px); padding-left: clamp(30px, 7vw, 134px); } } /* Accounting's six blue boxes: the text starts at the same point in all six. */ @media (min-width: 782px) and (max-width: 1351px) { .or-at-spec > .or-at-spec-cards:nth-child(n) > .or-at-spec-card:nth-child(n) { padding-top: 72px; padding-left: 34px; } .or-at-spec > .or-at-spec-cards:nth-child(n) > .or-at-spec-card:nth-child(n) .or-at-spec-h + p { margin-top: 14px !important; } } @media (min-width: 1352px) { .or-at-spec .or-at-spec-cards > .or-at-spec-card { justify-content: flex-start; padding-top: 103px !important; } .or-at-spec > .or-at-spec-cards:nth-child(n) > .or-at-spec-card:nth-child(n) .or-at-spec-h { max-width: 310px !important; } .or-at-spec > .or-at-spec-cards:nth-child(n) > .or-at-spec-card:nth-child(n) .or-at-spec-h + p { margin-top: 32px !important; } .or-at-spec > .or-at-spec-cards:nth-child(n) > .or-at-spec-card:nth-child(n) p { max-width: 316px !important; } } /* Found while checking the 23 Sep edits (not in Harps's list): at tablet widths the magenta and sky tiles' copy ran past their fixed height and was cut off (EdTech, Fintech, Healthcare, 782–1024px). The row now grows to fit its copy, as Accounting's already did, and the photo fills that height. */ @media (min-width: 782px) and (max-width: 1199px) { :is(.or-sa-tiles, .or-hc-tiles, .or-et-tiles, .or-ft-tiles).wp-block-columns > .wp-block-column { height: auto; } .or-sa-tiles.wp-block-columns > .wp-block-column { min-height: 387px; } :is(.or-hc-tiles, .or-et-tiles, .or-ft-tiles).wp-block-columns > .wp-block-column { min-height: 436px; } :is(.or-sa-tile-photo, .or-hc-tile-photo, .or-et-tile-photo, .or-ft-tile-photo) { position: relative; } :is(.or-sa-tile-photo, .or-hc-tile-photo, .or-et-tile-photo, .or-ft-tile-photo) > figure { position: absolute; inset: 0; margin: 0 !important; } :is(.or-sa-tile-photo, .or-hc-tile-photo, .or-et-tile-photo, .or-ft-tile-photo) img { height: 100%; } /* Room under the copy when a tile has to grow (the tiles had no bottom padding). */ :is(.or-sa-tiles, .or-hc-tiles, .or-et-tiles, .or-ft-tiles) > :is(.or-sa-tile-magenta, .or-sa-tile-sky, .or-hc-tile-magenta, .or-hc-tile-sky, .or-et-tile-magenta, .or-et-tile-sky, .or-ft-tile-magenta, .or-ft-tile-sky) { padding-bottom: 40px; } } /* Fractional CMO, "Why Hire One Rawr's Fractional CMOs?" (Harps, 23 Sep: "reduce the gap in the titles"). The numbered titles had a 60px line height on 40px text, so two- and three-line titles looked split; they now use 48px like the site's other 40px headings. The gap from each title to its text was fitted per row to the frame (70.8 / 39.8 / 54.3 / 71.3px); it is now the same in all four. Desktop only: phones were already even. */ @media (min-width: 782px) { .or-fc-why .or-fc-row-h { line-height: 48px; } .or-fc-why .or-fc-row .or-fc-row-copy > .or-fc-h + p { margin-top: 30px; } /* The tighter line height brought each title closer to its number (6–10px); an even 14px, as before. */ .or-fc-why .or-fc-row .or-fc-row-copy > .or-fc-row-h { margin-top: 14px !important; } } /* FAQ photos (Harps, 23 Sep 2026: a different photo on each page). The old shared photo was 700×1494; the pages that sized the box from the image (Part-Time CMO, AI Agents, Consulting) keep that shape, and the new 2:3 photos fill it, cropped at the sides. Boxes with a fixed height ignore this. */ :where(.or-faq-img) img { aspect-ratio: 700 / 1494; object-fit: cover; } /* Part-Time CMO on phones: the wide strip is centred on the woman's face, not on the table. */ @media (max-width: 781px) { .or-pt-faq-wide img { object-position: 50% 20%; } } /* ===== Gentle section reveals, 23 Sep 2026 ===================================== * Harps asked for animation on every page; Anwar: gentle, minimal, no animation on phones. * onerawr.js (function 3) adds .or-rise to each block of a page section that starts below the fold, * and .is-in when it scrolls into view; both classes come off once it has settled. Desktop only, * never for reduced-motion users; the hero and the blocks with their own animation are left out. */ @media (min-width: 782px) and (prefers-reduced-motion: no-preference) { html.or-js:not(.or-anim-off) .or-rise { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } html.or-js:not(.or-anim-off) .or-rise.is-in { opacity: 1; transform: none; } } /* No animation on phones (Anwar, 23 Sep 2026): the fades and the button wipe that followed the live site's mobile view are switched off below 782px, so everything is simply there. (The AI Agents and Industries cards were already still on phones.) */ @media (max-width: 781px) { html.or-js:not(.or-anim-off) :is( .or-service-card .or-icon-tile, .or-benefits, .or-footer .or-f-services, .or-footer .or-f-industries, .or-footer .or-f-call, .or-footer .or-f-email, .or-footer .or-f-social, .or-footer .or-f-address, .or-footer .or-f-legal ) { opacity: 1 !important; animation: none !important; } html.or-js:not(.or-anim-off) .or-footer .or-f-making .wp-block-buttons > .wp-block-button { clip-path: none !important; animation: none !important; } } /* ===== Blog: single post (templates/single.html) ============================================== * The old site's post page (Wix Blog, decision 1 in blog-page-plan.md), measured on the live site at 1920 * and on its 320px phone site (24 Sep 2026). Post text: Poppins ExtraLight 18/27 (phones 16/24), whose bold * is Poppins Regular, as on the old site; title and headings: Wix Madefor Text; navy throughout. * Spacing: Wix spaces posts with blank lines (27px; 24 on phones). Blocks sit flush and one blank line goes * where the live posts mostly have one (convert.js GAP): between paragraphs, before a heading, after a list; * none straight under a heading, nor between an intro line and its list, image or table. A block whose live * spacing differs carries or-gap-0 ... or-gap-3 (blank lines before it) or or-end-N (blank lines after the * last block). The default rules sit in :where() so those classes always win. * Extra space Wix adds on its own: 14px above an image that opens a post or follows a list, 32px under a * table (the table block is 17px taller than the table, then 15px more). Padding, not margin, so it adds to the blank lines instead of collapsing into them. */ .or-post-page { --or-line: 27px; --or-fs: 18px; /* the post text size: gaps at a blank line's own line height are written as N * --or-fs */ --or-h2: 28px; /* heading sizes, for the gap an empty heading leaves (convert.js blankUnit) */ --or-h3: 22px; --or-h4: 20px; --or-h5: 18px; --or-h6: 18px; --or-rule: rgba(27, 25, 64, 0.2); --or-card-border: rgba(212, 239, 255, 0.75); padding: 159px 24px 30px; /* the card starts 246px down, under the 87px header, as on live */ color: var(--wp--preset--color--navy); } .or-post-page .or-post-card { box-sizing: border-box; max-width: 940px; margin: 0 auto; padding: 60px 24px; border: 1px solid var(--or-card-border); background: #fff; } /* (functions.php) keeps the blog's text as typed; it adds no box of its own. */ or-text { display: contents; } .or-post-page .or-post-card > * { max-width: 740px; margin: 0 auto; } .or-post-page .or-post-card > or-text > * { max-width: 740px; margin-inline: auto; } /* Date · read time */ .or-post-page .or-post-meta { gap: 0; margin-bottom: 18px; font-family: var(--wp--preset--font-family--poppins); font-size: 14px; font-weight: 200; line-height: 21px; } .or-post-page .or-post-meta > * { margin: 0; font: inherit; } .or-post-page .or-read-time::before { content: "\00b7"; margin: 0 6px; } .or-post-page .or-post-title { margin-block: 0; font-family: var(--wp--preset--font-family--madefor); font-size: 40px; font-weight: 400; line-height: 50px; color: inherit; } /* The post text */ .or-post-page .or-post { display: flow-root; margin-top: 20px; overflow-wrap: break-word; /* a long address breaks to fit the column, as on Wix */ font-family: var(--wp--preset--font-family--poppins); font-size: 18px; font-weight: 200; line-height: 27px; } .or-post strong, .or-post b { font-weight: 400; } .or-post :is(h1, h2, h3, h4, h5, h6, blockquote) :is(strong, b) { font-weight: 700; } .or-post a { color: inherit; text-decoration: underline; } .or-post :is(h1, h2, h3, h4, h5, h6) { font-family: var(--wp--preset--font-family--madefor); font-weight: 400; color: inherit; text-transform: none; letter-spacing: normal; } /* Wix gives headings a minimum height, so a one-line h2 is 36px (35px line) and an h3 30px (27px line). */ .or-post h2 { min-height: 36px; font-size: 28px; line-height: 35px; } .or-post h3 { min-height: 30px; font-size: 22px; line-height: 27px; } .or-post h4 { font-size: 20px; line-height: 25px; } .or-post :is(h5, h6) { font-size: 18px; line-height: 25px; } /* Justified text: the class or-justify (the editor's own alignment has no justify). */ .or-post :is(p, h1, h2, h3, h4, h5, h6, ul, ol).or-justify { text-align: justify; } /* Wix keeps every space (white-space: break-spaces), so a space at the end of a line still takes room and can push the last word down; set on the elements that hold text only, as the whitespace between blocks and list items would otherwise show. A list item holding a sub-list keeps normal wrapping for the same reason (10 items in all). */ .or-post :is(p, h1, h2, h3, h4, h5, h6, td), .or-post li:not(:has(> ul, > ol)) { white-space: break-spaces; } /* Justified text is pre-wrap on Wix: there a space at the end of a line may run past the edge. */ .or-post :is(p, h1, h2, h3, h4, h5, h6).or-justify, .or-post .or-justify li { white-space: pre-wrap; } /* Blank-line spacing (see the section note) */ .or-post > *, .or-post .or-post-layout > .wp-block-column > * { margin-block: 0; } .or-post > * + *, .or-post .or-post-layout > .wp-block-column > * + * { margin-block-start: var(--or-line); } .or-post > :where(h1, h2, h3, h4, h5, h6) + :where(:not(h1, h2, h3, h4, h5, h6)), .or-post > :where(p) + :where(ul, ol, .wp-block-image, .wp-block-table, .wp-block-quote), .or-post > :where(ul, ol) + :where(.wp-block-image), .or-post > :where(.wp-block-separator, .wp-block-table, .wp-block-quote) + :where(p) { margin-block-start: 0; } .or-post > .or-gap-0, .or-post .wp-block-column > .or-gap-0 { margin-block-start: 0; } .or-post > .or-gap-1 { margin-block-start: var(--or-line); } .or-post > .or-gap-2 { margin-block-start: calc(2 * var(--or-line)); } .or-post > .or-gap-3 { margin-block-start: calc(3 * var(--or-line)); } .or-post > .or-end-1 { margin-block-end: var(--or-line); } .or-post > .or-end-2 { margin-block-end: calc(2 * var(--or-line)); } .or-post > .or-end-3 { margin-block-end: calc(3 * var(--or-line)); } .or-post > .or-end-4 { margin-block-end: calc(4 * var(--or-line)); } /* ... only when nothing stands between: after a blank line the image starts on the line below it. */ .or-post > .wp-block-image:first-child:not([class*="or-gap-"]):not([style*="margin-top"]), .or-post > :where(ul, ol) + .wp-block-image:not([class*="or-gap-"]):not([style*="margin-top"]) { padding-top: 14px; } /* Lists: 1.5em in, text a further 0.5em (27 + 9px; 24 + 8 on phones) */ .or-post :is(ul, ol) { margin-inline: 0; padding: 0; } .or-post li { margin-left: 1.5em; padding-left: 0.5em; } .or-post ul { list-style: disc; } .or-post ul ul { list-style: circle; } .or-post ol { list-style: decimal; } /* An item with its own line height: on Wix the bullet keeps the list's line, so it stands out of a tighter first line: the item grows by 2.16px on desktop (its first line is 27px) and by 1px on phones (measured). */ @media (min-width: 782px) { .or-post li[style*="line-height"]::first-line { line-height: var(--or-line); } } @media (max-width: 781px) { .or-post li[style*="line-height"] { padding-top: 1px; } } /* A heading Wix put in a numbered list item. Wix gives such an item the heading's font, so it is indented 1.5em + 0.5em of the heading size (h2: 42 + 14px, h3: 33 + 11px) and its number is set in the heading's font, ending where the item's box starts ("4. ", as a list marker). The rest of the item (or-li-text-h2, -h3) is indented as far as its heading. */ .or-post { counter-reset: or-li; } .or-post .or-li-num { counter-increment: or-li; position: relative; margin-left: 1.5em; padding-left: 0.5em; } .or-post .or-li-num::before { content: counter(or-li) ". "; position: absolute; top: 0; right: 100%; font-weight: 400; white-space: pre; } .or-post .or-li-text-h2 { margin-left: 42px; padding-left: 14px; } .or-post .or-li-text-h3 { margin-left: 33px; padding-left: 11px; } /* Images fill the text column; the size WordPress serves is set by srcset. */ .or-post .wp-block-image { margin-inline: 0; } .or-post .wp-block-image img { display: block; width: 100%; height: auto; } /* Divider: a 1px navy line in a 29px band */ .or-post .wp-block-separator { width: 100%; height: 29px; margin-inline: 0; border: 0; background: linear-gradient(currentColor, currentColor) 0 14px / 100% 1px no-repeat; opacity: 1; } /* Tables: 10px cell padding; 1px rules (#bbbac6) drawn over the cells' top and left edges, the last column's right edge and the last row's bottom edge just outside, so they take no height, as Wix draws them. The table sits 1px in from the text column on each side. */ .or-post .wp-block-table { margin-inline: 0; padding-bottom: 32px; overflow-x: auto; } .or-post .wp-block-table table { width: calc(100% - 2px); margin-left: 1px; border-collapse: separate; border-spacing: 0; } .or-post .wp-block-table td { padding: 10px; border: 0; vertical-align: top; box-shadow: inset 1px 1px 0 #bbbac6; } .or-post .wp-block-table td:last-child { box-shadow: inset 1px 1px 0 #bbbac6, 1px 0 0 #bbbac6; } .or-post .wp-block-table tr:last-child td { box-shadow: inset 1px 1px 0 #bbbac6, 0 1px 0 #bbbac6; } .or-post .wp-block-table tr:last-child td:last-child { box-shadow: inset 1px 1px 0 #bbbac6, 1px 0 0 #bbbac6, 0 1px 0 #bbbac6, 1px 1px 0 #bbbac6; } /* The one quote (a CPA post): Madefor 24/30 with a 3px rule */ .or-post .wp-block-quote { margin: 15px 18px 15px 0; padding: 6px 0 6px 18px; border-left: 3px solid currentColor; font-family: var(--wp--preset--font-family--madefor); font-size: 24px; line-height: 30px; } .or-post .wp-block-quote p { margin: 0; } /* The one button (Let's Chat) */ .or-post .wp-block-buttons { justify-content: center; gap: 0; } .or-post .wp-block-button__link { padding: 12px; border: 3px solid #fff; border-radius: 5px; background: var(--wp--preset--color--navy); color: #fff; font-family: var(--wp--preset--font-family--poppins); font-size: 14px; font-weight: 200; line-height: 21px; } .or-post .wp-block-button__link:hover, .or-post .wp-block-button__link:focus-visible { transform: none; box-shadow: none; background: var(--wp--preset--color--navy); color: #fff; } /* The one stats/testimonial panel (why-ai-wont-replace-your-cmo): 300 + 420px with a 20px gap */ .or-post .or-post-layout { gap: 20px; margin-inline: 0; } .or-post .or-post-layout > .wp-block-column { padding-block: 18px; } /* Share row: between two rules, 19px icons 30px apart */ .or-post-page .or-post-share { gap: 30px; margin-top: 20px; margin-bottom: 18px; padding: 23px 0; border-block: 1px solid var(--or-rule); } .or-post-page .or-post-share .wp-social-link { margin: 0; padding: 0; background: none; color: inherit; } .or-post-page .or-post-share .wp-block-social-link-anchor { padding: 0; } .or-post-page .or-post-share .wp-social-link svg { width: 19px; height: 19px; fill: currentColor; } .or-post-page .or-post-share .wp-social-link svg.or-share-stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .or-post-page .or-post-share [data-or-copy] { position: relative; } .or-post-page .or-post-share [data-or-copy].is-copied::after { content: "Link copied!"; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 4px 8px; background: var(--wp--preset--color--navy); color: #fff; font: 200 12px/18px var(--wp--preset--font-family--poppins); white-space: nowrap; } /* Recent Posts: three cards under the post */ .or-post-page .or-recent { max-width: 940px; margin: 30px auto 0; font-family: var(--wp--preset--font-family--poppins); font-weight: 200; } .or-post-page .or-recent-head { align-items: flex-start; margin-bottom: 20px; } .or-post-page .or-recent-title { margin: 0; font: inherit; font-size: 18px; line-height: 27px; color: inherit; } .or-post-page .or-recent-all { margin: 0; font-size: 14px; line-height: 21px; } .or-post-page .or-recent-all a { color: inherit; text-decoration: none; } .or-post-page .or-recent-query { margin: 0; } .or-post-page .or-recent-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin: 0; padding: 0; list-style: none; } .or-post-page .or-recent-list > li { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--or-card-border); background: #fff; } .or-post-page .or-recent-list > li::after { content: ""; height: 34px; margin: 21px 24px 24px; border-top: 1px solid var(--or-rule); } .or-post-page .or-recent-img { margin: 0; } .or-post-page .or-recent-card-title { display: -webkit-box; margin: 24px 24px 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--wp--preset--font-family--madefor); font-size: 18px; font-weight: 400; line-height: normal; } /* Core makes a title link an inline-block, which the two-line clamp cannot cut: keep it inline. */ .or-post-page .or-recent-card-title a { display: inline; color: inherit; text-decoration: none; } /* 782-987px: the card narrows with the window. */ @media (min-width: 782px) and (max-width: 987px) { .or-post-page .or-recent-list { gap: 20px; } } /* Phones: the old site's 320px phone post. */ @media (max-width: 781px) { .or-post-page { --or-line: 24px; --or-fs: 16px; --or-h2: 24px; --or-h3: 20px; --or-h4: 18px; padding: 0; } /* the footer follows the carousel dots directly, as on the phone site */ .or-post-page .or-post-card { max-width: none; padding: 32px 18px; border: 0; } .or-post-page .or-post-meta { margin-bottom: 8px; font-size: 12px; line-height: 18px; } .or-post-page .or-post-title { font-size: 26px; line-height: 36.4px; } .or-post-page .or-post { font-size: 16px; line-height: 24px; } .or-post h2 { font-size: 24px; line-height: 35px; } .or-post h3 { font-size: 20px; line-height: 27px; } .or-post h4 { font-size: 18px; line-height: 25px; } .or-post .or-li-text-h2 { margin-left: 36px; padding-left: 12px; } .or-post .or-li-text-h3 { margin-left: 30px; padding-left: 10px; } /* The quote and wide tables reach the screen's left edge, as on the phone site. */ .or-post .wp-block-quote { margin: 15px 0 15px -18px; font-size: 20px; } /* Wix keeps each column at 120px on its phone site and lets the table scroll sideways. */ .or-post .wp-block-table { margin-inline: -18px; padding-left: 1px; } .or-post .wp-block-table table { width: auto; margin-left: 0; table-layout: auto; } .or-post .wp-block-table td { box-sizing: border-box; width: 120px; min-width: 120px; max-width: 120px; } .or-post .or-post-layout > .wp-block-column { padding-block: 16px; } .or-main .or-post .wp-block-buttons > .wp-block-button, .or-main .or-post .wp-block-buttons > .wp-block-button .wp-block-button__link { width: auto; } /* Recent Posts: 248px cards, one at a time in the middle of the screen, the neighbours peeking in, and a dot per post (assets/js/onerawr.js makes it loop), as on the old site's phone page. */ .or-post-page .or-recent { padding-inline: 18px; } .or-post-page .or-recent-list { display: flex; gap: 12px; max-width: none; /* core caps the post list at 100%, which would stop it running edge to edge */ margin-inline: calc(50% - 50vw); padding: 0 calc(50vw - 124px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .or-post-page .or-recent-list::-webkit-scrollbar { display: none; } .or-post-page .or-recent-list > li { flex: 0 0 248px; border: 0; scroll-snap-align: center; } .or-post-page .or-recent-list > li.is-clone { display: flex; } .or-post-page .or-recent-list > li::after { margin-bottom: 22px; } .or-post-page .or-recent-dots { display: flex; justify-content: center; gap: 6px; margin: 18px 0 18.5px; } .or-post-page .or-recent-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--navy); opacity: 0.2; } .or-post-page .or-recent-dots span.is-active { opacity: 1; } } @media (min-width: 782px) { .or-post-page .or-recent-list > li.is-clone, .or-post-page .or-recent-dots { display: none; } } /* ===== Blog: listing (templates/home.html) ===================================================== * The new design (designs/Blog/UI, 24 Sep 2026), measured on its 1920 frame (2x). The frame's header is * 100px and the site's 87px, so everything sits 13px higher than in the frame. Text in the site's type: * "Blogs" Figtree 700 40px, the rest Questrial. Cards 3 across in a 1184px grid (gaps 44 across, 43 * down), a 1px #dff3fe border and 34px corners; the photo spans the card's full width, over the border. */ .or-blog { --or-card-border: #dff3fe; padding: 118px 24px 0; color: #000; } .or-blog .or-blog-title { max-width: 1192px; margin: 0 auto; font-family: var(--wp--preset--font-family--figtree); font-size: 40px; font-weight: 700; line-height: 1.12; color: #000; } .or-blog .or-blog-intro { max-width: 1192px; margin: 72px auto 0; font-family: var(--wp--preset--font-family--questrial); font-size: 15px; line-height: 22px; color: #000; } .or-blog .or-blog-query { max-width: 1184px; margin: 114px auto 0; } .or-blog .or-blog-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 43px 44px; margin: 0; padding: 0; list-style: none; } .or-blog .or-blog-list > li { position: relative; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--or-card-border); border-radius: 34px; background: #fff; } .or-blog .or-blog-img { margin: -1px -1px 0; border-radius: 34px; overflow: hidden; aspect-ratio: 365 / 273 !important; } .or-blog .or-blog-img img { width: 100%; height: 100%; object-fit: cover; } .or-blog .or-blog-card-body { padding: 42px 32px 95px; } .or-blog .or-blog-card-body > * { margin: 0; } .or-blog .or-blog-meta { gap: 0; align-items: center; } .or-blog .or-blog-read { margin: 0; font-family: var(--wp--preset--font-family--questrial); font-size: 17px; line-height: 25px; color: #434343; } .or-blog .or-blog-card-title { display: -webkit-box; margin: 27px 0 0; /* by class: the title sits in , out of reach of the > * reset */ overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-family: var(--wp--preset--font-family--questrial); font-size: 30px; font-weight: 400; line-height: 45px; color: #000; } .or-blog .or-blog-card-title a { display: inline; color: inherit; text-decoration: none; } /* The whole card opens the post (the title link stretched over it); the ⋮ menu sits above that. */ .or-blog .or-blog-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: 34px; } .or-blog .or-blog-excerpt { margin: 25px 0 0; } .or-blog .or-blog-excerpt p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--wp--preset--font-family--questrial); font-size: 15px; line-height: 22px; color: #434343; } .or-blog .or-blog-excerpt .wp-block-post-excerpt__more-text { display: none; } /* ⋮ share menu */ .or-blog .or-card-more { position: relative; z-index: 2; } .or-blog .or-card-more-btn { display: grid; place-items: center; width: 24px; height: 25px; padding: 0; border: 0; background: none; color: #1d1b20; cursor: pointer; } .or-blog .or-card-more-btn svg { fill: currentColor; } .or-blog .or-card-share { position: absolute; top: 100%; right: 0; display: none; min-width: 190px; padding: 8px 0; border: 1px solid var(--or-card-border); border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(27, 25, 64, 0.12); } .or-blog .or-card-more.is-open .or-card-share, .or-blog .or-card-more:not(.is-ready):focus-within .or-card-share { display: block; } .or-blog .or-card-share a { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-family: var(--wp--preset--font-family--questrial); font-size: 15px; color: var(--wp--preset--color--navy); text-decoration: none; } .or-blog .or-card-share a:hover, .or-blog .or-card-share a:focus-visible { background: var(--wp--preset--color--sky); } .or-blog .or-card-share svg { flex: 0 0 auto; width: 16px; height: 16px; fill: currentColor; } .or-blog .or-card-share .or-share-stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .or-blog .or-card-share [data-or-copy].is-copied span::after { content: " (copied)"; } /* « 1 2 3 4 5 » */ .or-blog .or-blog-pager { display: flex; justify-content: center; align-items: center; margin: 59px 0 0; padding-bottom: 52px; font-family: var(--wp--preset--font-family--questrial); font-size: 20px; line-height: 30px; color: #5d5c61; } .or-blog .or-pager-desk { display: flex; align-items: center; } .or-blog .or-pager-desk > * { display: flex; justify-content: center; align-items: center; width: 53px; height: 30px; color: inherit; text-decoration: none; } .or-blog .or-pager-desk .or-pager-first { margin-right: 51px; } .or-blog .or-pager-desk .or-pager-last { margin-left: 52px; } .or-blog .or-blog-pager a:hover { color: var(--wp--preset--color--magenta); } .or-blog .or-pager-phone { display: none; } /* 782-1099px: two cards across. */ @media (min-width: 782px) and (max-width: 1099px) { .or-blog .or-blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Phones: the design's 320px frame (its header is the site's 70px). The cards stack, as on the old site, and the page numbers become the old site's "« ‹ 1/18 › »" (36px targets 12px apart, the count in a 48px slot, unusable ends at 40%) drawn in the design's thin navy chevrons and page-number type, not the mock's "‹ ○ • • • ›" dots (Anwar, 24 Sep 2026). Its centre line stays where the design's dots were. */ @media (max-width: 781px) { .or-blog { padding: 46px 30px 0; } .or-blog .or-blog-title { font-size: 25px; text-align: center; } .or-blog .or-blog-intro { margin-top: 27.5px; color: var(--wp--preset--color--navy); } .or-blog .or-blog-query { margin-top: 58px; } .or-blog .or-blog-list { grid-template-columns: minmax(0, 1fr); gap: 32px; } .or-blog .or-blog-img { aspect-ratio: 4 / 3 !important; } .or-blog .or-blog-card-body { padding: 30px 21px 45px; } .or-blog .or-blog-card-title { margin-top: 18px; font-size: 20px; line-height: 26.67px; } .or-blog .or-blog-excerpt { margin-top: 18px; } .or-blog .or-blog-excerpt p { -webkit-line-clamp: 3; } .or-blog .or-blog-pager { margin-top: 30px; padding-bottom: 39px; color: var(--wp--preset--color--navy); } .or-blog .or-pager-desk { display: none; } .or-blog .or-pager-phone { display: flex; align-items: center; } .or-blog .or-pager-step { display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; margin: 0 6px; color: inherit; } .or-blog .or-pager-step.is-off { opacity: 0.4; } /* A fixed slot, so the buttons stay put from "1/18" to "18/18" (which overflows it evenly). */ .or-blog .or-pager-count { display: flex; justify-content: center; width: 48px; margin: 0 6px; white-space: nowrap; } } /* ===== page 20: MEETING BOOKED ================================================================ * The thank-you page HubSpot's booking link opens after a booking (meeting-booked-page.js). No design * frame: built to the live page, measured 25 Sep 2026 at 1920, 1440 and 320 (meeting-booked-design.md). * A box with a 1px magenta border and 35px corners around the heading and one paragraph, both centred * navy Questrial. * Phones: the box runs edge to edge from the header down, 668px tall, 20px above the footer; heading 28px * on 29px lines 41px below its top edge, text 14px 24px below it, 20px in from the sides. * Desktop: the box is 980x320, centred, 123px under the header and 174px above the footer; heading 56px * on 58px lines, text 16px in a 732px column below it. Text lines are 1px further apart than the live page * states (its boxes measure 23.4 and 26.2 a line), and the heading is set 1px lower, so the ink matches. From 1028px the * text sits 13px right of the box centre, as on the live page (its text boxes are offset). */ .or-mb { margin-block: 0 !important; padding: 0 0 20px; } .or-mb-box { box-sizing: border-box; min-height: 668px; margin: 0 !important; padding: 40px 19px 0; border: 1px solid var(--wp--preset--color--magenta); border-radius: 35px; text-align: center; } .or-mb-box > * { margin: 0; } .or-mb-title { font-family: var(--wp--preset--font-family--questrial); font-size: 28px; font-weight: 400; line-height: 29px; color: var(--wp--preset--color--navy); } .or-mb-box > .or-mb-lead { margin-top: 24px !important; font-family: var(--wp--preset--font-family--questrial); font-size: 14px; line-height: 23.4px; color: var(--wp--preset--color--navy); } @media (min-width: 782px) { .or-mb { padding: 123px 24px 174px; } .or-mb-box { max-width: 980px; min-height: 320px; margin-inline: auto !important; padding: 80px 24px 0; } .or-mb-title { font-size: 56px; line-height: 58px; } .or-mb-box > .or-mb-lead { max-width: 732px; margin: 34px auto 0 !important; font-size: 16px; line-height: 26.2px; } } @media (min-width: 1028px) { .or-mb-box { padding-inline: 127px 101px; } } /* ===== Phones: space under the booking calendar (27 Sep 2026) =================================== * On phones HubSpot's frame is 756px tall and its calendar fills the top 667px, so the frame ends 89px under * the calendar. That strip is empty while the calendar shows, but once a date and a time are picked the * booking form's Back and Confirm buttons sit in it, so nothing may overlap the frame (tested: a section * moved up into it covered Confirm). The phone frames draw 31 to 63px under the calendar, which the frame * can't give; the old site showed about 147px. Six pages added padding under the frame (144 to 261px of * white); here the next section starts where the frame ends, 89px under the calendar, as on Outsourced and * About. On AI Agents the FAQ heading sits 103px under it, as on the other pages where the FAQ follows the * calendar. Desktop is unchanged (mistakes.md #28). */ @media (max-width: 781px) { :is(.or-book, .or-team-book, .or-contact-book) .meetings-iframe-container iframe { display: block; } .or-book { padding-bottom: 0 !important; } /* Fractional Marketing Service, Part-time CMO, Consulting, AI Agents */ .or-team-book, .or-contact-book { padding-bottom: 0; } .or-book + .or-faq-plain { padding-top: 0 !important; } .or-book + .or-faq-plain .wp-block-heading { margin-top: 10px; } /* Consulting: 44px of white between the "Get Started" panel and "The Process", as in its frame (was 88). */ .or-upskill { padding-bottom: 44px !important; } .or-upskill + .or-process { margin-top: 0 !important; } } /* ===== Entrance effects copied from the live site (Harps, 1 Oct 2026) =========================== * onerawr.js function 5 marks the elements on desktop (.or-m and one effect) and adds .or-m-in as each * enters the window; the marks come off when the effect ends. Keyframes and timing are the live site's, * read on onerawr.com with document.getAnimations(): 1.2s, easeInOutCubic; the float easeInOutSine. A * float card already moved by the layout (the staggered steps) rises to its own place (--or-m-y). */ @keyframes or-m-reveal { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @keyframes or-m-reveal-up { from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @keyframes or-m-slide-up { from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateY(100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateY(0); } } @keyframes or-m-rise { from { opacity: 0; clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0 100%); transform: translateY(100%); } to { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateY(0); } } @keyframes or-m-glide { from { transform: translateX(var(--or-m-x, -100%)); } to { transform: translateX(0); } } @keyframes or-m-float { from { opacity: 0; transform: translateY(calc(var(--or-m-y, 0px) + 60px)); } to { opacity: 1; transform: translateY(var(--or-m-y, 0px)); } } @keyframes or-m-slide-left { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transform: translateX(-100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateX(0); } } @keyframes or-m-fade { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 782px) and (prefers-reduced-motion: no-preference) { html.or-js .or-m:not(.or-m-in) { opacity: 0; } html.or-js .or-m-clip { overflow-x: clip; } .or-m-in { animation-duration: 1.2s; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-fill-mode: backwards; } .or-m-reveal.or-m-in { animation-name: or-m-reveal; } .or-m-reveal-up.or-m-in { animation-name: or-m-reveal-up; } .or-m-slide-up.or-m-in { animation-name: or-m-slide-up; } .or-m-rise.or-m-in { animation-name: or-m-rise; } .or-m-glide.or-m-in { animation-name: or-m-glide; } .or-m-float.or-m-in { animation-name: or-m-float; animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } .or-m-slide-left.or-m-in { animation-name: or-m-slide-left; } /* Team: the hero fades in as the page opens (1.5s), as on the live page. */ html.or-js:not(.or-anim-off) .or-team-hero-row { animation: or-m-fade 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) both; } } @supports not (overflow: clip) { html.or-js .or-m-clip { overflow-x: hidden; } } /* ===== Harps's video review (2 Oct 2026) ======================================================== * designs/Harps revision/2/harps-video-list.md (numbers below are that list's items). */ /* Items 2 and 3: the six problem boxes on the industry pages take the AI Agents card colours, in the same order (row 1 light blue, grey, magenta; row 2 grey, magenta, light blue; magenta with white text), and their titles start at the top, the same distance down in every box. Firm of the Future's three boxes take row 1's colours. */ :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-ff-need-cards, .or-at-spec-cards) > .wp-block-column:nth-child(1) { background-color: var(--wp--preset--color--sky-deep); } :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-ff-need-cards, .or-at-spec-cards) > .wp-block-column:nth-child(2) { background-color: var(--wp--preset--color--mist); } :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-ff-need-cards, .or-at-spec-cards) > .wp-block-column:nth-child(3) { background-color: var(--wp--preset--color--magenta); } :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) + :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) > .wp-block-column:nth-child(1) { background-color: var(--wp--preset--color--mist); } :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) + :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) > .wp-block-column:nth-child(2) { background-color: var(--wp--preset--color--magenta); } :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) + :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) > .wp-block-column:nth-child(3) { background-color: var(--wp--preset--color--sky-deep); } :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-ff-need-cards, .or-at-spec-cards) > .wp-block-column:nth-child(3):not(:is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) + * > *), :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) + :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) > .wp-block-column:nth-child(2) { color: var(--wp--preset--color--white); } :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-ff-need-cards, .or-at-spec-cards) > .wp-block-column:nth-child(3):not(:is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) + * > *) :is(h3, p, li), :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) + :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards) > .wp-block-column:nth-child(2) :is(h3, p, li) { color: var(--wp--preset--color--white) !important; } @media (min-width: 782px) { /* As tall as their text (the tallest box in a row sets the row), with the same space above and below. */ html body :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-ff-need-cards, .or-at-spec-cards) > .wp-block-column { height: auto !important; min-height: 0 !important; justify-content: flex-start !important; padding-top: 64px !important; padding-bottom: 64px !important; } /* Accounting's boxes carry stronger per-box rules (padding-top 103px !important); this outranks them. */ html body .or-at-spec > .or-at-spec-cards:nth-child(n) > .or-at-spec-card.wp-block-column:nth-child(n) { justify-content: flex-start !important; padding-top: 64px !important; padding-bottom: 64px !important; } } /* Item 5: the numbered cards (1-6) are only as tall as their text, like SaaS's (Harps: "these boxes seem much better, so we just need to do the rest of the boxes to match"); 40px under the text. */ @media (min-width: 782px) { html body :is(.or-at-reason, .or-sa-reason, .or-hc-reason, .or-et-reason, .or-ft-reason, .or-lg-reason, .or-ff-reason) { min-height: 0 !important; padding-bottom: 40px !important; } } /* Item 4: the Investment Comparison panel's text sits in the middle of the panel (it started after a large fixed left padding, so on laptop screens the space on the left was three times the space on the right). */ @media (min-width: 782px) { html body :is(.or-sa-cost-panel, .or-hc-cost-panel, .or-et-cost-panel, .or-ft-cost-panel, .or-lg-cost-panel, .or-at-cost-panel) { padding-left: 40px !important; padding-right: 40px !important; } /* The block is as wide as its three columns (their widths are set per page) and sits in the middle. */ html body :is(.or-sa-cost-cols, .or-hc-cost-cols, .or-et-cost-cols, .or-ft-cost-cols, .or-lg-cost-cols, .or-at-cost-cols).wp-block-columns { width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; } /* The last list is narrower than its column; the column shrinks to it so the text, not the box, is centred. */ html body :is(.or-sa-cost-cols, .or-hc-cost-cols, .or-et-cost-cols, .or-ft-cost-cols, .or-lg-cost-cols, .or-at-cost-cols) > .wp-block-column:last-child { flex: 0 0 auto !important; width: fit-content; } } /* Item 6: the purple image beside "Complete … Marketing Team" runs to the window's left edge where the layout puts it at the edge (it sat 5px in, with rounded left corners, leaving a thin white strip): Accounting from 1352px, EdTech, Fintech, Logistics and Firm of the Future from 1920px. Narrower screens inset it with rounded corners, as on Healthcare (the design), and keep that. */ @media (min-width: 1352px) { html body .or-at-team { padding-left: 0 !important; } html body .or-at-team-img img { border-radius: 0 35px 35px 0 !important; } } @media (min-width: 1920px) { html body :is(.or-et-team, .or-ft-team, .or-lg-team, .or-ff-team) { padding-left: 0 !important; } html body :is(.or-et-team-img, .or-ft-team-img, .or-lg-team-img, .or-ff-team-img) img { border-radius: 0 35px 35px 0 !important; } } /* Item 8: no white line between the navy and the light-blue panel in Why Choose One Rawr (Healthcare, EdTech and Fintech had a 3px gap; Accounting and SaaS had none). */ @media (min-width: 782px) { html body :is(.or-hc-why-cols, .or-et-why-cols, .or-ft-why-cols).wp-block-columns { gap: 0 !important; } } /* Item 11: Fractional CMO, "Need a Strategy Fast…" band: the heading and text sit in the middle of the band at every width, as on the old page (the block was held 178.5px from the left, so on wide screens all the spare room collected on the right: 777px against 203px at 1920). At the design's 1351px it moves 3px. */ @media (min-width: 782px) { html body .or-fc-strat-cols.wp-block-columns { justify-content: center !important; padding-left: 0 !important; } } /* Item 13: AI Agents, "Intelligent Marketing, Grounded in Your Business": the navy band's text sits in the middle (the 950px block was centred, but its right-hand text stops 47px short of the block's edge, so the space on the right was 47px wider than on the left). From 1000px the block's columns keep the same width. */ @media (min-width: 1000px) { html body .or-grounded .or-benefits-split { position: relative; left: 23px; } } /* Item 14: AI Agents, "Ready to Build Your AI Marketing Team?": the photo is square with rounded corners, like the page's other photo (it was a 589x386 rectangle); cropped to keep the tablet. Desktop: 420px square at the right of the same 950px block, the text beside it. */ html body .or-ready-img img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 72% 50%; } @media (min-width: 782px) { html body .or-ready-split > .wp-block-column:last-child { flex: 0 0 420px !important; } html body .or-ready-split > .wp-block-column:first-child { flex: 1 1 auto !important; } } /* Item 10: every hero banner image has rounded corners, like the other service pages' (40px): Fractional CMO, Fractional VP Marketing and About had square corners; Outsourced had only its bottom corners rounded (30px), so its top ones match them. */ html body :is(.or-fc-hero-img, .or-vp-hero-img, .or-ab-hero-img) img { border-radius: 40px; } html body .or-om-hero-img img { border-radius: 30px; } /* Item 19: About: the office photo beside "Focused on what works" has rounded corners on desktop too (it does on phones), and "Need a Strategy Fast?" sits on two lines (it was held to 260px, which made three). */ @media (min-width: 782px) { html body .or-ab-how-img img { border-radius: 35px; } html body .or-ab-strat-title { max-width: 340px; } } /* Item 15: Consulting: the white gap under "The One Rawr Advantage" and under the coaching panel stays as in the design (83px) on wide screens. The tall photo beside each panel grew with the window while the panel did not, so the gap grew too: 215px at 1512, 547px at 1920. From 1352px the photos keep their 1351px height (the design's) and are cropped a little wider instead. */ @media (min-width: 1352px) { html body .or-consultant .or-bleed-tall img { height: 1098px; min-height: 0; } html body .or-coach .or-bleed-tall img { height: 1078px; min-height: 0; } } /* Item 17: Blog listing cards in the homepage cards' style (Harps: "the same design here as the home page"): the pink line (border), a "Read More" button at the bottom of every card (lined up across a row), the empty space under the text gone (the text area had 95px of padding below it), and less space between the cards and above them. */ .or-blog { --or-card-border: rgba(188, 13, 143, 0.21); } .or-blog .or-blog-card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding-bottom: 32px; } .or-blog .or-blog-excerpt { margin-bottom: 26px !important; } .or-blog .or-blog-more { position: relative; z-index: 1; display: inline-flex; align-items: center; align-self: flex-start; justify-content: center; box-sizing: border-box; width: 164px; height: 45px; margin-top: auto !important; border-radius: 35px; background: var(--wp--preset--color--magenta); font-family: var(--wp--preset--font-family--questrial); font-size: 16px; line-height: 24px; color: var(--wp--preset--color--white); text-decoration: none; } .or-blog .or-blog-more:hover, .or-blog .or-blog-more:focus-visible { color: var(--wp--preset--color--white); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(188, 13, 143, 0.28); } .or-blog .or-blog-list { gap: 32px; } .or-blog .or-blog-intro { margin-top: 40px; } .or-blog .or-blog-query { margin-top: 64px; } @media (max-width: 781px) { .or-blog .or-blog-card-body { padding-bottom: 28px; } .or-blog .or-blog-excerpt { margin-bottom: 22px !important; } .or-blog .or-blog-more { width: 160px; height: 40.5px; } .or-blog .or-blog-intro { margin-top: 27.5px; } .or-blog .or-blog-query { margin-top: 40px; } } /* Item 1: homepage testimonials: each person's photo in a circle above the name, everything a little bigger, and the slides change by themselves (onerawr.js). The slides are stacked in one place, so the band keeps the height of the longest testimonial while they change (nothing below it moves), and they cross-fade. */ .or-hm-slide > .or-hm-slide-photo { width: 88px; margin: 0 auto 18px !important; } .or-hm-slide > .or-hm-slide-photo img { display: block; box-sizing: border-box; width: 88px; height: 88px; object-fit: cover; border: 3px solid var(--wp--preset--color--magenta-bright); border-radius: 50%; } .or-hm-slide > .or-hm-slide-quote { font-size: 18px; line-height: 25px; } /* Each slide sits in the middle of the band, so a short quote does not leave a gap under it. */ .or-hm-slides.is-slideshow { display: grid; align-items: center; } .or-hm-slides.is-slideshow > .or-hm-slide { display: block; grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.6s ease, visibility 0s linear 0.6s; } .or-hm-slides.is-slideshow > .or-hm-slide.is-active { visibility: visible; opacity: 1; transition: opacity 0.6s ease, visibility 0s; } .or-hm-slides.is-slideshow > .or-hm-slides-dots { grid-area: 2 / 1; } @media (prefers-reduced-motion: reduce) { .or-hm-slides.is-slideshow > .or-hm-slide { transition: none; } } @media (min-width: 782px) { .or-hm-slide { max-width: 700px; } .or-hm-slide > .or-hm-slide-photo { width: 112px; margin-bottom: 22px !important; } .or-hm-slide > .or-hm-slide-photo img { width: 112px; height: 112px; } .or-hm-slide > .or-hm-slide-who { font-size: 18px; line-height: 24px; } /* Narrower near 782px so the text clears the arrows (their 44px buttons sit 4.792vw in from each side). */ .or-hm-slide > .or-hm-slide-quote { max-width: min(640px, calc(100vw - 2 * (4.792vw + 60px))); font-size: 22px; line-height: 31px; } } /* Item 18: blog topic filters (Harps: "oval kind of buttons, the pink ones, so people can filter the blogs"). functions.php draws them (templates/home.html and category.html): "All", then each topic. In the site's button style: outlined in magenta, the page you're on filled; hover fills and lifts like the Read More buttons. They wrap on desktop; on phones they stay in one row that scrolls sideways, so the posts don't move down. A topic page (category.html) is the listing with the topic's name and intro on top. */ .or-blog .or-blog-topics { max-width: 1192px; margin: 40px auto 0; } .or-blog .or-blog-topics ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; } .or-blog .or-blog-topics li { margin: 0; } .or-blog .or-topic { display: inline-flex; align-items: center; box-sizing: border-box; height: 40px; padding: 0 20px; border: 1.5px solid var(--wp--preset--color--magenta); border-radius: 35px; background: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--questrial); font-size: 15px; line-height: 1; color: var(--wp--preset--color--magenta); text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .or-blog .or-topic.is-current { background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--white); } .or-blog .or-topic:hover, .or-blog .or-topic:focus-visible { background: var(--wp--preset--color--magenta); color: var(--wp--preset--color--white); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(188, 13, 143, 0.28); } .or-blog .or-topic:focus-visible { outline: 2px solid var(--wp--preset--color--navy); outline-offset: 3px; } .or-blog .or-blog-topics + .or-blog-query { margin-top: 48px; } .or-blog .or-blog-intro p { margin: 0; } @media (prefers-reduced-motion: reduce) { .or-blog .or-topic { transition: none; } .or-blog .or-topic:hover, .or-blog .or-topic:focus-visible { transform: none; } } @media (max-width: 781px) { .or-blog .or-blog-topics { margin: 24px -30px 0; } .or-blog .or-blog-topics ul { flex-wrap: nowrap; gap: 8px; padding: 0 30px; overflow-x: auto; scroll-padding-inline: 30px; scrollbar-width: none; } .or-blog .or-blog-topics ul::-webkit-scrollbar { display: none; } .or-blog .or-topic { height: 36px; padding: 0 16px; font-size: 14px; } /* Inside the sideways row a lift, shadow or outside focus ring would be cut off: none, and the ring goes inside. */ .or-blog .or-topic:hover, .or-blog .or-topic:focus-visible { transform: none; box-shadow: none; } .or-blog .or-topic:focus-visible { outline-offset: -5px; outline-color: var(--wp--preset--color--white); } .or-blog .or-blog-topics + .or-blog-query { margin-top: 32px; } } /* ===== Harps's revisions, 4 Oct 2026 (designs/Harps revision/3/1.png to 6.png; client-changes.md) ===== */ /* 2. The six boxes on the industry pages (Accounting, SaaS, Healthcare, EdTech, Fintech, Logistics): the text sat 92-99px from the left edge but 40-67px from the right. They now match the AI Agents cards, the ones Harps called right (Anwar, 4 Oct: "check AI agent page again and match it on all pages"): the same padding (76px above and below, 80px at the sides at 1415, scaling down on narrower screens exactly as the AI cards do), 26px corners, 24px between boxes, the title in Figtree 19px semibold with 14px under it, and the text spanning the box (the design's fixed text widths, 297-325px, lifted). Each box is as tall as its text, the boxes in a row level, so pages with more text have taller boxes than the AI page. On larger screens the rows stop at the AI rows' width, 1375px, so the boxes keep their shape. (Squares were tried first the same day: growing with the screen they left empty space under the text, fitted to the text they didn't look like the AI cards.) Accounting below 1352px keeps its own narrower row. */ @media (min-width: 782px) { html body :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards) > .wp-block-column { border-radius: 26px; padding: clamp(52px, 5.625vw, 76px) clamp(26px, 5.9vw, 80px) !important; } html body :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards) > .wp-block-column :is(h2, h3, h4) { max-width: none !important; margin: 0 0 14px !important; font-size: 19px !important; font-weight: 600 !important; line-height: 24.7px !important; } html body :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards) > .wp-block-column p { max-width: none !important; margin-top: 0 !important; } } @media (min-width: 960px) { html body :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards).wp-block-columns { gap: 24px !important; } } @media (min-width: 1352px) { html body .or-at-spec > .or-at-spec-cards.wp-block-columns { gap: 24px !important; } html body .or-at-spec > .or-at-spec-cards:nth-child(n) > .or-at-spec-card.wp-block-column:nth-child(n) { border-radius: 26px; padding: clamp(52px, 5.625vw, 76px) clamp(26px, 5.9vw, 80px) !important; } html body .or-at-spec > .or-at-spec-cards:nth-child(n) > .or-at-spec-card.wp-block-column:nth-child(n) :is(h2, h3, h4) { max-width: none !important; margin: 0 0 14px !important; font-size: 19px !important; font-weight: 600 !important; line-height: 24.7px !important; } html body .or-at-spec > .or-at-spec-cards:nth-child(n) > .or-at-spec-card.wp-block-column:nth-child(n) p { max-width: none !important; margin-top: 0 !important; } } /* The same space above and below the text, in these boxes and the AI Agents cards alike (Anwar, 4 Oct: the top looked bigger than the bottom): the AI cards had 88px above and 64px below at 1415; now 76px each, the same total, so no box changes height and the box with the most text in a row has its text in the middle. It scales down on narrower screens as before (each side is the average of the old top and bottom). */ @media (min-width: 782px) { html body .or-agent-card { padding-top: clamp(52px, 5.625vw, 76px); padding-bottom: clamp(52px, 5.625vw, 76px); } } /* Larger screens (Harps: "all the boxes get wider and out of proportion"): the six industry boxes and the AI Agents cards stop growing at their size on her 1415px laptop (the AI rows' 1375px), so they keep that shape; the extra width becomes margin. Before, they stretched to 568-611px wide at 1920 and 824px at 2560. */ @media (min-width: 1416px) { html body :is(.or-sa-need-cards, .or-hc-need-cards, .or-et-need-cards, .or-ft-need-cards, .or-lg-need-cards, .or-at-spec-cards).wp-block-columns { max-width: 1375px !important; margin-left: auto !important; margin-right: auto !important; } html body .or-agents .or-agent-row.wp-block-columns { max-width: 1375px !important; margin-left: auto !important; margin-right: auto !important; } } /* 1. VP Marketing, "Why Choose": square boxes (were 316x390). The longest text, in the pink box, fits a 360px square with 40px all round, so from 1200px wide the three are 360px squares, titles level at the top, and they stay that size on larger screens. Narrower desktops keep the flexible boxes. */ @media (min-width: 1200px) { html body .or-vp-why > .or-vp-cards.wp-block-columns { display: grid !important; grid-template-columns: repeat(3, 360px); justify-content: center; max-width: none !important; } html body .or-vp-why .or-vp-card { box-sizing: border-box; height: 100%; min-height: 360px; padding: 40px !important; } } /* 3. Firm of the Future, "Our Fractional Marketing Approach": square boxes with the same gap all round (were 439x242, text 92px from the left and 40 from the right). The longest text fits a 300px square with 56px all round; the titles stay level at the top. From 1000px wide; narrower desktops keep the old boxes. */ @media (min-width: 1000px) { html body .or-ff-need-cards.wp-block-columns { display: grid !important; grid-template-columns: repeat(3, 300px); justify-content: center; gap: 28px !important; max-width: none !important; } html body .or-ff-need-cards.wp-block-columns > .or-ff-need-card.wp-block-column { box-sizing: border-box; height: auto !important; min-height: 300px !important; justify-content: flex-start !important; padding: 56px !important; } } /* 4. Homepage testimonials: the quote one size smaller (20px, was 22) and wider (up to 820px, was 640; still clear of the arrows near 782px), so the band needs less height, and less space above (40px, was 65). */ @media (min-width: 782px) { html body .or-hm-slides { padding-top: 40px; } html body .or-hm-slide { max-width: 900px; } html body .or-hm-slide > .or-hm-slide-quote { max-width: min(820px, calc(100vw - 2 * (4.792vw + 60px))); font-size: 20px; line-height: 28px; } } /* 5. Outsourced: "Eliminate the Restrictions…" and "In-house vs Outsourced Marketing" ran on 68px and 64px lines; the site's other 40px titles use 48px. */ @media (min-width: 782px) { html body .or-om-band-h, html body .or-om-split-h { line-height: 48px; } } /* 6. Blog cards (the listing and the topic pages): the titles' lines closer, 38px for the 30px text (was 45px). */ @media (min-width: 782px) { html body .or-blog .or-blog-card-title { line-height: 38px; } } /* ===== Harps's revisions, 6 Oct 2026 (designs/Harps revision/4/; client-changes.md) ===== */ /* 1. Firm of the Future, "How Fractional Marketing Helps CPA Firms Become a Firm of the Future": pink with white text (was sky blue with navy text). */ html body .or-ff-help-panel { background: var(--wp--preset--color--magenta); } html body .or-ff-help-panel :is(.or-ff-help-h, .or-ff-help-col) { color: var(--wp--preset--color--white); } /* 2. The heroes on Fractional Marketing Service, Part-time CMO, AI Agents and Consulting grew with the screen (634-697px tall at 1920: core's ".wp-block-image.alignfull img { height: auto }" overrode the 446px above), so on a wide screen they looked longer than the industry pages'. Now as on the industry pages: 433px tall, the white card over its bottom 194px. Fractional CMO, VP Marketing, Outsourced and About keep their own fixed heroes. */ @media (min-width: 782px) { html body .or-hero img { height: 433px !important; } html body :is(.or-hero-card, .or-hero-narrow) { margin-top: -194px !important; } } /* 3. Outsourced "Let's compare…" and Fractional CMO "Who Should Hire…": the copy keeps its place on the left and the photo stays against the right edge, so on a wide screen the gap between them grew (621-634px at 1920, 116-129 at 1415). Wider than 1415px they keep their laptop layout, centred; the photo, no longer at the edge, has all four corners rounded. */ @media (min-width: 1416px) { html body :is(.or-om-compare-cols, .or-fc-who-cols).wp-block-columns { max-width: 1415px; margin-left: auto !important; margin-right: auto !important; } html body :is(.or-om-compare-img, .or-fc-who-img) img { border-radius: 35px !important; } } /* 5. The grey panel beside the image in "Complete … Marketing Team" (Accounting, Firm of the Future, EdTech, Fintech, Logistics, SaaS): it had square corners and on some pages ran below the image (Fintech 35px, EdTech 18px, SaaS 49px; on SaaS the grey is behind the image too). Now the image always fills its column top to bottom and the grey panel stretches to the same height, so the two always match whatever the text's length; the column keeps at least the image's design height. The grey has the image's 35px corners. */ @media (min-width: 1352px) { html body :is(.or-at-team-media, .or-ff-team-media, .or-et-team-media, .or-ft-team-media, .or-lg-team-media, .or-sa-team-media).wp-block-column { position: relative; align-self: stretch !important; } html body :is(.or-at-team-media, .or-ff-team-media, .or-et-team-media, .or-ft-team-media, .or-lg-team-media, .or-sa-team-media) > .wp-block-image { position: absolute; inset: 0; margin: 0 !important; } html body :is(.or-at-team-media, .or-ff-team-media, .or-et-team-media, .or-ft-team-media, .or-lg-team-media, .or-sa-team-media) > .wp-block-image img { width: 100%; height: 100% !important; min-height: 0 !important; object-fit: cover; } html body .or-at-team-media.wp-block-column { min-height: 886px; } html body .or-ff-team-media.wp-block-column { min-height: 560px; } html body :is(.or-et-team-media, .or-ft-team-media).wp-block-column { min-height: 814px; } html body .or-lg-team-media.wp-block-column { min-height: 739px; } html body .or-sa-team-media.wp-block-column { min-height: 891px; } html body :is(.or-at-team-copy, .or-ff-team-copy, .or-et-team-copy, .or-ft-team-copy, .or-lg-team-copy).wp-block-column { align-self: stretch !important; border-radius: 35px; } html body .or-sa-team-cols.wp-block-columns { border-radius: 35px; } } /* 7. The menu stays at the top while the page scrolls (Harps: "make the menu sticky at the top"), below the WordPress toolbar for anyone logged in (on phones narrower than 600px that toolbar scrolls away, so the menu goes to the very top). Links to a section on the page (#book-an-appointment …) stop below the menu instead of under it. */ html body .wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; } @media (max-width: 600px) { html body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } } /* Once the page has scrolled (onerawr.js adds .is-docked), its top corners go square against the top of the window, so the page never shows through them; at the top of the page it keeps the design's rounded shape. */ html body .wp-site-blocks > header.is-docked .or-header { border-top-left-radius: 0; border-top-right-radius: 0; } @media (prefers-reduced-motion: no-preference) { html body .wp-site-blocks > header .or-header { transition: border-radius 0.2s ease; } } html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 104px); } @media (max-width: 781px) { html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 86px); } } /* ================================================================== Growable boxes (Elise, 10 Nov 2026) * "If we add copy to these blocks that is longer than the block, it needs to grow." The frames' fixed heights are now * minimum heights (changed in place above, so every box keeps its size with the current copy). Here the side photos * fill their column as the copy grows (the technique the narrower widths already used), and boxes whose copy ran to * the bottom edge get bottom padding, only at the widths where they were fixed; it shows only once a box grows. * Checked: every page at 11 widths lays out exactly as before (layout-snapshot.js), and growable-stress.js. */ @media (min-width: 782px) { .or-at-tiles > .or-at-tile-photo, .or-sa-tiles > .or-sa-tile-photo, .or-hc-tiles > .or-hc-tile-photo, .or-et-tiles > .or-et-tile-photo, .or-ft-tiles > .or-ft-tile-photo { position: relative; } .or-at-tiles > .or-at-tile-photo > .wp-block-image, .or-sa-tiles > .or-sa-tile-photo > .wp-block-image, .or-hc-tiles > .or-hc-tile-photo > .wp-block-image, .or-et-tiles > .or-et-tile-photo > .wp-block-image, .or-ft-tiles > .or-ft-tile-photo > .wp-block-image { position: absolute; inset: 0; margin: 0 !important; } .or-at-tiles > .or-at-tile-photo img, .or-sa-tiles > .or-sa-tile-photo img, .or-hc-tiles > .or-hc-tile-photo img, .or-et-tiles > .or-et-tile-photo img, .or-ft-tiles > .or-ft-tile-photo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; } .or-sa-tiles > .or-sa-tile-magenta, .or-sa-tiles > .or-sa-tile-sky, .or-hc-tiles > .or-hc-tile-magenta, .or-hc-tiles > .or-hc-tile-sky, .or-et-tiles > .or-et-tile-magenta, .or-et-tiles > .or-et-tile-sky, .or-ft-tiles > .or-ft-tile-magenta, .or-ft-tiles > .or-ft-tile-sky { padding-bottom: 40px; } .or-at-steps .or-at-step, .or-sa-steps .or-sa-step, .or-hc-steps .or-hc-step, .or-et-steps .or-et-step, .or-ft-steps .or-ft-step { padding-bottom: 20px; } .or-sa-need-cards > .or-sa-need-card, .or-hc-need-cards > .or-hc-need-card, .or-et-need-cards > .or-et-need-card, .or-ft-need-cards > .or-ft-need-card, .or-ff-need-cards > .or-ff-need-card, .or-lg-need-cards > .or-lg-need-card { padding-top: 40px; padding-bottom: 40px; } /* The second-row industry cards are drawn 0.5px shorter; keep them so when a row mixes the two. */ .or-hm-ind-grid > .or-hm-ind:nth-child(n+5) { align-self: start; } } /* 782-1351: these grew already but had no bottom padding, so longer copy sat on the edge (Anwar, 10 Nov 2026, laptop screenshot). */ @media (min-width: 782px) and (max-width: 1351px) { .or-at-tiles > .or-at-tile-magenta, .or-at-tiles > .or-at-tile-sky { padding-bottom: 40px; } .or-at-video .or-at-video-card { padding-bottom: 40px; } } @media (min-width: 1352px) { .or-at-tiles > .or-at-tile-magenta, .or-at-tiles > .or-at-tile-sky { padding-bottom: 40px; } .or-at-cost .or-at-cost-panel { padding-bottom: 48px; } .or-at-spec .or-at-spec-cards > .or-at-spec-card { padding-top: 40px !important; padding-bottom: 40px !important; } } @media (min-width: 1920px) { .or-sa-ready-media, .or-hc-ready-media, .or-et-ready-media, .or-ft-ready-media, .or-ff-ready-media { position: relative; } .or-sa-ready-media > .or-sa-ready-img, .or-hc-ready-media > .or-hc-ready-img, .or-et-ready-media > .or-et-ready-img, .or-ft-ready-media > .or-ft-ready-img, .or-ff-ready-media > .or-ff-ready-img { position: absolute; inset: 0; margin: 0 !important; } .or-sa-ready-img img, .or-hc-ready-img img, .or-et-ready-img img, .or-ft-ready-img img, .or-ff-ready-img img { width: 100%; height: 100%; object-fit: cover; } .or-hc-ready-cols > .or-hc-ready-copy, .or-et-ready-cols > .or-et-ready-copy, .or-ft-ready-cols > .or-ft-ready-copy { padding-bottom: 40px; } .or-sa-ready-cols > .or-sa-ready-copy { padding-bottom: 38px; } .or-sa-cost .or-sa-cost-panel, .or-hc-cost .or-hc-cost-panel, .or-et-cost .or-et-cost-panel, .or-ft-cost .or-ft-cost-panel, .or-lg-cost .or-lg-cost-panel { padding-bottom: 48px; } }