/* ========================================================================== CareerDoc — shared site chrome (header, pre-footer CTA, footer) used by index.html, blog.html and blog posts. ========================================================================== */ :root { --ink: #e8eef6; --ink-dim: #9fb0c4; --ink-faint: #6b7f96; --cyan: #33bcf8; --cyan-bright:#57c9fb; --navy: #1c4e9e; --line: rgba(159, 196, 232, .13); --glass: rgba(6, 10, 18, .55); --glass-firm: rgba(6, 10, 18, .74); --bg: #05070c; --shell: 1180px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; color: var(--ink); background: var(--bg); } a { color: inherit; text-decoration-color: rgba(51, 188, 248, .5); } a:hover { color: var(--cyan-bright); } h1, h2, h3, .brand, .foot-wordmark, .panel-h2 { font-family: 'Instrument Sans', 'Inter', -apple-system, sans-serif; } .eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); } .panel-body { margin: 14px 0 0; max-width: 46ch; font-size: 14.5px; line-height: 1.62; color: var(--ink-dim); } /* ========================================================================== AMBIENT 3D BACKGROUND (bg.js — FAQ / blog pages, ) ========================================================================== */ #bg-3d { position: fixed; inset: 0; z-index: 0; pointer-events: none; animation: bgfade 1.4s ease .25s both; } #bg-3d canvas { display: block; } #bg-scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(135% 95% at 82% 42%, transparent 0%, rgba(5, 7, 12, .28) 46%, rgba(5, 7, 12, .8) 100%), linear-gradient(to right, rgba(5, 7, 12, .96) 0%, rgba(5, 7, 12, .62) 44%, rgba(5, 7, 12, .08) 100%); } @keyframes bgfade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #bg-3d { animation: none; opacity: 1; } } /* pages with a background lift their content above the scrim */ body[data-bg] main, body[data-bg] article, body[data-bg] .page { position: relative; z-index: 2; } /* ---- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: background .16s ease, border-color .16s ease, transform .12s ease, color .16s ease; } .btn:active { transform: translateY(1px); } .btn-ghost { color: #cdd9e8; border-color: rgba(159, 196, 232, .28); background: transparent; } .btn-ghost:hover { border-color: rgba(159, 196, 232, .5); background: rgba(159, 196, 232, .07); } .btn-primary { color: #04121e; background: var(--cyan); } .btn-primary:hover { background: var(--cyan-bright); } .btn-onlight { color: #0b2a52; background: #fff; } .btn-onlight:hover { background: #eaf4fb; } /* ========================================================================== HEADER ========================================================================== */ #site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: 64px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: height .25s ease, background .25s ease, border-color .25s ease, opacity .7s ease .05s; } #site-header.tight { height: 56px; background: var(--glass-firm); border-bottom-color: var(--line); } .scroll-prog { position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--cyan); box-shadow: 0 0 8px rgba(51, 188, 248, .6); transition: width .1s linear; } body[data-progress="off"] .scroll-prog { display: none; } .hdr-inner { width: 100%; height: 100%; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); display: flex; align-items: center; gap: 26px; } .brand { display: inline-flex; align-items: center; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-decoration: none; flex: none; } .brand span { color: var(--cyan); } .brand-mark { flex: none; display: block; width: 22px; height: 22px; margin-right: 8px; } .nav-links { display: flex; align-items: center; gap: 22px; margin-right: auto; } .nav-links a { position: relative; font-size: 14px; font-weight: 500; color: var(--ink-dim); text-decoration: none; padding: 4px 0; transition: color .15s ease; } .nav-links a:hover, .nav-links a.active { color: var(--ink); } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--cyan); border-radius: 2px; } .hdr-actions { display: flex; align-items: center; gap: 12px; flex: none; } /* hamburger — hidden until narrow */ .hamburger { display: none; width: 40px; height: 40px; margin-left: auto; background: transparent; border: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .hamburger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; } .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- mobile overlay ---------------------------------------------------- */ .mobile-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(4, 7, 13, .975); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; flex-direction: column; justify-content: center; padding: 88px 34px 44px; opacity: 0; pointer-events: none; transition: opacity .24s ease; } .mobile-overlay.show { opacity: 1; pointer-events: auto; } .mobile-overlay nav { display: flex; flex-direction: column; gap: 2px; } .mobile-overlay nav a { font-size: 25px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 15px 0; border-bottom: 1px solid var(--line); } .mobile-actions { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .mobile-actions .btn { height: 48px; font-size: 15px; } /* ========================================================================== HERO — layered over the brain, sitting in the space the brain leaves. `--hp` (0 -> 1, set by site.js from scroll) drifts + dissolves it as page 2 begins, so it reads as moving with the brain's animation. ========================================================================== */ #hero { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; pointer-events: none; --hp: 0; } #hero.gone { visibility: hidden; } .hero-inner { position: relative; width: min(44%, 600px); margin-left: clamp(18px, 4.5vw, 64px); will-change: transform, opacity; transform: translate3d(calc(var(--hp) * -72px), calc(var(--hp) * -48px), 0); opacity: calc(1 - var(--hp) * 1.4); filter: blur(calc(var(--hp) * 3px)); } /* keep the enlarged hero copy readable where it now reaches over the shape */ .hero-inner::before { content: ""; position: absolute; inset: -40px -140px -30px -48px; z-index: -1; background: radial-gradient(115% 78% at 22% 44%, rgba(5, 7, 12, .94) 0%, rgba(5, 7, 12, .6) 52%, rgba(5, 7, 12, 0) 84%); pointer-events: none; } .hero-inner h1 { font-size: clamp(46px, 6.6vw, 80px); font-weight: 700; letter-spacing: -.035em; line-height: 1.03; color: #f4f8fd; margin: 0; text-shadow: 0 2px 30px rgba(5, 7, 12, .65); } .hero-inner h1 .hi-accent { color: var(--cyan); text-shadow: 0 0 34px rgba(51, 188, 248, .45), 0 2px 30px rgba(5, 7, 12, .65); } .hero-inner p { margin: 22px 0 0; max-width: 42ch; font-size: clamp(16px, 1.8vw, 21px); line-height: 1.55; color: #d6e1ee; text-shadow: 0 1px 20px rgba(5, 7, 12, .85), 0 0 4px rgba(5, 7, 12, .6); } .hero-inner p .hi-accent { color: var(--cyan-bright); font-weight: 600; } /* the job-description box — the primary conversion surface, so make it the loud thing */ .hero-search { margin-top: 26px; max-width: 384px; pointer-events: auto; display: flex; flex-direction: column; gap: 9px; padding: 14px; background: rgba(9, 15, 26, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(51, 188, 248, .38); border-radius: 15px; box-shadow: 0 0 0 4px rgba(51, 188, 248, .08), 0 26px 70px -20px rgba(0, 0, 0, .75), 0 0 42px -12px rgba(51, 188, 248, .35); transition: border-color .18s ease, box-shadow .18s ease; } .hero-search:focus-within { border-color: rgba(51, 188, 248, .7); box-shadow: 0 0 0 4px rgba(51, 188, 248, .14), 0 26px 70px -20px rgba(0, 0, 0, .75), 0 0 54px -10px rgba(51, 188, 248, .5); } .hero-search-kicker { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cyan); } .hero-search textarea { width: 100%; resize: none; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; padding: 4px 6px; max-height: 132px; } .hero-search textarea:focus { outline: none; } .hero-search textarea::placeholder { color: var(--ink-faint); } .hero-search .btn { align-self: stretch; height: 44px; font-size: 15px; } .hero-search-note { margin: 10px 0 0 !important; font-size: 12px; color: var(--ink-faint) !important; max-width: 384px; } /* ========================================================================== FEATURES — pinned over the brain while it shatters (page 3). `--fp` (0 -> 1 -> 0, set by site.js from window.__morphP) fades the panel in with the burst and out as the pieces gather into the bulb. The panel stays opaque enough to read, translucent enough that the shattered brain reads through it. ========================================================================== */ /* ========================================================================== EDGE STAGES — tailoring / how-it-works / integrations / pricing. Every overlay anchors to the TOP and BOTTOM edges only — the centre, where the brain/bulb/globe sits, always stays clear. --fp (feature-stage) / --sp (the rest) are driven from window.__morphP in site.js. ========================================================================== */ #feature-stage, #bulb-stage, #globe-stage, #logo-stage { position: fixed; inset: 0; z-index: 42; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 92px 20px 34px; pointer-events: none; } #feature-stage { --fp: 0; opacity: var(--fp); } #bulb-stage, #globe-stage, #logo-stage { --sp: 0; opacity: var(--sp); } #feature-stage.gone, #bulb-stage.gone, #globe-stage.gone, #logo-stage.gone { visibility: hidden; } .feature-panel, .strip { width: min(1040px, 96vw); max-height: 30vh; overflow-y: auto; pointer-events: auto; padding: clamp(16px, 2.4vw, 26px) clamp(20px, 3vw, 32px); background: rgba(7, 11, 19, .88); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(159, 196, 232, .17); border-radius: 22px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8); } .feature-panel.edge-top { transform: translateY(calc((1 - var(--fp)) * -16px)); } .feature-panel.edge-bottom { transform: translateY(calc((1 - var(--fp)) * 16px)); } .strip.edge-top { transform: translateY(calc((1 - var(--sp)) * -16px)); } .strip.edge-bottom { transform: translateY(calc((1 - var(--sp)) * 16px)); } .feature-panel h2, .strip h2 { margin: 6px 0 0; max-width: 40ch; font-size: clamp(19px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; color: #f4f8fd; } .feature-panel .lede, .strip p { margin: 8px 0 0; max-width: 64ch; font-size: clamp(13px, 1.1vw, 14.5px); line-height: 1.5; color: var(--ink-dim); } .feature-grid { margin-top: clamp(14px, 2vw, 20px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(159, 196, 232, .14); border: 1px solid rgba(159, 196, 232, .14); border-radius: 14px; overflow: hidden; } .feature-card { background: rgba(9, 13, 21, .82); padding: 13px 15px 14px; } .feature-card:hover { background: rgba(13, 19, 29, .9); } .feature-card .num { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--cyan); font-variant-numeric: tabular-nums; } .feature-card h3 { margin: 6px 0 4px; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); } .feature-card p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); } .fit-strip { margin-top: clamp(10px, 1.6vw, 16px); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; background: rgba(51, 188, 248, .07); border: 1px solid rgba(51, 188, 248, .2); border-radius: 14px; } .fit-num { font-weight: 700; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; } .fit-track { flex: 1 1 120px; height: 6px; border-radius: 99px; background: rgba(159, 196, 232, .16); overflow: hidden; position: relative; } .fit-fill { position: absolute; inset: 0; width: 91%; border-radius: 99px; background: linear-gradient(90deg, var(--navy), var(--cyan)); } .fit-label { font-size: 11.5px; color: var(--ink-faint); flex: 1 1 100%; order: 4; } @media (min-width: 560px) { .fit-label { flex: none; order: 0; margin-left: 6px; } } .side-cta { margin-top: 22px; } /* PAGE 3 (tailoring) — one centred glassmorphic card. The shattered brain stays visible through the blur; the frost lifts the text off the debris. */ #feature-stage { justify-content: center; } .tail-card { pointer-events: auto; text-align: center; width: min(1000px, 95vw); max-height: calc(100dvh - 118px); overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: clamp(32px, 4vw, 56px) clamp(28px, 4.4vw, 62px); background: rgba(7, 11, 19, .44); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(159, 196, 232, .18); border-radius: 26px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05); transform: translateY(calc((1 - var(--fp)) * 20px)); } .tail-kicker { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin: 0 0 13px; } .tail-headline { margin: 0 0 14px; max-width: 24ch; font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); font-family: 'Instrument Sans', 'Inter', -apple-system, sans-serif; } .tail-body { margin: 0 0 32px; max-width: 46ch; font-size: 16px; line-height: 1.6; font-weight: 500; color: #d4deeb; } .tail-frame { position: relative; width: 100%; text-align: left; border-radius: 14px; overflow: hidden; background: rgba(9, 13, 21, .5); box-shadow: 0 0 48px -14px rgba(51, 188, 248, .26); } .tail-dots { position: absolute; top: 13px; left: 14px; display: flex; gap: 6px; z-index: 2; } .tail-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(159, 196, 232, .35); } .tail-cols { display: flex; padding-top: 46px; } .tail-col { flex: 1; min-width: 0; padding: 0 26px 30px; } .tail-col .num { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; color: var(--cyan); margin-bottom: 11px; } .tail-col h4 { margin: 0 0 8px; font-size: 17px; font-weight: 650; color: var(--ink); line-height: 1.3; } .tail-col p { margin: 0; font-size: 14px; line-height: 1.55; font-weight: 450; color: #c2cddc; } @media (max-width: 720px) { .tail-cols { flex-direction: column; padding-top: 34px; } .tail-col { padding: 16px 22px; } } /* PAGE 5 (globe) — a radial constellation: the CareerDoc mark at the centre, the real channels around it as dark-glass chips, thin cyan connector lines with pulses flowing inward. Laid out on a 1600x1000 reference canvas (#connect-world) that index.html scales/centres to fit the viewport. */ #connect-world { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; } #connect-lines { position: absolute; inset: 0; overflow: visible; } #connect-lines line { stroke: rgba(51, 188, 248, .42); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(51, 188, 248, .35)); transition: stroke-dashoffset .95s cubic-bezier(.22,.7,.2,1); } #connect-lines circle.cn-pulse { fill: #57c9fb; filter: drop-shadow(0 0 6px rgba(87, 201, 251, .95)); opacity: 0; transition: opacity .4s ease; } #connect-world.cn-live #connect-lines circle.cn-pulse { opacity: 1; } /* centre hub */ #cn-hub { position: absolute; transform: translate(-50%, -50%); width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 38% 32%, rgba(51, 188, 248, .22), rgba(9, 14, 22, .9) 70%); border: 1px solid rgba(51, 188, 248, .45); box-shadow: 0 0 66px -6px rgba(51, 188, 248, .5), 0 20px 50px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .07); } #cn-hub::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(51, 188, 248, .4); animation: cn-breathe 3.8s ease-in-out infinite; } @keyframes cn-breathe { 0%, 100% { transform: scale(1); opacity: .8; box-shadow: 0 0 0 0 rgba(51, 188, 248, .3); } 50% { transform: scale(1.14); opacity: 0; box-shadow: 0 0 0 18px rgba(51, 188, 248, 0); } } .cn-hub-mark { width: 54px; height: 54px; filter: drop-shadow(0 0 12px rgba(51, 188, 248, .5)); } /* channel chips */ .cn2-node { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 11px; background: rgba(9, 14, 22, .74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(51, 188, 248, .28); border-radius: 999px; box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05); white-space: nowrap; /* hidden until the hub "sends" the connection out to it */ opacity: 0; transform: translate(-50%, -50%) scale(.82); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); } #connect-world.cn-live .cn2-node { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: cn-float 6s ease-in-out infinite; } #connect-world.cn-live .cn2-node[data-ch="ext"] { transition-delay: .15s; animation-delay: 0s; } #connect-world.cn-live .cn2-node[data-ch="gmail"] { transition-delay: .30s; animation-delay: -1.2s; } #connect-world.cn-live .cn2-node[data-ch="wa"] { transition-delay: .45s; animation-delay: -2.4s; } #connect-world.cn-live .cn2-node[data-ch="tg"] { transition-delay: .60s; animation-delay: -3.6s; } #connect-world.cn-live .cn2-node[data-ch="cal"] { transition-delay: .75s; animation-delay: -4.8s; } @keyframes cn-float { 0%, 100% { transform: translate(-50%, calc(-50% - 4px)) scale(1); } 50% { transform: translate(-50%, calc(-50% + 4px)) scale(1); } } .cn2-ic { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(51, 188, 248, .12); color: #7fd4ff; } .cn2-ic svg { width: 19px; height: 19px; } .cn2-lb { font-size: 14.5px; font-weight: 600; color: #e2ebf5; letter-spacing: -.01em; } .cn-header { position: absolute; transform: translate(-50%, -50%); width: 640px; max-width: 90vw; text-align: center; font-family: 'Instrument Sans', 'Inter', sans-serif; font-weight: 600; font-size: 34px; line-height: 1.18; letter-spacing: -.025em; color: #f4f8fd; text-shadow: 0 2px 26px rgba(0, 0, 0, .92); } .cn-sub { position: absolute; transform: translate(-50%, -50%); width: 560px; max-width: 88vw; text-align: center; font-size: 16px; line-height: 1.55; color: #c2cedd; text-shadow: 0 1px 18px rgba(0, 0, 0, .9); } @media (prefers-reduced-motion: reduce) { #cn-hub::after { animation: none; } #connect-world .cn2-node { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: none; } } /* PAGE 3 (bulb / "how it works") — the flow-steps diagram, recoloured to the site palette, positioned on a 1600x1000 reference canvas (#flow-world) that index.html scales/centres to the viewport. Composed in bulb-view-studio.html, then baked in here. */ #flow-world { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; } #flow-block { --accent: #33bcf8; --line: #7cc0ea; --line-glow: rgba(51, 188, 248, .4); --ftext: #eef4fc; --fmuted: #9fb0c4; --badge-bg: rgba(9, 13, 21, .9); --badge-border: rgba(159, 196, 232, .28); position: absolute; width: 560px; transform-origin: 0 0; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; color: var(--ftext); } #flow-block .kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; } #flow-block h2 { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 52px; max-width: 18ch; color: var(--ftext); text-shadow: 0 2px 20px rgba(0, 0, 0, .8); } #flow-block .flow { position: relative; } #flow-block svg.chart { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } #flow-block .chart path.trail { fill: none; stroke: var(--badge-border); stroke-width: 3; } #flow-block .chart path.line { fill: none; stroke: var(--line); stroke-width: 3.5; filter: drop-shadow(0 0 10px var(--line-glow)); } #flow-block .chart circle.marker { fill: var(--accent); filter: drop-shadow(0 0 12px rgba(51, 188, 248, .8)); } #flow-block .steps { position: relative; display: flex; flex-direction: column; gap: 44px; z-index: 1; } #flow-block .step { width: min(400px, 80%); display: flex; align-items: flex-start; gap: 16px; opacity: 0; transition: opacity .5s ease, transform .5s ease; } #flow-block .step.revealed { opacity: 1; } #flow-block .step:nth-child(1) { align-self: flex-start; } #flow-block .step:nth-child(2) { align-self: flex-end; transform: translateY(24px); } #flow-block .step:nth-child(3) { align-self: flex-start; transform: translateY(-16px); } #flow-block .step:nth-child(4) { align-self: flex-end; transform: translateY(18px); } #flow-block .badge { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--badge-bg); border: 2px solid var(--badge-border); display: flex; align-items: center; justify-content: center; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; color: var(--ftext); position: relative; z-index: 2; transition: color .4s ease, border-color .4s ease, background .4s ease; } #flow-block .step.revealed .badge { color: #04121e; background: var(--accent); border-color: var(--accent); } #flow-block .content { background: rgba(7, 11, 19, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(159, 196, 232, .16); border-radius: 12px; padding: 14px 18px; } #flow-block .content h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ftext); } #flow-block .content p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--fmuted); max-width: 34ch; } @media (prefers-reduced-motion: reduce) { #flow-block .step { transition: none; opacity: 1; } } /* PAGE 2 (the camera flight) — the pipeline board. copy + a framed dashboard shot, pinned while the brain flies past; driven by __flightFrac (in) and __morphP (out). */ #flight-stage { position: fixed; inset: 0; z-index: 42; pointer-events: none; --flp: 0; opacity: var(--flp); } #flight-stage.gone { visibility: hidden; } /* the panel is placed on a 1600x1000 reference canvas (#flight-world) that index.html scales/centres to the viewport — position + scale baked from flight-config.json (composed in flight-view-studio.html). */ #flight-world { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; } .flight-panel { position: absolute; left: 901px; top: 250px; transform-origin: 0 0; transform: scale(1.432) translateY(calc((1 - var(--flp)) * 14px)); width: 470px; pointer-events: auto; display: flex; flex-direction: column; gap: 20px; padding: 28px; background: rgba(7, 11, 19, .88); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(159, 196, 232, .16); border-radius: 22px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8); } .flight-copy h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.16; color: #f4f8fd; font-family: 'Instrument Sans', 'Inter', -apple-system, sans-serif; } .flight-copy p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.62; color: var(--ink-dim); } .flight-shot { margin: 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(159, 196, 232, .2); box-shadow: 0 0 44px -12px rgba(51, 188, 248, .28), 0 24px 60px -24px rgba(0, 0, 0, .7); } .flight-shot .shot-dots { position: absolute; top: 9px; left: 12px; display: flex; gap: 5px; z-index: 2; } .flight-shot .shot-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(159, 196, 232, .35); } .flight-shot img { display: block; width: 100%; height: auto; } @media (max-width: 860px) { /* phones: drop the reference-canvas placement, go back to a centred card */ #flight-stage { display: flex; align-items: center; justify-content: center; padding: 84px 24px 40px; } #flight-world { position: static; width: 100%; height: auto; transform: none !important; display: flex; justify-content: center; } .flight-panel { position: static; transform: translateY(calc((1 - var(--flp)) * 18px)); left: auto; top: auto; width: min(520px, 100%); gap: 18px; } .flight-copy h2 { font-size: clamp(21px, 6vw, 26px); } } /* step row — "how it works": one human figure, four stages, a badge per step. nowrap + horizontal scroll on cramped widths so it can never grow to 2 rows and blow the strip's height budget. */ .step-row { margin-top: clamp(12px, 1.8vw, 18px); display: flex; align-items: flex-start; justify-content: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .step-chip { flex: 0 0 156px; padding: 12px 12px 12px; background: rgba(159, 196, 232, .05); border: 1px solid rgba(159, 196, 232, .14); border-radius: 14px; text-align: center; } .step-arrow { flex: none; align-self: center; margin-top: 30px; color: var(--ink-faint); font-size: 18px; } .dnum { display: block; font-size: 10.5px; font-weight: 700; color: var(--cyan); letter-spacing: .08em; } .human { position: relative; width: 38px; height: 48px; margin: 8px auto 4px; } .human .head { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(180deg, var(--cyan-bright), var(--cyan)); } .human .body { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 31px; height: 25px; border-radius: 16px 16px 5px 5px; background: linear-gradient(180deg, var(--navy), #17407e); } .human .badge { position: absolute; right: -6px; bottom: 10px; width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #0b111c; border: 1px solid rgba(51, 188, 248, .5); box-shadow: 0 4px 12px -3px rgba(0, 0, 0, .6); } .badge-idle::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); } .badge-scan { position: relative; } .badge-scan::before { content: ""; width: 8px; height: 8px; border: 2px solid var(--cyan); border-radius: 50%; } .badge-scan::after { content: ""; position: absolute; width: 5px; height: 2px; background: var(--cyan); transform: rotate(45deg) translate(3px, 3px); } .badge-fill::before { content: ""; width: 10px; height: 7px; background: linear-gradient(var(--cyan) 2px, transparent 2px) top, linear-gradient(var(--cyan) 2px, transparent 2px) bottom; background-size: 100% 4px; background-repeat: no-repeat; } .badge-check::before { content: ""; width: 7px; height: 4px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg) translateY(-1px); } .step-chip b { display: block; margin: 3px 0 3px; font-size: 13px; font-weight: 650; color: var(--ink); } .step-chip p { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-dim); } /* net row — integrations, a plain connected chain, nothing sitting at screen centre */ .net-row { margin-top: clamp(12px, 1.8vw, 18px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .net-chip { padding: 7px 14px; border-radius: 999px; white-space: nowrap; background: rgba(255, 255, 255, .03); border: 1px solid rgba(159, 196, 232, .18); font-size: 12px; font-weight: 600; color: var(--ink); } .net-chip.net-lead { background: rgba(51, 188, 248, .14); border-color: rgba(51, 188, 248, .45); color: var(--cyan); font-weight: 700; } .net-link { color: var(--ink-faint); font-size: 13px; } /* pricing tiers — real markup, given real room, no screenshot */ .tier-row { margin-top: clamp(12px, 1.8vw, 20px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 18px); } .tier-card { padding: clamp(13px, 1.8vw, 20px) clamp(13px, 1.6vw, 18px); border-radius: 16px; background: rgba(159, 196, 232, .05); border: 1px solid rgba(159, 196, 232, .14); display: flex; flex-direction: column; gap: 6px; min-height: 0; } .tier-card.tier-active { background: rgba(51, 188, 248, .1); border-color: rgba(51, 188, 248, .4); } .tier-card.tier-ghost { opacity: .6; } .tier-name { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink); } .tier-price { font-size: clamp(21px, 2.4vw, 28px); font-weight: 700; color: var(--ink); } .tier-feats { margin: 2px 0 0; padding: 0; list-style: none; font-size: 11.5px; line-height: 1.5; color: var(--ink-dim); display: flex; flex-direction: column; gap: 3px; } .tier-feats li::before { content: "\2713\a0 "; color: var(--cyan); } .tier-tag { margin-top: auto; padding-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); } .tier-tag-ghost { color: var(--ink-faint); } /* PAGE 7 (logo) — one centred, animated CTA plaque over the re-formed logo. */ #logo-stage { justify-content: center; } .cta-plaque { pointer-events: auto; position: relative; overflow: hidden; text-align: center; width: min(560px, 92vw); display: flex; flex-direction: column; align-items: center; padding: clamp(34px, 4.6vw, 56px) clamp(28px, 4.4vw, 54px); background: linear-gradient(160deg, rgba(11, 17, 27, .82), rgba(7, 11, 19, .78)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(159, 196, 232, .18); border-radius: 26px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(51, 188, 248, .35), inset 0 1px 0 rgba(255, 255, 255, .06); transform: translateY(calc((1 - var(--sp)) * 24px)); animation: cta-float 6s ease-in-out infinite; } @keyframes cta-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } } /* animated glow ring */ .cta-plaque::after { content: ""; position: absolute; inset: -1px; border-radius: 26px; padding: 1px; background: linear-gradient(120deg, transparent 20%, rgba(51, 188, 248, .55), transparent 80%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; background-size: 250% 100%; animation: cta-ring 4.5s linear infinite; pointer-events: none; } @keyframes cta-ring { to { background-position: -250% 0; } } /* sheen sweep */ .cta-sheen { position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .09), transparent); transform: skewX(-18deg); animation: cta-sheen 5.5s ease-in-out infinite; } @keyframes cta-sheen { 0%, 55% { left: -60%; } 78%, 100% { left: 130%; } } .cta-plaque h2 { margin: 0 0 12px; max-width: 20ch; font-size: clamp(24px, 3.1vw, 33px); font-weight: 700; letter-spacing: -.025em; line-height: 1.14; color: var(--ink); font-family: 'Instrument Sans', 'Inter', -apple-system, sans-serif; } .cta-plaque > p { margin: 0 0 24px; max-width: 40ch; font-size: 15px; line-height: 1.6; font-weight: 450; color: #cdd8e6; } .cta-plaque-btn { font-size: 15px; padding: 12px 26px; } .cta-fine { margin: 16px 0 0 !important; font-size: 12px; color: var(--ink-faint); letter-spacing: .01em; } @media (prefers-reduced-motion: reduce) { .cta-plaque, .cta-plaque::after, .cta-sheen { animation: none; } .cta-sheen { display: none; } } /* ========================================================================== FOOTER — a single line ========================================================================== */ .site-footer { position: relative; z-index: 2; background: #070b12; border-top: 1px solid var(--line); padding: 20px 24px; } .foot-line-nav { max-width: var(--shell); margin: 0 auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 13px; } .foot-line-nav a { color: var(--ink-dim); text-decoration: none; transition: color .15s ease; } .foot-line-nav a:hover { color: var(--cyan); } .foot-wordmark { display: inline-flex; align-items: center; gap: 7px; color: var(--ink) !important; font-weight: 700; letter-spacing: -.01em; } .foot-wordmark svg { width: 15px; height: 15px; } .foot-copy { color: var(--ink-faint); margin-left: auto; } /* ========================================================================== REVEAL — on pages with the brain, the chrome fades in only once it has formed ========================================================================== */ body.has-brain #site-header, body.has-brain #hero, body.has-brain .site-footer { opacity: 0; } body.has-brain #site-header { pointer-events: none; } body.has-brain.site-ready #site-header, body.has-brain.site-ready #hero, body.has-brain.site-ready .site-footer { opacity: 1; } body.has-brain.site-ready #site-header { pointer-events: auto; } body.has-brain #hero { transition: opacity .8s ease .15s; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 900px) { #hero { align-items: flex-start; padding-top: 84px; } .hero-inner { width: min(640px, calc(100% - 40px)); margin: 0 auto; } .hero-inner h1 { font-size: clamp(40px, 7.6vw, 64px); } .hero-inner p { max-width: none; font-size: clamp(16px, 2.4vw, 20px); } .feature-grid { grid-template-columns: repeat(2, 1fr); } .strip { width: 100%; } .tier-row { grid-template-columns: 1fr; } .step-row { gap: 14px; } .step-arrow { display: none; } .step-chip { max-width: none; flex: 1 1 100%; } } @media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .nav-links, .hdr-actions { display: none; } .hamburger { display: flex; } .hdr-inner { gap: 0; } .foot-line-nav { gap: 14px 18px; } .foot-copy { margin-left: 0; width: 100%; } /* phone: content is full-width, so keep the background shape a faint texture only */ #bg-scrim { background: linear-gradient(to bottom, rgba(5, 7, 12, .84) 0%, rgba(5, 7, 12, .93) 60%, rgba(5, 7, 12, .97) 100%); } /* hero: full-width, and the note needs to survive sitting over the brain */ .hero-inner { width: calc(100% - 36px); } .hero-inner h1 { font-size: clamp(34px, 10vw, 52px); } .hero-inner p { font-size: clamp(15px, 4.2vw, 18px); } .hero-search { max-width: none; } .hero-search-note { text-shadow: 0 1px 12px rgba(5, 7, 12, .95), 0 0 3px rgba(5, 7, 12, .9); } /* the pinned feature panel: tighter so it fits ~one screen; if it still overflows it scrolls internally (site.js lets the gesture through) */ .feature-panel { padding: 20px 16px; max-height: calc(100dvh - 96px); } .feature-panel h2 { font-size: clamp(21px, 6vw, 27px); } .feature-panel .lede { font-size: 13.5px; } .feature-grid { margin-top: 18px; } .feature-card { padding: 15px 15px 17px; } .feature-card h3 { margin: 7px 0 5px; font-size: 15px; } .feature-card p { font-size: 12.5px; line-height: 1.5; } /* testimonial name labels: shorter radial push + narrower role so they don't clip */ .tname .r { max-width: 130px; } .strip { padding: 20px 16px; max-height: calc(100dvh - 112px); overflow-y: auto; } .feature-panel h2, .strip h2 { font-size: clamp(21px, 6vw, 25px); } #feature-stage, #bulb-stage, #globe-stage, #logo-stage { padding-top: 84px; gap: 14px; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } html { scroll-behavior: auto !important; } }