/* ============================================================ Converzo — light design system (2026 revamp) Namespace: .cv-* · loaded sitewide, replaces the dark skin Cascade note: every base element rule is wrapped in :where() so it carries zero specificity from the scope. Component classes therefore always win, while the rules still beat the legacy style.css (which is loaded earlier) on source order. ============================================================ */ :root { --cv-bg: #FFFFFF; --cv-bg-tint: #F4F1EA; /* warm off-white — card-heavy sections */ --cv-bg-soft: #FAFAFA; --cv-dark: #0E1115; /* portfolio / accent blocks */ --cv-ink: #000000; --cv-ink-soft: rgba(0, 0, 0, 0.62); --cv-ink-mute: rgba(0, 0, 0, 0.45); --cv-line: rgba(0, 0, 0, 0.12); --cv-line-soft: rgba(0, 0, 0, 0.08); --cv-brand: #029CA6; --cv-brand-deep: #14757B; --cv-radius-sm: 12px; --cv-radius: 18px; --cv-radius-lg: 22px; --cv-pill: 999px; --cv-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Marquee ribbon tilt, and the vertical rise that tilt covers across the viewport: tan(1.4deg) ≈ 0.0245. The section above the ribbon is clipped to the same figure so its edge and the ribbon share one angle. */ --cv-tilt: -1.4deg; --cv-seam: 2.45vw; --cv-header-h: 92px; --cv-gutter: 1.5rem; --cv-max: 1440px; } @media (min-width: 768px) { :root { --cv-gutter: 2.5rem; } } @media (min-width: 1024px) { :root { --cv-gutter: 3.5rem; } } /* ===== Base ============================================================ */ /* The homepage marquee ribbon is deliberately 101vw wide and tilted, so it spills a few pixels past the viewport on both sides. `overflow-x: hidden` on alone is not reliably propagated to the viewport by iOS Safari — the page stayed swipeable sideways there. `clip` on both and does close it off, and unlike `hidden` it creates no scroll container, so the sticky sidebar keeps working. */ html { overflow-x: hidden; overflow-x: clip; } body.cv-skin { background: #FFFFFF !important; overflow-x: hidden; overflow-x: clip; counter-reset: cv-section; } /* ===== Scrollbar ======================================================= */ /* Firefox and modern Chrome/Edge take the standard properties; the WebKit pseudo-elements below cover Safari and older Chromium. Both are declared because neither covers the whole field on its own. */ /* Firefox only. Chrome drops the ::-webkit-scrollbar pseudo-elements for any element that also sets scrollbar-width/-color, so declaring both on html would cost the pill shape everywhere except Safari. */ @supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: var(--cv-brand) rgba(0, 0, 0, .06); } } /* Bare pseudo-elements: specificity 0, so they reach the page's own scrollbar as well as every overflow pane, and any component that hides its bar (the services slider) still wins on its class. */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); } ::-webkit-scrollbar-thumb { background: var(--cv-brand); border-radius: var(--cv-pill); /* Transparent border + background-clip keeps a hairline of track on both sides, so the thumb reads as a pill rather than a full-width bar. */ border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--cv-brand-deep); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Dark sections that scroll internally get a track that suits them. */ .cv-section--dark ::-webkit-scrollbar-track, .cv-footer ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .1); } :where(body.cv-skin) { color: #000000; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Kill the legacy fixed dark backdrop + float wrappers */ body.cv-skin #body-bg { display: none !important; } :where(body.cv-skin) #wrapper, :where(body.cv-skin) #layout, :where(body.cv-skin) #content { float: none; width: auto; overflow: visible; } :where(body.cv-skin) img, :where(body.cv-skin) svg { max-width: 100%; } :where(body.cv-skin) a { color: #000000; text-decoration: none; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; display: inline; transition: color .25s var(--cv-ease), opacity .25s var(--cv-ease); } :where(body.cv-skin) h1, :where(body.cv-skin) h2, :where(body.cv-skin) h3, :where(body.cv-skin) h4, :where(body.cv-skin) h5, :where(body.cv-skin) h6 { font-family: 'Open Sans', sans-serif; font-weight: 800; color: #000000; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 .6em; } :where(body.cv-skin) p { color: rgba(0, 0, 0, 0.62); font-size: 17px; font-weight: 300; line-height: 1.65; margin: 0 0 1em; } :where(body.cv-skin) ul, :where(body.cv-skin) ol { list-style: none; padding: 0; margin: 0; } :where(body.cv-skin) figure { margin: 0; } :where(body.cv-skin) :focus-visible { outline: 2px solid var(--cv-ink); outline-offset: 3px; border-radius: 4px; } .cv-container { max-width: var(--cv-max); margin: 0 auto; padding: 0 var(--cv-gutter); } .cv-container--full { max-width: none; } .cv-narrow { max-width: 900px; } .cv-measure { max-width: 68ch; } /* ===== Eyebrow (auto-numbered) ========================================= */ .cv-eyebrow { counter-increment: cv-section; display: inline-flex; align-items: baseline; gap: 10px; margin: 0 0 1.25rem; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; line-height: 1.4; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); } .cv-eyebrow::before { content: counter(cv-section, decimal-leading-zero); color: var(--cv-ink); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; } .cv-eyebrow--plain { counter-increment: none; } .cv-eyebrow--plain::before { content: none; } /* ===== Heading scale =================================================== */ .cv-skin .cv-h1 { font-size: clamp(44px, 8vw, 124px); font-weight: 800; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; margin: 0; } .cv-skin .cv-h2 { font-size: clamp(2rem, 4.4vw, 4rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 1.1rem; } .cv-skin .cv-h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.015em; text-transform: uppercase; margin: 0 0 .9rem; } .cv-skin .cv-lead { font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--cv-ink-soft); margin: 0; } /* ===== Buttons ========================================================= */ .cv-skin .cv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 22px; border-radius: var(--cv-pill); border: 1px solid transparent; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .25s var(--cv-ease), border-color .25s var(--cv-ease), color .25s var(--cv-ease), transform .2s var(--cv-ease); } .cv-skin .cv-btn:active { transform: translateY(1px); } .cv-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .cv-btn:not(:has(svg)) { padding-right: 22px; } .cv-skin .cv-btn--primary { background: var(--cv-brand); color: #FFF; border-color: var(--cv-brand); } .cv-skin .cv-btn--primary:hover { background: var(--cv-brand-deep); border-color: var(--cv-brand-deep); color: #FFF; } .cv-skin .cv-btn--ghost { background: transparent; color: #000; border-color: #000; } .cv-skin .cv-btn--ghost:hover { background: rgba(0, 0, 0, .06); color: #000; } .cv-skin .cv-btn--light { background: #FFF; color: #000; border-color: #FFF; } .cv-skin .cv-btn--light:hover { background: #EDEDED; color: #000; } .cv-skin .cv-btn--onDark { background: transparent; color: #FFF; border-color: rgba(255, 255, 255, .45); } .cv-skin .cv-btn--onDark:hover { background: rgba(255, 255, 255, .12); color: #FFF; border-color: #FFF; } .cv-btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .cv-skin .cv-back { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cv-ink-soft); transition: gap .25s var(--cv-ease), color .25s var(--cv-ease); } .cv-skin .cv-back:hover { color: var(--cv-ink); gap: 12px; } .cv-back svg { width: 14px; height: 14px; } /* ===== Header (floating pill → full-width bar on scroll) ================ */ .cv-header { position: fixed; top: 24px; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 0 1rem; background: transparent; box-shadow: none; float: none; width: auto; pointer-events: none; transition: top .7s var(--cv-ease), padding .7s var(--cv-ease); } .cv-header.is-scrolled { top: 0; padding: 0; } .cv-header__inner { pointer-events: auto; position: relative; width: 100%; max-width: 1180px; transition: max-width .7s var(--cv-ease); will-change: max-width; } .cv-header.is-scrolled .cv-header__inner { max-width: 100vw; } .cv-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 8px 8px 22px; border-radius: 28px; background: rgba(255, 255, 255, .90); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 6px 24px rgba(0, 0, 0, .10); transition: border-radius .7s var(--cv-ease), background-color .7s var(--cv-ease), padding .7s var(--cv-ease), box-shadow .7s var(--cv-ease), border-color .7s var(--cv-ease); } .cv-header.is-scrolled .cv-nav { border-radius: 0; padding: 12px var(--cv-gutter); background: rgba(255, 255, 255, .96); border-color: transparent; border-bottom-color: rgba(0, 0, 0, .10); box-shadow: none; } .cv-nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; } .cv-nav__brand img { height: 18px; width: auto; display: block; } .cv-nav__desktop { display: flex; min-width: 0; } .cv-skin .cv-nav__links { counter-reset: cv-nav; display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; } .cv-nav__links li { margin: 0; padding: 0; position: relative; list-style: none; } .cv-skin .cv-nav__links > li > a { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.2; color: #000; white-space: nowrap; text-transform: none; letter-spacing: 0; transition: opacity .2s var(--cv-ease); } .cv-nav__links > li > a::before { content: counter(cv-nav, decimal-leading-zero); counter-increment: cv-nav; font-size: 10px; font-weight: 600; color: rgba(0, 0, 0, .4); font-variant-numeric: tabular-nums; letter-spacing: .06em; } /* Long menus drop the numbering so the pill keeps breathing room. */ .cv-nav__links--plain > li > a::before { content: none; counter-increment: none; } .cv-nav__links > li > a:hover { opacity: .55; } .cv-skin .cv-nav__links > li.current-menu-item > a, .cv-skin .cv-nav__links > li.current_page_item > a, .cv-skin .cv-nav__links > li.current-menu-ancestor > a, .cv-skin .cv-nav__links > li.current-page-ancestor > a { text-decoration: none; opacity: .5; } /* Dropdowns */ .cv-nav__links li .sub-menu { display: none; position: absolute; top: 100%; left: -14px; margin-top: 14px; min-width: 250px; padding: 8px; background: #FFF; border: 1px solid var(--cv-line); border-radius: var(--cv-radius); box-shadow: 0 14px 36px rgba(0, 0, 0, .14); list-style: none; z-index: 10; } .cv-nav__links li:hover > .sub-menu, .cv-nav__links li:focus-within > .sub-menu { display: block; } .cv-skin .cv-nav__links .sub-menu a { display: block; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; line-height: 1.4; color: #000; white-space: normal; } .cv-nav__links .sub-menu a:hover { background: rgba(0, 0, 0, .05); } .cv-nav__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .cv-skin .cv-nav__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--cv-brand); color: #FFF; padding: 9px 14px 9px 18px; border-radius: var(--cv-pill); font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; transition: background-color .2s var(--cv-ease); } .cv-skin .cv-nav__cta:hover { background: var(--cv-brand-deep); color: #FFF; } .cv-nav__cta svg { width: 13px; height: 13px; flex-shrink: 0; } .cv-burger { display: none; width: 36px; height: 36px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; border: 0; background: transparent; cursor: pointer; flex-shrink: 0; } .cv-burger span { display: block; width: 20px; height: 1.8px; background: #000; border-radius: 2px; transition: transform .25s var(--cv-ease), opacity .25s var(--cv-ease); } .cv-burger.is-open span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); } .cv-burger.is-open span:nth-child(2) { opacity: 0; } .cv-burger.is-open span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); } .cv-nav__mobile { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 4px; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 10px 30px rgba(0, 0, 0, .16); max-height: calc(100vh - 120px); overflow-y: auto; } .cv-nav__mobile[data-open="true"] { display: flex; } .cv-skin .cv-nav__mobile ul { list-style: none; margin: 0; padding: 0; } .cv-skin .cv-nav__mobile a { display: block; padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; line-height: 1.3; color: #000; } .cv-nav__mobile a:hover { background: rgba(0, 0, 0, .05); } .cv-skin .cv-nav__mobile .sub-menu a { padding-left: 30px; font-weight: 400; color: var(--cv-ink-soft); font-size: 14px; } @media (max-width: 1119px) { .cv-nav__desktop { display: none; } /* The base rule is `.cv-skin .cv-nav__cta`, so hiding the button needs a selector of matching weight — a bare class loses on specificity no matter what the media query says, and the button stayed in the bar, pushing the burger against the edge. */ .cv-skin .cv-nav__cta--desktop { display: none; } .cv-burger { display: flex; } /* The burger keeps 8px of slack inside its 36px tap target. That slack comes off the right padding, so the bars sit the same optical distance from the edge as the logo does on the left. */ .cv-nav { padding: 8px 10px 8px 18px; } .cv-header.is-scrolled .cv-nav { padding-right: calc(var(--cv-gutter) - 8px); } .cv-header__inner { max-width: 720px; } } /* Legacy header leftovers */ :where(body.cv-skin) header#header .wrapper { max-width: none; padding: 0; overflow: visible; } body.cv-skin .mobile_bar, body.cv-skin .menuBar .mobilemenu { display: none !important; } /* ===== Page spacer (fixed header) ====================================== The first section absorbs the header height itself, so its background runs all the way up behind the floating nav pill — no white strip. */ .cv-page > *:first-child { padding-top: calc(var(--cv-header-h) + 1.75rem); } body.home .cv-page > *:first-child { padding-top: 0; } @media (max-width: 767px) { .cv-page > *:first-child { padding-top: calc(var(--cv-header-h) + .5rem); } } /* Wider canvas on the homepage — the design breathes edge to edge. */ body.home { --cv-max: 1760px; } /* ===== HERO (homepage) ================================================= */ .cv-hero { position: relative; width: 100%; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #FFF; isolation: isolate; } .cv-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; user-select: none; } .cv-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top right, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .58) 22%, rgba(255, 255, 255, .20) 42%, rgba(255, 255, 255, 0) 60%); } .cv-hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; pointer-events: none; background: linear-gradient(to top, #FFF, rgba(255, 255, 255, 0)); } /* Two layouts, one strip. Narrow: centred across the very top of the page, with the header pill dropped a notch so the two never collide. Wide: up beside the pill, on the same line as the menu. The switch happens at the width where the strip clears the centred 1180px pill plus the gutter. */ .cv-hero__stats { position: absolute; top: 14px; left: var(--cv-gutter); right: var(--cv-gutter); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; color: rgba(0, 0, 0, .75); pointer-events: none; } /* Only the homepage carries the strip, so only there does the pill move. */ body.home .cv-header { top: 52px; } body.home .cv-header.is-scrolled { top: 0; } @media (min-width: 1860px) { .cv-hero__stats { top: 34px; left: auto; justify-content: flex-end; gap: 24px; } body.home .cv-header { top: 24px; } } @media (max-width: 420px) { .cv-hero__stats { gap: 4px 14px; } .cv-hero__stat { font-size: 10px; letter-spacing: .1em; } } .cv-hero__stat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .cv-hero__stat b { color: #000; font-weight: 800; font-variant-numeric: tabular-nums; } /* Full-bleed left alignment — matches the reference design, where the headline hugs the viewport edge rather than a centred container. */ .cv-hero__inner { position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; padding: 11rem var(--cv-gutter) 7rem; } .cv-hero__copy { max-width: 1000px; } .cv-skin .cv-hero__title { color: #000; margin: 0; } .cv-skin .cv-hero__text { margin: 2.5rem 0 0; max-width: 480px; font-size: 17px; font-weight: 300; line-height: 1.55; color: #000; } .cv-hero__actions { margin-top: 2rem; } @media (max-width: 767px) { .cv-hero__inner { padding: 7.5rem 1.5rem 5.5rem; } .cv-skin .cv-hero__text { margin-top: 1.5rem; font-size: 16px; } } /* Baseline ticker strip */ .cv-ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; border-top: 1px solid rgba(0, 0, 0, .10); background: #FFF; } .cv-ticker__inner { max-width: var(--cv-max); margin: 0 auto; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0 var(--cv-gutter); } .cv-ticker__wrap { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(0, 0, 0, .75); } .cv-ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; flex-shrink: 0; animation: cv-dot-pulse 2.4s ease-in-out infinite; } @keyframes cv-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); } 50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); } } .cv-ticker__roll { position: relative; display: inline-block; height: 1.6em; font-size: 11px; overflow: hidden; vertical-align: middle; } @media (max-width: 767px) { .cv-ticker__roll, .cv-ticker__wrap { font-size: 10px; } } .cv-ticker__track { display: flex; flex-direction: column; will-change: transform; animation: cv-ticker-roll 20s linear infinite; } .cv-ticker__track > span { display: flex; align-items: center; height: 1.6em; white-space: nowrap; } @keyframes cv-ticker-roll { 0%, 22% { transform: translateY(0); } 25%, 47% { transform: translateY(-1.6em); } 50%, 72% { transform: translateY(-3.2em); } 75%, 97% { transform: translateY(-4.8em); } 100% { transform: translateY(-6.4em); } } @media (prefers-reduced-motion: reduce) { .cv-ticker__track { animation: none; } } /* ===== Section shell =================================================== */ .cv-section { padding: 6rem 0; background: #FFF; } .cv-section--tint { background: var(--cv-bg-tint); border-top: 1px solid var(--cv-line-soft); border-bottom: 1px solid var(--cv-line-soft); } .cv-section--soft { background: var(--cv-bg-soft); } .cv-section--sm { padding: 4rem 0; } .cv-section + .cv-section:not(.cv-section--tint):not(.cv-section--dark):not(.cv-section--soft) { border-top: 1px solid var(--cv-line-soft); } @media (max-width: 767px) { .cv-section { padding: 3.5rem 0; } .cv-section--sm { padding: 2.5rem 0; } } .cv-sectionhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.75rem; } .cv-sectionhead > div:first-child { max-width: 760px; min-width: 0; } @media (max-width: 767px) { .cv-sectionhead { flex-direction: column; align-items: flex-start; gap: 1.25rem; } } /* ===== Dark section ==================================================== */ .cv-section--dark { /* The colour in the last layer is what a gradient-only `background` would leave transparent — the cursor script reads background-color to decide whether the ground is dark, so it has to be a real colour here. */ background: radial-gradient(80% 50% at 50% 0%, rgba(255, 255, 255, .06), transparent 65%), linear-gradient(180deg, #0E1115 0%, #1A1D22 55%, #0B0D10 100%) #0E1115; color: #FFF; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); } .cv-skin .cv-section--dark .cv-h2, .cv-skin .cv-section--dark .cv-h3, .cv-section--dark h2, .cv-section--dark h3 { color: #FFF; } .cv-skin .cv-section--dark p, .cv-skin .cv-section--dark .cv-lead { color: rgba(255, 255, 255, .65); } .cv-section--dark .cv-eyebrow { color: rgba(255, 255, 255, .55); } .cv-section--dark .cv-eyebrow::before { color: #FFF; } .cv-skin .cv-section--dark a { color: #FFF; } .cv-section--dark .cv-slider__arrow { background: transparent; border-color: rgba(255, 255, 255, .4); color: #FFF; } .cv-section--dark .cv-slider__arrow:hover { background: #FFF; color: #000; border-color: #FFF; } /* White cards sitting on a dark section — that contrast is the whole point, so the card interiors stay light and only their chrome adapts. */ .cv-section--dark .cv-card, .cv-section--dark .cv-scard { border-color: rgba(255, 255, 255, .08); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); } .cv-section--dark .cv-card:hover, .cv-section--dark .cv-scard:hover { border-color: rgba(255, 255, 255, .35); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); } .cv-skin .cv-section--dark .cv-card__title, .cv-skin .cv-section--dark .cv-card__link, .cv-skin .cv-section--dark .cv-scard h3 { color: #000; } .cv-skin .cv-section--dark .cv-card__text, .cv-skin .cv-section--dark .cv-scard__desc { color: rgba(0, 0, 0, .62); } .cv-skin .cv-section--dark .cv-card__meta, .cv-skin .cv-section--dark .cv-card__meta a { color: var(--cv-ink-mute); } .cv-skin .cv-section--dark .cv-card__meta a:hover { color: #000; } .cv-section--dark .cv-card__media { border-bottom-color: var(--cv-line-soft); } .cv-section--dark .cv-pcard { border-color: rgba(255, 255, 255, .06); } /* Filters + pagination invert on dark */ .cv-skin .cv-section--dark .cv-filter { background: transparent; border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .7); } .cv-skin .cv-section--dark .cv-filter:hover { border-color: #FFF; color: #FFF; } .cv-skin .cv-section--dark .cv-filter.is-active { background: #FFF; border-color: #FFF; color: #000; } .cv-skin .cv-section--dark .cv-pagination a, .cv-skin .cv-section--dark .cv-pagination span { background: transparent; border-color: rgba(255, 255, 255, .28); color: #FFF; } .cv-skin .cv-section--dark .cv-pagination .current, .cv-skin .cv-section--dark .cv-pagination a:hover { background: #FFF; border-color: #FFF; color: #000; } .cv-skin .cv-section--dark .cv-btn--ghost { color: #FFF; border-color: rgba(255, 255, 255, .45); } .cv-skin .cv-section--dark .cv-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #FFF; border-color: #FFF; } .cv-skin .cv-section--dark .cv-btn--primary { background: #FFF; color: #000; border-color: #FFF; } .cv-skin .cv-section--dark .cv-btn--primary:hover { background: #E6E6E6; color: #000; border-color: #E6E6E6; } .cv-skin .cv-section--dark .cv-back { color: rgba(255, 255, 255, .7); } .cv-skin .cv-section--dark .cv-back:hover { color: #FFF; } /* Forms on a dark section (closing CTA blocks) */ .cv-skin .cv-section--dark .cv-form input[type="text"], .cv-skin .cv-section--dark .cv-form input[type="email"], .cv-skin .cv-section--dark .cv-form input[type="tel"], .cv-skin .cv-section--dark .cv-form input[type="url"], .cv-skin .cv-section--dark .cv-form select, .cv-skin .cv-section--dark .cv-form textarea { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #FFF; } .cv-skin .cv-section--dark .cv-form input::placeholder, .cv-skin .cv-section--dark .cv-form textarea::placeholder { color: rgba(255, 255, 255, .45); } .cv-skin .cv-section--dark .cv-form input:focus, .cv-skin .cv-section--dark .cv-form select:focus, .cv-skin .cv-section--dark .cv-form textarea:focus { border-color: #FFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); } .cv-skin .cv-section--dark .cv-form input[type="submit"], .cv-skin .cv-section--dark .cv-form .wpcf7-submit { background: #FFF; border-color: #FFF; color: #000; } .cv-skin .cv-section--dark .cv-form input[type="submit"]:hover, .cv-skin .cv-section--dark .cv-form .wpcf7-submit:hover { background: #E6E6E6; color: #000; } .cv-skin .cv-section--dark .cv-form label, .cv-skin .cv-section--dark .cv-form .wpcf7-list-item-label { color: rgba(255, 255, 255, .7); } .cv-skin .cv-section--dark .cv-form .wpcf7-response-output { background: transparent; color: #FFF; } .cv-skin .cv-section--dark .cv-prose p, .cv-skin .cv-section--dark .cv-prose li { color: rgba(255, 255, 255, .7); } .cv-skin .cv-section--dark .cv-prose strong { color: #FFF; } .cv-skin .cv-section--dark .cv-prose a:not(.cv-btn) { color: #FFF; border-bottom-color: rgba(255, 255, 255, .4); } .cv-section--dark .cv-figure { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); } .cv-skin .cv-section--dark .cv-list li { color: rgba(255, 255, 255, .7); } .cv-skin .cv-section--dark .cv-list li strong { color: #FFF; } .cv-skin .cv-section--dark .cv-quote { border-left-color: #FFF; } .cv-skin .cv-section--dark .cv-quote p { color: #FFF; } .cv-skin .cv-section--dark .cv-quote cite { color: rgba(255, 255, 255, .6); } /* ===== Portfolio stack (sticky cards) ================================== */ .cv-portfolio { padding: 6rem 0 7rem; } .cv-portfolio .cv-sectionhead { margin-bottom: 3rem; } .cv-portfolio__cards { display: flex; flex-direction: column; gap: 1.25rem; } .cv-pcard { position: sticky; top: calc(6.5rem + var(--i, 0) * 14px); display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: center; padding: 2.5rem; min-height: 460px; background: #FFF; color: #000; border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--cv-radius-lg); box-shadow: 0 10px 28px rgba(0, 0, 0, .25); overflow: hidden; transition: box-shadow .35s var(--cv-ease); } .cv-pcard:hover { box-shadow: 0 14px 36px rgba(0, 0, 0, .35); } .cv-pcard__num { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .82rem; font-weight: 800; letter-spacing: .08em; color: #000; font-variant-numeric: tabular-nums; border-bottom: 1px solid #000; padding: 0 0 2px; margin-bottom: 1.1rem; } .cv-skin .cv-pcard h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; margin: 0 0 1rem; color: #000; font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; } .cv-skin .cv-pcard p { color: rgba(0, 0, 0, .62); font-size: 16px; font-weight: 300; line-height: 1.65; margin: 0 0 1.5rem; } .cv-pcard__tags { display: flex; flex-wrap: wrap; gap: .45rem; } .cv-pcard__media { position: relative; aspect-ratio: 4 / 3; height: 100%; min-height: 240px; border-radius: 14px; background: #F4F4F4; display: grid; place-items: center; overflow: hidden; } .cv-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The card stays white inside the dark section, so this link has to outrank `.cv-skin .cv-section--dark a { color: #FFF }` — which turned it into white text on white. A solid pill also reads as the action it is. */ .cv-skin .cv-pcard__link, .cv-skin .cv-section--dark .cv-pcard__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.35rem; padding: 12px 24px; border: 1px solid var(--cv-brand); border-radius: var(--cv-pill); background: var(--cv-brand); color: #FFF; font-size: 13px; font-weight: 600; line-height: 1.2; transition: gap .3s var(--cv-ease), background-color .25s var(--cv-ease); } .cv-skin .cv-pcard__link:hover, .cv-skin .cv-section--dark .cv-pcard__link:hover { gap: 14px; background: var(--cv-brand-deep); border-color: var(--cv-brand-deep); color: #FFF; } .cv-pcard__link svg { width: 14px; height: 14px; } .cv-tag { display: inline-block; padding: 4px 10px; border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--cv-pill); background: transparent; color: rgba(0, 0, 0, .7); font-size: 11px; font-weight: 500; letter-spacing: .04em; line-height: 1.5; } .cv-ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 1rem; text-align: center; background: radial-gradient(circle at 70% 20%, rgba(2, 156, 166, .10), transparent 60%), linear-gradient(135deg, rgba(2, 156, 166, .04), rgba(15, 17, 21, .04)); border: 1px dashed rgba(2, 156, 166, .35); border-radius: inherit; } .cv-ph span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(0, 0, 0, .45); } @media (max-width: 979px) { .cv-portfolio { padding: 3.5rem 0 4rem; } .cv-pcard { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; min-height: 0; top: calc(5rem + var(--i, 0) * 10px); } .cv-pcard__media { min-height: 0; } } /* ===== Story rows ====================================================== */ .cv-story { padding: 6rem 0; } .cv-story__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .cv-story--flip .cv-story__row > :first-child { order: 1; } .cv-story--flip .cv-story__row > :last-child { order: 2; } .cv-story__text { min-width: 0; } .cv-skin .cv-story__text p { font-size: 17px; line-height: 1.7; } .cv-quote { margin: 2rem 0 0; padding: .25rem 0 .25rem 1.5rem; border-left: 2px solid #000; } .cv-skin .cv-quote p { color: #000; font-weight: 500; font-size: 1.05rem; font-style: normal; line-height: 1.55; margin: 0 0 .5rem; } .cv-quote cite { color: rgba(0, 0, 0, .6); font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .cv-skin .cv-list { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: .85rem; } .cv-skin .cv-list li { position: relative; padding-left: 1.6rem; color: rgba(0, 0, 0, .7); font-weight: 300; font-size: 16px; line-height: 1.6; margin: 0; } .cv-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--cv-brand); } .cv-list li strong { color: #000; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 12px; } /* List items that link somewhere have to look clickable — they inherited the muted body colour and read as plain text. */ .cv-skin .cv-list li a { color: var(--cv-brand); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(2, 156, 166, .4); text-underline-offset: 4px; transition: color .25s var(--cv-ease), text-decoration-color .25s var(--cv-ease); } .cv-skin .cv-list li a:hover, .cv-skin .cv-list li a:focus-visible { color: var(--cv-brand-deep); text-decoration-color: currentColor; } /* The dot marker doubles as the link's bullet, so it follows the hover. */ .cv-skin .cv-list li:has(> a:hover)::before { background: var(--cv-brand-deep); } .cv-skin .cv-section--dark .cv-list li a { color: #FFF; text-decoration-color: rgba(255, 255, 255, .45); } .cv-skin .cv-section--dark .cv-list li a:hover, .cv-skin .cv-section--dark .cv-list li a:focus-visible { color: #FFF; text-decoration-color: #FFF; } .cv-figure { margin: 0; width: 100%; border-radius: var(--cv-radius); border: 1px solid rgba(0, 0, 0, .1); overflow: hidden; background: var(--cv-bg-soft); } .cv-figure--portrait { aspect-ratio: 4 / 5; } .cv-figure--landscape { aspect-ratio: 5 / 4; } /* Matches the source photography's own 3:2, so `cover` neither crops nor upscales it. The portrait frame asked for 988px of height from an image that only delivers 527 at that width — a 1.87x blow-up, and it showed. */ .cv-figure--photo { aspect-ratio: 3 / 2; } .cv-figure img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Logo tiles. A photo wants `cover`, a logo does not: cropping it cuts the mark in half. The image is capped on both axes and left to size itself, so whichever side hits the tile first stops there and the other follows the logo's own ratio. White ground because these marks are drawn for light. */ /* The pairing with .cv-section--dark is not cosmetic: that section sets `.cv-figure { background: rgba(255,255,255,.04) }` one specificity level higher, which greyed these tiles back out. */ .cv-figure--logo, .cv-section--dark .cv-figure--logo { display: grid; place-items: center; padding: 1.75rem; background: #FFF; border-color: rgba(0, 0, 0, .08); } .cv-figure--logo img { width: auto; height: auto; /* Capped below 100%, not at it. Logos drawn edge to edge — no internal whitespace of their own — filled the padding box exactly and ended up touching the tile. The cap guarantees air on whichever axis binds. */ max-width: 82%; max-height: 72%; object-fit: contain; } @media (max-width: 560px) { .cv-figure--logo { padding: 1.25rem; } } @media (max-width: 979px) { .cv-story { padding: 3.5rem 0; } .cv-story__row { grid-template-columns: 1fr; gap: 2rem; } .cv-story--flip .cv-story__row > :first-child { order: 2; } .cv-story--flip .cv-story__row > :last-child { order: 1; } } /* ===== Services slider ================================================= */ .cv-services { padding: 6rem 0 5rem; } .cv-services .cv-sectionhead { flex-wrap: nowrap; } .cv-slider__nav { display: flex; gap: .6rem; flex-shrink: 0; align-self: flex-end; } @media (max-width: 767px) { .cv-slider__nav { display: none; } } .cv-slider__arrow { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid #000; background: #FFF; color: #000; cursor: pointer; padding: 0; transition: background-color .2s ease, color .2s ease, transform .15s ease; } .cv-slider__arrow:hover { background: var(--cv-brand); border-color: var(--cv-brand); color: #FFF; } .cv-slider__arrow:active { transform: scale(.94); } .cv-slider__arrow svg { width: 20px; height: 20px; } /* Full-bleed track, exactly as in the reference design. */ .cv-slider { display: flex; gap: 1.5rem; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: .5rem 0 1.5rem; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .cv-slider::-webkit-scrollbar { display: none; } .cv-slider.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .cv-slider > .cv-scard { flex: 0 0 320px; min-height: 420px; } @media (min-width: 880px) { .cv-slider > .cv-scard { flex: 0 0 360px; } } .cv-scard { position: relative; display: flex; flex-direction: column; padding: 2rem 1.85rem; background: #FFF; color: #000; border: 1px solid rgba(0, 0, 0, .14); border-radius: var(--cv-radius); overflow: hidden; transition: border-color .3s var(--cv-ease), transform .3s var(--cv-ease); } .cv-scard:hover { border-color: #000; transform: translateY(-2px); } .cv-scard__icon { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.35rem; background: #000; color: #FFF; overflow: hidden; flex-shrink: 0; transition: transform .4s var(--cv-ease); } .cv-scard__icon svg { width: 28px; height: 28px; stroke: #FFF; color: #FFF; } .cv-scard__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .cv-scard:hover .cv-scard__icon { transform: rotate(-6deg) scale(1.05); } .cv-skin .cv-scard h3 { margin: 0 0 .6rem; font-size: 1.3rem; font-weight: 800; color: #000; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.1; } .cv-skin .cv-scard__desc { flex: 1; margin: 0 0 1.25rem; font-size: 15px; font-weight: 300; line-height: 1.6; color: rgba(0, 0, 0, .62); } .cv-scard__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; } .cv-scard__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--cv-line-soft); font-size: 12px; color: rgba(0, 0, 0, .55); font-weight: 500; } .cv-scard__foot .cv-arrow { display: inline-flex; align-items: center; gap: 6px; color: #000; font-weight: 600; white-space: nowrap; transition: gap .3s var(--cv-ease); } .cv-scard:hover .cv-scard__foot .cv-arrow { gap: 12px; } .cv-scard__foot .cv-arrow svg { width: 14px; height: 14px; } /* Static grid variant (inner pages) */ .cv-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .cv-sgrid .cv-scard { min-height: 0; } /* ===== Marquee ========================================================= */ /* The ribbon straddles the seam between the tint section above it and the white one below, so that seam runs at the ribbon's own angle instead of flat. --cv-seam is tan(1.4deg) over the full viewport: the vertical rise the rotation covers, and therefore the depth the clip has to cut. */ .cv-marquee { position: relative; z-index: 2; background: #000; color: #FFF; padding: .9rem 0; overflow: hidden; transform: rotate(var(--cv-tilt)); /* The ribbon sits just above the section it cuts into, so it is pulled down onto the seam with a negative bottom margin: half the slope plus half its own height puts its heart exactly on the join. */ margin: 4rem 0 calc(var(--cv-seam) / -2 - 25px); width: 101vw; margin-left: calc(50% - 50.5vw); } /* The tint section's top edge is cut to the ribbon's angle, so the white section above it runs into this one diagonally. The bottom edge stays flat. */ .cv-section--tint.cv-services { padding-top: calc(6rem + var(--cv-seam)); border-top: 0; clip-path: polygon(0 var(--cv-seam), 100% 0, 100% 100%, 0 100%); } .cv-marquee__track { display: flex; white-space: nowrap; animation: cv-marquee 34s linear infinite; width: max-content; } .cv-marquee__track > span { display: inline-flex; align-items: center; color: #FFF; font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; } .cv-marquee__dot { width: 4px; height: 4px; border-radius: 50%; background: #FFF; display: inline-block; margin: 0 14px; vertical-align: middle; flex-shrink: 0; } @keyframes cv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .cv-marquee__track { animation: none; } } /* ===== FAQ ============================================================= */ .cv-faq { padding: 6rem 0; } /* A narrow centred column: question-and-answer rows read badly at full container width, where a one-line answer strands its question metres to the left. The section head is centred with it so the block reads as one. */ .cv-faq .cv-sectionhead { justify-content: center; text-align: center; } .cv-faq .cv-sectionhead > div:first-child { max-width: 640px; margin-inline: auto; } .cv-faq .cv-sectionhead .cv-eyebrow { justify-content: center; } .cv-skin .cv-faq .cv-sectionhead .cv-lead { margin-inline: auto; } .cv-faq__list { display: grid; max-width: 820px; margin-inline: auto; border-top: 1px solid var(--cv-line); } .cv-faq__item { background: transparent; border-bottom: 1px solid var(--cv-line); } .cv-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; font-size: 1.02rem; font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: .005em; line-height: 1.35; } .cv-faq__item summary::-webkit-details-marker { display: none; } .cv-faq__item summary::after { content: '+'; display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid #000; border-radius: 50%; font-size: 1.1rem; font-weight: 400; line-height: 1; color: #000; transition: transform .3s var(--cv-ease), background-color .3s var(--cv-ease), color .3s var(--cv-ease); } .cv-faq__item[open] summary::after { transform: rotate(45deg); background: #000; color: #FFF; } .cv-faq__answer { padding: 0 3rem 1.6rem 0; max-width: 80ch; } .cv-skin .cv-faq__answer p { color: rgba(0, 0, 0, .65); font-weight: 300; margin: 0 0 .8rem; } .cv-skin .cv-faq__answer p:last-child { margin-bottom: 0; } /* On the dark ground the questions live in a white card, so everything inside keeps its light-ground colours — the same trick the portfolio cards use. */ .cv-section--dark .cv-faq__list { background: #FFF; border-top: 0; border-radius: var(--cv-radius-lg); padding: .5rem 2rem; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); } .cv-section--dark .cv-faq__item:last-child { border-bottom: 0; } .cv-skin .cv-section--dark .cv-faq__item summary { color: #000; } .cv-skin .cv-section--dark .cv-faq__item summary::after { border-color: #000; color: #000; } .cv-skin .cv-section--dark .cv-faq__item[open] summary::after { background: #000; color: #FFF; } .cv-skin .cv-section--dark .cv-faq__answer p { color: rgba(0, 0, 0, .65); } .cv-skin .cv-section--dark .cv-faq__answer a:not(.cv-btn) { color: var(--cv-brand-deep); border-bottom-color: rgba(20, 117, 123, .35); } @media (max-width: 767px) { .cv-section--dark .cv-faq__list { padding: .25rem 1.25rem; } } /* ===== CTA (physics zone) ============================================== */ /* The zone runs edge to edge and closes the section, so its top margin and the section's bottom padding showed up as empty white bands above and below it. Both are dropped; the zone's own 760px of play area is the breathing room. */ .cv-cta-zone { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 0; min-height: 760px; display: grid; place-items: center; overflow: hidden; } .cv-section:has(> .cv-container > .cv-cta-zone) { padding-bottom: 0; } /* Standalone closing CTA on inner pages: the section above it brings its own bottom padding, so the zone starts flush. */ .cv-section--cta { padding-top: 0; } @media (max-width: 767px) { .cv-cta-zone { min-height: 0; margin-top: 0; padding: 1rem 0; } } .cv-cta-zone__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; cursor: grab; } .cv-cta-zone__canvas:active { cursor: grabbing; } .cv-cta { position: relative; z-index: 1; width: min(720px, calc(100% - 4rem)); margin: 0 auto; padding: 3.25rem 2.5rem; background: #FFF; border-radius: var(--cv-radius-lg); text-align: center; } .cv-cta--bordered { border: 1px solid #000; } .cv-skin .cv-cta .cv-h2 { margin: 0 0 .9rem; } .cv-skin .cv-cta p { max-width: 560px; margin: 0 auto 1.75rem; color: rgba(0, 0, 0, .65); font-weight: 300; } .cv-cta__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* `z-index: 1` turned the card into a stacking context, which capped every descendant at layer 1 — so the buttons sat under the canvas (layer 2) no matter what z-index they asked for, and the canvas swallowed the clicks. With the card back on `auto` it still paints below the canvas, so the falling devices keep overlapping its edges, while the buttons genuinely rise above. */ .cv-cta-zone .cv-cta { z-index: auto; } .cv-cta-zone .cv-cta .cv-btn { position: relative; z-index: 3; pointer-events: auto; } @media (max-width: 767px) { .cv-cta { width: 100%; padding: 2.25rem 1.5rem; } } /* ===== Inner page hero ================================================= */ .cv-pagehero { padding: 3.5rem 0 3.5rem; background: var(--cv-bg); border-bottom: 1px solid var(--cv-line-soft); } .cv-pagehero--tint { background: var(--cv-bg-tint); border-bottom-color: rgba(0, 0, 0, .06); } .cv-pagehero__inner { max-width: var(--cv-max); margin: 0 auto; padding: 0 var(--cv-gutter); } .cv-skin .cv-pagehero h1 { font-size: clamp(2.6rem, 6.2vw, 5.5rem); font-weight: 800; line-height: .94; letter-spacing: -0.025em; text-transform: uppercase; margin: 0 0 1.4rem; max-width: 16ch; } .cv-skin .cv-pagehero__lead { max-width: 620px; font-size: 18px; font-weight: 300; line-height: 1.6; color: var(--cv-ink-soft); margin: 0; } .cv-pagehero__actions { margin-top: 2rem; } .cv-pagehero__media { margin-top: 3rem; border-radius: var(--cv-radius-lg); overflow: hidden; border: 1px solid var(--cv-line); background: #FFF; } .cv-pagehero__media img { width: 100%; height: auto; display: block; } @media (max-width: 767px) { .cv-pagehero { padding: 2rem 0 2.5rem; } .cv-skin .cv-pagehero h1 { max-width: none; } } /* Breadcrumb */ /* Sentence case, not uppercase: the trail carries page titles, and a blog title set in caps with .14em tracking became a shouting three-line block while "HOME / CONTACT" still looked like a label — same rule, two very different results. */ .cv-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin: 0 0 1.5rem; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cv-ink-mute); line-height: 1.5; } .cv-skin .cv-crumbs a { color: var(--cv-ink-mute); font-size: inherit; font-weight: 400; text-decoration: none; transition: color .25s var(--cv-ease); } .cv-skin .cv-crumbs a:hover { color: #000; text-decoration: underline; text-underline-offset: 3px; } .cv-crumbs__sep { color: var(--cv-line); user-select: none; } .cv-crumbs__current { color: var(--cv-ink-soft); font-weight: 500; } /* A long post title should not push the trail over three lines. */ @media (min-width: 768px) { .cv-crumbs__current { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .cv-section--dark .cv-crumbs, .cv-skin .cv-section--dark .cv-crumbs a { color: rgba(255, 255, 255, .6); } .cv-skin .cv-section--dark .cv-crumbs a:hover { color: #FFF; } .cv-section--dark .cv-crumbs__sep { color: rgba(255, 255, 255, .28); } .cv-section--dark .cv-crumbs__current { color: rgba(255, 255, 255, .85); } /* ===== Prose (page / post content) ===================================== */ .cv-prose { max-width: 900px; } .cv-prose--wide { max-width: 1140px; } .cv-prose--full { max-width: none; } .cv-prose > *:first-child { margin-top: 0; } .cv-prose > *:last-child { margin-bottom: 0; } .cv-skin .cv-prose p, .cv-skin .cv-prose li { font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--cv-ink-soft); } .cv-skin .cv-prose p { margin: 0 0 1.25rem; } .cv-skin .cv-prose h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 3rem 0 1rem; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.02; } .cv-skin .cv-prose h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); margin: 2.25rem 0 .75rem; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.15; } .cv-skin .cv-prose h4 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; text-transform: none; letter-spacing: 0; line-height: 1.3; } .cv-skin .cv-prose ul, .cv-skin .cv-prose ol { margin: 0 0 1.5rem; padding-left: 1.4rem; } .cv-skin .cv-prose ul { list-style: disc; } .cv-skin .cv-prose ol { list-style: decimal; } .cv-skin .cv-prose li { margin-bottom: .55rem; padding-left: .25rem; } .cv-prose li::marker { color: var(--cv-brand); } .cv-skin .cv-prose a:not(.cv-btn) { color: var(--cv-brand-deep); /* Same weight and size as the copy around it. At 500 against 300 body text the extra stroke width read as a larger font. Colour and underline carry the link on their own. */ font-size: inherit; line-height: inherit; font-weight: inherit; border-bottom: 1px solid rgba(20, 117, 123, .35); } .cv-skin .cv-prose a:not(.cv-btn):hover { color: #000; border-bottom-color: #000; } /* A link wrapped around an image is not a text link: its underline landed under the picture as a stray rule the full width of the image. */ .cv-skin .cv-prose a:not(.cv-btn):has(img), .cv-skin .cv-prose a:not(.cv-btn):has(img):hover { border-bottom: 0; } .cv-prose strong, .cv-prose b { color: #000; font-weight: 700; } .cv-prose img { border-radius: var(--cv-radius); height: auto; margin: 1.75rem 0; } .cv-prose figure { margin: 1.75rem 0; } .cv-prose figcaption { font-size: 13px; color: var(--cv-ink-mute); margin-top: .5rem; } .cv-prose blockquote { margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem; border-left: 2px solid #000; } .cv-skin .cv-prose blockquote p { color: #000; font-weight: 500; } .cv-prose table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 15px; } .cv-prose th, .cv-prose td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--cv-line); } .cv-prose th { font-weight: 700; color: #000; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; } .cv-prose iframe, .cv-prose video { max-width: 100%; border-radius: var(--cv-radius); } .cv-prose hr { border: 0; border-top: 1px solid var(--cv-line); margin: 2.5rem 0; } .cv-prose > .wp-block-image, .cv-prose .alignwide { max-width: 100%; } /* WordPress alignment classes. The editor has always emitted these, but the theme never implemented them, so an `alignright` image stayed inline inside its paragraph: one line of text pinned against its baseline and the rest dropping below it, instead of the text wrapping around it. */ .cv-prose .alignright, .cv-prose .alignleft { /* Capped so the remaining text column stays readable next to a wide image. */ max-width: 50%; height: auto; } .cv-prose .alignright { float: right; margin: .35rem 0 1.25rem 1.75rem; } .cv-prose .alignleft { float: left; margin: .35rem 1.75rem 1.25rem 0; } .cv-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; } .cv-prose .alignnone { display: block; } /* Keep the floats inside the prose block instead of letting them run on into the next section. */ .cv-prose::after { content: ''; display: block; clear: both; } /* Too narrow to wrap around: give the image the full column instead. */ @media (max-width: 640px) { .cv-prose .alignright, .cv-prose .alignleft { float: none; display: block; max-width: 100%; margin: 1.75rem auto; } } /* Sitemap plugin output */ .cv-skin .cv-sitemap .simple-sitemap-wrap h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; } .cv-skin .cv-sitemap ul.simple-sitemap-page { list-style: none; padding-left: 0; } .cv-skin .cv-sitemap ul.simple-sitemap-page li { padding-left: 0; } /* Two-column content + sidebar */ .cv-split { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 4rem; align-items: start; } @media (max-width: 979px) { .cv-split { grid-template-columns: 1fr; gap: 2.5rem; } } .cv-aside { position: sticky; top: calc(var(--cv-header-h) + 1.5rem); padding: 1.85rem; background: var(--cv-bg-tint); border: 1px solid var(--cv-line); border-radius: var(--cv-radius); } .cv-skin .cv-aside h3 { font-size: 1.05rem; margin: 0 0 .75rem; } .cv-skin .cv-aside p { font-size: 15px; margin-bottom: 1.25rem; } @media (max-width: 979px) { .cv-aside { position: static; } } /* ===== Cards grid ====================================================== */ .cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.5rem; } .cv-grid--2 { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); } @media (max-width: 560px) { .cv-grid, .cv-grid--2, .cv-sgrid { grid-template-columns: 1fr; } } .cv-card { display: flex; flex-direction: column; background: #FFF; border: 1px solid var(--cv-line); border-radius: var(--cv-radius); overflow: hidden; transition: border-color .3s var(--cv-ease), transform .3s var(--cv-ease); } .cv-card:hover { border-color: #000; transform: translateY(-2px); } .cv-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cv-bg-tint); border-bottom: 1px solid var(--cv-line-soft); } .cv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--cv-ease); } .cv-card:hover .cv-card__media img { transform: scale(1.04); } .cv-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem; } .cv-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .85rem; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cv-ink-mute); line-height: 1.4; } .cv-skin .cv-card__meta a { font-size: 11px; font-weight: 600; color: var(--cv-ink-mute); } .cv-skin .cv-card__meta a:hover { color: #000; } .cv-skin .cv-card__title { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; text-transform: uppercase; margin: 0 0 .7rem; color: #000; } .cv-card__text { display: block; flex: 1; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--cv-ink-soft); margin: 0 0 1.2rem; } .cv-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #000; transition: gap .3s var(--cv-ease); } .cv-card:hover .cv-card__link { gap: 12px; } .cv-card__link svg { width: 14px; height: 14px; } .cv-section--tint .cv-card, .cv-section--soft .cv-card { border-color: rgba(0, 0, 0, .14); } /* Logo strip */ .cv-logos { overflow: hidden; } .cv-logos__track { display: flex; align-items: center; gap: 3.5rem; animation: cv-marquee 48s linear infinite; width: max-content; } .cv-logos__track img { height: 40px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .5; transition: filter .3s var(--cv-ease), opacity .3s var(--cv-ease); } .cv-logos__track img:hover { filter: none; opacity: 1; } /* On the dark client strip the logos are white artwork: greyscaling them only dims them, so let them sit closer to full strength. */ .cv-section--dark .cv-logos__track img { filter: grayscale(1) brightness(1.6); opacity: .72; } .cv-section--dark .cv-logos__track img:hover { filter: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .cv-logos__track { animation: none; } } /* Stats row */ .cv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; } .cv-stat__num { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #000; font-variant-numeric: tabular-nums; } .cv-stat__label { margin-top: .5rem; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cv-ink-mute); } /* ===== Pagination ====================================================== */ .cv-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 3.5rem; padding: 0; background: transparent; float: none; width: auto; } .cv-skin .cv-pagination .page-numbers, .cv-skin .cv-pagination a, .cv-skin .cv-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 .9rem; margin: 0; border: 1px solid var(--cv-line); border-radius: var(--cv-pill); background: #FFF; color: #000; font-size: 14px; font-weight: 500; line-height: 1; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .cv-skin .cv-pagination .current, .cv-skin .cv-pagination a:hover { background: var(--cv-brand); border-color: var(--cv-brand); color: #FFF; } .cv-skin .cv-pagination ul { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; } .cv-skin .cv-pagination .wp-pagenavi { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; border: 0; } /* ===== Filter pills ==================================================== */ .cv-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .cv-filters:last-of-type { margin-bottom: 2.5rem; } .cv-skin .cv-filter { display: inline-flex; align-items: center; padding: 9px 16px; border: 1px solid var(--cv-line); border-radius: var(--cv-pill); background: #FFF; color: var(--cv-ink-soft); font-size: 13px; font-weight: 500; line-height: 1.2; transition: all .2s var(--cv-ease); } .cv-skin .cv-filter:hover { border-color: var(--cv-brand); color: var(--cv-brand); } .cv-skin .cv-filter.is-active { background: var(--cv-brand); border-color: var(--cv-brand); color: #FFF; } /* ===== Forms (Contact Form 7 + native) ================================= */ .cv-form { width: 100%; } .cv-skin .cv-form p { margin: 0 0 1rem; color: inherit; } .cv-form .cv-field { margin: 0 0 1rem; } .cv-skin .cv-form label, .cv-skin .cv-formlabel { display: block; margin-bottom: .4rem; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cv-ink-soft); line-height: 1.5; } .cv-skin .cv-form input[type="text"], .cv-skin .cv-form input[type="email"], .cv-skin .cv-form input[type="tel"], .cv-skin .cv-form input[type="url"], .cv-skin .cv-form input[type="number"], .cv-skin .cv-form input[type="date"], .cv-skin .cv-form input[type="search"], .cv-skin .cv-form select, .cv-skin .cv-form textarea { width: 100%; max-width: 100%; float: none; padding: 14px 16px; border: 1px solid var(--cv-line); border-radius: var(--cv-radius-sm); background: #FFF; box-shadow: none; color: #000; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; transition: border-color .2s var(--cv-ease), box-shadow .2s var(--cv-ease); -webkit-appearance: none; appearance: none; } .cv-skin .cv-form textarea { min-height: 170px; resize: vertical; } .cv-skin .cv-form input::placeholder, .cv-skin .cv-form textarea::placeholder { color: var(--cv-ink-mute); text-transform: none; font-size: 15px; letter-spacing: 0; } .cv-skin .cv-form input:focus, .cv-skin .cv-form select:focus, .cv-skin .cv-form textarea:focus { outline: none; border-color: #000; box-shadow: 0 0 0 3px rgba(0, 0, 0, .07); } .cv-skin .cv-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; cursor: pointer; } .cv-skin .cv-form input[type="submit"], .cv-skin .cv-form button[type="submit"], .cv-skin .cv-form .wpcf7-submit { width: auto; float: none; height: auto; padding: 14px 28px; border: 1px solid var(--cv-brand); border-radius: var(--cv-pill); background: var(--cv-brand); color: #FFF; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; text-transform: none; cursor: pointer; transition: background-color .25s var(--cv-ease), transform .2s var(--cv-ease); -webkit-appearance: none; appearance: none; } .cv-skin .cv-form input[type="submit"]:hover, .cv-skin .cv-form button[type="submit"]:hover, .cv-skin .cv-form .wpcf7-submit:hover { background: var(--cv-brand-deep); border-color: var(--cv-brand-deep); color: #FFF; } .cv-skin .cv-form input[type="submit"]:active { transform: translateY(1px); } .cv-skin .cv-form .wpcf7-form-control-wrap { width: 100%; float: none; display: block; } .cv-skin .cv-form .wpcf7-not-valid-tip { display: block; margin-top: .35rem; font-size: 12px !important; font-weight: 600 !important; color: #D93025; padding: 0 !important; clear: none !important; text-align: left; } .cv-skin .cv-form .wpcf7-response-output { margin: 1rem 0 0 !important; padding: .9rem 1.1rem !important; border-radius: var(--cv-radius-sm) !important; border-width: 1px !important; font-size: 14px; font-weight: 500; text-align: left; background: #FFF; clear: none; } .cv-skin .cv-form .wpcf7-list-item { margin: 0 1.25rem .35rem 0; display: inline-flex; align-items: center; } .cv-skin .cv-form .wpcf7-list-item-label { font-size: 15px; font-weight: 300; color: var(--cv-ink-soft); text-transform: none; letter-spacing: 0; } .cv-skin .cv-form input[type="checkbox"], .cv-skin .cv-form input[type="radio"] { width: 18px; height: 18px; margin-right: .5rem; accent-color: var(--cv-brand); } .cv-form .wpcf7-spinner { margin-left: .75rem; } .cv-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .cv-form__row { grid-template-columns: 1fr; } } /* Ajax Search Lite */ .cv-skin div.asl_w { border-radius: var(--cv-pill); max-width: 100%; } .cv-skin div.asl_m .probox { border-radius: var(--cv-pill); } /* ===== Footer ========================================================== */ :where(body.cv-skin) footer.cv-footer { width: 100%; float: none; padding: 0; background: var(--cv-dark); color: rgba(255, 255, 255, .7); } .cv-footer__top { padding: 5rem 0 3.5rem; border-bottom: 1px solid rgba(255, 255, 255, .1); } .cv-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 3rem; } @media (max-width: 979px) { .cv-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } @media (max-width: 560px) { .cv-footer__grid { grid-template-columns: 1fr; gap: 2rem; } } .cv-skin .cv-footer h3 { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #FFF; margin: 0 0 1.1rem; line-height: 1.5; } .cv-skin .cv-footer p, .cv-skin .cv-footer li, .cv-skin .cv-footer a { color: rgba(255, 255, 255, .7); font-size: 15px; font-weight: 300; line-height: 1.8; } .cv-skin .cv-footer a:hover { color: #FFF; } .cv-skin .cv-footer ul { list-style: none; margin: 0; padding: 0; } .cv-skin .cv-footer li a::after { display: none; } .cv-skin .cv-footer li { margin: 0; } /* The logo link stays inline-block so it is only as wide as the mark, but the image itself has to be a block: vertical margins are ignored on inline elements, so margin-bottom did nothing and the paragraph closed right up against the logo — with the baseline gap as the only separation. */ .cv-footer__brand > a:first-child { display: inline-block; margin-bottom: 1.5rem; } .cv-footer__brand img { display: block; height: 24px; width: auto; filter: brightness(0) invert(1); } /* The legacy sheet sets `footer p { display: inline; margin: 0 }`, which made every footer paragraph run on: the intro closed up behind the logo, the CTA button landed after the last line of text instead of below it, and the two address blocks ran into each other. Restore block flow. */ .cv-skin .cv-footer p { display: block; margin: 0 0 1rem; } .cv-skin .cv-footer p:last-child { margin-bottom: 0; } .cv-skin .cv-footer__brand p { max-width: 36ch; } .cv-skin .cv-footer__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.25rem; padding: 12px 20px; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--cv-pill); color: #FFF; font-size: 13px; font-weight: 500; line-height: 1.2; transition: background-color .25s var(--cv-ease), color .25s var(--cv-ease), border-color .25s var(--cv-ease); } /* `.cv-skin .cv-footer a:hover { color: #FFF }` above scores one element higher, so it kept the label white on the white hover fill. Matching that `a` puts the dark text back. */ .cv-skin .cv-footer a.cv-footer__cta:hover { background: #FFF; color: #000; border-color: #FFF; } .cv-footer__cta svg { width: 13px; height: 13px; } .cv-footer__pills { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; } .cv-skin .cv-footer__pills li a { display: inline-block; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--cv-pill); font-size: 12px; line-height: 1.5; transition: border-color .25s var(--cv-ease), background-color .25s var(--cv-ease); } .cv-skin .cv-footer__pills li a:hover { border-color: #FFF; background: rgba(255, 255, 255, .08); } .cv-footer__bottom { padding: 1.6rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .cv-skin .cv-footer__bottom p, .cv-skin .cv-footer__bottom a, .cv-skin .cv-footer__bottom li { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0; line-height: 1.6; } .cv-skin .cv-footer__bottom a:hover { color: #FFF; } .cv-skin .cv-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; } .cv-footer__bottom .menu-copyright-menu-container ul li a::before { display: none; } .cv-footer__bottom .menu-copyright-menu-container ul li a { margin-left: 0; } /* ===== Google review badge ============================================= */ /* Floats bottom left, but only once the visitor is past the hero — the class is set from converzo.js. Off-screen rather than display:none, so the plugin can still measure and lay out its own markup. */ .cv-reviews { position: fixed; left: 24px; bottom: 24px; z-index: 45; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .4s var(--cv-ease), transform .4s var(--cv-ease), visibility .4s; } .cv-reviews.is-visible { opacity: 1; visibility: visible; transform: none; } /* No frame of our own — the plugin's badge brings its own look. */ .cv-reviews__inner img { max-width: 100%; height: auto; } /* Below this the badge covers too much of the page to earn its place. */ @media (max-width: 1279px) { .cv-reviews { display: none; } } /* ===== Custom cursor =================================================== Ring lags behind the pointer, dot tracks it exactly. Only mounted on fine-pointer devices without a reduced-motion preference (JS guards it), so touch users never lose their native cursor. */ body.cv-has-cursor, body.cv-has-cursor * { cursor: none !important; } /* Text entry keeps its native caret — losing it there costs more than the effect adds. */ body.cv-has-cursor input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), body.cv-has-cursor textarea { cursor: text !important; } /* The admin bar is tooling, not part of the design — leave it alone. */ body.cv-has-cursor #wpadminbar, body.cv-has-cursor #wpadminbar * { cursor: auto !important; } body.cv-has-cursor #wpadminbar a { cursor: pointer !important; } .cv-cursor-ring, .cv-cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; opacity: 0; will-change: transform, width, height; transition: opacity .25s ease, width .3s var(--cv-ease), height .3s var(--cv-ease), background-color .3s var(--cv-ease), border-color .3s var(--cv-ease); } /* Per-pixel inversion, back the way it was: the part of the cursor lying over a dark heading goes white while the part next to it stays black, and it splits mid-glyph. `backdrop-filter` does that on the backdrop itself. grayscale() runs before invert() so the result stays on the black-white axis — plain `difference` blending inverted hue as well, which is where the stray colours over the hero video and the teal accents came from. */ .cv-cursor-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; -webkit-backdrop-filter: grayscale(1) invert(1); backdrop-filter: grayscale(1) invert(1); } .cv-cursor-ring { --cv-ring-w: 1.5px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; -webkit-backdrop-filter: grayscale(1) invert(1); backdrop-filter: grayscale(1) invert(1); /* Only the rim inverts. Without the mask the filter would apply to the whole disc; `closest-side` puts 100% at the radius, so the band sits exactly where the border used to be and the square's corners stay clear. */ -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - var(--cv-ring-w) - .5px), #000 calc(100% - var(--cv-ring-w)), #000 calc(100% - .5px), transparent 100%); mask: radial-gradient(circle closest-side, transparent calc(100% - var(--cv-ring-w) - .5px), #000 calc(100% - var(--cv-ring-w)), #000 calc(100% - .5px), transparent 100%); } .cv-cursor-ring.is-visible, .cv-cursor-dot.is-visible { opacity: 1; } /* Over anything interactive the brand colour takes over from the inversion: solid teal, both parts, on either ground. */ .cv-cursor-ring.is-hovering { width: 72px; height: 72px; --cv-ring-w: 2px; border: 2px solid var(--cv-brand); background: rgba(2, 156, 166, .18); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask: none; mask: none; } .cv-cursor-dot.is-hovering { width: 12px; height: 12px; background: var(--cv-brand); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Press feedback — still teal, just tighter. */ .cv-cursor-ring.is-pressing, .cv-cursor-ring.is-hovering.is-pressing { width: 28px; height: 28px; border: 2px solid var(--cv-brand); background: rgba(2, 156, 166, .32); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask: none; mask: none; } .cv-cursor-dot.is-pressing, .cv-cursor-dot.is-hovering.is-pressing { width: 10px; height: 10px; background: var(--cv-brand); -webkit-backdrop-filter: none; backdrop-filter: none; } /* On brand-teal ground (primary buttons) a teal cursor disappears into its own colour, so both parts flip to white there. The script sets .is-on-brand by measuring the painted background under the pointer. */ .cv-cursor-ring.is-hovering.is-on-brand, .cv-cursor-ring.is-pressing.is-on-brand { border-color: #FFF; background: rgba(255, 255, 255, .22); } .cv-cursor-ring.is-pressing.is-on-brand { background: rgba(255, 255, 255, .32); } .cv-cursor-dot.is-hovering.is-on-brand, .cv-cursor-dot.is-pressing.is-on-brand { background: #FFF; } /* No backdrop-filter (older Safari, Firefox with it disabled): fall back to the whole-element colours, driven by the ground the script measures. */ @supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) { .cv-cursor-dot { background: #000; } .cv-cursor-dot.is-on-dark { background: #FFF; } .cv-cursor-ring { border: 1.5px solid #000; -webkit-mask: none; mask: none; } .cv-cursor-ring.is-on-dark { border-color: #FFF; } } @media (hover: none), (pointer: coarse), (max-width: 767px) { .cv-cursor-ring, .cv-cursor-dot { display: none !important; } body.cv-has-cursor, body.cv-has-cursor * { cursor: auto !important; } } @media (prefers-reduced-motion: reduce) { .cv-cursor-ring, .cv-cursor-dot { display: none !important; } body.cv-has-cursor, body.cv-has-cursor * { cursor: auto !important; } } /* ===== Utilities ======================================================= */ .cv-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cv-center { text-align: center; } .cv-center .cv-btn-row, .cv-center .cv-eyebrow { justify-content: center; } /* Reveal on scroll */ .cv-reveal { opacity: 0; transform: translateY(24px); } .cv-reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--cv-ease), transform .7s var(--cv-ease); } @media (prefers-reduced-motion: reduce) { .cv-reveal { opacity: 1 !important; transform: none !important; } } /* ===== Legacy neutralisation =========================================== */ /* Old templates/plugins may still emit these — keep them light & sane. */ body.cv-skin .main-content { margin-top: 0; float: none; width: auto; } body.cv-skin .banner::before, body.cv-skin .cta::after, body.cv-skin .cta .cta_inner::before, body.cv-skin .cta .cta_inner::after, body.cv-skin .blank_space, body.cv-skin .coffee_cup { display: none !important; } body.cv-skin .banner, body.cv-skin .blog_section, body.cv-skin .internet_chat, body.cv-skin .our_customer, body.cv-skin .tldr_overons, body.cv-skin .cta, body.cv-skin .fringilla { float: none; width: auto; background: transparent; padding: 0; height: auto; } body.cv-skin .internet_chat h2, body.cv-skin .internet_chat p, body.cv-skin .our_customer h2, body.cv-skin .our_customer p, body.cv-skin .cta h3, body.cv-skin .cta p, body.cv-skin .contact_section h2 { color: #000; } body.cv-skin .cta a { color: #000 !important; text-transform: none; } :where(body.cv-skin) .wrapper, :where(body.cv-skin) .wrapper_inner { max-width: var(--cv-max); padding: 0 var(--cv-gutter); overflow: visible; } .map-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; } .map-responsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; border: 0; } /* Print */ @media print { .cv-header, .cv-footer, .cv-cta-zone__canvas, .cv-marquee { display: none !important; } body.cv-skin { background: #FFF !important; } }