/* ============================================================================ PROOFFLUX — main.css ---------------------------------------------------------------------------- 1. Design tokens 2. Reset & base 3. Typography 4. Layout primitives 5. Buttons 6. Header & navigation 7. Mobile menu 8. Sticky mobile CTA 9. Components (cards, badges, lists, accordion, forms) 10. Visual mockups (Menuflow, automation flow, Amazon panel) 11. Sections 12. Footer 13. Animation / reveal 14. Responsive ========================================================================== */ /* --------------------------------------------------------------------------- 1. DESIGN TOKENS ------------------------------------------------------------------------ */ :root { /* Brand */ --brand: #7D5FF5; /* Proofflux purple — primary accent */ --brand-ink: #5B3FD6; /* Accessible purple for text on light */ --brand-soft: #F1EDFE; /* Tinted surface */ --brand-line: rgba(125, 95, 245, 0.28); /* Active accent (overridden per-scope, e.g. Amazon sections) */ --accent: var(--brand); --accent-ink: var(--brand-ink); --accent-soft: var(--brand-soft); --accent-line: var(--brand-line); --accent-contrast: #FFFFFF; /* Text colour on a filled accent button */ /* Neutrals */ --ink: #0C0C10; --ink-800: #1B1B22; --ink-600: #4A4A55; --ink-500: #6B6B77; --ink-400: #8C8C98; --paper: #FFFFFF; --paper-soft: #F8F7F4; --paper-alt: #F2F1ED; --line: rgba(12, 12, 16, 0.10); --line-soft: rgba(12, 12, 16, 0.06); --line-strong: rgba(12, 12, 16, 0.18); /* Dark surface */ --dark: #0C0C10; --dark-alt: #15151B; --dark-line: rgba(255, 255, 255, 0.12); --dark-line-soft: rgba(255, 255, 255, 0.07); --dark-text: rgba(255, 255, 255, 0.70); /* Type */ --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Spacing scale */ --gap-xs: 8px; --gap-sm: 14px; --gap: 22px; --gap-lg: 34px; --gap-xl: 56px; --section-y: 112px; --section-y-sm: 76px; /* Shape */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; /* Shadow — restrained, no glow */ --shadow-sm: 0 1px 2px rgba(12, 12, 16, 0.04); --shadow: 0 2px 4px rgba(12, 12, 16, 0.04), 0 12px 28px -18px rgba(12, 12, 16, 0.24); --shadow-lg: 0 4px 10px rgba(12, 12, 16, 0.05), 0 32px 64px -32px rgba(12, 12, 16, 0.30); --container: 1180px; --container-narrow: 860px; --header-h: 72px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Amazon scope — restrained orange accent, still inside the Proofflux system. Applied with data-accent="amazon" on or on an individual section. */ [data-accent="amazon"] { --accent: #FF6321; /* Taken from the Proofflux orange mark */ --accent-ink: #C2410C; /* Darker orange: 5.2:1 as text on white */ --accent-soft: #FFF1EB; --accent-line: rgba(255, 99, 33, 0.32); --accent-contrast: #1B1200; /* Dark text on orange: 6.2:1 (white would be 3:1) */ } /* --------------------------------------------------------------------------- 2. RESET & BASE ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--ink-600); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* Guards against accidental mobile overflow */ } img, svg, video { max-width: 100%; height: auto; display: block; } svg { flex-shrink: 0; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap-lg) 0; } ::selection { background: var(--brand); color: #fff; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); transition: top 0.2s var(--ease); } .skip-link:focus { top: 16px; text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 3. TYPOGRAPHY ------------------------------------------------------------------------ */ h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.12; letter-spacing: -0.028em; text-wrap: balance; } h1, .h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.1rem); } h2, .h2 { font-size: clamp(1.95rem, 1.4rem + 2.1vw, 2.9rem); } h3, .h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); letter-spacing: -0.02em; } h4, .h4 { font-size: 1.0625rem; letter-spacing: -0.012em; line-height: 1.35; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } strong { color: var(--ink-800); font-weight: 600; } .lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; color: var(--ink-600); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 18px; } .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); flex: none; } .eyebrow--plain::before { display: none; } .index-num { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; color: var(--ink-400); } .text-muted { color: var(--ink-500); } .text-sm { font-size: 0.9375rem; } .text-xs { font-size: 0.8125rem; } .note { font-size: 0.875rem; line-height: 1.6; color: var(--ink-500); border-left: 2px solid var(--accent-line); padding-left: 16px; } /* --------------------------------------------------------------------------- 4. LAYOUT PRIMITIVES ------------------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); position: relative; } .section--sm { padding-block: var(--section-y-sm); } .section--tight { padding-block: 64px; } .section--soft { background: var(--paper-soft); } .section--alt { background: var(--paper-alt); } .section--dark { background: var(--dark); color: var(--dark-text); --line: var(--dark-line); --line-soft: var(--dark-line-soft); --paper: #15151B; --ink-500: rgba(255, 255, 255, 0.58); --ink-400: rgba(255, 255, 255, 0.45); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark strong { color: #fff; } .section--dark .lead { color: rgba(255, 255, 255, 0.72); } .section--dark .eyebrow { color: #fff; } .section--dark .eyebrow::before { background: var(--accent); } /* Hairline rule between stacked light sections */ .section--ruled { border-top: 1px solid var(--line); } .section-head { max-width: 680px; margin-bottom: var(--gap-xl); } .section-head--center { margin-inline: auto; text-align: center; } .section-head p { margin-top: 18px; } .section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--gap-lg); align-items: end; } .section-head--split p { margin-top: 0; } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stack-sm > * + * { margin-top: var(--gap-sm); } .stack > * + * { margin-top: var(--gap); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } /* --------------------------------------------------------------------------- 5. BUTTONS ------------------------------------------------------------------------ */ .btn { --btn-bg: var(--ink); --btn-fg: #fff; --btn-border: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border: 1px solid var(--btn-border); border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; cursor: pointer; text-decoration: none; transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); } .btn--primary { --btn-bg: var(--accent); --btn-border: var(--accent); --btn-fg: var(--accent-contrast); } .btn--primary:hover { filter: brightness(0.94); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--line-strong); } .btn--ghost:hover { --btn-border: var(--ink); background: transparent; } .btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-border: #fff; } .btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgba(255, 255, 255, 0.28); } .btn--outline-light:hover { --btn-border: #fff; } .btn--sm { padding: 10px 17px; font-size: 0.875rem; } .btn--lg { padding: 15px 28px; font-size: 1rem; } .btn--block { width: 100%; } .btn__arrow { transition: transform 0.2s var(--ease); } .btn:hover .btn__arrow { transform: translateX(3px); } /* Quiet inline text link with arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: border-color 0.18s var(--ease), gap 0.18s var(--ease); } .link-arrow:hover { text-decoration: none; border-color: var(--accent); gap: 12px; } .link-arrow svg { transition: transform 0.18s var(--ease); } .section--dark .link-arrow { color: #fff; border-color: rgba(255, 255, 255, 0.3); } /* --------------------------------------------------------------------------- 6. HEADER & NAVIGATION ------------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease); } .site-header.is-stuck { border-bottom-color: var(--line); background: rgba(255, 255, 255, 0.94); } .site-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--gap); } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; } .brand:hover { text-decoration: none; } /* The brand mark is a square icon; the wordmark beside it is live text, so it stays crisp at any size and inherits the site's typography. */ .brand__mark { width: 34px; height: 34px; display: block; /* Softened corners so the mark sits in the same rounded language as the rest of the UI (icon boxes, cards, buttons). Ratio matches .icon-box. */ border-radius: 9px; } .brand__name { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); line-height: 1; } .nav { display: flex; align-items: center; gap: 4px; } .nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font-size: 0.9375rem; font-weight: 500; color: var(--ink-600); text-decoration: none; transition: color 0.16s var(--ease), background-color 0.16s var(--ease); } .nav__link:hover { color: var(--ink); background: var(--paper-alt); text-decoration: none; } .nav__link[aria-current="page"] { color: var(--ink); } .nav__link[aria-current="page"]::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } /* Dropdown — solutions menu */ .nav__item { position: relative; } .nav__toggle { background: none; border: 0; cursor: pointer; } .nav__toggle svg { transition: transform 0.2s var(--ease); } .nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; width: 340px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s; } .nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown__link { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px; border-radius: var(--radius); text-decoration: none; color: inherit; transition: background-color 0.16s var(--ease); } .dropdown__link:hover { background: var(--paper-soft); text-decoration: none; } .dropdown__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); } .dropdown__link[data-accent="amazon"] .dropdown__icon { background: var(--accent-soft); color: var(--accent-ink); } .dropdown__title { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .dropdown__desc { display: block; font-size: 0.8125rem; color: var(--ink-500); line-height: 1.45; margin-top: 2px; } /* Hamburger */ .nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; } .nav-toggle__bars { position: relative; width: 17px; height: 11px; } .nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.24s var(--ease), opacity 0.16s var(--ease), top 0.24s var(--ease); } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 5px; } .nav-toggle__bars span:nth-child(3) { top: 10px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 5px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); } /* --------------------------------------------------------------------------- 7. MOBILE MENU ------------------------------------------------------------------------ */ .mobile-menu { position: fixed; inset: var(--header-h) 0 0; z-index: 99; background: #fff; padding: 26px 24px calc(34px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s; } .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } body.nav-open { overflow: hidden; } .mobile-menu__label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 12px; } .mobile-menu__solutions { display: grid; gap: 8px; margin-bottom: 30px; } .mobile-solution { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; background: var(--paper-soft); } .mobile-solution:hover { text-decoration: none; } .mobile-solution .dropdown__icon { width: 38px; height: 38px; } .mobile-menu__links { display: grid; margin-bottom: 30px; } .mobile-menu__links a { padding: 15px 2px; border-bottom: 1px solid var(--line-soft); font-size: 1.125rem; font-weight: 500; color: var(--ink); text-decoration: none; letter-spacing: -0.015em; } .mobile-menu__links a:hover { text-decoration: none; } .mobile-menu__actions { display: grid; gap: 10px; } /* --------------------------------------------------------------------------- 8. STICKY MOBILE CTA ------------------------------------------------------------------------ */ .mobile-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; display: none; gap: 8px; padding: 8px; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-lg); transform: translateY(140%); transition: transform 0.3s var(--ease); } .mobile-cta.is-visible { transform: translateY(0); } .mobile-cta .btn { flex: 1; padding: 12px 14px; font-size: 0.875rem; } body.nav-open .mobile-cta { transform: translateY(140%); } /* --------------------------------------------------------------------------- 9. COMPONENTS ------------------------------------------------------------------------ */ .card { position: relative; display: flex; flex-direction: column; padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease); } .card h3, .card h4 { margin-bottom: 10px; } .card p { font-size: 0.9375rem; line-height: 1.6; } .card--hover:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); } .card--flat { background: transparent; } .card--pad-lg { padding: 34px; } .section--dark .card { background: var(--dark-alt); border-color: var(--dark-line-soft); } .section--dark .card--hover:hover { border-color: var(--dark-line); box-shadow: none; } .icon-box { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 20px; } .section--dark .icon-box { background: rgba(255, 255, 255, 0.07); color: var(--accent); } .badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .badge--neutral { background: var(--paper-alt); border-color: var(--line); color: var(--ink-600); } .badge--dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #fff; } .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* Checklist */ .check-list { display: grid; gap: 11px; } .check-list li { position: relative; padding-left: 27px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-600); } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 15px; height: 15px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); } .check-list li::after { content: ""; position: absolute; left: 4.5px; top: 0.72em; width: 6px; height: 3.5px; border-left: 1.5px solid var(--accent-ink); border-bottom: 1.5px solid var(--accent-ink); transform: rotate(-45deg); } .section--dark .check-list li { color: var(--dark-text); } .section--dark .check-list li::before { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } .section--dark .check-list li::after { border-color: var(--accent); } /* Tag list */ .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 0.875rem; color: var(--ink-600); } .section--dark .tag { background: rgba(255, 255, 255, 0.04); border-color: var(--dark-line-soft); color: var(--dark-text); } /* Stat */ .stat__value { font-size: clamp(2.6rem, 2rem + 3vw, 4.4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); } .stat__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-400); margin-top: 12px; } /* Accordion / FAQ */ .accordion { border-top: 1px solid var(--line); } .accordion__item { border-bottom: 1px solid var(--line); } .accordion__trigger { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 0; background: none; border: 0; text-align: left; cursor: pointer; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; color: var(--ink); transition: color 0.16s var(--ease); } .accordion__trigger:hover { color: var(--accent-ink); } .accordion__icon { position: relative; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); } .accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); translate: -50% -50%; transition: transform 0.24s var(--ease), background-color 0.2s var(--ease); } .accordion__icon::before { width: 9px; height: 1.5px; } .accordion__icon::after { width: 1.5px; height: 9px; } .accordion__trigger[aria-expanded="true"] .accordion__icon { background: var(--accent); border-color: var(--accent); } .accordion__trigger[aria-expanded="true"] .accordion__icon::before, .accordion__trigger[aria-expanded="true"] .accordion__icon::after { background: var(--accent-contrast); } .accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); } .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); } .accordion__panel > div { overflow: hidden; } .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; } .accordion__panel p { max-width: 68ch; padding-bottom: 24px; font-size: 0.9375rem; line-height: 1.7; } /* Forms */ .form { display: grid; gap: 18px; } .form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .form__field { display: grid; gap: 7px; } .form__label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-800); letter-spacing: -0.005em; } .form__label .req { color: var(--accent-ink); } .form__input, .form__select, .form__textarea { width: 100%; padding: 13px 15px; font-family: inherit; font-size: 0.9375rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); appearance: none; } .form__input::placeholder, .form__textarea::placeholder { color: var(--ink-400); } .form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form__textarea { min-height: 130px; resize: vertical; } .form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B6B77' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; } .form__status { display: none; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 0.9375rem; color: var(--ink-800); } .form__status.is-visible { display: block; } /* --------------------------------------------------------------------------- 10. VISUAL MOCKUPS ------------------------------------------------------------------------ */ /* --- Generic UI panel used for product/service visuals --- */ .ui-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .ui-panel__bar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); background: var(--paper-soft); } .ui-panel__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); } .ui-panel__title { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--ink-500); margin-left: 4px; } .ui-panel__body { padding: 18px; } /* Row inside a panel: label + status */ .ui-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--line-soft); font-size: 0.875rem; color: var(--ink-600); } .ui-row:last-child { border-bottom: 0; } .ui-row__label { display: flex; align-items: center; gap: 10px; } .ui-row__tick { width: 17px; height: 17px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); } .ui-pill { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--paper-alt); color: var(--ink-500); white-space: nowrap; } .ui-pill--accent { background: var(--accent-soft); color: var(--accent-ink); } /* --- Hero composition --- */ .hero { position: relative; padding-block: clamp(56px, 4vw, 88px) clamp(64px, 6vw, 104px); overflow: hidden; } .hero::before { /* Very subtle grid — texture, not decoration-heavy */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(120% 90% at 70% 10%, #000 10%, transparent 72%); -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 10%, transparent 72%); pointer-events: none; } .hero > .container { position: relative; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .hero h1 { margin-bottom: 22px; } .hero__lead { max-width: 52ch; } .hero__actions { margin-top: 32px; } .hero__meta { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.875rem; color: var(--ink-500); } .hero__meta span { display: inline-flex; align-items: center; gap: 8px; } .hero__meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* Three stacked solution panels in the hero */ .hero__stack { display: grid; gap: 12px; } .stack-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease), border-color 0.24s var(--ease); } .stack-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--shadow); } .stack-card__num { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; } .stack-card__kicker { display: block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-400); } .stack-card__title { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.018em; color: var(--ink); line-height: 1.3; margin-top: 3px; } .stack-card__desc { display: block; font-size: 0.8125rem; color: var(--ink-500); line-height: 1.5; margin-top: 4px; } .stack-card__arrow { color: var(--ink-400); transition: transform 0.2s var(--ease), color 0.2s var(--ease); } .stack-card:hover .stack-card__arrow { transform: translateX(3px); color: var(--accent-ink); } /* Connector rail linking the three hero cards into one system */ .hero__rail { position: relative; padding-left: 0; } /* --- Menuflow: phone storefront mockup --- */ .phone { width: 100%; max-width: 310px; margin-inline: auto; background: #fff; border: 1px solid var(--line-strong); border-radius: 30px; padding: 10px; box-shadow: var(--shadow-lg); } .phone__screen { border-radius: 22px; overflow: hidden; background: var(--paper-soft); border: 1px solid var(--line-soft); } .phone__topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px 12px; background: #fff; border-bottom: 1px solid var(--line-soft); } .phone__store { display: flex; align-items: center; gap: 9px; font-size: 0.8125rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .phone__logo { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: #fff; font-size: 0.6875rem; font-weight: 600; } .phone__cart { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--paper-alt); color: var(--ink-600); } .phone__cart b { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.5625rem; font-weight: 600; border: 2px solid #fff; } .phone__chips { display: flex; gap: 6px; padding: 12px 15px; overflow: hidden; } .phone__chip { padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 0.6875rem; color: var(--ink-500); white-space: nowrap; } .phone__chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } .phone__products { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 3px 15px 15px; } .phone__product { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 8px; } .phone__thumb { height: 54px; border-radius: 8px; background: linear-gradient(145deg, var(--paper-alt), var(--paper-soft)); border: 1px solid var(--line-soft); display: grid; place-items: center; color: var(--ink-400); } .phone__pname { font-size: 0.6875rem; font-weight: 500; color: var(--ink-800); margin-top: 7px; line-height: 1.3; } .phone__pprice { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; font-family: var(--font-mono); font-size: 0.625rem; color: var(--ink-500); } .phone__add { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 0.75rem; line-height: 1; } .phone__checkout { margin: 0 15px 15px; padding: 11px; border-radius: 10px; background: #1F8F4E; /* WhatsApp-adjacent green, used once, as a UI state */ color: #fff; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; } /* WhatsApp order message floating beside the phone */ .wa-note { width: min(280px, 100%); padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; box-shadow: var(--shadow); font-size: 0.8125rem; line-height: 1.55; color: var(--ink-600); } .wa-note__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: #1F8F4E; margin-bottom: 9px; } .wa-note__line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; } .wa-note__line span:last-child { color: var(--ink-800); font-weight: 500; } .wa-note__total { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; font-weight: 600; color: var(--ink); } .menuflow-visual { position: relative; display: grid; gap: 18px; justify-items: center; } /* --- Menuflow: STORE → PRODUCTS → CART → WHATSAPP → ORDER ---------------- Five miniature screens showing the real product journey. The screens are decorative (aria-hidden); the captions below carry the meaning. */ .journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; /* row 1: screens · row 2: captions */ gap: 16px; list-style: none; } /* Subgrid keeps every screen the same height as the tallest one, so no screen has to be clipped to a guessed pixel height. Browsers without subgrid fall back to content-height screens, which still read correctly. */ .journey__step { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 16px; } .journey__step + .journey__step::before { content: ""; position: absolute; left: -12px; top: 84px; width: 7px; height: 7px; border-top: 1.5px solid var(--line-strong); border-right: 1.5px solid var(--line-strong); transform: rotate(45deg); } .journey__num { display: block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; color: var(--accent-ink); margin-bottom: 7px; } .journey__caption h3 { font-size: 0.9375rem; margin-bottom: 6px; min-height: 2.24em; } .journey__caption p { font-size: 0.8125rem; line-height: 1.55; color: var(--ink-500); } /* Miniature screen shell */ .ms { height: 100%; min-height: 172px; padding: 11px; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); overflow: hidden; } .ms__bar { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); } .ms__logo { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--accent); color: #fff; font-size: 0.5rem; font-weight: 600; } .ms__name { font-size: 0.5625rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .ms__cart { margin-left: auto; color: var(--ink-400); display: flex; } .ms__chips { display: flex; gap: 4px; } .ms__chip { padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.4375rem; color: var(--ink-500); white-space: nowrap; } .ms__chip--on { background: var(--ink); border-color: var(--ink); color: #fff; } .ms__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ms__card { padding: 4px; border: 1px solid var(--line-soft); border-radius: 8px; } .ms__thumb { height: 24px; display: grid; place-items: center; border-radius: 5px; background: var(--paper-alt); color: var(--ink-400); } .ms__label { margin-top: 5px; font-size: 0.5rem; font-weight: 500; color: var(--ink-800); } .ms__price { font-family: var(--font-mono); font-size: 0.4375rem; color: var(--ink-500); } .ms__row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 0.5rem; color: var(--ink-600); border-bottom: 1px solid var(--line-soft); } .ms__total { display: flex; justify-content: space-between; margin-top: auto; padding-top: 7px; border-top: 1px dashed var(--line-strong); font-size: 0.5625rem; font-weight: 600; color: var(--ink); } .ms__wa { display: flex; align-items: center; gap: 5px; margin: -11px -11px 0; padding: 8px 11px; background: #1F8F4E; color: #fff; font-size: 0.5rem; font-weight: 500; } .ms__bubble { padding: 8px; border-radius: 8px 8px 8px 3px; background: #EAF7EF; border: 1px solid #CFE9D9; font-size: 0.4688rem; line-height: 1.5; color: var(--ink-600); } .ms__bubble b { display: block; color: var(--ink); font-size: 0.5rem; margin-bottom: 3px; } .ms__confirm { margin: auto 0; text-align: center; } .ms__check { width: 30px; height: 30px; margin: 0 auto 9px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); } .ms__confirm strong { display: block; font-size: 0.625rem; color: var(--ink); } .ms__confirm span { font-size: 0.5rem; color: var(--ink-500); } .ms__cta { margin-top: auto; padding: 7px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 0.5rem; font-weight: 600; text-align: center; } .ms__cta--wa { background: #1F8F4E; } /* Chain of steps used in the "What is Menuflow?" explainer */ .chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .chain__item { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 0.9375rem; font-weight: 500; color: var(--ink); box-shadow: var(--shadow-sm); } .chain__item svg { color: var(--accent-ink); } .chain__arrow { color: var(--ink-400); display: flex; } /* QR panel */ .qr-card { display: flex; align-items: center; gap: 22px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); } .qr-card__code { flex: none; width: 92px; height: 92px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .qr-card h3 { font-size: 1rem; margin-bottom: 7px; } .qr-card p { font-size: 0.875rem; line-height: 1.55; color: var(--ink-500); } /* --- Flow diagram (Menuflow journey + automation) --- */ .flow { display: grid; gap: 0; counter-reset: flowstep; } .flow__step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 18px; padding-bottom: 26px; } .flow__step:last-child { padding-bottom: 0; } .flow__step::before { /* connector line */ content: ""; position: absolute; left: 16.5px; top: 30px; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 8px); } .flow__step:last-child::before { display: none; } .flow__marker { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1px solid var(--accent-line); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; position: relative; z-index: 1; } .flow__title { font-size: 1rem; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; line-height: 1.4; } .flow__desc { font-size: 0.875rem; color: var(--ink-500); line-height: 1.55; margin-top: 3px; } .section--dark .flow__marker { background: var(--dark-alt); border-color: rgba(255,255,255,0.18); color: var(--accent); } .section--dark .flow__step::before { background: repeating-linear-gradient(to bottom, var(--dark-line) 0 4px, transparent 4px 8px); } /* --- Automation node board --- */ .node-board { display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0 / 28px 28px, var(--paper); } .section--dark .node-board { background: linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 28px 28px, var(--dark-alt); border-color: var(--dark-line-soft); } .node { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 13px 15px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); } .section--dark .node { background: #1C1C23; border-color: rgba(255,255,255,0.10); box-shadow: none; } .node__icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); } .section--dark .node__icon { background: rgba(125, 95, 245, 0.16); color: #A48DFF; } .node__label { font-size: 0.875rem; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; } .section--dark .node__label { color: #fff; } .node__meta { font-family: var(--font-mono); font-size: 0.625rem; color: var(--ink-400); letter-spacing: 0.06em; text-transform: uppercase; } .node-link { justify-self: center; width: 1px; height: 18px; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 3px, transparent 3px 6px); position: relative; } .section--dark .node-link { background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.22) 0 3px, transparent 3px 6px); } .node-link::after { content: ""; position: absolute; bottom: -1px; left: 50%; translate: -50% 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 5px solid var(--line-strong); } .section--dark .node-link::after { border-top-color: rgba(255,255,255,0.28); } .node-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* --------------------------------------------------------------------------- 11. SECTIONS ------------------------------------------------------------------------ */ /* --- Positioning strip: what Proofflux is, in one line --- */ .positioning { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .positioning__statement { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; } .positioning__statement em { font-style: normal; color: var(--accent-ink); } .positioning__points { display: grid; gap: 24px; } .positioning__point { padding-left: 20px; border-left: 2px solid var(--accent-line); } .positioning__point h3 { font-size: 1rem; margin-bottom: 6px; } .positioning__point p { font-size: 0.9375rem; line-height: 1.6; } /* --- Solution cards (the three pillars) --- */ .solution { position: relative; display: flex; flex-direction: column; padding: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.24s var(--ease), border-color 0.24s var(--ease), box-shadow 0.24s var(--ease); } .solution::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.32s var(--ease); } .solution:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); } .solution:hover::before { transform: scaleX(1); } .solution__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .solution__kicker { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400); } .solution__name { margin-bottom: 8px; } .solution__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-500); } .solution__list { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-soft); display: grid; gap: 9px; } .solution__list li { font-size: 0.875rem; color: var(--ink-600); display: flex; gap: 9px; align-items: baseline; } .solution__list li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-2px); } .solution__foot { margin-top: auto; padding-top: 24px; } .solution__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: var(--accent-ink); } .solution:hover .solution__cta svg { transform: translateX(3px); } .solution__cta svg { transition: transform 0.2s var(--ease); } /* --- Process steps --- */ .process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .process__step { padding: 30px 26px 30px 0; border-top: 2px solid var(--line); position: relative; } .process__step + .process__step { padding-left: 26px; } .process__step::before { content: ""; position: absolute; top: -2px; left: 0; width: 34px; height: 2px; background: var(--accent); } .process__num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--accent-ink); display: block; margin-bottom: 14px; } .process__step h3 { font-size: 1.0625rem; margin-bottom: 9px; } .process__step p { font-size: 0.875rem; line-height: 1.6; color: var(--ink-500); } /* --- Case study --- */ .case { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .case__result { padding: 40px; border: 1px solid var(--accent-line); border-radius: var(--radius-xl); background: var(--accent-soft); } .section--dark .case__result { background: rgba(255, 99, 33, 0.08); border-color: rgba(255, 99, 33, 0.26); } .case__value { font-size: clamp(3.4rem, 2.4rem + 5vw, 6rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.95; color: var(--ink); } .section--dark .case__value { color: #fff; } .case__period { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); margin-top: 16px; } .section--dark .case__period { color: #FF9A70; } .case__client { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--accent-line); display: flex; flex-wrap: wrap; gap: 8px 32px; } .case__client dt { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 4px; } .case__client dd { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--ink); } .section--dark .case__client dd { color: #fff; } .case__disclaimer { margin-top: 26px; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-500); } /* Case study page: placeholder slots for future screenshots/metrics */ .media-slot { display: grid; place-items: center; gap: 8px; min-height: 230px; padding: 30px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--paper-soft); color: var(--ink-400); } .media-slot__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; } .timeline { display: grid; gap: 0; } .timeline__item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); } .timeline__item:first-child { border-top: 1px solid var(--line); } .timeline__phase { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); padding-top: 3px; } .timeline__body h3 { font-size: 1.0625rem; margin-bottom: 7px; } .timeline__body p { font-size: 0.9375rem; color: var(--ink-500); } /* --- Audience / who we help --- */ .audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .audience__item { background: var(--paper); padding: 26px; } .audience__item h3 { font-size: 1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .audience__item p { font-size: 0.875rem; line-height: 1.6; color: var(--ink-500); } .audience__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .section--dark .audience { background: var(--dark-line-soft); border-color: var(--dark-line-soft); } .section--dark .audience__item { background: var(--dark-alt); } /* --- Pricing --- */ .pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .price-card { display: flex; flex-direction: column; padding: 32px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease); } .price-card:hover { border-color: var(--line-strong); } .price-card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); position: relative; } .price-card__flag { position: absolute; top: -11px; left: 32px; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .price-card__name { font-size: 1.125rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; } .price-card__for { font-size: 0.875rem; color: var(--ink-500); margin-top: 6px; min-height: 2.6em; } .price-card__amount { margin: 22px 0 4px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .price-card__currency { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; color: var(--ink-500); } .price-card__figure { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); } .price-card__period { font-size: 0.9375rem; color: var(--ink-500); } .price-card__from { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400); display: block; margin-bottom: 8px; } .price-card__divider { height: 1px; background: var(--line); margin: 24px 0; } .price-card__includes { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 14px; } .price-card__foot { margin-top: auto; padding-top: 28px; } .pricing-note { margin-top: 28px; } /* Compact pricing row used on the homepage */ .price-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .price-strip__item { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); text-decoration: none; color: inherit; transition: border-color 0.22s var(--ease), transform 0.22s var(--ease); } .price-strip__item:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--line-strong); } .price-strip__label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-400); } .price-strip__amount { margin: 16px 0 6px; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; } .price-strip__desc { font-size: 0.875rem; color: var(--ink-500); line-height: 1.55; } .price-strip__link { margin-top: 20px; font-size: 0.875rem; font-weight: 500; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 7px; } /* --- Feature grid --- */ .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .feature { background: var(--paper); padding: 30px; } .feature h3 { font-size: 1.0625rem; margin-bottom: 10px; } .feature p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-500); } .feature .icon-box { margin-bottom: 18px; } .section--dark .features { background: var(--dark-line-soft); border-color: var(--dark-line-soft); } .section--dark .feature { background: var(--dark-alt); } /* --- Split content block --- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .split--reverse .split__visual { order: -1; } .split--top { align-items: start; } /* --- Contact routes --- */ .routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .route { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); text-decoration: none; color: inherit; transition: transform 0.22s var(--ease), border-color 0.22s var(--ease); } .route:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--accent); } .route h3 { font-size: 1.0625rem; margin: 18px 0 8px; } .route p { font-size: 0.875rem; color: var(--ink-500); line-height: 1.6; } .route__cta { margin-top: auto; padding-top: 22px; font-size: 0.875rem; font-weight: 500; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 8px; } /* --- Final CTA band --- */ .cta-band { position: relative; padding: clamp(48px, 6vw, 80px); border-radius: var(--radius-xl); background: var(--dark); color: var(--dark-text); overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(90% 100% at 100% 0%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(90% 100% at 100% 0%, #000 0%, transparent 70%); pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { color: #fff; max-width: 18ch; } .cta-band p { color: rgba(255, 255, 255, 0.68); max-width: 52ch; margin-top: 18px; } .cta-band__actions { margin-top: 34px; } .cta-band__meta { margin-top: 38px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); } .cta-band__meta a { color: rgba(255, 255, 255, 0.9); } /* --- Page hero (inner pages) --- */ .page-hero { padding-block: clamp(48px, 5vw, 76px) clamp(40px, 4vw, 60px); position: relative; } .page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .page-hero h1 { margin-bottom: 20px; } .page-hero__sub { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 500; color: var(--ink-800); letter-spacing: -0.02em; line-height: 1.35; margin-bottom: 20px; } .page-hero__actions { margin-top: 30px; } /* Breadcrumb */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 22px; } .breadcrumb a { color: var(--ink-400); } .breadcrumb a:hover { color: var(--ink); } .breadcrumb li { display: flex; align-items: center; gap: 8px; } .breadcrumb li + li::before { content: "/"; color: var(--line-strong); } /* --------------------------------------------------------------------------- 12. FOOTER ------------------------------------------------------------------------ */ .site-footer { background: var(--dark); color: rgba(255, 255, 255, 0.6); padding-block: 72px 34px; font-size: 0.9375rem; } .site-footer a { color: rgba(255, 255, 255, 0.6); } .site-footer a:hover { color: #fff; text-decoration: none; } .footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .footer__lockup { margin-bottom: 20px; } .site-footer .brand__name { color: #fff; } .footer__about { font-size: 0.9375rem; line-height: 1.65; max-width: 34ch; } .footer__legal-name { margin-top: 18px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.45); } .footer__heading { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin: 0 0 18px; } .footer__list { display: grid; gap: 11px; font-size: 0.9375rem; } .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 26px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.42); } .footer__social { display: flex; gap: 8px; } .footer__social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease); } .footer__social a:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.05); } /* --------------------------------------------------------------------------- 13. ANIMATION / REVEAL ------------------------------------------------------------------------ */ /* Gated on .js (set by an inline script in ): if JavaScript never runs, nothing is hidden and the full page renders as plain HTML. */ .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .js [data-reveal] { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 14. RESPONSIVE Breakpoints: 1140 laptop · 980 small laptop/tablet · 780 tablet · 600 mobile ------------------------------------------------------------------------ */ @media (max-width: 1140px) { :root { --section-y: 92px; --section-y-sm: 64px; } .nav__link { padding: 9px 11px; font-size: 0.9rem; } } @media (max-width: 980px) { .nav, .header-actions .btn { display: none; } .nav-toggle { display: inline-flex; } .header-actions { gap: 8px; } .hero__grid, .page-hero__grid, .split, .case, .positioning, .section-head--split { grid-template-columns: minmax(0, 1fr); } .section-head--split { gap: var(--gap); } .split--reverse .split__visual { order: 0; } .hero__stack { max-width: 560px; } .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .journey__step + .journey__step::before { display: none; } /* numbers carry the order */ .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3, .features, .audience, .routes, .price-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pricing { grid-template-columns: minmax(0, 1fr); max-width: 520px; } .price-card--featured { order: -1; } .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process__step { padding-right: 20px; } .process__step:nth-child(2n) { padding-left: 26px; } .process__step:nth-child(odd) { padding-left: 0; } .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } .footer__brand { grid-column: 1 / -1; } .case__result { padding: 32px; } } @media (max-width: 780px) { :root { --section-y: 72px; --section-y-sm: 56px; --header-h: 64px; } body { font-size: 16px; } .container { padding-inline: 20px; } .mobile-cta { display: flex; } /* Keep the sticky bar from covering the footer's last row */ .site-footer { padding-bottom: calc(34px + 72px); } .grid-3, .grid-4, .features, .audience, .routes, .price-strip, .grid-2, .node-branch { grid-template-columns: minmax(0, 1fr); } .features, .audience { border-radius: var(--radius); } .process { grid-template-columns: minmax(0, 1fr); } .process__step, .process__step:nth-child(2n) { padding: 24px 0; padding-left: 0; } .journey { grid-template-columns: minmax(0, 1fr); gap: 18px; } .journey__caption h3 { min-height: 0; } /* Full-width screens on mobile: scale the mock UI up so it reads as a real interface rather than miniature texture. */ .ms { min-height: 210px; padding: 14px; gap: 10px; } .ms__logo { width: 22px; height: 22px; font-size: 0.625rem; border-radius: 7px; } .ms__name { font-size: 0.75rem; } .ms__chip { font-size: 0.625rem; padding: 4px 10px; } .ms__thumb { height: 42px; } .ms__label { font-size: 0.6875rem; } .ms__price, .ms__row { font-size: 0.6875rem; } .ms__row { padding: 7px 0; } .ms__total { font-size: 0.8125rem; } .ms__cta { font-size: 0.6875rem; padding: 9px; } .ms__wa { font-size: 0.6875rem; margin: -14px -14px 0; padding: 10px 14px; } .ms__bubble { font-size: 0.6875rem; padding: 10px; } .ms__bubble b { font-size: 0.75rem; } .ms__confirm strong { font-size: 0.875rem; } .ms__confirm span { font-size: 0.6875rem; } .ms__check { width: 36px; height: 36px; } .qr-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; } .form__row { grid-template-columns: minmax(0, 1fr); } .timeline__item { grid-template-columns: minmax(0, 1fr); gap: 10px; } .card, .solution, .price-card, .feature, .audience__item, .route { padding: 24px; } .card--pad-lg { padding: 26px; } .cta-band { padding: 34px 24px; border-radius: var(--radius-lg); } .cta-band h2 { max-width: none; } .case__result { padding: 26px; border-radius: var(--radius-lg); } .brand__mark { width: 30px; height: 30px; border-radius: 8px; } .brand__name { font-size: 1.0625rem; } .hero__meta { gap: 8px 20px; font-size: 0.8125rem; } .accordion__trigger { font-size: 1rem; gap: 16px; padding: 20px 0; } .btn { padding: 12px 20px; } .hero__actions .btn, .page-hero__actions .btn, .cta-band__actions .btn { width: 100%; } .hero__actions.cluster, .page-hero__actions.cluster, .cta-band__actions.cluster { gap: 10px; } .hero__actions .btn, .page-hero__actions .btn, .cta-band__actions .btn { flex: 1 1 100%; } .ui-panel__body { padding: 15px; } .node-board { padding: 18px; } } @media (max-width: 600px) { :root { --section-y: 60px; --section-y-sm: 48px; } .container { padding-inline: 16px; } h1, .h1 { font-size: clamp(2.1rem, 1.5rem + 3.4vw, 2.6rem); } .price-card__figure { font-size: 2.125rem; } .price-card__for { min-height: 0; } .pricing { max-width: none; } .phone { max-width: 268px; } .wa-note { width: 100%; } .dropdown { width: 100%; } .mobile-menu { padding-inline: 16px; } .footer__top { grid-template-columns: minmax(0, 1fr); } .footer__bottom { flex-direction: column; align-items: flex-start; } } /* Very small phones — protect against overflow in mono/long strings */ @media (max-width: 380px) { .stack-card { grid-template-columns: 34px minmax(0, 1fr); } .stack-card__arrow { display: none; } .stack-card__num { width: 34px; height: 34px; } .mobile-cta .btn { font-size: 0.8125rem; padding: 11px 10px; } } /* Print — clean, link-aware */ @media print { .site-header, .mobile-cta, .mobile-menu, .site-footer .footer__social { display: none !important; } body { color: #000; font-size: 12pt; } .section { padding-block: 24px; } .js [data-reveal] { opacity: 1; transform: none; } }