/* ============================================================ openmercato.dev — landing page styles ------------------------------------------------------------ Direction: "Paper & Ink". Built on the THEY.dev design system, shifted cooler to an ink + slate palette with a single restrained blue-green accent. Contents 1. Design tokens (:root custom properties) 2. Base / reset 3. Layout helpers (.container) 4. Shared atoms (kicker, buttons, wordmark) 5. Header / navigation 6. Section rhythm 7. Hero 8. Problem 9. Three worlds 10. Product mock ("See the system") 11. Low risk 12. Who builds it 13. Compare 14. FAQ 15. Closing CTA 16. Footer 17. Motion / entrance + accessibility Fonts are loaded from the document (preconnect + stylesheet) rather than @import, for faster first paint. ============================================================ */ /* 1. ---------- Design tokens ---------- */ :root { --font: "Plus Jakarta Sans", sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --ink: #11171c; --slate-900: #1b232b; --slate-700: #33414c; --slate-600: #475663; --slate-500: #647585; --slate-400: #8a99a6; --slate-300: #b6c2cc; --slate-200: #d7dfe5; --slate-150: #e5ebef; --slate-100: #eff3f5; --paper: #f6f8f9; --white: #ffffff; --accent: #03ccb4; --accent-d: #029a88; --accent-t: #e7f1ef; --accent-tx: #029a88; --amber: #c2792b; /* used only for a "needs action" warning dot in the mock */ --maxw: 1140px; --shadow-card: 0 24px 50px -34px rgba(17, 23, 28, 0.45); --shadow-soft: 0 14px 34px -26px rgba(17, 23, 28, 0.4); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--paper); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } figure { margin: 0; } blockquote { margin: 0; } dl, dd { margin: 0; } ol, ul { margin: 0; } .casecard .cc-meta { display: flex; flex-direction: column; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } @media (max-width: 640px) { .container { padding: 0 22px; } } /* ---------- shared atoms ---------- */ .kicker { font: 600 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-tx); display: inline-flex; align-items: center; gap: 11px; } .kicker::before { content: ""; width: 28px; height: 2px; background: var(--accent); } .kicker.center { justify-content: center; } .section-title { font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; margin: 18px 0 0; color: var(--ink); text-wrap: balance; } .section-lede { font-size: 18px; color: var(--slate-600); line-height: 1.6; margin: 18px 0 0; max-width: 60ch; } .btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 0; font: 600 16px/1 var(--font); padding: 16px 26px; border-radius: 7px; transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; white-space: nowrap; } .btn .arw { display: inline-block; transition: transform 0.25s ease; } .btn:hover .arw { transform: translateX(4px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-d); box-shadow: 0 8px 24px -4px rgba(12, 122, 107, 0.42); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--slate-300); } .btn-ghost:hover { border-color: var(--ink); } .btn-lg { font-size: 17px; padding: 18px 30px; } /* ---------- wordmark ---------- */ .wm { display: inline-flex; align-items: center; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); } .wm .mark { width: 25px; height: 25px; border-radius: 6px; background: var(--accent); display: grid; place-items: center; flex: none; } .wm .mark span { display: block; width: 9px; height: 9px; border-radius: 2px; background: #fff; } .wm .dev { color: var(--slate-400); font-weight: 500; } /* ---------- nav brand ---------- */ .nav-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; line-height: 1; } .built-by { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 500; letter-spacing: 0.02em; color: var(--slate-400); text-transform: uppercase; } .built-by img { height: 8px; width: auto; display: block; filter: brightness(0); opacity: 0.55; transition: opacity 0.2s ease; } .built-by:hover img { opacity: 0.85; } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(246, 248, 249, 0.86); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease, background 0.3s ease; } .nav.scrolled { border-bottom-color: var(--slate-150); background: rgba(246, 248, 249, 0.94); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav-links { display: flex; gap: 32px; } .nav-links a { font-size: 14.5px; font-weight: 500; color: var(--slate-600); transition: color 0.2s ease; } .nav-links a:hover { color: var(--ink); } .nav-cta { font: 600 14px/1 var(--font); background: var(--accent); color: #fff; padding: 12px 18px; border-radius: 7px; white-space: nowrap; transition: background-color 0.25s ease, box-shadow 0.25s ease; } .nav-cta:hover { background: var(--accent-d); box-shadow: 0 6px 18px -4px rgba(12, 122, 107, 0.4); } .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; } @media (max-width: 860px) { .nav-links { display: none; } .nav-cta { display: inline-flex; padding: 11px 15px; font-size: 13px; } .nav-burger { display: none; } } /* ---------- sections rhythm ---------- */ section { padding: 104px 0; } @media (max-width: 860px) { section { padding: 72px 0; } } .divide { border-top: 1px solid var(--slate-150); } /* ---------- HERO ---------- */ .hero { padding: 84px 0 96px; } .hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; } .hero h1 { font-size: clamp(38px, 5.4vw, 60px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin: 24px 0 0; color: var(--ink); text-wrap: balance; } .hero .sub { font-size: 19px; color: var(--slate-600); line-height: 1.62; margin: 26px 0 0; max-width: 48ch; } .hero .cta-line { display: flex; align-items: center; gap: 20px; margin-top: 38px; flex-wrap: wrap; } .hero .reassure { font-size: 14px; color: var(--slate-500); } .hero .reassure b { color: var(--ink); font-weight: 600; } .trust { display: flex; gap: 26px; flex-wrap: wrap; margin: 44px 0 0; padding-top: 30px; border-top: 1px solid var(--slate-150); } .trust .ti { display: flex; flex-direction: column-reverse; gap: 3px; } .trust .ti .n { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .trust .ti .l { font-size: 12.5px; color: var(--slate-500); margin: 0; } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } .hero .sub { max-width: none; } } /* hero product preview card */ .hcard { background: var(--white); border: 1px solid var(--slate-200); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); } .hcard .hc-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--slate-150); } .hcard .hc-title { font-weight: 600; font-size: 14px; } .hcard .hc-title .muted { color: var(--slate-400); font-weight: 500; } .pill-stage { font: 600 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-tx); background: var(--accent-t); padding: 7px 10px; border-radius: 20px; } .stepper { display: flex; align-items: center; gap: 0; padding: 18px 18px 6px; } .stepper .stp { flex: 1; display: flex; flex-direction: column; gap: 8px; } .stepper .stp .bar { height: 4px; border-radius: 3px; background: var(--slate-150); } .stepper .stp.done .bar, .stepper .stp.now .bar { background: var(--accent); } .stepper .stp.now .bar { opacity: 0.5; } .stepper .stp .lab { font: 500 9.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-400); } .stepper .stp.done .lab, .stepper .stp.now .lab { color: var(--accent-tx); } .hc-rows { padding: 8px 18px 4px; } .hc-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; font-size: 13.5px; border-bottom: 1px solid var(--slate-100); } .hc-row:last-child { border-bottom: 0; } .hc-row .k { color: var(--slate-500); } .hc-row .v { font-weight: 600; } .hc-margin { margin: 6px 18px 18px; padding: 16px; background: var(--paper); border: 1px solid var(--slate-150); border-radius: 10px; display: flex; align-items: flex-end; justify-content: space-between; } .hc-margin .ml { font-size: 12.5px; color: var(--slate-500); } .hc-margin .mv { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent-tx); } .hc-margin .mp { font-size: 12.5px; color: var(--slate-500); text-align: right; } /* ---------- PROBLEM ---------- */ .problem { background: var(--white); } .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .problem h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; margin: 18px 0 0; text-wrap: balance; } .problem .em { color: var(--accent-tx); } .problem-points { display: flex; flex-direction: column; gap: 26px; list-style: none; padding: 0; } .ppoint { display: flex; gap: 18px; } .ppoint .num { font: 600 13px/1 var(--mono); color: var(--accent-tx); padding-top: 3px; flex: none; width: 28px; } .ppoint .pp-h { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .ppoint .pp-b { font-size: 15.5px; color: var(--slate-600); line-height: 1.6; margin: 7px 0 0; } @media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; gap: 40px; } } /* ---------- THREE WORLDS ---------- */ .worlds-head { max-width: 62ch; } .worlds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 54px; } .world { background: var(--white); border: 1px solid var(--slate-200); border-radius: 16px; padding: 34px 30px; display: flex; flex-direction: column; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .world:hover { border-color: var(--slate-300); box-shadow: var(--shadow-soft); transform: translateY(-3px); } .world .w-ic { width: 46px; height: 46px; border-radius: 11px; background: var(--accent-t); display: grid; place-items: center; margin-bottom: 22px; } .world .w-ic svg { width: 24px; height: 24px; stroke: var(--accent-tx); } .world .w-tag { font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); } .world h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 10px 0 0; } .world .w-desc { font-size: 15px; color: var(--slate-600); line-height: 1.58; margin: 14px 0 22px; } .world .w-list { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid var(--slate-150); display: flex; flex-direction: column; gap: 11px; } .world .w-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--slate-700); line-height: 1.45; } .world .w-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); margin-top: 6px; } @media (max-width: 860px) { .worlds-grid { grid-template-columns: 1fr; gap: 18px; } } /* ---------- PRODUCT (centrepiece) ---------- */ .product { background: var(--white); overflow-x: clip; } .product-head { text-align: center; max-width: 60ch; margin: 0 auto; } .product-stage { margin-top: 54px; } .product-deck { max-width: 1100px; margin: 0 auto; } .deck-panel[hidden] { display: none; } .deck-switch { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 34px; } .deck-tab { font: 600 14px/1 var(--font); padding: 12px 20px; border-radius: 999px; border: 1px solid var(--slate-200); background: var(--white); color: var(--slate-600); cursor: pointer; white-space: nowrap; transition: border-color 0.2s, color 0.2s, background 0.2s; } .deck-tab:hover { border-color: var(--slate-400); color: var(--ink); } .deck-tab.active { background: var(--slate-900); border-color: var(--slate-900); color: var(--white); } .app { background: var(--paper); border: 1px solid var(--slate-200); border-radius: 16px; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(17, 23, 28, 0.5); } .app-top { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--white); border-bottom: 1px solid var(--slate-150); } .app-top .traffic { display: flex; gap: 7px; } .app-top .traffic i { width: 11px; height: 11px; border-radius: 50%; background: var(--slate-200); } .app-top .addr { font: 500 12px/1 var(--mono); color: var(--slate-400); background: var(--paper); border: 1px solid var(--slate-150); border-radius: 6px; padding: 8px 14px; margin-left: 6px; white-space: nowrap; } .app-top .addr b { color: var(--slate-600); font-weight: 600; } .app-top .app-wm { margin-left: auto; } .app-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 560px; } @media (max-width: 980px) { .app-body { grid-template-columns: minmax(0, 1fr); } } /* sidebar */ .app-side { background: var(--white); border-right: 1px solid var(--slate-150); padding: 22px 16px; display: flex; flex-direction: column; gap: 4px; } @media (max-width: 980px) { .app-side { display: none; } } .side-grp { font: 600 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); padding: 14px 12px 8px; } .side-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; color: var(--slate-600); font-weight: 500; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .side-item svg { width: 17px; height: 17px; stroke: currentColor; flex: none; } .side-item:hover { background: var(--paper); color: var(--ink); } .side-item.active { background: var(--accent-t); color: var(--accent-tx); font-weight: 600; } .side-item .badge { margin-left: auto; font: 600 10px/1 var(--mono); background: var(--slate-150); color: var(--slate-600); padding: 4px 7px; border-radius: 20px; } .side-item.active .badge { background: var(--accent); color: #fff; } /* main canvas */ .app-main { padding: 26px 28px; display: flex; flex-direction: column; gap: 22px; background: var(--paper); } .app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .app-head .crumbs { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-400); } .app-head h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 9px 0 0; } .app-head .sub { font-size: 13.5px; color: var(--slate-500); margin: 6px 0 0; } .app-head .h-cta { display: flex; gap: 10px; align-items: center; } .mini-btn { font: 600 12.5px/1 var(--font); padding: 10px 14px; border-radius: 7px; border: 1px solid var(--slate-200); background: var(--white); color: var(--slate-700); cursor: pointer; white-space: nowrap; transition: border-color 0.2s; } .mini-btn:hover { border-color: var(--slate-400); } .mini-btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); } /* big stage tabs */ .flow { background: var(--white); border: 1px solid var(--slate-200); border-radius: 12px; padding: 20px 22px; } .flow-tabs { display: flex; gap: 8px; align-items: center; } .flow-tab { display: flex; flex: 1; flex-direction: column; text-align: center; padding: 12px 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: all 0.2s ease; position: relative; background: none; font-family: var(--font); } .flow-tab .ft-n { font: 600 10px/1 var(--mono); letter-spacing: 0.06em; color: var(--slate-400); } .flow-tab .ft-l { font-size: 13px; font-weight: 600; color: var(--slate-500); margin-top: 7px; } .flow-tab.done { background: var(--paper); } .flow-tab.done .ft-n, .flow-tab.done .ft-l { color: var(--accent-tx); } .flow-tab.active { background: var(--accent-t); border-color: var(--accent); } .flow-tab.active .ft-n { color: var(--accent); } .flow-tab.active .ft-l { color: var(--accent-tx); } .flow-arrow { color: var(--slate-300); flex: none; font-size: 14px; } .flow-prog { height: 5px; border-radius: 4px; background: var(--slate-150); margin-top: 18px; overflow: hidden; } .flow-prog i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.4s ease; } .flow-note { font-size: 13px; color: var(--slate-500); margin-top: 13px; } .flow-note b { color: var(--ink); font-weight: 600; } /* panels grid */ .panels { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; } @media (max-width: 760px) { .panels { grid-template-columns: 1fr; } } .panel { background: var(--white); border: 1px solid var(--slate-200); border-radius: 12px; padding: 20px 22px; } .panel .btn { margin-top: 16px; } .panel-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .panel-h .pt { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } .panel-h .pmeta { font: 500 11px/1 var(--mono); color: var(--slate-400); white-space: nowrap; flex: none; } /* money panel */ .money { display: flex; flex-direction: column; gap: 14px; } .money-row { display: flex; align-items: center; justify-content: space-between; } .money-row .ml { font-size: 13.5px; color: var(--slate-600); } .money-row .mv { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .bars { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; } .barline { display: flex; flex-direction: column; gap: 6px; } .barline .blh { display: flex; justify-content: space-between; font-size: 12px; color: var(--slate-500); } .barline .bar { height: 9px; border-radius: 5px; background: var(--slate-150); overflow: hidden; } .barline .bar i { display: block; height: 100%; border-radius: 5px; } .barline .bar i.cost { background: var(--slate-400); } .barline .bar i.price { background: var(--accent); } .margin-box { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--slate-150); display: flex; align-items: flex-end; justify-content: space-between; } .margin-box .mb-l { font-size: 13px; color: var(--slate-500); } .margin-box .mb-v { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent-tx); line-height: 1; } .margin-box .mb-p { font-size: 13px; font-weight: 600; color: var(--accent-tx); } /* docs panel */ .docs { display: flex; flex-direction: column; gap: 4px; } .doc { display: flex; align-items: center; gap: 13px; padding: 11px 8px; border-radius: 8px; transition: background 0.2s; cursor: pointer; } .doc:hover { background: var(--paper); } .doc .dic { width: 30px; height: 36px; border-radius: 5px; background: var(--paper); border: 1px solid var(--slate-200); display: grid; place-items: center; flex: none; } .doc .dic svg { width: 15px; height: 15px; stroke: var(--slate-500); } .doc .dt { font-size: 13.5px; font-weight: 500; } .doc .dm { font: 500 11px/1 var(--mono); color: var(--slate-400); margin-top: 3px; } .doc .dgo { margin-left: auto; color: var(--slate-300); font-size: 14px; } /* live jobs table */ .jobs { background: var(--white); border: 1px solid var(--slate-200); border-radius: 12px; padding: 20px 22px; } .jobs-table { width: 100%; border-collapse: collapse; } .jobs-table th { font: 600 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-400); text-align: left; padding: 0 0 14px; } .jobs-table th.r, .jobs-table td.r { text-align: right; } .jobs-table td { padding: 13px 0; border-top: 1px solid var(--slate-100); font-size: 13.5px; } .jobs-table tr td:first-child { font-weight: 600; } .jobs-table .ref { font: 500 12px/1 var(--mono); color: var(--slate-400); } .tag { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font); padding: 5px 10px; border-radius: 20px; } .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; } .tag.live { background: var(--accent-t); color: var(--accent-tx); } .tag.live::before { background: var(--accent); } .tag.quote { background: var(--slate-100); color: var(--slate-600); } .tag.quote::before { background: var(--slate-400); } .tag.action { background: #fbf0e3; color: var(--amber); } .tag.action::before { background: var(--amber); } .tag.invoice { background: var(--slate-100); color: var(--slate-600); } .tag.invoice::before { background: var(--slate-500); } .money-num { font-variant-numeric: tabular-nums; font-weight: 600; } .product-cap { text-align: center; font-size: 15px; color: var(--slate-500); margin: 30px auto 0; max-width: 56ch; line-height: 1.6; } /* product mock — mobile */ @media (max-width: 600px) { .app-top .addr { display: none; } .app-top .app-wm { margin-left: 0; } .app-main { padding: 18px 16px; gap: 16px; } .flow { padding: 16px 14px; } .flow-tabs { gap: 3px; } .flow-arrow { display: none; } .flow-tab { padding: 9px 2px; } .flow-tab .ft-l { font-size: 11px; margin-top: 5px; } .app-head .h-cta { display: none; } .jobs { overflow-x: auto; } .jobs-table { min-width: 420px; } } /* ---------- LOW RISK ---------- */ .risk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 54px; border: 1px solid var(--slate-200); border-radius: 16px; overflow: hidden; background: var(--white); } .risk { padding: 34px 28px; border-right: 1px solid var(--slate-150); } .risk:last-child { border-right: 0; } .risk .r-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-t); display: grid; place-items: center; margin-bottom: 20px; } .risk .r-ic svg { width: 22px; height: 22px; stroke: var(--accent-tx); } .risk h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.25; } .risk p { font-size: 14px; color: var(--slate-600); line-height: 1.55; margin: 11px 0 0; } @media (max-width: 980px) { .risk-grid { grid-template-columns: 1fr 1fr; } .risk:nth-child(2n) { border-right: 0; } .risk:nth-child(-n + 2) { border-bottom: 1px solid var(--slate-150); } } @media (max-width: 560px) { .risk-grid { grid-template-columns: 1fr; } .risk { border-right: 0; border-bottom: 1px solid var(--slate-150); } .risk:last-child { border-bottom: 0; } } /* ---------- WHO BUILDS IT ---------- */ .builder { background: var(--white); } .builder-grid { display: grid; grid-template-columns: minmax(0, 100%); justify-content: center; gap: 64px; align-items: start; } @media (max-width: 860px) { .builder-grid { grid-template-columns: 1fr; gap: 44px; } } .builder-body p { font-size: 16.5px; color: var(--slate-600); line-height: 1.66; margin: 18px 0 0; } .builder-body p strong { color: var(--ink); font-weight: 600; } .foundation { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--slate-200); border-radius: 12px; background: var(--paper); display: flex; gap: 16px; align-items: flex-start; } .foundation .f-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--white); border: 1px solid var(--slate-200); display: grid; place-items: center; flex: none; } .foundation .f-ic svg { width: 21px; height: 21px; stroke: var(--accent-tx); } .foundation .f-h { font-size: 15px; font-weight: 600; margin: 0; } .foundation .f-b { font-size: 14px; color: var(--slate-600); line-height: 1.55; margin: 6px 0 0; } /* case study slot */ .casecard { border: 1px solid var(--slate-200); border-radius: 16px; padding: 34px 30px; background: var(--white); } .casecard .cc-tag { font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); } .casecard .cc-quote { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; color: var(--ink); margin: 18px 0 0; text-wrap: balance; } .casecard .cc-av { width: 46px; height: 46px; border-radius: 50%; background: var(--slate-150); border: 1px dashed var(--slate-300); flex: none; } .casecard .cc-meta .l1 { font-size: 14px; font-weight: 600; color: var(--slate-400); } .casecard .cc-meta .l2 { font-size: 13px; color: var(--slate-400); margin-top: 3px; } .casecard .cc-note { font-size: 12.5px; color: var(--slate-500); margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--slate-150); } /* ---------- COMPARE ---------- */ .compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 54px; align-items: stretch; } @media (max-width: 860px) { .compare-grid { grid-template-columns: 1fr; gap: 18px; } } .cmp { border: 1px solid var(--slate-200); border-radius: 16px; padding: 32px 30px; background: var(--white); display: flex; flex-direction: column; } .cmp.mid { border: 1.5px solid var(--accent); background: var(--white); box-shadow: var(--shadow-soft); position: relative; } .cmp .cmp-badge { position: absolute; top: -12px; left: 30px; font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 7px 12px; border-radius: 20px; } .cmp .cmp-tag { font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); } .cmp.mid .cmp-tag { color: var(--accent-tx); } .casecard .cc-foot { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; } .cmp h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 12px 0 0; line-height: 1.25; } .cmp .cmp-b { font-size: 14.5px; color: var(--slate-600); line-height: 1.58; margin: 14px 0 20px; } .cmp ul { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid var(--slate-150); display: flex; flex-direction: column; gap: 11px; } .cmp li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--slate-700); line-height: 1.45; } .cmp li svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } .cmp li.no svg { stroke: var(--slate-400); } .cmp li.yes svg { stroke: var(--accent-tx); } /* ---------- FAQ ---------- */ .faq { background: var(--white); } .faq-item h3 { margin: 0; font-size: inherit; font-weight: inherit; } .faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; } @media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } } .faq-list { border-top: 1px solid var(--slate-150); } .faq-item { border-bottom: 1px solid var(--slate-150); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: none; border: 0; cursor: pointer; text-align: left; padding: 24px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-family: var(--font); } .faq-ic { flex: none; width: 24px; height: 24px; position: relative; transition: transform 0.3s ease; } .faq-ic::before, .faq-ic::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; } .faq-ic::before { top: 11px; left: 3px; right: 3px; height: 2px; } .faq-ic::after { left: 11px; top: 3px; bottom: 3px; width: 2px; transition: opacity 0.3s ease; } .faq-item.open .faq-ic::after { opacity: 0; } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-a .inner { font-size: 15.5px; color: var(--slate-600); line-height: 1.65; padding: 0 0 26px; max-width: 58ch; } .faq-side .kicker { margin-bottom: 18px; } .faq-side h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; margin: 0; } .faq-side p { font-size: 16px; color: var(--slate-600); line-height: 1.6; margin: 18px 0 26px; } /* ---------- CLOSING CTA ---------- */ .closing { background: var(--ink); color: #fff; padding: 110px 0; } .closing .container { text-align: center; } .closing .kicker { color: #5fd6c4; } .closing .kicker::before { background: #5fd6c4; } .closing h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; margin: 22px auto 0; max-width: 18ch; color: #fff; text-wrap: balance; } .closing p { font-size: 18px; color: #9fb0af; line-height: 1.6; margin: 22px auto 0; max-width: 52ch; } .closing .cta-line { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; flex-wrap: wrap; } .closing .btn-primary { background: var(--accent); } .closing .btn-primary:hover { background: #0e8f7d; box-shadow: 0 10px 30px -6px rgba(12, 122, 107, 0.6); } .closing .reassure { font-size: 14px; color: #7e908f; } .closing-meta { display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; margin-top: 48px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .closing-meta .cm { font-size: 13.5px; color: #9fb0af; display: flex; align-items: center; gap: 9px; } .closing-meta .cm svg { width: 17px; height: 17px; stroke: #5fd6c4; flex: none; } /* ---------- FOOTER ---------- */ .footer { background: var(--ink); color: #9fb0af; padding: 0 0 56px; } .footer-inner { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer .wm { color: #fff; } .footer .wm .dev { color: #7e908f; } .footer-end { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #7e908f; } .footer-end img { height: 15px; opacity: 0.85; } @media (max-width: 560px) { .footer-inner { flex-direction: column; align-items: flex-start; gap: 28px; } } /* 17. ---------- Motion / entrance + accessibility ---------- */ /* Skip link — visible only when focused via keyboard */ .skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 7px; transition: top 0.2s ease; } .skip-link:focus { top: 16px; } /* Keyboard focus ring (mirrors the THEY.dev teal focus treatment) */ :focus-visible { outline: 3px solid rgba(12, 122, 107, 0.5); outline-offset: 2px; border-radius: 4px; } /* * Entrance: content is ALWAYS visible by default (no-JS, print, * reduced-motion all show everything). The reveal only engages * when JS adds `.reveal-on` to AND motion is allowed. */ [data-animate] { opacity: 1; } @media (prefers-reduced-motion: no-preference) { /* one-time hero fade */ .has-js .hero [data-animate] { animation: omFade 0.7s both; } .has-js .hero [data-animate]:nth-child(2) { animation-delay: 0.06s; } .has-js .hero [data-animate]:nth-child(3) { animation-delay: 0.12s; } .has-js .hero [data-animate]:nth-child(4) { animation-delay: 0.18s; } /* scroll reveal for everything below the hero */ .reveal-on [data-animate] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1); } .reveal-on .hero [data-animate] { opacity: 1; transform: none; } .reveal-on [data-animate].is-visible { opacity: 1; transform: none; } } @keyframes omFade { from { opacity: 0; } to { opacity: 1; } } /* ---------- HERO: positioning line ---------- */ .hero-pos { margin: 22px 0 0; font-size: 13.5px; color: var(--slate-500); line-height: 1.55; max-width: 56ch; } /* ---------- WHO WE ARE ---------- */ .who { background: var(--white); } .who-head { max-width: 62ch; } .who-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; } .who-card { background: var(--paper); border: 1px solid var(--slate-200); border-radius: 16px; padding: 32px 30px; display: flex; flex-direction: column; } .who-card .w-tag { font: 600 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-400); } .who-card h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 12px 0 0; } .who-card p { font-size: 15.5px; color: var(--slate-600); line-height: 1.6; margin: 14px 0 0; } .who-card .w-list { list-style: none; padding: 18px 0 0; margin: 22px 0 0; border-top: 1px solid var(--slate-150); display: flex; flex-direction: column; gap: 11px; } .who-card .w-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--slate-700); line-height: 1.45; } .who-card .w-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); margin-top: 6px; } @media (max-width: 860px) { .who-cards { grid-template-columns: 1fr; gap: 18px; } } /* ---------- TRUST STRIP ---------- */ .trust-band { background: #272727; padding-top: 80px; padding-bottom: 80px; } .trust-band .kicker, .trust-band .trust-title { color: var(--white); } .trust-band .container { text-align: center; } .trust-band .kicker { justify-content: center; } .trust-title { font-size: clamp(24px, 2.8vw, 32px); margin-top: 16px; } .client-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; } .cl-tile { height: 56px; display: flex; align-items: center; justify-content: center; padding: 10px 14px; } .cl-tile img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(100%) brightness(0) invert(1); opacity: 0.85; transition: opacity 0.2s ease; } .cl-tile img:hover { opacity: 1; } .trust-note { font-size: 15px; color: var(--slate-600); line-height: 1.6; margin: 30px auto 0; max-width: 64ch; } @media (max-width: 860px) { .client-logos { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .client-logos { grid-template-columns: repeat(2, 1fr); } } /* ---------- SUPPORT GRID (inside #builder) ---------- */ .support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; border: 1px solid var(--slate-200); border-radius: 16px; overflow: hidden; background: var(--paper); } .support { padding: 28px 26px; border-right: 1px solid var(--slate-150); background: var(--paper); } .support:last-child { border-right: 0; } .support .r-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-t); display: grid; place-items: center; margin-bottom: 18px; } .support .r-ic svg { width: 21px; height: 21px; stroke: var(--accent-tx); } .support h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.25; } .support p { font-size: 13.5px; color: var(--slate-600); line-height: 1.55; margin: 10px 0 0; } @media (max-width: 980px) { .support-grid { grid-template-columns: 1fr 1fr; } .support:nth-child(2n) { border-right: 0; } .support:nth-child(-n + 2) { border-bottom: 1px solid var(--slate-150); } } @media (max-width: 560px) { .support-grid { grid-template-columns: 1fr; } .support { border-right: 0; border-bottom: 1px solid var(--slate-150); } .support:last-child { border-bottom: 0; } } /* ---------- HOSTING ---------- */ .hosting { background: var(--paper); } .hosting .compare-grid { margin-top: 44px; } /* ---------- PRICING ---------- */ .pricing { background: var(--white); } .pricing-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; } @media (max-width: 860px) { .pricing-panels { grid-template-columns: 1fr; } } .price-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .price-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--slate-700); line-height: 1.5; } .price-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); margin-top: 7px; } /* ---------- PROCESS ---------- */ .process { background: var(--paper); } .process-steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--slate-200); border-radius: 16px; overflow: hidden; background: var(--white); } .step { padding: 26px 24px; border-right: 1px solid var(--slate-150); border-bottom: 1px solid var(--slate-150); background: var(--white); } .step:nth-child(4n) { border-right: 0; } .step:nth-last-child(-n + 4) { border-bottom: 0; } .step .ps-n { display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--accent-tx); background: var(--accent-t); padding: 6px 9px; border-radius: 6px; } .step h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 14px 0 0; line-height: 1.25; } .step p { font-size: 13.5px; color: var(--slate-600); line-height: 1.55; margin: 8px 0 0; } @media (max-width: 980px) { .process-steps { grid-template-columns: 1fr 1fr; } .step:nth-child(4n) { border-right: 1px solid var(--slate-150); } .step:nth-child(2n) { border-right: 0; } .step:nth-last-child(-n + 4) { border-bottom: 1px solid var(--slate-150); } .step:nth-last-child(-n + 2) { border-bottom: 0; } } @media (max-width: 560px) { .process-steps { grid-template-columns: 1fr; } .step { border-right: 0; border-bottom: 1px solid var(--slate-150); } .step:last-child { border-bottom: 0; } } /* ---------- BUTTONS ON DARK ---------- */ .btn-on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.28); background: transparent; } .btn-on-dark:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); } /* ---------- IDEA MODAL ---------- */ .idea-modal { border: 0; padding: 0; background: transparent; max-width: 560px; border-radius: 16px; overflow: visible; } .idea-modal::backdrop { background: rgba(17, 23, 28, 0.55); backdrop-filter: blur(4px); } .idea-form { background: var(--white); border: 1px solid var(--slate-200); border-radius: 16px; padding: 30px 30px 26px; position: relative; box-shadow: var(--shadow-card); } .idea-close { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 0; color: var(--slate-500); font-size: 22px; line-height: 1; cursor: pointer; } .idea-close:hover { background: var(--paper); color: var(--ink); } .idea-form h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 14px 0 0; } .idea-lede { font-size: 14.5px; color: var(--slate-600); line-height: 1.55; margin: 10px 0 18px; } .idea-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .idea-row { grid-template-columns: 1fr; } } .idea-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--slate-600); } .idea-field > span, .idea-field > legend { font-weight: 600; color: var(--ink); } .idea-field input, .idea-field textarea { font: 400 14.5px/1.5 var(--font); color: var(--ink); background: var(--paper); border: 1px solid var(--slate-200); border-radius: 8px; padding: 10px 12px; width: 100%; } .idea-field input:focus, .idea-field textarea:focus { outline: 0; border-color: var(--accent); background: var(--white); } .idea-field textarea { resize: vertical; min-height: 110px; } .idea-radio { border: 0; padding: 0; margin: 0 0 14px; } .idea-radio legend { margin-bottom: 8px; } .idea-radio label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 14px; color: var(--slate-700); } .idea-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; flex-wrap: wrap; } .idea-foot { font-size: 12.5px; color: var(--slate-500); margin: 14px 0 0; } .idea-status { font-size: 13.5px; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; background: var(--paper); border: 1px solid var(--slate-200); color: var(--slate-700); } .idea-status.ok { background: var(--accent-t); border-color: var(--accent); color: var(--accent-tx); } .idea-status.err { background: #fbf0e3; border-color: var(--amber); color: var(--amber); } /* fallback when unsupported and JS forces the hidden state */ .idea-modal[hidden] { display: none; } .idea-modal[open]:not([hidden]) { position: fixed; z-index: 120; } /* 18. ---------- Cookie notice ---------- */ .cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 540px; margin-left: auto; z-index: 100; background: var(--white); border: 1px solid var(--slate-200); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow-soft); } .cookie-notice[hidden] { display: none; } .cn-text { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--slate-600); } .cn-text a { color: var(--accent-d); } .cn-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .cn-actions .btn { padding: 7px 14px; font-size: 13px; } /* ---------- SUBPAGES (industries & comparisons) ---------- */ .vs-table th, .vs-table td { vertical-align: top; padding-right: 24px; } .vs-table th:last-child, .vs-table td:last-child { padding-right: 0; } .vs-table td:first-child { color: var(--slate-700); } .table-scroll { overflow-x: auto; } .table-scroll .vs-table { min-width: 640px; } .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 54px; } @media (max-width: 860px) { .case-grid { grid-template-columns: 1fr; gap: 18px; } } .case-grid .panel { padding: 28px 30px; } .compare-grid.two { grid-template-columns: 1fr 1fr; } @media (max-width: 860px) { .compare-grid.two { grid-template-columns: 1fr; } } .w-more { display: inline-block; margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--accent-tx); } .w-more:hover { text-decoration: underline; } .product-cap a { color: var(--accent-tx); font-weight: 600; } .product-cap a:hover { text-decoration: underline; }