/* LogicStream — combined stylesheet (homepage + sections + docs). Font: "Open Sans" (Google Fonts, weights 400/600/700/800). Add to : */ /* ============================================================ LogicStream — Brand System ============================================================ */ :root { /* ---- Deep Stream palette: anchor in depth, let the brand pop ---- */ --navy: #0E2D38; /* deep teal-navy anchor: dark bands, footer */ --navy-soft: #143C49; /* slightly lifted navy */ --blue: #2F80C2; /* clean, friendly primary blue */ --blue-ink: #2A6BA8; /* readable blue for text/links */ --blue-700: #0E2D38; /* = navy */ --blue-bright: #5B9BD5; /* logo wordmark blue — accent / motif */ --blue-300: #A6CDE8; --blue-100: #E1EFF8; --orange: #E8A87C; /* soft peach — tint only */ --orange-strong: #D9681E; /* true accent pop — CTAs, highlights */ --orange-bright: #ED9C5C; /* logo wordmark orange */ --orange-100: #FBEADC; /* AI accent \u2014 modern violet, used only for AI-powered capabilities */ --violet: #6C5CE7; --violet-ink: #4B3BC4; --violet-100: #ECE9FB; /* Signature gradient: blue → periwinkle → violet, weighted toward purple */ --grad: linear-gradient(135deg, #4F86DD 0%, #6E6AE6 44%, #8B5BEE 100%); --grad-rev: linear-gradient(135deg, #8B5BEE 0%, #6E6AE6 50%, #4F86DD 100%); /* Softer, lighter gradient for buttons */ --grad-soft: linear-gradient(135deg, #6FA0E2 0%, #8174EC 52%, #9B72F0 100%); --bg: #FFFFFF; /* page background — WHITE */ --surface: #FFFFFF; --surface-2: #F4F8FB; --tint: #E9F1F7; /* soft brand blue — occasional section tint */ --ink: #112C36; /* primary text — near-navy, high contrast */ --ink-soft: #475C66; /* secondary text */ --ink-faint: #7A8D97; /* tertiary */ --line: #DCE6EC; --line-soft: #EAF1F6; /* Type */ --font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; /* Shadow — a touch deeper for crisper cards */ --sh-sm: 0 1px 2px rgba(14,45,56,.08), 0 1px 3px rgba(14,45,56,.06); --sh-md: 0 6px 18px rgba(14,45,56,.09), 0 2px 6px rgba(14,45,56,.06); --sh-lg: 0 22px 54px rgba(14,45,56,.16), 0 6px 18px rgba(14,45,56,.08); --sh-glow: 0 22px 60px rgba(31,110,130,.22); /* Layout */ --container: 1200px; --gutter: clamp(20px, 5vw, 48px); --nav-h: 74px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); font-weight: 800; } p { margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } strong { font-weight: 700; color: var(--ink); } .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } /* ============================================================ Typography helpers ============================================================ */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6A5AD8; } .eyebrow.dot::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--violet); transform: rotate(0deg); } .h1 { font-size: clamp(2.4rem, 5.2vw, 3.7rem); font-weight: 800; } .h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; } .h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; } .lead { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--ink-soft); line-height: 1.55; } .text-grad { color: var(--orange-strong); } .section-head { max-width: 760px; } .section-head .lead { margin-top: 18px; } .section-head .h2 { margin-top: 16px; } /* ============================================================ Buttons / CTA system ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 1; padding: 14px 24px; border-radius: 12px; cursor: pointer; border: 1.5px solid transparent; transition: transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--grad-soft); background-size: 150% 150%; background-position: 0% 50%; color: #fff; box-shadow: 0 8px 20px rgba(98,110,225,.22); transition: transform .18s ease, box-shadow .25s ease, background-position .5s ease; } .btn-primary:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(108,92,231,.26); } .btn-secondary { background: #fff; color: var(--blue-ink); border-color: var(--blue); } .btn-secondary:hover { border-color: var(--blue-ink); background: var(--surface-2); transform: translateY(-2px); box-shadow: var(--sh-md); } .btn-ghost { background: transparent; color: var(--blue-ink); padding-inline: 8px; } .btn-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--blue-ink); cursor: pointer; transition: gap .2s ease, color .2s ease; } .btn-link .arrow { transition: transform .2s ease; } .btn-link:hover { color: var(--orange-strong); } .btn-link:hover .arrow { transform: translateX(4px); } .btn-sm { padding: 11px 18px; font-size: 15px; } /* ============================================================ Sticky nav ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: rgba(255,255,255,.78); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; } .nav.scrolled { background: rgba(255,255,255,.92); border-color: var(--line); box-shadow: 0 6px 24px rgba(14,45,56,.08); } .nav .container { display: flex; align-items: center; gap: 28px; width: 100%; } .nav-logo img { height: 30px; width: auto; } .nav-links { display: flex; align-items: center; gap: 30px; margin: 0 auto; } .nav-links a { font-size: 15.5px; font-weight: 600; color: var(--ink-soft); position: relative; padding: 6px 0; transition: color .2s ease; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--orange-strong); transition: width .25s ease; border-radius: 2px; } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; } .nav-util { display: flex; align-items: center; gap: 20px; margin-left: auto; } .nav-login { font-size: 15px; font-weight: 600; color: var(--ink-soft); transition: color .2s; } .nav-login:hover { color: var(--ink); } .aws-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--blue-ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; letter-spacing: .01em; } .aws-pill .spark { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-strong); box-shadow: 0 0 0 0 rgba(224,138,78,.5); animation: pulse 2.4s infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(224,138,78,.5);} 70%{box-shadow:0 0 0 7px rgba(224,138,78,0);} 100%{box-shadow:0 0 0 0 rgba(224,138,78,0);} } .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; } /* Mobile menu panel */ .mobile-menu { display: none; } /* ============================================================ Sections base ============================================================ */ section { position: relative; } .section-pad { padding-block: clamp(72px, 9vw, 128px); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; overflow: hidden; padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(64px, 8vw, 112px); } .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .hero-bg::before { content: ""; position: absolute; top: -22%; right: -8%; width: 62vw; height: 62vw; max-width: 880px; max-height: 880px; background: radial-gradient(circle at 50% 50%, rgba(47,128,194,.12), rgba(47,128,194,0) 60%); } .hero-bg::after { content: ""; position: absolute; bottom: -28%; left: -10%; width: 50vw; height: 50vw; max-width: 660px; max-height: 660px; background: radial-gradient(circle at 50% 50%, rgba(108,92,231,.11), rgba(108,92,231,0) 60%); } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .eyebrow-pill { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 7px 7px 14px; font-size: 13px; font-weight: 700; color: var(--blue-ink); box-shadow: var(--sh-sm); letter-spacing: .01em; } .eyebrow-pill .tag { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--grad); color: #fff; padding: 4px 9px; border-radius: var(--r-pill); } .hero h1 { margin-top: 22px; } .hero h1 .stream-word { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { margin-top: 22px; max-width: 560px; } .hero-micro { margin-top: 18px; font-size: 14.5px; color: var(--ink-faint); max-width: 540px; line-height: 1.55; padding-left: 16px; border-left: 3px solid var(--blue-100); } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; } .hero-tertiary { margin-left: 4px; } .trust-strip { margin-top: 34px; padding-top: 26px; border-top: 1px dashed var(--line); } .trust-strip .trust-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; } .trust-items { display: flex; flex-wrap: wrap; gap: 10px 22px; } .trust-item { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink-soft); } .trust-item .ck { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--blue-100); color: var(--blue-ink); flex: none; } .trust-item.geo .ck { background: var(--orange-100); color: var(--orange-strong); } /* Hero video card (animated stream motif placeholder) */ .video-card { position: relative; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(160deg, #ffffff, #eef4f8 58%, #f8ece2); border: 1px solid var(--line); box-shadow: var(--sh-lg); aspect-ratio: 4 / 3.2; } .video-stage { position: absolute; inset: 0; display: grid; place-items: center; } .video-stage svg { width: 78%; height: auto; filter: drop-shadow(0 10px 20px rgba(46,85,100,.10)); } .video-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; } .video-toprow { display: flex; justify-content: space-between; align-items: center; } .live-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.85); backdrop-filter: blur(6px); border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--blue-ink); box-shadow: var(--sh-sm); } .live-badge .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--orange-strong); animation: pulse 2s infinite; } .video-quality { background: rgba(42,59,71,.55); color: #fff; backdrop-filter: blur(6px); border-radius: 7px; padding: 4px 9px; font-size: 11px; font-weight: 700; letter-spacing: .03em; } .play-btn { align-self: center; width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.92); box-shadow: var(--sh-lg); display: grid; place-items: center; transition: transform .2s ease, box-shadow .2s ease; margin: auto; } .play-btn:hover { transform: scale(1.07); box-shadow: 0 22px 50px rgba(46,85,100,.22); } .play-btn svg { width: 26px; height: 26px; margin-left: 4px; } .video-caption { background: rgba(255,255,255,.86); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: 13px 16px; box-shadow: var(--sh-sm); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .video-caption .vcap-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink); } .video-caption .vcap-item .d { width: 8px; height: 8px; border-radius: 2px; } /* scrubber */ .scrubber { position: absolute; left: 20px; right: 20px; bottom: 86px; height: 4px; border-radius: 4px; background: rgba(42,59,71,.16); overflow: hidden; } .scrubber .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; background: var(--grad); border-radius: 4px; } .scrubber .lock { position: absolute; top: -3px; height: 10px; width: 2px; background: var(--orange-strong); left: 42%; } /* Stream motif squares — flowing animation */ .sq { transform-box: fill-box; transform-origin: center; animation: flow 3.4s ease-in-out infinite; } @keyframes flow { 0%, 100% { opacity: var(--o, 1); transform: translateX(0) scale(1); } 45% { opacity: 1; transform: translateX(6px) scale(1.06); } } /* ============================================================ Reveal animation (scroll) ============================================================ */ /* Transform-only reveal: content is always painted (never opacity:0), so it can never get stuck invisible. Slides + settles into place. */ .reveal { transform: translateY(30px) scale(.985); transition: transform .72s cubic-bezier(.2,.75,.2,1); will-change: transform; } .reveal.in { transform: none; } .reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; } .reveal-d5 { transition-delay: .40s; } @media (prefers-reduced-motion: reduce) { .reveal { transform: none; transition: none; } .sq { animation: none; } html { scroll-behavior: auto; } } /* ============================================================ Credibility (S2) ============================================================ */ .cred-top { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px,4vw,64px); align-items: start; } .cred-body { font-size: clamp(1.02rem,1.25vw,1.16rem); color: var(--ink-soft); line-height: 1.62; } .cred-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(40px,5vw,64px); } .cred-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--sh-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .cred-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--blue-100); } .badge-lockup { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; } .badge-mark { width: 52px; height: 52px; border-radius: 14px; flex: none; display: grid; place-items: center; /* light lavender chip */ background: linear-gradient(150deg, #ECF1FD, #ECE7FC); border: 1px solid #fff; color: #6A5AD8; } .badge-mark svg { width: 28px; height: 28px; } .badge-lockup .bl-name { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.2; } .badge-lockup .bl-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--orange-strong); } .cred-card h3 { font-size: 1.18rem; margin-bottom: 8px; } .cred-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; } .cred-subrow { margin-top: 30px; text-align: center; font-size: 14.5px; color: var(--ink-faint); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .cred-subrow .pin { color: var(--orange-strong); } /* ============================================================ Who It's For (S3) ============================================================ */ .audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: clamp(40px,5vw,60px); } .aud-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 34px 30px 32px; box-shadow: var(--sh-sm); overflow: hidden; transition: transform .28s ease, box-shadow .28s ease; } .aud-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .aud-card:nth-child(2)::before { background: var(--blue-ink); } .aud-card:nth-child(3)::before { background: var(--orange-strong); } .aud-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); } .aud-card:hover::before { transform: scaleX(1); } .aud-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px; background: linear-gradient(150deg, #ECF1FD, #ECE7FC); color: #6A5AD8; box-shadow: 0 6px 16px rgba(108,92,231,.12); } .aud-card:nth-child(3) .aud-icon { background: linear-gradient(150deg, #FBF0E6, #FBEADD); color: #DD6F23; box-shadow: 0 6px 16px rgba(217,104,30,.12); } .aud-icon svg { width: 28px; height: 28px; } .aud-card h3 { font-size: 1.28rem; margin-bottom: 12px; } .aud-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; } /* ============================================================ Features (S4) ============================================================ */ .features { background: var(--surface); } .feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: clamp(44px,5vw,64px); } .feat-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--sh-sm); transition: transform .26s ease, box-shadow .26s ease, border-color .26s; } .feat-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--blue-100); } .feat-num { position: absolute; top: 24px; right: 26px; font-size: 13px; font-weight: 800; color: var(--line); letter-spacing: .02em; } .feat-card:hover .feat-num { color: var(--blue-300); } .feat-icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 20px; background: linear-gradient(150deg, #ECF1FD, #ECE7FC); color: #6A5AD8; border: 1px solid #fff; } .feat-icon svg { width: 26px; height: 26px; } /* AI-powered feature carries a stronger violet glyph */ .feat-card:nth-child(6) .feat-icon { background: linear-gradient(150deg, #EBE4FD, #EFE9FD); color: #6C5CE7; box-shadow: 0 6px 16px rgba(108,92,231,.16); } .feat-card:nth-child(6):hover { border-color: var(--violet-100); } .feat-card:nth-child(6):hover .feat-num { color: var(--violet); } .feat-card h3 { font-size: 1.12rem; margin-bottom: 9px; letter-spacing: -0.01em; } .feat-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.58; } /* ============================================================ How It Works (S5) ============================================================ */ .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: clamp(44px,5vw,66px); position: relative; } .step-line { position: absolute; top: 38px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--blue-300) 0 8px, transparent 8px 16px); z-index: 0; } .step { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--sh-sm); } .step-num { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; color: #fff; background: var(--grad); box-shadow: 0 8px 20px rgba(61,99,196,.28); margin-bottom: 22px; } .step:nth-child(3) .step-num { background: var(--grad); } .step:nth-child(4) .step-num { background: var(--orange-strong); box-shadow: 0 8px 20px rgba(217,104,30,.3); } .step h3 { font-size: 1.24rem; margin-bottom: 11px; } .step p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; } .step .step-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-strong); display: block; margin-bottom: 6px; } .callout { margin-top: clamp(40px,5vw,56px); position: relative; overflow: hidden; background: radial-gradient(125% 150% at 100% 0%, rgba(124,87,239,.40) 0%, rgba(124,87,239,0) 48%), radial-gradient(120% 140% at 92% 105%, rgba(46,138,208,.34) 0%, rgba(46,138,208,0) 50%), linear-gradient(130deg, #0E2D38 0%, #13243F 52%, #1A1C49 100%); color: #fff; border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-xl); padding: clamp(40px,5vw,62px); box-shadow: 0 30px 64px rgba(14,28,60,.38); } .callout::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 4px; background: var(--grad); border-radius: 0 4px 4px 0; } .callout::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%); pointer-events: none; } .callout .co-inner { position: relative; z-index: 1; max-width: 760px; } .callout .co-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; } .callout h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.95rem); margin-bottom: 14px; } .callout p { color: rgba(255,255,255,.84); font-size: clamp(1rem,1.2vw,1.12rem); line-height: 1.6; } .callout .co-bolt { color: #fff; font-weight: 800; } /* ============================================================ Footer (compact) ============================================================ */ .footer { background: var(--blue-700); color: rgba(255,255,255,.7); padding-block: 56px 32px; } .footer-top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; } .footer-brand { max-width: 360px; } .footer-brand img { height: 30px; margin-bottom: 16px; } .footer-brand p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.65); } .footer-creds { display: flex; flex-wrap: wrap; gap: 12px; } .fcred { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-pill); padding: 9px 15px; } .fcred .ck { color: var(--orange); display: inline-flex; } .footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.55); } .footer-bottom a { color: rgba(255,255,255,.7); } .footer-bottom a:hover { color: #fff; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 960px) { .nav-links { display: none; } .nav-util .aws-pill, .nav-util .nav-login { display: none; } .nav-burger { display: flex; } .hero-grid { grid-template-columns: 1fr; } .video-card { max-width: 520px; margin: 8px auto 0; } .cred-top { grid-template-columns: 1fr; } .cred-cards { grid-template-columns: 1fr; } .audience-grid { grid-template-columns: 1fr; } .feat-grid { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr; } .step-line { display: none; } .mobile-menu { display: block; position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99; background: #fff; box-shadow: var(--sh-lg); border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .3s ease; padding: 20px var(--gutter) 28px; } .mobile-menu.open { transform: translateY(0); } .mobile-menu a { display: block; padding: 14px 0; font-size: 17px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-soft); } .mobile-menu .mm-cta { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; } .mobile-menu .mm-cta .btn { width: 100%; } } @media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } .hero-cta { gap: 12px; } .hero-cta .btn { flex: 1 1 auto; } } /* ============================================================ LogicStream — Section styles (S6–S16) + footer Consistent with css/styles.css tokens. ============================================================ */ /* ---- Shared: tint section + section intro centering helper ---- */ .tint-band { background: var(--tint); } .violet-band { background: linear-gradient(180deg, #F4F1FD, #EeeAFB); } .center-head { text-align: center; margin-inline: auto; } .center-head .lead { margin-left: auto; margin-right: auto; } /* ============================================================ S6 — Inside Moodle & Totara (tabbed) ============================================================ */ .tabs { display: flex; gap: 8px; justify-content: center; margin-top: 34px; background: var(--surface-2); border: 1px solid var(--line); padding: 6px; border-radius: var(--r-pill); width: fit-content; margin-inline: auto; } .tab-btn { font-family: var(--font); font-size: 15px; font-weight: 700; color: var(--ink-soft); border: 0; background: transparent; padding: 11px 26px; border-radius: var(--r-pill); cursor: pointer; transition: color .2s ease, background .2s ease, box-shadow .2s ease; display: inline-flex; align-items: center; gap: 9px; } .tab-btn .tdot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; } .tab-btn[aria-selected="true"] { background: #fff; color: var(--blue-ink); box-shadow: var(--sh-sm); } .tab-btn[aria-selected="true"] .tdot { opacity: 1; background: var(--violet); } .tab-panel { display: none; margin-top: 40px; } .tab-panel.active { display: block; animation: fadeUp .5s ease both; } @keyframes fadeUp { from { transform: translateY(14px); } to { transform: none; } } .tab-lead { max-width: 820px; margin-inline: auto; text-align: center; color: var(--ink-soft); font-size: clamp(1rem,1.2vw,1.13rem); line-height: 1.6; } .cap-subhead { text-align: center; font-weight: 800; font-size: clamp(1.2rem,1.8vw,1.5rem); color: var(--ink); margin: clamp(40px,5vw,56px) 0 26px; } .cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .cap-grid.cols-1 { grid-template-columns: 1fr; max-width: 880px; margin-inline: auto; } .cap-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; transition: border-color .2s, box-shadow .2s, transform .2s; } .cap-item:hover { border-color: var(--blue-100); box-shadow: var(--sh-md); transform: translateY(-2px); } .cap-tick { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(150deg, #ECF1FD, #ECE7FC); color: #6A5AD8; margin-top: 2px; } .cap-item h4 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; color: var(--ink); } .cap-item h4 .pro-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--violet-ink); background: var(--violet-100); border-radius: var(--r-pill); padding: 3px 8px; margin-left: 6px; vertical-align: middle; } .cap-item p { margin: 0; font-size: 13.6px; color: var(--ink-soft); line-height: 1.5; } /* ============================================================ S7 — AI Capabilities (violet) ============================================================ */ .ai-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: clamp(40px,5vw,60px); } .ai-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--sh-sm); transition: transform .26s, box-shadow .26s, border-color .26s; } .ai-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--violet-100); } .ai-icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 20px; background: linear-gradient(150deg, #EBE4FD, #EFE9FD); color: var(--violet); border: 1px solid #fff; } .ai-icon svg { width: 26px; height: 26px; } .ai-card h3 { font-size: 1.12rem; margin-bottom: 9px; } .ai-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.58; } .ai-meta { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--violet-ink); font-weight: 700; } /* ============================================================ S8 — Free Plugin + compatibility ============================================================ */ .plugin-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,64px); align-items: center; } .plugin-body p { color: var(--ink-soft); font-size: clamp(1rem,1.2vw,1.13rem); line-height: 1.62; margin-top: 16px; } .compat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; } .compat-card .cc-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; } .compat-card .cc-head .pin { width: 8px; height: 8px; border-radius: 2px; background: var(--violet); } .compat-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); } .compat-row:last-child { border-bottom: 0; } .compat-row .k { font-weight: 700; color: var(--ink); font-size: 14.5px; } .compat-row .v { color: var(--ink-soft); font-size: 14.5px; } .install-steps { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; } .install-mini { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); } .install-mini .n { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(150deg,#ECF1FD,#ECE7FC); color: #6A5AD8; font-weight: 800; font-size: 12px; display: grid; place-items: center; } /* ============================================================ S9 — Pricing ============================================================ */ .price-toggle { display: inline-flex; align-items: center; gap: 14px; margin: 26px auto 0; padding: 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); width: fit-content; } .price-toggle button { font-family: var(--font); border: 0; background: transparent; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink-soft); padding: 9px 18px; border-radius: var(--r-pill); transition: .2s; } .price-toggle button[aria-pressed="true"] { background: #fff; color: var(--blue-ink); box-shadow: var(--sh-sm); } .price-toggle .save { font-size: 11px; font-weight: 800; color: #1F8A5B; background: #E3F5EC; border-radius: var(--r-pill); padding: 3px 8px; } .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(36px,4vw,48px); align-items: stretch; } .price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; box-shadow: var(--sh-sm); transition: transform .25s, box-shadow .25s; } .price-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); } .price-card.popular { border: 1.5px solid transparent; background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; box-shadow: var(--sh-lg); transform: translateY(-6px); } .popular-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: 0 6px 14px rgba(108,92,231,.3); } .price-name { font-size: 1.25rem; font-weight: 800; color: var(--ink); } .price-blurb { font-size: 13px; color: var(--ink-faint); margin-top: 4px; min-height: 34px; } .price-amt { margin-top: 16px; display: flex; align-items: baseline; gap: 4px; } .price-amt .amt { font-size: 2.4rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; } .price-amt .per { font-size: 14px; color: var(--ink-faint); font-weight: 600; } .price-annual { font-size: 12.5px; color: #1F8A5B; font-weight: 700; margin-top: 6px; min-height: 18px; } .price-card .btn { margin-top: 20px; width: 100%; } .price-feats { margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; display: flex; flex-direction: column; gap: 11px; } .price-feats .inc { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--violet-ink); margin-bottom: 2px; } .price-feats li { font-size: 13.6px; color: var(--ink-soft); line-height: 1.4; display: flex; gap: 9px; align-items: flex-start; } .price-feats li .ck { flex: none; width: 17px; height: 17px; border-radius: 5px; background: var(--violet-100); color: var(--violet-ink); display: grid; place-items: center; margin-top: 1px; } /* ============================================================ S10 — Comparison table ============================================================ */ .cmp-wrap { margin-top: clamp(34px,4vw,48px); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); background: #fff; overflow-x: auto; } table.cmp { width: 100%; border-collapse: collapse; min-width: 720px; } table.cmp thead th { background: var(--navy); color: #fff; font-size: 13.5px; font-weight: 700; text-align: center; padding: 16px 14px; } table.cmp thead th:first-child { text-align: left; } table.cmp thead th.pop { background: linear-gradient(180deg,#2b2c56,#1A1C49); } table.cmp tbody td { padding: 14px 14px; text-align: center; font-size: 13.8px; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); } table.cmp tbody td:first-child { text-align: left; font-weight: 600; color: var(--ink); } table.cmp tbody tr:nth-child(even) { background: var(--surface-2); } table.cmp .yes { color: var(--violet); } table.cmp .no { color: var(--ink-faint); } table.cmp td.pop-col { background: rgba(108,92,231,.05); font-weight: 700; color: var(--ink); } /* ============================================================ S11 — Add-ons ============================================================ */ .addon-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: clamp(34px,4vw,48px); } .addon-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 22px; transition: transform .2s, box-shadow .2s, border-color .2s; } .addon-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--blue-100); } .addon-card h4 { font-size: 1.02rem; font-weight: 800; color: var(--ink); margin: 0 0 8px; } .addon-price { font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; } .addon-price span { font-size: 13px; font-weight: 600; color: var(--ink-faint); } /* ============================================================ S12 — Data Residency ============================================================ */ .region-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: clamp(36px,4vw,52px); } .region-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; transition: transform .22s, box-shadow .22s, border-color .22s; } .region-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--blue-100); } .region-flag { font-size: 2rem; line-height: 1; margin-bottom: 14px; } .region-card h3 { font-size: 1.12rem; margin-bottom: 6px; } .region-card p { font-size: 14px; color: var(--ink-soft); } /* light callout variant (transparency note) */ .callout.light { background: radial-gradient(120% 150% at 100% 0%, rgba(124,87,239,.10), transparent 50%), linear-gradient(135deg, #F4F1FD, #EAF0FB); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-sm); } .callout.light::before { background: var(--grad); } .callout.light::after { display: none; } .callout.light .co-eyebrow { color: var(--violet-ink); } .callout.light h3 { color: var(--ink); } .callout.light p { color: var(--ink-soft); } .callout.light .co-bolt { color: var(--ink); } /* ============================================================ S13 — AWS Marketplace band ============================================================ */ .aws-band { position: relative; overflow: hidden; border-radius: var(--r-xl); background: radial-gradient(120% 150% at 0% 0%, rgba(124,87,239,.34), transparent 48%), radial-gradient(120% 150% at 100% 100%, rgba(46,138,208,.30), transparent 50%), linear-gradient(130deg, #0E2D38, #15233F 55%, #1A1C49); color: #fff; padding: clamp(38px,5vw,58px); box-shadow: var(--sh-lg); border: 1px solid rgba(255,255,255,.07); display: grid; grid-template-columns: 1.4fr .6fr; gap: 32px; align-items: center; } .aws-band .ab-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #FF9900; margin-bottom: 14px; } .aws-band h2 { color: #fff; margin-bottom: 14px; } .aws-band p { color: rgba(255,255,255,.82); font-size: clamp(1rem,1.2vw,1.1rem); line-height: 1.6; margin-bottom: 22px; } .aws-badge-box { display: grid; place-items: center; } .aws-badge { background: #fff; border-radius: var(--r-lg); padding: 26px 30px; box-shadow: var(--sh-lg); width: 100%; max-width: 320px; } .aws-badge img { width: 100%; height: auto; display: block; } /* ============================================================ S14 — FAQ accordion ============================================================ */ .faq-list { max-width: 880px; margin: clamp(34px,4vw,48px) auto 0; display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: box-shadow .2s, border-color .2s; } .faq-item.open { box-shadow: var(--sh-md); border-color: var(--violet-100); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font); font-size: 16px; font-weight: 700; color: var(--ink); padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-q .chev { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(150deg,#ECF1FD,#ECE7FC); color: #6A5AD8; display: grid; place-items: center; transition: transform .3s ease; } .faq-item.open .faq-q .chev { transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .faq-a .faq-a-inner { padding: 0 22px 20px; color: var(--ink-soft); font-size: 14.6px; line-height: 1.62; } /* ============================================================ S15 — Inquiry form ============================================================ */ .form-wrap { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px,4vw,52px); margin-top: clamp(36px,4vw,52px); align-items: start; } .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(26px,3vw,38px); box-shadow: var(--sh-md); } .form-card h3 { font-size: 1.2rem; margin-bottom: 20px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 13px; font-weight: 700; color: var(--ink); } .field label .req { color: var(--violet); } .field input, .field select, .field textarea { font-family: var(--font); font-size: 14.5px; color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s, background .2s; } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--violet); background: #fff; box-shadow: 0 0 0 4px rgba(108,92,231,.12); } .field input.invalid { border-color: #E5484D; box-shadow: 0 0 0 4px rgba(229,72,77,.1); } .form-submit-row { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .form-note { font-size: 12.5px; color: var(--ink-faint); } .form-success { display: none; align-items: center; gap: 12px; background: #E3F5EC; border: 1px solid #B6E5CC; color: #1F6B45; border-radius: var(--r-md); padding: 16px 20px; font-weight: 600; font-size: 14.5px; margin-top: 20px; } .form-success.show { display: flex; animation: fadeUp .4s ease both; } .form-success .ck { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #1F8A5B; color: #fff; display: grid; place-items: center; } .contact-side { display: flex; flex-direction: column; gap: 14px; } .contact-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-sm); } .contact-block h3 { font-size: 1.05rem; margin-bottom: 16px; } .contact-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line-soft); } .contact-row:last-child { border-bottom: 0; } .contact-row .ci { flex: none; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(150deg,#ECF1FD,#ECE7FC); color: #6A5AD8; display: grid; place-items: center; } .contact-row .cl { font-size: 12px; color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .contact-row .cv { font-size: 14.5px; color: var(--ink); font-weight: 600; word-break: break-word; } .contact-creds { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .contact-cred { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); } .contact-cred .ck { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--violet-100); color: var(--violet-ink); display: grid; place-items: center; } /* ============================================================ S16 — Closing CTA ============================================================ */ .closing { position: relative; overflow: hidden; text-align: center; background: radial-gradient(120% 150% at 0% 0%, rgba(124,87,239,.34), transparent 50%), radial-gradient(120% 150% at 100% 100%, rgba(46,138,208,.30), transparent 52%), linear-gradient(130deg, #0E2D38, #15233F 55%, #1A1C49); color: #fff; border-radius: var(--r-xl); padding: clamp(48px,6vw,80px); box-shadow: var(--sh-lg); border: 1px solid rgba(255,255,255,.07); } .closing h2 { color: #fff; max-width: 760px; margin: 0 auto 16px; } .closing p { color: rgba(255,255,255,.84); font-size: clamp(1rem,1.3vw,1.18rem); max-width: 620px; margin: 0 auto 28px; line-height: 1.6; } .closing .hero-cta { justify-content: center; } .closing .btn-secondary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); color: #fff; } .closing .btn-secondary:hover { background: rgba(255,255,255,.16); border-color: #fff; } .closing .btn-link { color: #fff; } .closing .btn-link:hover { color: #FFCFA6; } /* ============================================================ Full footer ============================================================ */ .footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; } .footer-col h4 { color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; font-weight: 800; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .footer-col a { color: rgba(255,255,255,.68); font-size: 14px; transition: color .2s; } .footer-col a:hover { color: #fff; } .footer-col .ext::after { content: " ↗"; font-size: 11px; opacity: .7; } @media (max-width: 980px) { .tab-panel .cap-grid, .ai-grid, .price-grid, .addon-grid, .region-grid { grid-template-columns: 1fr 1fr; } .plugin-wrap, .form-wrap, .aws-band { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 640px) { .cap-grid, .ai-grid, .price-grid, .addon-grid, .region-grid, .form-grid, .footer-cols { grid-template-columns: 1fr; } .tabs { width: 100%; } .tab-btn { flex: 1; justify-content: center; padding-inline: 12px; } } /* ============================================================ LogicStream — Documentation pages Inherits brand tokens from ../css/styles.css ============================================================ */ /* ---- Doc nav (compact) ---- */ .doc-nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: rgba(255,255,255,.86); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--line); } .doc-nav .container { display: flex; align-items: center; gap: 20px; width: 100%; } .doc-nav .nav-logo img { height: 28px; } .doc-nav .spacer { margin-left: auto; } .doc-nav .back { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; transition: color .2s; } .doc-nav .back:hover { color: var(--ink); } /* ---- Doc hero ---- */ .doc-hero { position: relative; overflow: hidden; background: radial-gradient(120% 150% at 100% 0%, rgba(124,87,239,.10), transparent 52%), linear-gradient(180deg, #F4F1FD, #EAF0FB); border-bottom: 1px solid var(--line); padding: clamp(40px,5vw,72px) 0; } .doc-breadcrumb { font-size: 13px; font-weight: 600; color: var(--ink-faint); margin-bottom: 16px; } .doc-breadcrumb a { color: var(--violet-ink); } .doc-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: 18px; } .doc-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--ink); max-width: 880px; letter-spacing: -.02em; } .doc-hero .doc-sub { margin-top: 16px; font-size: clamp(1.05rem,1.4vw,1.25rem); color: var(--ink-soft); max-width: 760px; line-height: 1.55; } .doc-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13.5px; color: var(--ink-faint); font-weight: 600; } .doc-meta .dm { display: inline-flex; align-items: center; gap: 7px; } .doc-meta .dm .d { width: 7px; height: 7px; border-radius: 2px; background: var(--violet); } /* ---- Doc layout: sticky TOC + content ---- */ .doc-layout { display: grid; grid-template-columns: 248px 1fr; gap: clamp(32px,5vw,64px); padding-block: clamp(44px,5vw,72px); align-items: start; } .doc-toc { position: sticky; top: calc(var(--nav-h) + 28px); } .doc-toc .toc-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; } .doc-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--line); } .doc-toc a { display: block; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; color: var(--ink-soft); transition: color .2s, border-color .2s; line-height: 1.35; } .doc-toc a:hover { color: var(--ink); } .doc-toc a.active { color: var(--violet-ink); border-left-color: var(--violet); font-weight: 700; } /* ---- Prose ---- */ .doc-content { max-width: 760px; } .doc-content section { scroll-margin-top: calc(var(--nav-h) + 24px); margin-bottom: clamp(40px,5vw,60px); } .doc-content h2 { font-size: clamp(1.4rem,2.4vw,1.85rem); font-weight: 800; color: var(--ink); margin: 0 0 16px; letter-spacing: -.01em; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .doc-content h3 { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin: 28px 0 10px; } .doc-content p { color: var(--ink-soft); font-size: 16px; line-height: 1.68; margin: 0 0 16px; } .doc-content ul, .doc-content ol { color: var(--ink-soft); font-size: 16px; line-height: 1.6; padding-left: 4px; margin: 0 0 16px; } .doc-content ul { list-style: none; } .doc-content ul li { position: relative; padding-left: 26px; margin-bottom: 10px; } .doc-content ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, var(--blue), var(--violet)); } .doc-content strong { color: var(--ink); font-weight: 700; } .doc-content a.inline { color: var(--violet-ink); font-weight: 600; border-bottom: 1px solid rgba(108,92,231,.3); } /* numbered steps */ .doc-steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 12px; } .doc-steps li { position: relative; counter-increment: step; padding: 16px 18px 16px 60px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 15.5px; color: var(--ink); line-height: 1.5; } .doc-steps li::before { content: counter(step); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(150deg,#ECF1FD,#ECE7FC); color: #6A5AD8; font-weight: 800; font-size: 14px; display: grid; place-items: center; } .doc-steps li code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: 13px; } /* prereq / info box */ .doc-box { background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--violet); border-radius: var(--r-md); padding: 20px 22px; margin: 0 0 20px; } .doc-box h4 { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--violet-ink); } .doc-box ul { margin: 0; font-size: 15px; } /* screenshot / diagram placeholder */ .doc-shot { border: 1.5px dashed var(--blue-300); background: repeating-linear-gradient(45deg, rgba(108,92,231,.03) 0 12px, transparent 12px 24px), var(--surface-2); border-radius: var(--r-md); padding: 38px 24px; text-align: center; color: var(--ink-faint); font-size: 13.5px; font-weight: 600; margin: 0 0 20px; } .doc-shot .si { width: 38px; height: 38px; margin: 0 auto 10px; color: var(--blue-300); } /* table */ .doc-table-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--r-md); } table.doc-table { width: 100%; border-collapse: collapse; min-width: 460px; } table.doc-table th { background: var(--navy); color: #fff; text-align: left; font-size: 13px; font-weight: 700; padding: 12px 16px; } table.doc-table td { padding: 12px 16px; font-size: 14.5px; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); } table.doc-table tr:last-child td { border-bottom: 0; } table.doc-table tbody tr:nth-child(even) { background: var(--surface-2); } table.doc-table td:first-child, table.doc-table th:first-child { font-weight: 600; color: var(--ink); } /* pillar grid (whitepaper) */ .pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 20px; } .pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; } .pillar .pi { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(150deg,#ECF1FD,#ECE7FC); color: #6A5AD8; display: grid; place-items: center; margin-bottom: 12px; } .pillar h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--ink); } .pillar p { margin: 0; font-size: 13.6px; line-height: 1.5; } /* doc footer CTA */ .doc-cta { background: radial-gradient(120% 150% at 0% 0%, rgba(124,87,239,.30), transparent 50%), linear-gradient(130deg, #0E2D38, #1A1C49); color: #fff; border-radius: var(--r-xl); padding: clamp(32px,4vw,48px); margin: clamp(20px,4vw,40px) 0; text-align: center; } .doc-cta h3 { color: #fff; font-size: clamp(1.3rem,2vw,1.7rem); margin: 0 0 10px; } .doc-cta p { color: rgba(255,255,255,.82); margin: 0 0 22px; } @media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } .doc-toc { display: none; } .pillar-grid { grid-template-columns: 1fr; } } /* ============================================================ Datasheet — printable one-pager ============================================================ */ .sheet { max-width: 920px; margin: clamp(32px,5vw,56px) auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; } .sheet-head { background: radial-gradient(120% 150% at 100% 0%, rgba(124,87,239,.34), transparent 50%), linear-gradient(130deg, #0E2D38, #1A1C49); color: #fff; padding: clamp(28px,4vw,44px); } .sheet-head img { height: 30px; margin-bottom: 18px; } .sheet-head .sh-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #B7A8FF; } .sheet-head .sh-tag { font-size: clamp(1.3rem,2.4vw,1.95rem); font-weight: 800; line-height: 1.25; margin-top: 14px; max-width: 760px; letter-spacing: -.01em; } .sheet-body { padding: clamp(26px,4vw,42px); } .sheet-body h3 { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-ink); margin: 0 0 16px; padding-bottom: 0; border: 0; } .sheet-block { margin-bottom: clamp(30px,4vw,42px); } .problem-list { display: grid; gap: 12px; } .problem-row { display: flex; gap: 14px; align-items: flex-start; } .problem-row .pr-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; background: #FBEBDC; color: #DD6F23; display: grid; place-items: center; } .problem-row p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.5; } .ds-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ds-feat { border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; background: var(--surface-2); } .ds-feat .df-ic { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(150deg,#ECF1FD,#ECE7FC); color: #6A5AD8; display: grid; place-items: center; margin-bottom: 12px; } .ds-feat h4 { margin: 0 0 5px; font-size: 15px; font-weight: 800; color: var(--ink); } .ds-feat p { margin: 0; font-size: 13.6px; color: var(--ink-soft); line-height: 1.5; } .aws-strip { display: flex; flex-wrap: wrap; gap: 8px; } .aws-chip { font-size: 13px; font-weight: 700; color: var(--blue-ink); background: var(--blue-100); border-radius: var(--r-pill); padding: 7px 14px; } .region-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } .region-line { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink); font-weight: 600; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); } .region-line .fl { font-size: 1.3rem; } .region-line .rc { color: var(--ink-faint); font-weight: 500; font-size: 13px; margin-left: auto; } .ds-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } .ds-tier { border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; text-align: center; } .ds-tier.mid { border-color: transparent; background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; border: 1.5px solid transparent; } .ds-tier h4 { margin: 0 0 12px; font-size: 1.1rem; color: var(--ink); } .ds-tier p { margin: 4px 0; font-size: 13.5px; color: var(--ink-soft); } .sheet-foot { background: var(--navy); color: rgba(255,255,255,.8); padding: 24px clamp(26px,4vw,42px); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 13.5px; } .sheet-foot .sf-aws { color: #FF9900; font-weight: 800; } .sheet-foot a { color: #fff; font-weight: 600; } @media (max-width: 700px) { .ds-feat-grid, .region-list, .ds-tiers { grid-template-columns: 1fr; } } /* ============================================================ Mock UI screenshots (setup guide) — brand-colored ============================================================ */ .mock { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-md); background: #fff; margin: 0 0 22px; } .mock-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); } .mock-bar .dots { display: flex; gap: 6px; } .mock-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; } .mock-bar .mb-title { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-left: 8px; } .mock-body { padding: 20px 22px; } .mock-field { margin-bottom: 16px; } .mock-field:last-child { margin-bottom: 0; } .mock-field .ml { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 7px; display: block; } .mock-input { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 8px; padding: 11px 13px; font-size: 13px; color: var(--ink-soft); } .mock-input.focus { border-color: var(--violet); background: #fff; box-shadow: 0 0 0 4px rgba(108,92,231,.1); } .mock-input .key { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--violet-ink); font-weight: 600; letter-spacing: .02em; } .mock-input .caret { color: var(--ink-faint); } .mock-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink); font-weight: 600; } .mock-row:last-child { border-bottom: 0; } .mock-toggle { width: 40px; height: 23px; border-radius: 999px; background: var(--grad-soft); position: relative; flex: none; } .mock-toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .mock-toggle.off { background: var(--line); } .mock-toggle.off::after { right: auto; left: 3px; } .mock-pill { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: #E3F5EC; color: #1F8A5B; } .mock-pill.violet { background: var(--violet-100); color: var(--violet-ink); } .mock-btn { display: inline-block; background: var(--grad-soft); color: #fff; font-size: 12.5px; font-weight: 700; padding: 10px 18px; border-radius: 8px; margin-top: 18px; } .mock-cap { text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--ink-faint); padding: 9px; background: var(--surface-2); border-top: 1px solid var(--line); } .mock-video { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; } .mock-thumb { flex: none; width: 92px; height: 56px; border-radius: 7px; background: linear-gradient(150deg, #2E8AD0, #6C5CE7); display: grid; place-items: center; } .mock-thumb svg { width: 22px; height: 22px; } .mock-video .mv-name { font-size: 13.5px; font-weight: 700; color: var(--ink); } .mock-video .mv-sub { font-size: 12px; color: var(--ink-faint); margin-top: 3px; } /* ============================================================ Footer Partner Badges — official logos on tight white card ============================================================ */ .footer-badges { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin-top: 22px; } .footer-badges a { display: block; line-height: 0; } .footer-badges img { height: 32px; width: auto; display: block; background: #fff; padding: 4px; border-radius: 6px; box-sizing: content-box; } @media (max-width: 560px) { .footer-badges img { height: 30px; } } /* ============================================================ Additional Responsive Enhancements ============================================================ */ @media (max-width: 768px) { .h1 { font-size: 2rem; } .h2 { font-size: 1.6rem; } .section-pad { padding: 48px 0; } .contact-grid { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr; gap: 32px; } .footer-col { text-align: center; } .footer-badges { justify-content: center; } .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; } .trust-items { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 480px) { .h1 { font-size: 1.75rem; line-height: 1.2; } .lead { font-size: 1rem; } .btn { padding: 12px 20px; font-size: 14px; } .btn-sm { padding: 10px 16px; } .container { padding-inline: 16px; } .hero-copy { text-align: center; } .hero-cta { flex-direction: column; align-items: stretch; } .hero-tertiary { display: none; } .faq-q { font-size: 15px; padding: 16px; } } /* Improve touch targets for mobile */ @media (hover: none) and (pointer: coarse) { .btn, .nav-burger, .tab-btn, .faq-q { min-height: 44px; } .nav-links a, .footer-col a { padding: 8px 0; } } /* Print styles for datasheet/security pages */ @media print { .nav, .mobile-menu, .footer { display: none; } .section-pad { padding: 24px 0; } body { font-size: 11pt; } }