/* ============================================================= S-PRO Forecasting & Optimisation Agent — styles.css Companion to: index.html Fonts loaded via Google Fonts in (Archivo + Inter) ============================================================= */ /* ── Reset & Custom Properties ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } :root { --white: #F9F9FA; --black: #17171C; --dg: #5E6172; --dgm: #747684; --gray: #D1D2D6; --lgray: #F9F9FA; --p50: #FFF0F2; --p100: #FFE2E8; --p200: #FFCAD6; --p300: #FF9FB4; --p400: #FF698D; --p500: #FF1E5A; --p600: #ED1156; --p700: #C80849; --p800: #A80944; --hh: 68px; --inner: 24px; } /* ── Base ── */ body { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.4; color: var(--dg); background: var(--white); min-height: 100%; } img { max-width: 100%; height: auto; display: block; } a { color: var(--black); text-decoration: underline; } a:hover { text-decoration: none; } strong { font-weight: 500; color: var(--black); } ul { list-style: none; } /* ── Section label (pink dot + text) ── */ .ts { font-size: 13px; line-height: 1.2; color: var(--dg); display: flex; align-items: center; gap: 8px; } .ts::before { content: ''; width: 8px; height: 8px; background: var(--p500); border-radius: 50%; flex-shrink: 0; display: inline-block; } /* ── Layout ── */ .inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--inner); } /* ── Divider ── */ .divider { height: 1px; background: var(--gray); } /* ── Section wrappers ── */ .sec { padding: 88px 0; } .sec-light { background: #fff; } .sec-gray { background: #F2F2F4; } .sec-dark { background: var(--black); } /* ── Section header ── */ .sec-h { margin-bottom: 56px; } .sec-ol { margin-bottom: 14px; } .sec-title { font-family: 'Archivo', sans-serif; font-size: 42px; font-weight: 500; letter-spacing: -.03em; color: var(--black); margin-top: 12px; line-height: 110%; } .sec-title-wht { color: #fff; } .sec-subtitle { font-size: 15px; line-height: 165%; color: var(--dg); max-width: 620px; margin-top: 12px; } .sec-subtitle-wht { color: var(--gray); } /* ── Button ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; line-height: 1; color: #fff; background: var(--p500); border: none; border-radius: 2px; padding: 14px 26px; cursor: pointer; text-decoration: none; transition: background .2s, transform .15s; letter-spacing: -.01em; white-space: nowrap; } .btn:hover { background: var(--p700); text-decoration: none; color: #fff; } .btn:active { transform: translateY(1px); } .btn-outline { background: transparent; color: var(--black); border: 1.5px solid var(--black); } .btn-outline:hover { background: var(--black); color: #fff; } /* ── HEADER ── */ .hdr { position: sticky; top: 0; left: 0; right: 0; z-index: 999; background: rgba(249, 249, 250, .96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray); transition: box-shadow .3s; } .hdr.scrolled { box-shadow: 0 2px 24px rgba(23, 23, 28, .08); } .hdr-in { display: flex; align-items: center; justify-content: space-between; height: var(--hh); } .logo { font-family: 'Archivo', sans-serif; font-size: 22px; font-weight: 600; color: var(--black); text-decoration: none; letter-spacing: -.03em; } .logo em { color: var(--p500); font-style: normal; } .nav { display: flex; align-items: center; gap: 28px; } .nav a { font-size: 13px; color: var(--dg); text-decoration: none; transition: color .2s; } .nav a:hover { color: var(--p500); } .hdr-cta .btn { padding: 10px 18px; font-size: 13px; } /* ── HERO ── */ .hero { padding: 100px 0 80px; background: #F9F9F9; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .hero-ol { margin-bottom: 22px; } .hero-h1 { font-family: 'Archivo', sans-serif; font-size: 58px; font-weight: 500; line-height: 106%; letter-spacing: -.03em; color: var(--black); margin-bottom: 16px; } .hero-sub { font-size: 16px; font-weight: 500; color: var(--p500); margin-bottom: 22px; letter-spacing: -.01em; } .hero-desc { font-size: 16px; line-height: 160%; color: var(--dg); margin-bottom: 36px; } .hero-acts { display: flex; gap: 14px; flex-wrap: wrap; } /* Hero — right-column image */ .hero-img-wrap { width: 100%; border: 1px solid var(--gray); border-radius: 6px; overflow: hidden; box-shadow: 0 20px 60px rgba(23, 23, 28, .12); background: #fff; } .hero-img-wrap img { width: 100%; height: auto; display: block; } /* Hero dashboard mockup (shown until real screenshot is placed) */ .dash-wrap { border: 1px solid var(--gray); border-radius: 6px; overflow: hidden; box-shadow: 0 20px 60px rgba(23,23,28,.12); background: #fff; } .dash-bar { height: 30px; background: #ECEDF2; border-bottom: 1px solid var(--gray); display: flex; align-items: center; gap: 6px; padding: 0 14px; } .dash-dot { width: 9px; height: 9px; border-radius: 50%; } .dash-body { display: grid; grid-template-columns: 130px 1fr; height: 240px; } .dash-side { background: #F5F6FA; border-right: 1px solid var(--gray); padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; } .dash-ni { height: 20px; border-radius: 3px; background: var(--gray); opacity: .5; } .dash-ni:first-child { background: var(--p200); opacity: .9; } .dash-main { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .dash-lbl { font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 500; color: var(--black); } .dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .dash-stat { background: var(--lgray); border: 1px solid var(--gray); border-radius: 3px; padding: 8px 10px; } .dash-sv { font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 500; color: var(--p500); } .dash-sl { font-size: 8px; color: var(--dgm); margin-top: 2px; } .dash-chart { flex: 1; background: var(--lgray); border: 1px solid var(--gray); border-radius: 3px; padding: 8px; position: relative; overflow: hidden; } .dash-cl { font-size: 8px; color: var(--dgm); margin-bottom: 4px; } /* ── TWO-COLUMN LAYOUT ── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } /* ── APPROACH TEXT COLUMN ── */ .app-title { font-family: 'Archivo', sans-serif; font-size: 36px; font-weight: 500; letter-spacing: -.02em; color: var(--black); line-height: 112%; margin-bottom: 18px; margin-top: 12px; } .app-body { font-size: 14px; line-height: 168%; color: var(--dg); margin-bottom: 24px; } .app-list { display: flex; flex-direction: column; gap: 14px; } .app-item { display: flex; gap: 12px; align-items: flex-start; } .app-bullet { width: 18px; height: 18px; border-radius: 50%; background: var(--p100); border: 1.5px solid var(--p300); flex-shrink: 0; margin-top: 2px; position: relative; } .app-bullet::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--p500); } .app-text { font-size: 13px; line-height: 160%; color: var(--dg); } /* ── DATA SIGNAL CARDS ── */ .sig-cards { display: flex; flex-direction: column; gap: 14px; } .sig-card { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--gray); border-radius: 4px; padding: 20px 24px; transition: border-color .2s, box-shadow .2s; } .sig-card:hover { border-color: var(--p300); box-shadow: 0 4px 20px rgba(255,30,90,.06); } .sig-ico { width: 36px; height: 36px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; background: var(--p50); border: 1px solid var(--p200); border-radius: 4px; color: var(--p500); } .sig-t { font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 500; color: var(--black); margin-bottom: 10px; } .sig-tags { display: flex; flex-wrap: wrap; gap: 6px; } .sig-d { font-size: 12px; color: var(--gray); line-height: 1.55; } .sig-card-dark { background: var(--black); border-color: var(--black); } .sig-card-dark .sig-t { color: #fff; } .sig-card-dark:hover { border-color: var(--p500); } /* ── TAG / PILL ── */ .tag { display: inline-block; padding: 3px 8px; border-radius: 2px; font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; background: var(--p100); color: var(--p800); } .tag-gray { background: #EBEBED; color: var(--dg); } .tag-dark { background: rgba(255,255,255,.1); color: var(--gray); } /* ── HOW IT WORKS — 3 CARDS ── */ .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .how-card { border: 1px solid var(--gray); border-radius: 4px; overflow: hidden; transition: border-color .2s, box-shadow .2s; } .how-card:hover { border-color: var(--p300); box-shadow: 0 4px 24px rgba(255,30,90,.07); } .how-screen { height: 180px; background: #F2F3F6; border-bottom: 1px solid var(--gray); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .how-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform .4s ease; } .how-card:hover .how-screen img { transform: scale(1.03); } .how-body { padding: 24px 24px 28px; } .how-idx { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 500; color: var(--p500); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .08em; } .how-t { font-family: 'Archivo', sans-serif; font-size: 18px; font-weight: 500; color: var(--black); line-height: 130%; letter-spacing: -.01em; margin-bottom: 10px; } .how-d { font-size: 13px; line-height: 165%; color: var(--dg); } /* Mini screen mockup (inside how-cards, until real screenshots added) */ .mini { width: 82%; max-width: 210px; background: #fff; border: 1px solid var(--gray); border-radius: 4px; overflow: hidden; box-shadow: 0 4px 14px rgba(23,23,28,.08); } .mini-bar { height: 20px; background: #ECEDF2; border-bottom: 1px solid var(--gray); display: flex; align-items: center; gap: 4px; padding: 0 8px; } .mini-dot { width: 6px; height: 6px; border-radius: 50%; } .mini-body { padding: 10px; } .mrow { height: 7px; border-radius: 2px; background: var(--gray); margin-bottom: 5px; opacity: .55; } .mrow-p { background: var(--p200); opacity: .75; } /* ── USE CASES GRID ── */ .uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray); border: 1px solid var(--gray); border-radius: 4px; overflow: hidden; } .uc-tile { background: #fff; padding: 32px 28px; transition: background .2s; } .uc-tile:hover { background: var(--p50); } .uc-ico { width: 32px; height: 32px; margin-bottom: 16px; color: var(--p500); } .uc-t { font-family: 'Archivo', sans-serif; font-size: 16px; font-weight: 500; color: var(--black); margin-bottom: 8px; letter-spacing: -.01em; } .uc-d { font-size: 13px; line-height: 163%; color: var(--dg); } /* ── CASE STUDY ── */ .case-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; } .case-card { background: var(--black); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; transition: background .2s; } .case-card:hover { background: #1d1d24; } .case-lbl { font-size: 11px; font-weight: 500; color: var(--p500); text-transform: uppercase; letter-spacing: .08em; } .case-co { font-family: 'Archivo', sans-serif; font-size: 34px; font-weight: 500; color: #fff; letter-spacing: -.02em; line-height: 110%; } .case-desc { font-size: 13px; line-height: 165%; color: var(--gray); flex: 1; } .case-metric { display: flex; align-items: baseline; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); } .case-mval { font-family: 'Archivo', sans-serif; font-size: 48px; font-weight: 500; color: var(--p500); letter-spacing: -.03em; line-height: 100%; } .case-mlbl { font-size: 13px; color: var(--gray); line-height: 148%; max-width: 150px; } /* ── PRODUCT FEATURE ROWS ── */ .pf-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: center; padding: 72px 0; } .pf-wrap-r { grid-template-columns: 1fr 1.3fr; } .pf-wrap-r .pf-vis { order: 2; } .pf-wrap-r .pf-cnt { order: 1; } .pf-vis { border: 1px solid var(--gray); border-radius: 6px; overflow: hidden; box-shadow: 0 8px 32px rgba(23,23,28,.09); background: #F4F5F8; } .pf-vis img { width: 100%; height: auto; display: block; transition: transform .4s ease; } .pf-vis:hover img { transform: scale(1.02); } .pf-screen { width: 100%; position: relative; overflow: hidden; } .pf-idx { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 500; color: var(--p500); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; } .pf-title { font-family: 'Archivo', sans-serif; font-size: 26px; font-weight: 500; color: var(--black); letter-spacing: -.02em; line-height: 120%; margin-bottom: 16px; } .pf-desc { font-size: 14px; line-height: 168%; color: var(--dg); margin-bottom: 24px; } .pf-examples { border: 1px solid var(--gray); border-radius: 4px; overflow: hidden; } .pf-ex { display: flex; align-items: baseline; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--gray); } .pf-ex:last-child { border-bottom: none; } .pf-ex-lbl { font-size: 10px; font-weight: 500; color: var(--p500); text-transform: uppercase; letter-spacing: .06em; min-width: 64px; flex-shrink: 0; } .pf-ex-txt { font-size: 12px; color: var(--dg); } .pf-highlight { display: flex; align-items: center; gap: 20px; background: var(--black); border-radius: 4px; padding: 22px 28px; } .pf-hval { font-family: 'Archivo', sans-serif; font-size: 48px; font-weight: 500; color: var(--p500); letter-spacing: -.03em; line-height: 100%; flex-shrink: 0; } .pf-hlbl { font-size: 13px; line-height: 158%; color: var(--gray); } /* Setup wizard mockup (placeholder until real screenshot) */ .setup-box { background: #fff; border: 1px solid var(--gray); border-radius: 4px; padding: 16px; width: 88%; box-shadow: 0 6px 20px rgba(23,23,28,.09); } .setup-steps { display: flex; gap: 0; margin-bottom: 14px; align-items: center; } .ss { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--gray); display: flex; align-items: center; justify-content: center; font-size: 8px; color: var(--dgm); font-weight: 600; flex-shrink: 0; } .ss-done { background: var(--black); border-color: var(--black); color: #fff; } .ss-active { background: var(--p500); border-color: var(--p500); color: #fff; } .ss-line { flex: 1; height: 1px; background: var(--gray); } .s-title { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 500; color: var(--black); margin-bottom: 4px; } .s-sub { font-size: 8px; color: var(--dgm); margin-bottom: 10px; } .s-sec { font-size: 9px; font-weight: 500; color: var(--black); margin-bottom: 5px; display: flex; align-items: center; gap: 4px; } .s-field { height: 20px; border-radius: 2px; background: #F4F5F8; border: 1px solid var(--gray); margin-bottom: 6px; } .s-ftag { display: inline-block; background: var(--p50); border: 1px solid var(--p200); border-radius: 2px; font-size: 7px; color: var(--p800); padding: 2px 6px; margin: 2px 2px 2px 0; } .s-btn { display: inline-block; background: var(--black); color: #fff; border-radius: 2px; font-size: 9px; font-weight: 500; text-align: center; padding: 7px 14px; margin-top: 10px; float: right; text-decoration: none; } .s-btn:hover { background: var(--p500); } /* ── CTA SECTION ── */ .cta-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } .cta-title { font-family: 'Archivo', sans-serif; font-size: 46px; font-weight: 500; letter-spacing: -.03em; color: var(--black); line-height: 110%; margin-bottom: 8px; } .cta-sub { font-size: 16px; line-height: 162%; color: var(--dg); margin-bottom: 28px; } .cta-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .cta-li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 155%; color: var(--dg); } .cta-chk { width: 20px; height: 20px; border-radius: 50%; background: var(--p500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .cta-chk svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .cta-contact { border-top: 1px solid var(--gray); padding-top: 28px; margin-top: 4px; } .cta-contact-lbl { font-size: 11px; color: var(--dgm); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; } .cta-email { font-family: 'Archivo', sans-serif; font-size: 21px; font-weight: 500; color: var(--black); text-decoration: none; display: block; margin-bottom: 5px; } .cta-email:hover { color: var(--p500); } .cta-site { font-size: 13px; color: var(--dgm); text-decoration: none; } .cta-site:hover { color: var(--p500); } .cta-box { background: var(--black); border-radius: 4px; padding: 44px 40px; color: #fff; } .cta-box-ol { font-size: 11px; color: var(--p400); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; } .cta-box-h { font-family: 'Archivo', sans-serif; font-size: 24px; font-weight: 500; color: #fff; line-height: 132%; letter-spacing: -.02em; margin-bottom: 24px; } .cta-box-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; } .cta-box-item { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--gray); } .cta-box-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--p500); flex-shrink: 0; } /* ── FOOTER ── */ .ftr { background: var(--black); padding: 36px 0; border-top: 1px solid rgba(255,255,255,.07); } .ftr-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .ftr-copy { font-size: 12px; color: #545565; } .ftr-link { font-size: 12px; color: #545565; text-decoration: none; } .ftr-link:hover { color: var(--gray); } /* ── RESPONSIVE ── */ @media (max-width: 960px) { .hero-grid, .two-col, .cta-layout { grid-template-columns: 1fr; gap: 48px; } .how-grid { grid-template-columns: 1fr 1fr; } .uc-grid { grid-template-columns: 1fr 1fr; } .pf-wrap, .pf-wrap-r { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; } .pf-wrap-r .pf-vis, .pf-wrap-r .pf-cnt { order: unset; } .hero-h1 { font-size: 42px; } .pf-highlight { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 640px) { .how-grid, .uc-grid { grid-template-columns: 1fr; } .nav { display: none; } .hero-h1 { font-size: 32px; } .sec-title { font-size: 30px; } .sec { padding: 60px 0; } .hero { padding: 80px 0 56px; } .cta-title { font-size: 32px; } .hero-acts { flex-direction: column; align-items: flex-start; } .hero-acts .btn { width: 100%; justify-content: center; } } .site-header__logo img { height: 32px; width: auto; }