/* ============================================================ RESPAGE — MAIN STYLESHEET Foundation CSS for the Respage website ============================================================ TABLE OF CONTENTS --------------------------------------------------------- 1. Fonts 2. CSS Custom Properties (Design Tokens) 3. Reset & Base 4. Layout Utilities 5. Typography — Headings 6. Typography — Body 7. Buttons 8. Cards & Surfaces 9. Responsive Breakpoints 10. Navigation 12. Footer 13. Home Hero 14. Why Section 15. Services Slider 16. Case Studies (Home) + Integrations — Logo carousels 17. Mission Statement 18. Home Page Company Information (Platform + Brag) 19. Home Page Testimonial 20. Home Page Demo 21. Blog 22. Secondary Hero (reusable on inner pages) 23. Split-50 (50/50 content + media — reusable layout) 24. Secondary Services Section 25. CTA Section 26. Content Full Width (reusable centered text section) 27. Respage Results (stat-card section) 28. FAQ Accordion 29. Section Background Utilities 30. Newsletter CTA 31. Blog Post Hero 32. Blog Post Content (+ reusable .prose / .author-card) 33. Skip-to-content link (a11y) ============================================================ */ /* ------------------------------------------------------------ 1. FONTS ------------------------------------------------------------ */ /* Adobe Typekit is loaded externally in the : ⚠️ Replace 'your-typekit-font' in --font-primary below with the exact font-family name provided by your Typekit kit. Example: font-family: 'proxima-nova', sans-serif; */ /* ------------------------------------------------------------ 2. CSS CUSTOM PROPERTIES (DESIGN TOKENS) ------------------------------------------------------------ */ :root { /* --- Color Palette --- */ --color-primary: #15292A; /* Midnight Teal */ --color-secondary: #C7DD70; /* Chartreuse */ --color-accent-teal: #45AD91; /* Teal */ --color-teal-ink: #237a63; /* Teal — accessible text on light */ --color-accent-red: #F05151; /* Red */ --color-accent-mint: #BFDCD3; /* Mint */ --color-bg: #E5E4E0; /* Light Gray — page background */ --color-bg-subtle: #f2f2f2; /* Subtle neutral — nested UI panels (e.g. mobile nav accordion) */ --color-surface: #FFFFFF; /* White */ --color-text: #15292A; /* Midnight Teal */ --color-text-muted: rgba(21, 41, 42, 0.72); --color-text-inverse: #FFFFFF; /* Derived / hover shades */ --color-primary-light: #23494C; /* Midnight - hover */ --color-secondary-dark: #A9C246; /* Chartreuse — hover */ --color-accent-teal-dark: #3a9c81; /* Teal — hover */ --color-accent-red-dark: #d93e3e; /* Red — hover */ /* --- Typography --- */ --font-primary: 'fustat', 'Helvetica Neue', Arial, sans-serif; /* --- Font Weights --- */ --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* --- Font Sizes (fluid via clamp) --- */ --fs-h1: clamp(2.5rem, 5vw, 4rem); /* 40px → 64px */ --fs-h1-home: clamp(2.6rem, 5.25vw,4.25rem); /* 76.5px */ --fs-h2-lg: clamp(2.25rem, 4.5vw, 3.5rem); --fs-h2: clamp(2rem, 4vw, 3rem); /* 32px → 48px */ --fs-h2-alt: clamp(1.65rem, 3.25vw, 2.25rem); --fs-h3: clamp(1.5rem, 3vw, 2rem); /* 24px → 32px */ --fs-h4: clamp(1.25rem, 2vw, 1.5rem); /* 20px → 24px */ --fs-h5: clamp(1.1rem, 1.5vw, 1.25rem); /* ~18px → 20px */ --fs-h6: 1rem; /* 17px */ --fs-body-xl: 1.25rem; /* 21.5px */ --fs-body-lg: 1.125rem; /* 19.125px */ --fs-body: 1rem; /* 17px */ --fs-body-sm: 0.875rem; /* 14.875px */ --fs-label: 0.75rem; /* 12.75px */ --fs-label-xs: 0.6875rem; /* 11.6875px */ --fs-body-testimonial: clamp(1.3rem, 2.75vw,1.4rem); /* 23.8px */ /* --- Line Heights --- */ --lh-heading: 1.15; --lh-body: 1.65; /* --- Letter Spacing --- */ --ls-heading: -0.02em; --ls-body: 0em; --ls-label: 0.07em; --ls-button: 0.02em; /* --- Spacing Scale --- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* --- Layout --- */ --full-width: 100%; --max-width: 1440px; --content-width: 1200px; --gutter: clamp(1rem, 4vw, 2.5rem); /* --- Border Radius --- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --radius-card: var(--radius-lg); /* --- Shadows (keyed to --color-primary) --- */ --shadow-sm: 0 1px 3px rgba(21, 41, 42, 0.08), 0 1px 2px rgba(21, 41, 42, 0.05); --shadow-md: 0 4px 16px rgba(21, 41, 42, 0.10), 0 2px 6px rgba(21, 41, 42, 0.06); --shadow-lg: 0 12px 40px rgba(21, 41, 42, 0.13), 0 4px 12px rgba(21, 41, 42, 0.07); --shadow-xl: 0 24px 64px rgba(21, 41, 42, 0.17); /* --- Transitions --- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Z-Index Scale --- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-nav: 1000; /* Sticky site navigation */ } /* ------------------------------------------------------------ 3. RESET & BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 17px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-primary); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Lock body scroll when mobile nav menu is open */ body.menu-open { overflow: hidden; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; } button { cursor: pointer; border: none; background: none; } /* Global focus ring — uses brand secondary color */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* ------------------------------------------------------------ 4. LAYOUT UTILITIES ------------------------------------------------------------ */ /* Full-bleed wrapper capped at max-width */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); } /* Narrower reading/content width */ .container--narrow { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--gutter); } /* Section vertical rhythm */ .section { padding-block: var(--space-24); } .section--lg { padding-block: var(--space-32); } .section--sm { padding-block: var(--space-12); } /* ------------------------------------------------------------ 5. TYPOGRAPHY — HEADINGS ------------------------------------------------------------ */ h1, .h1 { font-family: var(--font-primary); font-size: var(--fs-h1); font-weight: var(--fw-extrabold); /* 800 */ line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--color-text); } h2, .h2 { font-family: var(--font-primary); font-size: var(--fs-h2); font-weight: var(--fw-extrabold); /* 800 */ line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--color-text); } h3, .h3 { font-family: var(--font-primary); font-size: var(--fs-h3); font-weight: var(--fw-bold); /* 700 */ line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text); } h4, .h4 { font-family: var(--font-primary); font-size: var(--fs-h4); font-weight: var(--fw-bold); /* 700 */ line-height: 1.3; color: var(--color-text); } h5, .h5 { font-family: var(--font-primary); font-size: var(--fs-h5); font-weight: var(--fw-semibold); /* 600 */ line-height: 1.4; color: var(--color-text); } h6, .h6 { font-family: var(--font-primary); font-size: var(--fs-h6); font-weight: var(--fw-semibold); /* 600 */ line-height: 1.5; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); } /* Heading color modifiers */ .heading--inverse { color: var(--color-text-inverse); } .heading--accent { color: var(--color-secondary); } .heading--teal { color: var(--color-accent-teal); } .heading--muted { color: var(--color-text-muted); } /* ------------------------------------------------------------ 6. TYPOGRAPHY — BODY & INLINE ELEMENTS ------------------------------------------------------------ */ /* Body Large — Medium (500) */ .body-large { font-size: var(--fs-body-lg); font-weight: var(--fw-medium); /* 500 */ line-height: var(--lh-body); color: var(--color-text); } /* Body Regular — Semi Bold (600) */ p, .body-regular { font-size: var(--fs-body); font-weight: var(--fw-semibold); /* 600 */ line-height: var(--lh-body); color: var(--color-text); } /* Body Small */ .body-small { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); /* 600 */ line-height: 1.6; color: var(--color-text); } /* Label / eyebrow text */ .label { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); } /* Body Emphasis - Bold (700) Larger Text */ .emphasis-text { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); line-height: var(--lh-body); color: var(--color-text); margin-bottom: var(--space-1); } .label--accent { color: var(--color-accent-teal); } .label--inverse { color: rgba(255, 255, 255, 0.65); } /* Inline Link — Semi Bold (600) */ a.inline-link, .inline-link { font-weight: var(--fw-semibold); color: var(--color-teal-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--transition-fast), color var(--transition-fast); } a.inline-link:hover, .inline-link:hover { color: var(--color-primary); text-decoration-color: currentColor; } /* Text color utility classes */ .text-muted { color: var(--color-text-muted); } .text-inverse { color: var(--color-text-inverse); } .text-accent { color: var(--color-secondary); } .text-teal { color: var(--color-accent-teal); } .text-red { color: var(--color-accent-red); } .text-mint { color: var(--color-accent-mint); } /* ------------------------------------------------------------ 7. BUTTONS ------------------------------------------------------------ */ /* --- Base Button --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.75rem 1.75rem; font-family: var(--font-primary); font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: var(--ls-button); line-height: 1; border-radius: var(--radius-pill); border: 2px solid transparent; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-spring); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0px); } .btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } /* Size modifiers */ .btn--sm { padding: 0.5rem 1.25rem; font-size: var(--fs-body-sm); } .btn--lg { padding: 1rem 2.5rem; font-size: var(--fs-body-lg); } /* --- Primary — Chartreuse fill on Midnight Teal text --- */ .btn--primary, .btn--primary-arrow { background-color: var(--color-secondary); color: var(--color-primary); border-color: var(--color-secondary); } .btn--primary:hover, .btn--primary-arrow:hover { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); /*box-shadow: var(--shadow-md);*/ } .btn--primary:focus-visible, .btn--primary-arrow:focus-visible { outline-color: var(--color-primary); } /* Primary with trailing arrow icon */ .btn--primary-arrow .btn-arrow { width: 18px; height: 18px; display: block; } /* --- Secondary — Ghost / outlined, Midnight Teal border --- */ .btn--secondary { background-color: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); } .btn--secondary:hover { background-color: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-text-inverse); } /* Outline — transparent fill, dark border + text (for light bgs) */ .btn--outline { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--outline:hover { background-color: var(--color-primary); color: var(--color-text-inverse); } /* Secondary inverse — ghost for dark/teal backgrounds */ .btn--secondary-inverse { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--secondary-inverse:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); /*box-shadow: var(--shadow-md);*/ } /* --- Tertiary — Text / link style --- */ .btn--tertiary { background-color: transparent; color: var(--color-teal-ink); border-color: transparent; padding-inline: var(--space-2) 0; text-decoration: underline; text-decoration-color: var(--color-accent-teal); text-underline-offset: 3px; } .btn--tertiary:hover { color: var(--color-primary); text-decoration-color: currentColor; transform: none; box-shadow: none; } /* --- Destructive — Red fill for dangerous actions --- */ .btn--destructive { background-color: var(--color-accent-red); color: var(--color-primary); border-color: var(--color-accent-red); } .btn--destructive:hover { background-color: var(--color-accent-red-dark); border-color: var(--color-accent-red-dark); /*box-shadow: 0 4px 20px rgba(240, 81, 81, 0.35);*/ } /* --- Accent (Teal) — optional supplemental variant --- */ .btn--accent { background-color: var(--color-accent-teal); color: var(--color-surface); border-color: var(--color-accent-teal); } .btn--accent:hover { background-color: var(--color-accent-teal-dark); border-color: var(--color-accent-teal-dark); /*box-shadow: var(--shadow-md);*/ } /* ------------------------------------------------------------ 8. CARDS & SURFACES ------------------------------------------------------------ */ .card { background-color: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: var(--space-8); transition: box-shadow var(--transition-base), transform var(--transition-base); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Card variants */ .card--flat { box-shadow: none; border: 1px solid var(--color-accent-mint); } .card--tinted { background-color: var(--color-accent-mint); } .card--muted { background-color: var(--color-bg); } .card--dark { background-color: var(--color-primary); color: var(--color-text-inverse); } .card--dark .body-large, .card--dark p, .card--dark h1, .card--dark h2, .card--dark h3, .card--dark h4, .card--dark h5 { color: var(--color-text-inverse); } /* ------------------------------------------------------------ 9. RESPONSIVE BREAKPOINTS ------------------------------------------------------------ */ /* Breakpoints (mobile-first): ───────────────────────────────── --bp-sm: 480px (large phones) --bp-md: 768px (tablets) --bp-lg: 1024px (small desktops) --bp-xl: 1280px (desktops) --bp-2xl: 1440px (wide / max-width) */ @media (max-width: 1024px) { :root { --space-24: 5rem; --space-32: 6rem; } } @media (max-width: 768px) { :root { --space-24: 4rem; --space-32: 5rem; } .section { padding-block: var(--space-16); } .section--lg { padding-block: var(--space-20); } .section--sm { padding-block: var(--space-8); } } @media (max-width: 480px) { .btn--lg { padding: 0.875rem 1.75rem; font-size: var(--fs-body); } .card { padding: var(--space-6); } } /* ============================================================ SECTION STYLES ============================================================ */ /* ------------------------------------------------------------ 10. NAVIGATION ------------------------------------------------------------ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: var(--z-nav); background: transparent; box-shadow: none; transition: background var(--transition-base), box-shadow var(--transition-base); } .site-nav.scrolled { background: var(--color-surface); box-shadow: var(--shadow-md); } /* Logo color states */ .site-brand .logo-dark { display: none; } .site-brand .logo-light { display: block; } .site-nav.scrolled .site-brand .logo-dark { display: block; } .site-nav.scrolled .site-brand .logo-light { display: none; } .site-nav.menu-open .site-brand .logo-dark { display: block; } .site-nav.menu-open .site-brand .logo-light { display: none; } .site-nav-inner { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px; gap: 20px; } /* Brand */ .site-brand { display: flex; align-items: center; gap: 10px; color: var(--color-primary); flex-shrink: 0; } .site-brand img { height: 44px; width: auto; display: block; } /* Right cluster */ .site-nav-right { display: flex; align-items: center; gap: 31px; } /* Nav links */ .site-nav-links { display: flex; align-items: center; gap: 31px; } .site-nav-links a { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-primary); font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: 24px; color: var(--color-primary); white-space: nowrap; transition: opacity var(--transition-fast); } .site-nav-links a:hover { opacity: 0.7; } .site-nav-links .chev { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; } .site-nav-links .chev svg { width: 10px; height: 10px; display: block; } /* Nav buttons — Figma spec: 36px tall, 14px text */ .site-nav .nav-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; border-radius: var(--radius-pill); font-family: var(--font-primary); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); line-height: 20px; white-space: nowrap; cursor: pointer; transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast); } .site-nav .nav-btn.outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); } .site-nav .nav-btn.outline:hover { background: var(--color-primary); color: var(--color-surface); } .site-nav .nav-btn.solid { background: var(--color-primary); color: var(--color-bg); border: 0; } .site-nav .nav-btn.solid:hover { background: #0c1819; } /* Solutions dropdown (desktop) */ .nav-item { position: relative; } .nav-item .nav-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-primary); font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: 24px; color: var(--color-primary); white-space: nowrap; transition: opacity var(--transition-fast); } .nav-item .nav-link:hover { opacity: 0.7; } .nav-item .nav-link .chev { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--transition-base); } .nav-item .nav-link .chev svg { width: 10px; height: 10px; display: block; } .nav-item.open > .nav-link .chev { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); padding: 18px 0 0; /* top bridge keeps hover region continuous */ background: transparent; box-shadow: none; min-width: 560px; opacity: 0; pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-base); z-index: var(--z-dropdown); } /* Visible card behind the dropdown */ .nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; bottom: 0; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: 0 10px 5px rgba(21, 41, 42, 0.10), 0 24px 60px -20px rgba(21, 41, 42, 0.18); z-index: var(--z-below); } .nav-item:hover > .nav-dropdown, .nav-item:focus-within > .nav-dropdown, .nav-item.open > .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown ul { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 48px; row-gap: 24px; list-style: none; margin: 0; padding: 32px; } .nav-dropdown.single { min-width: 260px; } .nav-dropdown.single ul { grid-template-columns: max-content; } .nav-dropdown a { display: block; font-family: var(--font-primary); font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: 24px; color: var(--color-primary); white-space: nowrap; transition: color var(--transition-fast); } .nav-dropdown a:hover { color: var(--color-teal-ink); } .nav-dropdown li { list-style: none; } /* Mobile toggle button */ .nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--color-primary); } .nav-toggle svg { width: 24px; height: 24px; display: block; } /* Hamburger / X icon swap */ .nav-toggle .icon-x { display: none; } .site-nav.menu-open .nav-toggle .icon-burger { display: none; } .site-nav.menu-open .nav-toggle .icon-x { display: block; } /* --- Mobile: <1080px --- */ @media (max-width: 1080px) { .site-nav-inner { padding: 24px 16px 16px; } .nav-toggle { display: inline-flex; } .site-brand img { height: 40px; } .site-nav.menu-open { background: var(--color-surface); box-shadow: none; } /* Full-screen mobile menu panel */ .site-nav-right { position: fixed; top: 80px; left: 0; right: 0; bottom: 0; background: var(--color-surface); flex-direction: column; align-items: stretch; justify-content: space-between; gap: 0; padding: 0; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform var(--transition-base), opacity var(--transition-base); overflow-y: auto; } .site-nav-right.open { transform: translateY(0); opacity: 1; pointer-events: auto; } /* Vertical link list */ .site-nav-links { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 24px; } .site-nav-links a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--color-bg); font-size: var(--fs-body-xl); line-height: 28px; font-weight: var(--fw-bold); letter-spacing: -0.6px; color: var(--color-primary); } .site-nav-links .chev { width: 24px; height: 24px; } .site-nav-links .chev svg { width: 14px; height: 14px; } /* Mobile nav-item — match other links */ .nav-item { width: 100%; } .nav-item .nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--color-bg); font-size: var(--fs-body-xl); line-height: 28px; font-weight: var(--fw-bold); letter-spacing: -0.6px; color: var(--color-primary); transition: border-color var(--transition-base); } .nav-item.open > .nav-link { border-bottom-color: transparent; } .nav-item .nav-link .chev { width: 24px; height: 24px; } .nav-item .nav-link .chev svg { width: 14px; height: 14px; } /* Hide desktop bridge/card pseudo on mobile */ .nav-dropdown::before { display: none; } /* Accordion sub-panel — uses --color-bg-subtle */ .nav-dropdown { position: static; display: block; width: auto; padding: 0; background: var(--color-bg-subtle); border-radius: 10px; box-shadow: none; min-width: 0; transform: none; opacity: 1; pointer-events: none; max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); z-index: auto; } /* Override desktop hover/focus rules on mobile */ .nav-item:hover > .nav-dropdown, .nav-item:focus-within > .nav-dropdown { transform: none; max-height: 0; pointer-events: none; } .nav-item.open > .nav-dropdown, .nav-item.open:hover > .nav-dropdown, .nav-item.open:focus-within > .nav-dropdown { max-height: 1000px; pointer-events: auto; } .nav-dropdown ul { display: flex; flex-direction: column; column-gap: 0; row-gap: 0; padding: 4px 24px 12px; overflow: hidden; } .site-nav-links .nav-dropdown a, .nav-dropdown li { border: none; } .nav-dropdown a { display: block; padding: 12px 0; font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: 21px; letter-spacing: -0.3px; color: var(--color-primary); white-space: normal; } /* Bottom CTA stack with teal top border */ .site-nav-cta { display: flex; flex-direction: column; gap: 15px; padding: 24px 16px; border-top: 3px solid var(--color-accent-teal); background: var(--color-surface); } .site-nav-cta .nav-btn { width: 100%; height: auto; padding: 15px; font-size: var(--fs-body); line-height: 24px; } } /* Desktop: ≥1081px */ @media (min-width: 1081px) { .site-nav-cta { display: contents; } /* buttons sit inline with nav items */ .nav-toggle { display: none !important; } } /* --- Secondary-page variant ------------------------------------ Inverse colorway for the nav before the user scrolls. Scoping via `:not(.scrolled):not(.menu-open)` means the existing scrolled (white bg) and mobile-menu-open (white bg) states still take over — only the at-rest appearance changes. ------------------------------------------------------------- */ /* The secondary (inverse) colorway applies to every page EXCEPT the homepage. Driven by the body NOT carrying `.is-home`, so the shared nav global part can stay byte-identical across pages (Modo requirement) — no `--secondary` class on the header. The legacy `.site-nav--secondary` modifier is kept in the selector groups below so any not-yet-converted page still renders correctly. */ body:not(.is-home) .site-nav:not(.scrolled):not(.menu-open), .site-nav--secondary:not(.scrolled):not(.menu-open) { background: var(--color-primary); } /* Top-level links only (`> a` direct children + the dropdown trigger buttons). NOT `.site-nav-links a`, which also matched `.nav-dropdown a` and painted the dropdown links white on their white card — the white-on-white bug. */ body:not(.is-home) .site-nav:not(.scrolled):not(.menu-open) .site-nav-links > a, body:not(.is-home) .site-nav:not(.scrolled):not(.menu-open) .nav-item .nav-link, .site-nav--secondary:not(.scrolled):not(.menu-open) .site-nav-links > a, .site-nav--secondary:not(.scrolled):not(.menu-open) .nav-item .nav-link { color: var(--color-surface); } body:not(.is-home) .site-nav:not(.scrolled):not(.menu-open) .nav-toggle, .site-nav--secondary:not(.scrolled):not(.menu-open) .nav-toggle { color: var(--color-surface); } body:not(.is-home) .site-nav:not(.scrolled):not(.menu-open) .nav-btn.outline, .site-nav--secondary:not(.scrolled):not(.menu-open) .nav-btn.outline { color: var(--color-surface); border-color: var(--color-surface); } body:not(.is-home) .site-nav:not(.scrolled):not(.menu-open) .nav-btn.outline:hover, .site-nav--secondary:not(.scrolled):not(.menu-open) .nav-btn.outline:hover { background: var(--color-surface); color: var(--color-primary); } body:not(.is-home) .site-nav:not(.scrolled):not(.menu-open) .nav-btn.solid, .site-nav--secondary:not(.scrolled):not(.menu-open) .nav-btn.solid { background: var(--color-secondary); color: var(--color-primary); } body:not(.is-home) .site-nav:not(.scrolled):not(.menu-open) .nav-btn.solid:hover, .site-nav--secondary:not(.scrolled):not(.menu-open) .nav-btn.solid:hover { background: var(--color-secondary-dark); } /* ------------------------------------------------------------ 12. FOOTER ------------------------------------------------------------ */ .footer { position: relative; background: var(--color-primary); width: 100%; overflow: hidden; padding: 0; } .footer-inner { position: relative; z-index: var(--z-raised); display: grid; grid-template-columns: 330px 1fr 1fr 1fr 150px; gap: 3em; width: 100%; margin: 0 auto; } /* Left / brand column */ .brand-col { display: flex; flex-direction: column; justify-content: space-between; min-height: 460px; color: var(--color-primary); background: url("https://arti-files.s3.us-east-1.amazonaws.com/cms-migrated/jx740bekk8kebegvtqzt7md9kh81v6ay/assets/img/footer-bg-angle.svg"); background-position: top right; background-size: cover; padding: 6em 2em 2em; } .brand-col .brand-logo { display: flex; gap: 0; margin-top: 0; } .brand-col .brand-logo a { display: block; width: 300px; height: 89px; max-width: 250px; } .brand-col .socials { display: flex; gap: 15px; margin-top: 10px; } .brand-col .socials a { width: 36px; height: 36px; transition: transform var(--transition-fast), background var(--transition-fast); } .brand-col .socials a:hover { transform: translateY(-2px); } .legal-bottom { margin-top: auto; font-size: var(--fs-label); line-height: 19.25px; color: var(--color-primary); } .legal-bottom p { margin: 0 0 12px; font-size: var(--fs-body-sm); } .legal-bottom a { color: inherit; text-decoration: none; } /* Link columns */ .col { padding: 2em 0; } .col h3 { font-family: var(--font-primary); font-weight: var(--fw-medium); font-size: var(--fs-body-xl); line-height: 20px; color: var(--color-secondary); margin: 0 0 16px; } .col ul { list-style: none; padding: 0; margin: 0; } .col li { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); line-height: 24px; color: var(--color-surface); margin-bottom: 8px; } .col li:last-child { margin-bottom: 0; } .col a { color: inherit; text-decoration: none; } .col a:hover { color: var(--color-secondary); } /* Linked column heading (e.g. footer "Our Solutions") — inherits the h3 color; add an underline on hover so it reads as clickable. */ .col h3 a:hover { text-decoration: underline; } .col-mid { display: flex; flex-direction: column; gap: 40px; } /* Badges column */ .badges { display: flex; flex-direction: column; gap: 20px; padding: 2em 2em 2em 0; } .badge-chrome, .badge-google, .badge-meta { width: 100%; } .badge-chrome img, .badge-google img, .badge-meta img { width: 100%; } /* Footer responsive */ @media (max-width: 1080px) { .footer-inner { grid-template-columns: 1fr 1fr 1fr; gap: 1em; } .brand-col { grid-column: 1 / -1; min-height: auto; padding: 2em; background-position: 50% 10%; gap: 1em; } .col { padding: 2em; } .badges { padding: 2em; grid-column: 1 / -1; flex-direction: row; width: 500px; } .badge-chrome img, .badge-google img, .badge-meta img { width: 130px; } } @media (max-width: 767px) { .footer-inner { grid-template-columns: 1fr; gap: 0; } .brand-col { padding: 1em; background-position: bottom left; text-align: center; align-items: center; } .brand-col .brand-logo { margin: 0 auto; } .brand-col .socials { margin: 0 auto; justify-content: center; } .brand-col .legal-bottom { text-align: center; } .brand-col .legal-bottom p { display: inline; padding: 0 5px; } .col { padding: 1em; } .col-mid { display: flex; flex-direction: column; grid-column: 1 / -1; width: 100%; gap: 24px; } .col-proud, .col-legal { flex: 1; } .col-legal { padding-left: 0; } .badges { padding: 1em; width: 100%; flex-wrap: wrap; justify-content: center; } .badge-chrome, .badge-google, .badge-meta { width: 25%; } .badge-chrome img, .badge-google img, .badge-meta img { width: 100%; } } /* ------------------------------------------------------------ 13. HOME HERO ------------------------------------------------------------ */ .home-hero { position: relative; background: var(--color-primary) url("https://arti-files.s3.us-east-1.amazonaws.com/cms-migrated/jx740bekk8kebegvtqzt7md9kh81v6ay/assets/img/respage-home-hero-bg-desktop.png") right top / cover no-repeat; color: var(--color-surface); overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 80px; } /* Hero content grid */ .home-hero-inner { position: relative; z-index: var(--z-raised); width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1.1fr; gap: 48px; align-items: start; padding-top: 120px; /* clears the fixed nav (~88px) plus breathing room */ } /* Left column */ .home-hero-left { position: relative; align-self: center; padding-left: 2em; } /* Chartreuse H1 card with notch shape */ .home-hero-card { position: relative; background: var(--color-secondary); color: var(--color-primary); padding: 2em; width: fit-content; max-width: 620px; border-radius: var(--radius-xl); clip-path: shape( from 24px 0, hline to calc(100% - 24px), arc to 100% 24px of 24px cw, vline to calc(80% - 24px), arc to calc(100% - 24px) 80% of 24px cw, hline to calc(50% + 24px), arc to 50% calc(80% + 24px) of 24px ccw, vline to calc(100% - 24px), arc to calc(50% - 24px) 100% of 24px cw, hline to 24px, arc to 0 calc(100% - 24px) of 24px cw, vline to 24px, arc to 24px 0 of 24px cw, close ); margin-bottom: 36px; } .home-hero-card h1 { font-size: var(--fs-h1-home); line-height: 1.02; font-weight: var(--fw-extrabold); letter-spacing: -2px; color: var(--color-primary); max-width: 560px; } /* Body copy below H1 */ .home-hero-body { max-width: 600px; padding-left: 8px; } .home-hero-body p { color: var(--color-surface); font-size: var(--fs-body-xl); line-height: 1.55; font-weight: var(--fw-medium); margin-bottom: 14px; } .home-hero-body .btn { margin-top: 16px; } /* Right column — laptop graphic */ .home-hero-right { position: relative; align-self: end; display: flex; justify-content: flex-end; } .home-hero-right img { width: 100%; max-width: 760px; height: auto; display: block; } /* Hero responsive */ @media (max-width: 1190px) { /*.home-hero-card h1 { font-size: 56px; letter-spacing: -1.5px; }*/ .home-hero-inner { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 1080px) { .home-hero { background-image: url("https://arti-files.s3.us-east-1.amazonaws.com/cms-migrated/jx740bekk8kebegvtqzt7md9kh81v6ay/assets/img/respage-home-hero-bg-mobile.png"); background-position: center top; padding-bottom: 0; } .home-hero-inner { grid-template-columns: 1fr; gap: 32px; padding-top: 100px; /* clears fixed mobile nav */ } .home-hero-left { padding: 2em; } .home-hero-card { padding: 1em; max-width: 100%; clip-path: none; border-radius: 20px; } } @media (max-width: 560px) { .home-hero-card { padding: 28px 24px 32px; } } /* ------------------------------------------------------------ 14. WHY SECTION ------------------------------------------------------------ */ .why-sec { background: var(--color-primary); position: relative; padding: var(--space-10); overflow: hidden; } .why-inner { position: relative; z-index: var(--z-raised); width: min(1320px, 95%); margin: 0 auto; } .why-title { text-align: center; color: var(--color-surface); font-size: var(--fs-h2); font-weight: var(--fw-extrabold); letter-spacing: -0.6px; } /* Base grid — column count comes from a modifier */ .notch-cards { display: grid; gap: 16px; margin-top: var(--space-12); } /* Column-count modifiers. minmax(0, 1fr) lets long content shrink instead of blowing out a column; tracks always fill 100% of the wrapper so cards touch both edges (no right-side gaps). */ .notch-cards--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); } .notch-cards--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); } .notch-cards--5col { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* Chartreuse card with notch top-right */ .notch-c { background: var(--color-secondary); color: var(--color-primary); padding: 2em; min-height: 300px; display: flex; flex-direction: column; gap: 18px; border-radius: var(--radius-xl); clip-path: shape( from 24px 0, hline to calc(78% - 24px), arc to 78% 24px of 24px cw, vline to calc(16% - 24px), arc to calc(78% + 24px) 16% of 24px ccw, hline to calc(100% - 24px), arc to 100% calc(16% + 24px) of 24px cw, vline to calc(100% - 24px), arc to calc(100% - 24px) 100% of 24px cw, hline to 24px, arc to 0 calc(100% - 24px) of 24px cw, vline to 24px, arc to 24px 0 of 24px cw, close ); } .notch-ic { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--color-primary); } .notch-ic svg { width: 100%; height: 100%; display: block; } .notch-c h3 { font-size: var(--fs-body-xl); line-height: 1.18; letter-spacing: -0.4px; font-weight: var(--fw-extrabold); color: var(--color-primary); max-width: 80%; } .notch-c p { font-size: var(--fs-body-sm); line-height: 1.5; font-weight: var(--fw-semibold); color: var(--color-primary); } /* Prevent CTAs from stretching to the column width (default flex stretch on the .notch-c column). */ .notch-c .btn { align-self: flex-start; } /* Tablet ≤1100px: --5col → 6-column trick gives 3 top / 2 bottom --4col → 2 cols --3col → stays at 3 (already tight) */ @media (max-width: 1100px) { .notch-cards--5col { grid-template-columns: repeat(6, 1fr); } .notch-cards--5col .notch-c:nth-child(-n+3) { grid-column: span 2; } .notch-cards--5col .notch-c:nth-child(n+4) { grid-column: span 3; } .notch-cards--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mobile: single column */ @media (max-width: 760px) { .notch-cards, .notch-cards--3col, .notch-cards--4col, .notch-cards--5col { grid-template-columns: 1fr; } .notch-c, .notch-c:nth-child(-n+3), .notch-c:nth-child(n+4) { grid-column: auto; } .notch-c { clip-path: none; border-radius: 20px; min-height: 0; } } /* ------------------------------------------------------------ 15. SERVICES SLIDER ------------------------------------------------------------ */ .services-section { background: var(--color-bg); padding: 2rem 1rem; position: relative; } .services-section-image { position: absolute; top: 25%; left: 38%; width: 720px; height: auto; } .services-wrap { width: min(1320px, 95%); margin: 0 auto; position: relative; } .services-slider { position: relative; overflow: hidden; border-radius: var(--radius-xl); } .services-stage { position: relative; } .services-track { display: flex; transition: transform 0.55s cubic-bezier(0.6, 0.05, 0.2, 1); will-change: transform; } .services-slide { flex: 0 0 100%; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 8px; } /* Left dark notched card */ .svc-card { position: relative; background: var(--color-primary); color: var(--color-surface); padding: 2em; border-radius: var(--radius-xl); clip-path: shape( from 24px 0, hline to calc(72% - 24px), arc to 72% 24px of 24px cw, vline to calc(22% - 24px), arc to calc(72% + 24px) 22% of 24px ccw, hline to calc(100% - 24px), arc to 100% calc(22% + 24px) of 24px cw, vline to calc(100% - 24px), arc to calc(100% - 24px) 100% of 24px cw, hline to 24px, arc to 0 calc(100% - 24px) of 24px cw, vline to 24px, arc to 24px 0 of 24px cw, close ); min-height: 520px; } .svc-tag { display: inline-block; font-size: var(--fs-label-xs); font-weight: var(--fw-extrabold); letter-spacing: 0.18em; color: var(--color-secondary); text-transform: uppercase; margin-bottom: 18px; } .svc-card h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -1.2px; font-weight: var(--fw-extrabold); color: var(--color-surface); margin-bottom: 22px; max-width: 70%; } .svc-card p { font-size: var(--fs-body); line-height: 1.6; font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.85); margin-bottom: 14px; max-width: 90%; } .svc-card p + p { margin-top: 0; } .svc-solutions-label { font-size: var(--fs-label-xs); font-weight: var(--fw-extrabold); letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; margin: 30px 0 14px; } .svc-links { display: flex; flex-direction: column; gap: 0; } .svc-links a { color: var(--color-secondary); font-weight: var(--fw-bold); font-size: var(--fs-body-sm); display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(199, 221, 112, 0.25); width: fit-content; min-width: 260px; transition: color var(--transition-base); } .svc-links a:hover { color: var(--color-secondary-dark); } .svc-links a:hover .svc-arrow { transform: translateX(4px); } .svc-arrow { display: inline-flex; align-items: center; justify-content: center; margin-left: 24px; transition: transform var(--transition-base); } /* Right graphic */ .svc-graphic { display: flex; align-items: center; justify-content: center; padding: 20px; } .svc-graphic img { width: 100%; height: auto; max-height: 540px; object-fit: contain; border-radius: 18px; } /* Slider controls */ .svc-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; } /* Circular prev/next buttons */ .svc-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--color-surface); border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 20px -8px rgba(21, 41, 42, 0.25); color: var(--color-primary); transition: transform var(--transition-fast), box-shadow var(--transition-base), background var(--transition-base); } .svc-btn:hover { background: #fafafa; box-shadow: 0 10px 24px -10px rgba(21, 41, 42, 0.35); } .svc-btn svg { width: 18px; height: 18px; display: block; } /* Side-positioned arrows */ .svc-arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: var(--z-raised); } .svc-arrow-btn:hover { transform: translateY(-50%) scale(1.05); } .svc-arrow-btn.prev { left: -26px; } .svc-arrow-btn.next { right: -26px; } /* Pagination dots */ .svc-dots { display: flex; gap: 8px; align-items: center; } .svc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(21, 41, 42, 0.22); border: 0; cursor: pointer; padding: 0; transition: background var(--transition-base), width var(--transition-base); } .svc-dot.active { background: var(--color-primary); width: 24px; border-radius: var(--radius-pill); } /* Services - tablet */ @media (max-width: 1080px) { .services-section-image { top: 35%; left: 15%; } } /* Services — mobile */ @media (max-width: 980px) { .services-section-image { top: 45%; left: 18%; transform: rotate(90deg); } .services-slide { grid-template-columns: 1fr; gap: 0; } .svc-card { padding: 3em; min-height: 0; clip-path: none; border-radius: var(--radius-xl); } .svc-card h2 { font-size: 32px; max-width: 100%; } .svc-arrow-btn { width: 36px; height: 36px; top: var(--arrow-top, 50%); } .svc-arrow-btn svg { width: 14px; height: 14px; } .svc-arrow-btn.prev { left: 0; } .svc-arrow-btn.next { right: 0; } } /* ------------------------------------------------------------ 16. CASE STUDIES (HOME) + INTEGRATIONS — Logo carousels Both sections share the same marquee mechanics; differences are limited to copy and which logos populate the track. ------------------------------------------------------------ */ .case-studies, .integrations { background: var(--color-bg); padding-block: var(--space-20) var(--space-16); text-align: center; } .case-studies-inner, .integrations-inner { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--gutter); } .case-studies h2, .integrations h2, .blog-inner h2 { font-size: var(--fs-h3); font-weight: var(--fw-extrabold); letter-spacing: -0.4px; color: var(--color-primary); margin-bottom: var(--space-4); } /* Marquee viewport — clips the sliding track and applies a soft fade-mask on both edges so logos enter/exit smoothly. */ .case-studies-marquee, .integrations-marquee { --per-view: 5; /* logos visible at once */ overflow: hidden; width: 100%; margin: var(--space-6) 0; mask-image: linear-gradient( to right, transparent 0, black var(--space-8), black calc(100% - var(--space-8)), transparent 100% ); } /* Track sizes to its content (two identical copies of the logo set). Animating translateX from 0 to -50% shifts the track left by exactly one full copy, so the second copy lands in the first's position — invisible loop point regardless of slide count. */ .case-studies-track, .integrations-track { display: flex; width: max-content; animation: logo-marquee-scroll 32s linear infinite; } .case-studies-marquee:hover .case-studies-track, .integrations-marquee:hover .integrations-track { animation-play-state: paused; } /* Each slide is sized as a fraction of the viewport so exactly --per-view slides fit in view. Independent of total slide count. */ .case-studies-slide, .integrations-slide { flex: 0 0 calc(100vw / var(--per-view)); display: flex; align-items: center; justify-content: center; padding-inline: var(--space-6); } .case-studies-slide img, .integrations-slide img { max-height: 80px; width: auto; max-width: 100%; object-fit: contain; } @keyframes logo-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .case-studies-track, .integrations-track { animation: none; } } /* Tablet — 3 logos visible */ @media (max-width: 900px) { .case-studies-marquee, .integrations-marquee { --per-view: 3; } } /* Mobile — 1 logo visible */ @media (max-width: 540px) { .case-studies-marquee, .integrations-marquee { --per-view: 2; } .case-studies-track, .integrations-track { animation-duration: 18s; } } /* ------------------------------------------------------------ 17. MISSION STATEMENT ------------------------------------------------------------ */ .mission { background: var(--color-bg); padding-block: var(--space-16); } .mission-inner { width: 100%; max-width: var(--full-width); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } .mission-image { border-radius: 40px; overflow: hidden; margin-right: -100px; z-index: 2; } .mission-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .mission-content { background: var(--color-accent-teal); border-radius: 40px; margin: 50px 0; padding: 4em 4em 4em 8em; display: flex; flex-direction: column; gap: var(--space-5); color: var(--color-primary); z-index: 1; } .mission-content p { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); color: var(--color-primary); } /* Mobile — stack image on top, content below */ @media (max-width: 1080px) { .mission-inner { grid-template-columns: 1fr; gap: 0; } .mission-image { aspect-ratio: 3 / 2; margin: 0; } .mission-content { margin: -100px 50px 0; padding: 2em; z-index: 3; } } @media (max-width: 767px) { .mission { padding-block: var(--space-10);} .mission-inner { padding-inline: 0; } .mission-image { aspect-ratio: 3 / 2; margin-right: 2rem; } .mission-content { margin: -2rem 0 0 2rem; padding: 2em; z-index: 3; } } /* ------------------------------------------------------------ 18. HOME PAGE COMPANY INFORMATION Two stacked 50/50 blocks (Platform info + Brag) sharing a full-bleed trapezoid background image. ------------------------------------------------------------ */ .company-info { position: relative; isolation: isolate; background: var(--color-bg); padding-block: var(--space-20); /* `overflow: clip` clips like `hidden` but does NOT establish a scroll container — required so the child's `animation-timeline: view()` measures against the page scroller, not against this section. */ overflow: clip; } /* Trapezoid background — absolutely positioned so it can be layered under (or over) other elements with z-index. Mimics the previous background-image declaration: cover sizing, center-top alignment. */ .company-info-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 2; pointer-events: none; user-select: none; } .company-info-inner { position: relative; width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; gap: var(--space-20); } /* --- Section 1: Platform Information --- */ .platform-info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: top; } .platform-info-content { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; padding-top: 4em; position: relative; z-index: 3; } .platform-info-content p { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); color: var(--color-primary); } .platform-info-image { display: flex; align-items: center; justify-content: center; z-index: 1; } .platform-info-image img { width: 100%; max-width: 480px; height: auto; display: block; } /* Scroll-driven parallax — image rises as the section scrolls up past the viewport, falls as the user scrolls back down. Uses native CSS scroll-driven animations; older browsers simply get a static image. */ @keyframes platform-image-parallax { from { transform: translateY(60px); } to { transform: translateY(-60px); } } @supports (animation-timeline: view()) { .platform-info-image { /* Use LONGHAND so animation-duration keeps its default `auto` — the shorthand would reset it to 0s, which kills scroll-driven animations in some engines. */ animation-name: platform-image-parallax; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: view(); will-change: transform; } } @media (prefers-reduced-motion: reduce) { .platform-info-image { animation: none; } } /* --- Section 2: Brag --- */ .brag { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; position: relative; z-index: 3; } .brag-bg-image { position: absolute; top: -8%; left: 20%; width: 930px; height: auto; } .brag-image { border-radius: 40px; overflow: hidden; z-index: 20; } .brag-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .brag-content { display: flex; flex-direction: column; gap: 54px; /* Figma spec */ color: var(--color-primary); } .brag-heading { font-family: var(--font-primary); font-size: 60px; font-weight: var(--fw-extrabold); line-height: 60px; letter-spacing: -1.5px; color: var(--color-primary); } .brag-stats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 54px; /* matches container */ } .brag-stats li { display: flex; align-items: center; gap: 40px; } .brag-num { font-family: var(--font-primary); font-size: 80px; font-weight: var(--fw-extrabold); line-height: 60px; letter-spacing: -1.5px; color: var(--color-primary); text-align: center; white-space: nowrap; } .brag-label { font-family: var(--font-primary); font-size: var(--fs-body-xl); font-weight: var(--fw-medium); line-height: 23.25px; color: var(--color-primary); max-width: 196px; } /* --- Responsive --- */ @media (max-width: 900px) { .brag-heading { font-size: 48px; line-height: 1.05; } .brag-num { font-size: 64px; line-height: 1; } .platform-info-content {padding: 0;} .platform-info-image {justify-content: end; } .platform-info-image img { max-width: 300px; } } @media (max-width: 768px) { /* Tighten the space between the two stacked sub-blocks on mobile */ .company-info-inner { gap: var(--space-4); } .platform-info, .brag { grid-template-columns: 1fr; gap: var(--space-8); } /* Smaller, centered phone graphic on mobile so its SVG whitespace doesn't push the "Not to brag" section down so far. */ .platform-info-image { justify-content: center; align-items: flex-start; max-height: 330px; overflow: hidden; animation: none; } .platform-info-image img { max-width: 230px; } /* Push the platform content up + keep a little breathing room above brag */ .company-info { padding-block: var(--space-8) var(--space-12); } .brag-bg-image { top: 72%; left: -2%; } /* Image stacks above content on mobile (default DOM order already provides this for Brag; Platform has content first, so flip it). */ /*.platform-info-image { order: -1; }*/ /* Push the team photo BELOW the content on mobile */ .brag-image { aspect-ratio: 3 / 2; order: 2; } /* Center everything in the content column on mobile */ .brag-content { gap: var(--space-8); text-align: center; align-items: center; } .brag-stats { gap: var(--space-8); } /* Stack the number above the label, centered */ .brag-stats li { flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; } .brag-label { max-width: 100%; } } @media (max-width: 480px) { .brag-num { font-size: 48px; } .brag-label { font-size: 16px; line-height: 1.3; max-width: 100%; } } /* ------------------------------------------------------------ 19. HOME PAGE TESTIMONIAL ------------------------------------------------------------ */ .testimonial { /* Top half --color-bg, bottom half --color-primary — sharp 50/50 split */ background: linear-gradient( to bottom, var(--color-bg) 50%, var(--color-primary) 50% ); padding-block: var(--space-12); } .testimonial-full { /* Top half --color-bg, bottom half --color-primary — sharp 50/50 split */ background: var(--color-primary); padding-block: var(--space-12); } .testimonial-inner { width: 100%; max-width: 1101px; margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr 220px; gap: var(--space-6); align-items: start; } /* Teal card with a notched bottom-right corner (matches Figma "Union" shape) */ .testimonial-card { position: relative; background: var(--color-accent-teal); color: var(--color-primary); padding: 49px 57px; border-radius: var(--radius-xl); min-height: 305px; /* Bottom-right notch carved from the rectangle, 24px corner radii. */ clip-path: shape( from 24px 0, hline to calc(100% - 24px), arc to 100% 24px of 24px cw, vline to calc(67% - 24px), arc to calc(100% - 24px) 67% of 24px cw, hline to calc(70% + 24px), arc to 70% calc(67% + 24px) of 24px ccw, vline to calc(100% - 24px), arc to calc(70% - 24px) 100% of 24px cw, hline to 24px, arc to 0 calc(100% - 24px) of 24px cw, vline to 24px, arc to 24px 0 of 24px cw, close ); } /* Figma: 24/32/-0.6 Bold, color #15292A, max width 746 */ .testimonial-quote { font-family: var(--font-primary); font-size: var(--fs-body-testimonial); font-weight: var(--fw-bold); line-height: 32px; letter-spacing: -0.6px; color: var(--color-primary); max-width: 746px; margin-bottom: 30px; } /* Figma: 20/23.25 Medium */ .testimonial-name { font-family: var(--font-primary); font-size: var(--fs-body-xl); font-weight: var(--fw-medium); line-height: 23.25px; color: var(--color-primary); margin-bottom: 6px; } /* Figma: 16/24 SemiBold */ .testimonial-org { font-family: var(--font-primary); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 24px; color: var(--color-primary); } /* Klein logo card — Figma 220×220 with 35px radius. The supplied klein-logo.png already includes the framed treatment. */ .testimonial-logo { width: 220px; height: 220px; border-radius: 35px; padding: 10px; overflow: hidden; background: var(--color-surface); display: flex; align-items: center; justify-content: center; align-self: start; } .testimonial-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Mobile — stack the Klein logo beneath the quote, drop the notch */ @media (max-width: 1024px) { .testimonial { background: linear-gradient( to bottom, var(--color-bg) 25%, var(--color-primary) 25% ); } .testimonial-inner { grid-template-columns: 1fr; gap: var(--space-8); } .testimonial-card { padding: var(--space-8); min-height: 0; clip-path: none; border-radius: var(--radius-xl); } .testimonial-quote { font-size: var(--fs-body-xl); line-height: 28px; } .testimonial-logo { margin-inline: auto; } } /* ------------------------------------------------------------ 20. HOME PAGE DEMO Sits inside .why-sec beneath .notch-cards. Mirrors the mission section structure but with content on the left, image on right (achieved purely via DOM order — content comes first in markup). ------------------------------------------------------------ */ .home-demo { margin-top: var(--space-16); } .home-demo-inner { display: grid; grid-template-columns: 1.25fr .75fr; gap: 0; align-items: center; } .home-demo-content { background: var(--color-accent-mint); border-radius: 40px; padding: 2em; display: flex; flex-direction: column; gap: var(--space-5); color: var(--color-primary); } .home-demo-content p { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); color: var(--color-primary); } /* Prevent the CTA from stretching the full content-column width */ .home-demo-content .btn { align-self: flex-start; } .home-demo-image { overflow: hidden; display: flex; align-items: center; justify-content: center; } .home-demo-image img { width: 256px; height: auto; object-fit: cover; display: block; } /* Mobile — stack: content first (already top in DOM), image below */ @media (max-width: 768px) { .home-demo-inner { grid-template-columns: 1fr; gap: var(--space-6); } .home-demo-image { aspect-ratio: 3 / 2; align-items: start; } .home-demo-image img { width: 350px; } } /* ------------------------------------------------------------ 21. BLOG Grid of blog cards. The grid is a