/* Theme Name: CZTA Theme URI: https://creativezone.ae Author: Creative Zone Tax & Accounting Description: Lightweight custom theme for Creative Zone Tax & Accounting. No page builder, no framework. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: czta Organised as: tokens -> base -> layout -> ELEMENTS -> components -> sections. Elements own how a thing looks and are reused everywhere; a section only places them and supplies its background. An element never hardcodes an ink colour — it reads the surface variables set by its section, so a single `.cz-title` covers both the light and dark variants in Figma rather than there being two of them. */ /* ========================================================================= FONT One variable file covers every weight the design uses (500 and 600), so the whole site needs a single font request and no third-party CDN. ========================================================================= */ @font-face { font-family: 'General Sans'; src: url('assets/fonts/GeneralSans-Variable.woff2') format('woff2-variations'), url('assets/fonts/GeneralSans-Variable.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; } /* ========================================================================= TOKENS ========================================================================= */ :root { interpolate-size: allow-keywords; /* lets height/block-size transition to auto */ /* brand */ --cz-green-900: #002d26; --cz-green-800: #061416; --cz-green-700: #152c24; --cz-green-600: #102525; --cz-panel: #1a3f3f; --cz-panel-line: #275d5d; --cz-mint: #00d8b0; --cz-mint-bright: #00ffd0; --cz-mint-dark: #00b795; --cz-mint-glow: #53ffdf; --cz-pale: #dcf2ee; --cz-white: #fff; --cz-ink-dark: #142422; --cz-ink-body: #56607a; --cz-ink-heading: #141b34; --cz-surface-grey: #f4f6f8; --cz-error: #ee5276; /* type */ --cz-font: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cz-body: 16px; --cz-size-display: 58px; /* Big Titles */ --cz-size-h2: 36px; /* section heading */ --cz-size-h3: 32px; /* card heading */ --cz-size-lede: 16px; --cz-size-small: 14px; /* layout */ --cz-container: 1776px; /* The 150px gutter is what the 1776px design frame needs to leave a 1476px content column. Below that width the gutter gives way first, so the content column stays at 1476px down to a 1572px viewport instead of shrinking with every pixel. */ --cz-gutter: clamp(48px, (100vw - 1476px) / 2, 150px); --cz-section-pad: 100px; --cz-nav-h: 76px; /* the mobile bar's own height, which the hero starts below */ --cz-radius: 24px; --cz-radius-card: 12px; --cz-radius-pill: 800px; } @media (max-width: 1200px) { :root { --cz-gutter: 48px; } } @media (max-width: 768px) { :root { --cz-gutter: 20px; } } /* ========================================================================= BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } /* :where() keeps the reset at zero specificity so a single class selector can always override it — `ul[class]` outranked class selectors and silently ate padding on list-based components. */ :where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; } img, picture, svg { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { font-family: var(--cz-font); font-size: var(--cz-body); line-height: 1.5; color: var(--cz-green-700); background: var(--cz-white); -webkit-font-smoothing: antialiased; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; width: auto; height: auto; clip: auto; padding: 12px 20px; background: var(--cz-mint); color: var(--cz-green-700); border-radius: 8px; } :focus-visible { outline: 2px solid var(--cz-mint); outline-offset: 3px; } /* ========================================================================= LAYOUT A section declares its surface; every element inside reads these variables instead of naming a colour, which is what lets one element serve both. ========================================================================= */ .cz-container { width: 100%; max-width: var(--cz-container); margin-inline: auto; padding-inline: var(--cz-gutter); } .cz-section { --cz-ink: var(--cz-ink-heading); --cz-ink-soft: var(--cz-ink-body); --cz-title-fill: linear-gradient(135.72deg, var(--cz-ink-dark) 55.45%, var(--cz-mint-glow) 152.75%); --cz-rule: rgba(20,27,52,.08); position: relative; background: var(--cz-white); } .cz-section--grey { background: var(--cz-surface-grey); } .cz-section--dark { --cz-ink: var(--cz-white); --cz-ink-soft: #e8f3f1; --cz-title-fill: linear-gradient(135.72deg, var(--cz-white) 55.45%, var(--cz-mint-glow) 152.75%); --cz-rule: rgba(255,255,255,.12); background: var(--cz-green-600); color: var(--cz-white); } .cz-section__inner { position: relative; z-index: 1; max-width: var(--cz-container); margin-inline: auto; padding: var(--cz-section-pad) var(--cz-gutter); } /* Full-bleed background image for a section. */ .cz-section__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ========================================================================= ELEMENTS ========================================================================= */ /* --- Big Titles: display heading, gradient-filled per surface ------------- */ .cz-title { font-size: var(--cz-size-display); font-weight: 500; line-height: 100px; background-image: var(--cz-title-fill); -webkit-background-clip: text; background-clip: text; color: transparent; } /* --- section heading ----------------------------------------------------- */ .cz-heading { font-size: var(--cz-size-h2); font-weight: 500; line-height: 1.15; color: var(--cz-ink, var(--cz-ink-heading)); } /* --- intro / supporting paragraph ---------------------------------------- */ .cz-lede { font-size: var(--cz-size-lede); font-weight: 500; color: var(--cz-ink-soft, var(--cz-ink-body)); } .cz-lede--small { font-size: var(--cz-size-small); } /* An inline link inside body copy keeps the paragraph's ink and is marked by the underline alone, as the design draws it (VAT Health Checks' opening copy). */ .cz-lede a { color: inherit; text-decoration: underline; } /* --- section header block ------------------------------------------------ */ .cz-sechead { display: grid; gap: 16px; max-width: 677px; margin-bottom: 48px; } /* --- buttons ------------------------------------------------------------- */ .cz-btn { display: inline-flex; align-items: center; gap: 0; padding: 16px 32px; border: 0; border-radius: var(--cz-radius-pill); background: var(--cz-mint); color: var(--cz-green-700); font-weight: 600; cursor: pointer; transition: background .2s ease, gap .2s ease, transform .2s ease; } /* Figma Hover variant: brighter fill, a 10px gap opens, and the up-right arrow rotates 45 degrees to point straight right. */ .cz-btn:hover { background: var(--cz-mint-bright); gap: 10px; } .cz-btn:active { transform: translateY(1px); } .cz-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; transition: transform .2s ease; } .cz-btn:hover .cz-btn__icon { transform: rotate(45deg); } .cz-btn--secondary { background: transparent; color: var(--cz-white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); } .cz-btn--secondary:hover { background: rgba(255,255,255,.08); } .cz-btn--outline { background: transparent; color: var(--cz-green-700); box-shadow: inset 0 0 0 1px var(--cz-green-700); } .cz-btn--outline:hover { background: rgba(21,44,36,.06); } /* Mint-outlined, on a dark plate (the Corporate Tax CTA's second button). It carries no arrow in the design, so there is no .cz-btn__icon to rotate. */ .cz-btn--mint-outline { padding: 12px 18px; background: rgba(5,24,22,.8); color: #00ddb5; box-shadow: inset 0 0 0 1px var(--cz-mint); } .cz-btn--mint-outline:hover { background: rgba(5,24,22,.95); color: var(--cz-mint-bright); } /* --- service card (one element; price and media are optional) ------------- */ .cz-card { display: flex; flex-direction: column; border-radius: var(--cz-radius-card); overflow: hidden; background: var(--cz-white); /* Figma Variant2 is the hover state: the shadow fades up from nothing. */ box-shadow: 0 20px 16.35px rgba(0,0,0,0); transition: box-shadow .3s ease; } .cz-card:hover { box-shadow: 0 20px 16.35px rgba(0,0,0,.1); } .cz-card__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 20px; padding: 32px; } .cz-card__badge { align-self: flex-end; /* Positioned so it can be layered: on mobile the card goes landscape and the badge sits over the photo, which is a later sibling and would paint on top. */ position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 24px; background: var(--cz-mint); transition: background .3s ease; } .cz-card:hover .cz-card__badge { background: var(--cz-mint-bright); } .cz-card__arrow { display: block; width: 24px; height: 24px; transition: transform .3s ease; } .cz-card__arrow svg { width: 100%; height: 100%; } /* Variant2 offsets the arrow up and to the right inside the badge. */ .cz-card:hover .cz-card__arrow { transform: translate(4px, -4px); } /* Used on its own as a link (the services info card), where there is no `.cz-card` around it to drive the hover. */ a.cz-card__badge:hover { background: var(--cz-mint-bright); } a.cz-card__badge:hover .cz-card__arrow { transform: translate(4px, -4px); } .cz-card__text { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; } .cz-card__name { font-size: var(--cz-size-h3); font-weight: 500; color: var(--cz-ink-heading); line-height: 1.1; } .cz-card__desc { font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-ink-body); } .cz-card__price { display: grid; gap: 4px; } .cz-card__from { font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-ink-body); } .cz-card__amount { font-size: 18px; font-weight: 600; color: var(--cz-ink-heading); } .cz-card__media { height: 152px; flex: none; overflow: hidden; } .cz-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } /* Variant2 widens the photo from 486 to 556 — a 1.14 scale. */ .cz-card:hover .cz-card__media img { transform: scale(1.14); } /* --- horizontal rail (carousel) ------------------------------------------ The frame clips, the track slides. Whole cards only: main.js moves the track by one card at a time, so there is never a half-card or a scrollbar. The padding keeps the cards' drop shadow inside the clip. */ .cz-rail { overflow: hidden; padding-block: 20px; cursor: grab; /* The browser keeps vertical panning; a horizontal drag is the rail's. Without this a touch drag is swallowed by the page scroll and the rail never moves. */ touch-action: pan-y; } .cz-rail__track { display: flex; gap: 24px; width: max-content; transition: transform .6s cubic-bezier(.4, 0, .2, 1); } .cz-rail.is-dragging .cz-rail__track { transition: none; } .cz-rail__item { flex: none; } .cz-rail.is-dragging { cursor: grabbing; user-select: none; } .cz-rail.is-dragging img { pointer-events: none; } /* the browser's own image drag would hijack it */ /* --- stat item ----------------------------------------------------------- */ .cz-stat { display: flex; align-items: center; gap: 12px; } .cz-stat__icon { display: block; width: 57.6px; height: 57.6px; flex: none; } .cz-stat__icon svg { width: 100%; height: 100%; } .cz-stat__text { display: flex; flex-direction: column; justify-content: center; color: var(--cz-ink-heading); font-weight: 600; } .cz-stat__value { font-size: 24px; } .cz-stat__label { font-size: var(--cz-size-small); } /* --- team member: circular portrait, bio card on hover -------------------- */ /* The card overlaps the bottom of the portrait, so it is positioned, not in flow; the rail item reserves the height for it. It starts 30px lower and transparent, and rises into place — matching the two Figma variants. */ .cz-member { position: relative; width: 309.4px; margin: 0; } .cz-member__photo { display: block; width: 309.4px; height: 309.4px; border-radius: var(--cz-radius-pill); background: var(--cz-green-600); object-fit: cover; } .cz-member__card { position: absolute; left: 0; top: 289.4px; width: 309.4px; padding: 11px; border: 1px solid #eaeaea; border-radius: var(--cz-radius-card); background: var(--cz-white); box-shadow: 0 20px 16.35px rgba(0, 0, 0, .1); text-align: center; opacity: 0; transition: opacity .25s ease, top .25s ease; } .cz-member:hover .cz-member__card, .cz-member:focus-within .cz-member__card { opacity: 1; top: 259.4px; } .cz-member__name { font-size: 18px; font-weight: 600; color: var(--cz-ink-heading); } .cz-member__creds, .cz-member__role { font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-ink-heading); margin-top: 3px; } .cz-member__bio { font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-ink-body); margin-top: 8px; } /* --- info card: copy and a bullet list beside a photo -------------------- The services picker's panel (Figma 737:1265). The photo is a fixed 582px — its size in the design — and the body takes the rest. */ .cz-info { display: flex; min-height: 401px; border-radius: var(--cz-radius-card); overflow: hidden; background: var(--cz-white); box-shadow: 0 12px 12px rgba(20,27,52,.03); } .cz-info__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 40px; } .cz-info__head { display: flex; align-items: center; gap: 16px; } .cz-info__title { flex: 1; min-width: 0; font-size: var(--cz-size-h3); font-weight: 500; color: var(--cz-ink-heading); } /* The badge element aligns to the end of a column card; here it sits in a row. */ .cz-info__badge { align-self: center; } .cz-info__lede { font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-ink-body); } .cz-info__lists { display: flex; gap: 20px; } .cz-info__list { flex: 1; min-width: 0; display: grid; gap: 10px; align-content: start; } /* The bullet is the design's 8px rounded square, drawn rather than listed, so it stays on the first line of a wrapping item. */ .cz-info__item { display: grid; grid-template-columns: 8px 1fr; gap: 12px; font-size: var(--cz-size-small); font-weight: 600; color: var(--cz-ink-heading); } .cz-info__item::before { content: ''; width: 8px; height: 8px; margin-top: 6px; border-radius: 4px; background: #1f8778; } .cz-info__media { flex: 0 0 582px; } .cz-info__media img { width: 100%; height: 100%; object-fit: cover; } /* --- check card: icon beside a title and a line of copy ------------------- "Why Work With CZTA?" (Figma 721:11290). Its own fill is a translucent dark green, so unlike most elements it carries its ink rather than reading the surface — the same exception the hero badge makes. */ .cz-check { display: flex; align-items: center; gap: 16px; padding: 24px; border: 1.5px solid #00473a; border-radius: var(--cz-radius-card); background: rgba(1,29,25,.6); } .cz-check__icon { flex: none; width: 48px; height: 48px; color: var(--cz-mint); } .cz-check__icon svg { width: 100%; height: 100%; } .cz-check__text { display: grid; gap: 2px; min-width: 0; } .cz-check__title { font-size: 18px; font-weight: 500; color: var(--cz-white); } .cz-check__desc { font-size: var(--cz-size-small); font-weight: 500; color: #9ccfc9; } /* --- plate card: copy over one supplied full-card image ------------------- "What Is Corporate Tax Registration in the UAE?" (Figma 823:15206). The photo and the mint wave behind it are separate layers in the design but ONE supplied flattened image at the card's exact size, the same way cta-bg.webp is the whole CTA card — so there is no CSS gradient and nothing to rebuild here. */ .cz-plate { position: relative; overflow: hidden; padding: 40px; border-radius: var(--cz-radius-card); background: var(--cz-white); } .cz-plate__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; } /* The image is absolutely positioned and comes first, so the copy needs its own layer or it paints underneath — the same trap as .cz-card__badge. */ .cz-plate__copy { position: relative; display: grid; gap: 24px; max-width: 677px; } .cz-plate__title { font-size: 26px; font-weight: 500; color: var(--cz-ink-heading); } /* --- document card: title and icon on one row, a line of copy under ------- "Documents Required for UAE Corporate Tax Registration" (Figma 823:16094). Close to cz-check in shape but the opposite surface, so it is its own element: cz-check carries its own translucent dark fill and only sits on a dark plate. */ .cz-doc { display: grid; gap: 16px; align-content: start; padding: 32px; border-radius: var(--cz-radius-card); background: var(--cz-white); } .cz-doc__head { display: flex; align-items: flex-start; gap: 10px; } .cz-doc__title { flex: 1; min-width: 0; font-size: 20px; font-weight: 600; color: var(--cz-ink-heading); } /* An inlined SVG keeps its own intrinsic size, so the icon needs a sized box. */ .cz-doc__icon { flex: none; display: grid; place-items: center; width: 31.2px; height: 31.2px; color: var(--cz-ink-heading); } .cz-doc__icon svg { width: 100%; height: 100%; } .cz-doc__text { font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-ink-body); } /* --- FAQ item ------------------------------------------------------------ */ .cz-faq-item { border: 1px solid #e8f3f1; border-radius: var(--cz-radius-card); background: var(--cz-white); transition: background .2s ease; } .cz-faq-item[open] { background: #e8f3f1; } .cz-faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; cursor: pointer; font-size: var(--cz-size-lede); font-weight: 600; color: var(--cz-ink-heading); list-style: none; /* The open state tightens the bottom padding; without this it snaps 8px on the first frame and reads as a jolt before the panel has even started to move. */ transition: color .2s ease, padding-bottom .3s ease; } .cz-faq-item__q::-webkit-details-marker { display: none; } .cz-faq-item[open] .cz-faq-item__q { color: #155e53; padding-bottom: 16px; } .cz-faq-item__icon { display: grid; place-items: center; width: 20px; height: 20px; flex: none; transition: transform .2s ease; } .cz-faq-item__icon svg { width: 15px; height: 15px; } .cz-faq-item[open] .cz-faq-item__icon { transform: rotate(45deg); } .cz-faq-item__a { padding: 0 24px 24px; font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-ink-heading); } /* An answer may be several paragraphs (Corporate Tax Filing has four), or a list of the documents a filing needs. */ .cz-faq-item__a > * + * { margin-top: 12px; } .cz-faq-item__a ul { padding-left: 1.25em; list-style: disc; } /* Animate the disclosure itself. ::details-content is the browser's own box for everything after the , and `interpolate-size` is what lets a height transition run to `auto`. Browsers without either simply snap open, as before. */ .cz-faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s ease allow-discrete; } .cz-faq-item[open]::details-content { block-size: auto; } /* The global reduced-motion reset uses `*`, which does not reach a pseudo-element. */ @media (prefers-reduced-motion: reduce) { .cz-faq-item::details-content { transition: none; } } /* --- testimonial --------------------------------------------------------- */ .cz-testimonial { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--cz-radius-card); background: var(--cz-surface-grey); margin: 0; } .cz-testimonial__mark { display: block; width: 36px; height: 36px; } .cz-testimonial__mark svg { width: 100%; height: 100%; } .cz-testimonial__quote { margin: 0; display: grid; gap: 24px; } .cz-testimonial__lead { font-size: 36px; font-weight: 500; color: var(--cz-ink-heading); line-height: 1.2; } .cz-testimonial__body { font-size: var(--cz-size-lede); font-weight: 500; color: var(--cz-ink-body); } .cz-testimonial__who { font-size: var(--cz-size-lede); font-weight: 600; color: var(--cz-ink-heading); } /* --- post card ----------------------------------------------------------- */ .cz-postcard { height: 373px; border: 1px solid #e8f3f1; border-radius: 16px; overflow: hidden; background: var(--cz-white); } .cz-postcard__link { display: flex; flex-direction: column; height: 100%; } .cz-postcard__media img { display: block; width: 100%; height: 200px; object-fit: cover; } /* The footer row sits at the bottom of whatever space is left, so cards with shorter copy still line their dates up. */ .cz-postcard__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; } .cz-postcard__text { display: grid; gap: 8px; } .cz-postcard__title { font-size: 18px; font-weight: 600; color: var(--cz-ink-heading); } .cz-postcard__excerpt { font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-ink-body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .cz-postcard__meta { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 500; color: var(--cz-ink-body); white-space: nowrap; } .cz-postcard:hover .cz-postcard__title { color: var(--cz-mint-dark); } /* --- form ---------------------------------------------------------------- */ .cz-form { display: grid; gap: 20px; max-width: 640px; grid-template-columns: repeat(2, 1fr); align-items: start; } .cz-form__row { display: grid; gap: 8px; } /* Two half-width rows pair up; a full row always breaks the line. */ .cz-form__row--full { grid-column: 1 / -1; } .cz-form__row--half { grid-column: span 1; } .cz-form__title, .cz-form__notice, .cz-form__submit, .cz-form__hp, .cz-form__disclaimer { grid-column: 1 / -1; } .cz-form__title { font-size: 28px; font-weight: 600; } .cz-form__label { font-size: var(--cz-size-small); font-weight: 600; } .cz-form__req { color: #c0392b; } .cz-form__input { width: 100%; padding: 14px 16px; background: var(--cz-white); color: var(--cz-green-700); border: 1px solid #cfe1dd; border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; } .cz-form__input:focus { border-color: var(--cz-mint); } .cz-form__row--checkbox { grid-template-columns: auto 1fr; align-items: center; gap: 12px; } .cz-form__row--checkbox .cz-form__label { order: 2; font-weight: 500; } .cz-form__row--checkbox .cz-form__input { width: 20px; height: 20px; order: 1; } .cz-form__row.is-invalid .cz-form__input { border-color: #c0392b; } /* Phone: the country select is sized to show flag + code only; its long country names still read in the open dropdown. */ .cz-form__tel { display: flex; gap: 8px; } .cz-form__cc { flex: 0 0 104px; width: 104px; } .cz-form__cc-wrap { position: relative; flex: 0 0 104px; } /* Enhanced: the select still submits, the button is what is seen. */ .cz-form__cc-wrap .cz-form__cc { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .cz-form__cc-btn { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; cursor: pointer; font: inherit; } .cz-form__cc-btn::after { content: ''; margin-left: auto; width: 7px; height: 7px; opacity: .6; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } .cz-form__cc-pop { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; width: 280px; max-height: 280px; overflow: auto; padding: 8px; background: var(--cz-white); color: var(--cz-ink-heading); border-radius: 12px; box-shadow: 0 12px 32px rgba(10, 34, 32, .22); } .cz-form__cc-search { position: sticky; top: 0; width: 100%; margin-bottom: 6px; padding: 10px 12px; font: inherit; font-size: 15px; border: 1px solid #d8e3e1; border-radius: 8px; } .cz-form__cc-search:focus { outline: none; border-color: var(--cz-mint); } .cz-form__cc-list { list-style: none; margin: 0; padding: 0; } .cz-form__cc-item { display: flex; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 15px; cursor: pointer; } .cz-form__cc-flag { flex: none; } /* `display: flex` above out-specifies the UA's `[hidden] { display: none }`, so the filter has to hide the item itself. */ .cz-form__cc-item[hidden] { display: none; } .cz-form__cc-item.is-active, .cz-form__cc-item:hover { background: #e4f8f3; } .cz-form__cc-item[aria-selected="true"] { font-weight: 600; } .cz-form__tel input { flex: 1 1 auto; min-width: 0; } .cz-form__error { font-size: 13px; color: #c0392b; } .cz-form__notice { padding: 14px 18px; border-radius: 12px; font-size: 15px; } .cz-form__notice--ok { background: #e4f8f3; color: #0c5c4b; } .cz-form__notice--error { background: #fdeceb; color: #922; } .cz-form__submit { justify-self: start; } .cz-form__submit[disabled] { opacity: .6; pointer-events: none; } /* Small print above the button: legal copy, not a field. */ .cz-form__disclaimer { font-size: 13px; line-height: 1.5; color: #5b6478; } .cz-form__disclaimer p { margin: 0 0 8px; } .cz-form__disclaimer p:last-child { margin-bottom: 0; } .cz-form__disclaimer a { color: inherit; text-decoration: underline; } /* Honeypot: hidden from sight and from assistive tech, but still filled by bots. */ .cz-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cz-form__radios { display: flex; gap: 24px; align-items: center; } .cz-form__radio { display: inline-flex; align-items: center; gap: 8px; font-size: var(--cz-size-small); font-weight: 500; cursor: pointer; } .cz-form__radio input { accent-color: var(--cz-mint); width: 18px; height: 18px; margin: 0; } .cz-form--dark { gap: 24px; width: 630px; max-width: 100%; padding: 24px; border-radius: var(--cz-radius-card); background: #1c3c3c; } .cz-form--dark .cz-form__label { color: var(--cz-white); } .cz-form--dark .cz-form__req { color: var(--cz-error); } .cz-form--dark .cz-form__input { background: var(--cz-white); color: #1c3c3c; border: 1px solid #7eb2b2; border-radius: 8px; padding: 12px 16px; font-size: var(--cz-size-small); } .cz-form--dark .cz-form__input::placeholder { color: #7eb2b2; } /* The design marks the active field with a thick mint underline. It is painted inside the field with an inset shadow rather than a fatter border: a border grows the box by 4px and shunts every field below it down as you tab through. */ .cz-form--dark .cz-form__input:focus { outline: none; border-color: var(--cz-mint); box-shadow: inset 0 -5px 0 var(--cz-mint); } .cz-form--dark textarea.cz-form__input { min-height: 80px; resize: vertical; } .cz-form--dark .cz-form__radio { color: var(--cz-white); } .cz-form--dark .cz-form__notice--ok { background: rgba(0,216,176,.15); color: #84fff3; } .cz-form--dark .cz-form__notice--error { background: rgba(238,82,118,.15); color: #ffb3c4; } .cz-form--dark .cz-form__disclaimer { color: rgba(255,255,255,.62); } @media (max-width: 640px) { .cz-form__row--half { grid-column: 1 / -1; } } /* --- pricing card -------------------------------------------------------- One card for all three Packages rows: a plate header over a dark body. The card names its own ink rather than reading --cz-ink, the same deliberate exception cz-check and cz-acc make — it is always the dark surface, whatever the section around it is. */ .cz-price { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--cz-radius-card); } .cz-price__head { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 147px; padding: 20px; overflow: hidden; border: 2px solid #1a3c3c; border-bottom: 0; border-radius: var(--cz-radius-card) var(--cz-radius-card) 0 0; background: #001a13; text-align: center; } /* The plate is flattened onto the header, so the scrim over it is the only layer this rebuilds — the design draws it as a 70% wash. */ .cz-price__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cz-price__head::after { content: ""; position: absolute; inset: 0; background: rgba(0,26,19,.7); } .cz-price__eyebrow, .cz-price__name, .cz-price__note, .cz-price__head .cz-price__amount { position: relative; z-index: 1; } .cz-price__eyebrow { font-size: var(--cz-size-lede); font-weight: 500; color: var(--cz-white); } .cz-price__name { font-size: 24px; font-weight: 500; color: var(--cz-white); } .cz-price__note { font-size: var(--cz-size-lede); font-weight: 500; color: var(--cz-white); } .cz-price__amount { font-size: 24px; font-weight: 500; color: var(--cz-mint); } .cz-price__per { font-size: 13px; font-weight: 500; color: var(--cz-surface-grey); } /* The tax row puts the price in the header and left-aligns it against the plate's own dark half, which fades left to right rather than washing flat. */ .cz-price--plate .cz-price__head { align-items: flex-start; justify-content: flex-end; flex: 1 0 auto; text-align: left; } .cz-price--plate .cz-price__head::after { background: linear-gradient(69deg, #001a13 45%, rgba(0,26,19,.2) 71%); } /* The button is pushed to the foot of the card with `margin-top: auto` rather than `space-between`, which would have spread the price, the copy and the list down the whole card instead of keeping them together at the top. */ .cz-price__body { display: flex; flex-direction: column; gap: 32px; flex: 1 0 auto; padding: 16px 24px 32px; border: 2px solid #1a3c3c; border-top: 0; border-radius: 0 0 var(--cz-radius-card) var(--cz-radius-card); background: #133030; font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-white); } .cz-price__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cz-price__text { color: var(--cz-white); } .cz-price__list { display: grid; gap: 16px; } .cz-price__list li { display: flex; align-items: flex-start; gap: 12px; } .cz-price__list span:last-child { flex: 1 1 auto; color: var(--cz-surface-grey); line-height: 1.4; } .cz-price__tick { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 10px; background: var(--cz-mint); color: var(--cz-green-800); } .cz-price__tick svg { width: 12px; height: 12px; } .cz-price__incl { display: grid; gap: 2px; } .cz-price__incl-label { color: var(--cz-mint); } .cz-price__btn { justify-content: center; width: 100%; margin-top: auto; } /* The most-popular card: mint border, solid button, and the badge riding on top of it — the row reserves the badge's height so nothing is clipped. */ .cz-price--featured .cz-price__head { border-color: var(--cz-mint-dark); border-width: 3px; } .cz-price--featured .cz-price__body { border-color: var(--cz-mint); border-width: 3px; border-top: 0; background: var(--cz-panel); } .cz-price--featured .cz-price__head::after { background: rgba(0,26,19,.5); } .cz-price__badge { position: absolute; left: 0; right: 0; top: -36px; display: grid; place-items: center; height: 51px; padding: 14px 28px; border-radius: var(--cz-radius-card) var(--cz-radius-card) 0 0; background: linear-gradient(65.67deg, #00725d 5%, #00a587 25%, #008069 62%, #00d8b0 80%, #afffF0 101%); box-shadow: inset 0 -19px 15.7px rgba(0,0,0,.25); font-size: 18px; font-weight: 600; color: var(--cz-white); } /* ========================================================================= COMPONENTS — nav and footer ========================================================================= */ .cz-nav { /* How far the admin bar pushes the fixed bar down. Zero for a visitor; the mobile panel is fixed too, so it has to offset by the same amount or it rides up over the logo. */ --cz-admin-offset: 0px; position: fixed; inset: var(--cz-admin-offset) 0 auto 0; z-index: 100; transition: background .25s ease, box-shadow .25s ease; } .cz-nav.is-stuck, .cz-nav--solid { background: rgba(0,45,38,.95); backdrop-filter: blur(8px); } /* Pages without a hero start below the fixed bar rather than under it. */ .cz-nav--solid ~ .cz-main { padding-top: 98px; } /* Clear the WordPress admin bar so the fixed header is not hidden behind it. */ .admin-bar .cz-nav { --cz-admin-offset: 32px; } @media screen and (max-width: 782px) { .admin-bar .cz-nav { --cz-admin-offset: 46px; } } /* At 600px WordPress switches the admin bar to `position: absolute` so it scrolls away, but it still shifts the document down by its own height with a margin on . A fixed header cannot satisfy both: offset by 46px and a gap opens above the bar once the admin bar scrolls off; offset by nothing and the 46px reappears as a white band between the bar and the hero. So the admin bar is pinned here instead, exactly as it is at every wider size, and the one offset is right whatever the scroll position. Ours is enqueued after admin-bar.css, so equal specificity is enough. */ @media screen and (max-width: 600px) { #wpadminbar { position: fixed; } } .cz-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: var(--cz-container); margin-inline: auto; padding: 24px var(--cz-gutter); } .cz-nav__logo { display: grid; gap: 7px; flex: none; } .cz-nav__logo svg { height: auto; } .cz-nav__logo svg:first-of-type { width: 202px; } .cz-nav__logo svg:last-of-type { width: 179px; } .cz-nav__menu { display: flex; align-items: center; gap: 32px; } .cz-nav__list { display: flex; align-items: center; gap: 32px; } .cz-nav__list a { color: var(--cz-white); font-weight: 500; white-space: nowrap; } .cz-nav__list a:hover { color: var(--cz-mint); } .cz-nav__list .current-menu-item > a { color: #1cb095; font-weight: 600; } .cz-nav__cta { height: 50px; padding: 12px 18px; white-space: nowrap; } /* The CTA's wrapper is only a card on mobile; `contents` takes it out of the layout entirely here, so the button is a direct child of the bar's flex row. */ .cz-nav__promo { display: contents; } .cz-nav__promo-bg, .cz-nav__promo-text { display: none; } .cz-nav__list li { position: relative; } .cz-nav__list .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; display: grid; gap: 4px; padding: 12px; background: var(--cz-green-900); border-radius: 12px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .cz-nav__list li:hover > .sub-menu, .cz-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } /* Services mega menu (Figma 831:23703). Full-bleed panel under the bar, opened by hover or focus-within like the plain sub-menu above — no JS. Its item goes `position: static` so the panel's containing block is the fixed bar itself and it can span the whole width. */ .cz-nav__list .cz-nav__item--mega { position: static; } .cz-nav__item--mega > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } .cz-mega { position: absolute; top: 100%; left: 0; right: 0; padding: 50px var(--cz-gutter); background: rgba(15,33,31,.8); backdrop-filter: blur(20px); border-radius: 0 0 30px 30px; opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1), visibility .34s; } /* The panel eases down, the cards drift up behind it — two layers so the open reads as a settle rather than a pop. The short delay is hover intent: a pointer crossing Services on its way elsewhere never triggers it. */ .cz-nav__item--mega:hover > .cz-mega, .cz-nav__item--mega:focus-within > .cz-mega { opacity: 1; visibility: visible; transform: none; transition-delay: .12s; } .cz-mega__inner > * { opacity: 0; transform: translateY(14px); transition: opacity .38s ease .06s, transform .38s cubic-bezier(.22,.61,.36,1) .06s; } .cz-nav__item--mega:hover .cz-mega__inner > *, .cz-nav__item--mega:focus-within .cz-mega__inner > * { opacity: 1; transform: none; transition-delay: .2s; } .cz-mega__inner { display: flex; gap: 16px; height: 353px; max-width: var(--cz-container); margin-inline: auto; } .cz-mega__card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 24px; background: #193532; border: 1px solid #1f4541; border-radius: 12px; } .cz-mega__card--ct { flex: 0 0 381px; } .cz-mega__card--vat { flex: 0 0 422px; } .cz-mega__grid { flex: 1 1 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; min-width: 0; } .cz-mega__card--tile { gap: 9px; } /* Above the photo strip, which is a later sibling and would otherwise paint over them — the same trap `.cz-card__badge` pays for. */ .cz-mega__title, .cz-mega__links { position: relative; } .cz-mega__title { font-size: 18px; font-weight: 500; color: var(--cz-white); } .cz-mega__links { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .cz-mega__card--vat .cz-mega__links { grid-template-columns: auto auto; justify-content: start; column-gap: 14px; } .cz-mega__links a { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 500; color: var(--cz-white); } .cz-mega__links a:hover { color: var(--cz-mint); } .cz-mega__chev { display: flex; align-items: center; justify-content: center; width: 20px; flex: none; } .cz-mega__chev svg { transform: rotate(-90deg); } .cz-mega__photo { position: absolute; left: 0; bottom: 0; width: 100%; height: 102px; object-fit: cover; border-radius: 0 0 12px 12px; } .cz-nav__toggle { display: none; flex: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; } .cz-nav__bars, .cz-nav__bars::before, .cz-nav__bars::after { display: block; width: 22px; height: 2px; margin-inline: auto; background: var(--cz-white); transition: transform .2s ease, opacity .2s ease; } .cz-nav__bars::before, .cz-nav__bars::after { content: ''; } .cz-nav__bars::before { transform: translateY(-7px); } .cz-nav__bars::after { transform: translateY(5px); } .cz-nav.is-open .cz-nav__bars { background: transparent; } .cz-nav.is-open .cz-nav__bars::before { transform: rotate(45deg); } .cz-nav.is-open .cz-nav__bars::after { transform: rotate(-45deg) translateY(-1px); } .cz-no-scroll { overflow: hidden; } /* Between the design width and the drawer breakpoint the bar gets tight. */ @media (max-width: 1500px) { .cz-nav__inner, .cz-nav__menu, .cz-nav__list { gap: 20px; } } @media (max-width: 1280px) { .cz-nav__list { gap: 14px; } .cz-nav__list a { font-size: 15px; } .cz-nav__cta { font-size: 14px; padding: 12px 14px; } } @media (max-width: 1100px) { .cz-nav__toggle { display: block; } /* Same markup, no longer a panel: in the drawer the mega menu is an indented list under Services, exactly as `.sub-menu` below it. It is always open — the drawer scrolls — so nothing here needs JS or a second set of links. */ .cz-mega { position: static; padding: 12px 0 0 12px; background: none; backdrop-filter: none; border-radius: 0; opacity: 1; visibility: visible; transform: none; transition: none; } .cz-mega__inner { flex-direction: column; height: auto; gap: 18px; } .cz-mega__inner > * { opacity: 1; transform: none; transition: none; } .cz-mega__card, .cz-mega__card--ct, .cz-mega__card--vat { flex: none; gap: 10px; padding: 0; background: none; border: 0; border-radius: 0; } .cz-mega__grid { display: flex; flex-direction: column; gap: 18px; } .cz-mega__photo { display: none; } .cz-mega__title { font-size: 14px; font-weight: 600; } .cz-mega__links, .cz-mega__card--vat .cz-mega__links { grid-template-columns: 1fr; gap: 12px; padding-left: 2px; } .cz-mega__links a { font-size: 14px; color: rgba(255,255,255,.8); } .cz-nav__menu { position: fixed; inset: 0 0 0 auto; width: min(304px, 85vw); flex-direction: column; align-items: flex-start; gap: 24px; padding: 96px 24px 32px; background: var(--cz-green-900); transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; } .cz-nav.is-open .cz-nav__menu { transform: none; } .cz-nav__list { flex-direction: column; align-items: flex-start; gap: 20px; } .cz-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; padding: 8px 0 0 12px; background: none; } } .cz-footer { position: relative; background: #102525; color: var(--cz-white); overflow: hidden; } .cz-footer__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; mix-blend-mode: overlay; } .cz-footer__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 64px; max-width: var(--cz-container); margin-inline: auto; padding: 40px var(--cz-gutter); } .cz-footer__main { display: flex; gap: 80px; align-items: flex-start; } .cz-footer__brand { display: flex; flex-direction: column; gap: 24px; width: 400px; flex: none; } .cz-footer__logo { display: grid; gap: 7px; } .cz-footer__logo svg { height: auto; } .cz-footer__logo svg:first-of-type { width: 169px; } .cz-footer__logo svg:last-of-type { width: 149px; } .cz-footer__blurb { font-size: var(--cz-size-small); color: #e8f3f1; } .cz-footer__columns { display: flex; gap: 48px; flex: 1; } .cz-footer__col { display: flex; flex-direction: column; gap: 16px; flex: 1; } .cz-footer__heading { font-size: var(--cz-size-small); font-weight: 600; } .cz-footer__links { display: grid; gap: 16px; } .cz-footer__col li, .cz-footer__col a { font-size: 13px; color: #e8f3f1; } .cz-footer__col a:hover { color: var(--cz-mint); } .cz-footer__legal { display: grid; gap: 16px; } .cz-footer__disclaimer { font-size: 11px; color: #1cb095; } .cz-footer__copy { font-size: 12px; color: #e8f3f1; } @media (max-width: 1100px) { .cz-footer__main { flex-direction: column; gap: 48px; } .cz-footer__brand { width: 100%; } .cz-footer__columns { flex-wrap: wrap; gap: 32px; } .cz-footer__col { flex: 1 1 220px; } } /* ========================================================================= SECTIONS — placement and backgrounds only ========================================================================= */ /* --- hero ---------------------------------------------------------------- */ .cz-hero { position: relative; display: flex; align-items: center; min-height: 834px; padding: 180px var(--cz-gutter) 100px; background: var(--cz-green-900); overflow: hidden; color: var(--cz-white); } .cz-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The still sits under the video: it covers the first frames and is what is left when the video is suppressed. */ .cz-hero__video { border: 0; } @media (prefers-reduced-motion: reduce) { .cz-hero__video { display: none; } } /* A mobile hero plate replaces the video at phone width rather than sitting behind it — the plate is the point, and it spares a visitor on data the download. */ @media (max-width: 768px) { .cz-hero--mobile-plate .cz-hero__video { display: none; } } .cz-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(79.44deg, rgba(6,20,22,.8) 32.9%, rgba(6,20,22,0) 71%); } .cz-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; max-width: 650px; } .cz-hero__title { font-size: 56px; font-weight: 500; line-height: 64px; } /* Purple badge — the one element that is deliberately not surface-driven: it only ever sits on the dark hero. */ .cz-hero__badge { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #bc9aff; border-radius: 12px; font-size: var(--cz-body); font-weight: 600; color: #ceb5ff; } .cz-hero__badge-icon { display: flex; } .cz-hero__badge-icon svg { width: 20.74px; height: 20.74px; } .cz-hero__text { font-size: var(--cz-size-lede); font-weight: 500; color: var(--cz-pale); } /* Corporate Tax Filing's hero carries a mint subtitle instead of body copy. */ .cz-hero__tagline { font-size: 32px; font-weight: 500; line-height: 1.25; color: var(--cz-mint); } .cz-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; } /* --- stats bar ----------------------------------------------------------- */ .cz-stats { background: var(--cz-white); border-bottom: 1px solid #dfe2e6; } .cz-stats__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--cz-container); margin-inline: auto; padding: 32px var(--cz-gutter); } /* --- what we do ---------------------------------------------------------- */ .cz-wwd__head { max-width: 520px; } /* Four cards fill the row at any width: the rail is the query container, so the card can size itself against the visible strip rather than the max-content track. */ .cz-wwd .cz-rail { container-type: inline-size; } .cz-wwd .cz-rail__item .cz-card { width: calc((100cqi - 72px) / 4); height: 469px; } /* 3 gaps of 24px */ /* The picker exists only below 768px; on desktop the rail rotates instead, and a focusable radio with nothing to show would just be a dead tab stop. */ .cz-wwd__radio, .cz-wwd__pills { display: none; } /* --- how it works -------------------------------------------------------- */ .cz-steps { --cz-section-pad: 200px; } .cz-steps__inner { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; } /* 288px is the design height and a FLOOR, not a cap: Corporate Tax Filing's step 1 carries two paragraphs and needs a little more, and a fixed height clipped them. Every other page's steps still come out at exactly 288. */ /* A query container so the panel can size itself against the ROW rather than against the step that is animating — see .cz-step__panel. */ .cz-steps__row { display: flex; gap: 8px; width: 100%; min-height: 288px; container-type: inline-size; } .cz-step { position: relative; display: flex; /* Both widths are explicit lengths so the browser can interpolate them; --cz-step-collapsed is every other tab's width plus its gap. */ flex: 0 0 auto; width: 128px; border-radius: var(--cz-radius-card); overflow: hidden; background: var(--cz-panel); box-shadow: 0 12px 12px rgba(20,27,52,.03); transition: width .4s cubic-bezier(.4, 0, .2, 1); } /* The sibling combinator is used rather than :has() because Chrome fails to re-evaluate :has() when a radio is unchecked implicitly by its group, which left the previously open step stuck open. */ #cz-step-1:checked ~ .cz-step:nth-of-type(1), #cz-step-2:checked ~ .cz-step:nth-of-type(2), #cz-step-3:checked ~ .cz-step:nth-of-type(3), #cz-step-4:checked ~ .cz-step:nth-of-type(4), #cz-step-5:checked ~ .cz-step:nth-of-type(5), #cz-step-6:checked ~ .cz-step:nth-of-type(6) { width: calc(100% - var(--cz-step-collapsed)); } /* The number tab sits over the panel and fades out; `display` cannot animate. */ .cz-step__label { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 32px; cursor: pointer; background: var(--cz-panel); transition: opacity .25s ease; } .cz-step__num { font-size: 40px; font-weight: 500; color: var(--cz-mint); text-align: center; } #cz-step-1:checked ~ .cz-step:nth-of-type(1) .cz-step__label, #cz-step-2:checked ~ .cz-step:nth-of-type(2) .cz-step__label, #cz-step-3:checked ~ .cz-step:nth-of-type(3) .cz-step__label, #cz-step-4:checked ~ .cz-step:nth-of-type(4) .cz-step__label, #cz-step-5:checked ~ .cz-step:nth-of-type(5) .cz-step__label, #cz-step-6:checked ~ .cz-step:nth-of-type(6) .cz-step__label { opacity: 0; pointer-events: none; } #cz-step-1:focus-visible ~ .cz-step:nth-of-type(1), #cz-step-2:focus-visible ~ .cz-step:nth-of-type(2), #cz-step-3:focus-visible ~ .cz-step:nth-of-type(3), #cz-step-4:focus-visible ~ .cz-step:nth-of-type(4), #cz-step-5:focus-visible ~ .cz-step:nth-of-type(5), #cz-step-6:focus-visible ~ .cz-step:nth-of-type(6) { outline: 2px solid var(--cz-mint); outline-offset: 3px; } /* The panel is pinned to the OPEN width at all times (the same cqi trick the rail cards use), so the copy and the photo never re-lay-out while the step animates: a width:100% panel reflowed as the step crossed its own min-width, which made the open jump halfway through and the close snap instantly. Now it is a clean wipe. */ .cz-step__panel { display: flex; flex: 0 0 auto; width: calc(100cqi - var(--cz-step-collapsed)); min-width: 480px; } /* 400px is the floor, not the width: the copy column never shrinks below it (so the paragraph keeps its line breaks while the step animates) but takes whatever the photo leaves once the photo has hit its 501px cap — which is Figma's 562px at the 1776px design width. */ .cz-step__text { display: flex; flex-direction: column; justify-content: space-between; flex: 1 0 400px; min-width: 0; padding: 32px; background: var(--cz-panel); border: 2px solid var(--cz-panel-line); border-right: 0; border-radius: var(--cz-radius-card) 0 0 var(--cz-radius-card); } .cz-step__eyebrow { font-size: 24px; font-weight: 500; color: var(--cz-mint); } .cz-step__copy { display: grid; gap: 8px; } .cz-step__name { font-size: var(--cz-size-h3); font-weight: 500; color: var(--cz-white); } .cz-step__desc { font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-pale); } .cz-step__media { position: relative; flex: 0 1 501px; min-width: 0; /* 501px is the photo's size in the design */ border-radius: 0 var(--cz-radius-card) var(--cz-radius-card) 0; overflow: hidden; } .cz-step__media img { width: 100%; height: 100%; object-fit: cover; } .cz-step__media::after { content: ''; position: absolute; inset: 0; background: rgba(21,44,36,.5); mix-blend-mode: lighten; } /* The arrows only exist below 1024px, where one step is shown at a time. */ .cz-steps__nav { display: none; } @media (max-width: 1280px) { .cz-steps { --cz-section-pad: 120px; } .cz-step__panel { min-width: 380px; } .cz-step__text { flex-basis: 380px; } } /* --- estimate your corporate tax ----------------------------------------- */ .cz-calc { --cz-section-pad: 0; } /* The plate already carries its own white, so it sits flush rather than covering. */ .cz-calc .cz-section__bg { object-position: right center; } .cz-calc__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-height: 619px; justify-content: center; max-width: var(--cz-container); } .cz-calc .cz-heading, .cz-calc .cz-lede { max-width: 677px; } /* --- services (priced cards) --------------------------------------------- */ .cz-services__grid { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); } /* --- testimonials -------------------------------------------------------- The head sits in the container; the rail runs full-bleed so the cards spill past both edges as they do in Figma. The section carries its own bottom padding because the rail is outside `.cz-section__inner`. */ .cz-testimonials { padding-bottom: var(--cz-section-pad); } .cz-testimonials .cz-section__inner { padding-bottom: 0; display: grid; gap: 40px; justify-items: center; } .cz-testimonials__head { max-width: 1476px; margin-bottom: 0; justify-items: center; text-align: center; } .cz-testimonials__rating { display: flex; align-items: center; gap: 16px; margin: 0; } .cz-testimonials__google { width: 100px; height: auto; } .cz-testimonials__stars { display: flex; } .cz-testimonials__stars svg { width: 24px; height: 24px; } .cz-testimonials__score { font-size: 32px; font-weight: 600; color: var(--cz-mint); } /* Centred while the cards fit; left-aligned (and carouselled) once they do not. */ .cz-testimonials__rail .cz-rail__track { gap: 30px; margin-inline: auto; } .cz-testimonials__rail .cz-testimonial { width: 424px; height: 100%; } /* --- meet the team ------------------------------------------------------- Head in the container, rail full-bleed. The rail clips overflow, so the item has to be tall enough to hold the hover card (259.4 + its height) plus room for the card's shadow. */ /* The item already reserves the hover card's height below the portrait, so that reserved strip IS most of the section's bottom padding — adding the full 180px on top of it leaves a hole. Item overhang (150px) + the rail's own 20px (room for the card's shadow) + 10px here = the 180px in Figma. */ .cz-team { padding-bottom: 10px; } .cz-team .cz-section__inner { padding-block: 150px 56px; } .cz-team__head { max-width: 677px; margin-inline: auto; margin-bottom: 0; justify-items: center; text-align: center; gap: 24px; } .cz-team__rail { padding-block: 0 20px; } .cz-team__rail .cz-rail__track { gap: 16px; margin-inline: auto; } .cz-team__rail .cz-rail__item { height: 460px; } /* --- faq ----------------------------------------------------------------- */ .cz-faq__grid { display: grid; grid-template-columns: 677px 1fr; gap: 48px; align-items: start; } /* The heading column follows the list while the answers are scrolled. Offset by the fixed nav; the column is short, so it never outgrows the viewport. */ .cz-faq__grid .cz-sechead { margin-bottom: 0; position: sticky; top: 150px; } .cz-faq__list { display: grid; gap: 16px; } /* --- homepage blog row --------------------------------------------------- */ .cz-cards { display: grid; gap: 32px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .cz-blog { --cz-section-pad: 150px; } .cz-blog .cz-sechead { gap: 12px; } .cz-blog .cz-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } /* --- get in touch -------------------------------------------------------- */ .cz-contact { --cz-section-pad: 50px; } .cz-contact__inner { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; } .cz-contact__head { display: grid; gap: 8px; max-width: 677px; } /* --- inner-page hero (About, Services) ----------------------------------- */ /* Same element as the homepage hero; only the frame height and the width of the copy column differ (Figma 1528:12916, 718:1791). Both pages supply their own portrait plate at phone width with the scrim already in it. */ .cz-hero--plate { min-height: 750px; } .cz-hero--plate .cz-hero__content { max-width: 780px; } .cz-hero__body { display: grid; gap: 20px; } /* --- copy column beside a plate (About: Who We Are; Corporate Tax: three rows) The plate's height is set per instance, unitless, so the mobile rule below can build an aspect-ratio from the same number. */ .cz-who__inner { display: flex; align-items: center; gap: 80px; } .cz-who__copy { flex: 1 1 677px; display: grid; gap: 24px; } .cz-who__body { display: grid; gap: 20px; } .cz-who__cta { justify-self: start; } /* The Corporate Tax Filing rows open on a semibold lead line. */ .cz-who__body--lead p:first-child { font-weight: 600; color: var(--cz-ink-heading); } /* The icon-bulleted list that sits between the copy and its closing line. */ .cz-who__list { display: grid; gap: 15px; } .cz-who__listitem { display: flex; align-items: center; gap: 12px; font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-ink-heading); } .cz-who__listicon { flex: none; width: 24px; height: 24px; color: #540919; } .cz-who__listicon svg { width: 100%; height: 100%; } .cz-who__list--check .cz-who__listicon { color: #155e53; } .cz-who__photo { flex: 0 1 719px; height: calc(var(--cz-who-photo-h, 460) * 1px); border-radius: 16px; overflow: hidden; } .cz-who__photo img { width: 100%; height: 100%; object-fit: cover; } /* The plate is on the left in Figma 823:15184; the copy stays first in the DOM so the heading keeps its reading order. */ .cz-who--reverse .cz-who__inner { flex-direction: row-reverse; } /* The FTA row's "plate" is a logo, not a photo: contained, never cropped, and no rounded card behind it. 506px is its width in the design. */ .cz-who__photo--logo { border-radius: 0; display: grid; place-items: center; } .cz-who__photo--logo img { width: auto; max-width: min(506px, 100%); height: auto; max-height: 100%; object-fit: contain; } /* --- photo-backed accordion beside a copy column (Corporate Tax) ---------- Same native
mechanism as the FAQ. Each row's background is one supplied flattened plate (dark panel + photo + fade baked in), so the row draws a single at `cover` and no CSS gradient. The summary grows from 72px to the plate's own 170px when open, as it does in the design. */ .cz-acclist__inner { display: flex; align-items: center; gap: 80px; } /* The copy column is the fixed one and the list takes the remainder (Figma has the rows at 587px on the light section and 719px on the dark one — both are just 1476 - 80 - 677 at their own width). Letting the copy grow too split the free space evenly and collapsed the rows to 294px. */ /* The copy follows the rows while they are scrolled, like the FAQ heading. align-self: start is what lets it move: a centred flex item has no room to. */ .cz-acclist__copy { flex: 0 1 677px; display: grid; gap: 24px; align-content: center; align-self: start; position: sticky; top: 150px; } .cz-acclist__list { flex: 1 1 0; min-width: 0; display: grid; gap: 20px; } .cz-acclist--reverse .cz-acclist__inner { flex-direction: row-reverse; } /* Figma puts 80px between the heading block and the disclaimer; the grid already contributes 24px of it. */ .cz-acclist__note { margin-top: 56px; } .cz-acclist__note strong { font-weight: 600; } /* With a plate the covers the row and this is only what shows while it loads — it is the plate's own left-edge colour, so no seam. The rows on Corporate Tax Registration's Deadlines and Mistakes sections ship NO plate, and for those this gradient is the whole surface: Figma has a radial wash at the right edge over the flat base, which reads as a single horizontal ramp. */ .cz-acc { border-radius: var(--cz-radius-card); overflow: hidden; background: linear-gradient(90deg, #011d19 46%, #153f38 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); } .cz-acc--alert { background: linear-gradient(90deg, #540919 46%, #8a395c 100%); } .cz-acc__q { position: relative; display: flex; align-items: center; gap: 8px; height: 72px; padding: 0 24px; color: var(--cz-white); font-size: 18px; font-weight: 500; cursor: pointer; list-style: none; transition: height .35s ease; } .cz-acc__q::-webkit-details-marker { display: none; } .cz-acc[open] .cz-acc__q { height: 170px; } .cz-acc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* The plate is absolutely positioned and comes first, so the label and the chevron need their own layer or the image paints over them — the same trap as .cz-card__badge. `position: relative` is enough; no z-index needed. */ .cz-acc__title, .cz-acc__icon { position: relative; } .cz-acc__icon { display: grid; place-items: center; width: 20px; height: 20px; flex: none; transition: transform .2s ease; } .cz-acc[open] .cz-acc__icon { transform: rotate(180deg); } /* The panel carries its own white surface, so it names its ink rather than reading --cz-ink — the same deliberate exception as .cz-check. Figma sets the body at 11px; 14px here, matching the FAQ answer, for legibility. */ .cz-acc__a { background: var(--cz-white); padding: 24px; color: var(--cz-ink-body); font-size: var(--cz-size-small); font-weight: 500; line-height: 20px; } .cz-acc__a > * + * { margin-top: 12px; } .cz-acc__a h4 { font-size: var(--cz-size-small); font-weight: 600; color: var(--cz-ink-heading); } .cz-acc__a h4 + p { margin-top: 4px; } .cz-acc__a a { color: var(--cz-ink-dark); text-decoration: underline; } .cz-acc::details-content { block-size: 0; overflow: hidden; transition: block-size .35s ease, content-visibility .35s ease allow-discrete; } .cz-acc[open]::details-content { block-size: auto; } /* The global reduced-motion reset uses `*`, which does not reach a pseudo-element. */ @media (prefers-reduced-motion: reduce) { .cz-acc::details-content { transition: none; } } /* --- plate-card stack and document grid (Corporate Tax Registration) ------ Both ledes span the whole content column in the design, not cz-sechead's 677px, and both sit 40px above their list rather than 48. */ .cz-cardrows .cz-sechead, .cz-doclist .cz-sechead { max-width: none; gap: 24px; margin-bottom: 40px; } .cz-cardrows__list { display: grid; gap: 20px; } .cz-doclist__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* --- about: who we serve ------------------------------------------------- */ /* The plate is sized by the section's WIDTH and pinned to the top, not stretched to its height: the section is shorter than the 1085px frame, and `cover` would then scale by height and blow the figure up. Its flat #f5f6f8 edges are the section's own grey, so the rest of the section carries on underneath it. */ .cz-serve .cz-section__bg { height: auto; } .cz-serve__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; } .cz-serve__head { display: grid; gap: 24px; max-width: 810px; } .cz-serve__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; } /* A square icon tile against a translucent label panel, both inside one 12px radius — hence the overflow clip rather than two sets of corner radii. */ .cz-serve__item { display: flex; height: 110px; border-radius: var(--cz-radius-card); overflow: hidden; } .cz-serve__icon { flex: none; aspect-ratio: 1; display: grid; place-items: center; background: var(--cz-panel); color: var(--cz-mint); } /* Every icon file is normalised to the 46.8px box the design draws them in, so one rule sizes all eight. */ .cz-serve__icon svg { width: 46.8px; height: 46.8px; } .cz-serve__label { flex: 1; display: flex; align-items: center; min-width: 0; padding: 10px; background: rgba(255,255,255,.9); backdrop-filter: blur(5px); font-size: 20px; font-weight: 600; color: #1b2444; } /* --- about: our mission -------------------------------------------------- */ /* The section is as tall as its plate so the skyline is not cropped, and scales with the viewport below the 1776px design width rather than cropping there. */ .cz-mission { --cz-section-pad: 50px; min-height: min(761px, 42.85vw); } .cz-mission__inner { display: flex; align-items: center; justify-content: center; gap: 50px; min-height: 100px; } .cz-mission__text { max-width: 560px; } /* --- about: closing CTA banner ------------------------------------------- */ /* The card declares the dark surface, not the section: the section around it stays white, and cz-heading / cz-lede read their ink from the card. */ .cz-cta__card { --cz-ink: var(--cz-white); --cz-ink-soft: #9ccfc9; position: relative; overflow: hidden; padding: 50px; border-radius: var(--cz-radius-card); background: #101010; color: var(--cz-white); } /* The plate covers the whole card — the fade over its left half is in the image. */ .cz-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Corporate Tax Filing's banner has no plate at all: the glow is the whole surface, and the bullet column sits beside the copy. Figma's radial is a rotated ellipse off the card's bottom-right corner, placed unrotated here. */ .cz-cta__card--glow { display: flex; align-items: center; gap: 60px; } .cz-cta__card--glow::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 88% 118%, rgba(132,255,243,.85) 0%, rgba(101,202,192,.55) 20%, rgba(70,149,141,.35) 38%, rgba(70,149,141,0) 100%); } /* The bullet column is wrapped so it can carry a heading above the list (the Corporate Tax Calculator's "Our experts can assist with:"); the wrapper is what the card's row sizes, so the list itself no longer needs a basis. */ .cz-cta__listwrap { position: relative; z-index: 1; flex: 0 1 364px; display: grid; gap: 12px; } .cz-cta__list-title { font-size: 18px; font-weight: 600; color: var(--cz-mint); } .cz-cta__list { position: relative; z-index: 1; display: grid; gap: 10px; padding-left: 24px; list-style: disc; font-weight: 500; color: var(--cz-ink-soft); } .cz-cta__copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 24px; max-width: 677px; } /* Corporate Tax is the only page with a second button; `stretch` matches its height to the primary's, as Figma's `self-stretch` does. */ .cz-cta__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; } /* --- services page: what we do (eight-pill picker) ------------------------ Eight pills, four per row, each sized by the row rather than its text, and one info card at a time. The radios are `screen-reader-text` siblings of both the pill list and the card stack, so `~` can reach either — `:has()` goes stale on an implicit uncheck (see CLAUDE.md). This is the mechanism at every width, so unlike What We Do's picker the radios stay focusable throughout. */ .cz-svc__inner { display: flex; flex-direction: column; align-items: stretch; gap: 56px; } .cz-svc__head { margin-bottom: 0; } .cz-svc__picker { display: flex; flex-direction: column; gap: 56px; } .cz-svc__pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .cz-svc__pill { display: flex; align-items: center; gap: 0; height: 100%; padding: 16px 32px; border: 1px solid var(--cz-green-700); border-radius: var(--cz-radius-pill); font-size: var(--cz-size-lede); font-weight: 600; color: var(--cz-green-700); cursor: pointer; transition: background .2s ease, border-color .2s ease; } .cz-svc__pill:hover { background: rgba(21,44,36,.06); } /* Only the selected pill carries the arrow, as in the design. */ .cz-svc__pill-icon { display: none; width: 24px; height: 24px; flex: none; } #cz-svc-1:checked ~ .cz-svc__pills [for="cz-svc-1"], #cz-svc-2:checked ~ .cz-svc__pills [for="cz-svc-2"], #cz-svc-3:checked ~ .cz-svc__pills [for="cz-svc-3"], #cz-svc-4:checked ~ .cz-svc__pills [for="cz-svc-4"], #cz-svc-5:checked ~ .cz-svc__pills [for="cz-svc-5"], #cz-svc-6:checked ~ .cz-svc__pills [for="cz-svc-6"], #cz-svc-7:checked ~ .cz-svc__pills [for="cz-svc-7"], #cz-svc-8:checked ~ .cz-svc__pills [for="cz-svc-8"] { background: var(--cz-mint); border-color: var(--cz-mint); } #cz-svc-1:checked ~ .cz-svc__pills [for="cz-svc-1"] .cz-svc__pill-icon, #cz-svc-2:checked ~ .cz-svc__pills [for="cz-svc-2"] .cz-svc__pill-icon, #cz-svc-3:checked ~ .cz-svc__pills [for="cz-svc-3"] .cz-svc__pill-icon, #cz-svc-4:checked ~ .cz-svc__pills [for="cz-svc-4"] .cz-svc__pill-icon, #cz-svc-5:checked ~ .cz-svc__pills [for="cz-svc-5"] .cz-svc__pill-icon, #cz-svc-6:checked ~ .cz-svc__pills [for="cz-svc-6"] .cz-svc__pill-icon, #cz-svc-7:checked ~ .cz-svc__pills [for="cz-svc-7"] .cz-svc__pill-icon, #cz-svc-8:checked ~ .cz-svc__pills [for="cz-svc-8"] .cz-svc__pill-icon { display: flex; align-items: center; justify-content: center; } /* The radio is clipped, so its focus ring has to be drawn on the pill. */ #cz-svc-1:focus-visible ~ .cz-svc__pills [for="cz-svc-1"], #cz-svc-2:focus-visible ~ .cz-svc__pills [for="cz-svc-2"], #cz-svc-3:focus-visible ~ .cz-svc__pills [for="cz-svc-3"], #cz-svc-4:focus-visible ~ .cz-svc__pills [for="cz-svc-4"], #cz-svc-5:focus-visible ~ .cz-svc__pills [for="cz-svc-5"], #cz-svc-6:focus-visible ~ .cz-svc__pills [for="cz-svc-6"], #cz-svc-7:focus-visible ~ .cz-svc__pills [for="cz-svc-7"], #cz-svc-8:focus-visible ~ .cz-svc__pills [for="cz-svc-8"] { outline: 2px solid var(--cz-green-700); outline-offset: 2px; } /* Every card sits in the same grid cell and the selected one is faded up, so a change is a crossfade rather than a swap and the stack is as tall as the longest card — no jump when the scope lists differ in length. `display` cannot animate, hence visibility, which also keeps a hidden card out of the tab order. */ .cz-svc__cards { display: grid; } .cz-svc__cards > .cz-info { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; } #cz-svc-1:checked ~ .cz-svc__cards > .cz-info:nth-child(1), #cz-svc-2:checked ~ .cz-svc__cards > .cz-info:nth-child(2), #cz-svc-3:checked ~ .cz-svc__cards > .cz-info:nth-child(3), #cz-svc-4:checked ~ .cz-svc__cards > .cz-info:nth-child(4), #cz-svc-5:checked ~ .cz-svc__cards > .cz-info:nth-child(5), #cz-svc-6:checked ~ .cz-svc__cards > .cz-info:nth-child(6), #cz-svc-7:checked ~ .cz-svc__cards > .cz-info:nth-child(7), #cz-svc-8:checked ~ .cz-svc__cards > .cz-info:nth-child(8) { opacity: 1; visibility: visible; } /* --- services page: why work with CZTA ------------------------------------ The card declares the dark surface, not the section, exactly as the closing CTA banner does. The glow is a separate radial layer in the design: its Figma transform is a rotated ellipse roughly 74% of the plate on both axes, which a CSS radial cannot rotate, so it is placed unrotated. */ .cz-why__card { --cz-ink: var(--cz-white); --cz-ink-soft: #9ccfc9; position: relative; overflow: hidden; display: grid; gap: 30px; padding: 80px; border-radius: var(--cz-radius); background: radial-gradient(74% 74% at 55% 72%, rgba(70,149,141,1) 0%, rgba(70,149,141,0) 100%), #011d19; color: var(--cz-white); } /* The card is a grid with a 30px gap, so the header block contributes only its own 24px between heading and lede. */ .cz-why__head { max-width: 677px; gap: 24px; margin-bottom: 0; } .cz-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* Business Advisory and Compliance draw four wider cards, two per row. */ .cz-why__grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1280px) { .cz-services__grid, .cz-blog .cz-cards { grid-template-columns: repeat(2, 1fr); } .cz-card__name { font-size: 26px; } } /* --- corporate tax filing: related services ------------------------------ Four cz-cards fill the content column exactly, so this is a grid rather than a cz-rail; the card's 445px design height is what keeps the photos aligned when the copy runs to different lengths. */ .cz-cardgrid__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .cz-cardgrid__grid .cz-card { height: 445px; } /* --- blogs index --------------------------------------------------------- The Figma frame's own hero is short (358px) and carries the search form beside the title, so it takes the hero element with its own modifier rather than section-inner-hero, which has neither shape. */ .cz-hero--blog { min-height: 0; padding-block: 180px 100px; } .cz-blogs__hero-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; max-width: none; } .cz-blogs__search { display: flex; align-items: stretch; gap: 8px; flex: 0 1 648px; } .cz-blogs__search input { flex: 1 1 auto; min-width: 0; padding: 16px 32px; border: 0; border-radius: var(--cz-radius-pill); background: var(--cz-white); color: var(--cz-green-700); } .cz-blogs__search .cz-btn { padding-inline: 32px; } /* The featured pair: a photo card and the mint-glow "next" card beside it. */ .cz-featured__grid { display: flex; align-items: stretch; gap: 16px; } .cz-featured__card { position: relative; overflow: hidden; display: flex; align-items: flex-end; flex: 1 1 auto; min-width: 0; min-height: 425px; padding: 50px; border-radius: var(--cz-radius-card); background: #0f211f; } .cz-featured__card--next { flex: 0 0 423px; background: radial-gradient(60% 55% at 97% 96%, rgba(0,216,176,1) 0%, rgba(0,216,176,0) 100%), #0f211f; } .cz-featured__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The scrim is bottom-up: the copy sits in the card's foot, not across it. */ .cz-featured__card:not(.cz-featured__card--next)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,20,22,.42) 19%, rgba(6,20,22,0) 55%); } .cz-featured__copy { position: relative; z-index: 1; display: grid; gap: 5px; } .cz-featured__label { font-size: 18px; font-weight: 500; line-height: 20px; letter-spacing: 1.8px; color: var(--cz-white); } .cz-featured__title { font-size: var(--cz-size-h3); font-weight: 600; color: var(--cz-white); } .cz-featured__date { font-size: var(--cz-size-small); font-weight: 500; line-height: 20px; color: #a6b0c0; } .cz-blogs__grid { display: flex; align-items: flex-start; gap: 50px; } .cz-blogs__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 50px; } .cz-blogs__head { display: grid; gap: 30px; } .cz-blogs__years { display: flex; flex-wrap: wrap; gap: 10px; } .cz-blogs__year > a, .cz-blogs__year { display: inline-flex; align-items: center; justify-content: center; padding: 16px 24px; border-radius: 37px; background: var(--cz-white); font-size: var(--cz-size-lede); font-weight: 600; line-height: 20px; color: #8f929c; } .cz-blogs__year { padding: 0; background: none; } .cz-blogs__years .current > a, .cz-blogs__year > a:hover { background: var(--cz-mint); color: var(--cz-green-700); } .cz-blogs__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* The index card is the post card with the excerpt and author dropped. */ .cz-postcard--compact .cz-postcard__media { height: 200px; } .cz-postcard--compact .cz-postcard__title { font-size: var(--cz-size-lede); font-weight: 600; } .cz-postcard--compact .cz-postcard__meta { font-size: 12px; } .cz-blogs__side { flex: 0 0 339px; display: grid; gap: 30px; } .cz-blogs__panel { padding: 31px 22px; border-radius: var(--cz-radius-card); background: var(--cz-white); } .cz-blogs__panel h2 { font-size: 24px; font-weight: 500; color: var(--cz-ink-heading); margin-bottom: 20px; } .cz-blogs__cats li + li { border-top: 1px solid #e7ebee; } .cz-blogs__cats a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; } .cz-blogs__arrow { display: flex; color: var(--cz-mint); } .cz-blogs__arrow svg { width: 13px; height: 13px; } .cz-blogs__tags { display: flex; flex-wrap: wrap; gap: 8px; } .cz-blogs__tags a { display: inline-flex; align-items: center; height: 42px; padding-inline: 20px; border-radius: 40px; background: var(--cz-surface-grey); font-weight: 500; color: var(--cz-ink-heading); } /* --- corporate tax calculator -------------------------------------------- Two cards side by side: the form the visitor fills and the panel the result lands in. The panel's photo, and its fade into the panel's own #061718, are one supplied 567x687 plate, so nothing here composites them. */ .cz-taxcalc { background: #051210; padding-block: 64px 120px; } .cz-taxcalc .cz-section__inner { display: grid; gap: 64px; justify-items: center; } .cz-taxcalc__head { display: grid; justify-items: center; gap: 20px; max-width: 520px; text-align: center; } .cz-taxcalc__head .cz-lede { color: #e8f3f1; } .cz-taxcalc__grid { display: flex; align-items: stretch; gap: 64px; width: 100%; justify-content: center; } .cz-taxcalc__form { display: grid; align-content: start; gap: 32px; flex: 0 1 717px; min-width: 0; padding: 40px; border: 1px solid var(--cz-green-700); border-radius: var(--cz-radius-card); background: #1c3c3c; } .cz-taxcalc__intro { font-size: var(--cz-size-small); font-weight: 500; color: #abd2ce; } /* The three tabs are a progress indicator, not controls: Next and Back move between the steps, so there is nothing here to click and nothing to disable. */ .cz-taxcalc__tabs { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; } .cz-taxcalc__tab { flex: 1 1 0; padding-bottom: 12px; border-bottom: 1px solid #376862; font-size: var(--cz-size-small); font-weight: 500; color: #abd2ce; transition: color .35s ease, border-color .35s ease; } .cz-taxcalc__tab.is-active { border-bottom-color: var(--cz-mint); color: var(--cz-white); } .cz-taxcalc__notice { padding: 12px 16px; border-radius: 8px; background: rgba(196, 42, 66, .15); border: 1px solid var(--cz-error); font-size: var(--cz-size-small); font-weight: 500; color: var(--cz-white); } /* A step is a fieldset so the script can disable the one off screen — a hidden required field the browser cannot focus blocks the submit outright. */ .cz-taxcalc__step { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; margin: 0; padding: 0; border: 0; min-width: 0; } .cz-taxcalc__step > * { grid-column: 1 / -1; } .cz-taxcalc__step > .cz-taxcalc__field--half { grid-column: auto; } /* Both steps live in one grid cell once the script is driving, so a change is a 0.35s crossfade rather than a swap: `display` cannot animate, and visibility also keeps the step off screen out of the tab order (its fieldset is disabled too, so it is out of validation). The stack is as tall as the longer step, so the card does not jump. Without JS the wrapper is an ordinary stack of two. */ .cz-taxcalc__stack { display: grid; gap: 32px; } .cz-taxcalc__stack[hidden] { display: none; } .cz-taxcalc__form.is-wizard .cz-taxcalc__stack { gap: 0; } .cz-taxcalc__form.is-wizard .cz-taxcalc__step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; } .cz-taxcalc__form.is-wizard .cz-taxcalc__step.is-active { opacity: 1; visibility: visible; } @keyframes cz-taxcalc-in { from { opacity: 0; } } .cz-taxcalc__thanks, .cz-taxcalc__out { animation: cz-taxcalc-in .35s ease both; } .cz-taxcalc__thanks { display: grid; align-content: center; gap: 16px; min-height: 260px; } .cz-taxcalc__thanks[hidden] { display: none; } .cz-taxcalc__thanks h3 { font-size: var(--cz-size-h3); font-weight: 500; color: var(--cz-white); } .cz-taxcalc__thanks p { font-size: var(--cz-size-lede); font-weight: 500; color: var(--cz-mint); } .cz-taxcalc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .cz-taxcalc__actions[hidden] { display: none; } /* .cz-btn is display: flex, which out-specifies the UA [hidden] rule. */ .cz-taxcalc__actions .cz-btn[hidden] { display: none; } .cz-taxcalc__next, .cz-taxcalc__submit { margin-left: auto; justify-content: center; } .cz-taxcalc__error { font-size: 12px; font-weight: 600; color: var(--cz-error); } /* The submit is held while the lead posts; the design dims the card behind the panel's "Calculating…" beat. */ .cz-taxcalc__form.is-busy { opacity: .6; pointer-events: none; } .cz-taxcalc__field { display: grid; gap: 8px; margin: 0; border: 0; padding: 0; } .cz-taxcalc__field > label, .cz-taxcalc__field > legend { padding: 0; font-size: var(--cz-size-small); font-weight: 600; line-height: 1.4; color: var(--cz-white); } .cz-taxcalc__req { color: var(--cz-error); } .cz-taxcalc__hint { font-size: 12px; font-weight: 500; line-height: 18px; color: #abd2ce; } /* The unit sits inside the field, so the wrapper carries the box and the input is transparent inside it — the same shape the form engine's fields use. */ .cz-taxcalc__input { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 8px; background: var(--cz-white); } .cz-taxcalc__input input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font-size: var(--cz-size-small); font-weight: 500; color: #1c3c3c; } .cz-taxcalc__input input:focus { outline: none; } .cz-taxcalc__input:focus-within { outline: 2px solid var(--cz-mint); outline-offset: 2px; } .cz-taxcalc__unit { font-size: var(--cz-size-small); font-weight: 600; color: #1c3c3c; } .cz-taxcalc__field > input, .cz-taxcalc__field > select { width: 100%; padding: 12px 16px; border: 0; border-radius: 8px; background: var(--cz-white); font-size: var(--cz-size-small); font-weight: 500; color: #1c3c3c; } .cz-taxcalc__field > input::placeholder { color: #8aa5a2; } /* The shared phone control comes with the form engine's own box; match it to the fields beside it rather than giving the calculator a second phone field. */ .cz-taxcalc__field .cz-form__input { padding: 12px 16px; border: 0; border-radius: 8px; font-size: var(--cz-size-small); font-weight: 500; } .cz-taxcalc__field .cz-form__input::placeholder { color: #8aa5a2; } .cz-taxcalc__field .cz-form__cc-btn { height: 100%; color: var(--cz-green-700); } .cz-taxcalc__field > input:focus-visible, .cz-taxcalc__field > select:focus-visible { outline: 2px solid var(--cz-mint); outline-offset: 2px; } .cz-taxcalc__form input[type="date"] { padding: 12px 16px; border: 0; border-bottom: 5px solid var(--cz-mint); border-radius: 8px; background: var(--cz-white); font-size: var(--cz-size-small); font-weight: 500; color: #1c3c3c; } .cz-taxcalc__field--radios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 36px; } .cz-taxcalc__field--radios legend { flex: 1 0 100%; margin-bottom: 8px; } .cz-taxcalc__radio { display: flex; align-items: center; gap: 8px; font-size: var(--cz-size-small); font-weight: 600; color: var(--cz-white); } .cz-taxcalc__radio input { width: 24px; height: 24px; accent-color: var(--cz-mint); } .cz-taxcalc__submit { justify-content: center; } .cz-taxcalc__results { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; flex: 0 1 567px; min-width: 0; border: 2px solid #1e6155; border-radius: var(--cz-radius-card); background: #061718; } /* The plate is the photo above its own fade into #061718, so it is pinned to the top: the panel is shorter than the 687px the plate was drawn at, and a centre crop would show the fade alone. */ .cz-taxcalc__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } .cz-taxcalc__calculating { position: absolute; inset: 0; z-index: 1; display: none; align-items: center; justify-content: center; font-size: var(--cz-size-h3); font-weight: 500; color: var(--cz-white); background: rgba(6, 23, 24, .55); } .cz-taxcalc__results.is-calculating .cz-taxcalc__calculating { display: flex; } .cz-taxcalc__out { position: relative; display: grid; gap: 28px; padding: 40px; /* Reserves the band of photo the frame shows above the figures. */ margin-top: 140px; /* The panel is taller than the 687px plate once the rows are in it, so the plate's own baked fade is cropped off: the block carries its own. */ background: linear-gradient(to bottom, rgba(6, 23, 24, 0), #061718 56px); } .cz-taxcalc__out[hidden] { display: none; } /* The frame draws the figures blurred: the estimate is the reason to call, not the answer. They are real values under the mask — see the checklist. */ .cz-taxcalc__rows dd { filter: blur(5px); user-select: none; } .cz-taxcalc__out h3 { font-size: 24px; font-weight: 500; color: var(--cz-white); } .cz-taxcalc__rows { display: grid; } .cz-taxcalc__rows > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid #376862; font-size: var(--cz-size-small); font-weight: 500; } .cz-taxcalc__rows dt { color: var(--cz-pale); } .cz-taxcalc__rows dd { margin: 0; color: var(--cz-white); } .cz-taxcalc__total { font-size: var(--cz-size-lede) !important; font-weight: 600; } .cz-taxcalc__total dt { color: var(--cz-white) !important; } .cz-taxcalc__total dd { color: var(--cz-mint) !important; } .cz-taxcalc__review { justify-content: center; } .cz-taxcalc__disclaimer { display: grid; gap: 8px; font-size: 12px; font-weight: 500; line-height: 18px; color: #abd2ce; } .cz-taxcalc__disclaimer-head { display: flex; align-items: center; gap: 8px; font-weight: 600; text-transform: uppercase; color: var(--cz-white); } .cz-taxcalc__disclaimer-head svg { width: 15px; height: 15px; } /* --- promotions: offer cards --------------------------------------------- The supplied 469x673 plate is the card and the dark panel sits on its foot, under a strip of photo that is 173/469 of the card's width. At rest only the title shows; `1500:4156` is the hover state, with the paragraphs and the button revealed. The body is collapsed with `height: 0 -> auto` (the root's `interpolate-size: allow-keywords` is what makes that animate) rather than the panel being slid up from a fixed offset — a fixed offset cut the button off at every width below ~1600px, where the card is narrower than the design's 469 and the copy runs to more lines. The panel is absolute and pinned to the card's BOTTOM, so it grows upward over the photo and the card keeps its aspect ratio: an in-flow panel made the grid row grow on hover, which pushed the rest of the page down. */ .cz-promos .cz-section__inner { display: grid; gap: 50px; } .cz-promos__title { text-align: right; } .cz-promos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 34px; align-items: start; } .cz-promo { position: relative; aspect-ratio: 469 / 673; display: flex; flex-direction: column; justify-content: flex-end; } /* The photo carries the card's rounding rather than the card clipping it: a grid item's automatic minimum size — the floor that lets the card grow for the open body — only applies while its own overflow is visible. */ .cz-promo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--cz-radius-card); } /* The panel is pinned to the card's foot and grows UPWARD over the photo, so opening a card never resizes its grid row and never pushes the page down. */ .cz-promo__panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; border: 1px solid rgba(108,231,209,.3); border-radius: var(--cz-radius-card); background: #223230; } .cz-promo__body { height: 0; overflow: hidden; transition: height .35s ease; } .cz-promo:hover .cz-promo__body, .cz-promo:focus-within .cz-promo__body { height: auto; } .cz-promo__title { font-size: 24px; font-weight: 600; color: var(--cz-white); } .cz-promo__lead { color: var(--cz-mint); } /* The gaps live on the body's children so they collapse away with it. */ .cz-promo__text { display: grid; gap: 20px; margin-top: 16px; font-size: var(--cz-size-lede); font-weight: 500; color: #e8f3f1; } .cz-promo__body .cz-btn { margin-top: 24px; } /* The small print under the Promotions CTA button. */ .cz-cta__note { font-size: 12px; line-height: 18px; color: var(--cz-ink-soft); opacity: .7; } /* --- packages: pricing rows ---------------------------------------------- The cards share the row's height (`align-items: stretch`), so the plate headers line up and only the bodies differ in length. The featured card's badge sits above the card, so the row reserves its height rather than letting it overlap the section heading. */ .cz-pricing .cz-section__inner { display: grid; gap: 80px; } .cz-pricing--centre .cz-pricing__head { margin-inline: auto; text-align: center; } .cz-pricing--centre .cz-pricing__head .cz-lede { margin-inline: auto; } .cz-pricing__head { margin-bottom: 0; } .cz-pricing__row { display: flex; align-items: stretch; gap: 80px; } .cz-pricing__cards { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; align-items: stretch; gap: 16px; flex: 1 1 auto; min-width: 0; padding-top: 51px; } /* Only the Bookkeeping row has a badge; without one the reserved strip is dead space, so the rows that have no featured card drop it. */ .cz-pricing__cards:not(:has(.cz-price--featured)) { padding-top: 0; } .cz-pricing--compact .cz-pricing__cards { gap: 10px; } .cz-pricing--compact .cz-price__body { gap: 0; padding: 16px; align-items: center; justify-content: center; } .cz-pricing__aside { display: grid; justify-items: start; align-content: center; gap: 24px; flex: 0 1 434px; } .cz-pricing .cz-title { text-align: center; } /* --- packages: comparison table ------------------------------------------ A 3-tier comparison has no one-column reading, so below the design width the table scrolls inside its own focusable region rather than reflowing. */ .cz-ptable .cz-section__inner { display: grid; gap: 56px; } .cz-ptable__head { margin-bottom: 0; margin-inline: auto; text-align: center; } .cz-ptable__head .cz-lede { margin-inline: auto; } /* A grid item's default `min-width: auto` would let the 900px table push the page wider instead of scrolling inside this box. */ .cz-ptable__scroll { min-width: 0; overflow-x: auto; border-radius: var(--cz-radius-card); } .cz-ptable__table { width: 100%; min-width: 900px; border-collapse: collapse; background: #133030; color: var(--cz-white); font-size: var(--cz-size-lede); font-weight: 500; text-align: center; } .cz-ptable__table thead tr:first-child { background: #001a13; } .cz-ptable__table thead th { height: 223px; padding: 24px 16px; font-size: 24px; font-weight: 500; position: relative; overflow: hidden; } /* The shard is a supplied PNG with its own glow, centred under the tier name and running off the bottom of the cell exactly as the design draws it. */ /* Each render is exported at its own design size (the three shards differ), so it is drawn 1:1 and pushed down until only its top shows, as Figma draws it. */ .cz-ptable__shard { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, var(--cz-shard-y, 62%)); pointer-events: none; } /* The first render sits higher in its own canvas (more transparent margin under it), so it needs less push than the other two to show the same amount. */ .cz-ptable__table thead th:nth-child(2) .cz-ptable__shard { --cz-shard-y: 44%; } .cz-ptable__tier { position: relative; } /* The three tiers are equal columns in the design; without this the longest tier name ("Virtual Finance Manager") widens its own column. */ .cz-ptable__table thead th + th { border-left: 1px solid #2d5757; width: calc((100% - 420px) / 3); } .cz-ptable__corner { width: 420px; font-size: var(--cz-size-h2) !important; text-align: left; padding-left: 24px !important; } .cz-ptable__price th, .cz-ptable__price td { color: var(--cz-mint); font-size: 24px; font-weight: 500; } .cz-ptable__price { border-bottom: 3px solid #2d5757; } .cz-ptable__table tbody th, .cz-ptable__table tbody td { height: 56px; padding: 16px; } .cz-ptable__table tbody th, .cz-ptable__price th { text-align: left; padding-left: 24px; font-weight: 500; } .cz-ptable__table tbody tr + tr { border-top: 1px solid rgba(45,87,87,.6); } .cz-ptable__yes, .cz-ptable__no { display: grid; place-items: center; } .cz-ptable__yes svg, .cz-ptable__no svg { width: 24px; height: 24px; } .cz-ptable__yes { color: var(--cz-mint); } .cz-ptable__no { color: #7c8f8b; } /* --- packages: how to get started ---------------------------------------- The same dark card the Why section draws, with a photo column beside it. One page uses it, so it stays in the template rather than becoming a part. */ .cz-howto { display: flex; align-items: stretch; overflow: hidden; border-radius: var(--cz-radius-card); background: #001f1a; --cz-ink: #fff; --cz-title-fill: linear-gradient(135.72deg, #fff 55%, var(--cz-mint-glow) 152%); } .cz-howto__photo { flex: 0 0 560px; } .cz-howto__photo img { width: 100%; height: 100%; object-fit: cover; } .cz-howto__copy { display: grid; gap: 56px; align-content: center; padding: 50px 100px 50px 80px; } .cz-howto__steps { display: grid; gap: 20px; } .cz-howto .cz-lede { color: #e8f3f1; } /* --- corporate tax filing: disclaimer ------------------------------------- */ .cz-disclaimer__inner { display: grid; gap: 20px; } .cz-disclaimer .cz-lede { max-width: none; } /* ========================================================================= TEMPLATES — archive, single, page, 404 ========================================================================= */ .cz-archive { padding-block: 160px 96px; } .cz-archive__title { font-size: 44px; font-weight: 500; margin-bottom: 48px; } .cz-post { padding-block: 160px 96px; max-width: 900px; } .cz-post__title { font-size: 44px; font-weight: 500; line-height: 1.15; } .cz-post__meta { margin-top: 12px; color: #5c7a72; font-size: var(--cz-size-small); } .cz-post__media { margin-block: 40px; border-radius: var(--cz-radius); overflow: hidden; } .cz-post__body { margin-top: 32px; font-size: 17px; line-height: 1.7; } .cz-post__body > * + * { margin-top: 1.2em; } .cz-post__body h2 { font-size: 28px; font-weight: 600; } .cz-post__body h3 { font-size: 22px; font-weight: 600; } .cz-post__body a { color: var(--cz-mint-dark); text-decoration: underline; } .cz-post__body ul, .cz-post__body ol { padding-left: 1.25em; } .cz-post__body li + li { margin-top: .4em; } .pagination { display: flex; gap: 8px; margin-top: 48px; } .pagination .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding-inline: 12px; border-radius: 999px; background: #eef6f4; } .pagination .current { background: var(--cz-mint); } /* ========================================================================= RESPONSIVE — tablet and phone Two breakpoints only: 1024px (the design's fixed-width columns stop fitting) and 768px (one column, one card per view). The nav has its own at 1100px. Sections that set their own `--cz-section-pad` have to restate it here, since a section-level declaration beats the one on :root. ========================================================================= */ /* Promotions: the hover reveal only fits inside the card while the column is wide enough. Below ~1350px the open panel is taller than `469 / 673` allows and would ride up over the section title, so the card stops being a hover reveal here — not at 1024 — and becomes the open, stacked card the phone layout already uses: a real 300px photo block above an in-flow panel. */ @media (max-width: 1350px) { .cz-promos__grid { align-items: stretch; } .cz-promo { aspect-ratio: auto; } .cz-promo__bg { position: static; height: 300px; border-radius: var(--cz-radius-card) var(--cz-radius-card) 0 0; } .cz-promo__panel { position: static; flex: 1; border-radius: 0 0 var(--cz-radius-card) var(--cz-radius-card); } .cz-promo__body { height: auto; display: flex; flex-direction: column; } .cz-promo__body .cz-btn { margin-top: auto; align-self: start; } } @media (max-width: 1024px) { :root { --cz-size-display: 40px; --cz-section-pad: 72px; } .cz-title { line-height: 1.15; } .cz-hero { min-height: 0; padding: 130px var(--cz-gutter) 72px; } .cz-hero__title { font-size: 44px; line-height: 52px; } /* The stats keep the desktop row — icon beside text, four across — and scale with the viewport instead of reflowing. The clamp floors are what four items need to fit 320px of content; below that the labels take a second line. */ .cz-stats__inner { gap: clamp(6px, 1.5vw, 24px); padding-block: clamp(16px, 3vw, 32px); } .cz-stat { gap: clamp(4px, 1.2vw, 12px); } .cz-stat__icon { width: clamp(20px, 5.6vw, 57.6px); height: clamp(20px, 5.6vw, 57.6px); } .cz-stat__text { min-width: 0; } .cz-stat__value { font-size: clamp(11px, 2.4vw, 24px); } .cz-stat__label { font-size: clamp(9px, 1.4vw, 14px); } /* Two cards per view instead of four. */ .cz-wwd .cz-rail__item .cz-card { width: calc((100cqi - 24px) / 2); height: 100%; } /* The step accordion is horizontal only while there is room for a 128px tab plus a 480px panel. Below that it becomes a carousel: one step at a time, copy beside its photo, moved by the two arrows. Same radio group, so it is still CSS only — the number tabs go rather than becoming a second mechanism. */ .cz-steps { --cz-section-pad: 72px; } /* Every step is stacked in the same grid cell and the current one is faded up: the row is then as tall as the longest step, so a change is a crossfade and not a jump. The arrows take the row above. */ .cz-steps__row { display: grid; grid-template-rows: auto auto; height: auto; gap: 24px; } .cz-steps__nav { grid-area: 1 / 1; } /* Redeclaring the variable on the step itself shadows the inline one on the row, so the open-step rule resolves to the full width without an override. */ .cz-steps__row .cz-step { grid-area: 2 / 1; width: 100%; --cz-step-collapsed: 0px; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; } .cz-step__label { display: none; } #cz-step-1:checked ~ .cz-step:nth-of-type(1), #cz-step-2:checked ~ .cz-step:nth-of-type(2), #cz-step-3:checked ~ .cz-step:nth-of-type(3), #cz-step-4:checked ~ .cz-step:nth-of-type(4), #cz-step-5:checked ~ .cz-step:nth-of-type(5), #cz-step-6:checked ~ .cz-step:nth-of-type(6) { opacity: 1; visibility: visible; } /* Only the current step's pair of arrows is in the DOM flow; each points at a neighbouring radio, and step 1's previous wraps to the last step. */ .cz-steps__nav { display: flex; gap: 8px; } .cz-steps__arrow { display: none; } #cz-step-1:checked ~ .cz-steps__nav [data-step="1"], #cz-step-2:checked ~ .cz-steps__nav [data-step="2"], #cz-step-3:checked ~ .cz-steps__nav [data-step="3"], #cz-step-4:checked ~ .cz-steps__nav [data-step="4"], #cz-step-5:checked ~ .cz-steps__nav [data-step="5"], #cz-step-6:checked ~ .cz-steps__nav [data-step="6"] { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; background: var(--cz-panel); color: var(--cz-mint); border: 2px solid var(--cz-panel-line); border-radius: var(--cz-radius-card); } /* The radio carries the focus ring; it is clipped, so it shows on the arrow. */ #cz-step-1:focus-visible ~ .cz-steps__nav [data-step="1"], #cz-step-2:focus-visible ~ .cz-steps__nav [data-step="2"], #cz-step-3:focus-visible ~ .cz-steps__nav [data-step="3"], #cz-step-4:focus-visible ~ .cz-steps__nav [data-step="4"], #cz-step-5:focus-visible ~ .cz-steps__nav [data-step="5"], #cz-step-6:focus-visible ~ .cz-steps__nav [data-step="6"] { outline: 2px solid var(--cz-mint); outline-offset: 3px; } .cz-step__panel { min-width: 0; } .cz-step__text { flex: 1 1 55%; padding: 20px; overflow: hidden; } .cz-step__eyebrow { font-size: 18px; } /* A long single word ("Corporate") is wider than this column below ~320px, so the heading tracks the viewport down to a floor rather than spilling out. */ .cz-step__name { font-size: clamp(18px, 6.2vw, 24px); overflow-wrap: break-word; } .cz-step__desc { font-size: 14px; } .cz-step__media { flex: 1 1 45%; min-height: 260px; } /* The plate puts the photo on the right of a 1776px frame, so at this width it leaves the background and drops below the copy, cropped to the calculator. `column-reverse` is what moves it: it is the section's first child. The inner's own bottom padding becomes the gap between copy and photo. */ .cz-calc { --cz-section-pad: 72px; display: flex; flex-direction: column-reverse; padding-bottom: var(--cz-section-pad); } .cz-calc .cz-section__bg { position: static; height: auto; aspect-ratio: 3 / 2; } .cz-calc__inner { min-height: 0; } /* Services: four pills per row stop fitting; the info card keeps its two columns but the photo gives way first. */ .cz-svc__inner, .cz-svc__picker { gap: 32px; } .cz-svc__pills { grid-template-columns: repeat(2, 1fr); } .cz-svc__pill { padding: 14px 20px; font-size: var(--cz-size-small); } .cz-info { min-height: 0; } .cz-info__body { padding: 32px; } .cz-info__media { flex: 0 1 40%; } .cz-info__lists { gap: 16px; } .cz-why__card { padding: 40px; } .cz-why__grid { grid-template-columns: repeat(2, 1fr); } .cz-faq__grid { grid-template-columns: 1fr; gap: 32px; } /* One column: the heading sits above the list, so sticking it would cover it. */ .cz-faq__grid .cz-sechead { position: static; } .cz-team .cz-section__inner { padding-block: 72px 56px; } /* No hover on a touch screen, so the bio is simply always up. The rail item already reserves its height. */ .cz-member__card { opacity: 1; top: 259.4px; } .cz-blog { --cz-section-pad: 72px; } .cz-hero--plate { min-height: 0; } /* `flex: 1 1 677px` is a WIDTH basis in the desktop row and becomes a HEIGHT one the moment the inner turns into a column: the copy was locked to 677px tall and its grid rows stretched, opening ~140px gaps between the paragraphs. */ .cz-who__inner, .cz-who--reverse .cz-who__inner { flex-direction: column; align-items: stretch; gap: 40px; } .cz-who__copy { flex: none; } .cz-who__photo { flex: none; height: auto; aspect-ratio: 719 / var(--cz-who-photo-h, 460); } /* A contained logo has nothing to crop, so it keeps its own ratio. */ .cz-who__photo--logo { aspect-ratio: auto; } /* The plate card's image is baked into the right half of one wide asset, so at this width it stops being a background and becomes a cropped strip UNDER the copy — the same column-reverse move the calculator and Our Mission make, and the reason the is the card's first child. */ .cz-plate { display: flex; flex-direction: column-reverse; gap: 24px; } .cz-plate__bg { position: static; height: auto; aspect-ratio: 16 / 9; border-radius: var(--cz-radius-card); } .cz-plate__copy { max-width: none; } .cz-doclist__grid { grid-template-columns: repeat(2, 1fr); } /* Same basis-becomes-height trap on the accordion's two columns. */ .cz-acclist__inner, .cz-acclist--reverse .cz-acclist__inner { flex-direction: column; align-items: stretch; gap: 40px; } .cz-acclist__copy, .cz-acclist__list { flex: none; } /* One column: the copy sits above the rows, so sticking it would cover them. */ .cz-acclist__copy { position: static; } .cz-acclist__note { margin-top: 8px; } /* The label wraps at this width, so the summary is sized by its content rather than pinned to the design's 72px / 170px. */ .cz-acc__q { height: auto; min-height: 72px; padding: 16px 20px; font-size: 16px; } .cz-acc[open] .cz-acc__q { height: auto; min-height: 110px; } /* The plate stops being a background and sits under the copy, as the mock has it. `column-reverse` is what moves it: the is the section's first child. Left-aligned, not centred. */ .cz-mission { min-height: 0; display: flex; flex-direction: column-reverse; } .cz-mission .cz-section__bg { position: static; height: auto; } .cz-mission__inner { flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0; } /* The portrait plate takes over here and carries no fade of its own, so the copy gets a CSS scrim to sit on. */ .cz-cta__card { padding: 32px; } /* Top-down, not left-to-right: the copy now spans the whole card, so a horizontal scrim would bury the plate entirely. This keeps the text over the dark top of the portrait and lets the handshake show below it. */ .cz-cta__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,16,16,.92) 0%, rgba(16,16,16,.8) 45%, rgba(16,16,16,.4) 100%); } /* No plate on the glow card, so the portrait scrim would only mute the glow. */ .cz-cta__card--glow::after { content: none; } /* The basis-becomes-height trap again: both columns have to drop their flex. */ .cz-cta__card--glow { flex-direction: column; align-items: stretch; gap: 32px; } .cz-cta__list, .cz-cta__listwrap { flex: none; } .cz-cardgrid__grid { grid-template-columns: repeat(2, 1fr); } .cz-hero__tagline { font-size: 24px; } /* The blog index goes one column: the sidebar follows the cards and the featured pair stacks. Both columns drop their basis first. */ .cz-blogs__grid { flex-direction: column; } .cz-blogs__side, .cz-blogs__main { flex: none; width: 100%; } .cz-blogs__cards { grid-template-columns: repeat(2, 1fr); } .cz-featured__grid { flex-direction: column; } .cz-featured__card, .cz-featured__card--next { flex: none; min-height: 300px; } .cz-blogs__hero-inner { flex-direction: column; align-items: flex-start; } .cz-blogs__search { flex: none; width: 100%; } /* Both calculator cards drop their fixed basis before the row turns into a column, or the basis is read as a height. */ .cz-taxcalc__grid { flex-direction: column; gap: 32px; } .cz-taxcalc__form, .cz-taxcalc__results { flex: none; } .cz-promos__grid { grid-template-columns: repeat(2, 1fr); } /* Packages: the card rows wrap to two per line and the Year-end label column goes above its cards rather than beside them. */ .cz-pricing__cards { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); } .cz-pricing__row { flex-direction: column; gap: 40px; } .cz-pricing .cz-section__inner { gap: 56px; } .cz-pricing__aside { flex: none; } /* The photo column's fixed basis would become a height once the card turns into a column, so it is dropped here — the same trap Who We Are hit. */ .cz-howto { flex-direction: column; } .cz-howto__photo { flex: none; height: 320px; } .cz-howto__copy { padding: 40px; gap: 32px; } } @media (max-width: 768px) { :root { --cz-size-display: 32px; --cz-size-h2: 26px; --cz-size-h3: 24px; --cz-section-pad: 56px; } .cz-title { line-height: 1.2; } .cz-hero__tagline { font-size: 20px; } /* One card per row, and the 445px design height goes: the copy sets it. */ .cz-cardgrid__grid { grid-template-columns: 1fr; } .cz-cardgrid__grid .cz-card { height: auto; } /* The bar stops being an overlay on the hero and becomes a solid band above it, so the hero's image starts below the logo instead of behind it. The sibling rule matches the one the inner pages use, and wins on padding by coming later at the same specificity. */ .cz-nav { background: #0f211f; backdrop-filter: none; } .cz-nav ~ .cz-main { padding-top: var(--cz-nav-h); } .cz-nav__inner { padding: 18px 10px; } .cz-nav__logo svg:first-of-type { width: 144px; } .cz-nav__logo svg:last-of-type { width: 127px; } .cz-nav__toggle { width: 40px; height: 40px; background: #21403b; border-radius: var(--cz-radius-pill); } /* The menu is a full-width panel that drops below the bar, not the side drawer the tablet width uses: the bar keeps the logo and the close button in place. */ .cz-nav__menu { inset: calc(var(--cz-nav-h) + var(--cz-admin-offset)) 0 auto 0; width: auto; max-height: calc(100dvh - var(--cz-nav-h) - var(--cz-admin-offset)); align-items: stretch; gap: 24px; padding: 20px; background: #21403b; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .cz-nav.is-open .cz-nav__menu { opacity: 1; visibility: visible; transform: none; } .cz-nav__list { align-items: stretch; gap: 24px; } .cz-nav__list a { font-size: 14px; } /* A parent item's children are listed underneath it, so the caret points down. */ .cz-nav__list .menu-item-has-children > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } /* The CTA becomes a card: mint button, caption, photo behind both. */ .cz-nav__promo { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; height: 178px; padding: 8px; border-radius: 30px; background: #092220; } .cz-nav__promo > * { position: relative; z-index: 1; } /* Photo under, gradient over it, content above both. The gradient is a separate layer in the design, not part of the supplied image. */ .cz-nav__promo-bg { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; } .cz-nav__promo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, #092220 32%, rgba(9,34,32,0) 68%); } .cz-nav__promo-text { display: block; max-width: 184px; font-size: 10px; font-weight: 500; color: var(--cz-white); text-align: center; } .cz-nav__cta { width: 100%; justify-content: center; font-size: 12px; } /* Icon above the text rather than beside it. The text no longer shares the line, so four still fit across and the icon can grow back. */ .cz-stat { flex-direction: column; gap: clamp(6px, 1.2vw, 12px); } .cz-stat__icon { width: clamp(32px, 6vw, 57.6px); height: clamp(32px, 6vw, 57.6px); } .cz-stat__text { align-items: center; text-align: center; } .cz-stat__value { font-size: clamp(13px, 2.4vw, 24px); } .cz-plate { padding: 24px; } .cz-doclist__grid { grid-template-columns: 1fr; } .cz-doc { padding: 24px; } /* Portrait hero: the image is given the top two thirds and the copy sits on the bottom of it, so the overlay runs bottom-up rather than left-to-right. */ .cz-hero { min-height: 640px; align-items: flex-end; padding: 24px var(--cz-gutter) 40px; } .cz-hero::after { background: linear-gradient(to top, rgba(6,20,22,.97) 34%, rgba(6,20,22,.75) 50%, rgba(6,20,22,0) 82%); } .cz-hero__content { gap: 24px; max-width: none; } /* An inner page that supplies its own portrait plate has the scrim baked into that image, so the CSS one would darken it twice. A page without one keeps the CSS scrim over the cropped landscape plate. */ .cz-hero--plate { min-height: 655px; } .cz-hero--baked::after { content: none; } /* Without a portrait plate the landscape one is cropped to a phone's ratio, and a centre crop lands on empty background — every one of these plates puts its subject on the right, so the crop follows it. */ .cz-hero--plate:not(.cz-hero--baked) .cz-hero__bg { object-position: 72% center; } .cz-hero__title { font-size: 36px; line-height: 44px; } /* What We Do stops being a carousel: a pill picks one of the six and that one card is shown, landscape — text left, photo right. Native radio group, no JS. The `~` combinator, never `:has()`, which goes stale on an implicit uncheck. */ .cz-wwd__radio { display: block; } /* Each row fills the content width in the mock and the pills inside it are sized by their own text, so the row is justified, not gapped evenly. */ .cz-wwd__pills { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 32px; } .cz-wwd__pill { display: block; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--cz-ink-heading); font-size: 13px; font-weight: 600; line-height: 20px; color: var(--cz-ink-heading); cursor: pointer; transition: background .2s ease, border-color .2s ease; } #cz-wwd-1:checked ~ .cz-wwd__pills [for="cz-wwd-1"], #cz-wwd-2:checked ~ .cz-wwd__pills [for="cz-wwd-2"], #cz-wwd-3:checked ~ .cz-wwd__pills [for="cz-wwd-3"], #cz-wwd-4:checked ~ .cz-wwd__pills [for="cz-wwd-4"], #cz-wwd-5:checked ~ .cz-wwd__pills [for="cz-wwd-5"], #cz-wwd-6:checked ~ .cz-wwd__pills [for="cz-wwd-6"] { background: var(--cz-mint); border-color: var(--cz-mint); } /* The radio is clipped, so its focus ring has to be drawn on the pill. */ #cz-wwd-1:focus-visible ~ .cz-wwd__pills [for="cz-wwd-1"], #cz-wwd-2:focus-visible ~ .cz-wwd__pills [for="cz-wwd-2"], #cz-wwd-3:focus-visible ~ .cz-wwd__pills [for="cz-wwd-3"], #cz-wwd-4:focus-visible ~ .cz-wwd__pills [for="cz-wwd-4"], #cz-wwd-5:focus-visible ~ .cz-wwd__pills [for="cz-wwd-5"], #cz-wwd-6:focus-visible ~ .cz-wwd__pills [for="cz-wwd-6"] { outline: 2px solid var(--cz-green-700); outline-offset: 2px; } .cz-wwd .cz-rail__item { display: none; } #cz-wwd-1:checked ~ .cz-rail .cz-rail__item:nth-child(1), #cz-wwd-2:checked ~ .cz-rail .cz-rail__item:nth-child(2), #cz-wwd-3:checked ~ .cz-rail .cz-rail__item:nth-child(3), #cz-wwd-4:checked ~ .cz-rail .cz-rail__item:nth-child(4), #cz-wwd-5:checked ~ .cz-rail .cz-rail__item:nth-child(5), #cz-wwd-6:checked ~ .cz-rail .cz-rail__item:nth-child(6) { display: block; } /* main.js wires every .cz-rail on the page and still drives this one: autoplay and drag would slide a track that no longer has anything to slide to. The transform is inline, so overriding it takes !important. */ .cz-wwd .cz-rail { touch-action: auto; cursor: auto; padding-block: 0; margin-top: 24px; } .cz-wwd .cz-rail__track { transform: none !important; width: 100%; } .cz-wwd .cz-rail__item .cz-card { width: 100cqi; height: auto; flex-direction: row; position: relative; } .cz-wwd .cz-card__body { padding: 24px; } /* Out of the body's column so it can sit over the photo, as in the mock. */ .cz-wwd .cz-card__badge { position: absolute; top: 16px; right: 16px; } /* A stretched flex item with no height of its own: the photo is pinned to it rather than sized by a percentage that has nothing to resolve against. */ .cz-wwd .cz-card__media { position: relative; width: 30%; min-width: 120px; height: auto; } .cz-wwd .cz-card__media img { position: absolute; inset: 0; } .cz-steps { --cz-section-pad: 56px; } .cz-calc { --cz-section-pad: 56px; } .cz-blog { --cz-section-pad: 56px; } .cz-team .cz-section__inner { padding-block: 56px 56px; } .cz-services__grid, .cz-blog .cz-cards { grid-template-columns: 1fr; } /* The info card stacks — copy, then photo. `flex: 0 1 582px` is a WIDTH basis in the row and becomes a HEIGHT one in the column, so the photo takes an explicit height instead (the same trap as Who We Are, see CLAUDE.md). The two bullet columns have nothing like the width for five words each. */ .cz-info { flex-direction: column; } .cz-info__body { padding: 24px; gap: 16px; } .cz-info__media { flex: none; height: 200px; } .cz-info__lists { flex-direction: column; gap: 10px; } .cz-info__title { font-size: var(--cz-size-h3); } .cz-svc__pills { gap: 6px; } .cz-svc__pill { padding: 10px 14px; font-size: 13px; } .cz-why__card { padding: 24px; border-radius: 16px; } .cz-why__grid { grid-template-columns: 1fr; } .cz-check { padding: 16px; gap: 12px; align-items: flex-start; } .cz-check__icon { width: 36px; height: 36px; } /* Packages takes the same landscape card as What We Do (mock, 2026-09-17): copy left, photo right at 30% of the card, arrow badge over the photo. The photo has no height of its own, so it is pinned to the stretched flex item rather than sized by a percentage with nothing to resolve. */ .cz-services__grid { gap: 24px; } .cz-services .cz-card { flex-direction: row; position: relative; } .cz-services .cz-card__body { padding: 16px; gap: 16px; } /* Smaller badge than the desktop card's 48px: measured off the mock at 32, 10px in from the corner, with the arrow at its own intrinsic 12.5px. */ .cz-services .cz-card__badge { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; } .cz-services .cz-card__arrow { width: 12px; height: 12px; } .cz-services .cz-card__media { position: relative; width: 30%; height: auto; } .cz-services .cz-card__media img { position: absolute; inset: 0; } /* The fixed height is what makes a row of cards line up; one per row does not need it, and the copy has less width to fit in. */ .cz-postcard { height: auto; } /* Full-bleed rail: the card is the viewport minus the gutters. */ .cz-testimonials__rail .cz-testimonial { width: calc(100vw - var(--cz-gutter) * 2); } .cz-testimonial__lead { font-size: 24px; } /* Who We Serve keeps its two columns on a phone (mock, 2026-09-17), so the card is sized by its label instead of the desktop 110px row. The tile stays a full-height strip as on desktop, but it is no longer a square: `aspect-ratio` is dropped for a fixed 30px width, or an eight-word label would give it a 100px-wide block of green. */ .cz-serve__grid { gap: 8px; } .cz-serve__item { height: auto; } .cz-serve__icon { width: 30px; aspect-ratio: auto; } .cz-serve__icon svg { width: 18px; height: 18px; } .cz-serve__label { padding: 10px; font-size: 13px; } .cz-cta__card { padding: 24px; } .cz-archive, .cz-post { padding-block: 120px 64px; } .cz-archive__title, .cz-post__title { font-size: 30px; } .cz-pricing__cards { grid-template-columns: 1fr; } .cz-promos__grid { grid-template-columns: 1fr; } .cz-taxcalc__form, .cz-taxcalc__out { padding: 24px; } .cz-taxcalc__step { grid-template-columns: 1fr; } .cz-taxcalc__step > .cz-taxcalc__field--half { grid-column: 1 / -1; } .cz-blogs__cards { grid-template-columns: 1fr; } .cz-featured__card { padding: 24px; } .cz-howto__copy { padding: 24px; } .cz-ptable__corner { width: auto; font-size: 24px !important; } } /* ========================================================================= STYLE GUIDE (internal page only) ========================================================================= */ .cz-sg__group { padding-block: 48px; border-top: 1px solid var(--cz-rule, rgba(0,0,0,.08)); } .cz-sg__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cz-ink-soft, var(--cz-ink-body)); margin-bottom: 20px; } .cz-sg__row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .cz-sg__grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .cz-sg__swatches { display: flex; gap: 12px; flex-wrap: wrap; } .cz-sg__swatch { width: 120px; } .cz-sg__chip { height: 64px; border-radius: 8px; border: 1px solid rgba(0,0,0,.12); } .cz-sg__name { font-size: 12px; margin-top: 6px; color: var(--cz-ink-soft, var(--cz-ink-body)); }