/** * Lawi — Page Builder section styles. * Loaded after main.css. Styles the ACF Flexible Content blocks used across * service/culture/landing pages. Uses the design tokens defined in main.css. */ /* Shared button variant */ .btn--periwinkle { background: var(--c-periwinkle); color: var(--c-periwinkle-ink); } .btn--periwinkle:hover { background: var(--c-periwinkle-2); } /* ============================================================ SERVICE HERO */ .section--svc-hero { padding-top: clamp(6rem, 4rem + 6vw, 8.5rem); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); } .svc-hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; } .svc-hero__grid--solo { grid-template-columns: minmax(0, 46rem); } /* Centered hero variant (e.g. Partners): eyebrow + title centred, no body. */ .section--svc-hero-center .svc-hero__grid { justify-items: center; text-align: center; grid-template-columns: minmax(0, 1fr); } .section--svc-hero-center .svc-hero__text { align-items: center; max-width: 52rem; margin-inline: auto; } .svc-hero__title { font-family: var(--font-display); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--c-ink); margin: 0.25rem 0 0; } .svc-hero__lead { font-size: var(--fs-lead); color: var(--c-muted); line-height: var(--lh-body); margin: 1.25rem 0 1.75rem; max-width: 34ch; } .svc-hero__media { border-radius: var(--radius); overflow: hidden; background: var(--c-cream-2); aspect-ratio: 16 / 10; } .svc-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================== TEXT SPLIT */ .text-split__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; } .text-split__grid--border { border-top: 1px solid rgba(39, 33, 27, 0.16); padding-top: clamp(2rem, 1rem + 2vw, 3rem); } .text-split__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--c-ink); margin: 0; } .text-split__body { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.375rem); line-height: 1.5; color: var(--c-muted); } .text-split__body p { margin: 0 0 1rem; } .text-split__body p:last-child { margin-bottom: 0; } /* ============================================================ AI CARDS BAND */ .section--ai-cards { background: var(--c-accent-2); color: var(--c-on-dark); } .ai-cards__head { text-align: center; max-width: 42rem; margin-inline: auto; } .ai-cards__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--c-cream); margin: 0; } .ai-cards__intro { color: #fbe7e1; font-size: var(--fs-lead); line-height: 1.5; margin: 1.1rem auto 0; max-width: 60rem; } .ai-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: clamp(2rem, 1rem + 2vw, 3rem); } .ai-card { background: var(--c-cream); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .ai-card__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; } .ai-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ai-card__chip { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(255, 255, 255, 0.94); border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 4px; } .ai-card__chip-head { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--c-ink); } .ai-card__chip-head strong { font-weight: 700; } .ai-card__chip-dot { width: 18px; height: 18px; border-radius: 9px; background: var(--c-accent-2); flex: none; } .ai-card__chip-text { font-size: 0.75rem; color: var(--c-muted); line-height: 1.4; } .ai-card__body { padding: 1.25rem 1.375rem 1.5rem; } .ai-card__h { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.01em; color: var(--c-ink); margin: 0 0 0.5rem; } .ai-card__p { font-size: 0.9375rem; line-height: 1.5; color: var(--c-muted); margin: 0; } /* =================================================================== PLANS */ .plans__intro { text-align: center; color: var(--c-muted); max-width: 46rem; margin: 0.75rem auto 0; line-height: var(--lh-body); } .plans-tabs { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2.25rem; } .plans-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 0.55rem 1.375rem; font-family: var(--font-body); font-size: 0.9375rem; color: var(--c-muted); cursor: pointer; } .plans-tab.is-active { color: var(--c-accent-2); border-bottom-color: var(--c-accent-2); } .plans-region { display: none; } .plans-region.is-active { display: block; } .plans-region__note { text-align: center; color: var(--c-muted); font-size: 0.9375rem; margin: 1.25rem auto 0; max-width: 40rem; } .plans-cards { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.25rem; } .plan-card { position: relative; width: 340px; max-width: 100%; background: var(--c-cream); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.75rem 1.625rem; text-align: center; display: flex; flex-direction: column; align-items: center; } .plan-card--featured { border: 2px solid var(--c-accent-2); box-shadow: var(--shadow-sm); } .plan-card__badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); background: var(--c-accent-2); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.875rem; border-radius: var(--radius-pill); white-space: nowrap; } .plan-card__name { font-family: var(--font-display); font-size: 1.625rem; color: var(--c-accent-2); letter-spacing: -0.01em; margin: 0; } .plan-card__prefix { font-size: 0.8125rem; color: var(--c-muted); margin: 0.875rem 0 0; } .plan-card__price { font-family: var(--font-display); font-size: 2.5rem; color: var(--c-accent-2); line-height: 1.1; margin: 0.25rem 0 0; } .plan-card__price span { font-family: var(--font-body); font-size: 0.875rem; color: var(--c-muted); } .plan-card__desc { font-size: 0.875rem; color: var(--c-muted); line-height: 1.55; margin: 0.75rem 0 0; } .plan-card__rule { width: 100%; border: none; border-top: 1px solid rgba(39, 33, 27, 0.16); margin: 1.125rem 0 0; } .plan-card__credits { font-family: var(--font-display); font-size: 2.125rem; color: var(--c-ink); margin: 1.125rem 0 0; } .plan-card__unit { font-size: 0.8125rem; font-weight: 600; color: var(--c-ink); margin: 1rem 0 0; } .plan-card__features { list-style: none; margin: 0.5rem 0 1.5rem; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 0.5rem; } .plan-card__features li { display: flex; align-items: center; gap: 0.625rem; text-align: left; font-size: 0.8125rem; color: var(--c-muted); } .plan-card__dot { width: 18px; height: 18px; border-radius: 9px; background: var(--c-periwinkle); flex: none; } .plan-card__cta { width: 100%; margin-top: auto; } .plans__foot { text-align: center; color: var(--c-muted); font-size: 0.8125rem; margin: 1.75rem auto 0; } /* ================================================================ CTA BAND */ .section--cta-band { position: relative; min-height: clamp(26rem, 20rem + 18vw, 45rem); display: flex; align-items: flex-end; overflow: hidden; } .cta-band__media { position: absolute; inset: 0; } .cta-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .section--cta-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 16, 12, 0.6) 0%, rgba(20, 16, 12, 0) 55%); } .cta-band__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 2rem + 4vw, 5rem); } .cta-band__heading { font-family: var(--font-display); color: var(--c-on-dark); font-size: clamp(2.75rem, 1.4rem + 6vw, 6rem); line-height: 1.02; letter-spacing: -0.01em; margin: 0; max-width: 16ch; } .cta-band__cta { margin-top: 1.5rem; } /* ===================================================================== FAQ */ .faq__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; } .faq__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--c-ink); margin: 0; } .faq__lead { color: var(--c-muted); line-height: var(--lh-body); margin: 1rem 0 0; max-width: 28ch; } .faq__contact { margin-top: 2.5rem; } .faq__contact-label { display: block; font-size: 0.875rem; color: var(--c-ink); } .faq__contact-mail { font-weight: 600; color: var(--c-accent-2); font-size: 0.875rem; } .faq__list { border-top: 1px solid rgba(39, 33, 27, 0.16); } .faq-item { border-bottom: 1px solid rgba(39, 33, 27, 0.16); } .faq-item__q { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 0.25rem; font-weight: 600; font-size: 1rem; color: var(--c-ink); } .faq-item__q::-webkit-details-marker { display: none; } .faq-item__icon { position: relative; width: 14px; height: 14px; flex: none; margin-top: 0.3rem; } .faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; background: var(--c-ink); transition: transform 0.2s var(--ease); } .faq-item__icon::before { top: 6px; left: 0; width: 14px; height: 2px; } .faq-item__icon::after { top: 0; left: 6px; width: 2px; height: 14px; } .faq-item[open] .faq-item__icon::after { transform: scaleY(0); } .faq-item__a { padding: 0 0.25rem 1.375rem; color: var(--c-muted); line-height: var(--lh-body); max-width: 60ch; } .faq-item__a p { margin: 0 0 0.75rem; } .faq-item__a p:last-child { margin: 0; } /* =============================================================== DOC PILLS */ .doc-pills__sub { text-align: center; color: var(--c-muted); margin: 0.75rem auto 0; } .doc-pills__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 0; margin-top: clamp(2rem, 1rem + 2vw, 3rem); } .doc-pills__col { padding: 0 1.375rem; } .doc-pills__col + .doc-pills__col { border-left: 1px solid rgba(39, 33, 27, 0.16); } .doc-pills__col:first-child { padding-left: 0; } .doc-pills__h { font-size: 0.9375rem; font-weight: 700; color: var(--c-ink); letter-spacing: -0.01em; margin: 0 0 1rem; } .doc-pills__tags { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } .doc-pill { background: #f4f3ee; color: var(--c-ink); font-size: 0.78rem; line-height: 1.35; padding: 0.375rem 0.875rem; border-radius: var(--radius-pill); } .doc-pills__actions { display: flex; justify-content: center; margin-top: clamp(2rem, 1rem + 2vw, 3rem); } /* ========================================================= SVC TESTIMONIAL */ .section--svc-testimonial { overflow: hidden; } .svc-testi__track { display: flex; transition: transform 0.5s var(--ease); } .section--svc-testimonial:not([data-carousel]) .svc-testi__track { display: block; } .svc-testi { flex: 0 0 100%; min-width: 100%; } .svc-testi__logo { margin-bottom: 1.5rem; } .svc-testi__logo img { height: 2.25rem; width: auto; } .svc-testi__quote { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 2vw, 2.625rem); line-height: 1.1; color: var(--c-ink); margin: 0; max-width: 24ch; } .svc-testi__cite { margin-top: 1.375rem; font-style: normal; } .svc-testi__author { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--c-ink); } .svc-testi__role { display: block; font-size: 0.875rem; color: var(--c-muted); } .svc-testi__dots { display: flex; gap: 0.5rem; margin-top: 2.5rem; } .svc-testi__dot { width: 140px; max-width: 22vw; height: 3px; border: none; padding: 0; border-radius: 2px; background: rgba(39, 33, 27, 0.16); cursor: pointer; } .svc-testi__dot.is-active { background: var(--c-ink); } /* ================================================================== LOGOS */ .logos-block--center { text-align: center; } .logos-block__label { font-size: 0.875rem; font-weight: 500; color: var(--c-ink); margin: 0 0 1.5rem; } .logos-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); } .logos-row--center { justify-content: center; } .logo-item { display: inline-flex; align-items: center; } .logo-item__img { height: 2.5rem; width: auto; opacity: 0.8; } .logo-item--text { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.01em; color: #8b847c; } /* ================================================================== EMBED */ .embed-block { max-width: 46rem; margin-inline: auto; } .embed-block__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--c-ink); margin: 0 0 1.25rem; } /* ============================================================ FEATURE LIST */ .feature-list__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; } .feature-list__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--c-ink); margin: 0; } .feature-list__accent { color: var(--c-accent-2); } .feature-list__intro { color: var(--c-muted); line-height: var(--lh-body); margin: 1rem 0 0; max-width: 32ch; } .feature-list__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .feature-list__item { display: flex; gap: 0.875rem; align-items: baseline; padding: 0.9rem 1.25rem 0.9rem 0; border-top: 1px solid rgba(39, 33, 27, 0.12); } .feature-list__num { font-family: var(--font-display); font-size: 0.8125rem; color: var(--c-accent-2); flex: none; min-width: 1.5rem; } .feature-list__text { font-size: 0.95rem; color: var(--c-ink); line-height: 1.4; } /* ============================================================== CARDS GRID */ .cards-grid__head { max-width: 46rem; margin: 0 0 clamp(1.75rem, 1rem + 2vw, 2.75rem); } .cards-grid__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--c-ink); margin: 0.25rem 0 0; } .cards-grid__intro { color: var(--c-muted); line-height: var(--lh-body); margin: 0.75rem 0 0; max-width: 54ch; } .cards-grid__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1rem; } .cg-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.5rem 1.375rem; } .cg-card__num { font-family: var(--font-display); font-size: 0.8125rem; color: var(--c-accent-2); } .cg-card__title { font-family: var(--font-display); font-size: 1.25rem; color: var(--c-ink); letter-spacing: -0.01em; margin: 0.5rem 0 0; } .cg-card__text { font-size: 0.9rem; color: var(--c-muted); line-height: 1.55; margin: 0.6rem 0 0; } .cg-card--link { display: block; transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); } .cg-card--link:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); } .cg-card__more { display: inline-block; margin-top: 0.9rem; font-weight: 600; font-size: 0.85rem; color: var(--c-accent-2); } .section--cards-grid-dark { background: var(--c-dark); color: var(--c-on-dark); } .section--cards-grid-dark .cards-grid__title { color: var(--c-on-dark); } .section--cards-grid-dark .cards-grid__intro { color: var(--c-on-dark-muted); } .section--cards-grid-dark .cg-card { background: var(--c-dark-2); border-color: rgba(255, 255, 255, 0.1); } .section--cards-grid-dark .cg-card__title { color: var(--c-on-dark); } .section--cards-grid-dark .cg-card__text { color: var(--c-on-dark-muted); } /* ================================================================= PROCESS */ .process__title { margin-bottom: clamp(2rem, 1rem + 2vw, 3rem); } .process__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1.5rem; } .process-step { border-top: 2px solid var(--c-accent-2); padding-top: 1.25rem; } .process-step__num { font-family: var(--font-display); font-size: 1.75rem; color: var(--c-accent-2); } .process-step__title { font-family: var(--font-display); font-size: 1.125rem; color: var(--c-ink); margin: 0.5rem 0 0; } .process-step__text { font-size: 0.875rem; color: var(--c-muted); line-height: 1.55; margin: 0.5rem 0 0; } .process__note { text-align: center; color: var(--c-muted); font-size: 0.8125rem; margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) auto 0; max-width: 48rem; } /* ============================================================== BIG NUMBER */ .section--big-number { background: var(--c-dark); color: var(--c-on-dark); text-align: center; } .big-number__inner { padding-block: clamp(1rem, 0 + 2vw, 2rem); } .big-number__n { font-family: var(--font-display); font-size: clamp(4rem, 2rem + 10vw, 9rem); line-height: 1; color: var(--c-accent); margin: 0; letter-spacing: -0.02em; } .big-number__label { font-size: var(--fs-lead); color: var(--c-on-dark); margin: 0.5rem 0 0; } /* ============================================================== MEDIA SPLIT */ .media-split__banner { width: 100%; max-height: 32rem; overflow: hidden; } .media-split__banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .section--media-split-full .media-split__grid { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); } .media-split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; } .media-split__grid--notext { grid-template-columns: 1fr; } .media-split__media { border-radius: var(--radius); overflow: hidden; background: var(--c-cream-2); aspect-ratio: 4 / 3; } .media-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-split__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--c-ink); margin: 0.25rem 0 0; } .media-split__body { color: var(--c-muted); line-height: var(--lh-body); margin: 1rem 0 0; } .media-split__list { list-style: none; margin: 1.5rem 0 0; padding: 0; columns: 2; column-gap: 1.5rem; } .media-split__list li { position: relative; padding-left: 1.1rem; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--c-ink); break-inside: avoid; } .media-split__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent-2); } .media-split__note { color: var(--c-muted); font-size: 0.875rem; margin: 1.25rem 0 0; } /* ================================================================ STATS === */ /* Figma 1:10489 — centred row, 60px gap; each stat has a 1px top rule. */ .stats-row { display: flex; justify-content: center; align-items: center; gap: 60px; flex-wrap: wrap; } .stat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 20px 0; border-top: 1px solid #d0cdc8; } .stat__num { display: block; font-family: var(--font-body); font-weight: 400; font-size: 80px; line-height: 96px; letter-spacing: -5px; color: var(--c-ink); white-space: nowrap; text-box: trim-both cap alphabetic; } .stat__label { display: block; font-weight: 500; font-size: 13px; line-height: 19.71px; color: #69655e; white-space: nowrap; text-box: trim-both cap alphabetic; } /* ============================================================== TEAM GRID = */ /* Figma 1:10502 — centred head, 4 × 320×424 cards, 20px gap. */ .section--team-grid { padding-block: 140px; } .team-grid__head { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; margin-bottom: 28px; } .team-grid__head .eyebrow { margin: 0; text-box: trim-both cap alphabetic; } .team-grid__title { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 0.99; color: var(--c-ink); margin: 0; text-box: trim-both cap alphabetic; } .team-grid__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 320px)); justify-content: center; gap: 20px; } .team-card { position: relative; margin: 0; border-radius: 9px; overflow: hidden; background: var(--c-periwinkle); aspect-ratio: 320 / 424; } .team-card__photo { position: absolute; inset: 0; } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(195deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.67) 93%); pointer-events: none; } .team-card__cap { position: absolute; left: 36px; right: 70px; bottom: 24px; z-index: 1; display: flex; flex-direction: column; } .team-card__name { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 0.99; letter-spacing: -0.24px; color: var(--c-periwinkle); } .team-card__role { font-size: 0.8rem; color: var(--c-periwinkle); opacity: 0.85; margin-top: 0.3rem; } .team-card__in { position: absolute; right: 36px; bottom: 24px; z-index: 2; width: 22px; height: 22px; color: var(--c-periwinkle); display: block; } .team-card__in svg { width: 100%; height: 100%; display: block; fill: currentColor; } .team-card a.team-card__in, .team-card a.team-card__in:visited { color: var(--c-periwinkle); transition: color 0.2s var(--ease); } .team-card a.team-card__in:hover, .team-card a.team-card__in:focus-visible { color: var(--c-accent-2); } /* ============================================================== COMPARISON */ /* Figma 1:10689 — 710px column, Cal Sans labels, coral 435px pills. */ .section--comparison { padding-block: 254px; } .section--comparison .section__head { display: flex; flex-direction: column; align-items: center; gap: 30px; margin: 0; } .section--comparison .section__head .eyebrow { margin: 0; letter-spacing: -0.8px; line-height: 1.12; text-box: trim-both cap alphabetic; } .section--comparison .section__title { font-size: 40px; line-height: 0.99; max-width: none; margin: 0; text-box: trim-both cap alphabetic; } .comparison__intro { text-align: center; color: #7f7f7f; font-weight: 500; font-size: 16px; line-height: 1.12; letter-spacing: -0.8px; margin: 0; text-box: trim-both cap alphabetic; } .comparison__table { max-width: 710px; margin: 85px auto 0; display: flex; flex-direction: column; gap: 16px; } .comparison__labels, .comparison__row { display: flex; align-items: center; justify-content: space-between; gap: 0; } .comparison__cell--left { flex: 1 1 auto; min-width: 0; } .comparison__col-label { font-family: var(--font-display); font-size: 20px; line-height: 0.99; color: var(--c-ink); text-box: trim-both cap alphabetic; } .comparison__col-label--right { flex: 0 0 435px; } .comparison__rule { display: block; height: 1px; background: #c5bcb9; opacity: 0.4; border-radius: 23px; } .comparison__cell { font-weight: 600; font-size: 15px; line-height: 1.12; letter-spacing: -0.75px; padding: 13px 16px; border-radius: 40px; text-box: trim-both cap alphabetic; } .comparison__cell--left { color: var(--c-ink); } .comparison__cell--right { flex: 0 0 435px; background: #e77958; color: #fff; padding: 13px 21px; } .comparison__actions { display: flex; justify-content: center; margin-top: 85px; } /* ============================================================== SINGLE POST */ /* Figma 1:11338 — 900px header column, 1180px cover, 90 / 720 / 290 article grid. */ .single-post { --post-line: rgba(39, 33, 27, 0.16); --post-soft: #675b55; --post-body: #39322f; --post-chip: #f4f3ee; } .post-head { padding: 80px 0 36px; } .post-head__inner { max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; } .post-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; line-height: 20.15px; color: var(--post-soft); } .post-crumbs a { color: inherit; } .post-crumbs a:hover { color: var(--c-accent-2); } .post-head__title { font-family: var(--font-display); font-weight: 400; font-size: 68px; line-height: 69.36px; letter-spacing: -0.68px; color: var(--c-ink); margin: 20px 0 0; max-width: none; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; } .post-meta__cat { background: #e77958; color: #fff; font-size: 12px; font-weight: 600; line-height: 18.6px; padding: 4px 12px; border-radius: 999px; } .post-meta__author { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; line-height: 21.7px; color: var(--c-ink); } .post-meta__avatar { width: 22px; height: 22px; color: var(--c-ink); display: block; } .post-meta__avatar svg { width: 100%; height: 100%; display: block; } .post-meta__item { font-size: 14px; line-height: 21.7px; color: var(--post-soft); } .post-head__share { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--post-line); } .post-head__share-label { font-size: 13px; line-height: 20.15px; color: var(--post-soft); } /* Share buttons */ .post-share { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .post-share--column { flex-direction: column; margin-top: 10px; } .single-post .post-share__btn { width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--post-chip); color: var(--c-ink); cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); position: relative; } .single-post .post-share__btn:hover, .single-post .post-share__btn:focus-visible { background: #e77958; color: #fff; } .post-share__btn svg { width: 15px; height: 15px; display: block; } .post-share__btn.is-copied::after { content: attr(data-copied); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; background: var(--c-ink); color: var(--c-cream); font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: 6px; } /* Featured image in a periwinkle striped frame */ .post-cover { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; } .post-cover__frame { padding: 16px; border-radius: 8px; background: #d1e7ff repeating-linear-gradient(180deg, transparent 0 7px, #c3daf1 7px 9px); } .post-cover__frame img { display: block; width: 100%; height: auto; aspect-ratio: 1148 / 547; object-fit: cover; border-radius: 4px; } /* Article grid */ .post-layout { max-width: 1180px; margin-inline: auto; padding: 90px var(--gutter); box-sizing: content-box; display: grid; grid-template-columns: 90px minmax(0, 720px) 290px; column-gap: 40px; justify-content: center; align-items: start; } .post-rail, .post-side { align-self: stretch; } .post-rail__inner { position: sticky; top: 120px; } .post-rail__label { display: block; font-size: 11px; line-height: 17.05px; color: var(--post-soft); } .post-side__inner { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 14px; } /* Body */ .post-content { font-size: 18px; line-height: 30.6px; color: var(--post-body); } .post-content > * { margin: 22px 0 0; } .post-content > :first-child { margin-top: 0; } .post-content .post-lead { font-family: var(--font-display); font-size: 40px; line-height: 44px; color: var(--c-ink); } .post-content .post-h, .post-content h2, .post-content h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 32.64px; letter-spacing: -0.32px; color: var(--c-ink); margin-top: 48px; max-width: none; scroll-margin-top: 110px; } .post-content .post-h ~ h3:not(.post-h), .post-content h4 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--c-ink); margin-top: 36px; } .post-h__num { font-size: 25.6px; line-height: 26.112px; color: #e77958; margin-right: 12.6px; } .post-content strong, .post-content b { font-weight: 700; color: var(--c-ink); } .post-content a { color: var(--c-accent-2); text-decoration: underline; text-underline-offset: 2px; } .post-content ul, .post-content ol { padding-left: 1.3em; } .post-content li + li { margin-top: 8px; } .post-content figure, .post-content .wp-block-image { margin: 40px 0 0; } .post-content img { display: block; max-width: 100%; height: auto; } .post-content figcaption { margin: 0; font-size: 13px; line-height: 22.1px; color: var(--post-soft); text-align: left; } .post-content blockquote { margin-top: 40px; border-left: 3px solid #e77958; padding: 6px 0 6px 24px; font-style: normal; color: var(--c-ink); } .post-content blockquote p { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 36px; color: var(--c-ink); } .post-content blockquote cite { display: block; margin-top: 10px; font-size: 13px; font-style: normal; color: var(--post-soft); } .post-content mark { background: none; color: inherit; } /* CTA box — coral striped frame around a cream panel */ .post-cta { margin-top: 48px; padding: 16px; background: url("../img/post-cta-frame.svg") 0 0 / 100% 100% no-repeat; } .post-cta__panel { background: var(--c-cream); border-radius: 4px; padding: 32px; } .post-cta__title { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 29.5px; color: var(--c-ink); margin: 0; max-width: 15em; } .post-cta__text { font-size: 15px; line-height: 19.5px; color: var(--post-soft); margin: 8px 0 0; } .single-post .post-cta__btn { margin-top: 23px; font-size: 15px; line-height: 19px; padding: 12px 22px; border: 0; color: var(--c-ink); } /* Tags + share */ .post-foot { margin-top: 44px; padding-top: 25px; border-top: 1px solid var(--post-line); } .post-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 19px; padding: 0; } .single-post .post-tags a { display: block; background: var(--post-chip); color: var(--post-body); font-size: 13px; line-height: 22.1px; padding: 6px 14px; border-radius: 999px; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); } .single-post .post-tags a:hover { background: #e77958; color: #fff; } .post-foot__share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .post-foot__label { font-size: 13px; line-height: 22.1px; color: var(--post-soft); } /* Author */ .post-author { margin-top: 36px; display: flex; align-items: center; gap: 18px; background: var(--post-chip); border-radius: 12px; padding: 20px 22px; } .post-author__avatar { flex: 0 0 45px; width: 45px; height: 45px; color: #e77958; } .post-author__avatar svg { width: 100%; height: 100%; display: block; } .post-author__name { margin: 0; font-size: 18px; font-weight: 700; line-height: 30.6px; color: var(--post-body); } .post-author__bio { margin: 0; padding-top: 3px; min-height: 61.19px; box-sizing: border-box; font-size: 14px; line-height: 23.8px; color: var(--post-soft); } /* Previous / all articles */ .post-nav { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .single-post .post-nav__link { display: flex; flex-direction: column; border: 1px solid var(--post-line); border-radius: 12px; padding: 18px 20px; color: var(--post-body); transition: border-color 0.2s var(--ease); } .single-post .post-nav__link:hover { border-color: #e77958; } .post-nav__link--right { text-align: right; } .post-nav__small { font-size: 12px; line-height: 16.2px; color: var(--post-soft); padding-bottom: 6px; } .post-nav__title { font-size: 15px; font-weight: 600; line-height: 20.25px; } /* Sidebar: table of contents + Lawi Lens */ .post-toc { background: var(--post-chip); border: 1px solid var(--post-line); border-radius: 12px; padding: 20px; } .post-toc__title { margin: 0; font-size: 13px; font-weight: 700; line-height: 13.26px; letter-spacing: -0.13px; color: var(--c-ink); } .post-toc__list { list-style: none; margin: 12px 0 0; padding: 0; } .single-post .post-toc__link { display: block; border-left: 2px solid transparent; padding: 6px 0 6px 10px; font-size: 14px; line-height: 21.7px; color: var(--post-soft); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .single-post .post-toc__link:hover { color: var(--c-ink); } .single-post .post-toc__link.is-active { border-left-color: #e77958; color: var(--c-ink); } .post-lens { background: var(--c-ink); border-radius: 12px; padding: 24px 20px 20px; } .post-lens__label { margin: 0; font-size: 12px; font-weight: 700; line-height: 18.6px; color: #e77958; } .post-lens__title { margin: 8px 0 0; font-family: var(--font-display); font-size: 20px; line-height: 23px; color: var(--c-cream); } .single-post .post-lens__btn { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; background: #e77958; color: #fff; font-size: 14px; font-weight: 600; line-height: 22px; padding: 7px 16px; border-radius: 999px; transition: filter 0.2s var(--ease); } .single-post .post-lens__btn:hover { filter: brightness(1.06); } .post-lens__btn svg { width: 14px; height: 14px; } /* Keep reading */ .post-related__inner { max-width: 1180px; margin-inline: auto; padding: 0 var(--gutter) 128px; box-sizing: content-box; } .post-related__title { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 48.96px; letter-spacing: -0.48px; color: var(--c-ink); margin: 0; max-width: none; } .post-related__grid { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .blog-card--related { min-height: 0; height: 328px; padding: 14px; } .blog-card--related .blog-card__inner { gap: 0; padding: 20px 21px; } .blog-card__top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 20px; color: var(--post-soft); } .blog-card--related .blog-card__title { margin-top: 16px; font-size: 21px; line-height: 25px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .blog-card--related .blog-card__excerpt { margin-top: auto; padding-top: 0; flex: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--post-soft); } .blog-card--related .blog-card__more { margin-top: 18px; font-size: 14px; letter-spacing: -0.02em; color: #e77958; } @media (max-width: 1240px) { .post-layout { grid-template-columns: minmax(0, 720px) 290px; } .post-rail { display: none; } } @media (max-width: 1000px) { .post-layout { grid-template-columns: minmax(0, 720px); row-gap: 48px; } .post-side__inner { position: static; } } @media (max-width: 700px) { .post-head { padding: 40px 0 28px; } .post-head__title { font-size: 40px; line-height: 1.04; letter-spacing: -0.4px; } .post-meta { gap: 10px 16px; } .post-head__share { flex-direction: column; align-items: flex-start; } .post-cover__frame { padding: 8px; } .post-layout { padding-block: 48px; } .post-content { font-size: 17px; line-height: 1.7; } .post-content .post-lead { font-size: 30px; line-height: 1.1; } .post-content .post-h, .post-content h2, .post-content h3 { font-size: 26px; line-height: 1.1; margin-top: 40px; } .post-h__num { font-size: 21px; margin-right: 8px; } .post-content blockquote p { font-size: 24px; line-height: 1.2; } .post-cta__panel { padding: 24px 20px; } .post-nav { grid-template-columns: 1fr; } .post-related__inner { padding-bottom: 80px; } .post-related__title { font-size: 36px; line-height: 1; } .post-related__grid { grid-template-columns: 1fr; } } /* =============================================================== BLOG INDEX */ /* Figma 1:9819 — 1340px grid (50px side margins at 1440), 424px rows, 20px column / 50px row gaps. */ .blog-index__container { max-width: calc(1340px + 2 * var(--gutter)); box-sizing: border-box; } .section--blog-head { padding: 69px 0 50px; text-align: center; } .blog-index__title { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 0.99; color: var(--c-ink); text-align: center; margin: 0; max-width: none; text-box: trim-both cap alphabetic; } .section--blog-list { padding: 0; } .blog-grid.blog-grid--index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 424px; gap: 50px 20px; width: auto; margin: 0; transform: none; padding: 0; overflow: visible; } .blog-grid--index .blog-card { min-height: 0; padding: 20px; } .blog-grid--index .blog-card__inner { gap: 0; padding: 20px 26px 24px; } .blog-grid--index .blog-card__title { font-size: 26px; line-height: 31px; letter-spacing: -0.01em; } .blog-grid--index .blog-card__excerpt { margin-top: auto; padding-top: 20px; flex: none; font-size: 13px; line-height: 17.5px; color: var(--c-ink); } .blog-grid--index .blog-card__more { margin-top: 44px; font-size: 16px; line-height: 1; color: #e77958; } /* Featured post */ .blog-grid--index .blog-card--feature { grid-column: span 2; padding: 0; background: #d1e7ff url("../img/blog-feature-bg.svg") 0 0 / 100% 100% no-repeat; } .blog-card--feature .blog-card__inner { background: none; padding: 48px 53px 52px 52px; } .blog-card--feature .blog-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 16px; line-height: 1; } .blog-card__new { font-weight: 500; color: var(--c-ink); } .blog-card__meta { display: flex; gap: 16px; font-size: 14px; font-weight: 500; letter-spacing: -0.56px; color: #7f8a95; } .blog-grid--index .blog-card--feature .blog-card__title { margin: 30px 0 0; font-size: 72px; line-height: 78px; letter-spacing: -0.72px; max-width: 8.4em; } .blog-card__pill { margin-top: auto; align-self: flex-start; background: #e77958; color: var(--c-ink); font-size: 13px; font-weight: 500; line-height: 1; padding: 7px 16px; border-radius: 999px; } /* ================================================================ LAWI LENS */ /* Figma 1:9886 — 1001×474 image card with a blurred caption band + four-item list. */ .section--lens { padding: 50px 0 150px; } .lens__grid { margin-top: 50px; display: grid; grid-template-columns: minmax(0, 1001fr) minmax(0, 319fr); gap: 20px; align-items: stretch; } .lens__feature { position: relative; display: block; height: 474px; overflow: hidden; border-radius: 2px; background: var(--c-cream-2); color: #fff; } .lens__feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .lens__feature:hover .lens__feature-img { transform: scale(1.03); } .lens__overlay { position: absolute; left: 0; right: 0; bottom: 0; height: 161px; display: flex; flex-direction: column; padding: 23px 38px 34px 36px; box-sizing: border-box; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } .lens__overlay-top { display: flex; justify-content: space-between; align-items: center; } .lens__pill { background: #fff; color: var(--c-ink); font-size: 14px; font-weight: 500; line-height: 1; padding: 10px 24px; border-radius: 999px; } .lens__meta, .lens__item-meta { display: flex; gap: 16px; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.56px; } .lens__feature-title { margin-top: 20px; font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: -0.26px; } .lens__more { margin-top: 14px; font-size: 14px; font-weight: 500; } .lens__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 25px; } .lens__item a { display: flex; gap: 10px; height: 99.75px; color: var(--c-ink); } .lens__item-thumb { flex: 0 0 92px; height: 100%; border-radius: 2px; overflow: hidden; background: var(--c-cream-2); } .lens__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lens__item-body { display: flex; flex-direction: column; justify-content: space-between; padding: 6px 0 10px; min-width: 0; } .lens__item-title { font-weight: 700; font-size: 18px; line-height: 1.05; letter-spacing: -0.18px; padding-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lens__item a:hover .lens__item-title { color: #e77958; } .lens__item-meta { color: #7f7f7f; text-box: trim-both cap alphabetic; } @media (max-width: 1100px) { .blog-grid.blog-grid--index { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(380px, auto); gap: 20px; } .lens__list { gap: 16px; } } @media (max-width: 640px) { .section--blog-head { padding: 48px 0 32px; } .blog-index__title { font-size: 40px; } .blog-grid.blog-grid--index { grid-template-columns: 1fr; grid-auto-rows: auto; } .blog-grid--index .blog-card { min-height: 380px; } .blog-grid--index .blog-card--feature { grid-column: auto; } .blog-card--feature .blog-card__inner { padding: 32px 28px; } .blog-grid--index .blog-card--feature .blog-card__title { font-size: 44px; line-height: 1.05; margin-bottom: 32px; } .section--lens { padding: 40px 0 90px; } .lens__grid { margin-top: 32px; } .lens__feature { height: 380px; } .lens__overlay { height: auto; padding: 20px; } .lens__feature-title { font-size: 22px; } .lens__overlay-top { flex-wrap: wrap; gap: 10px; } } /* ================================================================= GALLERY */ .gallery__title { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--c-ink); margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); } .gallery__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1.25rem; } .gallery__item { margin: 0; } .gallery__media { border-radius: var(--radius); overflow: hidden; background: var(--c-cream-2); aspect-ratio: 1 / 1; box-shadow: var(--shadow-sm); } .gallery__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__cap { font-size: 0.85rem; color: var(--c-muted); margin-top: 0.75rem; } /* ============================================================ NAV DROPDOWNS Full-width panel under the header (Figma "Menu DESPLEGADO" 1:5982). While a dropdown is open the whole header turns #272727 with white text; the panel lists each child as title + description in columns aligned with the nav. */ @media (min-width: 1101px) { .site-header .primary-nav { align-self: stretch; } .site-header #primary-menu { height: 100%; } .site-header #primary-menu > li { display: flex; align-items: center; height: 100%; } .primary-nav .menu-item-has-children { position: static; } .primary-nav .menu-item-has-children > a { position: relative; } .primary-nav .menu-item-has-children > a::before { content: ""; position: absolute; left: -12px; right: -12px; bottom: -10px; height: 1px; background: currentColor; opacity: 0; transition: opacity 0.18s var(--ease); } .primary-nav .sub-menu { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: row; align-items: flex-start; gap: 73px; height: auto; margin: 0; padding: 27px calc(max(0px, (100% - var(--container-wide)) / 2) + var(--gutter)) 30px; background: #272727; border-top: 1px solid rgba(255, 255, 255, 0.15); opacity: 0; visibility: hidden; transition: opacity 0.18s var(--ease), visibility 0.18s var(--ease); z-index: 60; } .primary-nav .menu-item-has-children:hover > .sub-menu, .primary-nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; } .primary-nav .sub-menu li { flex: 0 1 283px; min-width: 0; } /* Figma lays out 3 columns 73px apart; with 4 children keep the 283px columns and tighten the gap. */ .primary-nav .sub-menu:has(> li:nth-child(4)) { gap: clamp(24px, calc((100% - 4 * 283px) / 3), 73px); } .primary-nav .sub-menu a { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 0; color: #fff; opacity: 1; white-space: normal; } .sub-menu__title { font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 0.91; color: #fff; text-box: trim-both cap alphabetic; transition: color 0.18s var(--ease); } .sub-menu__desc { font-weight: 400; font-size: 14px; line-height: 1.44; letter-spacing: -0.42px; color: #c4c4c4; text-box: trim-both cap alphabetic; } .primary-nav .sub-menu a:hover .sub-menu__title, .primary-nav .sub-menu a:focus-visible .sub-menu__title { color: #e77958; } /* Header while a dropdown is open */ .site-header { transition: background-color 0.18s var(--ease), color 0.18s var(--ease); } .site-header:has(.menu-item-has-children:hover), .site-header:has(.menu-item-has-children:focus-within) { background: #272727; color: #fff; border-bottom-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .site-header:has(.menu-item-has-children:hover) .site-brand__img, .site-header:has(.menu-item-has-children:focus-within) .site-brand__img { filter: brightness(0) invert(1); } .site-header:has(.menu-item-has-children:hover) #primary-menu > li > a, .site-header:has(.menu-item-has-children:focus-within) #primary-menu > li > a { color: #c4c4c4; opacity: 1; } .site-header #primary-menu > li.menu-item-has-children:hover > a, .site-header #primary-menu > li.menu-item-has-children:focus-within > a { color: #fff; } .primary-nav .menu-item-has-children:hover > a::before, .primary-nav .menu-item-has-children:focus-within > a::before { opacity: 1; } .primary-nav .menu-item-has-children:hover > a::after, .primary-nav .menu-item-has-children:focus-within > a::after { transform: rotate(225deg) translateY(2px); } } /* ============================================================== HERO VIDEO */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================== EBOOK HERO */ .section--ebook-hero { padding-top: clamp(6rem, 4rem + 6vw, 8.5rem); } .ebook-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; } .ebook-hero__title { font-family: var(--font-display); font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); line-height: 1.08; color: var(--c-ink); margin: 0.25rem 0 0; } .ebook-hero__lead { font-size: var(--fs-lead); color: var(--c-muted); line-height: 1.5; margin: 1.25rem 0 0; } .ebook-hero__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; } .ebook-hero__meta li { background: var(--c-cream-2); color: var(--c-ink); font-size: 0.8rem; padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); } .ebook-hero__cta { margin-top: 1.75rem; } .ebook-hero__cover { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 4 / 5; max-width: 22rem; margin-inline: auto; } .ebook-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================== PRINCIPLES */ .principles__grid { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; } .principles__num { font-family: var(--font-display); font-size: clamp(4rem, 2rem + 6vw, 7.5rem); line-height: 0.9; color: var(--c-accent-2); margin: 0; } .principles__heading { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 2vw, 2.875rem); line-height: 1.02; color: var(--c-ink); margin: 1rem 0 0; } .principles__sub { color: var(--c-muted); margin: 0.75rem 0 0; } .principles__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-ink); } .principle { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid rgba(39, 33, 27, 0.16); } .principle__num { font-family: var(--font-display); font-size: 1.125rem; color: var(--c-muted); } .principle__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.2vw, 2.25rem); line-height: 1.05; color: var(--c-ink); letter-spacing: -0.01em; } .principle__text { font-size: 1rem; color: var(--c-muted); line-height: var(--lh-body); } /* ============================================================= CTA SIMPLE */ .cta-simple__inner { text-align: center; max-width: 52rem; margin-inline: auto; } .cta-simple__title { font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.5rem); line-height: 1; letter-spacing: -0.01em; color: var(--c-ink); margin: 0; } .cta-simple__text { color: var(--c-muted); line-height: var(--lh-body); margin: 1rem auto 0; max-width: 40rem; } .cta-simple__cta { margin-top: 1.75rem; } .cta-simple__title { max-width: none; } .section--cta-simple { text-align: center; } /* ========================================================= RECRUIT BANNER */ /* Figma 1:10775 — salmon block with coral bars (vectorised from the design), cream panel inset 43px / 41px, title left, coral button right. */ .section--recruit { background: var(--c-periwinkle); padding: 140px 0; } .recruit-card { position: relative; border-radius: 8px; overflow: hidden; background: #f1b2a0 url("../img/recruit-texture.svg") center / 100% 100% no-repeat; padding: 41px 43px; } .recruit-card__texture { display: none; } .recruit-card__panel { position: relative; background: var(--c-cream); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 91px; padding: 12px 25px 12px 27px; } .recruit-card__title { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 0.99; letter-spacing: -0.4px; color: var(--c-ink); margin: 0; } .recruit-card__cta { flex: 0 0 auto; } .recruit-card a.recruit-card__cta, .recruit-card a.recruit-card__cta:hover { color: #fff; } @media (max-width: 600px) { .recruit-card { padding: 24px 18px; } .recruit-card__panel { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 20px; } .recruit-card__title { font-size: 30px; } .recruit-card__cta { width: 100%; text-align: center; } } /* ============================================================ TEAM PAGE == */ /* Figma 1:10483. Buttons: 17px Medium, 16px × 23px padding, text box trimmed. */ .btn--figma { display: inline-block; border: 0; font-size: 17px; letter-spacing: -0.85px; line-height: 1.12; padding: 16px 23px; text-box: trim-both cap alphabetic; } /* Hero (1:10484) — centred head; stats follow in the same band. */ .section--svc-hero-center:has(+ .section--stats) { padding-top: 69px; padding-bottom: 0; } .section--svc-hero-center:has(+ .section--stats) .svc-hero__text { display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: none; } .section--svc-hero-center:has(+ .section--stats) .eyebrow { margin: 0; color: var(--c-ink); font-weight: 600; font-size: 16px; line-height: 1.12; letter-spacing: -0.8px; text-box: trim-both cap alphabetic; } .section--svc-hero-center:has(+ .section--stats) .svc-hero__title { font-size: 40px; line-height: 0.99; letter-spacing: -0.4px; margin: 0; text-box: trim-both cap alphabetic; } .section--svc-hero-center:has(+ .section--stats) .svc-hero__lead { font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.56px; color: #7f7f7f; max-width: 434px; margin: 0; text-box: trim-both cap alphabetic; } .section--svc-hero-center + .section--stats { padding-top: 50px; padding-bottom: 150px; } /* Mindset (1:10736) */ .section--mindset { padding-block: 150px; overflow: hidden; --mh: min(479px, 33.264vw); --mgap: 18px; } .mindset__head { display: flex; justify-content: center; align-items: flex-start; gap: 168px; } .mindset__title { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 0.99; color: var(--c-ink); margin: 0; white-space: nowrap; text-box: trim-both cap alphabetic; } .mindset__text { flex: 0 0 387px; font-weight: 500; font-size: 16px; line-height: 1.3; letter-spacing: -0.64px; color: #7f7f7f; margin: 0; text-box: trim-both cap alphabetic; } .mindset__carousel { margin-top: 50px; } .mindset__track { position: relative; display: flex; gap: var(--mgap); height: var(--mh); /* Active slide starts 259.5px from the left of the 1440 frame; the previous one peeks in. */ left: calc(max(18.02%, 50% - 460.5px) - var(--mh) * 1.2818 - var(--mgap)); width: max-content; } .mindset__slide { margin: 0; flex: 0 0 auto; width: calc(var(--mh) * 0.7891); height: 100%; border-radius: 8px; overflow: hidden; background: var(--c-cream-2); transition: transform 0.7s var(--ease); } .mindset__slide:nth-child(1) { width: calc(var(--mh) * 1.2818); } .mindset__slide:nth-child(2) { width: calc(var(--mh) * 1.7286); } .mindset__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .mindset__progress { display: flex; gap: 8px; max-width: 854px; margin: 50px auto 0; } .mindset__dot { flex: 1 1 0; height: 2px; padding: 0; border: 0; border-radius: 2px; background: #c5bcb9; cursor: pointer; position: relative; transition: background-color 0.3s var(--ease); } .mindset__dot::before { content: ""; position: absolute; inset: -10px 0; } .mindset__dot.is-active { background: #4e3a1d; } .mindset__statement { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 0.99; color: var(--c-ink); text-align: center; margin: 50px 0 0; text-box: trim-both cap alphabetic; } @media (max-width: 900px) { .mindset__head { flex-direction: column; align-items: flex-start; gap: 24px; } .mindset__title { white-space: normal; font-size: 32px; } .mindset__text { flex: none; } .section--mindset { --mh: 52vw; } .mindset__track { left: calc(8% - 84vw - var(--mgap)); } .mindset__slide, .mindset__slide:nth-child(1), .mindset__slide:nth-child(2) { width: 84vw; } .mindset__statement { font-size: 28px; } .mindset__statement br { display: none; } } /* Culture — plain columns (1:10751) */ .section--cards-grid-plain { padding: 150px 0; } .section--cards-grid-plain .container { max-width: 1440px; padding-inline: 70px; } .section--cards-grid-plain .cards-grid__head { max-width: none; margin: 0 0 95px; text-align: center; } .section--cards-grid-plain .cards-grid__title { font-size: 40px; line-height: 0.99; margin: 0; text-box: trim-both cap alphabetic; } .section--cards-grid-plain .cards-grid__grid { display: flex; gap: 54px; align-items: flex-start; } .section--cards-grid-plain .cg-card { flex: 1 1 0; min-width: 0; background: none; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 30px; } .section--cards-grid-plain .cg-card__title { font-size: 26px; line-height: 0.99; letter-spacing: 0; margin: 0; white-space: nowrap; text-box: trim-both cap alphabetic; } .section--cards-grid-plain .cg-card__text { font-weight: 500; font-size: 13px; line-height: 1.3; letter-spacing: -0.52px; color: #7f7f7f; margin: 0; text-box: trim-both cap alphabetic; } @media (max-width: 1100px) { .section--cards-grid-plain .cards-grid__grid { flex-wrap: wrap; row-gap: 48px; } .section--cards-grid-plain .cg-card { flex: 1 1 calc(33.333% - 54px); } } @media (max-width: 600px) { .section--cards-grid-plain { padding: 90px 0; } .section--cards-grid-plain .container { padding-inline: var(--gutter); } .section--cards-grid-plain .cards-grid__head { margin-bottom: 56px; } .section--cards-grid-plain .cg-card { flex: 1 1 100%; gap: 18px; } } /* CTA simple (1:10769) */ .section--cta-simple { padding: 140px 0; } .cta-simple__inner { display: flex; flex-direction: column; align-items: center; } .cta-simple__title { font-size: 40px; line-height: 0.99; text-box: trim-both cap alphabetic; } .cta-simple__text { margin: 30px auto 0; font-weight: 500; font-size: 16px; line-height: 1.12; letter-spacing: -0.8px; color: #7f7f7f; text-box: trim-both cap alphabetic; } .cta-simple__cta { margin-top: 28px; } /* ============================================================== RESPONSIVE */ @media (max-width: 900px) { .team-grid__grid { grid-template-columns: repeat(2, 1fr); } .principles__grid { grid-template-columns: 1fr; } .ebook-hero__grid { grid-template-columns: 1fr; } .ebook-hero__cover { grid-row: 1; } .gallery__grid { grid-template-columns: repeat(2, 1fr); } .principle { grid-template-columns: 2rem 1fr; } .principle__text { grid-column: 2; } .feature-list__grid, .process__grid, .media-split__grid { grid-template-columns: 1fr; } .feature-list__items { grid-template-columns: 1fr; } .cards-grid__grid { grid-template-columns: 1fr 1fr !important; } .process__grid { grid-template-columns: 1fr 1fr !important; } .media-split__list { columns: 1; } .svc-hero__grid, .text-split__grid, .faq__grid { grid-template-columns: 1fr; } .ai-cards__grid { grid-template-columns: 1fr; } .doc-pills__grid { grid-template-columns: 1fr 1fr; } .doc-pills__col { border-left: none !important; padding: 0 0 1.5rem; } } @media (max-width: 560px) { .doc-pills__grid { grid-template-columns: 1fr; } .plans-cards { gap: 2rem; } } /* ========================================================== BILLBOARD VIDEO */ .billboard--video { position: relative; overflow: hidden; } .billboard__video-wrap { width: 100%; } .billboard__video { width: 100%; height: auto; display: block; } /* ============================================================ FOOTER PATTERN */ .footer-bottom__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .section--team-grid .container { max-width: 1440px; padding-inline: 50px; } @media (max-width: 900px) { .section--team-grid { padding-block: 90px; } .section--team-grid .container { padding-inline: var(--gutter); } .team-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .team-card__cap { left: 16px; right: 44px; bottom: 16px; } .team-card__name { font-size: 18px; } .team-card__in { right: 16px; bottom: 16px; width: 18px; height: 18px; } } .section--recruit .container { max-width: 1440px; padding-inline: 103px; } @media (max-width: 1100px) { .section--recruit .container { padding-inline: var(--gutter); } .section--recruit { padding: 90px 0; } } @media (max-width: 900px) { .section--svc-hero-center + .section--stats { padding-bottom: 90px; } .stats-row { gap: 24px 32px; } .stat__num { font-size: 56px; line-height: 64px; letter-spacing: -3px; } .section--comparison { padding-block: 90px; } .comparison__table { margin-top: 48px; } .comparison__actions { margin-top: 48px; } .comparison__labels, .comparison__row { gap: 12px; } .comparison__col-label--right, .comparison__cell--right { flex: 0 0 58%; } .comparison__cell { padding: 11px 12px; font-size: 13px; letter-spacing: -0.4px; } .section--mindset { padding-block: 90px; } .section--cta-simple { padding: 90px 0; } } .blog-grid--index .blog-card--feature .blog-card__title.is-mid { font-size: 54px; line-height: 58px; letter-spacing: -0.54px; max-width: 11em; } .blog-grid--index .blog-card--feature .blog-card__title.is-long { font-size: 44px; line-height: 48px; letter-spacing: -0.44px; max-width: 13em; } @media (max-width: 640px) { .blog-grid--index .blog-card--feature .blog-card__title.is-mid, .blog-grid--index .blog-card--feature .blog-card__title.is-long { font-size: 34px; line-height: 1.05; } } @media (max-width: 1100px) { .lens__grid { grid-template-columns: minmax(0, 1fr); } } /* ================================================================ E-BOOK PAGE */ /* Figma 1:13049 — 1180px column; sections: hero 84/96, inside 0/128, contents band 128/128, look inside 128/128. */ .ebk-wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; } .ebk-h2 { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 48.96px; letter-spacing: -0.48px; color: var(--c-ink); margin: 0; max-width: none; } /* Hero */ .ebk-hero { padding: 84px 0 96px; } .ebk-hero > .ebk-wrap { min-height: 593px; } .ebk-hero__eyebrow { margin: 22px 0 0; font-size: 14px; font-weight: 700; line-height: 21.7px; color: #e77958; } .ebk-hero__title { margin: 18px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 66px; line-height: 67.32px; letter-spacing: -0.66px; color: var(--c-ink); max-width: none; } .ebk-hero__text { margin: 20px 0 0; max-width: 609px; font-size: 20px; line-height: 30px; color: var(--post-soft); } .ebk-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 26px 0 0; padding: 0; } .ebk-chips li { background: var(--post-chip); color: var(--c-ink); font-size: 13px; line-height: 20.15px; padding: 6px 14px; border-radius: 999px; } .ebk-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; } .ebk-hero__share { display: flex; align-items: center; gap: 12px; } .single-post .ebk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: #e77958; color: #fff; font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 24px; cursor: pointer; transition: filter 0.2s var(--ease); } .single-post .ebk-btn:hover { filter: brightness(1.05); color: #fff; } .ebk-btn svg { width: 14px; height: 14px; flex: none; } .single-post .ebk-btn--block { display: flex; width: 100%; font-size: 15px; } /* Inside this e-book */ .ebk-inside { padding: 0 0 128px; } .ebk-inside__grid { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ebk-card { background: var(--post-chip); border: 1px solid rgba(39, 33, 27, 0.13); border-radius: 10px; padding: 22px; min-height: 221px; box-sizing: border-box; } .ebk-card__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #b5d0ed; color: var(--c-ink); } .ebk-card__icon svg { width: 14px; height: 14px; } .ebk-card__title { margin: 12px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 24.2px; letter-spacing: -0.22px; color: var(--c-ink); } .ebk-card__text { margin: 12px 0 0; font-size: 14px; line-height: 21.7px; color: var(--post-soft); } /* Contents + form band */ .ebk-toc { background: #e3e1d3; padding: 128px 0; } .ebk-toc__grid { display: grid; grid-template-columns: minmax(0, 511fr) minmax(0, 613fr); column-gap: 56px; align-items: start; } .ebk-toc__list { list-style: none; margin: 28px 0 0; padding: 0; } .ebk-toc__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; column-gap: 0; min-height: 60.34px; box-sizing: border-box; padding: 15px 0 0; border-top: 1px solid rgba(39, 33, 27, 0.16); } .ebk-toc__num { padding-top: 2px; font-family: var(--font-display); font-size: 17px; line-height: 26.35px; color: #e77958; } .ebk-toc__title { font-size: 17px; line-height: 26.35px; color: var(--c-ink); padding-right: 16px; } .ebk-toc__page { padding-top: 6px; font-size: 13px; line-height: 20.15px; color: var(--post-soft); white-space: nowrap; } .ebk-authors { margin-top: 30px; display: flex; align-items: center; gap: 16px; } .ebk-authors__photos { display: flex; flex: none; } .ebk-authors__photos img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #b5d0ed; border: 2px solid #e3e1d3; box-sizing: border-box; display: block; } .ebk-authors__photos img + img { margin-left: -12px; } .ebk-authors__body { display: flex; flex-direction: column; } .ebk-authors__title { font-size: 15px; font-weight: 700; line-height: 23.25px; color: var(--c-ink); } .ebk-authors__text { margin-top: 0; padding-top: 2px; min-height: 49.59px; box-sizing: border-box; font-size: 13.5px; line-height: 20.925px; color: var(--post-soft); max-width: 393px; } /* Download form — striped frame (vectorised from Figma) around a cream panel */ .ebk-form { position: sticky; top: 110px; padding: 16px; background: url("../img/ebook-form-frame.svg") 0 0 / 100% 100% no-repeat; border-radius: 8px; scroll-margin-top: 110px; } .ebk-form__panel { background: var(--c-cream); border-radius: 4px; padding: 28px 30px 32px; } .ebk-form__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 33px; letter-spacing: -0.3px; color: var(--c-ink); max-width: none; } .ebk-form__text { margin: 25px 0 0; font-size: 15px; line-height: 22px; color: var(--post-soft); } .ebk-form__form { margin-top: 41px; display: flex; flex-direction: column; gap: 16px; } .ebk-field { display: block; } .ebk-field input { display: block; width: 100%; height: 44px; padding: 0; border: 0; border-bottom: 1px solid #887f76; border-radius: 0; background: transparent; font-family: var(--font-body); font-size: 15px; color: var(--c-ink); outline: none; box-sizing: border-box; } .ebk-field input::placeholder { color: #675b55; opacity: 1; } .ebk-field input:focus { border-bottom-color: #e77958; } .ebk-consent { margin-top: 2px; display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 18px; color: var(--post-soft); cursor: pointer; } .ebk-consent input { appearance: none; -webkit-appearance: none; flex: none; width: 14px; height: 14px; margin: 0; border: 0; border-bottom: 1px solid var(--c-ink); background: transparent; cursor: pointer; position: relative; } .ebk-consent input:checked { border: 1px solid #e77958; background: #e77958; border-radius: 2px; } .ebk-consent input:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } .ebk-form__notice { margin: 24px 0 18px; font-size: 15px; line-height: 22px; color: var(--c-ink); background: #b5d0ed; border-radius: 6px; padding: 12px 14px; } .ebk-form__notice--error { background: #f6d3c7; margin-bottom: 0; } /* A look inside — mock pages */ .ebk-look { padding: 128px 0; } .ebk-look__grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ebk-page { position: relative; height: 506.66px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 26px 24px; box-sizing: border-box; background: #fff; border-radius: 4px; box-shadow: 0 14px 40px rgba(39, 33, 27, 0.12); } .ebk-page::after { content: ""; position: absolute; left: 0; right: 0; top: 304px; height: 202.64px; background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); } .ebk-page p { margin: 0; } .ebk-page__label { font-size: 10px; font-weight: 700; line-height: 15.5px; color: #e77958; } .ebk-page__title { font-family: var(--font-display); font-size: 22px; line-height: 23.1px; letter-spacing: -0.22px; color: var(--c-ink); } .ebk-page__line { display: block; height: 6px; border-radius: 3px; background: #e7e5dc; flex: none; } .ebk-page__box { align-self: stretch; padding: 12px; border-radius: 6px; background: var(--post-chip); font-size: 11px; line-height: 15.4px; color: var(--c-ink); } .ebk-page__box.is-hl { background: #b5d0ed; } .ebk-page__check { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 17.05px; color: var(--c-ink); } .ebk-page__check::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 3px; background: #e77958; } /* More from Lawi Lens: reuses the "Keep reading" cards. */ .ebk-more .post-related__inner { padding-bottom: 128px; } @media (max-width: 1100px) { .ebk-inside__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ebk-toc__grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; } .ebk-form { position: static; } .ebk-look__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .ebk-hero { padding: 40px 0 72px; } .ebk-hero > .ebk-wrap { min-height: 0; } .ebk-hero__title { font-size: 40px; line-height: 1.04; letter-spacing: -0.4px; } .ebk-hero__text { font-size: 17px; line-height: 1.5; } .ebk-hero__share { flex-wrap: wrap; } .ebk-h2 { font-size: 36px; line-height: 1; } .ebk-inside { padding-bottom: 80px; } .ebk-inside__grid { grid-template-columns: minmax(0, 1fr); } .ebk-card { min-height: 0; } .ebk-toc, .ebk-look { padding: 80px 0; } .ebk-toc__row { grid-template-columns: 36px minmax(0, 1fr) auto; } .ebk-toc__title { font-size: 15px; line-height: 1.5; } .ebk-form { padding: 10px; } .ebk-form__panel { padding: 24px 20px; } .ebk-look__grid { grid-template-columns: minmax(0, 1fr); } .ebk-more .post-related__inner { padding-bottom: 80px; } } /* ========================================================== SERVICE PAGES */ /* Figma 1:13436 (Legal Department) — shared by every service page built with these layouts. 1180px content column (1380px for the document pills). */ .section--svc-hero:not(.section--svc-hero-center) > .container, .section--text-split > .container, .section--ai-cards > .container, .section--plans > .container, .section--cta-band > .container, .section--faq > .container, .section--svc-testimonial > .container, .section--logos > .container { max-width: calc(1180px + 2 * var(--gutter)); } .section--doc-pills > .container { max-width: calc(1380px + 2 * var(--gutter)); } /* Hero (1:13471): 96 / 80, 511 | 613 columns, 56px gap, 613×227 image. */ .section--svc-hero:not(.section--svc-hero-center) { padding: 96px 0 80px; } .section--svc-hero:not(.section--svc-hero-center) .svc-hero__grid { grid-template-columns: minmax(0, 511fr) minmax(0, 613fr); gap: 56px; } .section--svc-hero:not(.section--svc-hero-center) .svc-hero__title { font-size: 76px; line-height: 77.52px; letter-spacing: -0.76px; margin: 0; } .section--svc-hero:not(.section--svc-hero-center) .svc-hero__lead { margin: 0; padding: 22px 0 30px; max-width: 547px; font-size: 17px; line-height: 26.35px; color: #675b55; } .section--svc-hero .svc-hero__cta, .section--doc-pills .doc-pills__actions .btn { height: 44px; padding: 0 22px; font-size: 15px; font-weight: 500; line-height: 23.25px; border: 0; } .section--svc-hero:not(.section--svc-hero-center) .svc-hero__media { aspect-ratio: 613 / 227; border-radius: 8px; } /* Text split (1:13483): top rule, 48px in, 511 | 613. */ .section--text-split { padding: 0 0 80px; } .section--text-split .text-split__grid { grid-template-columns: minmax(0, 511fr) minmax(0, 613fr); gap: 56px; } .section--text-split .text-split__grid--border { padding-top: 48px; } .section--text-split .text-split__title { font-size: 48px; line-height: 48.96px; letter-spacing: -0.48px; } .section--text-split .text-split__body { font-size: 22px; line-height: 33px; color: #675b55; } /* AI cards band (1:13490): coral, 128 / 128. */ .section--ai-cards { padding: 128px 0; } .section--ai-cards .ai-cards__head { max-width: none; } .section--ai-cards .ai-cards__title { max-width: 639px; margin: 0 auto; font-size: 52px; line-height: 53.04px; letter-spacing: -0.52px; } .section--ai-cards .ai-cards__intro { max-width: 967px; margin: 18px auto 0; font-size: 20px; line-height: 30px; color: #fbe7e1; } .section--ai-cards .ai-cards__grid { margin-top: 48px; gap: 16px; } .section--ai-cards .ai-card { border-radius: 10px; } .section--ai-cards .ai-card__media { aspect-ratio: auto; height: 306.125px; } .section--ai-cards .ai-card__chip { padding: 10px 12px; gap: 0; } .section--ai-cards .ai-card__chip-head { font-size: 13px; line-height: 19px; } .section--ai-cards .ai-card__chip-text { padding-top: 4px; font-size: 12px; line-height: 16.8px; color: #675b55; } .section--ai-cards .ai-card__body { padding: 20px 22px 24px; } .section--ai-cards .ai-card__h { margin: 0; font-size: 22px; line-height: 22.44px; letter-spacing: -0.22px; } .section--ai-cards .ai-card__p { padding-top: 8px; font-size: 14.5px; line-height: 22.475px; color: #675b55; } /* Plans (1:13542): 128 / 128, 360px cards, 28px gap, framed. */ .section--plans { padding: 128px 0; } .section--plans .section__head { margin: 0; } .section--plans .section__title { margin: 0; max-width: none; font-size: 56px; line-height: 57.12px; letter-spacing: -0.56px; } .section--plans .plans__intro { max-width: 727px; margin: 14px auto 0; font-size: 16px; line-height: 24.8px; color: #675b55; } .section--plans .plans-tabs { margin-top: 36px; gap: 8px; } .section--plans .plans-region__note { max-width: 571px; margin: 18px auto 0; font-size: 15px; line-height: 23.25px; color: #675b55; } .section--plans .plans-cards { margin-top: 40px; gap: 28px; flex-wrap: nowrap; } .section--plans .plan-card { width: 360px; padding: 14px; border: 0; border-radius: 4px; box-shadow: none; background: #27211b url("../img/b83852f270107dde031a476abedde767123c787e.png") center / cover no-repeat; align-items: stretch; } .section--plans .plan-card--featured { background: #d1e7ff url("../img/1216887b2a7c5937d8c3127a636f91d89de989a4.png") center / cover no-repeat; } .section--plans .plan-card__inner { flex: 1; display: flex; flex-direction: column; align-items: center; background: var(--c-cream); padding: 26px 24px 24px; } .section--plans .plan-card__badge { top: 0; transform: translate(-50%, -50%); background: #e77958; z-index: 1; } .section--plans .plans__foot { margin: 26px auto 0; font-size: 13px; line-height: 20.15px; color: #675b55; } /* "We build the steps" band (1:13624): 720px image, heading bottom-left. */ .section--cta-band { min-height: 720px; } .section--cta-band .cta-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%); } .section--cta-band .cta-band__inner { padding: 0 var(--gutter) 64px; } .section--cta-band .cta-band__heading { max-width: 713px; font-size: 96.768px; line-height: 98.703px; letter-spacing: -0.9677px; color: #eeeedb; margin: 0; } /* FAQ (1:13631): 128 / 128, 449.6 | 674.4, 56px gap. */ .section--faq { padding: 128px 0; } .section--faq .faq__grid { grid-template-columns: minmax(0, 449.6fr) minmax(0, 674.4fr); gap: 56px; } .section--faq .faq__title { font-size: 52px; line-height: 53.04px; letter-spacing: -0.52px; margin: 0; } .section--faq .faq__lead { margin: 16px 0 0; max-width: 399px; font-size: 16px; line-height: 24.8px; color: #675b55; } .section--faq .faq__contact { margin-top: 40px; display: flex; flex-direction: column; } .section--faq .faq__contact-label { font-size: 14px; line-height: 21.7px; color: var(--c-ink); } .section--faq .faq__contact-mail { font-size: 14px; font-weight: 600; line-height: 21.7px; color: #e77958; } .section--faq .faq__list { border-top: 1px solid rgba(39, 33, 27, 0.16); } .section--faq .faq-item__q { padding: 20px 4px; font-size: 16px; font-weight: 600; line-height: 24.8px; color: var(--c-ink); } .section--faq .faq-item__icon { margin-top: 5px; } .section--faq .faq-item__a { padding: 0 4px 22px; font-size: 16px; line-height: 24.8px; color: #675b55; } .section--faq .faq-item__a p { margin: 0; } .section--faq .faq-item[open] .faq-item__icon { transform: rotate(45deg); } .section--faq .faq-item[open] .faq-item__icon::after { transform: none; } .section--faq .faq-item__icon { transition: transform 0.2s var(--ease); } /* Document pills (1:13708): 1380px, 4 × 345 columns. */ .section--doc-pills { padding: 128px 0; } .section--doc-pills .section__head { margin: 0; } .section--doc-pills .section__title { max-width: 511px; margin: 0 auto; font-size: 52px; line-height: 53.04px; letter-spacing: -0.52px; } .section--doc-pills .doc-pills__sub { margin: 14px 0 0; font-size: 16px; line-height: 24.8px; color: #675b55; text-align: center; } .section--doc-pills .doc-pills__grid { margin-top: 48px; } .section--doc-pills .doc-pills__col { padding: 0 22px; } .section--doc-pills .doc-pills__col:first-child { padding-left: 0; } .section--doc-pills .doc-pills__h { margin: 0; font-size: 15px; font-weight: 700; line-height: 15.3px; letter-spacing: -0.15px; color: var(--c-ink); } .section--doc-pills .doc-pills__tags { padding-top: 16px; gap: 8px; } .section--doc-pills .doc-pill { padding: 6px 14px; font-size: 12.5px; line-height: 16.875px; max-width: 300px; } .section--doc-pills .doc-pills__actions { margin-top: 48px; } /* Testimonial (1:13799): label, 200px logo column + 40 gap, 940px quote. */ .section--svc-testimonial { padding: 128px 0; } .svc-testi__label { margin: 0 0 12px; font-size: 14px; font-weight: 500; line-height: 21.7px; color: var(--c-ink); } .section--svc-testimonial .svc-testi { display: grid; grid-template-columns: 200px minmax(0, 940px); column-gap: 40px; align-items: start; } .section--svc-testimonial .svc-testi__logo { margin: 0; padding-top: 10px; } .section--svc-testimonial .svc-testi__logo img { width: 150px; height: 60px; object-fit: contain; object-position: left center; } .section--svc-testimonial .svc-testi__quote { max-width: none; font-size: 42px; line-height: 46.2px; } .section--svc-testimonial .svc-testi__cite { margin-top: 22px; } .section--svc-testimonial .svc-testi__author { font-size: 15px; line-height: 23.25px; } .section--svc-testimonial .svc-testi__role { font-size: 14px; line-height: 21.7px; color: #675b55; } .section--svc-testimonial .svc-testi__dots { margin-top: 40px; padding-left: 240px; gap: 8px; } /* Logos (1:13820): 0 / 110. */ .section--logos { padding: 0 0 110px; } .section--logos .logos-block__label { margin: 0; font-size: 14px; font-weight: 500; line-height: 21.7px; } .section--logos .logos-row { margin-top: 30px; gap: 44px; } .section--logos .logo-item--text { font-size: 24px; line-height: 37.2px; letter-spacing: -0.24px; color: #8b847c; } @media (max-width: 1000px) { .section--svc-hero:not(.section--svc-hero-center) .svc-hero__grid, .section--text-split .text-split__grid, .section--faq .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .section--plans .plans-cards { flex-wrap: wrap; } .section--svc-testimonial .svc-testi { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .section--svc-testimonial .svc-testi__dots { padding-left: 0; } } @media (max-width: 700px) { .section--svc-hero:not(.section--svc-hero-center) { padding: 48px 0 56px; } .section--svc-hero:not(.section--svc-hero-center) .svc-hero__title { font-size: 48px; line-height: 1.02; } .section--text-split { padding-bottom: 56px; } .section--text-split .text-split__title { font-size: 34px; line-height: 1.05; } .section--text-split .text-split__body { font-size: 18px; line-height: 1.5; } .section--ai-cards, .section--plans, .section--faq, .section--doc-pills, .section--svc-testimonial { padding: 80px 0; } .section--ai-cards .ai-cards__title, .section--faq .faq__title, .section--doc-pills .section__title { font-size: 36px; line-height: 1.05; } .section--ai-cards .ai-cards__intro { font-size: 17px; line-height: 1.5; } .section--plans .section__title { font-size: 40px; line-height: 1.05; } .section--plans .plans-tabs { flex-wrap: wrap; } .section--cta-band { min-height: 480px; } .section--cta-band .cta-band__heading { font-size: 52px; line-height: 1; } .section--cta-band .cta-band__inner { padding-bottom: 40px; } .section--svc-testimonial .svc-testi__quote { font-size: 28px; line-height: 1.15; } .section--logos .logos-row { gap: 20px 28px; } } /* The rule spans the 1180px content, not the gutters (Figma 1:13485). */ .section--text-split .text-split__grid--border { border-top: 0; position: relative; } .section--text-split .text-split__grid--border::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(39, 33, 27, 0.16); } /* Plan frames as in Figma: Essential solid dark, Plus soft periwinkle stripes. */ .section--plans .plan-card { background: #2f2923; } .section--plans .plan-card--featured { background: #d1e7ff repeating-linear-gradient(180deg, transparent 0 7px, #c3daf1 7px 9px); } .section--plans .plan-card__credits span { font-family: var(--font-body); font-size: 13px; color: var(--c-muted); } .section--plans .plan-card__dot { width: 14px; height: 14px; border-radius: 3px; } .section--plans .plan-card { min-height: 518.9px; } .section--svc-testimonial .svc-testi { min-height: 260px; } .section--doc-pills .section__head, .section--plans .section__head { gap: 0; } /* ====================================================== CORPORATE & SOFT LANDING */ /* Figma 1:12201. Region tabs are shared with the plans section (1:13548). */ .section--regions > .container, .section--assist > .container, .section--process-stairs > .container { max-width: calc(1180px + 2 * var(--gutter)); } /* Region / plan tabs: text + globe, coral underline on the active one. */ .section--plans .plans-tab, .region-tab { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 22px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font-family: var(--font-body); font-size: 15px; line-height: 24px; color: #675b55; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .section--plans .plans-tab svg, .region-tab svg { width: 13px; height: 13px; flex: none; } .section--plans .plans-tab:hover, .region-tab:hover { color: var(--c-ink); } .section--plans .plans-tab.is-active, .region-tab.is-active { background: none; color: #e77958; border-color: #e77958; } /* Regions (1:12254): globe 460 at +49px, 113px gap, 558px text column. */ .section--regions { padding: 128px 0; } .regions__grid { display: grid; grid-template-columns: 460px minmax(0, 558px); column-gap: 113px; align-items: center; padding-left: calc(var(--gutter) + 49px); } .regions__media img, .regions__media video { display: block; width: 100%; height: auto; } .region-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .regions__text { margin: 0; padding-top: 18px; font-family: var(--font-display); font-size: 34px; line-height: 39.1px; color: var(--c-ink); } .regions__text.plans-region { display: none; } .regions__text.plans-region.is-active { display: block; } .regions__note { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid rgba(39, 33, 27, 0.16); font-size: 14px; line-height: 21.7px; color: #675b55; } /* Assist list (1:12320). */ .section--assist { padding: 128px 0; } .assist__title { max-width: 756px; margin: 0 auto; font-family: var(--font-display); font-weight: 400; font-size: 111.888px; line-height: 106.294px; color: var(--c-ink); text-align: center; } .assist__list { list-style: none; margin: 48px auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } .assist__item { position: relative; min-height: 60.25px; box-sizing: border-box; padding: 15px 0 0 44px; border-top: 1px solid rgba(39, 33, 27, 0.16); } .assist__num { position: absolute; left: 0; top: 20px; font-family: var(--font-display); font-size: 15px; line-height: 23.25px; color: #e77958; } .assist__text { font-size: 17px; line-height: 26.35px; color: var(--c-ink); } .assist__actions { margin-top: 44px; display: flex; justify-content: center; } .section--assist .assist__cta { height: 44px; padding: 0 22px; border: 0; font-size: 15px; font-weight: 500; line-height: 23.25px; } /* Photo band with eyebrow (1:12360): 760px tall, eyebrow at 187px. */ .section--cta-band:has(.cta-band__eyebrow) { min-height: 760px; } .cta-band__eyebrow-wrap { position: absolute; left: 0; right: 0; top: 187px; z-index: 1; max-width: calc(1180px + 2 * var(--gutter)); margin-inline: auto; } .cta-band__eyebrow { margin: 0; font-size: 13px; font-weight: 500; line-height: 20px; color: #eeeedb; } /* Dark striped band (1:12407): 524px, centred 99.8px heading. */ .section--cta-band-dark { min-height: 524px; align-items: center; justify-content: center; background: #27211b url("../img/band-dark-stripes.svg") 0 0 / 100% 100% no-repeat; } .section--cta-band-dark .cta-band__inner { padding: 160px var(--gutter); text-align: center; } .section--cta-band-dark .cta-band__heading { max-width: 858px; margin: 0 auto; font-size: 99.792px; line-height: 101.788px; letter-spacing: -0.9979px; color: #eeeedb; } /* Process as a staircase (1:12366). */ .section--process-stairs { padding: 128px 0; } .section--process-stairs .process__title { margin: 0; max-width: none; text-align: left; font-size: 56px; line-height: 57.12px; letter-spacing: -0.56px; } .section--process-stairs .process__grid { margin-top: 44px; gap: 12px; align-items: end; } .section--process-stairs .process-step { display: flex; flex-direction: column; gap: 10px; min-height: calc(220px + var(--step, 0) * 40px); box-sizing: border-box; padding: 22px 20px 24px; border: 1px solid rgba(39, 33, 27, 0.16); border-radius: 10px; background: #f4f3ee; } .section--process-stairs .process-step--optional { background: transparent; border-style: dashed; } .section--process-stairs .process-step__num { font-family: var(--font-display); font-size: 40px; line-height: 40px; color: #e77958; } .section--process-stairs .process-step__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 23.1px; letter-spacing: -0.21px; color: var(--c-ink); } .section--process-stairs .process-step__text { margin: 0; font-size: 14px; line-height: 21.7px; color: #675b55; } @media (max-width: 1100px) { .regions__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-left: var(--gutter); } .regions__media { max-width: 360px; margin-inline: auto; } .section--process-stairs .process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .section--process-stairs .process-step { min-height: 0; } } @media (max-width: 700px) { .section--regions, .section--assist, .section--process-stairs { padding: 80px 0; } .regions__text { font-size: 26px; line-height: 1.2; } .assist__title { font-size: 56px; line-height: 1; } .assist__list { grid-template-columns: minmax(0, 1fr); } .section--cta-band:has(.cta-band__eyebrow) { min-height: 520px; } .cta-band__eyebrow-wrap { top: 40px; padding-inline: var(--gutter); } .section--cta-band-dark { min-height: 360px; } .section--cta-band-dark .cta-band__inner { padding: 80px var(--gutter); } .section--cta-band-dark .cta-band__heading { font-size: 48px; line-height: 1.05; } .section--process-stairs .process__title { font-size: 40px; line-height: 1.05; } .section--process-stairs .process__grid { grid-template-columns: minmax(0, 1fr) !important; } } .section--plans .plans-tab svg, .region-tab svg { fill: none; } .section--cta-band:has(.cta-band__eyebrow) .cta-band__media img { object-position: center top; } /* ================================================== FINTECH & DIGITAL ASSETS */ /* Figma 1:13921. Shared service-page pieces: person card, numbered/framed cards, check list, work grid, dark callout, contact band. 1180px column. */ .section--cards-numbered > .container, .section--cards-framed > .container, .section--feature-checks > .container, .section--work-grid > .container, .section--dark-note > .container, .section--contact-band > .container { max-width: calc(1180px + 2 * var(--gutter)); } /* Person card under the text split (1:13976): 440 x 102, centred. */ .person-card { display: flex; align-items: center; gap: 18px; width: 440px; max-width: 100%; box-sizing: border-box; margin: 28px auto 0; padding: 15px; background: #f4f3ee; border: 1px solid rgba(39, 33, 27, 0.16); border-radius: 10px; } .person-card__photo { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #b5d0ed; } .person-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .person-card__body { display: flex; flex-direction: column; } .person-card__label { font-size: 12px; line-height: 18.6px; color: #675b55; } .person-card__name { font-size: 16px; font-weight: 700; line-height: 24.8px; color: var(--c-ink); } .person-card__role { padding-top: 3px; font-size: 13px; line-height: 20.15px; color: #675b55; } .section--text-split:has(.person-card) .text-split__body p:last-of-type { margin-bottom: 0; } /* Numbered cards (Practice areas 1:13985, projects, corporate). */ .section--cards-numbered, .section--cards-framed { padding: 128px 0; } .section--cards-numbered .cards-grid__head, .section--cards-framed .cards-grid__head { max-width: none; margin: 0; } .section--cards-numbered .cards-grid__title, .section--cards-framed .cards-grid__title { margin: 0; font-size: 52px; line-height: 53.04px; letter-spacing: -0.52px; } .section--cards-numbered .cards-grid__intro { margin: 12px 0 0; max-width: none; font-size: 16px; line-height: 24.8px; color: #675b55; } .section--cards-numbered .cards-grid__grid, .section--cards-framed .cards-grid__grid { margin-top: 40px; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .section--cards-numbered .cg-card { display: flex; flex-direction: column; gap: 10px; min-height: 190px; box-sizing: border-box; padding: 24px 24px 28px; background: #f4f3ee; border: 1px solid rgba(39, 33, 27, 0.16); border-radius: 10px; } .section--cards-numbered .cg-card__num { font-family: var(--font-display); font-size: 15px; line-height: 23.25px; color: #e77958; } .section--cards-numbered .cg-card__title { margin: 0; font-size: 26px; line-height: 26.52px; letter-spacing: -0.26px; } .section--cards-numbered .cg-card__text { margin: 0; font-size: 14.5px; line-height: 22.475px; color: #675b55; } /* Bottom bar (1:14386): periwinkle, dark button with arrow. */ .cg-bar { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 26px 30px; border-radius: 12px; background: #b5d0ed; } .cg-bar__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 43.4px; color: var(--c-ink); } .cg-bar__text { margin: 0; font-size: 16px; line-height: 24.8px; color: #39322f; } .section--cards-grid .cg-bar__btn { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 999px; background: var(--c-ink); color: #eeeedb; font-size: 15px; font-weight: 500; line-height: 23.25px; transition: background-color 0.2s var(--ease); } .section--cards-grid .cg-bar__btn:hover { background: #3a332d; color: #eeeedb; } .cg-bar__btn svg { width: 14px; height: 14px; } /* Framed cards on a sand band (1:14033). */ .section--cards-framed { background: #e3e1d3; } .section--cards-framed .eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 500; line-height: 21.7px; letter-spacing: 0; color: var(--c-ink); } .section--cards-framed .cards-grid__intro { margin: 12px 0 0; max-width: 656px; font-size: 16px; line-height: 24.8px; color: #675b55; } .section--cards-framed .cards-grid__grid { gap: 16px; } .section--cards-framed .cg-card { display: flex; min-height: 297px; padding: 14px; border: 0; border-radius: 10px; background: #2f2923; box-sizing: border-box; } .section--cards-framed .cg-card--frame-1 { background: #b7cfe5 url("../img/ebook-form-frame.svg") 0 0 / 100% 100% no-repeat; } .section--cards-framed .cg-card--frame-2 { background: #d1e7ff repeating-linear-gradient(180deg, transparent 0 7px, #c3daf1 7px 9px); } .cg-card__panel { flex: 1; display: flex; flex-direction: column; padding: 24px; border-radius: 6px; background: var(--c-cream); } .section--cards-framed .cg-card__num { font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 20px; color: #e77958; } .section--cards-framed .cg-card__title { margin: 8px 0 0; font-size: 26px; line-height: 26.52px; letter-spacing: -0.26px; } .section--cards-framed .cg-card__text { margin: 10px 0 0; font-size: 15px; line-height: 23.25px; color: #675b55; } .cg-card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(39, 33, 27, 0.16); font-size: 15px; font-weight: 700; line-height: 23.25px; color: var(--c-ink); } .section--cards-framed .cg-card__text + .cg-card__foot, .section--cards-framed .cg-card__title + .cg-card__foot { margin-top: auto; } .section--cards-framed .cg-card__text { margin-bottom: 22px; } /* Check list (1:14077): title left (408.7), list right (715.3), 56px gap. */ .section--feature-checks { padding: 128px 0; } .section--feature-checks .feature-list__grid { display: grid; grid-template-columns: minmax(0, 408.7fr) minmax(0, 715.3fr); gap: 56px; align-items: start; } .section--feature-checks .feature-list__title { font-size: 52px; line-height: 53.04px; letter-spacing: -0.52px; margin: 0; } .section--feature-checks .feature-list__intro { margin: 12px 0 0; max-width: none; font-size: 16px; line-height: 24.8px; color: #675b55; } .section--feature-checks .feature-list__items { display: block; } .section--feature-checks .feature-list__item { display: flex; align-items: flex-start; gap: 16px; min-height: 58.8px; box-sizing: border-box; padding: 16px 0 14px; border-top: 1px solid rgba(39, 33, 27, 0.16); } .feature-list__check { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 5px; color: #e77958; } .feature-list__check svg { width: 14px; height: 14px; display: block; } .section--feature-checks .feature-list__text { font-size: 16px; line-height: 24.8px; color: #39322f; } /* How we work (1:14125): 0 / 128, 511 | 613, 2x2 cards 150px. */ .section--work-grid { padding: 0 0 128px; } .work-grid { display: grid; grid-template-columns: minmax(0, 511fr) minmax(0, 613fr); gap: 56px; align-items: center; } .work-grid__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 53.04px; letter-spacing: -0.52px; color: var(--c-ink); } .work-grid__lead { margin: 18px 0 0; font-size: 18px; line-height: 27.9px; color: #675b55; } .work-grid__note { margin: 22px 0 0; padding-left: 12px; border-left: 2px solid #e77958; font-size: 13px; line-height: 20.15px; color: #675b55; } .work-grid__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .work-card { display: flex; flex-direction: column; gap: 6px; min-height: 150px; box-sizing: border-box; padding: 20px; border-radius: 10px; background: #f4f3ee; border: 1px solid rgba(39, 33, 27, 0.16); color: var(--c-ink); } .work-card--periwinkle { background: #b5d0ed; border-color: #b5d0ed; } .work-card--dark { background: var(--c-ink); border-color: var(--c-ink); color: #eeeedb; } .work-card--sand { background: #d3d0ba; border-color: #d3d0ba; } .work-card__kicker { font-size: 12px; font-weight: 700; line-height: 18.6px; opacity: 0.75; } .work-card__title { font-family: var(--font-display); font-size: 22px; line-height: 24.2px; } .work-card__text { font-size: 13.5px; line-height: 20.925px; opacity: 0.85; } /* Dark callout (1:14298): overlaps the plans padding by 40px. */ .section--dark-note { padding: 0 0 120px; margin-top: -40px; } .dark-note { display: grid; grid-template-columns: minmax(0, 323.4fr) minmax(0, 754.6fr); gap: 30px; padding: 32px 36px; border-radius: 12px; background: var(--c-ink); } .dark-note__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 30.6px; letter-spacing: -0.3px; color: #eeeedb; } .dark-note__text { margin: 0; font-size: 16px; line-height: 24.8px; color: #c5bcb9; } /* Contact band (1:14435): coral, 90 / 90. */ .section--contact-band { padding: 90px 0; background: #e77958; } .contact-band { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .contact-band__lead { display: flex; align-items: center; gap: 20px; max-width: 656px; } .contact-band__photo { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #b5d0ed; } .contact-band__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .contact-band__title { margin: 0; max-width: 541px; font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 44.88px; letter-spacing: -0.44px; color: #eeeedb; } .contact-band__side { flex: 0 0 auto; min-width: 239px; } .contact-band__role { margin: 0 0 12px; font-size: 16px; line-height: 24.8px; color: #fbe7e1; } .section--contact-band .contact-band__btn { height: 44px; padding: 0 22px; border: 0; font-size: 15px; font-weight: 500; line-height: 23.25px; } /* Logos in two centred rows (1:14395). */ .section--logos .logos-row { row-gap: 15px; } @media (max-width: 1000px) { .section--cards-numbered .cards-grid__grid, .section--cards-framed .cards-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .section--feature-checks .feature-list__grid, .work-grid, .dark-note { grid-template-columns: minmax(0, 1fr); gap: 32px; } .contact-band, .cg-bar { flex-direction: column; align-items: flex-start; } } @media (max-width: 700px) { .section--cards-numbered, .section--cards-framed, .section--feature-checks { padding: 80px 0; } .section--work-grid { padding-bottom: 80px; } .section--cards-numbered .cards-grid__grid, .section--cards-framed .cards-grid__grid { grid-template-columns: minmax(0, 1fr); } .section--cards-numbered .cards-grid__title, .section--cards-framed .cards-grid__title, .section--feature-checks .feature-list__title, .work-grid__title { font-size: 36px; line-height: 1.05; } .work-grid__cards { grid-template-columns: minmax(0, 1fr); } .contact-band__lead { flex-direction: column; align-items: flex-start; } .contact-band__title { font-size: 32px; line-height: 1.05; } .person-card { width: 100%; } } /* Numbered cards on a sand band (Projects 1:14305): cream cards, 23px titles. */ .section--cards-band { background: #e3e1d3; } .section--cards-band .cg-card { background: #eeeedb; } .section--cards-band .cg-card__title { font-size: 23px; line-height: 23.46px; letter-spacing: -0.23px; } .section--cards-numbered:has(.cg-bar) .cg-card__title { font-size: 23px; line-height: 23.46px; letter-spacing: -0.23px; } /* Framed cards: measured against Figma 1:14044 ("Legal Department" = 223px wide). */ .section--cards-framed .cg-card__title { font-size: 28px; line-height: 29.4px; letter-spacing: -0.28px; } .section--cards-framed .cg-card__text { font-size: 16px; line-height: 24.8px; } .section--cards-framed .cg-card__foot { font-size: 16px; line-height: 24.8px; } .section--cards-framed .cg-card__text { line-height: 24px; margin-bottom: 12px; } .section--cards-framed .cg-card__foot { padding-top: 14px; } .section--cards-framed .cg-card__panel { padding-bottom: 20px; } @media (max-width: 1000px) { .section--cards-numbered .cards-grid__grid, .section--cards-framed .cards-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 700px) { .section--cards-numbered .cards-grid__grid, .section--cards-framed .cards-grid__grid { grid-template-columns: minmax(0, 1fr) !important; } .section--cards-numbered .cg-card__title { white-space: normal; } } /* ==================================================== INTELLECTUAL PROPERTY */ /* Figma 1:12767. */ /* Half image + sand panel (1:12814): 756 | 756, 787.6px tall, panel padding 90.72. */ .section--media-half { display: grid; grid-template-columns: 1fr 1fr; min-height: 787.6px; padding: 0; } .media-half__media { position: relative; overflow: hidden; background: var(--c-cream-2); } .media-half__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .media-half__panel { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 90.72px; background: #e3e1d3; } .media-half__title { margin: 0; max-width: 575px; font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 57.12px; letter-spacing: -0.56px; color: var(--c-ink); } .media-half__body { max-width: 579.7px; font-size: 18px; line-height: 27.9px; color: #675b55; } .media-half__body p { margin: 0; } .media-half__list { list-style: none; margin: 0; padding: 0; } .media-half__list li { font-family: var(--font-display); font-size: 34px; line-height: 37.4px; color: #b9b4a6; transition: color 0.4s var(--ease); } .media-half__list li.is-active { color: #e77958; } /* Rotating title (1:12839): 128 / 128, 96.77px heading, coral rotating word. */ .section--rotating { padding: 128px 0; } .rotating { display: flex; flex-direction: column; align-items: center; text-align: center; } .rotating__title { margin: 0; max-width: none; font-family: var(--font-display); font-weight: 400; font-size: 96.768px; line-height: 96.768px; letter-spacing: -0.9677px; color: var(--c-ink); } .rotating__words { display: grid; justify-items: center; color: #e77958; } .rotating__word { grid-area: 1 / 1; opacity: 0; transform: translateY(30%); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .rotating__word.is-active { opacity: 1; transform: none; } .rotating__text { margin: 22px 0 0; max-width: 607px; font-size: 18px; line-height: 27.9px; color: #675b55; } .section--rotating .rotating__cta { margin-top: 30px; height: 44px; padding: 0 22px; border: 0; font-size: 15px; font-weight: 500; line-height: 23.25px; } /* Assist list straight after the rotating title: no title, 0 / 128. */ .section--rotating + .section--assist { padding-top: 0; } .section--rotating + .section--assist .assist__list { margin-top: 0; } .section--assist + .section--process-stairs { padding-top: 0; } .section--process-stairs .process__note { margin: 16px 0 0; max-width: none; text-align: left; font-size: 13px; line-height: 20.15px; color: #675b55; } /* Big number (1:12919): dark, 140 / 140, 210px coral number, 38px label. */ .section--big-number { padding: 140px 0; background: var(--c-ink); } .section--big-number .big-number__inner { padding-block: 0; } .section--big-number .big-number__n { font-size: 210px; line-height: 189px; letter-spacing: 0; color: #e77958; } .section--big-number .big-number__label { margin: 0; font-family: var(--font-display); font-size: 38px; line-height: 58.9px; color: #eeeedb; } .section--big-number + .section--logos { padding-top: 110px; } @media (max-width: 1000px) { .section--media-half { grid-template-columns: minmax(0, 1fr); min-height: 0; } .media-half__media { aspect-ratio: 4 / 3; } .media-half__panel { padding: 56px var(--gutter); } } @media (max-width: 700px) { .media-half__title { font-size: 38px; line-height: 1.05; } .media-half__list li { font-size: 26px; line-height: 1.15; } .section--rotating { padding: 80px 0; } .rotating__title { font-size: 48px; line-height: 1.02; } .section--rotating + .section--assist { padding-bottom: 80px; } .section--big-number { padding: 80px 0; } .section--big-number .big-number__n { font-size: 96px; line-height: 1; } .section--big-number .big-number__label { font-size: 24px; line-height: 1.3; } .section--big-number + .section--logos { padding-top: 64px; } } .section--assist .assist__item { padding-bottom: 17px; } .svc-testi__label { margin-bottom: 8px; } .section--svc-testimonial .svc-testi { margin: 0; } .svc-testi__label { margin-bottom: 12px; } /* ========================================================= LAWI STANDARDS */ /* Figma 1:14534 ("How we show up"). */ .section--intro-stack > .container, .section--principles > .container, .section--cta-framed > .container { max-width: calc(1180px + 2 * var(--gutter)); } /* Intro (1:14569): 96 + 57.8 top, centred text, 1180 x 536 image, links. */ .section--intro-stack { padding: 153.8px 0 64px; } .intro-stack__head { display: flex; flex-direction: column; align-items: center; text-align: center; } .intro-stack__eyebrow { margin: 0; font-size: 14px; font-weight: 500; line-height: 21.7px; color: var(--c-ink); } .intro-stack__title { margin: 12px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 127.008px; line-height: 116.847px; letter-spacing: -1.2701px; color: var(--c-ink); max-width: none; } .intro-stack__text { margin: 26px 0 0; max-width: 614px; font-size: 22px; line-height: 34.1px; color: #675b55; } .intro-stack__media { margin-top: 57.8px; height: 536.4px; border-radius: 8px; overflow: hidden; background: var(--c-cream-2); } .intro-stack__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .intro-stack__links { margin-top: 64px; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border-top: 1px solid rgba(39, 33, 27, 0.16); border-bottom: 1px solid rgba(39, 33, 27, 0.16); } .intro-stack__link { display: flex; align-items: center; justify-content: space-between; min-height: 88px; box-sizing: border-box; padding: 22px 24px; color: var(--c-ink); transition: background-color 0.2s var(--ease); } .intro-stack__link:first-child { padding-left: 0; } .intro-stack__link + .intro-stack__link { border-left: 1px solid rgba(39, 33, 27, 0.16); } .intro-stack__link:hover .intro-stack__label { color: #e77958; } .intro-stack__label { font-family: var(--font-display); font-size: 22px; line-height: 24.2px; transition: color 0.2s var(--ease); } .intro-stack__num { font-family: var(--font-display); font-size: 44px; line-height: 44px; color: #e77958; } /* Striped divider (1:14598). */ .stripe-divider { height: 56px; overflow: hidden; background: #a4c5e9; color: #e77958; } .stripe-divider svg { display: block; width: 100%; height: 100%; } .stripe-divider--cream { background: #eeeedb; color: #a4c5e9; } .stripe-divider--coral { background: #e77958; color: #eeeedb; } /* Principles (1:14599): 96 / 96, 374.66 | 749.34, 56px gap. */ .section--principles { padding: 96px 0; scroll-margin-top: 81px; } .section--principles .principles__grid { display: grid; grid-template-columns: minmax(0, 374.66fr) minmax(0, 749.34fr); gap: 56px; align-items: start; } .section--principles .principles__num { margin: 0; font-family: var(--font-display); font-size: 120px; line-height: 108px; color: #e77958; } .section--principles .principles__heading { margin: 0; padding-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: 46.92px; letter-spacing: -0.46px; color: var(--c-ink); max-width: none; } .section--principles .principles__sub { margin: 0; padding-top: 12px; max-width: 351.36px; font-size: 16px; line-height: 24.8px; color: #675b55; } .section--principles .principles__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-ink); } .section--principles .principle { display: grid; grid-template-columns: 52.27px minmax(0, 361px) minmax(0, 289px); column-gap: 23.73px; align-items: start; padding: 28px 0 28.6px; border-bottom: 1px solid rgba(39, 33, 27, 0.16); } .section--principles .principle__num { padding-top: 11px; font-family: var(--font-display); font-size: 18px; line-height: 27.9px; color: #675b55; } .section--principles .principle__title { font-family: var(--font-display); font-size: 36px; line-height: 37.8px; letter-spacing: -0.36px; color: var(--c-ink); } .section--principles .principle__text { padding-top: 13px; font-size: 16px; line-height: 24.8px; color: #675b55; } /* Long band headings (1:14657). */ .section--cta-band .cta-band__heading--long { max-width: 752px; font-size: 81.648px; line-height: 83.281px; letter-spacing: -0.8165px; } /* Framed CTA (1:14686): 128 / 128, 1180 x 406, frame 64px. */ .section--cta-framed { padding: 128px 0; } .cta-framed { padding: 64.5px; background: url("../img/standards-cta-frame.svg") 0 0 / 100% 100% no-repeat; border-radius: 6px; } .cta-framed__panel { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 277px; box-sizing: border-box; padding: 40px 63px 40px 63.5px; border-radius: 4px; background: var(--c-cream); } .cta-framed__title { margin: 0; max-width: 520px; font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 53.04px; letter-spacing: -0.52px; color: var(--c-ink); } .cta-framed__text { margin: 16px 0 0; font-size: 16px; line-height: 24.8px; color: #675b55; } .section--cta-framed .cta-framed__btn { flex: none; height: 44px; padding: 0 22px; border: 0; font-size: 15px; font-weight: 500; line-height: 23.25px; } @media (max-width: 1000px) { .section--principles .principles__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .section--principles .principle { grid-template-columns: 48px minmax(0, 1fr); row-gap: 8px; } .section--principles .principle__text { grid-column: 2; padding-top: 0; } .cta-framed__panel { flex-direction: column; align-items: flex-start; } } @media (max-width: 700px) { .section--intro-stack { padding: 56px 0 48px; } .intro-stack__title { font-size: 56px; line-height: 1; white-space: normal; } .intro-stack__text { font-size: 18px; line-height: 1.5; } .intro-stack__media { height: 260px; margin-top: 32px; } .intro-stack__links { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } .intro-stack__link { padding: 18px 0; min-height: 0; } .intro-stack__link + .intro-stack__link { border-left: 0; border-top: 1px solid rgba(39, 33, 27, 0.16); } .section--principles { padding: 64px 0; } .section--principles .principles__num { font-size: 80px; line-height: 1; } .section--principles .principles__heading { font-size: 34px; line-height: 1.05; } .section--principles .principle__title { font-size: 26px; line-height: 1.1; } .section--cta-band .cta-band__heading--long { font-size: 44px; line-height: 1.05; } .section--cta-framed { padding: 80px 0; } .cta-framed { padding: 16px; } .cta-framed__panel { padding: 28px 22px; } .cta-framed__title { font-size: 34px; line-height: 1.05; } } /* ============================================================== PARTNERS Figma 1:9245 (1440 frame): intro 639 below the header, logos strip 334, CTA 439. Spacing below is measured from the Figma text boxes (cap-trimmed). */ .section--partners-intro { padding: 70px 0 150px; } /* Without the eyebrow the title keeps its Figma position (eyebrow 12px + 30px gap). */ .section--partners-intro-noeyebrow { padding-top: 112px; } .partners-intro { max-width: calc(1340px + 2 * var(--gutter)); } .partners-intro__head { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-bottom: 40px; text-align: center; color: var(--c-ink); } .partners-intro__eyebrow { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.12; letter-spacing: -0.8px; text-box: trim-both cap alphabetic; } .partners-intro__title { margin: 0; max-width: none; font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 0.99; letter-spacing: 0; text-box: trim-both cap alphabetic; } .partners-intro__row { margin: 50px auto 0; max-width: 936px; display: grid; grid-template-columns: minmax(0, 443fr) minmax(0, 365fr); column-gap: 128px; align-items: center; } .partners-intro__media img { display: block; width: 100%; height: auto; aspect-ratio: 443 / 259; object-fit: cover; border-radius: 6px; } .partners-intro__text { margin: 0; font-weight: 500; font-size: 14px; line-height: 1.3; letter-spacing: -0.56px; color: #7f7f7f; text-box: trim-both cap alphabetic; } .section--logos-strip { padding: 114px 0; } .section--logos-strip .logos-block__label { font-weight: 600; font-size: 16px; line-height: 1.12; letter-spacing: -0.8px; text-box: trim-both cap alphabetic; } .section--logos-strip .logos-row { margin-top: 50px; gap: 40px; row-gap: 24px; min-height: 43.84px; opacity: 0.6; } .section--logos-strip .logo-item__img { width: var(--w, auto); height: auto; max-width: none; opacity: 1; } .logos-row__divider { flex: 0 0 auto; width: 1px; height: 20px; border-radius: 100px; background: rgba(39, 33, 27, 0.4); } .section--cta-simple-small { padding: 150px 0; } .section--cta-simple-small .cta-simple__title { font-size: 32px; line-height: 1.15; } .section--cta-simple-small .cta-simple__inner { max-width: calc(1252px + 2 * var(--gutter)); } .section--cta-simple-small .cta-simple__text { max-width: none; } .section--cta-simple-small .cta-simple__cta { margin-top: 30px; } @media (max-width: 900px) { .section--partners-intro { padding: 56px 0 90px; } .section--partners-intro-noeyebrow { padding-top: 56px; } .partners-intro__row { grid-template-columns: minmax(0, 1fr); row-gap: 32px; max-width: 560px; } .section--logos-strip { padding: 80px 0; } .section--cta-simple-small { padding: 90px 0; } } @media (max-width: 600px) { .section--logos-strip .logos-row { gap: 20px 24px; } .section--logos-strip .logo-item__img { width: calc(var(--w, 140px) * 0.72); } .section--logos-strip .logos-row__divider { display: none; } .section--cta-simple-small .cta-simple__text { white-space: normal; } } /* ============================================================ MOBILE: SERVICE PAGES No mobile frames exist for the inner pages, so they follow the system of the mobile home (Figma 1:6526): 18px gutter, 60px section padding, 40px hero title, 28px section titles, 32px band headings, 45px full-width CTAs and the document catalogue as category tabs. */ @media (max-width: 700px) { #primary .doc-pills__grid { display: block; } #primary .doc-pills__col { display: none; } #primary .doc-pills__col.is-active { display: block; } #primary .doc-pills__h { display: none; } } @media (max-width: 600px) { #primary .section--svc-hero { padding-block: 40px 60px; } #primary .section--text-split, #primary .section--ai-cards, #primary .section--plans, #primary .section--faq, #primary .section--doc-pills, #primary .section--svc-testimonial, #primary .section--regions, #primary .section--assist, #primary .section--work-grid, #primary .section--feature-list, #primary .section--cards-grid, #primary .section--process, #primary .section--rotating, #primary .section--big-number { padding-block: 60px; } #primary .section--text-split { padding-top: 0; } #primary .section--logos { padding-bottom: 60px; } #primary .section--dark-note { padding-bottom: 60px; } #primary .section--contact-band { padding-block: 60px; } #primary .svc-hero__title { font-size: 40px; line-height: 0.95; letter-spacing: -0.4px; } #primary .svc-hero__lead { font-size: 16px; line-height: 1.4; } #primary .section--svc-hero .svc-hero__media { margin-top: 32px; aspect-ratio: 16 / 10; } #primary .text-split__title, #primary .ai-cards__title, #primary .faq__title, #primary .assist__title, #primary .process__title, #primary .media-half__title, #primary .rotating__title, #primary .cards-grid__title, #primary .feature-list__title, #primary .work-grid__title, #primary .contact-band__title, #primary .section--plans .section__title, #primary .section--doc-pills .section__title { font-size: 28px; line-height: 0.99; letter-spacing: -0.28px; } #primary .cta-band__heading, #primary .cta-band__heading--long { font-size: 32px; line-height: 0.99; letter-spacing: -0.32px; } #primary .section--svc-hero .svc-hero__cta, #primary .section--doc-pills .doc-pills__actions .btn, #primary .assist__cta, #primary .rotating__cta, #primary .contact-band__btn, #primary .cta-band__cta { width: 100%; height: 45px; padding: 0 23px; font-size: 17px; letter-spacing: -0.85px; } #primary .section--doc-pills .docs-tabs { margin-top: 0; } #primary .section--doc-pills .doc-pill { font-size: 12px; letter-spacing: -0.6px; } #primary .section--doc-pills .doc-pills__actions { margin-top: 44px; } #primary .plans-tabs, #primary .region-tabs { flex-wrap: nowrap; gap: 0; } #primary .plans-tabs > *, #primary .region-tabs > * { flex: 1 1 0; min-width: 0; padding-inline: 0; justify-content: center; } } /* ============================================================ MOBILE: TEAM, PARTNERS, STANDARDS, BLOG, E-BOOKS Same mobile system as the home and service pages. */ @media (max-width: 600px) { #primary .section--team-grid, #primary .section--comparison, #primary .section--mindset, #primary .section--cta-simple, #primary .section--recruit, #primary .section--principles, #primary .section--cta-framed, #primary .section--logos-strip { padding-block: 60px; } #primary .section--stats { padding-bottom: 60px; } #primary .section--partners-intro { padding-block: 40px 60px; } #primary .section--lens { padding-block: 60px; } #primary .intro-stack__title, #primary .blog-index__title { font-size: 40px; line-height: 0.95; letter-spacing: -0.4px; } #primary .team-grid__title, #primary .section--comparison .section__title, #primary .cta-simple__title, #primary .section--cta-simple-small .cta-simple__title, #primary .recruit-card__title, #primary .principles__heading, #primary .cta-framed__title, #primary .section--lens .blog-index__title { font-size: 28px; line-height: 0.99; letter-spacing: -0.28px; } #primary .ebk-h2, #primary .post-related__title, #primary .ebk-form__title { font-size: 28px; line-height: 0.99; letter-spacing: -0.28px; } #primary .section--comparison .btn, #primary .cta-simple__cta, #primary .recruit-card__cta, #primary .cta-framed__btn, #primary .ebk-hero .ebk-btn { width: 100%; height: 45px; padding: 0 23px; font-size: 17px; letter-spacing: -0.85px; } #primary .section--cta-simple .cta-simple__inner { align-items: stretch; } #primary .section--cta-simple-small .cta-simple__text { white-space: normal; } } /* E-book form honeypot: off-screen for people, still present for bots. */ .ebk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ============================================================ MOBILE MENU (drawer) No mobile frame exists, so the drawer takes the desktop dropdown's language (Figma "Menu DESPLEGADO" 1:5982): #272727 ground, hairline dividers rgba(255,255,255,.15), Cal Sans 16 white titles over 14px #c4c4c4 descriptions, and the mobile header's 57px row for logo + close. */ .submenu-toggle { display: none; } @media (max-width: 1100px) { body .primary-nav { background: #272727; padding: 0 18px 24px; } body .primary-nav__head { min-height: 57px; margin: 0 -18px; padding: 0 8px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } body .primary-nav__head .site-brand__img { height: 22px; } body #primary-menu { flex: 0 0 auto; justify-content: flex-start; align-items: stretch; gap: 0; width: 100%; } body #primary-menu > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } body #primary-menu > li > a { padding: 18px 0; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: #fff; } body .primary-nav .menu-item-has-children > a::after { display: none; } .submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; } .submenu-toggle::before { content: ""; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.2s var(--ease); } .is-open > .submenu-toggle::before { transform: translateY(3px) rotate(225deg); } body .primary-nav .sub-menu { grid-column: 1 / -1; display: none; flex-direction: column; align-items: stretch; gap: 22px; margin: 0; padding: 4px 0 24px; } body .primary-nav li.is-open > .sub-menu { display: flex; } body .primary-nav .sub-menu a { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; font-family: var(--font-body); white-space: normal; opacity: 1; } body .primary-nav .sub-menu__title { font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 0.91; color: #fff; text-box: trim-both cap alphabetic; } body .primary-nav .sub-menu__desc { display: block; font-size: 14px; line-height: 1.44; letter-spacing: -0.42px; color: #c4c4c4; text-box: trim-both cap alphabetic; } body .primary-nav__foot { margin-top: auto; gap: 16px; padding-top: 32px; border-top: 0; } body .primary-nav__foot .lawi-lang-switcher { gap: 0.25rem; padding: 8px 14px; color: #fff; } body .primary-nav__head .nav-close { padding: 0; } body .primary-nav__head .nav-close svg { flex: 0 0 22px; width: 22px; height: 22px; } body .primary-nav__foot .btn { height: 45px; padding: 0 23px; font-size: 17px; letter-spacing: -0.85px; } } /* ============================================================ TABLET (601-900px) No tablet frames exist. Between the mobile system and desktop: the document catalogues switch to category tabs (as on mobile) instead of long two-column lists of tiny chips, and the Lawi Lens banner keeps its staircase to the right. */ @media (min-width: 601px) and (max-width: 900px) { .docs-tabs { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; margin: 0 0 40px; padding: 0; border-bottom: 1px solid rgba(39, 33, 27, 0.15); } .docs-tabs::-webkit-scrollbar { display: none; } .docs-tabs__tab { flex: 0 0 auto; padding: 14px 0; margin: 0 0 -1px; border: 0; border-bottom: 1px solid transparent; background: transparent; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.12; letter-spacing: -0.3px; color: var(--c-ink); opacity: 0.35; white-space: nowrap; cursor: pointer; } .docs-tabs__tab.is-active { opacity: 1; font-weight: 700; border-bottom-color: var(--c-ink); } .docs-grid, .doc-pills__grid { display: block; } .docs-col, .doc-pills__col { display: none; padding: 0; border-left: 0; } .docs-col.is-active, .doc-pills__col.is-active { display: block; } .docs-col__title, .doc-pills__h { display: none; } .docs-col.is-active ul, .docs-col.is-active .docs-tags { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 11px; } .docs-tag { height: 35px; padding: 0 16px; font-size: 13px; letter-spacing: -0.6px; white-space: nowrap; } #primary .section--doc-pills .doc-pill { font-size: 13px; } .ebooks-card { position: relative; isolation: isolate; overflow: hidden; flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; min-height: 240px; } .ebooks-card__content, .ebooks-card__actions { position: relative; z-index: 1; max-width: 50%; } .ebooks-card__media { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; opacity: 1; } .ebooks-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } } @media (min-width: 601px) and (max-width: 1100px) { body .primary-nav { padding-inline: var(--gutter); } body .primary-nav__head { margin-inline: calc(var(--gutter) * -1); padding-left: var(--gutter); } body .primary-nav__foot { flex-direction: row; align-items: center; justify-content: space-between; } body .primary-nav__foot .btn { width: auto; } } /* Tablet type scale: between the mobile system (40 / 28 / 32) and desktop. */ @media (min-width: 601px) and (max-width: 900px) { #primary .svc-hero__title, #primary .intro-stack__title, #primary .blog-index__title, #primary .partners-intro__title { font-size: 48px; line-height: 0.95; letter-spacing: -0.48px; } #primary .text-split__title, #primary .ai-cards__title, #primary .faq__title, #primary .assist__title, #primary .process__title, #primary .media-half__title, #primary .rotating__title, #primary .cards-grid__title, #primary .feature-list__title, #primary .work-grid__title, #primary .contact-band__title, #primary .section--plans .section__title, #primary .section--doc-pills .section__title, #primary .team-grid__title, #primary .section--comparison .section__title, #primary .cta-simple__title, #primary .recruit-card__title, #primary .principles__heading, #primary .cta-framed__title, #primary .section--lens .blog-index__title, #primary .ebk-h2, #primary .post-related__title { font-size: 34px; line-height: 0.99; letter-spacing: -0.34px; } #primary .cta-band__heading, #primary .cta-band__heading--long { font-size: 40px; line-height: 0.99; letter-spacing: -0.4px; } #primary .svc-hero__lead { font-size: 16px; line-height: 1.4; } #primary .ebk-hero__title, #primary .post-head__title { font-size: 48px; line-height: 0.99; letter-spacing: -0.48px; } #primary .blog-card--feature .blog-card__title { font-size: 40px; } #primary .team-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #primary .plans-cards { flex-wrap: nowrap; gap: 16px; } #primary .plans-cards > .plan-card { flex: 1 1 0; min-width: 0; } } /* Tablet landscape (901-1100px): four 225px feature cards are too narrow for their titles; use a 2x2 grid. */ @media (min-width: 901px) and (max-width: 1100px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ HOME BLOG + TEAM (Figma 1:8130, 1:7939) On desktop the blog teaser is not a bleeding carousel: four 320 x 424 cards fill the 1340px content width (x 50-1390 at 1440), 90px under the eyebrow, the CTA 90px below them, then the Lawi Lens banner (also 1340 wide) 100px further, and 130px of padding at top and bottom. The team carousel starts on that same 1340 content edge. */ @media (min-width: 1101px) { .section--blog { padding: 130px 0 100px; } .section--blog > .container, .section--ebooks > .container { max-width: calc(1340px + 2 * var(--gutter)); } .section--blog .section__head { margin-bottom: 90px; } .section--blog .blog__eyebrow { font-size: 16px; line-height: 1.12; letter-spacing: -0.8px; text-box: trim-both cap alphabetic; } /* Four columns: exactly 320px wide at 1340, narrower below it (height stays 424 so the text fits). */ .section--blog .blog-grid:not(.blog-grid--index) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; width: auto; margin: 0; transform: none; padding: 0; overflow: visible; } .section--blog .blog-grid:not(.blog-grid--index) .blog-card { height: auto; min-height: 424px; } .blog__cta { margin-top: 90px; } .blog__cta .btn { height: 45px; padding: 0 23px; font-size: 17px; letter-spacing: -0.85px; } .section--ebooks { padding-bottom: 130px; } } @media (min-width: 701px) { .section--team .team-row { padding-left: max(var(--gutter), calc((100vw - 1340px) / 2)); scroll-padding-left: max(var(--gutter), calc((100vw - 1340px) / 2)); } } /* Team slider (1101px+): paged in sets of 4 entirely by main.js (initTeamSlider). No CSS scroll-snap here - snapping fought the scripted animation - and the row does not scroll natively, so wheel/trackpad gestures go through the script. touch-action keeps vertical page scrolling for touch while horizontal drags reach the slider. */ @media (min-width: 1101px) { .section--team .team-row { overflow-x: hidden; scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y; cursor: grab; } .section--team .team-row:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; } .section--team .team-row.is-dragging { cursor: grabbing; user-select: none; } .section--team .team-row.is-dragging .team-member { pointer-events: none; } .section--team .team-member { scroll-snap-align: none; } .section--team .team-member img { -webkit-user-drag: none; user-select: none; } } /* Home blog teaser on mobile: paged one card at a time by main.js (initBlogSlider, same pager as the team slider). No scroll-snap - it fought the scripted animation - and no native horizontal scroll; vertical page scrolling stays. */ @media (max-width: 700px) { .section--blog .blog-grid:not(.blog-grid--index) { overflow-x: hidden; scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y; } .section--blog .blog-grid:not(.blog-grid--index) .blog-card { scroll-snap-align: none; } .section--blog .blog-grid.is-dragging { user-select: none; } .section--blog .blog-grid.is-dragging .blog-card { pointer-events: none; } .section--blog .blog-grid:not(.blog-grid--index):focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; } } /* Home solutions and team carousels on mobile: paged one card at a time by main.js (initFeatureSlider / initTeamSlider), like the blog teaser above. */ @media (max-width: 700px) { .section--features .feature-grid, .section--team .team-row { overflow-x: hidden; scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y; } .section--features .feature-card, .section--team .team-member { scroll-snap-align: none; } .section--features .feature-grid.is-dragging, .section--team .team-row.is-dragging { user-select: none; } .section--features .feature-grid.is-dragging .feature-card, .section--team .team-row.is-dragging .team-member { pointer-events: none; } .section--features .feature-grid:focus-visible, .section--team .team-row:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; } .section--team .team-member img { -webkit-user-drag: none; } } /* Tablet (701-1100px): the team row, and the blog teaser where it is a row (901-1100; 2x2 grid below), page by as many cards as fit (main.js). */ @media (min-width: 701px) and (max-width: 1100px) { .section--team .team-row { overflow-x: hidden; scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y; } .section--team .team-member { scroll-snap-align: none; } .section--team .team-row.is-dragging { user-select: none; } .section--team .team-row.is-dragging .team-member { pointer-events: none; } .section--team .team-row:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; } .section--team .team-member img { -webkit-user-drag: none; } } @media (min-width: 901px) and (max-width: 1100px) { .section--blog .blog-grid:not(.blog-grid--index) { overflow-x: hidden; scroll-snap-type: none; scroll-behavior: auto; touch-action: pan-y; } .section--blog .blog-grid:not(.blog-grid--index) .blog-card { scroll-snap-align: none; } .section--blog .blog-grid.is-dragging { user-select: none; } .section--blog .blog-grid.is-dragging .blog-card { pointer-events: none; } .section--blog .blog-grid:not(.blog-grid--index):focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; } } /* ============================================================ 404 PAGE No Figma frame: built from the service-hero type scale, the mega-menu link pattern (title + description) and a coral stripe band before the footer. */ .nf { padding: 110px 0 120px; } .nf__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 60px; } .nf__eyebrow { margin: 0 0 28px; font-size: 16px; font-weight: 600; line-height: 1.12; letter-spacing: -0.8px; color: var(--c-ink); } .nf__title { margin: 0; max-width: 11ch; font-family: var(--font-display); font-weight: 400; font-size: 76px; line-height: 0.98; letter-spacing: -0.76px; color: var(--c-ink); } .nf__lead { margin: 28px 0 40px; max-width: 520px; font-size: 17px; line-height: 26.35px; color: #675b55; } .nf__actions { display: flex; flex-wrap: wrap; gap: 12px; } .nf__actions .btn--ghost { border: 1px solid rgba(39, 33, 27, 0.35); color: var(--c-ink); } @media (hover: hover) and (pointer: fine) { .nf__actions .btn--ghost:hover { background-color: rgba(39, 33, 27, 0.06); border-color: var(--c-ink); } } .nf__code { margin: 0 0 -0.06em; font-family: var(--font-display); font-weight: 400; font-size: clamp(160px, 22vw, 340px); line-height: 0.8; letter-spacing: -0.05em; color: var(--c-periwinkle); user-select: none; } .nf__more { margin-top: 110px; } .nf__more-label { margin: 0 0 20px; font-size: 14px; font-weight: 500; line-height: 1.3; color: #675b55; } .nf__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(39, 33, 27, 0.16); border-bottom: 1px solid rgba(39, 33, 27, 0.16); } .nf__link { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 52px 30px 24px; color: var(--c-ink); } .nf__link + .nf__link { border-left: 1px solid rgba(39, 33, 27, 0.16); } .nf__link:first-child { padding-left: 0; } .nf__link-title { font-family: var(--font-display); font-size: 20px; line-height: 1.05; letter-spacing: -0.2px; transition: color 0.2s var(--ease); } .nf__link-desc { font-size: 14px; line-height: 1.44; letter-spacing: -0.28px; color: #675b55; } .nf__link-arrow { position: absolute; top: 30px; right: 22px; width: 16px; height: 16px; color: #e77958; transition: translate 0.3s var(--ease); } @media (hover: hover) and (pointer: fine) { .nf__link:hover .nf__link-title { color: #e77958; } .nf__link:hover .nf__link-arrow { translate: 4px 0; } } .nf__link:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; } @media (max-width: 1100px) { .nf { padding: 80px 0 90px; } .nf__title { font-size: 56px; } .nf__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nf__link:nth-child(odd) { padding-left: 0; border-left: 0; } .nf__link:nth-child(n+3) { border-top: 1px solid rgba(39, 33, 27, 0.16); } } @media (max-width: 700px) { .nf { padding: 48px 0 64px; } .nf__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } .nf__code { order: -1; font-size: 120px; margin: 0; } .nf__eyebrow { margin-bottom: 20px; } .nf__title { font-size: 40px; line-height: 0.95; letter-spacing: -0.4px; } .nf__lead { margin: 20px 0 28px; font-size: 16px; line-height: 1.4; } .nf__actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; } .nf__more { margin-top: 64px; } .nf__links { grid-template-columns: minmax(0, 1fr); } .nf__link, .nf__link:nth-child(odd) { padding: 22px 40px 22px 0; } .nf__link + .nf__link { border-left: 0; border-top: 1px solid rgba(39, 33, 27, 0.16); } .nf__link-arrow { top: 24px; right: 4px; } } /* Home testimonials: client logos painted through a mask so every brand shows in the same coral, whatever the source file (grey PNG, coral SVG). */ .testimonial__mark { display: block; width: 100%; aspect-ratio: 138 / 46; background-color: #e77958; -webkit-mask: var(--logo) left center / contain no-repeat; mask: var(--logo) left center / contain no-repeat; } /* Service hero video (hero_video): the staircase sits in the lower part of the 3:4 clip, so anchor it there inside the wide hero frame. */ .svc-hero__media--video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; } /* Photo band keeps Figma's 1512x720 proportion on wide screens (a fixed 720px cropped the people's heads at 1900px); the full image is cover-centred. */ @media (min-width: 1101px) { .section--cta-band:not(.section--cta-band-dark):not(:has(.cta-band__eyebrow)) { min-height: max(720px, 47.62vw); } } /* ------------------------------------------------------------------ iOS PAGERS The script-paged rows (features, team, blog teaser) used overflow-x:hidden and moved scrollLeft from JS. iOS Safari does not repaint the tiles of layers inside a non-scrollable overflow box when it is scrolled programmatically, so a card's text stayed clipped to the strip that was visible before paging (the video, drawn as its own layer, looked fine). Make the rows real scrollers (bar hidden; touch-action/JS still own the gesture) and give each card its own layer so it is always painted whole. */ .section--features .feature-grid, .section--team .team-row, .section--blog .blog-grid:not(.blog-grid--index) { scrollbar-width: none; } .section--features .feature-grid::-webkit-scrollbar, .section--team .team-row::-webkit-scrollbar, .section--blog .blog-grid:not(.blog-grid--index)::-webkit-scrollbar { display: none; } @media (min-width: 1101px) { .section--team .team-row { overflow-x: auto; } } @media (max-width: 700px) { .section--blog .blog-grid:not(.blog-grid--index), .section--features .feature-grid, .section--team .team-row { overflow-x: auto; } } @media (min-width: 701px) and (max-width: 1100px) { .section--team .team-row { overflow-x: auto; } } @media (min-width: 901px) and (max-width: 1100px) { .section--blog .blog-grid:not(.blog-grid--index) { overflow-x: auto; } } .section--features .feature-card, .section--team .team-member, .section--blog .blog-grid:not(.blog-grid--index) .blog-card { transform: translateZ(0); } /* ---------------------------------------------------------------- LEGAL PAGES Terms and Conditions / Privacy Policy (template-parts/content-legal.php): theme title + "last updated" line + the text in the article typography. */ .legal { --post-line: rgba(39, 33, 27, 0.16); --post-soft: #675b55; --post-body: #39322f; padding-top: clamp(6rem, 4rem + 6vw, 8.5rem); padding-bottom: clamp(4rem, 2rem + 5vw, 7.5rem); } .legal__inner { max-width: calc(820px + 2 * var(--gutter)); } .legal__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem); line-height: 1; letter-spacing: -0.01em; color: var(--c-ink); margin: 0; text-wrap: balance; } .legal__updated { margin: 20px 0 0; font-size: 14px; line-height: 1.5; color: var(--post-soft); } .legal__body { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); padding-top: clamp(2rem, 1.4rem + 2vw, 3rem); border-top: 1px solid var(--post-line); font-size: 17px; line-height: 1.7; } .legal__body h2, .legal__body h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1.15; letter-spacing: -0.01em; margin-top: 44px; } .legal__body h2 strong, .legal__body h3 strong { font-weight: inherit; } .legal__body h4 { font-size: 20px; margin-top: 32px; } .legal__body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; display: block; overflow-x: auto; } .legal__body th, .legal__body td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--post-line); } .legal__body th { color: var(--c-ink); font-weight: 600; background: rgba(39, 33, 27, 0.04); } @media (max-width: 700px) { .legal { padding-top: 60px; padding-bottom: 60px; } .legal__title { font-size: 40px; line-height: 0.99; letter-spacing: -0.4px; } .legal__body { font-size: 16px; line-height: 1.65; } }