/* Rotavision v2 — Sakshi-flagship marketing site. Type: Inter (display + body, unified with the Sakshi console) + IBM Plex Mono. Accent #010ED0. Light + dark (data-theme on ). No emojis, no left-border cards (company design rules). */ :root { /* surfaces + ink */ --bg: #FFFFFF; --bg-2: #FAFAFA; --bg-3: #F5F5F5; --ink: #171717; --ink-2: #404040; --muted: #737373; --line: #E5E5E5; --line-2: #D4D4D4; --card-bg: #FFFFFF; /* accent: -fill for backgrounds/buttons, -ink for text/links (contrast) */ --accent: #010ED0; --accent-ink: #010ED0; --accent-soft: #EEF1FF; --accent-2: #6B8BFF; --hero-glow: #EEF1FF; --good: #16a34a; --warn: #d97706; --shadow: 0 16px 36px -22px rgba(0,0,0,.22); --shadow-lift: 0 24px 60px -28px rgba(1,14,208,.28), 0 4px 16px rgba(0,0,0,.05); /* always-dark sections (regulatory / footer) — differentiated per theme */ --sd-bg: #0d0d0d; --sd-2: #1a1a1a; --sd-line: #2a2a2a; --sd-ink: #FFFFFF; --sd-ink-2: #b5b5b5; --sd-muted: #8a8a8a; --sd-accent-ink: #6B8BFF; /* fonts — unified on Inter (matches the Sakshi console), IBM Plex Mono for code */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --display: 'Inter', -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --deva: 'Noto Serif Devanagari', 'Inter', serif; --ta: 'Noto Serif Tamil', var(--deva); --te: 'Noto Serif Telugu', var(--deva); --kn: 'Noto Serif Kannada', var(--deva); --ml: 'Noto Serif Malayalam', var(--deva); --bn: 'Noto Serif Bengali', var(--deva); --gu: 'Noto Serif Gujarati', var(--deva); --wrap: 1180px; --radius: 14px; } :root[data-theme="dark"] { --bg: #0f0f12; --bg-2: #16161a; --bg-3: #1b1b20; --ink: #ededed; --ink-2: #b8b8b8; --muted: #8a8a8a; --line: #26262c; --line-2: #33333a; --card-bg: #17171c; --accent: #2740e8; --accent-ink: #6B8BFF; --accent-soft: #161b34; --accent-2: #6B8BFF; --hero-glow: #12163a; --shadow: 0 18px 40px -24px rgba(0,0,0,.6); --shadow-lift: 0 26px 64px -30px rgba(39,64,232,.35), 0 4px 16px rgba(0,0,0,.4); --sd-bg: #08080a; --sd-2: #131318; --sd-line: #26262c; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background .2s ease, color .2s ease; } img { max-width: 100%; display: block; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .section { padding: 104px 0; } .section.tight { padding: 76px 0; } .center { text-align: center; } .eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); font-weight: 500; margin: 0 0 14px; } .eyebrow.on-dark { color: var(--sd-accent-ink); } h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--ink); line-height: 1.08; } h1 { font-size: clamp(38px, 5.4vw, 60px); margin: 0 0 20px; font-weight: 800; letter-spacing: -0.03em; } h2 { font-size: clamp(29px, 3.5vw, 42px); margin: 0 0 16px; letter-spacing: -0.025em; } h3 { font-size: 21px; margin: 0 0 8px; font-weight: 600; letter-spacing: -0.015em; } .lead { font-size: clamp(18px, 2vw, 21px); color: var(--ink-2); line-height: 1.62; margin: 0 0 28px; } .muted { color: var(--muted); } p { margin: 0 0 18px; } .material-icons-outlined { font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; line-height: 1; text-transform: none; letter-spacing: normal; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15.5px; font-weight: 600; padding: 12px 22px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; transition: all .15s ease; text-decoration: none; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(1,14,208,.22); } .btn-secondary { background: var(--card-bg); color: var(--ink); border-color: var(--line-2); } .btn-secondary:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .btn-ghost { color: var(--accent-ink); padding: 12px 4px; } .btn.on-dark.btn-secondary { background: transparent; color: #fff; border-color: #3a3a3a; } .btn.on-dark.btn-secondary:hover { border-color: var(--sd-accent-ink); color: var(--sd-accent-ink); } .btn-row { display: flex; gap: 14px; flex-wrap: wrap; } .pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); } /* Theme toggle */ .theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card-bg); color: var(--ink-2); cursor: pointer; } .theme-toggle:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .theme-toggle .material-icons-outlined { font-size: 20px; } :root[data-theme="dark"] .theme-toggle .i-dark { display: none; } :root:not([data-theme="dark"]) .theme-toggle .i-light { display: none; } /* logo swaps with theme (dark mark on light header, light mark on dark header) */ :root[data-theme="dark"] .brand .logo-l { display: none; } :root:not([data-theme="dark"]) .brand .logo-d { display: none; } /* Header */ .header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 18px; letter-spacing: -0.01em; } .brand:hover { text-decoration: none; } .brand img { height: 26px; width: auto; } .brand .sub { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; border-left: 1px solid var(--line-2); padding-left: 10px; margin-left: 2px; } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-item { position: relative; display: flex; align-items: center; } .nav-top { color: var(--ink-2); font-size: 15px; font-weight: 500; font-family: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 1px; } .nav-top:hover { color: var(--accent-ink); text-decoration: none; } .nav-top .caret { font-size: 18px; transition: transform .15s ease; margin-top: 1px; } .submenu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); width: 300px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); padding: 9px; display: grid; gap: 1px; opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60; } .submenu.wide { grid-template-columns: 1fr 1fr; column-gap: 6px; width: 548px; left: 0; transform: translateX(0) translateY(-6px); } .submenu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .nav-item:hover .submenu, .nav-item.open .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-item:hover .submenu.wide, .nav-item.open .submenu.wide { transform: translateX(0) translateY(0); } .nav-item:hover .caret, .nav-item.open .caret { transform: rotate(180deg); } .submenu-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 11px; border-radius: 10px; } .submenu-item:hover { background: var(--accent-soft); text-decoration: none; } .submenu-item .mi { font-size: 19px; color: var(--accent-ink); flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--accent-soft); border-radius: 9px; transition: background .15s ease; } .submenu-item:hover .mi { background: var(--card-bg); } .submenu-item .st { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .submenu-item .l { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; } .submenu-item .d { font-size: 12px; color: var(--muted); line-height: 1.35; } .submenu-feat { margin: 5px 3px 1px; padding: 11px 13px; border-radius: 10px; background: linear-gradient(120deg, var(--accent-soft), var(--hero-glow)); border: 1px solid var(--line); display: flex; align-items: center; gap: 11px; text-decoration: none; } .submenu-feat:hover { text-decoration: none; border-color: var(--accent-2); } .submenu.wide .submenu-feat { grid-column: 1 / -1; } .submenu-feat .fi { font-size: 20px; color: var(--accent-ink); } .submenu-feat .ft { display: flex; flex-direction: column; } .submenu-feat .l { font-size: 13.5px; font-weight: 700; color: var(--ink); } .submenu-feat .d { font-size: 11.5px; color: var(--ink-2); } .submenu-feat .go { margin-left: auto; color: var(--accent-ink); font-weight: 600; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 1px; } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 9px; width: 38px; height: 38px; place-items: center; cursor: pointer; color: var(--ink-2); } .nav-toggle:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .nav-toggle .material-icons-outlined { font-size: 22px; } .mobile-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100dvh - 66px); overflow-y: auto; } .mobile-menu.open { display: block; } .mobile-menu .wrap { display: flex; flex-direction: column; gap: 20px; padding: 20px 22px 28px; } .mm-group { display: flex; flex-direction: column; } .mm-h { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; } .mm-group a { display: block; padding: 9px 2px; font-size: 15.5px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); } .mm-group a:last-child { border-bottom: 0; } .mm-group a:hover { color: var(--accent-ink); text-decoration: none; } .mm-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; } .mm-cta .btn { width: 100%; justify-content: center; height: 46px; } /* Hero */ .hero { padding: 76px 0 40px; background: radial-gradient(1000px 460px at 82% -10%, var(--hero-glow), transparent 62%); border-bottom: 1px solid var(--line); } .hero-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 56px; align-items: center; } .hero h1 span { color: var(--accent-ink); } .hero .lead { max-width: 560px; } .hero-trust { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 30px; font-size: 14px; color: var(--muted); } .hero-trust span { display: inline-flex; align-items: center; gap: 7px; } .hero-trust .material-icons-outlined { font-size: 18px; color: var(--accent-ink); } /* Evidence-record mock */ .mock { background: var(--card-bg); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lift); overflow: hidden; } .mock-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); } .mock-bar .t { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 6px; } .mock-bar .chip { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--good) 35%, var(--card-bg)); border-radius: 999px; padding: 3px 10px; } .mock-body { padding: 18px 18px 22px; transition: opacity .32s ease, transform .32s ease; } .mock-body.swapping { opacity: 0; transform: translateY(8px); } .mock-bar .chip .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 6px; vertical-align: middle; animation: chippulse 2.4s ease-in-out infinite; } .mock-bar .chip { border-radius: 999px; padding: 3px 9px 3px 8px; transition: box-shadow .4s ease; } .mock-bar .chip.flash { box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 18%, transparent); } .mock-row .v { transition: color .32s ease; } @keyframes chippulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } } @media (prefers-reduced-motion: reduce) { .mock-bar .chip .chip-dot { animation: none; } } .mock-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; } .mock-row:last-child { border-bottom: 0; } .mock-row .k { color: var(--muted); font-size: 12.5px; } .mock-row .v { font-family: var(--mono); font-size: 12.5px; color: var(--ink); } .mock-row .v.tok { color: var(--accent-ink); } .mock-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .mock-tags .tag { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); } /* Trust strip */ .strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); padding: 26px 0; } .strip-inner { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; } .strip-inner .label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .reg { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-2); } a.reg { text-decoration: none; transition: color .15s ease; } a.reg:hover { color: var(--accent-ink); text-decoration: none; } .regbox { scroll-margin-top: 92px; } /* Grid cards */ .grid { display: grid; gap: 26px; } .grid.g3 { grid-template-columns: repeat(3, 1fr); } .grid.g2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: all .18s ease; } .card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); } .card .ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 16px; } .card .ico .material-icons-outlined { font-size: 24px; } .card p { font-size: 15px; color: var(--ink-2); margin: 0; } .card .more { margin-top: 14px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } /* Modules */ .mods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .mod { border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px; background: var(--card-bg); } .mod .name { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); letter-spacing: .04em; } .mod h3 { font-size: 16px; margin: 8px 0 6px; } .mod p { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.5; } /* Always-dark section (theme-adaptive shade) */ .dark { background: var(--sd-bg); color: var(--sd-ink-2); } .dark h2, .dark h3 { color: var(--sd-ink); } .dark .lead { color: var(--sd-ink-2); } .dark .muted { color: var(--sd-muted); } /* Code block */ .code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink); overflow-x: auto; } .code .c { color: var(--muted); } .code .k { color: var(--accent-ink); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* Regulatory grid */ .regs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .regbox { border: 1px solid var(--sd-line); border-radius: 12px; padding: 20px; background: var(--sd-2); } .regbox .code2 { font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--sd-ink); } .regbox .st { font-family: var(--mono); font-size: 11px; color: var(--sd-accent-ink); margin-top: 4px; } .regbox p { font-size: 13px; color: var(--sd-muted); margin: 10px 0 0; } /* CTA band */ .cta { background: linear-gradient(135deg, #010ED0 0%, #0109a8 100%); color: #fff; border-radius: 20px; padding: 56px; text-align: center; } /* CTA blocks get equal breathing room above and below, whatever section precedes them. The CTA's own section is made symmetric, and the previous section drops its bottom padding. */ .section:has(> .wrap > .cta) { padding-top: 84px !important; padding-bottom: 84px !important; } /* Drop the bottom padding of a PLAIN section before a CTA (so the gap above the CTA equals the gap below). Skip banded sections (dark / .tight / tinted) — their content needs its own padding, and the gap to the CTA is measured from the band's border, so the CTA's own symmetric padding already makes it even. */ .section:has(+ .section > .wrap > .cta):not(.dark):not(.tight):not([style*="background"]) { padding-bottom: 0 !important; } .cta h2 { color: #fff; } .cta .lead { color: rgba(255,255,255,.9); max-width: 640px; margin: 0 auto 28px; } .cta .btn-secondary { background: #fff; color: #010ED0; border-color: #fff; } .cta .btn-secondary:hover { background: rgba(255,255,255,.9); color: #010ED0; } /* Sandbox request form (on the dark CTA band) */ .sandbox-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 660px; margin: 0 auto; } .sandbox-form input { font: inherit; font-size: 15px; padding: 12px 16px; border-radius: 9px; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: #fff; min-width: 180px; flex: 1 1 180px; } .sandbox-form input::placeholder { color: rgba(255,255,255,.7); } .sandbox-form input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.18); } .sandbox-form input.hp { display: none; } .sandbox-form button { flex: 0 0 auto; } .sandbox-msg { margin: 16px 0 0; font-size: 14.5px; color: #fff; min-height: 20px; } .sandbox-msg.err { color: #ffdada; } /* Legal / prose pages (privacy, terms, copyright) */ .legal { max-width: 780px; } .legal h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 40px 0 12px; } .legal h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; } .legal p, .legal li { color: var(--ink-2); line-height: 1.7; font-size: 15.5px; } .legal p { margin: 0 0 16px; } .legal ul { padding-left: 22px; margin: 0 0 18px; } .legal li { margin-bottom: 6px; } .legal a { color: var(--accent-ink); } .legal strong { color: var(--ink); } /* Blog index */ .blog-list { max-width: 820px; } .blog-list.home-blog { margin-left: auto; margin-right: auto; } .blog-row { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--line); align-items: baseline; } .blog-row:hover { text-decoration: none; } .blog-row:hover .blog-row-body h3 { color: var(--accent-ink); } .blog-row-meta { display: flex; flex-direction: column; gap: 4px; } .blog-row-meta .d { font-family: var(--mono); font-size: 12.5px; color: var(--muted); } .blog-row-meta .c { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-ink); } .blog-row-body h3 { font-size: 20px; margin: 0 0 6px; transition: color .15s ease; } .blog-row-body p { font-size: 14.5px; color: var(--ink-2); margin: 0; line-height: 1.55; } .blog-row.first-visible { border-top: 0; padding-top: 2px; } .blog-pager { display: flex; gap: 6px; justify-content: center; margin: 40px auto 0; max-width: 820px; flex-wrap: wrap; } .blog-pager .pg { min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line-2); background: var(--card-bg); color: var(--ink-2); border-radius: 9px; font: inherit; font-size: 14px; cursor: pointer; } .blog-pager .pg:hover:not(:disabled):not(.cur) { border-color: var(--accent-ink); color: var(--accent-ink); } .blog-pager .pg.cur { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } .blog-pager .pg:disabled { opacity: .4; cursor: default; } /* Newsletter band */ .newsletter { background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px; padding: 44px 40px; max-width: 820px; margin: 0 auto; text-align: center; } .newsletter h2 { font-size: 27px; margin: 8px 0 0; } .newsletter > p { color: var(--ink-2); max-width: 540px; margin: 12px auto 24px; } .newsletter-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 480px; margin: 0 auto; } .newsletter-form input[type=email] { flex: 1 1 240px; font: inherit; font-size: 15px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--card-bg); color: var(--ink); } .newsletter-form input[type=email]:focus { outline: none; border-color: var(--accent-ink); } .newsletter-form input[type=email]::placeholder { color: var(--muted); } .newsletter-form .hp { display: none; } .newsletter-msg { margin: 14px 0 0; font-size: 14px; color: var(--muted); min-height: 18px; } .newsletter-msg.err { color: #dc2626; } .newsletter-msg.ok { color: var(--good); } /* Blog post body + reading layout */ .post-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 52px; max-width: 1000px; margin: 0 auto; padding: 56px 24px 0; align-items: start; } .post-wrap .post-content { max-width: 720px; } .post-toc { position: sticky; top: 88px; } .post-toc .toc-title { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; } .post-toc nav a { display: block; font-size: 13.5px; color: var(--muted); padding: 5px 0; line-height: 1.45; transition: color .15s ease; } .post-toc nav a:hover { color: var(--accent-ink); text-decoration: none; } .post-toc nav a.h3 { padding-left: 14px; font-size: 13px; } .post-toc nav a.active { color: var(--accent-ink); font-weight: 600; } .post-content h2, .post-content h3 { scroll-margin-top: 90px; } @media (max-width: 900px) { .post-wrap { grid-template-columns: 1fr; padding-top: 40px; } .post-toc { display: none; } } .post-content { max-width: 720px; } .post-content h2 { font-size: 26px; margin: 40px 0 12px; } .post-content h3 { font-size: 20px; margin: 30px 0 10px; } .post-content p, .post-content li { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); } .post-content p { margin: 0 0 18px; } .post-content ul, .post-content ol { padding-left: 24px; margin: 0 0 18px; } .post-content li { margin-bottom: 8px; } .post-content a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; } .post-content strong { color: var(--ink); } .post-content blockquote { margin: 22px 0; padding: 16px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 17px; } .post-content blockquote p:last-child { margin-bottom: 0; } .post-content code { font-family: var(--mono); font-size: 14px; background: var(--bg-3); padding: 2px 6px; border-radius: 5px; } .post-content pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; overflow-x: auto; margin: 0 0 18px; } .post-content pre code { background: none; padding: 0; } .post-content img { max-width: 100%; border-radius: 10px; margin: 8px 0; } .post-byline { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 8px 0 0; } .post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 24px; padding-top: 20px; border-top: 1px solid var(--line); } .post-tags .t { font-family: var(--mono); font-size: 12px; color: var(--ink-2); background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; } .post-back { margin: 0; } .post-back a { font-weight: 600; } @media (max-width: 620px) { .blog-row { grid-template-columns: 1fr; gap: 6px; } } /* Footer */ .footer { background: var(--sd-bg); color: var(--sd-ink-2); padding: 64px 0 40px; font-size: 14px; border-top: 1px solid var(--sd-line); } .footer h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sd-muted); margin: 0 0 14px; font-weight: 500; } .footer a { color: #cfcfcf; } .footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; } .footer-col a { display: block; margin-bottom: 9px; } .footer .addr { color: var(--sd-muted); line-height: 1.7; font-size: 13px; max-width: 300px; } .footer-phones { color: var(--sd-muted); font-size: 13px; line-height: 1.7; margin: 12px 0 0; } .footer-phones a { color: var(--sd-ink-2); display: inline; margin: 0; } .footer-phones a:hover { color: #fff; } .footer-social { display: flex; gap: 14px; margin-top: 16px; } .footer-social a { color: var(--sd-muted); display: inline-flex; transition: color .15s ease; } .footer-social a:hover { color: #fff; } .footer-bottom { border-top: 1px solid var(--sd-line); margin-top: 44px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--sd-muted); font-size: 13px; } .section-head { max-width: 720px; margin: 0 auto 56px; } .section-head.left { margin-left: 0; } @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .grid.g3, .grid.g2, .mods, .regs, .split { grid-template-columns: 1fr; } .nav-links { display: none; } .nav-cta-desk { display: none; } .nav-toggle { display: grid; } .section { padding: 72px 0; } .cta { padding: 40px 24px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } .hero-trust { flex-direction: column; gap: 10px; } } /* Developers / docs page */ .page-hero { padding: 64px 0 44px; background: radial-gradient(880px 400px at 84% -16%, var(--hero-glow), transparent 62%), var(--bg-2); border-bottom: 1px solid var(--line); } /* first content section after a hero gets a touch more top breathing room */ .page-hero + .section, .page-hero + section > .section { padding-top: 72px; } /* ── Identity: witness kicker ── */ .kicker { display: inline-flex; align-items: center; gap: 9px; padding: 6px 8px 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-bg); box-shadow: var(--shadow); font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--muted); margin-bottom: 22px; } .kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .kicker .dv { font-family: var(--deva); font-size: 15px; font-weight: 600; color: var(--ink); } .kicker .wt { color: var(--ink-2); } .kicker .ctx { background: var(--accent-soft); color: var(--accent-ink); border-radius: 999px; padding: 3px 11px; margin-left: 3px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; } .kicker.on-dark { background: var(--sd-2); border-color: var(--sd-line); } .kicker.on-dark .dv { color: #fff; } .kicker.on-dark .wt { color: var(--sd-ink-2); } .kicker.on-dark .ctx { background: rgba(107,139,255,.14); color: var(--sd-accent-ink); } /* witness, rotating across India's scripts (homepage) */ .rotword { position: relative; display: inline-block; width: 3.6em; height: 1.2em; vertical-align: -0.2em; text-align: center; } .rotword > span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; animation: rotword 24.5s infinite; } .rotword .w2 { font-family: var(--bn); } .rotword .w3 { font-family: var(--gu); } .rotword .w4 { font-family: var(--ta); } .rotword .w5 { font-family: var(--te); } .rotword .w6 { font-family: var(--kn); } .rotword .w7 { font-family: var(--ml); } .rotword > span:nth-child(1) { animation-delay: 0s; } .rotword > span:nth-child(2) { animation-delay: 3.5s; } .rotword > span:nth-child(3) { animation-delay: 7s; } .rotword > span:nth-child(4) { animation-delay: 10.5s; } .rotword > span:nth-child(5) { animation-delay: 14s; } .rotword > span:nth-child(6) { animation-delay: 17.5s; } .rotword > span:nth-child(7) { animation-delay: 21s; } @keyframes rotword { 0% { opacity: 0; transform: translateY(4px); } 1.9% { opacity: 1; transform: translateY(0); } 12.2% { opacity: 1; transform: translateY(0); } 14.3% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rotword > span { animation: none; opacity: 0; } .rotword .w1 { opacity: 1; } } /* ── Identity: interior hero split + witness seal ── */ .hero-split { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 52px; align-items: center; } .hero-split .lead { max-width: 560px; } :root[data-theme="dark"] .logo-l { display: none; } :root:not([data-theme="dark"]) .logo-d { display: none; } .seal { position: relative; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: linear-gradient(162deg, var(--card-bg) 0%, var(--bg-2) 100%); box-shadow: var(--shadow-lift); padding: 36px 30px 30px; text-align: center; } .seal::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px 220px at 50% -25%, var(--hero-glow), transparent 68%); } .seal > * { position: relative; z-index: 1; } .seal .mk { height: 46px; width: auto; margin: 0 auto 16px; } .seal .dev { font-family: var(--deva); font-size: 46px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.01em; } .seal .rom { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 10px; } .seal .hr { height: 1px; background: var(--line); margin: 22px -6px; } .seal .rec { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); } .seal .rec .h { color: var(--muted); } .seal .hash { font-family: var(--mono); font-size: 11.5px; color: var(--accent-ink); margin-top: 9px; word-break: break-all; } .seal .vf { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--good) 34%, var(--card-bg)); border-radius: 999px; padding: 5px 13px; } .seal .vf .material-icons-outlined { font-size: 15px; } /* ── Hero artifacts (page-specific right-side visual) ── */ .art { position: relative; background: var(--card-bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lift); overflow: hidden; } .art-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); font-family: var(--mono); font-size: 12px; color: var(--muted); } .art-bar .chip { font-family: var(--mono); font-size: 11px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; } .art-bar .chip.good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--good) 32%, var(--card-bg)); } .art-body { padding: 24px 22px; } /* Regulatory — readiness gauge */ .art-gauge .score { display: flex; align-items: baseline; gap: 9px; } .art-gauge .score b { font-family: var(--display); font-size: 46px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; } .art-gauge .score em { font-style: normal; font-size: 15px; color: var(--muted); } .art-gauge .cap { font-size: 13px; color: var(--muted); margin: 6px 0 20px; } .art-gauge .brow { display: grid; grid-template-columns: 78px 1fr 30px; align-items: center; gap: 11px; margin: 11px 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); } .art-gauge .track { height: 7px; border-radius: 999px; background: var(--bg-3); overflow: hidden; } .art-gauge .track i { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .art-gauge .track.pend i { background: var(--line-2); } .art-gauge .pct { text-align: right; color: var(--muted); } .art-gauge .foot { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); } /* Platform — module spine */ .art-chain .cnode { position: relative; padding: 0 0 18px 30px; } .art-chain .cnode:last-child { padding-bottom: 0; } .art-chain .cnode::before { content: ""; position: absolute; left: 7px; top: 5px; bottom: -5px; width: 2px; background: var(--line); } .art-chain .cnode:last-child::before { display: none; } .art-chain .cnode::after { content: ""; position: absolute; left: 1px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--card-bg); border: 2px solid var(--accent); } .art-chain .cn { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); letter-spacing: .05em; } .art-chain .cs { font-size: 13px; color: var(--ink-2); margin-top: 1px; } /* Developers — code chip */ .art-code .dots { display: inline-flex; gap: 6px; align-items: center; } .art-code .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); display: block; } .art-code .code { border: 0; border-radius: 0; margin: 0; background: transparent; font-size: 12.5px; line-height: 1.75; padding: 20px 22px; } @media (max-width: 940px) { .hero-split { grid-template-columns: 1fr; gap: 34px; } .seal, .art { max-width: 400px; } } @media (max-width: 620px) { .seal, .art { display: none; } } .docs { display: grid; grid-template-columns: 220px 1fr; gap: 52px; align-items: start; } .docs-nav { position: sticky; top: 88px; font-size: 14px; } .docs-nav a { display: block; color: var(--ink-2); padding: 5px 0; } .docs-nav a:hover { color: var(--accent-ink); text-decoration: none; } .docs-nav .h { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 20px 0 6px; } .docs-nav .h:first-child { margin-top: 0; } .doc-section { margin-bottom: 66px; scroll-margin-top: 88px; } .doc-section > h2 { font-size: 28px; margin-bottom: 12px; } .doc-section > p { color: var(--ink-2); max-width: 700px; } .doc-section .code { margin: 16px 0; } .api-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; } .api-table th { text-align: left; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 8px 12px; border-bottom: 1px solid var(--line); } .api-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); } .api-table td code { font-family: var(--mono); font-size: 12.5px; color: var(--accent-ink); background: var(--accent-soft); padding: 1px 6px; border-radius: 5px; white-space: nowrap; } .tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; } .tag-row .t { font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 7px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink-2); } @media (max-width: 940px) { .docs { grid-template-columns: 1fr; } .docs-nav { display: none; } } /* Platform page */ .shot { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; box-shadow: var(--shadow-lift); background: var(--card-bg); } .shot-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); } .shot-bar .d { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); } .shot-bar .u { margin-left: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); } .shot img { display: block; width: 100%; } .shot-cap { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 14px; } .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 88px; } .feature-row:last-child { margin-bottom: 0; } .feature-row.rev .feature-vis { order: -1; } .feature-txt .tag { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--accent-ink); text-transform: uppercase; } .feature-txt h3 { font-size: 27px; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 12px; } .feature-txt p { color: var(--ink-2); } .feature-txt ul { margin: 14px 0 0; padding: 0; list-style: none; } .feature-txt li { position: relative; padding: 6px 0 6px 26px; font-size: 15px; color: var(--ink-2); } .feature-txt li .material-icons-outlined { position: absolute; left: 0; top: 7px; font-size: 18px; color: var(--accent-ink); } /* Architecture flow */ .flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; } .flow .node { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--card-bg); text-align: center; } .flow .node .material-icons-outlined { font-size: 26px; color: var(--accent-ink); } .flow .node .n { font-weight: 600; margin: 8px 0 4px; font-size: 15px; } .flow .node .s { font-size: 12.5px; color: var(--muted); } .flow .node.core { border-color: var(--accent-ink); background: var(--accent-soft); } @media (max-width: 940px) { .feature-row { grid-template-columns: 1fr; gap: 28px; } .feature-row.rev .feature-vis { order: 0; } .flow { grid-template-columns: 1fr 1fr; } } /* ── Header CTA buttons: match the 38px theme-toggle height for a uniform nav ── */ .nav-cta .btn { height: 38px; padding: 0 15px; font-size: 14.5px; line-height: 1; } /* ── Seal emblem: rotate साक्षी across scripts like the kicker (no clipping) ── */ .seal .dev .rotword { width: 100%; height: 1.2em; vertical-align: baseline; } /* ── Mermaid diagrams (blog) ── */ .post-content .mermaid { margin: 0 0 20px; padding: 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; text-align: center; overflow-x: auto; font-family: var(--sans); } .post-content .mermaid svg { max-width: 100%; height: auto; display: inline-block; } /* brief pre-render state (raw source) before mermaid.js swaps in the SVG */ .post-content .mermaid:not([data-processed]) { color: var(--muted); font-family: var(--mono); font-size: 13px; white-space: pre-wrap; text-align: left; } /* ── Code syntax highlighting (Rouge tokens), brand-aligned, light + dark ── */ .post-content .highlight { background: none; } .post-content .highlight .c, .post-content .highlight .ch, .post-content .highlight .cd, .post-content .highlight .cm, .post-content .highlight .cp, .post-content .highlight .cpf, .post-content .highlight .c1, .post-content .highlight .cs { color: #6b7280; font-style: italic; } .post-content .highlight .k, .post-content .highlight .kd, .post-content .highlight .kn, .post-content .highlight .kp, .post-content .highlight .kr, .post-content .highlight .kv { color: #7c3aed; } .post-content .highlight .kc, .post-content .highlight .kt, .post-content .highlight .no, .post-content .highlight .nb, .post-content .highlight .bp { color: #b45309; } .post-content .highlight .s, .post-content .highlight .sa, .post-content .highlight .sb, .post-content .highlight .sc, .post-content .highlight .dl, .post-content .highlight .sd, .post-content .highlight .s2, .post-content .highlight .se, .post-content .highlight .sh, .post-content .highlight .si, .post-content .highlight .sx, .post-content .highlight .sr, .post-content .highlight .s1, .post-content .highlight .ss { color: #0a7d33; } .post-content .highlight .m, .post-content .highlight .mb, .post-content .highlight .mf, .post-content .highlight .mh, .post-content .highlight .mi, .post-content .highlight .il, .post-content .highlight .mo, .post-content .highlight .mx { color: #b45309; } .post-content .highlight .nf, .post-content .highlight .fm { color: #1552d6; } .post-content .highlight .nc, .post-content .highlight .nn, .post-content .highlight .nd, .post-content .highlight .nt, .post-content .highlight .ne { color: #0e7490; } .post-content .highlight .na, .post-content .highlight .nl { color: #b45309; } .post-content .highlight .o, .post-content .highlight .ow, .post-content .highlight .p, .post-content .highlight .pi { color: var(--ink-2); } .post-content .highlight .err { color: #b91c1c; } .post-content .highlight .gi { color: #0a7d33; } .post-content .highlight .gd { color: #b91c1c; } .post-content .highlight .gh, .post-content .highlight .gu, .post-content .highlight .gp { color: #6b7280; } :root[data-theme="dark"] .post-content .highlight .c, :root[data-theme="dark"] .post-content .highlight .ch, :root[data-theme="dark"] .post-content .highlight .cd, :root[data-theme="dark"] .post-content .highlight .cm, :root[data-theme="dark"] .post-content .highlight .cp, :root[data-theme="dark"] .post-content .highlight .cpf, :root[data-theme="dark"] .post-content .highlight .c1, :root[data-theme="dark"] .post-content .highlight .cs { color: #8a8a8a; } :root[data-theme="dark"] .post-content .highlight .k, :root[data-theme="dark"] .post-content .highlight .kd, :root[data-theme="dark"] .post-content .highlight .kn, :root[data-theme="dark"] .post-content .highlight .kp, :root[data-theme="dark"] .post-content .highlight .kr, :root[data-theme="dark"] .post-content .highlight .kv { color: #c4a5ff; } :root[data-theme="dark"] .post-content .highlight .kc, :root[data-theme="dark"] .post-content .highlight .kt, :root[data-theme="dark"] .post-content .highlight .no, :root[data-theme="dark"] .post-content .highlight .nb, :root[data-theme="dark"] .post-content .highlight .bp { color: #f0a868; } :root[data-theme="dark"] .post-content .highlight .s, :root[data-theme="dark"] .post-content .highlight .sa, :root[data-theme="dark"] .post-content .highlight .sb, :root[data-theme="dark"] .post-content .highlight .sc, :root[data-theme="dark"] .post-content .highlight .dl, :root[data-theme="dark"] .post-content .highlight .sd, :root[data-theme="dark"] .post-content .highlight .s2, :root[data-theme="dark"] .post-content .highlight .se, :root[data-theme="dark"] .post-content .highlight .sh, :root[data-theme="dark"] .post-content .highlight .si, :root[data-theme="dark"] .post-content .highlight .sx, :root[data-theme="dark"] .post-content .highlight .sr, :root[data-theme="dark"] .post-content .highlight .s1, :root[data-theme="dark"] .post-content .highlight .ss { color: #7bd88f; } :root[data-theme="dark"] .post-content .highlight .m, :root[data-theme="dark"] .post-content .highlight .mb, :root[data-theme="dark"] .post-content .highlight .mf, :root[data-theme="dark"] .post-content .highlight .mh, :root[data-theme="dark"] .post-content .highlight .mi, :root[data-theme="dark"] .post-content .highlight .il, :root[data-theme="dark"] .post-content .highlight .mo, :root[data-theme="dark"] .post-content .highlight .mx { color: #f0a868; } :root[data-theme="dark"] .post-content .highlight .nf, :root[data-theme="dark"] .post-content .highlight .fm { color: #6b8bff; } :root[data-theme="dark"] .post-content .highlight .nc, :root[data-theme="dark"] .post-content .highlight .nn, :root[data-theme="dark"] .post-content .highlight .nd, :root[data-theme="dark"] .post-content .highlight .nt, :root[data-theme="dark"] .post-content .highlight .ne { color: #5bc8d8; } :root[data-theme="dark"] .post-content .highlight .na, :root[data-theme="dark"] .post-content .highlight .nl { color: #f0a868; } :root[data-theme="dark"] .post-content .highlight .err { color: #ff7b72; } :root[data-theme="dark"] .post-content .highlight .gi { color: #7bd88f; } :root[data-theme="dark"] .post-content .highlight .gd { color: #ff7b72; } /* ── Forms (verify + contact), light + dark ── */ .rv-form { display: grid; gap: 18px; } .rv-form .field { display: flex; flex-direction: column; gap: 6px; } .rv-form label { font-size: 14px; font-weight: 600; color: var(--ink); } .rv-form input, .rv-form select, .rv-form textarea { font: inherit; font-size: 15px; padding: 11px 14px; border-radius: 9px; width: 100%; border: 1px solid var(--line-2); background: var(--card-bg); color: var(--ink); transition: border-color .15s ease; } .rv-form input:focus, .rv-form select:focus, .rv-form textarea:focus { outline: none; border-color: var(--accent-ink); } .rv-form input::placeholder, .rv-form textarea::placeholder { color: var(--muted); } .rv-form select { cursor: pointer; } .rv-form textarea { resize: vertical; min-height: 120px; } .rv-form input.error, .rv-form select.error { border-color: #dc2626; } .rv-form .hint { font-size: 12.5px; color: var(--muted); } .rv-form .err-msg { font-size: 12.5px; color: #dc2626; display: none; } .rv-form .err-msg.visible { display: block; } .rv-form .hp { position: absolute; left: -9999px; } .form-note { padding: 14px 16px; border-radius: 10px; font-size: 14px; display: none; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); } .form-note.success { display: block; background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.35); } .form-note.error { display: block; background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.35); } /* ── Verify result cards ── */ .verify-result { margin-top: 24px; padding: 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); } .verify-result.ok { background: rgba(22,163,74,.06); border-color: rgba(22,163,74,.3); } .verify-result.bad { background: rgba(220,38,38,.06); border-color: rgba(220,38,38,.3); } .verify-result.warn { background: rgba(217,119,6,.07); border-color: rgba(217,119,6,.3); } .verify-result .rhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .verify-result .ricon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 700; flex: 0 0 auto; } .verify-result.ok .ricon { background: rgba(22,163,74,.16); color: #16a34a; } .verify-result.bad .ricon { background: rgba(220,38,38,.16); color: #dc2626; } .verify-result.warn .ricon { background: rgba(217,119,6,.16); color: #d97706; } .verify-result .rtitle { font-weight: 600; font-size: 17px; color: var(--ink); } .verify-result .rrow { display: flex; gap: 12px; font-size: 14px; padding: 3px 0; } .verify-result .rlabel { color: var(--muted); min-width: 130px; } .verify-result .rval { color: var(--ink); font-weight: 500; } .verify-result .rval.mono { font-family: var(--mono); font-size: 13px; word-break: break-all; } .verify-result p { color: var(--ink-2); font-size: 14px; margin: 6px 0 0; } /* ── Status board ── */ .status-banner { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); margin-bottom: 22px; font-weight: 600; } .status-board { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card-bg); } .status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); } .status-row:last-child { border-bottom: 0; } .status-row .sr-name { font-weight: 600; } .status-row .sr-desc { font-size: 13.5px; color: var(--muted); margin-top: 3px; } .status-row .sr-desc a { color: var(--accent-ink); } .status-state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-family: var(--mono); color: var(--ink-2); white-space: nowrap; } .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); flex: 0 0 auto; } .status-dot.ok { background: var(--good); box-shadow: 0 0 0 3px rgba(22,163,74,.16); } .status-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(217,119,6,.16); } /* ── Cookie consent banner ── */ .cookie-banner { position: fixed; bottom: 18px; left: 18px; right: 18px; max-width: 640px; margin: 0 auto; z-index: 200; background: var(--card-bg); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-lift); padding: 16px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .cookie-banner[hidden] { display: none; } .cookie-banner p { margin: 0; font-size: 13.5px; color: var(--ink-2); flex: 1 1 320px; line-height: 1.5; } .cookie-banner a { color: var(--accent-ink); } .cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; } .cookie-banner .btn { height: 36px; padding: 0 16px; font-size: 14px; } @media (max-width: 560px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; gap: 12px; } .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } } /* ── Live hero artifacts ── */ /* Generic live-card cycler body fade (used by [data-live] cards, like the homepage mock). */ [data-live-body] { transition: opacity .32s ease, transform .32s ease; } [data-live-body].swapping { opacity: 0; transform: translateY(8px); } [data-live] .chip .chip-dot, .mock-bar .chip .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 6px; vertical-align: middle; animation: chippulse 2.4s ease-in-out infinite; } [data-live] .chip.flash, .mock-bar .chip.flash { box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 18%, transparent); } /* platform spine: nodes light up in sequence, like a record flowing down the chain */ .art-chain .cnode::after { animation: nodeFlow 4.5s ease-in-out infinite; } .art-chain .cnode:nth-child(1)::after { animation-delay: 0s; } .art-chain .cnode:nth-child(2)::after { animation-delay: .55s; } .art-chain .cnode:nth-child(3)::after { animation-delay: 1.1s; } .art-chain .cnode:nth-child(4)::after { animation-delay: 1.65s; } .art-chain .cnode:nth-child(5)::after { animation-delay: 2.2s; } @keyframes nodeFlow { 0%, 42%, 100% { box-shadow: 0 0 0 0 transparent; } 14% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); } } /* regulatory gauge: readiness bars fill in on view */ .art-gauge .track i { animation: fillGrow 1.3s cubic-bezier(.4,0,.2,1) both; } @keyframes fillGrow { from { width: 0; } } /* enterprise: posture checks pulse green in sequence */ .posture-live .posture-rows .mock-row { border-radius: 6px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; animation: postureSweep 6s ease-in-out infinite; } .posture-live .posture-rows .mock-row:nth-child(1) { animation-delay: 0s; } .posture-live .posture-rows .mock-row:nth-child(2) { animation-delay: .45s; } .posture-live .posture-rows .mock-row:nth-child(3) { animation-delay: .9s; } .posture-live .posture-rows .mock-row:nth-child(4) { animation-delay: 1.35s; } .posture-live .posture-rows .mock-row:nth-child(5) { animation-delay: 1.8s; } .posture-live .posture-rows .mock-row:nth-child(6) { animation-delay: 2.25s; } @keyframes postureSweep { 0%, 16%, 100% { background: transparent; } 6% { background: color-mix(in srgb, var(--good) 12%, transparent); } } /* deploy: install output streams in line by line */ .code.stream .ln { display: block; opacity: 0; animation: lineStream 7s ease-in-out infinite; } .code.stream .ln.sp { min-height: .6em; } .code.stream .ln:nth-child(1) { animation-delay: 0s; } .code.stream .ln:nth-child(2) { animation-delay: .5s; } .code.stream .ln:nth-child(3) { animation-delay: 1s; } .code.stream .ln:nth-child(4) { animation-delay: 1.4s; } .code.stream .ln:nth-child(5) { animation-delay: 1.8s; } .code.stream .ln:nth-child(6) { animation-delay: 2.3s; } @keyframes lineStream { 0% { opacity: 0; transform: translateY(3px); } 6% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; } } /* architecture: valid indicator pulses as the chain re-verifies */ .verify-live { animation: verifyPulse 1.6s ease-in-out infinite; } @keyframes verifyPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .art-chain .cnode::after, .art-gauge .track i, .posture-live .posture-rows .mock-row, .verify-live { animation: none; } .code.stream .ln { animation: none; opacity: 1; } } /* Announcement bar (dismissible, above the header on every page). */ .announce { background: var(--accent); color: #fff; } .announce-inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 40px; font-size: 13.5px; line-height: 1.4; } .announce-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex-wrap: wrap; justify-content: center; } .announce-tag { background: rgba(255,255,255,.22); border-radius: 4px; padding: 1px 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .announce-text { opacity: .96; } .announce-cta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.55); } .announce-cta .material-icons-outlined { font-size: 16px; } .announce-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: .8; padding: 0 4px; } .announce-close:hover { opacity: 1; } .announce.hidden { display: none; } @media (max-width: 640px) { .announce-inner { padding: 8px 34px; font-size: 12.5px; } .announce-cta { display: none; } }