/* ============================================================================ RPACPC — Suite / product detail pages (extends css/styles.css tokens) Per-page accent is set on via --acc / --acc-tint / --acc-strong. ============================================================================ */ :root { --acc: var(--primary); --acc-tint: var(--primary-tint); --acc-strong: var(--primary-strong); } /* ── Breadcrumb ────────────────────────────────────────────────────────── */ .crumb { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-bottom: 22px; } .crumb a { color: var(--muted); transition: color .15s; } .crumb a:hover { color: var(--acc); } .crumb .sep { opacity: .5; } .crumb .here { color: var(--ink); } /* ── Suite hero ────────────────────────────────────────────────────────── */ .shero { position: relative; display: block; padding: 20px 0 30px; overflow: hidden; } .shero .container { width: 100%; display: flex; flex-direction: column; } .shero .shero-grid { min-height: calc(100vh - 68px - 70px); align-content: center; margin-bottom: 24px; } .shero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(760px 440px at 14% -10%, var(--acc-tint) 0%, transparent 60%), radial-gradient(620px 420px at 96% 6%, var(--acc-tint) 0%, transparent 62%); opacity: .7; } .shero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; } .shero-art { margin: 0; display: flex; align-items: center; justify-content: center; height: 100%; } .shero-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; } .shero-badge { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 22px; } .shero-badge .sb-code { width: 46px; height: 46px; border-radius: 12px; background: var(--acc); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 14px; font-weight: 600; letter-spacing: -.02em; } .shero-badge .sb-meta { display: flex; flex-direction: column; } .shero-badge .sb-k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); } .shero-badge .sb-v { font-size: 13.5px; color: var(--body); } .shero h1 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.03em; line-height: 1.04; } .shero h1 .hl { color: var(--acc); } .shero-sub { font-size: clamp(16.5px, 1.4vw, 19px); color: var(--body); margin-top: 20px; max-width: 560px; line-height: 1.55; } .shero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .shero .btn-primary { background: var(--acc); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--acc) 60%, transparent); } .shero .btn-primary:hover { background: var(--acc-strong); } .shero .btn-secondary:hover { border-color: var(--acc); color: var(--acc); } .shero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); } .shero-meta .sm-item { display: flex; flex-direction: column; gap: 2px; } .shero-meta .sm-k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .shero-meta .sm-v { font-size: 14px; font-weight: 600; color: var(--ink); } /* Hero code card */ .shero-code { background: var(--ink); border: 1px solid var(--ink-3); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; height: 100%; } .shero-code-bar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .shero-code-bar .dots { display: flex; gap: 6px; } .shero-code-bar .dots i { width: 10px; height: 10px; border-radius: 50%; } .shero-code-bar .title { font-family: var(--f-mono); font-size: 13.5px; color: var(--d-muted); } .shero-code-bar .pill { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; color: var(--green); background: rgba(54,169,104,.14); padding: 5px 11px; border-radius: 20px; } .shero-code pre { margin: 0; padding: 26px 26px; font-family: var(--f-mono); font-size: 14.5px; line-height: 1.7; color: #C7D3F5; overflow-x: auto; flex: 1; } .shero-code .c-method { color: #7E9BFF; font-weight: 600; } .shero-code .c-key { color: #8FE3C2; } .shero-code .c-str { color: #E7C893; } .shero-code .c-com { color: #5E6C99; } .shero-code .c-punc { color: #6E7BA8; } /* ── Section heads on accent ───────────────────────────────────────────── */ .suite-page .eyebrow { color: var(--acc); } .section.dark .eyebrow { color: #8AA0FF; } /* ── Problems (dark) ───────────────────────────────────────────────────── */ .sprob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .sprob-card { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 16px; padding: 26px; transition: border-color .2s, transform .2s, background .2s; } .sprob-card:hover { border-color: rgba(138,160,255,.4); background: var(--d-surface-2); transform: translateY(-2px); } .sprob-ico { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.06); color: #8AA0FF; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .sprob-ico svg { width: 22px; height: 22px; } .sprob-card h3 { font-size: 17.5px; color: var(--d-text); letter-spacing: -.01em; margin-bottom: 9px; } .sprob-card p { font-size: 14px; color: var(--d-body); line-height: 1.55; } /* ── API catalog ───────────────────────────────────────────────────────── */ .scat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .scat-item { display: flex; gap: 15px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: background .15s, box-shadow .15s, transform .15s; position: relative; overflow: hidden; } .scat-item:hover { background: var(--surface-2); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .scat-num { font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--acc); background: var(--acc-tint); width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .scat-name { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; } .scat-name .star { color: var(--green-strong); font-size: 13px; } .scat-desc { font-size: 13.5px; color: var(--body); line-height: 1.5; margin-top: 5px; } .scat-ep { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); margin-top: 9px; } .scat-ep .m { color: var(--acc); font-weight: 600; } .scat-main { min-width: 0; } /* Linked catalog item (drills into a dedicated API page) */ a.scat-link { text-decoration: none; } a.scat-link::after { content: ""; position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 8px; background: var(--acc-tint); color: var(--acc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231542D3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity .15s; } a.scat-link:hover::after { opacity: .9; } .scat-go { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; color: var(--acc); margin-top: 12px; } .scat-go .arr { transition: transform .2s var(--ease); } a.scat-link:hover .scat-go .arr { transform: translateX(3px); } /* ── Benefits ──────────────────────────────────────────────────────────── */ .sben-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .sben-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow-sm); } .sben-ico { width: 44px; height: 44px; border-radius: 11px; background: var(--acc-tint); color: var(--acc); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .sben-ico svg { width: 22px; height: 22px; } .sben-card h3 { font-size: 16.5px; letter-spacing: -.01em; margin-bottom: 7px; } .sben-card p { font-size: 13.5px; color: var(--body); line-height: 1.55; } /* ── Use cases ─────────────────────────────────────────────────────────── */ .suse-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .suse-card { display: flex; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .15s, box-shadow .15s; } .suse-card:hover { border-color: var(--acc); box-shadow: var(--shadow-sm); } .suse-ico { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; background: var(--acc-tint); color: var(--acc); display: flex; align-items: center; justify-content: center; } .suse-ico svg { width: 22px; height: 22px; } .suse-card h3 { font-size: 16.5px; letter-spacing: -.01em; margin-bottom: 6px; } .suse-card p { font-size: 13.5px; color: var(--body); line-height: 1.55; } /* ── Integration steps ─────────────────────────────────────────────────── */ .sint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; } .sint-steps { display: flex; flex-direction: column; } .sint-step { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line-2); position: relative; } .sint-step:first-child { border-top: none; padding-top: 0; } .sint-n { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--acc); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 600; font-size: 16px; } .sint-step h3 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 5px; } .sint-step p { font-size: 13.5px; color: var(--body); line-height: 1.55; } /* Example response card */ .sex-card { background: var(--ink); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); } .sex-bar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); } .sex-bar .title { font-family: var(--f-mono); font-size: 12px; color: var(--d-muted); } .sex-bar .code { margin-left: auto; font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--green); background: rgba(54,169,104,.14); padding: 4px 9px; border-radius: 20px; } .sex-card pre { margin: 0; padding: 20px; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.7; color: #C7D3F5; overflow-x: auto; } .sex-card .c-key { color: #8FE3C2; } .sex-card .c-str { color: #E7C893; } .sex-card .c-num { color: #C9A0FF; } .sex-card .c-bool { color: #7E9BFF; } .sex-card .c-punc { color: #6E7BA8; } /* ── Related suites ────────────────────────────────────────────────────── */ .srel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .srel-card { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .15s, box-shadow .15s, transform .15s; } .srel-card:hover { border-color: var(--rel, var(--primary)); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .srel-code { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; background: var(--rel-tint, var(--primary-tint)); color: var(--rel, var(--primary)); } .srel-name { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; } .srel-tease { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; } .srel-arr { margin-left: auto; color: var(--faint); transition: transform .2s, color .2s; } .srel-card:hover .srel-arr { transform: translateX(3px); color: var(--rel, var(--primary)); } /* ── FAQ accordion ─────────────────────────────────────────────────────── */ .faq-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .15s, box-shadow .15s; } .faq-item[open] { border-color: var(--acc); box-shadow: var(--shadow-md); } .faq-item summary { display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font-family: var(--f-display); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; line-height: 1.4; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--acc); } .faq-q { flex: 1; text-wrap: pretty; } .faq-icon { position: relative; width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; background: var(--acc-tint); transition: background .2s; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; border-radius: 2px; background: var(--acc); transform: translate(-50%, -50%); transition: transform .25s var(--ease); } .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0); } .faq-a { padding: 0 24px 22px; font-size: 15px; line-height: 1.65; color: var(--body); } .faq-a p + p { margin-top: 12px; } .faq-a a { color: var(--acc); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--acc) 35%, transparent); text-underline-offset: 3px; } .faq-a b { color: var(--ink); font-weight: 600; } .faq-cta { max-width: 820px; margin: 26px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; font-size: 14.5px; color: var(--muted); text-align: center; } .faq-cta a { font-weight: 600; color: var(--acc); display: inline-flex; align-items: center; gap: 6px; } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 1080px) { .shero-grid { grid-template-columns: 1fr; gap: 36px; } .sint-grid { grid-template-columns: 1fr; gap: 36px; } .sprob-grid { grid-template-columns: 1fr; } .sben-grid { grid-template-columns: repeat(2, 1fr); } .srel-grid { grid-template-columns: 1fr; } } @media (max-width: 620px) { .scat-grid, .suse-grid, .sben-grid { grid-template-columns: 1fr; } .shero-meta { gap: 14px 20px; } }