/* ---------------------------------------------------------------------------- * LastingERP marketing design system (v3) * * Extracted from views/landing_v3.php so the homepage, About, Features, * Pricing and Contact pages can share one stylesheet. * * Everything is scoped under .v3 so it cannot affect the shared Bootstrap 3 * header/footer or any of the ~140 legacy marketing pages. A page opts in by * wrapping its content in
. * * Palette is the existing brand: near-black ink + #e5f538 lime. * Include via views/partials/v3_head.php (loads the fonts and this file). * -------------------------------------------------------------------------- */ .v3{ --ink:#0e100b; --ink-2:#171a12; --ink-3:#22261b; --lime:#e5f538; --olive:#566000; --paper:#f3f5ee; --card:#ffffff; --steel:#5d6556; --steel-2:#9aa38f; --rule:#dde2d3; --rule-dark:#2c3124; --warn:#ff6b2c; --ok:#43c173; --radius-btn:30px; --radius-input:26px; --radius-ctl:37px; --display:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,sans-serif; --body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; font-family:var(--body); color:var(--ink); background:var(--paper); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } .v3 *,.v3 *::before,.v3 *::after{box-sizing:border-box} /* Resets use :where() so they beat Bootstrap 3 / style.css element rules (0,0,1) but lose to the .v3-* component classes declared below. */ .v3 :where(section,h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote){margin:0;padding:0} .v3 :where(ul,ol){list-style:none} .v3 :where(dt){font-weight:400} .v3 :where(a),.v3 :where(a):hover,.v3 :where(a):focus{color:inherit;text-decoration:none} .v3 :where(img){max-width:100%;height:auto;display:block} .v3 a:focus-visible,.v3 button:focus-visible,.v3 summary:focus-visible,.v3 input:focus-visible{outline:3px solid var(--lime);outline-offset:3px} .v3-wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)} .v3-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)} .v3-h2{font-family:var(--display);font-weight:800;text-transform:capitalize;font-size:clamp(34px,4.2vw,56px);line-height:.98;letter-spacing:-.005em;text-wrap:balance;overflow-wrap:break-word} .v3-lead{font-size:clamp(17px,1.5vw,19px);color:var(--steel);max-width:62ch} .v3-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:700;font-size:16px;padding:15px 24px;border-radius:var(--radius-btn);border:2px solid transparent;transition:transform .15s ease,background .15s ease;cursor:pointer;line-height:1.1;height:auto} .v3-btn:hover{transform:translateY(-2px);text-decoration:none} .v3-btn-lime{background:var(--lime);color:var(--ink)!important} .v3-btn-ghost{border-color:#3b4230;color:#fff!important} .v3-btn-ghost:hover{border-color:var(--lime)} .v3-btn-dark{background:var(--ink);color:#fff!important} .v3-arrow{font-family:var(--mono);font-weight:500} /* HERO — light. Was a dark two-column hero with a production-board mock. Reverted to a light ground at the client's request and rebuilt around the previous banner's content: headline, sub, business-email capture and the "We solve" rotator. */ .v3-hero{ background:var(--paper);color:var(--ink); position:relative;overflow:hidden; padding-block:clamp(44px,5.5vw,84px) 0; border-bottom:1px solid var(--rule); } /* faint technical grid, the light counterpart of the old dark one */ .v3-hero::before{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(86,96,0,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(86,96,0,.055) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse 70% 62% at 50% 34%,#000 30%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 34%,#000 30%,transparent 78%); pointer-events:none; } .v3-hero-inner{position:relative;max-width:1240px;margin:0 auto;text-align:center;padding-bottom:clamp(34px,4vw,52px)} .v3-hero .v3-eyebrow{color:var(--olive);display:inline-flex;align-items:center;gap:10px;justify-content:center} .v3-hero .v3-eyebrow::before,.v3-hero .v3-eyebrow::after{content:"";width:26px;height:2px;background:var(--lime)} .v3-hero h1{ font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(36px,5.4vw,88px);line-height:.94;letter-spacing:-.005em; margin:16px auto 18px;color:var(--ink);text-wrap:balance;max-width:24ch; overflow-wrap:break-word; } .v3-hero-sub{font-size:clamp(17px,1.45vw,21px);color:var(--steel);max-width:58ch;margin:0 auto;line-height:1.5} /* business-email capture — the previous banner's primary action */ .v3-trial{ display:flex;align-items:center;gap:8px; margin:32px auto 0;max-width:620px; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-ctl); padding:8px 8px 8px 4px; box-shadow:0 1px 0 rgba(14,16,11,.04),0 14px 34px -22px rgba(14,16,11,.45); transition:border-color .15s ease,box-shadow .15s ease; } .v3-trial:focus-within{ border-color:var(--ink); box-shadow:0 1px 0 rgba(14,16,11,.04),0 16px 38px -20px rgba(14,16,11,.5); } .v3-trial input[type=email]{ flex:1 1 auto;min-width:0;height:auto; font-family:var(--body);font-size:17px;color:var(--ink); background:transparent;border:0;border-radius:0; padding:14px 16px;box-shadow:none;outline:none; } .v3-trial input[type=email]::placeholder{color:var(--steel-2)} .v3-trial button{ flex:none;display:inline-flex;align-items:center;gap:9px; font-family:var(--body);font-weight:700;font-size:16px;line-height:1.1; background:var(--ink);color:var(--lime);border:0;border-radius:var(--radius-btn); padding:0 26px;height:52px;cursor:pointer; transition:background .15s ease,color .15s ease; } .v3-trial button:hover{background:var(--olive);color:#fff} .v3-trial-note{margin:14px auto 0;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-2)} .v3-trial-err{max-width:620px;margin:14px auto 0;background:#fdecea;border:1px solid #f0b6ae;color:#8a2313;border-radius:var(--radius-input);padding:10px 14px;font-size:15px} /* "We solve:" rotator */ .v3-solve{ display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px 14px; margin:clamp(30px,4vw,48px) auto 0; } .v3-solve .lbl{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)} .v3-solve .word{ font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(26px,3.2vw,44px);line-height:1;color:var(--ink); background:var(--lime);padding:.06em .16em .1em;border-radius:2px; min-height:1em;min-width:2ch; } .v3-solve .word::after{content:"";display:inline-block;width:.06em;height:.82em;background:var(--olive);margin-left:.08em;vertical-align:-.06em;animation:v3caret 1s step-end infinite} @keyframes v3caret{50%{opacity:0}} /* credentials rail */ .v3-hero-rail{ position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:14px 40px;padding-block:18px 22px;border-top:1px solid var(--rule); } .v3-hero-proof{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;font-family:var(--mono);font-size:13px;color:var(--steel)} .v3-hero-proof b{color:var(--ink);font-weight:600} .v3-certs{display:flex;flex-wrap:wrap;gap:8px;margin:0} .v3-certs span{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--olive);border:1px solid rgba(86,96,0,.35);border-radius:2px;padding:3px 8px} @media (max-width:600px){ .v3-trial{flex-wrap:wrap;gap:8px;padding:8px} .v3-trial input[type=email]{flex:1 1 100%;padding:12px 12px;text-align:center} .v3-trial button{flex:1 1 100%;justify-content:center} .v3-hero-rail{justify-content:flex-start} } @media (prefers-reduced-motion:reduce){ .v3-solve .word::after{animation:none} } /* production board */ .v3-board{background:var(--ink-2);border:1px solid var(--rule-dark);border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.55);font-family:var(--mono);font-size:12.5px;color:#cfd6c2;overflow:hidden} .v3-board-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule-dark);background:var(--ink-3)} .v3-board-title{color:#f2f4ea;font-weight:500} .v3-live{display:inline-flex;align-items:center;gap:7px;color:var(--lime);font-size:11px;letter-spacing:.1em;text-transform:uppercase} .v3-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);animation:v3pulse 1.8s ease-in-out infinite} @keyframes v3pulse{0%,100%{opacity:1}50%{opacity:.25}} .v3-wo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;padding:13px 16px;border-bottom:1px dashed var(--rule-dark);align-items:center} .v3-wo-id{color:var(--steel-2);font-size:11.5px} .v3-wo-name{color:#f2f4ea;font-family:var(--body);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .v3-wo-stage{grid-column:2;color:var(--steel-2);font-size:11.5px} .v3-wo-qty{grid-row:1/span 2;grid-column:3;text-align:right;font-variant-numeric:tabular-nums;color:#f2f4ea} .v3-wo-qty small{display:block;color:var(--steel-2);font-size:11px} .v3-bar{grid-column:1/-1;height:5px;background:#2a2f22;border-radius:3px;overflow:hidden;margin-top:6px} .v3-bar i{display:block;height:100%;background:var(--lime);border-radius:3px} .v3-bar i.late{background:var(--warn)} .v3-tag{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:2px;margin-left:6px;vertical-align:1px} .v3-tag.ok{color:var(--ok);border:1px solid rgba(67,193,115,.5)} .v3-tag.late{color:var(--warn);border:1px solid rgba(255,107,44,.5)} .v3-tag.jw{color:#9ec5ff;border:1px solid rgba(158,197,255,.45)} .v3-inv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-dark)} .v3-inv div{background:var(--ink-2);padding:11px 16px} .v3-inv dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-2)} .v3-inv dd{color:#f2f4ea;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .v3-alert{display:flex;gap:10px;align-items:flex-start;padding:11px 16px;background:rgba(255,107,44,.08);color:#ffc3a8;font-size:12px} .v3-alert b{color:var(--warn);font-weight:500} .v3-board-note{padding:8px 16px;font-size:10.5px;color:#6f7864;border-top:1px solid var(--rule-dark);text-align:right} /* logos */ .v3-logos{background:var(--card);border-bottom:1px solid var(--rule)} .v3-logos-row{display:flex;align-items:center;gap:clamp(20px,4vw,56px);padding-block:26px;flex-wrap:wrap;justify-content:space-between} .v3-logos-row p{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);max-width:14ch;line-height:1.4} .v3-logos-row ul{flex:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:18px 28px;align-items:center} .v3-logos-row li{display:flex;justify-content:center} .v3-logos-row img{height:auto;max-height:34px;width:auto;max-width:100%;filter:grayscale(1) contrast(1.1);opacity:.75;transition:filter .2s,opacity .2s} @media (max-width:1020px){.v3-logos-row ul{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:600px){.v3-logos-row ul{grid-template-columns:repeat(2,minmax(0,1fr))}} .v3-logos-row img:hover{filter:none;opacity:1} /* sections */ .v3-sec{padding-block:clamp(56px,7vw,96px)} .v3-sec-head{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:20px clamp(32px,4vw,56px);align-items:start; margin-bottom:clamp(32px,4vw,48px); } .v3-sec-head .v3-eyebrow{grid-column:1/-1;display:flex;align-items:center;gap:10px} .v3-sec-head .v3-eyebrow::before{content:"";width:26px;height:2px;background:var(--lime);flex:none} /* a rule ties the lead to the heading instead of leaving it adrift */ .v3-sec-head .v3-lead{ border-top:2px solid var(--ink);padding-top:16px;margin-top:8px; font-size:clamp(16px,1.25vw,17.5px);line-height:1.6;max-width:44ch; } @media (max-width:860px){ .v3-sec-head{grid-template-columns:1fr} .v3-sec-head .v3-lead{margin-top:0} } /* industries — a bordered grid rather than a loose row of pills, so the block has aligned edges and matches the card grids used elsewhere on the site. 1px gaps over a rule-coloured ground draw the dividers. */ .v3-inds{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:10px;overflow:hidden; margin:0;padding:0;list-style:none; } .v3-inds li{margin:0} .v3-inds a{ display:flex;align-items:center;justify-content:space-between;gap:12px; height:100%;padding:20px 22px;background:var(--card);color:var(--ink); font-family:var(--body);font-weight:600;font-size:16px;line-height:1.3; border-radius:0;text-decoration:none; transition:background .16s ease,color .16s ease; } .v3-inds a:hover,.v3-inds a:focus-visible{ background:var(--ink);color:#f2f4ea;text-decoration:none; } /* Only the arrow fades in on hover. Scoped with :not(.n) because the name is also a — matching both is what blanked the grid. */ .v3-inds a .n{min-width:0;overflow-wrap:break-word} .v3-inds a span:not(.n){ font-family:var(--mono);font-size:15px;color:var(--olive);flex:none; opacity:0;transform:translateX(-6px); transition:opacity .16s ease,transform .16s ease; } .v3-inds a:hover span:not(.n),.v3-inds a:focus-visible span:not(.n){ opacity:1;transform:translateX(0);color:var(--lime); } /* last cell links on to the full index */ .v3-inds li.all a{background:var(--paper);color:var(--olive);font-family:var(--mono); font-size:13px;letter-spacing:.06em;text-transform:uppercase} .v3-inds li.all a:hover{background:var(--lime);color:var(--ink)} .v3-inds li.all a span:not(.n){opacity:1;transform:none;color:inherit} .v3-inds li.all{grid-column:span 2} @media (max-width:1020px){.v3-inds{grid-template-columns:repeat(3,minmax(0,1fr))}.v3-inds li.all{grid-column:span 1}} @media (max-width:760px){.v3-inds{grid-template-columns:repeat(2,minmax(0,1fr))}.v3-inds a{padding:16px 16px;font-size:15px}.v3-inds li.all{grid-column:span 2}} @media (max-width:420px){.v3-inds{grid-template-columns:1fr}.v3-inds li.all{grid-column:span 1}} /* flow */ .v3-flow-sec{background:var(--ink);color:#eef1e6} .v3-flow-sec .v3-lead{color:#aab39d} .v3-flow-sec .v3-eyebrow{color:var(--steel-2)} .v3-flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px solid var(--lime);counter-reset:step} .v3-flow li{padding:22px 18px 8px 0;position:relative;counter-increment:step} .v3-flow li::before{content:"0" counter(step);font-family:var(--mono);color:var(--lime);font-size:13px;display:block;margin-bottom:14px} .v3-flow li::after{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--ink);border:2px solid var(--lime);border-radius:50%} .v3-flow h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1;color:#fff;margin-bottom:10px} .v3-flow p{font-size:14.5px;color:#aab39d;line-height:1.55} .v3-flow code{font-family:var(--mono);font-size:12px;color:var(--lime);background:rgba(229,245,56,.08);padding:1px 5px;border-radius:2px} /* results */ .v3-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--rule);background:var(--card)} .v3-res{padding:28px 24px 26px;border-right:1px solid var(--rule);display:grid;grid-template-rows:auto auto 1fr auto;gap:10px} .v3-res:last-child{border-right:0} .v3-res .num{font-family:var(--display);font-weight:800;font-size:clamp(56px,6vw,80px);line-height:.85;color:var(--ink);font-variant-numeric:tabular-nums} .v3-res .what{font-weight:600;font-size:16px;line-height:1.35} .v3-res .ctx{font-size:14px;color:var(--steel)} .v3-res .who{font-family:var(--mono);font-size:12px;color:var(--steel);border-top:1px solid var(--rule);padding-top:12px} .v3-res .who b{color:var(--ink);font-weight:500} .v3-link{display:inline-flex;gap:8px;margin-top:22px;font-weight:700;border-bottom:2px solid var(--lime);padding-bottom:2px} .v3-link:hover{text-decoration:none;border-bottom-color:var(--ink)} /* product tabs */ .v3-product{background:var(--card);border-block:1px solid var(--rule)} .v3-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px} .v3-tab{font-family:var(--body);font-weight:600;font-size:15px;padding:10px 18px;border-radius:40px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer} .v3-tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)} .v3-shot{border:1px solid var(--rule);border-radius:8px;overflow:hidden;box-shadow:0 24px 60px rgba(14,16,11,.12);background:var(--paper)} .v3-shot img{width:100%;aspect-ratio:1600/999;object-fit:cover;object-position:top left} .v3-shot-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--steel);background:var(--card)} .v3-shot-cap b{color:var(--ink)} /* ---------- modules ---------- * Four labelled groups, five modules each. The previous version was one flat * 20-cell grid with nothing but names in it - no hierarchy and nothing to read. * Each module now carries a one-line descriptor condensed from its real * feature list, and the icon colour is the group's, so the four families are * legible at a glance without twenty competing colours. */ .v3-mods-sec{background:var(--card);border-block:1px solid var(--rule)} .v3-mods{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:12px;overflow:hidden; } .v3-modgrp{background:var(--paper);padding:26px 24px 28px} .v3-modgrp .hd{ display:flex;align-items:center;gap:8px; font-family:var(--mono);font-size:11.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--steel); margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--rule); } .v3-modgrp .hd .dot{width:8px;height:8px;border-radius:50%;flex:none} .v3-modgrp ul{list-style:none;margin:0;padding:0;display:grid;gap:22px} .v3-modgrp li{display:flex;align-items:flex-start;gap:13px} .v3-modgrp .ico{ flex:none;width:30px;height:30px;border-radius:8px; display:grid;place-items:center;color:#fff;margin-top:1px; } .v3-modgrp .ico svg{width:16px;height:16px} .v3-modgrp .t{display:block;min-width:0} .v3-modgrp b{ display:block;font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:15px;line-height:1.08;color:var(--ink);letter-spacing:-.01em; } .v3-modgrp i{ display:block;font-style:normal;font-size:12.5px;line-height:1.35; color:var(--steel);margin-top:4px; } @media (max-width:1100px){ .v3-mods{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .v3-mods{grid-template-columns:1fr} .v3-modgrp{padding:18px 16px 10px} } /* ---------- mobile apps ---------- * Copy on the left; on the right the phone artwork with three floating app * cards down each side. * * Alignment rules that keep it from reading as clutter - the earlier version * broke all three: * - nothing is rotated, so every card edge stays parallel to every other * - the two sides share the SAME three rows rather than being interleaved, * so left and right line up as pairs * - all six cards are one width and one height, with equal left/right * margins and an equal 6px overlap onto the artwork * The card block is also vertically centred on the artwork, so the two * elements start and finish together. * * The stage is a fixed 640x430 coordinate space: positions are % and sizes are * cqw, so the whole thing scales as one piece. */ .v3-apps{background:var(--card);border-block:1px solid var(--rule);color:var(--ink)} .v3-apps-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:clamp(24px,2.6vw,40px);align-items:center; } .v3-apps-copy{text-align:left} /* the section head is not used here, so the eyebrow carries its own lime dash */ .v3-apps-copy .v3-eyebrow{ display:flex;align-items:center;gap:10px;color:var(--steel);margin:0 0 14px; } .v3-apps-copy .v3-eyebrow::before{content:"";width:26px;height:2px;background:var(--lime);flex:none} .v3-apps-copy .v3-h2{margin:0 0 18px} .v3-apps-copy .v3-lead{max-width:48ch;margin:0} .v3-apps .v3-link{margin-top:26px} /* ---- the stage ---- */ .v3-apps-stage{ position:relative;width:100%;max-width:760px;aspect-ratio:640/445; margin-inline:auto;container-type:inline-size; } .v3-apps-glow{ position:absolute;inset:4% 12%;border-radius:50%; background:radial-gradient(ellipse at 50% 50%,rgba(229,245,56,.22),rgba(229,245,56,0) 62%); filter:blur(8px); } .v3-apps-phones{ position:absolute;left:22%;top:6.1%;width:56%;height:auto;z-index:1; filter:drop-shadow(0 16px 32px rgba(14,16,11,.18)); animation:v3-float 9.4s ease-in-out infinite;animation-delay:-2.1s;--amp:6px; } /* ---- the six apps ---- */ .v3-appchips{position:absolute;inset:0;list-style:none;margin:0;padding:0} .v3-appchip{ position:absolute;width:20cqw;height:12.6cqw; display:flex;align-items:center;gap:1.1cqw; padding:0 1.4cqw; background:#fff;border:1px solid var(--rule);border-radius:2cqw; box-shadow:0 1.9cqw 3.4cqw rgba(14,16,11,.14);z-index:5; animation:v3-float var(--dur) ease-in-out infinite; animation-delay:var(--delay); } .v3-appchip .ico{ flex:none;width:4.4cqw;height:4.4cqw;border-radius:1.2cqw; display:grid;place-items:center; } .v3-appchip .ico svg{width:2.5cqw;height:2.5cqw} .v3-appchip .t{display:block;min-width:0} .v3-appchip b{ display:block;font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:1.78cqw;line-height:1.08;color:var(--ink);letter-spacing:-.02em; } .v3-appchip i{ display:block;font-style:normal;font-family:var(--mono); font-size:1.55cqw;line-height:1.3;color:var(--steel);margin-top:.4cqw; } /* three shared rows; 1-3 sit left, 4-6 sit right on the same rows */ .v3-appchip:nth-child(1),.v3-appchip:nth-child(4){top:11.4%} .v3-appchip:nth-child(2),.v3-appchip:nth-child(5){top:40.9%} .v3-appchip:nth-child(3),.v3-appchip:nth-child(6){top:70.5%} .v3-appchip:nth-child(-n+3){left:0} .v3-appchip:nth-child(n+4){left:80%} /* only the timing varies, never the position - the drift stays small enough that the three rows still read as rows */ .v3-appchip:nth-child(1){--dur:6.4s;--delay:-0.4s;--amp:9px} .v3-appchip:nth-child(2){--dur:7.6s;--delay:-2.9s;--amp:7px} .v3-appchip:nth-child(3){--dur:5.8s;--delay:-1.7s;--amp:10px} .v3-appchip:nth-child(4){--dur:8.2s;--delay:-4.3s;--amp:8px} .v3-appchip:nth-child(5){--dur:6.9s;--delay:-0.9s;--amp:10px} .v3-appchip:nth-child(6){--dur:7.9s;--delay:-3.5s;--amp:7px} @keyframes v3-float{ 0%,100%{transform:translate3d(0,0,0)} 50% {transform:translate3d(0,calc(var(--amp) * -1),0)} } @media (max-width:1200px){ /* the stage takes 63% of the row, so below this the copy column gets too narrow to carry the heading - stack rather than squeeze it */ .v3-apps-grid{grid-template-columns:1fr} .v3-apps-copy .v3-lead{max-width:62ch} .v3-apps-stage{max-width:640px;margin-inline:auto} } @media (max-width:620px){ /* Below this the cards scale to unreadable type, and they carry the app names, so they unstack into an ordinary list under the artwork. */ .v3-apps-stage{position:static;aspect-ratio:auto;max-width:420px;container-type:normal} .v3-apps-glow{display:none} .v3-apps-phones{position:static;width:84%;margin:0 auto 22px;display:block;animation:none} .v3-appchips{ position:static;display:grid;gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:12px;overflow:hidden; } .v3-appchip{ position:static;width:auto;height:auto;border:0;border-radius:0; box-shadow:none;animation:none;gap:13px;padding:13px 15px; } .v3-appchip .ico{width:34px;height:34px;border-radius:9px} .v3-appchip .ico svg{width:18px;height:18px} .v3-appchip b{font-size:15px} .v3-appchip i{font-size:11.5px;margin-top:3px} } /* pricing + founder */ /* quote (dark) left, video (light) right: the demo form in the next section is also dark and right-hand, so keeping both on the right stacked them into a dark stripe down that edge of the page */ .v3-duo{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(20px,2.4vw,32px);align-items:stretch} .v3-price{background:var(--lime);color:var(--ink);padding:clamp(28px,4vw,48px);border-radius:6px;display:grid;gap:14px;align-content:start} .v3-price .v3-eyebrow{color:#3d4400} .v3-price .amt{font-family:var(--display);font-weight:800;font-size:clamp(64px,8vw,112px);line-height:.85} .v3-price .amt small{font-family:var(--body);font-weight:600;font-size:18px;letter-spacing:0} .v3-price ul{display:grid;gap:6px;font-size:15.5px;margin:6px 0 10px} .v3-price li::before{content:"✓ ";font-weight:700} .v3-founder{background:var(--ink);color:#e8ecdf;padding:clamp(28px,4vw,48px);border-radius:6px;display:grid;gap:22px;align-content:space-between} .v3-founder blockquote{margin:0;padding:0;border:0;font-family:var(--display);font-weight:700;text-transform:capitalize;font-size:clamp(28px,3vw,40px);line-height:1.02;color:#fff} .v3-founder blockquote::before{content:"“";color:var(--lime);display:block;font-size:1.6em;line-height:.6;margin-bottom:6px} .v3-founder figcaption{display:flex;align-items:center;gap:14px} .v3-founder figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--lime)} .v3-founder figcaption b{display:block;color:#fff;font-size:16px} .v3-founder figcaption span{font-size:14px;color:#aab39d} .v3-founder p{font-size:15px;color:#aab39d;max-width:52ch} /* faq + form */ .v3-end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(28px,4.5vw,60px);align-items:start} .v3-faq details{border-bottom:1px solid var(--rule)} .v3-faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:700;font-size:17.5px;position:relative} .v3-faq summary::-webkit-details-marker{display:none} .v3-faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--mono);font-size:24px;color:var(--olive)} .v3-faq details[open] summary::after{content:"–"} .v3-faq details p{padding:0 0 20px;color:var(--steel);max-width:62ch} .v3-form{background:var(--ink);color:#eef1e6;padding:clamp(20px,2.2vw,28px);border-radius:8px;display:grid;gap:11px;position:sticky;top:20px} .v3-form h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:25px;line-height:1;color:#fff;margin:0} .v3-form p{color:#aab39d;font-size:13.5px;line-height:1.5;margin:0} .v3-form label{display:grid;gap:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--steel-2)} .v3-form input[type=text],.v3-form input[type=tel],.v3-form input[type=email]{width:100%;font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;color:#fff;background:var(--ink-3);border:1px solid #3a4130;border-radius:var(--radius-input);padding:9px 14px;height:auto;box-shadow:none} .v3-form input:focus{border-color:var(--lime);outline:none} .v3-form .v3-btn{justify-content:center;width:100%;margin-top:4px;font-size:15.5px;padding-block:12px} .v3-form small{font-size:12px;color:#7f8873;text-align:center} .v3-form .alt{display:flex;gap:9px} .v3-form .alt a{flex:1;text-align:center;padding:9px;border:1px solid #3a4130;border-radius:var(--radius-btn);font-weight:600;font-size:13.5px;color:#fff} .v3-form .alt a:hover{border-color:var(--lime);text-decoration:none} @media (max-width:1020px){ .v3-hero-grid,.v3-sec-head,.v3-duo,.v3-end{grid-template-columns:1fr} .v3-flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px} .v3-results{grid-template-columns:repeat(2,minmax(0,1fr))} .v3-res:nth-child(2){border-right:0} .v3-res:nth-child(-n+2){border-bottom:1px solid var(--rule)} .v3-form{position:static} } @media (max-width:600px){ .v3{font-size:16px} .v3-flow{grid-template-columns:1fr 1fr} .v3-results{grid-template-columns:1fr} .v3-res{border-right:0;border-bottom:1px solid var(--rule)} .v3-res:last-child{border-bottom:0} .v3-inv{grid-template-columns:1fr 1fr} .v3-inv div:last-child{grid-column:1/-1} .v3-wo-name{white-space:normal} .v3-logos-row p{max-width:none} .v3-hero-cta .v3-btn{flex:1 1 100%;justify-content:center} } @media (prefers-reduced-motion:reduce){ .v3 *{animation:none!important;transition:none!important} } /* ============================================================================ * INNER PAGES (About, Features, Pricing, Contact) * Added when the v3 system was extended beyond the homepage. Same tokens, * same 1020px / 600px breakpoints as the sections above. * ========================================================================== */ /* compact page header — the inner-page counterpart of .v3-hero */ .v3-pagehead{background:var(--ink);color:#f2f4ea;position:relative;overflow:hidden;padding-block:clamp(44px,6vw,80px)} .v3-pagehead::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(229,245,56,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(229,245,56,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 25%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 25%,transparent 78%);pointer-events:none} .v3-pagehead .v3-wrap{position:relative} .v3-pagehead .v3-eyebrow{color:var(--steel-2);display:flex;align-items:center;gap:10px} .v3-pagehead .v3-eyebrow::before{content:"";width:28px;height:2px;background:var(--lime)} .v3-pagehead h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(42px,6vw,82px);line-height:.9;margin:16px 0 18px;color:#f7f9ef;text-wrap:balance;max-width:20ch} .v3-pagehead h1 mark{background:var(--lime);color:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone} .v3-pagehead p{font-size:clamp(16.5px,1.5vw,19px);color:#bfc6b3;max-width:58ch} .v3-pagehead .v3-hero-cta{margin-top:26px} /* stat strip */ .v3-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--rule);background:var(--card)} .v3-stats div{padding:26px 22px;border-right:1px solid var(--rule)} .v3-stats div:last-child{border-right:0} .v3-stats b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(40px,4.4vw,60px);line-height:.85;font-variant-numeric:tabular-nums} .v3-stats span{display:block;margin-top:8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)} /* generic card grid */ .v3-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)} .v3-card{background:var(--card);padding:28px 26px;display:grid;gap:10px;align-content:start} .v3-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:25px;line-height:1.02} .v3-card p{font-size:15px;color:var(--steel);line-height:1.55} .v3-card .n{font-family:var(--mono);font-size:12.5px;color:var(--olive)} /* timeline */ .v3-time{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--lime);counter-reset:yr} .v3-time li{position:relative;padding:24px 22px 4px 0} .v3-time li::after{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--paper);border:2px solid var(--lime);border-radius:50%} .v3-time b{display:block;font-family:var(--display);font-weight:800;font-size:34px;line-height:1;margin-bottom:10px} .v3-time p{font-size:14.5px;color:var(--steel);line-height:1.55} /* pricing plans */ .v3-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start} .v3-plan{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:clamp(24px,2.6vw,34px);display:grid;gap:14px;align-content:start;position:relative} .v3-plan h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:30px;line-height:1} .v3-plan .seats{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)} .v3-plan .amt{font-family:var(--display);font-weight:800;font-size:clamp(48px,5vw,68px);line-height:.85;font-variant-numeric:tabular-nums} .v3-plan .amt small{font-family:var(--body);font-weight:600;font-size:16px;color:var(--steel)} .v3-plan ul{display:grid;gap:7px;font-size:15px;margin:2px 0 6px} .v3-plan li::before{content:"✓ ";font-weight:700;color:var(--olive)} .v3-plan .v3-btn{justify-content:center} .v3-plan.is-featured{background:var(--lime);border-color:var(--lime)} .v3-plan.is-featured .seats,.v3-plan.is-featured .amt small{color:#3d4400} .v3-plan.is-featured li::before{color:var(--ink)} .v3-plan .flag{position:absolute;top:-11px;left:clamp(24px,2.6vw,34px);background:var(--ink);color:var(--lime);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:40px} /* contact */ .v3-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,80px);align-items:start} .v3-info{display:grid;gap:26px} .v3-info dl{display:grid;gap:6px;padding-bottom:22px;border-bottom:1px solid var(--rule)} .v3-info dl:last-child{border-bottom:0;padding-bottom:0} .v3-info dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)} .v3-info dd{margin:0;font-size:17px;font-weight:600;line-height:1.45} .v3-info dd a:hover{border-bottom:2px solid var(--lime)} /* shared closing CTA band */ .v3-cta{background:var(--lime);color:var(--ink);padding-block:clamp(48px,6vw,80px)} .v3-cta .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:center} .v3-cta h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.6vw,60px);line-height:.95;text-wrap:balance} .v3-cta p{margin-top:12px;font-size:17px;max-width:54ch;color:#3d4400} .v3-cta .v3-hero-cta{margin-top:0} @media (max-width:1020px){ .v3-stats{grid-template-columns:repeat(3,minmax(0,1fr))} .v3-stats div:nth-child(3n){border-right:0} .v3-stats div:nth-child(-n+3){border-bottom:1px solid var(--rule)} .v3-time{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px} .v3-plans{grid-template-columns:1fr;max-width:560px} .v3-contact{grid-template-columns:1fr} .v3-cta .inner{grid-template-columns:1fr} } @media (max-width:600px){ .v3-stats{grid-template-columns:1fr 1fr} .v3-stats div:nth-child(odd){border-right:1px solid var(--rule)} .v3-stats div:nth-child(even){border-right:0} /* odd number of stats: let the last one span the row instead of leaving a gap */ .v3-stats div:last-child:nth-child(odd){grid-column:1/-1;border-right:0} .v3-time{grid-template-columns:1fr} .v3-cta .v3-btn{flex:1 1 100%;justify-content:center} } /* ---------- scroll reveal ---------- * Guarded behind .v3-anim, which the page script adds only when there is JS * and the visitor has not asked for reduced motion. Without it nothing is * hidden, so the page is fully readable if the script never runs. */ .v3-anim .v3-reveal{ opacity:0;transform:translateY(16px); transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1); transition-delay:calc(var(--i,0) * 70ms); will-change:opacity,transform; } .v3-anim .v3-reveal.is-in{opacity:1;transform:none;will-change:auto} @media (prefers-reduced-motion:reduce){ /* no drifting cards, no reveal offset - everything simply sits still */ .v3-appchip,.v3-apps-phones{animation:none!important} .v3-anim .v3-reveal{opacity:1!important;transform:none!important;transition:none!important} } /* ---------- experts CTA ---------- * Closing call to action. A full-bleed lime band with a scalloped edge was * too loud and made the stock photo look cheap; this is a contained card on * the page's own paper ground, matching the card language used by the * modules grid, the apps panel and the founder quote. The only lime is a * 4px rule across the top. */ .v3-experts-card{ position:relative;overflow:hidden; background:var(--card);border:1px solid var(--rule);border-radius:14px; box-shadow:0 18px 44px rgba(14,16,11,.06); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(20px,3vw,44px);align-items:end; padding:clamp(30px,4vw,54px) clamp(24px,3.4vw,54px) 0; } .v3-experts-card::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--lime); } .v3-experts-copy{padding-bottom:clamp(30px,4vw,54px)} .v3-experts .v3-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px} .v3-experts .v3-eyebrow::before{content:"";width:26px;height:2px;background:var(--lime);flex:none} .v3-experts h2{ font-family:var(--display);font-weight:800;text-transform:capitalize; font-size:clamp(27px,3.2vw,42px);line-height:1.04;letter-spacing:-.008em; color:var(--ink);margin:0 0 14px;text-wrap:balance;max-width:19ch; } .v3-experts-sub{color:var(--steel);font-size:16px;line-height:1.55;max-width:46ch;margin:0 0 clamp(22px,2.8vw,30px)} .v3-experts-cta{display:flex;gap:12px;flex-wrap:wrap} .v3-btn-outline{border:2px solid var(--ink);color:var(--ink)!important;background:transparent} .v3-btn-outline:hover{background:var(--ink);color:#fff!important} /* the cutout stands on the card's bottom edge */ .v3-experts-img{display:block;width:100%;max-width:420px;height:auto;margin:0 0 0 auto;align-self:end} @media (max-width:860px){ .v3-experts-card{grid-template-columns:1fr;gap:0;padding-bottom:0} .v3-experts-copy{padding-bottom:clamp(24px,3vw,34px)} .v3-experts-img{max-width:320px;margin-inline:auto} } @media (max-width:520px){ .v3-experts-cta .v3-btn{flex:1 1 100%;justify-content:center} } /* ---------- watch in action ---------- * Sits beside the founder quote. Deliberately not the old treatment (centred * heading over a full-bleed screenshot with a black play disc in the middle): * the copy is left-aligned above the frame and the play control is a lime * pill anchored to the frame's lower-left, so it reads as part of the page * rather than as a stock video thumbnail. */ .v3-watch{ background:var(--card);border:1px solid var(--rule);border-radius:12px; padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column; } .v3-watch .v3-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 12px} .v3-watch .v3-eyebrow::before{content:"";width:26px;height:2px;background:var(--lime);flex:none} .v3-watch-h{ font-family:var(--display);font-weight:800;text-transform:capitalize; font-size:clamp(24px,2.5vw,32px);line-height:1.05;letter-spacing:-.01em; color:var(--ink);margin:0 0 10px; } .v3-watch-sub{color:var(--steel);font-size:15px;line-height:1.5;margin:0 0 20px;max-width:46ch} /* the poster is a