/* ========================================================================= one x — Digital Performance Audit landing — BASE (tokens + shared components) Loaded only for the page-audit.php template. Section files (1..10) build on this. Breakpoints: 768 (stack) · 425 (phone). Font: Aeonik (theme-wide). ========================================================================= */ :root { --audit-green: #0b4236; /* dark brand green (hero, "who this is for") */ --audit-cream: #f4f2ed; /* section bg / pill */ --audit-gray: #f3f3f3; /* light section bg */ --audit-white: #ffffff; --audit-ink: #12100b; /* body text on light */ --audit-maxw: 1200px; /* content width (Figma) */ --audit-gutter: 100px; /* Figma section L/R padding (R100/L100) */ } .audit-page { margin: 0; font-family: "Aeonik", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--audit-ink); background: var(--audit-white); -webkit-font-smoothing: antialiased; } /* safety: neutralise the theme's .page wrapper offsets if that class ever lands on */ body.audit-page { padding-top: 0; overflow: visible; } .audit-page * { box-sizing: border-box; } .audit-page img { max-width: 100%; height: auto; display: block; } html { scroll-behavior: smooth; } /* centered content column matching the Figma 1200 content @ 120 gutters */ .audit-container { width: 100%; max-width: calc(var(--audit-maxw) + var(--audit-gutter) * 2); margin: 0 auto; padding-left: var(--audit-gutter); padding-right: var(--audit-gutter); } /* vertical rhythm — sections override top/bottom as the spec dictates */ .audit-section { padding-top: 112px; padding-bottom: 112px; } /* pill CTA (cream on dark, green on light) with trailing arrow */ .audit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 20px; line-height: 1.2; border: 0; border-radius: 27px; padding: 14px 28px; text-decoration: none; cursor: pointer; transition: opacity .2s ease, transform .2s ease; } .audit-btn:hover { opacity: .92; transform: translateY(-1px); } .audit-btn--cream { background: var(--audit-cream); color: #000; } .audit-btn--green { background: var(--audit-green); color: #fff; } .audit-btn--sm { font-size: 16px; padding: 8px 18px; } .audit-btn__arrow { display: inline-flex; align-items: center; } .audit-btn__arrow svg { display: block; } /* QA: drop the arrow to the text baseline level — Aeonik's 1000/-200 metrics render the glyph ink below the line-box centre, so a flex-centred arrow reads as sitting too high */ .audit-hero__button-arrow, .audit-receive__cta-arrow, .audit-who__cta-arrow { transform: translateY(2px); } /* section heading helper (accent word support) */ .audit-h2 { font-size: 42px; line-height: 1.15; font-weight: 700; margin: 0; } /* fixed landing nav — visible over the hero (transparent); js adds .is-scrolled past the hero */ .audit-sticky-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: background .3s ease, box-shadow .3s ease, padding .3s ease; } /* keyboard focus. The theme kills it globally (style.css: `button:focus,button:active{outline:none}`), which left the FAQ triggers and the WPForms submit with no visible ring. Re-assert it page-scoped (no Figma focus spec exists — derived): a dark-green outline reads on cream/white sections, the white halo reads on the dark-green ones, so one pair covers every background on this page. :focus-visible only — mouse and touch users see no ring. */ .audit-page a:focus-visible, .audit-page button:focus-visible, .audit-page input:focus-visible, .audit-page select:focus-visible, .audit-page textarea:focus-visible { outline: 2px solid var(--audit-green); outline-offset: 2px; box-shadow: 0 0 0 4px var(--audit-white); border-radius: 4px; } @media (max-width: 768px) { :root { --audit-gutter: 24px; } .audit-section { padding-top: 64px; padding-bottom: 64px; } .audit-h2 { font-size: 30px; } .audit-btn { font-size: 18px; padding: 12px 24px; } } @media (max-width: 425px) { .audit-section { padding-top: 48px; padding-bottom: 48px; } .audit-h2 { font-size: 26px; } } /* ========================================================================= Digital Performance Audit landing — Block 1: Header (hero) Figma section node 135:115. Wrapper: .audit-hero Vertical rhythm (112/64/48) comes from the shared .audit-section utility (also applied on the wrapper element); this file only adds what's specific to the hero: full-bleed background image + tint overlay, centered copy/CTA stack, and the cream pill button's exact sizing. ========================================================================= */ .audit-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 768px; /* Figma section box is 768 fixed; min-height keeps it responsive */ padding-left: 100px; padding-right: 100px; background-color: var(--audit-green); /* base fill under the photo */ background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } /* #0b4236 @ 80% tint over the background photo (base fill + tint per cache) */ .audit-hero__overlay { position: absolute; inset: 0; background: rgba(11, 66, 54, 0.8); z-index: 1; } .audit-hero__content-wrapper { position: relative; z-index: 2; width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 31px; } .audit-hero__copy { width: 100%; max-width: 1160px; /* wide enough for the headline to sit on 2 lines (Figma) */ display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; } .audit-hero__title { margin: 0; font-weight: 700; /* Aeonik-Bold */ font-size: 62px; line-height: 74.4px; letter-spacing: 0; color: #ffffff; } .audit-hero__description { margin: 0 auto; max-width: 730px; /* narrower than the headline, centered, 2 lines (Figma) */ font-weight: 400; /* Aeonik-Regular */ font-size: 24px; line-height: 28.8px; letter-spacing: 0; color: #ffffff; } .audit-hero__button-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } /* .audit-btn (base) already supplies pill shape, cream fill, black text, border-radius 27px, gap 8px and hover motion — override only the padding, which is smaller here (8/18) than the default pill (14/28). */ .audit-hero__button { padding: 8px 18px; } .audit-hero__button-inner { display: flex; align-items: center; justify-content: center; gap: 8px; } .audit-hero__button-text { font-weight: 700; /* Aeonik-Bold */ font-size: 20px; line-height: 24px; letter-spacing: 0; color: #000000; } .audit-hero__button-arrow svg { display: block; width: 16px; height: 12px; } .audit-hero__note { margin: 0; font-weight: 400; /* Aeonik-Regular */ font-size: 12px; line-height: 14.4px; letter-spacing: 0; color: #ffffff; } /* --------------------------------------------------------------------- 768 / 425 — no mobile Figma frame for this block ("derived" rows in cache); values below are sensible assumptions, single column already. --------------------------------------------------------------------- */ @media (max-width: 768px) { .audit-hero { min-height: 600px; /* ASSUMPTION: derived, no mobile frame */ /* Pastel o6j10604 #4 — clear the ~80px fixed nav bar + breathing room (was .audit-section's 64/48) */ padding-top: 112px; padding-left: 24px; padding-right: 24px; } .audit-hero__content-wrapper, .audit-hero__copy { max-width: 100%; } .audit-hero__title { font-size: 40px; /* ASSUMPTION: scaled down from 62px, no mobile frame */ line-height: 1.2; } .audit-hero__description { font-size: 18px; /* ASSUMPTION: scaled down from 24px, no mobile frame */ line-height: 1.4; } .audit-hero__button-wrapper { width: 100%; } } @media (max-width: 425px) { .audit-hero { min-height: 520px; padding-left: 20px; padding-right: 20px; } .audit-hero__title { font-size: 32px; /* ASSUMPTION: further reduced for phone width */ } .audit-hero__description { font-size: 16px; } /* Pastel o6j10604 #8 — button back to auto width on phone (full-width + space-between removed) */ } /* ========================================================================= Block 2 — Sticky Nav (.audit-nav) Spec: .tmp/figma-spec/fragments/landing-block-2.md (node 135:254) Fixed/show-on-scroll mechanics + z-index live on base .audit-sticky-nav (style/audit-sections/0-base.css). This file only styles the nav's own children and the small cream pill CTA (base .audit-btn/.audit-btn--sm already supplies the 27px radius / 8px 18px padding / gap 8px / #f4f2ed background that match this block's "Button" + "Inner" frames, so only the differing type size is overridden here). ========================================================================= */ /* 135:254 — fills: empty ⇒ transparent bar over hero; base .audit-sticky-nav sets fixed/top:0/z-index */ .audit-nav { background: transparent; padding: 20px 0; transition: background .3s ease, box-shadow .3s ease, padding .3s ease; } /* scrolled past the hero → solid brand bar for legibility over light sections (js toggles) */ .audit-nav.is-scrolled { background: var(--audit-green); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); padding: 12px 0; } .audit-nav .audit-nav__inner { display: flex; align-items: center; justify-content: space-between; /* 135:254 primary=SPACE_BETWEEN */ height: 47px; /* 135:254 section box h=47 */ } .audit-nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; } .audit-nav__logo-img { width: 126px; /* 135:255 */ height: 47px; object-fit: contain; } /* CTA pill — dimensions match spec via base .audit-btn/.audit-btn--cream/.audit-btn--sm; only font-size/line-height differ from the base --sm default (16px) */ .audit-nav .audit-nav__cta { font-size: 14px; /* 135:258 */ line-height: 16.8px; white-space: nowrap; } .audit-nav__cta-text { display: inline-block; text-align: center; } .audit-nav__cta-icon { width: 24px; /* I135:259 */ height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .audit-nav__cta-icon svg { display: block; } /* ---- 768: keep single row (logo left / CTA right), gutter shrinks via --audit-gutter ---- */ @media (max-width: 768px) { .audit-nav .audit-nav__inner { height: 40px; } .audit-nav__logo-img { width: 104px; height: 39px; } } /* ---- 425: derived (no mobile frame) — icon-only CTA to protect the row from wrapping ---- */ @media (max-width: 425px) { .audit-nav__logo-img { width: 84px; height: 31px; } .audit-nav .audit-nav__cta { padding: 8px 12px; /* narrower than base --sm 8px 18px once the label is hidden */ } .audit-nav .audit-nav__cta-text { display: none; /* derived: icon-only pill to fit narrow viewports */ } .audit-nav .audit-nav__cta-icon { margin: 0; } } /* ========================================================================= Section 3 — "The Problem" (wrapper: .audit-problem) Source: .tmp/figma-spec/fragments/landing-block-3.md (Figma node 135:149) Desktop values are precise to the 1440 frame; 768/425 are derived stacks (no mobile frame in Figma cache). ========================================================================= */ .audit-problem { background: var(--audit-cream); /* #f4f2ed */ } /* Note: horizontal gutter comes from the shared .audit-container (120px @1440) rather than the spec's literal L/R=100 — see assumption 1 in section-3.php */ .audit-problem__inner { display: flex; align-items: stretch; gap: 72px; position: relative; /* positioning context for .audit-problem__diagram */ } /* ---- Column 1 — media -------------------------------------------------- */ .audit-problem__media { position: relative; /* absolute image fills it → no grey gap when the column stretches */ flex: 0 0 40%; /* proportional so the 2 cols fit down to tablet, then stack */ max-width: 488px; min-height: 500px; border-radius: 12px; background: #e0e0e0; overflow: hidden; } /* Two-class selector to beat base `.audit-page img { height:auto }` (0,1,1). Without the extra specificity the img (a replaced element) keeps its intrinsic-ratio height and greys out the bottom whenever the content column is taller than that height (QA 2026-07-26). Same fix as .audit-who__media .audit-who__media-img. */ .audit-problem__media .audit-problem__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---- Column 2 — content ------------------------------------------------- */ .audit-problem__content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 48px; } .audit-problem__copy { display: flex; flex-direction: column; gap: 24px; } .audit-problem__title { margin: 0; font-family: "Aeonik", sans-serif; font-weight: 400; /* regular — only the accent words "right now" are bold */ font-size: 40px; line-height: 48px; letter-spacing: 0; color: #000000; } /* "right now" — bold + hand-drawn ellipse (135:180) encircling just these two words */ .audit-problem__title-accent { position: relative; display: inline-block; font-weight: 700; white-space: nowrap; } /* ---- Cards -------------------------------------------------------------- */ .audit-problem__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; } .audit-problem__card { display: flex; flex-direction: column; gap: 12px; } .audit-problem__card-top { display: flex; align-items: center; gap: 12px; } .audit-problem__card-icon-wrapper { flex: 0 0 36px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; /* Figma 135:158 icon wrapper has no fill — icon sits directly on the section, no circle. */ background: transparent; } .audit-problem__card-icon { display: block; width: 30px; height: 30px; } .audit-problem__card-title { margin: 0; font-family: "Aeonik", sans-serif; font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0; color: #000000; } .audit-problem__card-description { margin: 0; font-family: "Aeonik", sans-serif; font-weight: 400; font-size: 14px; line-height: 16.8px; letter-spacing: 0; color: #000000; } /* ---- Decorative diagram (135:180) — hand-drawn ellipse over "right now" --- */ .audit-problem__diagram { position: absolute; left: 50%; top: 52%; width: 128%; /* a bit wider than the two words so it encircles them */ height: auto; transform: translate(-50%, -50%); opacity: 1; /* opacity already baked into the exported PNG */ pointer-events: none; } /* ========================================================================= 900 — stack to single column (covers iPad Air/Pro portrait ~820) ========================================================================= */ @media (max-width: 900px) { .audit-problem__inner { flex-direction: column; gap: 40px; } .audit-problem__media { flex: 0 0 auto; width: 100%; max-width: none; height: 380px; min-height: 0; } .audit-problem__content { gap: 32px; } .audit-problem__title { font-size: 30px; line-height: 36px; } } /* ========================================================================= 425 — phone tweaks (derived) ========================================================================= */ @media (max-width: 425px) { .audit-problem__inner { gap: 28px; } .audit-problem__media { height: 260px; } .audit-problem__content { gap: 24px; } .audit-problem__cards { gap: 24px; /* Pastel o6j10604 #9 — was 16px, client asked 24px between the icon bullets */ } .audit-problem__title { font-size: 26px; line-height: 32px; } .audit-problem__card-title { font-size: 18px; line-height: 22px; } } /** * Section 4 — What We Audit * Figma node: 135:260 * Wrapper class: .audit-audit-grid — every selector below is scoped under it. */ .audit-audit-grid { background: var(--audit-cream); padding-top: 64px; /* Figma — 64px top (not the default 112) */ } .audit-audit-grid .audit-container { display: flex; flex-direction: column; gap: 48px; /* space between intro and the cards grid */ } .audit-audit-grid__intro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .audit-audit-grid__title { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: 0; color: #000000; } /* hand-drawn underline (Figma 135:264 "line-1") under the last two words "free audit" */ .audit-audit-grid__underline { position: relative; white-space: nowrap; } .audit-audit-grid__underline::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -0.30em; height: 0.4em; background: url("../img/audit/accent-underline.png") center bottom / 100% 100% no-repeat; pointer-events: none; } .audit-audit-grid__desc { margin: 0; font-size: 20px; line-height: 24px; font-weight: 400; letter-spacing: 0; color: #000000; } .audit-audit-grid__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; } .audit-audit-grid__card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; background: #ffffff; border: 1px solid #000000; border-radius: 12px; text-align: center; box-sizing: border-box; } .audit-audit-grid__card-top { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; } .audit-audit-grid__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--audit-green); } .audit-audit-grid__icon span { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: 0; color: var(--audit-cream); } .audit-audit-grid__card-title { margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: 0; color: #000000; } .audit-audit-grid__card-desc { margin: 0; font-size: 14px; line-height: 16.8px; font-weight: 400; letter-spacing: 0; color: #000000; } /* ---------- Tablet: 2 columns (covers iPad Air/Pro portrait ~820) ---------- */ @media (max-width: 1024px) { .audit-audit-grid .audit-container { gap: 32px; } .audit-audit-grid__title { font-size: 32px; line-height: 38px; } .audit-audit-grid__cards { grid-template-columns: repeat(2, 1fr); gap: 16px; } .audit-audit-grid__accent { display: none; } } /* ---------- Phone: single column (derived — no Figma mobile frame) ---------- */ @media (max-width: 425px) { .audit-audit-grid .audit-container { gap: 24px; } .audit-audit-grid__title { font-size: 26px; line-height: 32px; } .audit-audit-grid__desc { font-size: 18px; line-height: 22px; } .audit-audit-grid__cards { grid-template-columns: 1fr; gap: 16px; } .audit-audit-grid__card { padding: 20px; } } /* ========================================================================= Section 5 — "What you'll receive" (.audit-receive) Figma node 135:402. Desktop values below are precise (1440); 768/425 rules are DERIVED — no mobile frame exists in cache for this block. ========================================================================= */ .audit-receive { position: relative; background-color: var(--audit-gray); /* #f3f3f3 solid, sits under the image fill */ background-repeat: no-repeat; background-position: center; background-size: cover; /* Pastel o6j10604 #1 — client swapped the photo and asked for Cover (was Figma STRETCH) */ } .audit-receive__wrapper { width: 100%; background: rgba(244, 242, 237, 0.75); /* --audit-cream @ 0.75 opacity */ backdrop-filter: blur(40px); /* Figma BACKGROUND_BLUR radius 80 → CSS blur(40px) per MCP conversion */ -webkit-backdrop-filter: blur(40px); border-radius: 12px; padding: 48px; display: flex; flex-direction: column; align-items: center; gap: 48px; } .audit-receive__intro { width: 100%; display: flex; justify-content: center; } .audit-receive__title { margin: 0; font-family: "Aeonik", sans-serif; font-weight: 700; font-size: 40px; line-height: 48px; letter-spacing: 0; color: #000000; text-align: center; } .audit-receive__column { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 48px; } .audit-receive__list { width: 100%; display: flex; gap: 24px; } .audit-receive__item { flex: 1 1 0; border: 1px solid var(--audit-green); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 18px; } .audit-receive__item-top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; } .audit-receive__item-icon-wrapper { width: 36px; height: 36px; flex-shrink: 0; /* Figma 135:412 "Icon Wrapper" has no fill — icon sits directly on the panel, no circle. */ background: transparent; display: flex; align-items: center; justify-content: center; } .audit-receive__item-icon { display: block; width: 36px; height: 36px; } .audit-receive__item-text { margin: 0; font-family: "Aeonik", sans-serif; font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0; color: #000000; text-align: center; } .audit-receive__reminder { margin: 0; width: 100%; font-family: "Aeonik", sans-serif; font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: 0; color: #000000; text-align: center; } /* CTA — reuses shared .audit-btn pill, overridden to the exact Figma pad/color for this block */ .audit-receive .audit-receive__cta.audit-btn, .audit-receive .audit-receive__cta.audit-btn--green { padding: 8px 24px; font-size: 20px; line-height: 24px; background: var(--audit-green); color: #f4f2ed; } .audit-receive__cta-inner { display: inline-flex; align-items: center; gap: 8px; } .audit-receive__cta-text { font-weight: 700; color: #f4f2ed; } .audit-receive__cta-arrow svg { display: block; } /* Cards get too cramped 4-across on tablet portrait (iPad Air 820 / Pro 1024) — switch to the stacked mobile view at 1060px (QA 2026-07-26). */ @media (max-width: 1060px) { .audit-receive__wrapper { padding: 32px; gap: 32px; } .audit-receive__title { font-size: 28px; line-height: 34px; } .audit-receive__list { flex-direction: column; } .audit-receive__item { width: 100%; } .audit-receive__item-text { font-size: 18px; line-height: 22px; } .audit-receive__reminder { font-size: 18px; line-height: 22px; } .audit-receive .audit-receive__cta.audit-btn, .audit-receive .audit-receive__cta.audit-btn--green { padding: 12px 24px; font-size: 18px; } } @media (max-width: 425px) { .audit-receive__wrapper { padding: 20px; gap: 24px; } .audit-receive__title { font-size: 24px; line-height: 30px; } .audit-receive__item { padding: 20px; } } /* ========================================================================= Audit landing — Section 6: Case studies (.audit-cases) Figma node 135:315 — 1440 desktop precise; 768/425 derived (no mobile frame). ========================================================================= */ .audit-cases { background: var(--audit-cream); } /* ---- Intro (heading + divider) ---- */ .audit-cases__intro { max-width: 831px; margin: 0 auto 72px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .audit-cases__copy { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; } .audit-cases__heading { margin: 0; text-align: center; font-family: "Aeonik", sans-serif; font-weight: 700; font-size: 40px; line-height: 48px; letter-spacing: 0; color: #000000; } /* hand-drawn curved line under the heading (Figma 135:356 "Divider") */ .audit-cases__divider { width: 364px; max-width: 80%; height: 38px; margin: 0 auto; background: url("../img/audit/cases-divider.png") center / contain no-repeat; } /* ---- Columns (arrow / cards / arrow) ---- */ .audit-cases__columns { display: flex; align-items: center; gap: 24px; width: 100%; } .audit-cases__arrow { flex: 0 0 68px; width: 68px; height: 68px; padding: 10px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 0; border-radius: 100px; cursor: pointer; /* ASSUMPTION: subtle hover shadow/lift for affordance — not specified in cache (fill is #fff only). */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .audit-cases__arrow:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); transform: translateY(-1px); } .audit-cases__arrow:disabled { opacity: 0.4; cursor: default; box-shadow: none; transform: none; } /* Pastel o6j10604 #2 — JS toggles .is-hidden while slide count <= perPage; visibility (not display) keeps the 68px rails in the flex row so card widths stay per Figma 135:315 */ .audit-cases__arrow.is-hidden { visibility: hidden; } .audit-cases__arrow-icon { display: block; width: 13px; height: 23px; } .audit-cases__slider { flex: 1 1 auto; min-width: 0; overflow: hidden; } /* ---- Card ---- */ .audit-cases__card { display: flex; flex-direction: column; height: 100%; background: #ffffff; border: 1px solid #000000; border-radius: 12px; overflow: hidden; } .audit-cases__image-wrapper { position: relative; flex: 0 0 auto; height: 300px; overflow: hidden; } /* two-class selector beats base `.audit-page img { height:auto }` (0,1,1) so the img fills the fixed-height wrapper instead of falling back to its intrinsic-ratio height */ .audit-cases__image-wrapper .audit-cases__image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1); /* black & white per Figma */ } .audit-cases__card-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: 24px; padding: 48px; } .audit-cases__heading-wrapper { display: flex; flex-direction: column; gap: 12px; } .audit-cases__card-title { margin: 0; font-family: "Aeonik", sans-serif; font-weight: 700; font-size: 32px; line-height: 38.4px; letter-spacing: 0; color: #000000; } .audit-cases__pill-wrapper { display: flex; flex-wrap: wrap; gap: 12px; } .audit-cases__pill { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px; background: rgba(134, 134, 134, 0.15); border-radius: 12px; } .audit-cases__pill-icon { flex: 0 0 16px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; } .audit-cases__pill-icon svg { display: block; width: 14px; height: 12px; } .audit-cases__pill-text { font-family: "Aeonik", sans-serif; font-weight: 700; font-size: 14px; line-height: 16.8px; letter-spacing: 0; color: rgba(210, 0, 0, 0.9); white-space: nowrap; } .audit-cases__description { margin: 0; font-family: "Aeonik", sans-serif; font-weight: 400; font-size: 18px; line-height: 21.6px; letter-spacing: 0; color: #000000; } /* ========================================================================= 768 — stack to single column; hide bespoke arrows, rely on Splide touch-swipe (per fragment's derived guidance) and the data-splide breakpoint (perPage:1). ========================================================================= */ @media (max-width: 1024px) { .audit-cases__intro { max-width: 100%; margin-bottom: 48px; gap: 8px; /* Pastel o6j10604 #6 — heading→divider gap reduced (was 16px) */ } .audit-cases__heading { font-size: 28px; line-height: 1.2; } .audit-cases__divider { width: 220px; } .audit-cases__columns { flex-direction: column; gap: 24px; } .audit-cases__arrow { display: none; } .audit-cases__slider { width: 100%; } .audit-cases__image-wrapper { height: 220px; } .audit-cases__card-copy { padding: 32px; gap: 20px; } .audit-cases__card-title { font-size: 26px; line-height: 1.2; } } /* ========================================================================= 425 — phone tweaks ========================================================================= */ @media (max-width: 425px) { .audit-cases__heading { font-size: 26px; /* Pastel o6j10604 #5 — client-specified 26px @392 (overrides the generic H-scale) */ } .audit-cases__divider { width: 160px; } .audit-cases__image-wrapper { height: 180px; } .audit-cases__card-copy { padding: 24px; gap: 16px; } .audit-cases__card-title { font-size: 22px; line-height: 1.25; } .audit-cases__description { font-size: 16px; line-height: 1.4; } .audit-cases__pill-text { font-size: 13px; } } /* ========================================================================= Audit landing — Section 7: "Who this is for" (.audit-who) Figma node 135:126. Dark-green two-column layout: portrait image (488x812) + copy/cards/CTA column. Uses --audit-green / --audit-cream from 0-base.css. ========================================================================= */ .audit-who { background: var(--audit-green); padding-left: 100px; padding-right: 100px; } .audit-who__inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; /* counter=CENTER */ gap: 72px; } /* ---------- Column 1: media ---------- */ .audit-who__media { position: relative; /* absolute image fills it → no grey letterbox above/below */ flex: 0 1 488px; width: 488px; height: 812px; border-radius: 12px; overflow: hidden; background: #e0e0e0; } /* higher specificity than base `.audit-page img { height:auto }` so it truly fills */ .audit-who__media .audit-who__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; /* keep the team in frame, trim studio backdrop */ } /* ---------- Column 2: content ---------- */ .audit-who__content { flex: 1 1 680px; display: flex; flex-direction: column; gap: 48px; } .audit-who__copy { display: flex; flex-direction: column; gap: 24px; } .audit-who__copy p { margin: 0; font-size: 40px; line-height: 48px; font-weight: 400; color: var(--audit-cream); } .audit-who__cards { display: flex; flex-direction: column; gap: 24px; } .audit-who__card { display: flex; flex-direction: column; gap: 18px; width: 100%; padding: 24px; border-radius: 12px; box-sizing: border-box; } .audit-who__card--positive { background: var(--audit-cream); } .audit-who__card--negative { background: none; border: 1px solid var(--audit-cream); } .audit-who__card-top { display: flex; align-items: center; gap: 24px; } .audit-who__icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 100px; display: flex; align-items: center; justify-content: center; } .audit-who__icon svg { display: block; } .audit-who__card-title { margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; } .audit-who__card--positive .audit-who__card-title { color: #000000; } .audit-who__card--negative .audit-who__card-title { color: var(--audit-cream); } .audit-who__card-desc { margin: 0; font-size: 18px; line-height: 21.6px; font-weight: 400; } .audit-who__card--positive .audit-who__card-desc { color: #000000; } .audit-who__card--negative .audit-who__card-desc { color: var(--audit-cream); } /* bulleted (pointed) criteria lists — custom • so the theme's global ul reset can't hide it */ .audit-who__list { list-style: none; margin: 0; padding-left: 0; } .audit-who__list li { position: relative; padding-left: 20px; margin-bottom: 6px; } .audit-who__list li::before { content: "\2022"; position: absolute; left: 3px; top: 0; line-height: inherit; } .audit-who__list li:last-child { margin-bottom: 0; } /* ---------- CTA ---------- */ .audit-who__cta.audit-btn { width: 304px; height: 40px; padding: 8px 18px; border-radius: 27px; background: var(--audit-cream); gap: 8px; } .audit-who__cta-label { font-size: 20px; line-height: 24px; font-weight: 700; color: #000000; text-align: center; } .audit-who__cta-arrow svg { display: block; } /* ========================================================================= Responsive — derived (no mobile frame in cache) ========================================================================= */ @media (max-width: 1024px) { .audit-who { padding-left: 24px; padding-right: 24px; } .audit-who__inner { flex-direction: column; align-items: stretch; gap: 40px; } .audit-who__media { flex: 0 0 auto; width: 100%; height: 420px; } .audit-who__content { flex: 1 1 auto; gap: 40px; } .audit-who__copy p { font-size: 28px; line-height: 34px; } .audit-who__cta.audit-btn { width: 100%; } } @media (max-width: 425px) { .audit-who__media { height: 260px; } .audit-who__copy p { font-size: 24px; line-height: 30px; } .audit-who__card { padding: 20px; } .audit-who__card-desc { font-size: 16px; line-height: 19.2px; } } /* down arrow (135:148) — Pastel o6j10604 #3: PNG trimmed of its transparent margins and shown at the Figma 14px box, so the glyph sits at the flex gap's 8px from the label (was 48px canvas @ 24px wide). margin:0 beats the theme-global `a img { margin: 0 15px }` (style.css) that pushed the glyph away. */ .audit-who .audit-who__cta-arrow img { width: 14px; height: auto; display: block; margin: 0; } /* ========================================================================= Section 8 — Submission Form (.audit-form) Figma node: 135:193 (1440 frame, wrapper 135:194, T112 R100 B112 L100). Vertical rhythm reused from .audit-section (112/64/48 — matches spec exactly); horizontal padding + two-column composition are bespoke here since the wrapper's 1240/100 doesn't match .audit-container's 1200/120. 768/425 stacking is derived (no mobile frame in cache). ========================================================================= */ .audit-form { background: var(--audit-cream); padding-left: 100px; padding-right: 100px; } .audit-form__wrapper { position: relative; display: flex; align-items: flex-start; gap: 80px; max-width: 1240px; margin: 0 auto; padding: 36px; background: var(--audit-cream); border-radius: 12px; box-sizing: border-box; } /* Columns share the wrapper's available width proportionally to their Figma-measured widths (500 / 588) rather than a fixed px split, so the ratio holds at any viewport before the 768px stack breakpoint. */ .audit-form__column--copy { flex: 500 1 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 48px; } .audit-form__column--form { flex: 588 1 0; display: flex; flex-direction: column; gap: 24px; } .audit-form__copy { display: flex; flex-direction: column; gap: 24px; } .audit-form__heading { margin: 0; font-family: "Aeonik", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 62px; line-height: 74.4px; letter-spacing: 0; color: #000000; } .audit-form__description { margin: 0; font-family: "Aeonik", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: 0; color: #000000; } /* Hand-drawn arrow (135:200) sits UNDER the copy in the left column, pointing toward the form on the right (Figma 135:196 text, then 135:200 arrow below). */ .audit-form__arrow { width: 122px; max-width: 45%; align-self: flex-end; pointer-events: none; } .audit-form__arrow img { display: block; width: 100%; height: auto; } .audit-form__embed { width: 100%; } .audit-form__reminder { margin: 0; font-family: "Aeonik", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 12px; line-height: 14.4px; letter-spacing: 0; color: #000000; } /* ---------- Best-effort styling for the wired WPForms embed ---------- Exact classnames depend on the live WPForms install (id is wired later); these target the plugin's standard field/label/submit hooks so the form matches the Figma field styling (stroke #0b1628, radius 6, etc.) once the real AUDIT_FORM_ID form is in place. */ .audit-form__embed .wpforms-field-label { font-family: "Aeonik", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 16px; line-height: 19.2px; color: #03060c; margin-bottom: 8px; } .audit-form__embed input[type="text"], .audit-form__embed input[type="email"], .audit-form__embed input[type="tel"], .audit-form__embed input[type="url"], .audit-form__embed textarea, .audit-form__embed select { width: 100%; min-height: 48px; padding: 8px 12px; background: transparent; border: 2px solid #0b1628; border-radius: 6px; font-family: "Aeonik", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #0d0b00; box-sizing: border-box; } .audit-form__embed ::placeholder { color: rgba(13, 11, 0, 0.6); } .audit-form__embed .wpforms-field { margin-bottom: 24px; padding: 0 !important; /* modern markup adds vertical padding that inflates row height */ } .audit-form__embed .wpforms-field-label { margin: 0 0 8px !important; line-height: 1.2 !important; } /* "What prompted this?" is the same 48px height as the inputs in Figma (135:247), not a tall box */ .audit-form__embed .wpforms-field-textarea textarea { min-height: 48px !important; height: 48px !important; overflow: hidden !important; /* no scrollbar */ resize: none !important; /* no drag handle */ } .audit-form__embed .wpforms-submit-container { margin-top: 48px; /* Figma — 48px gap before the submit button */ } /* post-submit confirmation — override WPForms' default green success box */ .audit-form__embed .wpforms-confirmation-container-full, .wpforms-container .audit-form__embed .wpforms-confirmation-container-full { margin: 0 !important; padding: 28px 32px !important; background: #ffffff !important; border: 2px solid var(--audit-green) !important; border-radius: 12px !important; } .audit-form__embed .wpforms-confirmation-container-full, .audit-form__embed .wpforms-confirmation-container-full p { color: var(--audit-ink) !important; font-family: "Aeonik", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.5; } .audit-form__embed .wpforms-confirmation-container-full p:last-child { margin-bottom: 0; } .audit-form__embed .wpforms-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 8px 18px; background: var(--audit-green); color: #ffffff; font-family: "Aeonik", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 20px; line-height: 24px; border: 0; border-radius: 27px; cursor: pointer; transition: opacity .2s ease, transform .2s ease; } .audit-form__embed .wpforms-submit:hover { opacity: .92; transform: translateY(-1px); } /* WPForms "modern markup" themes itself via CSS variables on the container AND uses higher-specificity selectors than the class rules above (default = blue). Theme it via its own variables, plus high-specificity !important overrides to guarantee the result. */ .audit-form__embed .wpforms-container-full { --wpforms-button-background-color: #0b4236; --wpforms-button-background-color-alt: #0a3a2f; --wpforms-button-text-color: #ffffff; --wpforms-button-border-radius: 27px; --wpforms-button-size-font-size: 20px; --wpforms-button-size-padding-h: 24px; --wpforms-field-border-color: #0b1628; --wpforms-field-border-radius: 6px; --wpforms-field-border-size: 2px; --wpforms-field-background-color: transparent; --wpforms-field-text-color: #0d0b00; --wpforms-label-color: #03060c; --wpforms-label-size-font-size: 16px; } .audit-form__embed .wpforms-form button[type="submit"] { width: 100%; padding: 14px 24px !important; background-color: #0b4236 !important; color: #ffffff !important; border: 0 !important; border-radius: 27px !important; font-family: "Aeonik", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; font-weight: 700 !important; font-size: 20px !important; } .audit-form__embed .wpforms-form button[type="submit"]:hover { background-color: #0a3a2f !important; } .audit-form__embed .wpforms-form input[type="text"], .audit-form__embed .wpforms-form input[type="email"], .audit-form__embed .wpforms-form input[type="url"], .audit-form__embed .wpforms-form input[type="tel"], .audit-form__embed .wpforms-form select, .audit-form__embed .wpforms-form textarea { border: 2px solid #0b1628 !important; border-radius: 6px !important; background-color: transparent !important; color: #0d0b00 !important; } /* Keyboard focus for the embedded controls. WPForms' own focus style is a transparent box-shadow (invisible), and its `!important` field rules outbid the page-level ring in 0-base.css — hence the same !important convention as the rules above. The card is cream, so a dark-green ring offset outside the control reads on both the inputs and the green submit; no white halo here (it would vanish on cream). :focus-visible only. */ .audit-form__embed .wpforms-form input[type="text"]:focus-visible, .audit-form__embed .wpforms-form input[type="email"]:focus-visible, .audit-form__embed .wpforms-form input[type="url"]:focus-visible, .audit-form__embed .wpforms-form input[type="tel"]:focus-visible, .audit-form__embed .wpforms-form select:focus-visible, .audit-form__embed .wpforms-form textarea:focus-visible { outline: 2px solid #0b4236 !important; outline-offset: 3px !important; box-shadow: none !important; } /* The submit button gets its ring via its CONTAINER (:focus-within), not the button itself. Every outline declared on the button — even `!important` and the only such rule in the cascade — kept losing to a 3px white ring we could not trace to any author stylesheet (verified: rule parsed, matched, uniquely !important, still not applied). The wrapper div is not targeted by the theme's `button:focus{outline:none}` nor by WPForms' equivalent, so the ring lands reliably; the button is width:100%, so a ring on the wrapper reads as a ring on the button. Radius matches the pill (27px). */ html body .audit-form__embed .wpforms-form .wpforms-submit-container:focus-within { outline: 2px solid #0b4236; outline-offset: 3px; border-radius: 27px; } /* Two-per-row layout matching Figma (135:202): pairs = name+email, website+phone, industry+revenue; full width = business name, marketing spend, textarea. Stacks on mobile. Grid children with display:none (honeypot) are removed, so pairing stays intact. */ .audit-form__embed .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 0; } .audit-form__embed .wpforms-field-container > .wpforms-field { grid-column: 1 / -1; margin-bottom: 24px; } .audit-form__embed .wpforms-field-container > .wpforms-field[data-field-id="1"], .audit-form__embed .wpforms-field-container > .wpforms-field[data-field-id="2"], .audit-form__embed .wpforms-field-container > .wpforms-field[data-field-id="4"], .audit-form__embed .wpforms-field-container > .wpforms-field[data-field-id="5"], .audit-form__embed .wpforms-field-container > .wpforms-field[data-field-id="6"], .audit-form__embed .wpforms-field-container > .wpforms-field[data-field-id="7"] { grid-column: span 1; } @media (max-width: 600px) { .audit-form__embed .wpforms-field-container { grid-template-columns: 1fr; column-gap: 0; } .audit-form__embed .wpforms-field-container > .wpforms-field { grid-column: 1 / -1 !important; } } /* ---------- Tablet: stack copy above form (covers iPad Air/Pro portrait ~820) ---------- */ @media (max-width: 1024px) { .audit-form { padding-left: var(--audit-gutter, 24px); padding-right: var(--audit-gutter, 24px); } .audit-form__wrapper { flex-direction: column; align-items: stretch; gap: 40px; padding: 24px; } .audit-form__column--copy, .audit-form__column--form { flex: 1 1 auto; width: 100%; } .audit-form__arrow { align-self: center; max-width: 90px; transform: rotate(35deg); /* point down toward the stacked form below */ } .audit-form__heading { font-size: 40px; line-height: 1.15; } .audit-form__description { font-size: 18px; line-height: 1.4; } } /* ---------- Phone (derived — no Figma mobile frame) ---------- */ @media (max-width: 425px) { .audit-form__wrapper { padding: 20px; gap: 32px; border-radius: 8px; } .audit-form__heading { font-size: 32px; } .audit-form__description { font-size: 16px; } .audit-form__embed input[type="text"], .audit-form__embed input[type="email"], .audit-form__embed input[type="tel"], .audit-form__embed input[type="url"], .audit-form__embed textarea, .audit-form__embed select { font-size: 15px; } .audit-form__embed .wpforms-submit { font-size: 18px; } } /* ---------- QA 2026-08-17: gap to the FAQs ---------- */ /* Both sections are cream, so their facing .audit-section pads stacked into one 224px empty band. Halve this side (112→56 / 64→32 / 48→24) — the FAQs' matching padding-top lives in 9.css. Later in the cascade than 0-base's mobile .audit-section block, so these win at every breakpoint. */ .audit-form { padding-bottom: 56px; } @media (max-width: 768px) { .audit-form { padding-bottom: 32px; } } @media (max-width: 425px) { .audit-form { padding-bottom: 24px; } } /** * Section 9 — FAQs * Figma node: 135:357 * Wrapper class: .audit-faqs — every selector below is scoped under it. */ .audit-faqs { background: var(--audit-cream); } .audit-faqs__card { display: flex; flex-direction: column; gap: 72px; width: 100%; padding: 48px; background: var(--audit-green); border-radius: 12px; box-sizing: border-box; } .audit-faqs__intro { display: flex; align-items: center; justify-content: flex-start; /* Figma 135:360 — title is left-aligned, not centered */ gap: 48px; } .audit-faqs__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .audit-faqs__title { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: 0; color: var(--audit-cream); text-align: left; } .audit-faqs__columns { display: flex; gap: 64px; width: 100%; } /* Figma frame "Columns" only ever has one child ("Accordion List") in the cache, so this simply stretches to full width — no second column exists. */ .audit-faqs__list { display: flex; flex-direction: column; gap: 0; width: 100%; /* Figma 135:363 — horizontal rules only (top + bottom + row dividers), no side borders */ border-top: 1px solid var(--audit-cream); border-bottom: 1px solid var(--audit-cream); box-sizing: border-box; } .audit-faqs .audit-faq__item { width: 100%; border-bottom: 1px solid var(--audit-cream); } .audit-faqs .audit-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 20px 24px; background: transparent; border: none; margin: 0; font-family: inherit; font-size: 18px; line-height: 27px; font-weight: 700; letter-spacing: 0; color: #ffffff; text-align: left; cursor: pointer; } /* Prevents a doubled-up 2px line where the list's own border and the last row's border-bottom would otherwise overlap. */ .audit-faqs .audit-faq__item:last-child { border-bottom: none; } .audit-faqs .audit-faq__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; transition: transform 0.25s ease; transform: rotate(180deg); /* triangle asset points up → point DOWN when collapsed */ } .audit-faqs .audit-faq__icon img { display: block; width: 18px; height: auto; } .audit-faqs .audit-faq__item.is-open .audit-faq__icon { transform: rotate(0deg); /* point UP when expanded */ } /* Collapsed by default; JS toggles "is-open" on .audit-faq__item. Answer is hidden via max-height so the collapse can animate. */ .audit-faqs .audit-faq__a { max-height: 0; overflow: hidden; padding: 0 24px; transition: max-height 0.3s ease; } .audit-faqs .audit-faq__item.is-open .audit-faq__a { max-height: 500px; } .audit-faqs .audit-faq__a p { margin: 0; padding: 0 0 24px; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; color: #ffffff; } /* ---------- Tablet (derived — no Figma mobile frame) ---------- */ @media (max-width: 768px) { .audit-faqs__card { gap: 40px; padding: 32px; } .audit-faqs__title { font-size: 32px; line-height: 38px; } .audit-faqs__columns { gap: 32px; } .audit-faqs .audit-faq__q { padding: 16px 16px; } } /* ---------- Phone (derived — no Figma mobile frame) ---------- */ @media (max-width: 425px) { .audit-faqs__card { gap: 24px; padding: 24px; border-radius: 8px; } .audit-faqs__title { font-size: 26px; line-height: 32px; } .audit-faqs .audit-faq__q { gap: 16px; padding: 14px 12px; font-size: 16px; line-height: 22px; } .audit-faqs .audit-faq__icon { width: 24px; height: 24px; } .audit-faqs .audit-faq__a { padding: 0 12px; } .audit-faqs .audit-faq__a p { padding-bottom: 16px; font-size: 15px; line-height: 22px; } } /* ---------- QA 2026-08-17: gap from the form ---------- */ /* Pairs with .audit-form padding-bottom in 8.css — facing pads of the two cream sections halved (112→56 / 64→32 / 48→24), total gap 224→112 on desktop. */ .audit-faqs { padding-top: 56px; } @media (max-width: 768px) { .audit-faqs { padding-top: 32px; } } @media (max-width: 425px) { .audit-faqs { padding-top: 24px; } } /* ========================================================================= Section 10 — Footer (.audit-footer) Single-row cream footer: logo + 3 legal links. Desktop values from Figma node 135:395 (1440 frame, T64 R100 B64 L100). 768/425 behaviour is derived (no mobile frame in cache). ========================================================================= */ .audit-footer { background: #f4f2ed; padding: 64px 100px; } .audit-footer__columns { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 64px; } .audit-footer__logo { flex: 0 0 auto; display: inline-flex; align-items: center; width: 201px; height: 75px; } .audit-footer__logo img { display: block; width: 201px; height: 75px; max-width: 100%; object-fit: contain; } .audit-footer__right { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 48px; } .audit-footer__link { font-family: "Aeonik", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 14px; line-height: 16.8px; letter-spacing: 0; color: #000000; text-decoration: none; white-space: nowrap; } .audit-footer__link:hover { text-decoration: underline; } /* ---------- 768: stack logo above links, ease padding toward gutter ---------- */ @media (max-width: 768px) { .audit-footer { padding: 48px var(--audit-gutter, 24px); } .audit-footer__columns { flex-direction: column; align-items: flex-start; gap: 32px; } .audit-footer__right { gap: 32px; } } /* ---------- 425: phone — links stack, logo shrinks slightly ---------- */ @media (max-width: 425px) { .audit-footer { padding: 40px var(--audit-gutter, 24px); } .audit-footer__logo { width: 150px; height: auto; } .audit-footer__logo img { width: 150px; height: auto; } .audit-footer__right { flex-direction: column; align-items: flex-start; gap: 16px; } }