/* ============================================================ THEME SYSTEM Treatment 1 (light) is default. Treatment 3 (dark navy/cyan) activates via . ============================================================ */ :root { --navy: #16294b; --navy-deep: #0c1a30; --cyan: #29a8e0; --cyan-bright: #4fc3f7; /* light theme (Treatment 1) */ --bg: #ffffff; --bg-alt: #f6f8fb; --bg-band: #101f3a; --text: #101f3a; --text-body: #4c5a72; --text-muted: #8b95a7; --accent: var(--cyan); --heading-font: 'Inter', sans-serif; --card-bg: #ffffff; --card-bg-raised: #f6f8fb; --card-border: #e7ecf2; --card-shadow: 0 30px 60px -20px rgba(22,41,75,.18); --kpi-up: #399e2e; /* logo green, deepened for text legibility on white */ --green-brand: #54c147; /* exact iobyte logo green - for chart/graphic elements */ --cta-bg: #16294b; --cta-text: #ffffff; --cta-shadow: 0 8px 24px rgba(22,41,75,.22); --nav-link: #45536b; --nav-link-hover: #16294b; --chart-line: #29a8e0; --footer-bg: #101f3a; --footer-text: #a9b7cc; } [data-theme="dark"] { --bg: #0c1a30; --bg-alt: #0f2038; --bg-band: #081222; --text: #ffffff; --text-body: #b6cbe0; --text-muted: #8fa8c2; --accent: var(--cyan-bright); --heading-font: 'Space Grotesk', sans-serif; --card-bg: rgba(255,255,255,.04); --card-bg-raised: rgba(255,255,255,.05); --card-border: rgba(255,255,255,.1); --card-shadow: 0 40px 80px -30px rgba(0,0,0,.6); --kpi-up: #6bd75f; --green-brand: #61cf54; --cta-bg: linear-gradient(90deg, #29a8e0, #4fc3f7); --cta-text: #06131f; --cta-shadow: 0 8px 30px rgba(41,168,224,.35); --nav-link: #a9c2da; --nav-link-hover: #ffffff; --chart-line: #4fc3f7; --footer-bg: #081222; --footer-text: #8fa8c2; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); } [data-theme="dark"] body { background: radial-gradient(1100px 600px at 78% -10%, #17406b 0%, var(--navy-deep) 55%), var(--navy-deep); } .container { max-width: 1360px; margin: 0 auto; padding-left: 56px; padding-right: 56px; } h1, h2, h3 { font-family: var(--heading-font); } /* ---- theme toggle (review tool, not part of final site) ---- */ #theme-toggle { position: fixed; bottom: 22px; right: 22px; z-index: 999; font: 600 12.5px 'Inter', sans-serif; letter-spacing: .03em; padding: 10px 16px; border-radius: 24px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.18); backdrop-filter: blur(8px); } #theme-toggle:hover { border-color: var(--accent); } /* ============================================================ NAV — sticky, blurs over content on scroll ============================================================ */ header { padding: 18px 0; position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease; } header.scrolled { border-bottom-color: var(--card-border); } [data-theme="dark"] header { background: rgba(12,26,48,.78); } nav.site-nav { display: flex; align-items: center; justify-content: space-between; } .logo-img { height: 88px; width: auto; display: block; } .logo-light { display: block; } .logo-dark { display: none; mix-blend-mode: lighten; } [data-theme="dark"] .logo-light { display: none; } [data-theme="dark"] .logo-dark { display: block; } .navlinks { display: flex; gap: 32px; font-size: 14.5px; font-weight: 500; } .navlinks a { color: var(--nav-link); text-decoration: none; transition: color .15s ease; position: relative; padding-bottom: 3px; } .navlinks a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .18s ease; } .navlinks a:hover { color: var(--nav-link-hover); } .navlinks a:hover::after { transform: scaleX(1); } .nav-cta { color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; } /* ---- buttons ---- */ .btn-primary { display: inline-block; font: 600 15px 'Inter', sans-serif; padding: 13px 26px; border-radius: 8px; text-decoration: none; background: var(--cta-bg); color: var(--cta-text); box-shadow: var(--cta-shadow); transition: transform .15s ease; } .btn-primary:hover { transform: translateY(-2px); } .btn-secondary { display: inline-block; font: 600 15px 'Inter', sans-serif; padding: 13px 24px; border-radius: 8px; text-decoration: none; color: var(--text); border: 1px solid var(--card-border); transition: border-color .15s ease; } .btn-secondary:hover { border-color: var(--accent); } .eyebrow { font: 700 13px 'Inter', sans-serif; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; } /* inline copy highlight - accent color + bold (e.g. "complete performance dashboard" in the hero) */ .hl { color: var(--accent); font-weight: 700; } /* ============================================================ HERO ============================================================ */ .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; /* NOTE: never use the padding shorthand on elements that share .container — it wipes out the container's horizontal padding and breaks alignment */ padding-top: 64px; padding-bottom: 96px; position: relative; } .hero::before { content: ''; position: absolute; top: -80px; right: -120px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(41,168,224,.07) 0%, transparent 65%); pointer-events: none; } [data-theme="dark"] .hero::before { display: none; } .hero h1 { font-weight: 800; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -.025em; } .hero h1 em { font-style: normal; color: var(--accent); } .hero p.sub { font-size: 18px; line-height: 1.6; color: var(--text-body); margin: 24px 0 34px; max-width: 480px; } .hero-ctas { display: flex; gap: 14px; align-items: center; } .hero-trust { margin-top: 46px; font-size: 12.5px; color: var(--text-muted); letter-spacing: .03em; text-transform: uppercase; } .hero-trust .logos { display: flex; gap: 22px; margin-top: 12px; align-items: center; font-weight: 700; font-size: 13px; color: var(--text); text-transform: none; } .hero-trust .logos span { opacity: .55; } .hero-trust .logos span.lead { opacity: 1; } .dash-card { background: var(--card-bg-raised); border: 1px solid var(--card-border); border-radius: 20px; padding: 28px; box-shadow: var(--card-shadow); } [data-theme="dark"] .dash-card { backdrop-filter: blur(6px); } .dash-card .card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 13.5px; } .dash-card .card-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 7px; } .dash-card .card-head .when { color: var(--text-muted); } .kpis { display: flex; gap: 14px; margin-bottom: 18px; } .kpi { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; flex: 1; } .kpi .n { font-family: var(--heading-font); font-weight: 800; font-size: 22px; } .kpi .l { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .kpi .n.up { color: var(--kpi-up); } /* ============================================================ STATS BAND ============================================================ */ .stats-band { background: var(--bg-alt); padding: 54px 0; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; } .stat .n { font-family: var(--heading-font); font-weight: 800; font-size: 40px; letter-spacing: -.02em; } .stat .n em { font-style: normal; color: var(--accent); } .stat .n em.green { color: var(--kpi-up); } .stat .l { font-size: 14px; color: var(--text-body); margin-top: 6px; } /* ============================================================ DARK BAND — applies Treatment 3 palette to a single section while the rest of the page stays light. Type stays Inter for consistency; color does the contrast work. ============================================================ */ .band-dark { --text: #ffffff; --text-body: #b6cbe0; --text-muted: #8fa8c2; --accent: var(--cyan-bright); --card-bg: rgba(255,255,255,.04); --card-bg-raised: rgba(255,255,255,.05); --card-border: rgba(255,255,255,.1); --card-shadow: 0 40px 80px -30px rgba(0,0,0,.6); --kpi-up: #6bd75f; --green-brand: #61cf54; --chart-line: var(--cyan-bright); background: radial-gradient(1100px 600px at 78% -10%, #17406b 0%, var(--navy-deep) 55%), var(--navy-deep); color: var(--text); } [data-theme="dark"] .band-dark { background: rgba(255,255,255,.02); } /* ============================================================ PRODUCTS ============================================================ */ .section { padding-top: 100px; padding-bottom: 100px; } section[id] { scroll-margin-top: 96px; } .section-head { max-width: 640px; margin-bottom: 56px; } .section-head h2 { font-weight: 800; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.02em; line-height: 1.15; } .section-head p { font-size: 17px; line-height: 1.6; color: var(--text-body); margin-top: 16px; } .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .product-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow); border-color: var(--accent); } .product-visual { height: 130px; border-radius: 12px; margin-bottom: 24px; background: var(--card-bg-raised); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-card h3 { font-weight: 700; font-size: 21px; margin-bottom: 10px; } .product-card h3 .tag { font: 600 10.5px 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; padding: 3px 9px; vertical-align: 3px; margin-left: 8px; } .product-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-body); flex: 1; } .product-card .learn { margin-top: 20px; font: 600 14px 'Inter', sans-serif; color: var(--accent); text-decoration: none; } .product-card .learn .arrow { display: inline-block; transition: transform .18s ease; } .product-card .learn:hover .arrow { transform: translateX(4px); } /* ============================================================ CAPABILITIES ============================================================ */ .cap-section { background: var(--bg-alt); border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); } .cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; } .cap { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 28px; display: flex; gap: 18px; align-items: flex-start; } .cap .icon { flex: 0 0 44px; height: 44px; border-radius: 10px; background: var(--accent); opacity: .92; display: flex; align-items: center; justify-content: center; } .cap .icon svg { width: 22px; height: 22px; stroke: #fff; } [data-theme="dark"] .cap .icon svg { stroke: #06131f; } .cap h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; } .cap p { font-size: 14.5px; line-height: 1.6; color: var(--text-body); } /* ============================================================ STORY ============================================================ */ .story { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; } .story-photo { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--card-shadow); height: 420px; } .story-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } [data-theme="dark"] .story-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,26,48,0) 35%, rgba(12,26,48,.7) 100%), linear-gradient(90deg, rgba(12,26,48,.45), transparent 35%); } .story-text h2 { font-weight: 800; font-size: 34px; line-height: 1.2; letter-spacing: -.02em; margin: 14px 0 16px; } .story-text p { font-size: 16.5px; line-height: 1.65; color: var(--text-body); max-width: 460px; } /* ============================================================ TESTIMONIAL ============================================================ */ .quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1080px; margin: 0 auto; } .quote-grid.single { grid-template-columns: 1fr; max-width: 640px; } .quote-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 36px 38px; display: flex; flex-direction: column; } .quote-card.hidden { display: none; } .quote-card .quote-mark { font-family: var(--heading-font); font-size: 56px; line-height: .5; color: var(--accent); margin-bottom: 22px; } .quote-card blockquote { font-family: var(--heading-font); font-weight: 600; font-size: 19.5px; line-height: 1.5; letter-spacing: -.01em; margin-bottom: 22px; flex: 1; } .quote-attr { font-size: 14.5px; color: var(--text-muted); } .quote-attr strong { color: var(--text); font-weight: 600; } @media (max-width: 980px) { .quote-grid { grid-template-columns: 1fr; } } /* ============================================================ CTA BAND ============================================================ */ .cta-band { background: var(--bg-band); padding: 90px 0; } [data-theme="dark"] .cta-band { border-top: 1px solid var(--card-border); } .cta-inner { text-align: center; max-width: 640px; margin: 0 auto; } .cta-inner h2 { color: #fff; font-weight: 800; font-size: 38px; letter-spacing: -.02em; line-height: 1.15; } .cta-inner p { color: #a9b7cc; font-size: 17px; line-height: 1.6; margin: 18px 0 32px; } .cta-inner .btn-primary { background: linear-gradient(90deg, var(--cyan), var(--cyan-bright)); color: #06131f; box-shadow: 0 8px 30px rgba(41,168,224,.35); } /* ============================================================ FOOTER ============================================================ */ footer { background: var(--footer-bg); color: var(--footer-text); padding: 64px 0 40px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; } .footer-grid .about p { font-size: 14px; line-height: 1.65; margin-top: 16px; max-width: 300px; } .footer-grid h4 { color: #fff; font: 700 13px 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; } .footer-grid ul { list-style: none; } .footer-grid li { margin-bottom: 10px; } .footer-grid a { color: var(--footer-text); text-decoration: none; font-size: 14.5px; } .footer-grid a:hover { color: #fff; } .footer-logo { height: 34px; width: auto; mix-blend-mode: lighten; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display: flex; justify-content: space-between; font-size: 13px; flex-wrap: wrap; gap: 12px; } .footer-bottom a { color: var(--footer-text); text-decoration: none; margin-left: 22px; } .footer-bottom a:hover { color: #fff; } /* ============================================================ SCROLL REVEAL (progressive enhancement; off for reduced motion) ============================================================ */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } .reveal-stagger.in > * { opacity: 1; transform: none; } .reveal-stagger.in > *:nth-child(2) { transition-delay: .09s; } .reveal-stagger.in > *:nth-child(3) { transition-delay: .18s; } .reveal-stagger.in > *:nth-child(4) { transition-delay: .27s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .container { padding-left: 22px; padding-right: 22px; } .hero, .story { grid-template-columns: 1fr; } .hero h1 { font-size: 38px; } .navlinks { display: none; } .stats { grid-template-columns: repeat(2, 1fr); } .product-grid, .cap-grid { grid-template-columns: 1fr; } .section { padding-top: 64px; padding-bottom: 64px; } /* top/bottom only - shorthand kills .container side padding */ .section-head h2 { font-size: 30px; } .footer-grid { grid-template-columns: 1fr 1fr; } #theme-toggle { display: none; } /* review tool - hide on mobile, remove entirely before launch */ } /* ============================================================ INTERIOR PAGES (products, services, press, about, contact) ============================================================ */ .navlinks a.active { color: var(--nav-link-hover); } .navlinks a.active::after { transform: scaleX(1); } .page-hero { padding-top: 56px; padding-bottom: 56px; position: relative; } .page-hero h1 { font-weight: 800; font-size: clamp(34px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -.025em; max-width: 720px; } .page-hero h1 em { font-style: normal; color: var(--accent); } .page-hero p.sub { font-size: 18px; line-height: 1.6; color: var(--text-body); margin-top: 22px; max-width: 620px; } /* products page: alternating feature rows */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding-top: 72px; padding-bottom: 72px; } .feature-row h2 { font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 14px; } .feature-row h2 .tag { font: 600 11px 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; padding: 3px 10px; vertical-align: 5px; margin-left: 10px; white-space: nowrap; } .feature-row p { font-size: 16px; line-height: 1.65; color: var(--text-body); margin-bottom: 18px; } .feature-list { list-style: none; margin-top: 6px; } /* avoid single-word last lines (orphans) in running text; ignored by older browsers */ li, p, blockquote { text-wrap: pretty; } .feature-list li { font-size: 15px; line-height: 1.5; color: var(--text-body); padding-left: 28px; position: relative; margin-bottom: 11px; } .feature-list li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); opacity: .15; } .feature-list li::after { content: ''; position: absolute; left: 4.5px; top: 8.5px; width: 7px; height: 4.5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .feature-stat { display: inline-block; margin-top: 20px; padding: 14px 20px; border-radius: 12px; background: var(--card-bg-raised); border: 1px solid var(--card-border); font-size: 14px; color: var(--text-body); } .feature-stat strong { font-family: var(--heading-font); font-weight: 800; font-size: 20px; color: var(--accent); margin-right: 8px; } .row-divider { border: none; border-top: 1px solid var(--card-border); margin: 0; } [data-theme="dark"] .row-divider { display: none; } /* press page: timeline list */ .press-list { max-width: 860px; } .press-item { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 30px 0; border-bottom: 1px solid var(--card-border); } .press-item:last-child { border-bottom: none; } .press-date { font: 700 13px 'Inter', sans-serif; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; padding-top: 3px; } .press-item h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; } .press-item h3 a { color: var(--text); text-decoration: none; } .press-item h3 a:hover { color: var(--accent); } .press-item p { font-size: 15px; line-height: 1.6; color: var(--text-body); } .press-item .more { font: 600 14px 'Inter', sans-serif; color: var(--accent); text-decoration: none; display: inline-block; margin-top: 10px; } .press-item .more:hover { text-decoration: underline; } /* about page: team cards */ .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .team-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 34px; } .team-card .avatar { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 20px; background: linear-gradient(135deg, var(--navy), var(--cyan)); color: #fff; font: 800 22px 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; } .team-card h3 { font-size: 21px; font-weight: 800; } .team-card .role { font: 600 13px 'Inter', sans-serif; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 16px; } .team-card p { font-size: 15px; line-height: 1.65; color: var(--text-body); } .client-strip { margin-top: 56px; text-align: center; } .client-strip .label { font-size: 12.5px; color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 16px; } .client-strip .names { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center; font-weight: 700; font-size: 15px; color: var(--text); opacity: .6; } /* contact page */ .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; } .contact-info h2 { font-weight: 800; font-size: 30px; letter-spacing: -.02em; margin-bottom: 14px; } .contact-info p { font-size: 16px; line-height: 1.65; color: var(--text-body); margin-bottom: 28px; max-width: 400px; } .contact-line { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .contact-line .ic { flex: 0 0 42px; height: 42px; border-radius: 10px; background: var(--card-bg-raised); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; } .contact-line .ic svg { width: 20px; height: 20px; stroke: var(--accent); } .contact-line a { color: var(--text); font-weight: 600; font-size: 16px; text-decoration: none; } .contact-line a:hover { color: var(--accent); } .contact-form { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 36px; box-shadow: var(--card-shadow); } .contact-form .field { margin-bottom: 18px; } .contact-form label { display: block; font: 600 13px 'Inter', sans-serif; margin-bottom: 7px; color: var(--text); } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; font: 400 15px 'Inter', sans-serif; color: var(--text); background: var(--bg); border: 1px solid var(--card-border); border-radius: 9px; padding: 12px 14px; outline: none; transition: border-color .15s ease; } [data-theme="dark"] .contact-form input, [data-theme="dark"] .contact-form textarea, [data-theme="dark"] .contact-form select { background: rgba(255,255,255,.05); } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--accent); } .contact-form textarea { min-height: 120px; resize: vertical; } @media (max-width: 980px) { .feature-row, .team-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; } .press-item { grid-template-columns: 1fr; gap: 6px; } }