/* ========================================================================= Arcaidea — background accents, finesse & motion Load AFTER styles.css and styles-theme.css. Vocabulary borrowed from control-room instrumentation: hairline grid · drifting warm+cool wash · ops telemetry · scroll-reveal. All theme-aware. All disabled under prefers-reduced-motion. ========================================================================= */ :root { --arc-grid-line: rgba(26, 31, 43, 0.045); --arc-grid-tick: rgba(26, 31, 43, 0.10); --arc-wash-opacity: 0.10; --arc-telem-color: rgba(26, 31, 43, 0.30); --arc-telem-dot: var(--arc-cyan, #06E4EA); } html[data-theme="dark"] { --arc-grid-line: rgba(250, 252, 255, 0.05); --arc-grid-tick: rgba(250, 252, 255, 0.12); --arc-wash-opacity: 0.18; --arc-telem-color: rgba(250, 252, 255, 0.34); } /* ---- backdrop stack: sits behind all content ---- */ .arc-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* keep real content above the backdrop */ .status-strip, .nav, main, .site-footer { position: relative; z-index: 1; } /* ---- 1. hairline measurement grid ---- */ .arc-grid { position: absolute; inset: -2px; background-image: linear-gradient(to right, var(--arc-grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--arc-grid-line) 1px, transparent 1px); background-size: 72px 72px; /* fade the grid out toward the vertical centre so it frames, not fills */ -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 85%); } /* a few brighter "ruler" ticks along the top edge */ .arc-grid::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 220px; background-image: linear-gradient(to right, var(--arc-grid-tick) 1px, transparent 1px); background-size: 288px 100%; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); opacity: 0.6; } /* ---- 2. drifting warm + cool wash (the signature, as a field) ---- */ .arc-wash { position: absolute; inset: -25%; opacity: var(--arc-wash-opacity); background: radial-gradient(38% 50% at 18% 22%, var(--arc-violet, #4406F2), transparent 62%), radial-gradient(34% 46% at 82% 30%, var(--arc-cyan, #06E4EA), transparent 60%), radial-gradient(40% 52% at 70% 88%, var(--arc-crimson, #E30D43), transparent 62%); will-change: transform; animation: arcWashDrift 46s var(--ease-smooth, cubic-bezier(.22,.61,.36,1)) infinite alternate; } @keyframes arcWashDrift { 0% { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(-2deg); } 50% { transform: translate3d(2%, 3%, 0) scale(1.12) rotate(1.5deg); } 100% { transform: translate3d(4%, -1%, 0) scale(1.06) rotate(3deg); } } /* ---- 3. ops telemetry micro-labels (instrument frame) ---- */ .arc-telem { position: fixed; font-family: var(--font-mono, monospace); font-size: 10.5px; line-height: 1.7; letter-spacing: 0.14em; text-transform: uppercase; color: var(--arc-telem-color); white-space: nowrap; user-select: none; } .arc-telem .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--arc-telem-dot); margin-right: 7px; vertical-align: middle; animation: arcTelemPulse 2.6s ease-in-out infinite; } @keyframes arcTelemPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } } .arc-telem--tr { top: 96px; right: 26px; text-align: right; } .arc-telem--bl { bottom: 24px; left: 26px; } .arc-telem--edge { left: 14px; top: 50%; transform: rotate(180deg); writing-mode: vertical-rl; letter-spacing: 0.3em; opacity: 0.7; } @media (max-width: 1100px) { .arc-telem { display: none; } } /* ---- 4. scroll-reveal (soft upward fade, staggered) ---- */ /* only active once JS adds .arc-reveal-on to — no-JS stays visible */ .arc-reveal-on [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-smooth, cubic-bezier(.22,.61,.36,1)), transform 0.6s var(--ease-smooth, cubic-bezier(.22,.61,.36,1)); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .arc-reveal-on [data-reveal].is-in { opacity: 1; transform: none; } /* ---- 5. count-up numbers (capability; tabular for stable width) ---- */ [data-countup] { font-variant-numeric: tabular-nums; } /* ---- real photography placed within sections (duotone, brand-aligned) ---- */ .media-band { margin: var(--space-12) 0 0; border-radius: var(--radius-xl, 28px); overflow: hidden; border: 1px solid var(--border-1); box-shadow: var(--shadow-md); background: var(--bg-2); position: relative; } .media-band img { display: block; width: 100%; height: auto; } /* a faint warm+cool wash tying the photo to the brand gradient */ .media-band::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(68,6,242,0.12), transparent 42%, rgba(227,13,67,0.12)); mix-blend-mode: screen; } .media-band figcaption { position: relative; z-index: 1; font-family: var(--font-mono); font-size: var(--fs-xxs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-1); background: var(--bg-2); } /* supporting image beside the section intro — smaller, less prominent */ .intro-split { display: grid; grid-template-columns: 1fr; gap: var(--space-8); align-items: center; } .intro-split .media-band { margin-top: 0; } @media (min-width: 880px) { .intro-split { grid-template-columns: 1.05fr 0.82fr; gap: var(--space-12); } /* solution-page heroes: give the photo more presence to balance the big H1 */ .page-hero .intro-split { grid-template-columns: 0.92fr 1.08fr; } .intro-split .section-head, .intro-split .hero-text { display: block; } .intro-split .section-head .lede, .intro-split .hero-text .lede { margin-top: var(--space-5); max-width: none; } } /* ========================================================================= Section rhythm — a quiet chapter divider between sections (no colour fields). A faint full-width hairline with a short warm+cool gradient accent centred on it, plus breathing room, marks each new chapter as you scroll. ========================================================================= */ .arc-divider { position: relative; max-width: 1160px; height: 34px; margin: var(--space-5) auto var(--space-16); background: url("data:image/svg+xml,%3Csvg%20width%3D%22511%22%20height%3D%22230%22%20viewBox%3D%220%200%20511%20230%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20opacity%3D%220.62%22%20d%3D%22M293.463%20208.034C289.923%20208.034%20286.353%20207.644%20282.793%20206.874C269.353%20203.924%20258.083%20195.784%20251.073%20183.954L159.353%2029.2236C152.163%2017.0936%20139.423%209.93362%20125.363%2010.1436C111.263%2010.3236%2098.7427%2017.7736%2091.8627%2030.0736L9.49256%20175.814C8.11256%20178.254%205.02265%20179.114%202.58265%20177.734C0.142647%20176.354%20-0.717519%20173.264%200.662481%20170.824L83.0226%2025.1036C91.6826%209.61358%20107.473%200.223603%20125.243%200.00360333C142.953%20-0.206397%20159.033%208.7736%20168.093%2024.0636L259.813%20178.794C265.383%20188.184%20274.313%20194.644%20284.983%20196.974C295.643%20199.314%20306.462%20197.184%20315.443%20190.974L337.953%20175.434C354.673%20163.884%20376.373%20163.754%20393.243%20175.094L412.053%20187.734C414.373%20189.294%20414.992%20192.454%20413.432%20194.774C411.872%20197.094%20408.713%20197.714%20406.393%20196.154L387.583%20183.514C374.213%20174.524%20356.993%20174.624%20343.723%20183.784L321.213%20199.324C312.883%20205.074%20303.313%20208.044%20293.483%20208.044L293.463%20208.034Z%22%20fill%3D%22url(%23paint0_linear_868_3320)%22%3E%3C%2Fpath%3E%0A%3Cpath%20opacity%3D%220.62%22%20d%3D%22M367.003%20229.854C366.703%20229.854%20366.403%20229.854%20366.103%20229.854C349.203%20229.554%20333.863%20220.754%20325.063%20206.324L247.303%2078.7736C240.163%2067.0636%20227.753%2060.1036%20214.063%2060.1036C213.983%2060.1036%20213.903%2060.1036%20213.823%2060.1036C200.033%2060.1836%20187.603%2067.3136%20180.563%2079.1736L108.963%20199.794C101.013%20213.194%2087.5627%20221.844%2072.0827%20223.534C56.6027%20225.234%2041.6026%20219.684%2030.9426%20208.314L1.37274%20176.794C-0.547255%20174.754%20-0.437275%20171.544%201.60273%20169.624C3.65273%20167.704%206.86265%20167.814%208.77265%20169.854L38.3427%20201.374C46.7927%20210.384%2058.6926%20214.784%2070.9826%20213.444C83.2726%20212.104%2093.9326%20205.234%20100.243%20194.604L171.843%2073.9836C180.713%2059.0336%20196.393%2050.0536%20213.773%2049.9536C213.873%2049.9536%20213.973%2049.9536%20214.073%2049.9536C231.333%2049.9536%20246.983%2058.7336%20255.983%2073.4936L333.743%20201.044C340.723%20212.494%20352.893%20219.474%20366.303%20219.714C379.643%20219.954%20392.123%20213.414%20399.513%20202.224L415.723%20177.664C424.913%20163.744%20440.383%20155.454%20457.043%20155.614L505.853%20155.954C508.653%20155.974%20510.913%20158.264%20510.893%20161.064C510.873%20163.854%20508.603%20166.104%20505.823%20166.104H505.783L456.973%20165.764C456.883%20165.764%20456.783%20165.764%20456.693%20165.764C443.563%20165.764%20431.433%20172.284%20424.193%20183.254L407.983%20207.814C398.843%20221.664%20383.583%20229.864%20367.033%20229.864L367.003%20229.854Z%22%20fill%3D%22url(%23paint1_linear_868_3320)%22%3E%3C%2Fpath%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_868_3320%22%20x1%3D%22-0.00747841%22%20y1%3D%22104.014%22%20x2%3D%22414.283%22%20y2%3D%22104.014%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%234406F2%22%3E%3C%2Fstop%3E%0A%3Cstop%20offset%3D%220.22%22%20stop-color%3D%22%236B07C6%22%3E%3C%2Fstop%3E%0A%3Cstop%20offset%3D%220.59%22%20stop-color%3D%22%23AA0A82%22%3E%3C%2Fstop%3E%0A%3Cstop%20offset%3D%220.86%22%20stop-color%3D%22%23D10C57%22%3E%3C%2Fstop%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23E00D47%22%3E%3C%2Fstop%3E%0A%3C%2FlinearGradient%3E%0A%3ClinearGradient%20id%3D%22paint1_linear_868_3320%22%20x1%3D%22-0.00726425%22%20y1%3D%22139.894%22%20x2%3D%22510.873%22%20y2%3D%22139.894%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%234406F2%22%3E%3C%2Fstop%3E%0A%3Cstop%20offset%3D%220.06%22%20stop-color%3D%22%233F16F1%22%3E%3C%2Fstop%3E%0A%3Cstop%20offset%3D%220.41%22%20stop-color%3D%22%232574EE%22%3E%3C%2Fstop%3E%0A%3Cstop%20offset%3D%220.69%22%20stop-color%3D%22%2312B9EB%22%3E%3C%2Fstop%3E%0A%3Cstop%20offset%3D%220.9%22%20stop-color%3D%22%2306E4EA%22%3E%3C%2Fstop%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2302F5EA%22%3E%3C%2Fstop%3E%0A%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E") center / auto 30px no-repeat, linear-gradient(90deg, transparent, var(--border-2)) left center / calc(50% - 36px) 1px no-repeat, linear-gradient(90deg, var(--border-2), transparent) right center / calc(50% - 36px) 1px no-repeat; } @media (max-width: 720px) { .arc-divider { margin-left: var(--space-6); margin-right: var(--space-6); margin-bottom: var(--space-12); background-size: auto 26px, calc(50% - 30px) 1px, calc(50% - 30px) 1px; } } /* ========================================================================= 5b. scroll color-sweep headings — blue → pink gradient text whose position is driven by scroll progress (--sweep, 0..1, set in accents.js). Defaults to a balanced static fill if JS never runs. ========================================================================= */ .arc-grad-head { background-image: linear-gradient( 100deg, #2574EE 0%, #06E4EA 17%, #4406F2 44%, #AA0A82 70%, #E30D43 100% ); background-size: 210% 100%; background-position: 50% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: background-position 0.12s linear; } /* ========================================================================= 6. micro-interactions — arrow nudge + animated link underline ========================================================================= */ .arrow { transition: transform var(--dur-2, 0.22s) var(--ease-smooth, cubic-bezier(.22,.61,.36,1)); } a:hover > .arrow, .btn:hover .arrow { transform: translateX(4px); } /* animated underline for prose / list / footer links (guide: 1px, currentColor, offset) */ .footer-col a, .footer-base a, .legal-section a, .section-prose a, .legal-toc a, .breadcrumb a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; transition: background-size 0.16s var(--ease-smooth, cubic-bezier(.22,.61,.36,1)); } .footer-col a:hover, .footer-base a:hover, .legal-section a:hover, .section-prose a:hover, .legal-toc a:hover, .breadcrumb a:hover { background-size: 100% 1px; } /* ========================================================================= 3. scroll-spy — active nav link ========================================================================= */ .nav-links a { position: relative; transition: color var(--dur-2, 0.22s) var(--ease-smooth, cubic-bezier(.22,.61,.36,1)); } .nav-links a.is-active { color: var(--fg-1); } .nav-links a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--arc-violet, #4406F2), var(--arc-cyan, #06E4EA)); } /* ========================================================================= 4. hero load-in — staggered entrance (pure CSS, no flash via fill-mode) Only runs when motion is allowed; otherwise the hero renders normally. ========================================================================= */ @media (prefers-reduced-motion: no-preference) { .hero .hero-eyebrow, .hero h1, .hero .hero-lede, .hero .hero-ctas, .hero .hero-col, .page-hero .breadcrumb, .page-hero h1, .page-hero .legal-meta, .page-hero .lede, .page-hero .legal-toc, .page-hero .hero-ctas { animation: arcRise 0.62s var(--ease-smooth, cubic-bezier(.22,.61,.36,1)) both; } .hero h1, .page-hero h1 { animation-delay: 0.08s; } .hero .hero-lede, .page-hero .legal-meta, .page-hero .lede { animation-delay: 0.16s; } .hero .hero-ctas, .page-hero .legal-toc, .page-hero .hero-ctas { animation-delay: 0.24s; } .hero .hero-col { animation-delay: 0.2s; animation-duration: 0.8s; } } @keyframes arcRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ========================================================================= 5. story progress line — gradient fill threaded through the steps ========================================================================= */ .storyline { position: relative; } .arc-story-fill { position: absolute; left: 27px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--arc-cool-3, #2574EE), var(--arc-violet, #4406F2), var(--arc-crimson, #E30D43)); z-index: 0; pointer-events: none; transition: height 0.18s linear; } .arc-story-fill::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, 50%); background: var(--arc-cyan, #06E4EA); box-shadow: 0 0 0 4px rgba(6, 228, 234, 0.18); } .story-node { transition: border-color 0.4s var(--ease-smooth, cubic-bezier(.22,.61,.36,1)), box-shadow 0.4s var(--ease-smooth, cubic-bezier(.22,.61,.36,1)), background 0.4s var(--ease-smooth, cubic-bezier(.22,.61,.36,1)); } .story-node.passed { border-color: transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(135deg, var(--arc-violet, #4406F2), var(--arc-cyan, #06E4EA)) border-box; border: 1.5px solid transparent; box-shadow: 0 0 0 5px rgba(68, 6, 242, 0.10); } /* ========================================================================= 7. animated wave mark — footer watermark, full-bleed over ink ========================================================================= */ footer.site-footer { position: relative; overflow: hidden; } footer.site-footer .container { position: relative; z-index: 1; } .arc-footer-wave { position: absolute; right: -4%; bottom: -26%; width: min(620px, 64%); height: auto; z-index: 0; opacity: 0.5; pointer-events: none; animation: arcWaveBreathe 7.5s var(--ease-smooth, cubic-bezier(.22,.61,.36,1)) infinite alternate; } @keyframes arcWaveBreathe { from { transform: translateY(7px) scale(1); opacity: 0.4; } to { transform: translateY(-7px) scale(1.035); opacity: 0.62; } } /* ========================================================================= 9. skip link + focus rings ========================================================================= */ .skip-link { position: fixed; top: 10px; left: 12px; z-index: 1000; transform: translateY(-160%); background: var(--arc-violet, #4406F2); color: #fff; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.06em; padding: 10px 16px; border-radius: var(--radius-pill, 999px); text-decoration: none; box-shadow: var(--shadow-md); transition: transform 0.2s var(--ease-smooth, cubic-bezier(.22,.61,.36,1)); } .skip-link:focus { transform: none; outline: none; } :focus-visible { outline: 2px solid var(--arc-violet, #4406F2); outline-offset: 2px; border-radius: 3px; } /* ========================================================================= prefers-reduced-motion — freeze everything, reveal immediately ========================================================================= */ @media (prefers-reduced-motion: reduce) { .arc-wash { animation: none; } .arc-telem .dot { animation: none; opacity: 0.8; } .arc-footer-wave { animation: none; } }