/* ============================================================ Arimini — The Swarm · 04-particles LIGHT site — teal ink swarm on warm paper; type stays airy. ============================================================ */ :root { /* light palette — var NAMES kept from the dark build so every usage below still resolves: --abyss is now the PAPER ground, --pale is now the INK heading color, --mint the green accent. */ --abyss: #F7F6F1; --ink: #FFFFFF; --line: #DCE4DD; --mint: #17A47E; --teal: #0F8A69; --deep-teal: #0B5C46; --pale: #10201B; --body: #586B62; --node: #063428; --font-d: 'Outfit', system-ui, 'Helvetica Neue', Arial, sans-serif; --font-m: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { overflow-x: clip; scrollbar-color: var(--line) var(--abyss); } body { background: var(--abyss); color: var(--body); font-family: var(--font-d); font-weight: 400; font-size: 1rem; line-height: 1.65; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--mint); color: #FFFFFF; } /* light scrollbar (WebKit) */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--abyss); } ::-webkit-scrollbar-thumb { background: #CBD6CE; border-radius: 5px; border: 2px solid var(--abyss); } ::-webkit-scrollbar-thumb:hover { background: var(--teal); } a { color: var(--teal); text-decoration: none; } :focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 2px; } /* anti-flash gate — main.js takes over with inline styles, the inline script removes the class at 2.5 s regardless */ .js-anim [data-reveal] { opacity: 0; } /* custom cursor active (set from JS, fine pointers only) */ html.has-cursor, html.has-cursor * { cursor: none !important; } /* ---------- fixed scenery layers ---------- */ .backdrop { position: fixed; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 50% 18%, #ECF3ED 0%, rgba(236, 243, 237, 0) 55%), radial-gradient(90% 70% at 50% 110%, #F1EEE4 0%, rgba(241, 238, 228, 0) 60%), var(--abyss); pointer-events: none; } /* if WebGL is unavailable the backdrop stands in for the swarm */ html.no-gl .backdrop { background: radial-gradient(46% 34% at 50% 40%, rgba(23, 164, 126, 0.16) 0%, rgba(23, 164, 126, 0) 70%), radial-gradient(30% 22% at 50% 42%, rgba(11, 92, 70, 0.2) 0%, rgba(11, 92, 70, 0) 72%), radial-gradient(120% 90% at 50% 18%, #ECF3ED 0%, rgba(236, 243, 237, 0) 55%), var(--abyss); } #swarm { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; } .vignette { position: fixed; inset: 0; z-index: 2; background: radial-gradient(130% 110% at 50% 50%, rgba(16, 32, 27, 0) 55%, rgba(16, 32, 27, 0.1) 100%); pointer-events: none; } .grain { position: fixed; inset: -40px; z-index: 60; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* ---------- chrome: index link, site tag, rail, progress ---------- */ .index-link { position: fixed; top: 22px; left: 24px; z-index: 40; font-family: var(--font-m); font-size: 11px; letter-spacing: 0.18em; color: var(--pale); opacity: 0.38; transition: opacity 0.4s var(--ease), color 0.4s var(--ease); } .index-link:hover, .index-link:focus-visible { opacity: 1; color: var(--teal); } .site-tag { position: fixed; top: 24px; right: 26px; z-index: 40; font-family: var(--font-m); font-size: 11px; letter-spacing: 0.24em; color: var(--body); opacity: 0.32; } .rail { position: fixed; left: 30px; top: 0; bottom: 0; z-index: 5; pointer-events: none; } .rail-label { position: absolute; left: 0; transform: translateY(-50%); writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-m); font-size: 11px; letter-spacing: 0.32em; color: var(--teal); opacity: 0.16; transition: opacity 0.9s var(--ease), color 0.9s var(--ease); white-space: nowrap; } .rail-label[data-rail="chaos"] { top: 26%; } .rail-label[data-rail="system"] { top: 42%; } .rail-label[data-rail="scale"] { top: 58%; } .rail-label[data-rail="signal"] { top: 74%; } .rail-label.is-active { opacity: 0.68; } .progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 2px; pointer-events: none; } .progress-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--deep-teal), var(--teal) 55%, var(--mint)); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } /* ---------- custom cursor ---------- */ .cursor { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 0.35s var(--ease); } .cursor.is-on { opacity: 1; } .cursor-ring, .cursor-dot { position: fixed; top: 0; left: 0; will-change: transform; } .cursor-ring-i { display: block; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(15, 138, 105, 0.55); border-radius: 50%; transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease); } .cursor-dot-i { display: block; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgba(15, 138, 105, 0.45); transition: transform 0.3s var(--ease); } .cursor.is-link .cursor-ring-i { transform: scale(1.7); border-color: rgba(15, 138, 105, 0.9); background: rgba(15, 138, 105, 0.06); } .cursor.is-link .cursor-dot-i { transform: scale(0.5); } .cursor.is-down .cursor-ring-i { transform: scale(0.82); } @media (pointer: coarse) { .cursor { display: none; } } /* ---------- shared typography ---------- */ main { position: relative; z-index: 3; } .eyebrow { font-family: var(--font-m); font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--teal); } .display { font-weight: 200; font-size: clamp(2.5rem, 5.6vw, 5.4rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--pale); } .display .accent { color: var(--mint); font-weight: 200; } /* ---------- sections ---------- */ .sec { position: relative; } .stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; } .sec.tall { min-height: 195vh; } .stage-left { padding: 0 7vw; } .col { position: relative; max-width: 34rem; } .col-wide { max-width: 40rem; } /* soft scrim so copy stays readable over the swarm */ .col::before { content: ""; position: absolute; inset: -4rem -5rem; z-index: -1; background: radial-gradient(closest-side, rgba(247, 246, 241, 0.88), rgba(247, 246, 241, 0) 78%); pointer-events: none; } .col p { margin-top: 1.3rem; max-width: 30rem; } .col .display { margin-bottom: 0.6rem; } .col .lede { color: var(--pale); opacity: 0.86; font-weight: 200; font-size: 1.18rem; line-height: 1.55; } /* ----- 1 · HERO ----- */ .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; } .hero-inner { text-align: center; padding: 0 6vw; margin-top: 16vh; } .hero-title { font-weight: 200; font-size: clamp(3rem, 10vw, 11.5rem); line-height: 1; letter-spacing: 0.3em; text-indent: 0.3em; /* optically recenters the trailing letter-space */ color: var(--pale); margin: 1.4rem 0 1.6rem; /* paper-colored halo: invisible over the page ground, but lifts the thin glyphs off the dark ink swarm wherever the two cross */ text-shadow: 0 0 5px rgba(247, 246, 241, 0.9), 0 0 20px rgba(247, 246, 241, 0.75); } .hero-title .ht-letter { display: inline-block; will-change: transform; } .hero-sub { max-width: 37rem; margin: 0 auto; font-weight: 200; font-size: 1.1rem; line-height: 1.7; text-shadow: 0 0 6px rgba(247, 246, 241, 0.9), 0 0 14px rgba(247, 246, 241, 0.8); } #hero .eyebrow { text-shadow: 0 0 6px rgba(247, 246, 241, 0.95), 0 0 16px rgba(247, 246, 241, 0.85); } .cue { position: absolute; left: 50%; bottom: 4.5vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; } .cue-line { position: relative; width: 1px; height: 54px; background: rgba(16, 32, 27, 0.16); overflow: hidden; } .cue-dot { position: absolute; left: -1.5px; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px rgba(15, 138, 105, 0.55); animation: cue-fall 2.2s var(--ease) infinite; } @keyframes cue-fall { 0% { transform: translateY(-6px); opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateY(56px); opacity: 0; } } .cue-label { font-family: var(--font-m); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--body); opacity: 0.55; } /* ----- 3 · SYSTEM — modules ----- */ .modules { list-style: none; margin-top: 2.6rem; border-top: 1px solid var(--line); } .module { display: flex; align-items: flex-start; gap: 1.15rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); } .module-dot { position: relative; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 0.55rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px rgba(15, 138, 105, 0.45); } .module-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(15, 138, 105, 0.45); animation: dot-pulse 2.6s var(--ease) infinite; } .module:nth-child(2) .module-dot::after { animation-delay: 0.4s; } .module:nth-child(3) .module-dot::after { animation-delay: 0.8s; } .module:nth-child(4) .module-dot::after { animation-delay: 1.2s; } @keyframes dot-pulse { 0% { transform: scale(0.5); opacity: 0.9; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } } .module-body h3 { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pale); } .module-body p { margin-top: 0.25rem; font-size: 0.98rem; max-width: 30rem; } /* ----- 4 · SCALE — stats in four corners around the core ----- */ .scale-stage { display: block; } .stats { position: absolute; inset: 0; padding: 12vh 7vw 20vh; pointer-events: none; } .stat { position: absolute; max-width: 15.5rem; display: flex; flex-direction: column; gap: 0.35rem; } .stat-tl { top: 13vh; left: 7vw; } .stat-tr { top: 13vh; right: 7vw; text-align: right; align-items: flex-end; } .stat-bl { bottom: 24vh; left: 7vw; } .stat-br { bottom: 24vh; right: 7vw; text-align: right; align-items: flex-end; } .stat-num { font-weight: 200; font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--pale); font-variant-numeric: tabular-nums; text-shadow: 0 0 34px rgba(23, 164, 126, 0.16); } .stat-label { font-family: var(--font-m); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--body); line-height: 1.7; } .scale-head { position: absolute; left: 0; right: 0; bottom: 8vh; margin: 0 auto; width: min(46rem, 88vw); text-align: center; } .display-s { font-size: clamp(1.9rem, 3.4vw, 3.1rem); text-shadow: 0 2px 26px rgba(247, 246, 241, 0.95); } /* ----- 5 · CTA ----- */ .cta { min-height: 172vh; } .cta-inner { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14vh 6vw 16vh; } .cta-title { font-weight: 200; font-size: clamp(1.7rem, 3.3vw, 3rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--pale); max-width: 48rem; margin: 1.6rem 0 2.6rem; text-shadow: 0 2px 30px rgba(247, 246, 241, 0.95); } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .btn { appearance: none; border: 0; font-family: var(--font-d); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.06em; padding: 1rem 2.1rem; border-radius: 999px; transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease); } .btn:active { transform: scale(0.965); } .btn-primary { background: var(--teal); color: #F7FBF9; box-shadow: 0 0 0 rgba(15, 138, 105, 0); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--mint); box-shadow: 0 8px 34px rgba(15, 138, 105, 0.3); transform: translateY(-2px); } .btn-ghost { background: rgba(255, 255, 255, 0.66); border: 1px solid var(--line); color: var(--pale); display: inline-flex; align-items: center; gap: 0.55rem; } .btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); } .btn-glyph { color: var(--teal); font-size: 0.8em; transition: transform 0.45s var(--ease); } .btn-ghost:hover .btn-glyph { transform: translateX(3px); } /* pressed state must outrank the hover transforms above */ .btn-primary:active, .btn-ghost:active { transform: scale(0.96); } .process { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; margin-top: 6.5rem; padding-top: 2.2rem; border-top: 1px solid var(--line); width: min(58rem, 90vw); text-align: left; } .process li { display: flex; flex-direction: column; gap: 0.3rem; } .p-num { font-family: var(--font-m); font-size: 11px; letter-spacing: 0.24em; color: var(--teal); } .p-name { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pale); } .p-copy { font-size: 0.94rem; line-height: 1.6; } .footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 6vw; text-align: center; font-family: var(--font-m); font-size: 11px; letter-spacing: 0.14em; color: var(--body); opacity: 0.55; border-top: 1px solid rgba(16, 32, 27, 0.1); background: rgba(247, 246, 241, 0.55); } /* ---------- small screens ---------- */ @media (max-width: 900px) { .rail { display: none; } } @media (max-width: 767px) { .hero-inner { margin-top: 10vh; } .hero-title { font-size: clamp(2.2rem, 10.2vw, 4.4rem); letter-spacing: 0.2em; text-indent: 0.2em; white-space: nowrap; } .hero-sub { font-size: 1rem; } .stage-left { padding: 0 8vw; } .sec.tall { min-height: 165vh; } /* stats collapse into a 2x2 grid above the headline */ .stats { position: static; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 1.4rem; width: 86vw; margin: 0 auto; } .stat, .stat-tl, .stat-tr, .stat-bl, .stat-br { position: static; text-align: left; align-items: flex-start; max-width: none; } .stat-num { font-size: clamp(1.9rem, 8.4vw, 2.6rem); } .scale-stage { display: flex; flex-direction: column; justify-content: center; gap: 3.4rem; } .scale-head { position: static; width: 86vw; margin: 0 auto; text-align: left; } .cta { min-height: 150vh; } .cta-inner { padding-bottom: 22vh; } .process { grid-template-columns: 1fr; gap: 1.8rem; margin-top: 4.2rem; } .footer { position: absolute; padding: 1.3rem 6vw; } .site-tag { display: none; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } .cue-dot { animation: none; opacity: 0.8; transform: translateY(20px); } .module-dot::after { animation: none; opacity: 0.4; transform: scale(1.4); } .rail-label { opacity: 0.32; } .cursor { display: none; } [data-reveal] { opacity: 1 !important; } } /* ---------- SIGNAL — living telemetry (grafted from 07-pulse) ---------- */ .signal-stage { display: flex; flex-direction: column; justify-content: center; gap: 4.5vh; padding: 0 7vw; } .signal-head { max-width: 34rem; } .telemetry { width: min(940px, 100%); align-self: center; padding: clamp(1rem, 2.4vw, 1.9rem) clamp(1rem, 2.6vw, 2.1rem) clamp(0.8rem, 2vw, 1.4rem); border: 1px solid rgba(16, 32, 27, 0.1); border-radius: 6px; background: radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.62) 70%); box-shadow: 0 18px 60px rgba(16, 32, 27, 0.07); } .telemetry-cap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; font-family: var(--font-m); font-size: 11px; letter-spacing: 0.22em; color: var(--body); } .cap-live { display: inline-flex; align-items: center; gap: 0.55em; color: var(--teal); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgba(15, 138, 105, 0.55); animation: sigLive 2.1s ease-in-out infinite; } @keyframes sigLive { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.78); } } #signalChart { display: block; width: 100%; height: auto; } .sig-grid line { stroke: rgba(16, 32, 27, 0.09); stroke-width: 1; } .sig-grid text { fill: var(--body); opacity: 0.5; font-family: var(--font-m); font-size: 10px; letter-spacing: 0.08em; } .telemetry-foot { display: flex; flex-wrap: wrap; gap: 0.6rem clamp(1.4rem, 4vw, 3rem); margin-top: 1.1rem; font-family: var(--font-m); font-size: 11px; letter-spacing: 0.18em; color: var(--body); } .telemetry-foot b { font-weight: 400; color: var(--teal); font-variant-numeric: tabular-nums; margin-left: 0.5em; } @media (max-width: 760px) { .signal-stage { gap: 3vh; } .telemetry { padding: 0.9rem 0.8rem 0.7rem; } .telemetry-cap { letter-spacing: 0.14em; flex-wrap: wrap; } .telemetry-foot { letter-spacing: 0.12em; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }