/* ============================================================ ATMOSLY — PER-CORE CAPABILITY PAGES Shared system for dedicated product pages (AI SRE, Cost, …). Loads after home.css / home-v2.css / home-v3.css and reuses their tokens, nav, footer, buttons, and .osm-* mock atoms. Page-specific classes are prefixed `pg-` to avoid colliding with section rules like `.ops { padding:100px 0 }`. ============================================================ */ /* Per-page accent — set on etc. */ .pg { --pg-1: var(--c-ops-1); --pg-2: var(--c-ops-2); --pg-soft: #EAF1FF; --pg-ink: #1B4DC8; } .pg-cost { --pg-1: #0E9F6E; --pg-2: #34D399; --pg-soft: #E6F7F0; --pg-ink: #0B7A53; } .pg-sec { --pg-1: #4F46E5; --pg-2: #06B6D4; --pg-soft: #ECEDFB; --pg-ink: #3730A3; } /* Solution (persona) page accents — span all three cores */ .pg-sol-startup { --pg-1: var(--c-ops-1); --pg-2: var(--c-ops-2); --pg-soft: #EAF1FF; --pg-ink: #1B4DC8; } .pg-sol-scale { --pg-1: #0D9488; --pg-2: #2DD4BF; --pg-soft: #DEF3EF; --pg-ink: #0B6E63; } .pg-sol-saas { --pg-1: #7C5CFF; --pg-2: #B07CFF; --pg-soft: #F0ECFF; --pg-ink: #5B3FD6; } .pg-sol-ent { --pg-1: #4F46E5; --pg-2: #06B6D4; --pg-soft: #ECEDFB; --pg-ink: #3730A3; } .pg-sol-idp { --pg-1: #4361EE; --pg-2: #5B8CFF; --pg-soft: #E8ECFF; --pg-ink: #2B3FB8; } /* IDP pillar — portal vs execution split, used on the IDP page */ .pg-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; border: 1px solid var(--line-1); border-radius: 18px; overflow: hidden; background: var(--card, #fff); box-shadow: var(--shadow-lg); } @media (max-width: 820px) { .pg-vs { grid-template-columns: 1fr; } } .pg-vs-side { padding: 30px 30px 34px; } .pg-vs-side.exec { background: radial-gradient(130% 100% at 100% 0%, color-mix(in oklch, var(--pg-1) 10%, transparent), transparent 62%), var(--card, #fff); } .pg-vs-mid { display: grid; place-items: center; background: var(--bg-tint); border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); padding: 0 18px; } @media (max-width: 820px) { .pg-vs-mid { border: none; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 14px 0; } } .pg-vs-vs { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-4); text-transform: uppercase; } .pg-vs-tag { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 7px; } .pg-vs-tag .vk { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 9px; border-radius: 999px; } .pg-vs-side.portal .vk { background: rgba(20,40,90,0.06); color: var(--ink-3); } .pg-vs-side.exec .vk { background: var(--pg-soft); color: var(--pg-ink); } .pg-vs-h { font-size: 20px; font-weight: 750; letter-spacing: -0.018em; color: var(--ink-1); margin: 0 0 16px; } .pg-vs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; } .pg-vs-list li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .pg-vs-list li .vi { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; } .pg-vs-side.portal .vi { background: rgba(20,40,90,0.06); color: var(--ink-4); } .pg-vs-side.exec .vi { background: var(--pg-soft); color: var(--pg-1); } .pg-vs-list li .vi svg { width: 11px; height: 11px; } /* Solution pages use a single-column (centered) hero */ .pg-sol .pg-hero-inner { grid-template-columns: 1fr; max-width: 860px; } .pg-sol .pg-hero-copy { text-align: center; } .pg-sol .pg-hero-copy .pg-breadcrumb, .pg-sol .pg-hero-copy .pg-eyebrow, .pg-sol .pg-hero-copy .pg-ctas, .pg-sol .pg-hero-copy .pg-hero-micro { justify-content: center; } .pg-sol .pg-hero-copy .pg-lede { margin-left: auto; margin-right: auto; } /* Powered-by-cores strip under the hero */ .sol-cores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 26px; } .sol-core { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--card, #fff); border: 1px solid var(--line-1); font-size: 13px; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow-sm); } .sol-core .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; padding: 0; } .sol-core .dot.sd-ops { background: var(--c-ops-1, #2E6BFF); } .sol-core .dot.sd-cd { background: #7C5CFF; } .sol-core .dot.sd-prov { background: #0D9488; } /* "Frameworks covered" strip — a small per-page variation used on the Security page (other pages don't have it). */ .pg-fw-strip { border-bottom: 1px solid var(--line-2); background: var(--bg-tint); padding: 24px 0; } .pg-fw-inner { display: flex; align-items: center; justify-content: center; gap: 14px 30px; flex-wrap: wrap; } .pg-fw-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-4); } .pg-fw { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); letter-spacing: -0.01em; } .pg-fw svg { width: 15px; height: 15px; color: var(--pg-1); } /* keep the page from sitting under the fixed nav */ .pg main { display: block; } /* ============================================================ HERO ============================================================ */ .pg-hero { position: relative; padding: 74px 0 72px; background: var(--bg); overflow: hidden; border-bottom: 1px solid var(--line-2); } .pg-hero-bg { position: absolute; inset: 0; pointer-events: none; } .pg-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(20,40,90,0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(20,40,90,0.045) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 75%); } .pg-hero-blob { position: absolute; width: 620px; height: 620px; border-radius: 50%; filter: blur(20px); opacity: 0.5; } .pg-hero-blob.a { top: -260px; right: -160px; background: radial-gradient(closest-side, color-mix(in oklch, var(--pg-1) 26%, transparent), transparent); } .pg-hero-blob.b { top: -120px; right: 180px; background: radial-gradient(closest-side, color-mix(in oklch, var(--pg-2) 22%, transparent), transparent); } .pg-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.1fr); gap: 56px; align-items: center; } @media (max-width: 980px) { .pg-hero-inner { grid-template-columns: 1fr; gap: 40px; } } .pg-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-4); margin-bottom: 20px; } .pg-breadcrumb a { color: var(--ink-4); } .pg-breadcrumb a:hover { color: var(--pg-1); } .pg-breadcrumb svg { width: 11px; height: 11px; opacity: 0.6; } .pg-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 10px; border-radius: 999px; background: var(--pg-soft); color: var(--pg-ink); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 22px; } .pg-eyebrow .pg-chip { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--pg-1), var(--pg-2)); color: #fff; } .pg-eyebrow .pg-chip svg { width: 12px; height: 12px; } .pg-h1 { font-size: clamp(36px, 4.6vw, 58px); font-weight: 800; letter-spacing: -0.026em; line-height: 1.04; color: var(--ink-1); margin: 0 0 20px; text-wrap: balance; } .pg-h1 em { font-style: normal; color: var(--pg-1); } .pg-lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.62; color: var(--ink-3); max-width: 36em; margin: 0 0 28px; text-wrap: pretty; } .pg-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .pg-hero-micro { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 0; margin: 0; } .pg-hero-micro li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-3); font-weight: 500; } .pg-hero-micro .ck { color: var(--pg-1); font-weight: 800; } /* ============================================================ SHARED SECTION SHELL ============================================================ */ .pg-section { padding: 84px 0; } .pg-section.tint { background: var(--bg-tint); } .pg-shead { max-width: 760px; margin: 0 0 48px; } .pg-shead.center { margin-left: auto; margin-right: auto; text-align: center; } .pg-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pg-1); margin-bottom: 14px; } .pg-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--pg-1); } .pg-shead h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.022em; line-height: 1.1; color: var(--ink-1); margin: 0 0 14px; text-wrap: balance; } .pg-shead p { font-size: 17px; line-height: 1.6; color: var(--ink-3); margin: 0; text-wrap: pretty; } /* ============================================================ DARK BANDS — re-scope tokens so a section flips to dark. Mirrors the home-mix.css technique: descendants resolve their bg / ink / line / card / accent against these. Apply `.pg-dark` to any .pg-section (or the CTA band). ============================================================ */ .pg-dark { --bg: #0A0F1C; --bg-tint: #0E1424; --bg-sunken: #070B14; --card: #131A2C; --ink-1: #F1F5FC; --ink-2: #BFCADD; --ink-3: #8A97AE; --ink-4: #66728A; --ink-5: #2F3A50; --line-1: rgba(255,255,255,0.10); --line-2: rgba(255,255,255,0.065); --line-3: rgba(255,255,255,0.04); --pg-soft: color-mix(in oklch, var(--pg-1) 22%, transparent); --pg-ink: color-mix(in oklch, var(--pg-1) 55%, white); --shadow-lg: 0 28px 60px -24px rgba(0,0,0,0.7), 0 10px 28px -10px rgba(0,0,0,0.5); background: var(--bg); position: relative; overflow: hidden; } .pg-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(760px 380px at 84% 4%, color-mix(in oklch, var(--pg-1) 16%, transparent), transparent 60%), radial-gradient(640px 380px at 6% 96%, color-mix(in oklch, var(--pg-2) 12%, transparent), transparent 60%); } .pg-dark > .container { position: relative; z-index: 1; } /* card-bar tint reads better as a light wash on dark */ .pg-dark .pg-card-bar { background: rgba(255,255,255,0.03); } .pg-dark .pg-code { background: #070B14; } /* secondary button on dark bands — base .btn-sec is hardcoded white bg */ .pg-dark .btn-sec { background: rgba(255,255,255,0.06); color: var(--ink-1); border-color: var(--line-1); box-shadow: none; } .pg-dark .btn-sec:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); } /* ============================================================ FEATURE ROWS (alternating media / copy) ============================================================ */ .pg-rows { display: flex; flex-direction: column; gap: 30px; } .pg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .pg-row.flip .pg-row-media { order: 2; } @media (max-width: 900px) { .pg-row, .pg-row.flip .pg-row-media { grid-template-columns: 1fr; order: 0; } } .pg-row-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--pg-1); letter-spacing: 0.02em; margin-bottom: 12px; } .pg-row-body h3 { font-size: 24px; font-weight: 750; letter-spacing: -0.018em; color: var(--ink-1); margin: 0 0 12px; line-height: 1.18; } .pg-row-body > p { font-size: 16px; line-height: 1.62; color: var(--ink-3); margin: 0 0 18px; } .pg-row-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; } .pg-row-list li { display: flex; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--ink-2); } .pg-row-list svg { flex-shrink: 0; margin-top: 3px; color: var(--pg-1); } /* media surface */ .pg-card { background: var(--card, #fff); border: 1px solid var(--line-1); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; } .pg-card-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: rgba(20,40,90,0.02); } .pg-card-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-5); } .pg-card-bar .ttl { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); margin-left: 4px; } .pg-card-body { padding: 16px; } /* ============================================================ SRE: ISSUE LIST → RCA → REMEDIATION mock ============================================================ */ .pg-sre-console { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 0; background: var(--card, #fff); border: 1px solid var(--line-1); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); } @media (max-width: 820px) { .pg-sre-console { grid-template-columns: 1fr; } } .pg-sre-list { border-right: 1px solid var(--line-2); background: rgba(20,40,90,0.015); } @media (max-width: 820px) { .pg-sre-list { border-right: none; border-bottom: 1px solid var(--line-2); } } .pg-sre-listhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-2); } .pg-sre-listhead .t { font-size: 13px; font-weight: 700; color: var(--ink-2); } .pg-sre-listhead .live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-family: var(--font-mono); color: var(--ink-4); } .pg-sre-listhead .live i { width: 7px; height: 7px; border-radius: 50%; background: #E5484D; } .pg-pulse { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 0 rgba(229,72,77,0.5); animation: pgpulse 1.8s infinite; } @keyframes pgpulse { 0%{box-shadow:0 0 0 0 rgba(229,72,77,0.45)} 70%{box-shadow:0 0 0 7px rgba(229,72,77,0)} 100%{box-shadow:0 0 0 0 rgba(229,72,77,0)} } .pg-issue { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line-3); cursor: default; } .pg-issue:last-child { border-bottom: none; } .pg-issue.sel { background: color-mix(in oklch, var(--pg-1) 7%, transparent); box-shadow: inset 3px 0 0 var(--pg-1); } .pg-issue-dot { width: 9px; height: 9px; border-radius: 50%; } .pg-issue-dot.crit { background: #E5484D; } .pg-issue-dot.high { background: #F5A623; } .pg-issue-main { min-width: 0; } .pg-issue-title { font-size: 13.5px; font-weight: 650; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-issue-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-top: 2px; } .pg-sev { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 5px; letter-spacing: 0.04em; } .pg-sev.crit { background: #FFF1F0; color: #CF1322; } .pg-sev.high { background: #FFF7E6; color: #D46B08; } /* RCA / remediation right pane */ .pg-rca { padding: 18px 20px; } .pg-rca-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .pg-rca-h { font-size: 15px; font-weight: 750; color: var(--ink-1); letter-spacing: -0.01em; } .pg-ai-pill { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: linear-gradient(135deg, color-mix(in oklch, var(--pg-1) 14%, transparent), color-mix(in oklch, var(--pg-2) 10%, transparent)); color: var(--pg-ink); border: 1px solid color-mix(in oklch, var(--pg-1) 22%, transparent); } .pg-ai-pill svg { width: 11px; height: 11px; } .pg-rca-block { margin-bottom: 13px; } .pg-rca-label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); margin-bottom: 5px; } .pg-rca-text { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); } .pg-rca-text .mono, .pg-rca code { font-family: var(--font-mono); font-size: 12px; background: rgba(20,40,90,0.06); padding: 1px 5px; border-radius: 4px; color: var(--ink-1); } .pg-conf { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .pg-conf-track { flex: 1; height: 6px; border-radius: 3px; background: rgba(20,40,90,0.08); overflow: hidden; max-width: 160px; } .pg-conf-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--pg-1), var(--pg-2)); } .pg-conf-val { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink-2); } .pg-fix { border: 1px solid var(--line-1); border-radius: 12px; padding: 13px 14px; margin-top: 12px; background: var(--bg, #fff); } .pg-fix.rec { border-color: color-mix(in oklch, var(--pg-1) 40%, transparent); box-shadow: 0 6px 18px -10px color-mix(in oklch, var(--pg-1) 45%, transparent); } .pg-fix-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; } .pg-fix-rank { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #fff; background: var(--pg-1); padding: 3px 7px; border-radius: 5px; } .pg-fix-rank.alt { background: var(--ink-4); } .pg-fix-title { font-size: 13.5px; font-weight: 700; color: var(--ink-1); } .pg-fix-rationale { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin: 0 0 10px; } .pg-code { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; background: #0E1424; color: #C9D6EE; border-radius: 8px; padding: 10px 12px; white-space: pre; overflow-x: auto; } .pg-code .add { color: #4ADE80; } .pg-code .del { color: #F87171; } .pg-code .cmt { color: #6B7A99; } .pg-fix-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .pg-tag { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 5px; background: rgba(20,40,90,0.05); color: var(--ink-3); } .pg-tag.ok { background: #E6F7F0; color: #0B7A53; } .pg-tag.warn { background: #FFF7E6; color: #D46B08; } .pg-precon { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 5px; } .pg-precon li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); } .pg-precon .mk { width: 14px; height: 14px; flex-shrink: 0; } .pg-precon .mk.yes { color: #0E9F6E; } .pg-precon .mk.no { color: #E5484D; } /* ============================================================ COST: analyser dashboard mock ============================================================ */ .pg-cost-dash { display: grid; gap: 14px; } .pg-cost-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; } @media (max-width: 720px) { .pg-cost-top { grid-template-columns: 1fr; } } .pg-cost-hero-num { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-1); line-height: 1; } .pg-cost-hero-sub { font-size: 13px; color: var(--ink-4); margin-top: 6px; } .pg-cost-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: #0E9F6E; margin-left: 10px; vertical-align: 4px; } .pg-cloud-split { display: flex; flex-direction: column; gap: 9px; justify-content: center; } .pg-cloud-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 9px; align-items: center; font-size: 12.5px; } .pg-cloud-row .nm { font-family: var(--font-mono); color: var(--ink-3); } .pg-cloud-row .amt { font-family: var(--font-mono); color: var(--ink-2); font-weight: 600; } .pg-cloud-track { height: 7px; border-radius: 4px; background: rgba(20,40,90,0.07); overflow: hidden; } .pg-cloud-fill { height: 100%; border-radius: 4px; } .pg-rec-table { border: 1px solid var(--line-1); border-radius: 12px; overflow: hidden; } .pg-rec-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 8px; padding: 11px 14px; align-items: center; border-bottom: 1px solid var(--line-3); font-size: 12.5px; } .pg-rec-row.head { background: rgba(20,40,90,0.03); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-4); } .pg-rec-row:last-child { border-bottom: none; } .pg-rec-wl { font-weight: 650; color: var(--ink-1); } .pg-rec-type { font-family: var(--font-mono); font-size: 10.5px; color: var(--pg-ink); background: var(--pg-soft); padding: 2px 7px; border-radius: 5px; justify-self: start; } .pg-rec-cur { font-family: var(--font-mono); color: var(--ink-4); text-decoration: line-through; } .pg-rec-save { font-family: var(--font-mono); font-weight: 700; color: #0E9F6E; } /* ============================================================ STAT / OUTCOME BAND ============================================================ */ .pg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 760px) { .pg-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; } } .pg-stat { } .pg-stat-num { font-size: clamp(32px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.02em; color: var(--pg-1); line-height: 1; } .pg-stat-lbl { font-size: 14px; color: var(--ink-3); margin-top: 10px; line-height: 1.45; } /* ============================================================ FEATURE GRID (small capability tiles) ============================================================ */ .pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 860px) { .pg-grid { grid-template-columns: 1fr; } } .pg-tile { background: var(--card, #fff); border: 1px solid var(--line-1); border-radius: 14px; padding: 24px; } .pg-tile-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--pg-soft); color: var(--pg-1); margin-bottom: 16px; } .pg-tile-ic svg { width: 20px; height: 20px; } .pg-tile h3 { font-size: 17px; font-weight: 700; color: var(--ink-1); margin: 0 0 9px; letter-spacing: -0.01em; } .pg-tile p { font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 0; } /* ============================================================ RELATED CORES (cross-links) ============================================================ */ .pg-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 760px) { .pg-related { grid-template-columns: 1fr; } } .pg-rel { display: block; background: var(--card, #fff); border: 1px solid var(--line-1); border-radius: 14px; padding: 22px; transition: border-color .15s, transform .15s; } .pg-rel:hover { border-color: var(--ink-5); transform: translateY(-2px); } .pg-rel-k { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-bottom: 8px; } .pg-rel h3 { font-size: 17px; font-weight: 700; color: var(--ink-1); margin: 0 0 7px; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .pg-rel p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin: 0; } .pg-rel-arrow { margin-left: auto; color: var(--ink-4); } .pg-cta-band { background: var(--bg-tint); border-top: 1px solid var(--line-2); padding: 80px 0; } /* ============================================================ FAQ ============================================================ */ .pg-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .pg-faq-item { background: var(--card, #fff); border: 1px solid var(--line-1); border-radius: 12px; overflow: hidden; } .pg-faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 650; color: var(--ink-1); letter-spacing: -0.01em; } .pg-faq-item summary::-webkit-details-marker { display: none; } .pg-faq-item summary .pg-faq-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--pg-soft); color: var(--pg-1); transition: transform .2s; } .pg-faq-item summary .pg-faq-ic svg { width: 13px; height: 13px; } .pg-faq-item[open] summary .pg-faq-ic { transform: rotate(45deg); } .pg-faq-body { padding: 0 22px 20px; font-size: 15px; line-height: 1.62; color: var(--ink-3); max-width: 64ch; } .pg-faq-body .mono { font-family: var(--font-mono); font-size: 13px; background: rgba(20,40,90,0.06); padding: 1px 5px; border-radius: 4px; color: var(--ink-2); } .pg-dark .pg-faq-body .mono { background: rgba(255,255,255,0.08); } /* ============================================================ BLOG / LATEST POSTS ============================================================ */ .pg-blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; } .pg-blog-link { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--pg-1); } .pg-blog-link:hover { gap: 9px; } .pg-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 860px) { .pg-blog-grid { grid-template-columns: 1fr; } } .pg-post { display: flex; flex-direction: column; background: var(--card, #fff); border: 1px solid var(--line-1); border-radius: 14px; overflow: hidden; transition: border-color .15s, transform .15s; } .pg-post:hover { border-color: color-mix(in oklch, var(--pg-1) 45%, transparent); transform: translateY(-3px); } .pg-post-top { aspect-ratio: 2 / 1; position: relative; overflow: hidden; background: radial-gradient(120% 140% at 85% 10%, color-mix(in oklch, var(--pg-1) 32%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in oklch, var(--pg-1) 14%, var(--card,#fff)), var(--card,#fff)); border-bottom: 1px solid var(--line-2); } .pg-post-top::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, color-mix(in oklch, var(--pg-1) 12%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--pg-1) 12%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(80% 100% at 80% 0%, #000, transparent 75%); mask-image: radial-gradient(80% 100% at 80% 0%, #000, transparent 75%); } .pg-post-cat { position: absolute; left: 16px; bottom: 14px; z-index: 1; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pg-ink); white-space: nowrap; background: var(--bg, #fff); border: 1px solid var(--line-1); padding: 4px 9px; border-radius: 999px; } .pg-post-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; } .pg-post-body h3 { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink-1); margin: 0 0 10px; letter-spacing: -0.01em; text-wrap: pretty; } .pg-post-body p { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin: 0 0 16px; } .pg-post-meta { margin-top: auto; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); } .pg-post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-5); } /* ============================================================ SOLUTION DEEP-DIVE — generic mock atoms for pg-rows media. Lightweight, content-driven panels (no bespoke consoles) so every persona page can show "inside the workflow" depth. ============================================================ */ /* mini list rows inside a pg-card */ .pg-mk-list { display: flex; flex-direction: column; } .pg-mk-row { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line-3); } .pg-mk-row:last-child { border-bottom: none; } .pg-mk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pg-1); flex-shrink: 0; } .pg-mk-dot.ok { background: #0E9F6E; } .pg-mk-dot.warn { background: #F5A623; } .pg-mk-dot.crit { background: #E5484D; } .pg-mk-main { min-width: 0; } .pg-mk-t { font-size: 13.5px; font-weight: 650; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-mk-s { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-top: 2px; } .pg-mk-v { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink-2); justify-self: end; white-space: nowrap; } .pg-mk-v.ok { color: #0E9F6E; } .pg-mk-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 5px; background: var(--pg-soft); color: var(--pg-ink); justify-self: end; } /* mini metric tiles inside a pg-card */ .pg-mk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pg-mk-tile { border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 14px; background: var(--bg, #fff); } .pg-mk-tile .n { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-1); line-height: 1; } .pg-mk-tile .n em { font-style: normal; color: var(--pg-1); } .pg-mk-tile .l { font-size: 11.5px; color: var(--ink-4); margin-top: 7px; line-height: 1.4; } /* horizontal flow / pipeline strip inside a pg-card */ .pg-mk-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pg-mk-step { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line-1); background: var(--bg, #fff); font-size: 12.5px; font-weight: 650; color: var(--ink-2); } .pg-mk-step .i { width: 7px; height: 7px; border-radius: 50%; background: var(--pg-1); } .pg-mk-step.done { border-color: color-mix(in oklch, #0E9F6E 40%, transparent); background: #E6F7F0; color: #0B7A53; } .pg-mk-step.done .i { background: #0E9F6E; } .pg-mk-arrow { color: var(--ink-5); flex-shrink: 0; } /* ============================================================ COMPARISON BAND — "Without Atmosly" vs "With Atmosly" ============================================================ */ .pg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 760px) { .pg-compare { grid-template-columns: 1fr; } } .pg-compare-col { border-radius: 16px; padding: 28px 28px 30px; border: 1px solid var(--line-1); background: var(--card, #fff); } .pg-compare-col.after { border-color: color-mix(in oklch, var(--pg-1) 38%, transparent); background: radial-gradient(120% 100% at 100% 0%, color-mix(in oklch, var(--pg-1) 9%, transparent), transparent 60%), var(--card, #fff); box-shadow: 0 18px 44px -26px color-mix(in oklch, var(--pg-1) 60%, transparent); } .pg-compare-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-4); margin-bottom: 16px; } .pg-compare-col.after .pg-compare-tag { color: var(--pg-1); } .pg-compare-tag .d { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-5); } .pg-compare-col.after .pg-compare-tag .d { background: var(--pg-1); } .pg-compare-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .pg-compare-list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); } .pg-compare-list li .ci { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; } .pg-compare-col.before .ci { background: rgba(229,72,77,0.10); color: #E5484D; } .pg-compare-col.after .ci { background: var(--pg-soft); color: var(--pg-1); } .pg-compare-list li .ci svg { width: 12px; height: 12px; } /* on-page sub-nav (anchored jump links) */ .pg-jump { border-bottom: 1px solid var(--line-2); background: var(--bg); position: sticky; top: 0; z-index: 20; } .pg-jump-inner { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 12px 0; -ms-overflow-style: none; scrollbar-width: none; } .pg-jump-inner::-webkit-scrollbar { display: none; } .pg-jump a { white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink-3); padding: 7px 13px; border-radius: 999px; transition: background .15s, color .15s; } .pg-jump a:hover { background: var(--pg-soft); color: var(--pg-ink); } /* ============================================================ BLOG INDEX — category chips + featured post ============================================================ */ .pg-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; } .pg-chip-f { font-size: 13.5px; font-weight: 600; color: var(--ink-3); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-1); background: var(--card, #fff); cursor: pointer; white-space: nowrap; transition: background .14s, color .14s, border-color .14s; } .pg-chip-f:hover { border-color: var(--ink-5); color: var(--ink-1); } .pg-chip-f.is-active { background: var(--pg-soft); color: var(--pg-ink); border-color: transparent; } .pg-blog-feature { display: grid; grid-template-columns: 1.12fr 1fr; gap: 0; align-items: stretch; background: var(--card, #fff); border: 1px solid var(--line-1); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); margin-bottom: 40px; transition: border-color .15s, transform .15s; } @media (max-width: 860px) { .pg-blog-feature { grid-template-columns: 1fr; } } .pg-blog-feature:hover { border-color: color-mix(in oklch, var(--pg-1) 42%, transparent); transform: translateY(-2px); } .pg-blog-feature-media { position: relative; min-height: 280px; overflow: hidden; border-right: 1px solid var(--line-2); background: radial-gradient(120% 130% at 82% 8%, color-mix(in oklch, var(--pg-1) 34%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in oklch, var(--pg-1) 16%, var(--card,#fff)), var(--card,#fff)); } @media (max-width: 860px) { .pg-blog-feature-media { border-right: none; border-bottom: 1px solid var(--line-2); min-height: 180px; } } .pg-blog-feature-media::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, color-mix(in oklch, var(--pg-1) 12%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--pg-1) 12%, transparent) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(80% 100% at 80% 0%, #000, transparent 75%); mask-image: radial-gradient(80% 100% at 80% 0%, #000, transparent 75%); } .pg-blog-feature-badge { position: absolute; left: 22px; top: 20px; z-index: 1; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--pg-1); padding: 5px 11px; border-radius: 999px; } .pg-blog-feature-body { padding: 34px 36px; display: flex; flex-direction: column; } .pg-blog-feature-cat { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pg-ink); margin-bottom: 14px; } .pg-blog-feature-body h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; color: var(--ink-1); margin: 0 0 14px; text-wrap: balance; } .pg-blog-feature-body p { font-size: 15.5px; line-height: 1.62; color: var(--ink-3); margin: 0 0 22px; } .pg-blog-feature-meta { margin-top: auto; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); } .pg-blog-feature-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-5); } /* ============================================================ CASE STUDIES — story cards (pg-system port of homepage .stories) ============================================================ */ .pg-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 920px) { .pg-stories { grid-template-columns: 1fr; } } .pg-story { display: flex; flex-direction: column; background: var(--card, #fff); border: 1px solid var(--line-1); border-radius: 16px; padding: 24px; transition: border-color .15s, transform .15s; } .pg-story:hover { border-color: color-mix(in oklch, var(--pg-1) 42%, transparent); transform: translateY(-3px); } .pg-story-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); margin-bottom: 18px; } .pg-story-logo { font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; color: var(--ink-1); } .pg-story-meta { text-align: right; font-size: 12px; color: var(--ink-3); line-height: 1.45; } .pg-story-meta .mono { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); } .pg-story-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } .pg-story-num { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--pg-1); line-height: 1.1; } .pg-story-num-label { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.42; margin-top: 6px; } .pg-story blockquote { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); } .pg-story-byline { display: flex; align-items: center; gap: 11px; margin-top: auto; } .pg-story-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--pg-1), var(--pg-2)); } .pg-story-byline .who b { font-size: 13.5px; color: var(--ink-1); display: block; } .pg-story-byline .who span { font-size: 12px; color: var(--ink-4); } .pg-story-read { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--pg-1); white-space: nowrap; align-self: center; } /* ============================================================ PRICING — tier cards + feature comparison ============================================================ */ .pg-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } @media (max-width: 940px) { .pg-price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } } .pg-price { position: relative; display: flex; flex-direction: column; background: var(--card, #fff); border: 1px solid var(--line-1); border-radius: 18px; padding: 28px; } .pg-price.feat { border-color: color-mix(in oklch, var(--pg-1) 50%, transparent); box-shadow: 0 22px 54px -28px color-mix(in oklch, var(--pg-1) 60%, transparent); } .pg-price-badge { position: absolute; top: -12px; left: 28px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--pg-1); padding: 5px 11px; border-radius: 999px; } .pg-price-h { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-1); } .pg-price-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); margin-top: 5px; } .pg-price-amt { display: flex; align-items: baseline; gap: 7px; margin: 18px 0 0; } .pg-price-num { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-1); } .pg-price-unit { font-size: 13px; color: var(--ink-4); } .pg-price-blurb { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin: 12px 0 20px; } .pg-price-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; } .pg-price-list li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); } .pg-price-list li svg { flex-shrink: 0; margin-top: 2px; color: var(--pg-1); width: 15px; height: 15px; } .pg-price .btn { margin-top: auto; } .pg-price-note { text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); margin-top: 28px; } .pg-cmp { border: 1px solid var(--line-1); border-radius: 16px; overflow: hidden; background: var(--card, #fff); } @media (max-width: 760px) { .pg-cmp { overflow-x: auto; } .pg-cmp-inner { min-width: 660px; } } .pg-cmp-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; align-items: center; } .pg-cmp-row > div { padding: 13px 18px; font-size: 13.5px; color: var(--ink-2); } .pg-cmp-row .feat-col { color: var(--ink-1); font-weight: 600; } .pg-cmp-row + .pg-cmp-row { border-top: 1px solid var(--line-3); } .pg-cmp-head { background: rgba(20,40,90,0.03); } .pg-cmp-head > div { font-size: 13px; font-weight: 700; color: var(--ink-1); } .pg-cmp-head .tier { text-align: center; } .pg-cmp-head .tier.feat { color: var(--pg-1); } .pg-cmp-head .tier span { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--ink-4); margin-top: 3px; } .pg-cmp-sec { padding: 9px 18px; background: var(--bg-tint); border-top: 1px solid var(--line-3); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); } .pg-cmp-row .cell { text-align: center; color: var(--ink-3); font-size: 12.5px; } .pg-cmp-row .cell.yes { color: var(--pg-1); } .pg-cmp-row .cell.yes svg { width: 16px; height: 16px; } .pg-cmp-row .cell.no { color: var(--ink-5); } .pg-cmp-row .cell.soon { color: var(--ink-4); font-style: italic; font-size: 11.5px; }