/* ========================================================================== orijins.connect — design system v2 (light, world-class) Premium enterprise B2B. Light, cinematic, proof-first. No build step, no dependencies. Served as-is by the hosting plane. ========================================================================== */ :root { /* surfaces */ --bg: #fafbfd; --bg-soft: #f3f6fa; --surface: #ffffff; --bg-code: #0d1526; /* code stays dark for contrast */ --border: #e5eaf2; --border-strong: #d3dbe8; /* text */ --text: #0b1426; --text-2: #4a586f; --text-3: #8493a8; /* brand + status */ --accent: #0c9d6e; --accent-deep: #067352; --accent-soft: #e6f7f0; --amber: #b97d10; --amber-soft: #fdf3df; --red: #d6453d; --red-soft: #fdeceb; --blue: #2563eb; --blue-soft: #e9f0fe; --slate: #5b6b82; --slate-soft: #eef1f6; --violet: #7c5cf0; --shadow-sm: 0 1px 2px rgba(11, 20, 38, 0.05), 0 1px 6px rgba(11, 20, 38, 0.04); --shadow-md: 0 2px 6px rgba(11, 20, 38, 0.05), 0 12px 32px rgba(11, 20, 38, 0.08); --shadow-lg: 0 4px 12px rgba(11, 20, 38, 0.06), 0 24px 64px rgba(11, 20, 38, 0.12); --radius: 16px; --radius-sm: 10px; --maxw: 1140px; --nav-h: 68px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* theme-specific helpers */ --nav-bg: rgba(250, 251, 253, 0.8); --chip-bg: rgba(255, 255, 255, 0.7); color-scheme: light; } /* ========================================================================== Dark theme — deep navy premium. Activated by data-theme="dark" on . ========================================================================== */ :root[data-theme="dark"] { --bg: #0a1120; --bg-soft: #0d1526; --surface: #111b30; --bg-code: #0d1526; --border: #1d2a44; --border-strong: #2b3b5c; --text: #edf2f9; --text-2: #a9b7cc; --text-3: #6f8099; --accent: #2dd4a7; --accent-deep: #3ee0b1; --accent-soft: rgba(45, 212, 167, 0.12); --amber: #e8b04b; --amber-soft: rgba(232, 176, 75, 0.12); --red: #f08a83; --red-soft: rgba(240, 138, 131, 0.12); --blue: #7ab1fb; --blue-soft: rgba(122, 177, 251, 0.12); --slate: #9aabc2; --slate-soft: rgba(154, 171, 194, 0.12); --violet: #a78bfa; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 6px rgba(0, 0, 0, 0.25); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 24px 64px rgba(0, 0, 0, 0.5); --nav-bg: rgba(10, 17, 32, 0.8); --chip-bg: rgba(17, 27, 48, 0.7); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: var(--accent-deep); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 0.5em; font-weight: 700; color: var(--text); } h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: 760; } h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .muted { color: var(--text-2); } .small { font-size: 0.875rem; } .mono { font-family: var(--mono); } /* gradient text for hero emphasis */ .grad { background: linear-gradient(98deg, #067352 0%, #0c9d6e 38%, #2563eb 80%, #7c5cf0 105%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* -------------------------------------------------------------------------- Navigation -------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--nav-bg); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--border); } .nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 28px; } .nav__brand { font-weight: 760; font-size: 1.04rem; letter-spacing: 0.16em; color: var(--text); display: flex; align-items: center; gap: 11px; } .nav__brand:hover { text-decoration: none; } .nav__logo { height: 32px; width: auto; display: block; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .nav__brand:hover .nav__logo { transform: rotate(8deg) scale(1.06); } @keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(12, 157, 110, 0.15); } 50% { box-shadow: 0 0 0 6px rgba(12, 157, 110, 0.07); } } .nav__brand b { color: var(--accent-deep); font-weight: 750; } .nav__links { display: flex; gap: 2px; margin-left: auto; align-items: center; } .nav__links a { color: var(--text-2); font-size: 0.9rem; font-weight: 550; padding: 7px 12px; border-radius: 9px; transition: color 0.15s, background 0.15s; } .nav__links a:hover { color: var(--text); background: var(--slate-soft); text-decoration: none; } .nav__links a.is-active { color: var(--text); background: var(--slate-soft); } .nav__cta { margin-left: 10px; background: var(--text); color: #fff !important; font-weight: 620; padding: 9px 18px !important; border-radius: 10px; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; } .nav__cta:hover { background: #1a2742; text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); } .nav__burger { display: none; margin-left: auto; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); border-radius: 9px; padding: 7px 12px; font-size: 1rem; cursor: pointer; } @media (max-width: 900px) { .nav__links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 16px 16px; box-shadow: var(--shadow-md); } .nav__links.is-open { display: flex; } .nav__burger { display: block; margin-left: 0; } .nav__cta { margin-left: 0; text-align: center; margin-top: 8px; } .nav__theme { order: 2; margin-left: auto; } .nav__burger { order: 3; } .nav__links { order: 4; } } /* -------------------------------------------------------------------------- Hero — cinematic light aurora -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding: 110px 0 96px; border-bottom: 1px solid var(--border); background: var(--bg); } .hero--sub { padding: 84px 0 64px; } /* aurora layer */ .hero::before { content: ""; position: absolute; inset: -40% -20%; background: radial-gradient(38% 42% at 18% 28%, rgba(52, 211, 155, 0.22), transparent 70%), radial-gradient(34% 38% at 78% 18%, rgba(96, 165, 250, 0.20), transparent 70%), radial-gradient(30% 36% at 62% 78%, rgba(167, 139, 250, 0.16), transparent 70%), radial-gradient(26% 30% at 35% 88%, rgba(45, 212, 191, 0.14), transparent 70%); filter: blur(46px); animation: aurora-drift 22s ease-in-out infinite alternate; pointer-events: none; } @keyframes aurora-drift { 0% { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(2.5%, 2%, 0) rotate(2.5deg) scale(1.06); } 100% { transform: translate3d(-1.5%, 3%, 0) rotate(-2deg) scale(1.03); } } /* dotted grid layer */ .hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(11, 20, 38, 0.07) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(75% 70% at 50% 32%, #000 30%, transparent 100%); mask-image: radial-gradient(75% 70% at 50% 32%, #000 30%, transparent 100%); pointer-events: none; } .hero .container { position: relative; z-index: 1; } /* brand watermark (landing hero) */ .hero__watermark { position: absolute; right: -3%; top: 50%; height: 150%; width: auto; transform: translateY(-50%); opacity: 0.045; pointer-events: none; z-index: 0; animation: watermark-float 16s ease-in-out infinite alternate; } @keyframes watermark-float { 0% { transform: translateY(-51%) rotate(-1.5deg); } 100% { transform: translateY(-49%) rotate(1.5deg); } } @media (max-width: 980px) { .hero__watermark { display: none; } } .hero__layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } @media (max-width: 980px) { .hero__layout { grid-template-columns: 1fr; gap: 44px; } } .hero__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-deep); border: 1px solid rgba(12, 157, 110, 0.35); border-radius: 999px; padding: 6px 14px; margin-bottom: 24px; background: var(--chip-bg); box-shadow: var(--shadow-sm); } .hero__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: dot-pulse 2.4s ease-in-out infinite; } .hero h1 { max-width: 16ch; } .hero__sub { font-size: 1.16rem; color: var(--text-2); max-width: 54ch; margin-bottom: 32px; } .hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; } /* staggered entrance */ .stagger > * { opacity: 0; transform: translateY(22px); filter: blur(5px); } .stagger.is-in > * { animation: rise-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .stagger.is-in > *:nth-child(1) { animation-delay: 0.05s; } .stagger.is-in > *:nth-child(2) { animation-delay: 0.16s; } .stagger.is-in > *:nth-child(3) { animation-delay: 0.27s; } .stagger.is-in > *:nth-child(4) { animation-delay: 0.38s; } .stagger.is-in > *:nth-child(5) { animation-delay: 0.49s; } .stagger.is-in > *:nth-child(6) { animation-delay: 0.60s; } @keyframes rise-in { to { opacity: 1; transform: none; filter: blur(0); } } @media (prefers-reduced-motion: reduce) { .stagger > * { opacity: 1; transform: none; filter: none; } } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 12px; font-weight: 640; font-size: 0.98rem; border: 1px solid transparent; cursor: pointer; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s, background 0.18s, border-color 0.18s; will-change: transform; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.98); } .btn--primary { background: linear-gradient(135deg, #0fae7a, var(--accent-deep)); color: #fff; box-shadow: 0 2px 6px rgba(6, 115, 82, 0.25), 0 10px 28px rgba(6, 115, 82, 0.22); } .btn--primary:hover { box-shadow: 0 4px 10px rgba(6, 115, 82, 0.28), 0 16px 40px rgba(6, 115, 82, 0.3); } .btn--primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%); background-size: 220% 100%; background-position: 130% 0; transition: background-position 0.7s ease; } .btn--primary:hover::after { background-position: -30% 0; } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent-deep); box-shadow: var(--shadow-md); } /* -------------------------------------------------------------------------- Hero proof console (animated) -------------------------------------------------------------------------- */ .console { background: var(--bg-code); border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: var(--shadow-lg), 0 0 80px rgba(12, 157, 110, 0.12); overflow: hidden; font-family: var(--mono); font-size: 0.82rem; transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .console:hover { transform: perspective(1400px) rotateY(0) rotateX(0); } @media (max-width: 980px) { .console { transform: none; } } .console__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.18); } .console__bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .console__bar i:nth-child(1) { background: #f0625d; } .console__bar i:nth-child(2) { background: #f5b73d; } .console__bar i:nth-child(3) { background: #2dd4a7; } .console__bar span { margin-left: 8px; color: #64748b; font-size: 0.76rem; } .console__body { padding: 18px 20px 20px; min-height: 300px; color: #c9d6e5; line-height: 1.75; } .console__body .c-dim { color: #64748b; } .console__body .c-key { color: #60a5fa; } .console__body .c-str { color: #5eead4; } .console__body .c-ok { color: #2dd4a7; font-weight: 700; } .console__line { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; display: block; } .console__line.on { opacity: 1; transform: none; } .console__gate { display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; } .console__gate::before { content: "✓"; color: #2dd4a7; font-weight: 700; } .console__badge { display: inline-block; margin-top: 6px; border: 1px solid rgba(45, 212, 167, 0.5); color: #2dd4a7; border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 0.78rem; box-shadow: 0 0 18px rgba(45, 212, 167, 0.25); } .console__caret { display: inline-block; width: 8px; height: 15px; background: #2dd4a7; vertical-align: -2px; animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } /* -------------------------------------------------------------------------- Ticker strip -------------------------------------------------------------------------- */ .ticker { border-bottom: 1px solid var(--border); background: var(--surface); overflow: hidden; white-space: nowrap; padding: 14px 0; position: relative; } .ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 1; pointer-events: none; } .ticker::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); } .ticker::after { right: 0; background: linear-gradient(-90deg, var(--surface), transparent); } .ticker__track { display: inline-flex; gap: 0; animation: ticker-scroll 32s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } @keyframes ticker-scroll { to { transform: translateX(-50%); } } .ticker__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; color: var(--text-2); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.02em; } .ticker__item::before { content: "◆"; font-size: 0.5rem; color: var(--accent); } /* -------------------------------------------------------------------------- Sections / cards / grids -------------------------------------------------------------------------- */ .section { padding: 88px 0; border-bottom: 1px solid var(--border); position: relative; } .section--tint { background: var(--bg-soft); } .section__head { max-width: 64ch; margin-bottom: 44px; } .section__head .lead { color: var(--text-2); font-size: 1.08rem; } .eyebrow { font-size: 0.76rem; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); border-radius: 2px; } .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .card h3 { margin-bottom: 8px; } .card p:last-child { margin-bottom: 0; } .card--accent { border-color: rgba(12, 157, 110, 0.35); } .card--accent::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, var(--accent), rgba(12,157,110,0)); border-radius: 2px; } .card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); font-size: 0.84rem; color: var(--text-3); } .card__icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-soft), #d8f3ff); color: var(--accent-deep); font-size: 1.15rem; font-weight: 700; margin-bottom: 18px; border: 1px solid rgba(12, 157, 110, 0.2); } /* reveal on scroll (stronger) */ .reveal { opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); transition-delay: var(--rd, 0s); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- StatusBadge -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; padding: 4px 11px; border-radius: 999px; border: 1px solid; font-family: var(--mono); white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge--verified, .badge--available { color: var(--accent-deep); border-color: rgba(12,157,110,0.35); background: var(--accent-soft); } .badge--verified::before { animation: dot-pulse 2.2s ease-in-out infinite; } .badge--pending { color: var(--amber); border-color: rgba(185,125,16,0.35); background: var(--amber-soft); } .badge--blocked { color: var(--red); border-color: rgba(214,69,61,0.32); background: var(--red-soft); } .badge--error { color: #a25b62; border-color: rgba(162,91,98,0.32); background: #faf0f1; } .badge--planned, .badge--proposed { color: var(--slate); border-color: rgba(91,107,130,0.3); background: var(--slate-soft); } .badge--beta { color: var(--blue); border-color: rgba(37,99,235,0.3); background: var(--blue-soft); } /* -------------------------------------------------------------------------- PipelineDiagram (animated flow) -------------------------------------------------------------------------- */ .pipeline { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); } .pipeline__step { flex: 1 1 90px; min-width: 86px; max-width: 200px; text-align: center; padding: 14px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 0.78rem; font-weight: 600; color: var(--text-2); position: relative; transition: border-color 0.35s, box-shadow 0.35s, background 0.35s, transform 0.35s; } .pipeline__step strong { display: block; color: var(--text); font-size: 0.87rem; margin-bottom: 2px; } .pipeline__step--gate { border-color: rgba(12, 157, 110, 0.35); background: #f2fbf7; } .pipeline__step--gate strong { color: var(--accent-deep); } .pipeline__step.lit { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(12, 157, 110, 0.12), 0 8px 20px rgba(12, 157, 110, 0.15); transform: translateY(-3px); } .pipeline__step.lit strong { color: var(--accent-deep); } .pipeline__arrow { align-self: center; color: var(--text-3); font-size: 0.95rem; flex: 0 0 auto; transition: color 0.3s; } .pipeline__arrow.lit { color: var(--accent); } @media (max-width: 760px) { .pipeline { flex-direction: column; } .pipeline__arrow { transform: rotate(90deg); text-align: center; } } /* journey list (orchestra page) */ .journey { list-style: none; margin: 0; padding: 0; counter-reset: gate; } .journey li { counter-increment: gate; display: grid; grid-template-columns: 56px 250px 1fr; gap: 18px; padding: 22px 18px; border-bottom: 1px solid var(--border); align-items: baseline; border-radius: 12px; transition: background 0.25s; } .journey li:hover { background: var(--surface); box-shadow: var(--shadow-sm); } .journey li::before { content: counter(gate, decimal-leading-zero); font-family: var(--mono); font-size: 0.95rem; color: var(--accent-deep); font-weight: 750; } .journey .j-name { font-family: var(--mono); font-size: 0.92rem; color: var(--text); font-weight: 650; } .journey .j-desc { color: var(--text-2); font-size: 0.95rem; } @media (max-width: 760px) { .journey li { grid-template-columns: 44px 1fr; } .journey .j-desc { grid-column: 2; } } /* -------------------------------------------------------------------------- Code blocks (ApiExampleBlock) — stay dark, glow softly -------------------------------------------------------------------------- */ .codeblock { position: relative; background: var(--bg-code); border: 1px solid #1d2a44; border-radius: 14px; margin: 0 0 18px; overflow: hidden; box-shadow: var(--shadow-md); } .codeblock__bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 15px; border-bottom: 1px solid rgba(148,163,184,0.15); font-size: 0.78rem; color: #64748b; font-family: var(--mono); } .codeblock pre { margin: 0; padding: 17px; overflow-x: auto; font-family: var(--mono); font-size: 0.84rem; line-height: 1.6; color: #c9d6e5; } .codeblock .tok-k { color: #60a5fa; } .codeblock .tok-s { color: #5eead4; } .codeblock .tok-c { color: #64748b; } .copy-btn { background: rgba(148,163,184,0.1); border: 1px solid rgba(148,163,184,0.25); color: #9fb0c3; font-size: 0.74rem; padding: 4px 11px; border-radius: 7px; cursor: pointer; font-family: var(--font); transition: color 0.15s, border-color 0.15s; } .copy-btn:hover { color: #2dd4a7; border-color: #2dd4a7; } /* light-context copy button (cards on light bg keep dark codeblocks, fine) */ /* tabs */ .tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .tabs button { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2); padding: 8px 18px; border-radius: 10px; font-size: 0.88rem; cursor: pointer; font-weight: 620; font-family: var(--font); transition: all 0.18s; box-shadow: var(--shadow-sm); } .tabs button:hover { transform: translateY(-1px); } .tabs button.is-active { color: #fff; border-color: var(--accent-deep); background: linear-gradient(135deg, #0fae7a, var(--accent-deep)); box-shadow: 0 4px 14px rgba(6, 115, 82, 0.3); } .tabpane { display: none; } .tabpane.is-active { display: block; animation: rise-in 0.45s cubic-bezier(0.16,1,0.3,1); } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); } table.t { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 560px; } table.t th { text-align: left; padding: 13px 18px; color: var(--text-3); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border); background: var(--bg-soft); } table.t td { padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; } table.t tr:last-child td { border-bottom: none; } table.t td:first-child { color: var(--text); font-weight: 640; } table.t tbody tr { transition: background 0.15s; } table.t tbody tr:hover { background: var(--bg-soft); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .field { margin-bottom: 18px; } .field label { display: block; font-size: 0.87rem; font-weight: 640; margin-bottom: 7px; color: var(--text); } .field .hint { font-size: 0.78rem; color: var(--text-3); margin-top: 5px; } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; font-size: 0.95rem; font-family: var(--font); transition: border-color 0.15s, box-shadow 0.15s; } .field textarea { min-height: 96px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(12, 157, 110, 0.12); } .checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .checks label { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; font-weight: 550; border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--text-2); font-family: var(--mono); background: var(--surface); transition: border-color 0.15s, background 0.15s; } .checks label:hover { border-color: var(--accent); } .checks input { accent-color: var(--accent-deep); width: auto; } @media (max-width: 640px) { .checks { grid-template-columns: 1fr; } } /* notices */ .notice { display: flex; gap: 12px; align-items: flex-start; border: 1px solid; border-radius: 12px; padding: 15px 17px; font-size: 0.9rem; margin: 0 0 22px; background: var(--surface); } .notice--warn { border-color: rgba(185,125,16,0.35); background: var(--amber-soft); color: #7a5611; } .notice--info { border-color: rgba(37,99,235,0.3); background: var(--blue-soft); color: #1e478f; } .notice--ok { border-color: rgba(12,157,110,0.35); background: var(--accent-soft); color: #06593f; } .notice b { color: inherit; } .notice a { color: inherit; font-weight: 650; } /* key reveal */ .key-reveal { font-family: var(--mono); font-size: 0.9rem; background: var(--bg-code); color: #5eead4; border: 1px dashed rgba(185,125,16,0.6); border-radius: 10px; padding: 14px 16px; word-break: break-all; margin: 12px 0; } /* -------------------------------------------------------------------------- CTA band — dark contrast moment -------------------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; padding: 92px 0; text-align: center; background: var(--bg-code); border-bottom: 1px solid var(--border); } .cta-band::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(36% 44% at 30% 64%, rgba(45, 212, 167, 0.18), transparent 70%), radial-gradient(32% 40% at 72% 30%, rgba(96, 165, 250, 0.15), transparent 70%); filter: blur(40px); animation: aurora-drift 18s ease-in-out infinite alternate; pointer-events: none; } .cta-band::after { content: ""; position: absolute; top: 50%; right: 4%; width: 220px; height: 110%; transform: translateY(-50%); background: url("/assets/orijins-logo-white.png") center / contain no-repeat; opacity: 0.06; pointer-events: none; } .cta-band .container { position: relative; z-index: 1; } .cta-band h2 { max-width: 26ch; margin: 0 auto 14px; color: #f2f6fb; } .cta-band p { color: #9fb0c3; max-width: 56ch; margin: 0 auto 30px; } .cta-band .btn--ghost { background: transparent; color: #e8eef6; border-color: rgba(148,163,184,0.4); } .cta-band .btn--ghost:hover { border-color: #2dd4a7; color: #2dd4a7; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { padding: 56px 0 40px; background: var(--surface); } .footer__grid { display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between; } .footer h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3); margin-bottom: 14px; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: 9px; } .footer a { color: var(--text-2); font-size: 0.9rem; } .footer a:hover { color: var(--accent-deep); } .footer__legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* misc */ .kv { display: grid; grid-template-columns: 170px 1fr; gap: 7px 18px; font-size: 0.9rem; } .kv dt { color: var(--text-3); } .kv dd { margin: 0; color: var(--text-2); font-family: var(--mono); font-size: 0.85rem; } .divider { height: 1px; background: var(--border); margin: 30px 0; border: none; } .pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; } /* -------------------------------------------------------------------------- B2B layer — logobar, statbar, pains, steps, tiers, ROI, sectors, FAQ -------------------------------------------------------------------------- */ /* connected-tools trust bar */ .logobar { padding: 26px 0; border-bottom: 1px solid var(--border); background: var(--surface); } .logobar__inner { display: flex; align-items: center; justify-content: center; gap: 10px 22px; flex-wrap: wrap; font-size: 0.86rem; color: var(--text-3); } .logobar__chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text-2); font-weight: 600; font-size: 0.84rem; transition: border-color 0.25s ease, transform 0.25s ease; } .logobar__chip:hover { border-color: var(--accent); transform: translateY(-1px); } /* pilot proof statbar */ .statbar { padding: 64px 0 58px; } .statbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 980px) { .statbar__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .statbar__grid { grid-template-columns: 1fr; } } .stat { text-align: center; padding: 28px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .stat__num { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); display: block; line-height: 1.1; } .stat__num em { font-style: normal; color: var(--accent-deep); } .stat__label { display: block; margin-top: 8px; font-size: 0.88rem; color: var(--text-3); } .statbar__note { text-align: center; margin-top: 22px; font-size: 0.82rem; color: var(--text-3); } /* sourced market stats */ .mstat { border-left: 3px solid var(--accent); padding-left: 18px; } .mstat__num { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .mstat__src { font-size: 0.76rem; color: var(--text-3); } .mstat__src a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); } /* pain cards: pain → why tools fail → GAIA answer */ .pain { display: flex; flex-direction: column; gap: 14px; } .pain__quote { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .pain__row { font-size: 0.9rem; color: var(--text-2); padding-left: 14px; border-left: 2px solid var(--border-strong); } .pain__row b { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin-bottom: 3px; } .pain__row--gaia { border-left-color: var(--accent); } .pain__row--gaia b { color: var(--accent-deep); } /* plain-language translation line */ .means { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(12, 157, 110, 0.07); border: 1px solid rgba(12, 157, 110, 0.18); font-size: 0.84rem; color: var(--text-2); } .means b { color: var(--accent-deep); } /* numbered steps */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } } .step { position: relative; padding: 26px 24px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: inline-block; margin-bottom: 14px; font-family: var(--mono); font-size: 0.82rem; font-weight: 700; color: var(--accent-deep); background: rgba(12, 157, 110, 0.1); border: 1px solid rgba(12, 157, 110, 0.25); border-radius: 8px; padding: 4px 9px; } /* pricing tiers */ .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; } @media (max-width: 1080px) { .tiers { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tiers { grid-template-columns: 1fr; } } .tier { display: flex; flex-direction: column; padding: 28px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform 0.3s ease, box-shadow 0.3s ease; } .tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .tier--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); position: relative; } .tier__flag { position: absolute; top: -12px; left: 24px; background: var(--accent-deep); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; } .tier__name { font-size: 1.06rem; font-weight: 750; margin: 0 0 4px; } .tier__who { font-size: 0.84rem; color: var(--text-3); min-height: 2.4em; } .tier__price { margin: 16px 0 2px; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .tier__price small { font-size: 0.82rem; font-weight: 600; color: var(--text-3); } .tier__sub { font-size: 0.8rem; color: var(--text-3); margin-bottom: 16px; } .tier__list { list-style: none; margin: 0 0 22px; padding: 0; font-size: 0.88rem; color: var(--text-2); flex: 1; } .tier__list li { padding: 6px 0 6px 24px; position: relative; } .tier__list li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent-deep); font-weight: 700; } .tier .btn { width: 100%; justify-content: center; text-align: center; } /* ROI table accents */ .t .roi-good { color: var(--accent-deep); font-weight: 700; } .t td, .t th { font-variant-numeric: tabular-nums; } /* sector / ICP cards */ .sector { display: flex; gap: 14px; align-items: flex-start; } .sector__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; background: rgba(12, 157, 110, 0.09); border: 1px solid rgba(12, 157, 110, 0.2); } /* FAQ accordion */ .faq { max-width: 760px; margin: 0 auto; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; overflow: hidden; } .faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 650; font-size: 0.96rem; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 14px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.3rem; color: var(--text-3); transition: transform 0.25s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .faq .faq__body { padding: 0 22px 18px; font-size: 0.92rem; color: var(--text-2); } /* -------------------------------------------------------------------------- Theme toggle button (nav) -------------------------------------------------------------------------- */ .nav__theme { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--text-2); font-size: 1rem; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .nav__theme:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-1px); } /* -------------------------------------------------------------------------- Dark-theme targeted overrides (non-variable cases) -------------------------------------------------------------------------- */ [data-theme="dark"] .nav__logo, [data-theme="dark"] .hero__watermark { filter: invert(1); } [data-theme="dark"] .hero__watermark { opacity: 0.055; } [data-theme="dark"] .grad { background: linear-gradient(98deg, #3ee0b1 0%, #2dd4a7 38%, #7ab1fb 80%, #a78bfa 105%); -webkit-background-clip: text; background-clip: text; } [data-theme="dark"] .hero::after { background-image: radial-gradient(rgba(237, 242, 249, 0.06) 1px, transparent 1.4px); } [data-theme="dark"] .badge--error { color: #f0a9ae; border-color: rgba(240,169,174,0.32); background: rgba(240,169,174,0.1); } [data-theme="dark"] .pipeline__step--gate { background: rgba(45, 212, 167, 0.08); } [data-theme="dark"] .card__icon { background: linear-gradient(135deg, rgba(45,212,167,0.14), rgba(122,177,251,0.14)); } [data-theme="dark"] .console { border-color: rgba(148, 163, 184, 0.35); } [data-theme="dark"] .cta-band { border-top: 1px solid var(--border); } [data-theme="dark"] .btn--primary { color: #06251b; } [data-theme="dark"] .btn--primary { background: linear-gradient(135deg, #2dd4a7, #14b487); } [data-theme="dark"] .tier__flag { color: #06251b; background: var(--accent); } [data-theme="dark"] .nav__cta { background: var(--text); color: #0a1120 !important; } [data-theme="dark"] .nav__cta:hover { background: #d6e0ee; }