/* CivyxIQ product pages — shared stylesheet Tokens mirror civyxiq.com/index.html :root so the pages read as one site. */ :root { --navy: #0D1B5E; --navy-2: #1A2B7A; --navy-3: #2B3D8F; --blue: #2B5CE6; --blue-light: #5580F0; --blue-pale: #EEF2FD; --blue-faint: #F7F8FD; --teal: #26B589; --teal-light: #3ECFA0; --teal-pale: #E8F9F4; --orange: #ff6b35; --violet: #7C5CE6; --violet-light: #9B80F0; --violet-pale: #F1EDFD; --white: #FFFFFF; --off-white: #F7F8FD; --gray-1: #475569; --gray-2: #E2E6F5; --gray-3: #9BA5C7; --border: rgba(13,27,94,0.10); --border-blue: rgba(43,92,230,0.18); --shadow-sm: 0 2px 8px rgba(13,27,94,0.06); --shadow-md: 0 4px 20px rgba(13,27,94,0.10); --shadow-lg: 0 12px 40px rgba(13,27,94,0.12); --sans: 'DM Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* per-page accent, overridden on */ --accent: var(--blue); --accent-pale: var(--blue-pale); } body[data-lane="sell"] { --accent: var(--teal); --accent-pale: var(--teal-pale); } body[data-lane="run"] { --accent: var(--orange); --accent-pale: #FFF0EA; } body[data-lane="keep"] { --accent: var(--violet); --accent-pale: var(--violet-pale); } body[data-lane="find"] { --accent: var(--blue); --accent-pale: var(--blue-pale); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); color: var(--navy); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; } .shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; } /* ── nav ─────────────────────────────────────────────────────────────────── */ nav.topnav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; } .brand-logo { height: 30px; width: auto; } .nav-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; font-weight: 500; } .nav-links a { color: var(--gray-1); text-decoration: none; transition: color .18s; } .nav-links a:hover { color: var(--navy); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none; min-height: 44px; box-sizing: border-box; transition: transform .18s, box-shadow .18s, background .18s; } .btn-blue { background: var(--blue); color: var(--white) !important; box-shadow: var(--shadow-sm); } .btn-blue:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-accent { background: var(--accent); color: var(--white) !important; box-shadow: var(--shadow-sm); } .btn-accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--navy) !important; border: 1px solid var(--border-blue); } .btn-ghost:hover { background: var(--blue-faint); } /* ── hero ────────────────────────────────────────────────────────────────── */ .p-hero { padding: 72px 0 56px; background: linear-gradient(180deg, var(--blue-faint), var(--white)); border-bottom: 1px solid var(--border); } .crumb { font-size: 13.5px; color: var(--gray-3); margin-bottom: 22px; } .crumb a { color: var(--gray-1); text-decoration: none; } .crumb a:hover { color: var(--blue); } .p-hero-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; } .p-name { font-size: clamp(38px, 6vw, 60px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; } .p-tag { font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; color: var(--navy-3); margin-top: 12px; } .p-pitch { font-size: 16.5px; color: var(--gray-1); margin-top: 20px; max-width: 62ch; } .p-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; } .status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; background: var(--accent-pale); color: var(--accent); } .status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .p-meta { font-size: 13.5px; color: var(--gray-3); } /* ── screenshot frame ────────────────────────────────────────────────────── */ .shot { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--white); } .shot-chrome { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #F3F5FB; border-bottom: 1px solid var(--border); } .dots { display: flex; gap: 6px; } .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-2); } .dots span:first-child { background: #FF5F57; } .dots span:nth-child(2) { background: #FEBC2E; } .dots span:nth-child(3) { background: #28C840; } .shot-url { font-family: var(--mono); font-size: 11.5px; color: var(--gray-3); } .shot img { width: 100%; height: auto; } .shot-cap { font-size: 13.5px; color: var(--gray-1); margin-top: 12px; } .shot-cap b { color: var(--navy); font-weight: 600; } /* ── sections ────────────────────────────────────────────────────────────── */ section.band { padding: 76px 0; } section.band.alt { background: var(--off-white); border-block: 1px solid var(--border); } .sec-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .sec-h { font-size: clamp(27px, 3.6vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; max-width: 22ch; } .sec-sub { font-size: 16.5px; color: var(--gray-1); margin-top: 16px; max-width: 66ch; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin-top: 40px; } .stat { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 22px; box-shadow: var(--shadow-sm); } .stat .v { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); } .stat .l { font-size: 13px; color: var(--gray-1); margin-top: 5px; } .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 44px; } .feat { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 26px; box-shadow: var(--shadow-sm); } .feat h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 9px; } .feat p { font-size: 14.5px; color: var(--gray-1); } .feat .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-pale); color: var(--accent); display: grid; place-items: center; margin-bottom: 15px; font-size: 17px; } .gal { display: grid; grid-template-columns: 1fr; gap: 46px; margin-top: 46px; } .gal-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 46px; align-items: start; } .phone { width: min(258px, 100%); margin: 0 auto; border-radius: 22px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); } /* Cap the handset so a 1688px-tall capture cannot outgrow the copy beside it. object-position keeps the top of the screen, which is the part worth showing. */ .phone img { height: 520px; object-fit: cover; object-position: top center; } .bullets { list-style: none; margin-top: 30px; display: grid; gap: 13px; } .bullets li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--gray-1); } .bullets li::before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-pale); box-shadow: inset 0 0 0 2px var(--accent); } .bullets li b { color: var(--navy); font-weight: 600; } .note { margin-top: 40px; padding: 20px 24px; background: var(--blue-faint); border: 1px solid var(--border-blue); border-left: 3px solid var(--accent); border-radius: 10px; font-size: 14.5px; color: var(--gray-1); } .note b { color: var(--navy); font-weight: 600; } /* ── cta ─────────────────────────────────────────────────────────────────── */ .cta-band { padding: 76px 0; background: var(--navy); color: var(--white); text-align: center; } .cta-band h2 { font-size: clamp(27px, 3.6vw, 38px); font-weight: 700; letter-spacing: -0.025em; } .cta-band p { color: rgba(255,255,255,0.72); margin-top: 14px; font-size: 16.5px; } .cta-band .p-actions { justify-content: center; } .cta-band .btn-ghost { color: var(--white) !important; border-color: rgba(255,255,255,0.28); } .cta-band .btn-ghost:hover { background: rgba(255,255,255,0.08); } /* ── siblings ────────────────────────────────────────────────────────────── */ .sib-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 38px; } .sib { display: block; text-decoration: none; background: var(--white); border: 1px solid var(--border); border-radius: 13px; padding: 22px; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s; } .sib:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .sib .lane { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-3); } .sib .nm { font-size: 18px; font-weight: 650; margin-top: 7px; } .sib .ds { font-size: 14px; color: var(--gray-1); margin-top: 7px; } /* ── footer ──────────────────────────────────────────────────────────────── */ footer { background: var(--navy); color: rgba(255,255,255,0.62); padding: 56px 0 34px; font-size: 14.5px; } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; } .footer-brand-name { font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: -0.02em; } .footer-brand-name span { color: var(--teal-light); } .footer-tagline { margin-top: 9px; } .footer-address { font-style: normal; margin-top: 16px; font-size: 13.5px; } .footer-col h5 { color: var(--white); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px; } .footer-col a { display: block; color: rgba(255,255,255,0.62); text-decoration: none; margin-bottom: 9px; transition: color .18s; } .footer-col a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.10); font-size: 13px; } @media (min-width: 900px) { .p-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; } } @media (max-width: 820px) { .shell { padding: 0 20px; } .nav-links a:not(.btn) { display: none; } .p-hero { padding: 46px 0 40px; } section.band { padding: 54px 0; } .footer-top { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }