/* ============================================================ CKS — co-branding tokens, logo animation, three theme scopes ============================================================ Three switchable themes on : .theme-cks-light — just the animated logo + footer co-sign .theme-cks-hybrid — Entropia chassis + CKS accents + navy on dark surfaces (slide-panels, video-beam) .theme-cks-full — whole page rebrand to navy + teal, Golos Text typography, large hero logo ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600&display=swap'); :root { --cks-navy: #0D1B2A; --cks-navy-mid: #143260; --cks-navy-ink: #11405F; /* matches the logo paths */ --cks-teal: #1B8A9C; --cks-teal-2: #22B0C8; --cks-teal-dark: #126880; --cks-paper: #F0F4F8; --cks-muted: #8BA4B8; } /* ============================================================ iPhone mockup — used to frame the СтройБот screencast. Auto-plays, looped, muted, plays inline. Matches a modern Pro-class iPhone (~9 / 19.5 aspect, Dynamic Island, soft glow). ============================================================ */ .cks-iphone { --iphone-width: 280px; position: relative; width: var(--iphone-width); aspect-ratio: 9 / 19.5; margin: 0 auto; background: linear-gradient(155deg, #2A2A30 0%, #0A0A0E 65%, #1A1A1F 100%); border-radius: 42px; padding: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 28px 56px -18px rgba(0, 0, 0, 0.7), 0 14px 28px -12px rgba(0, 0, 0, 0.45), 0 0 80px rgba(34, 176, 200, 0.10); isolation: isolate; } /* Side hardware silhouettes */ .cks-iphone::before { /* right-side button rail (power) */ content: ""; position: absolute; right: -2px; top: 22%; width: 3px; height: 86px; background: #1A1A1F; border-radius: 2px 0 0 2px; } .cks-iphone::after { /* left-side button rail (volume + silent) */ content: ""; position: absolute; left: -2px; top: 17%; width: 3px; height: 124px; background: #1A1A1F; border-radius: 0 2px 2px 0; } .cks-iphone-screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #000; } .cks-iphone-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } /* Dynamic Island */ .cks-iphone-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 96px; height: 28px; background: #050505; border-radius: 16px; z-index: 3; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset; } /* Ambient backdrop block — used to seat the iPhone in its column */ .cks-iphone-mount { position: relative; display: flex; align-items: center; justify-content: center; padding: 24px 0; min-height: 100%; } .cks-iphone-mount::before { /* soft teal halo behind the device */ content: ""; position: absolute; width: 80%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(34, 176, 200, 0.18) 0%, transparent 70%); filter: blur(40px); pointer-events: none; z-index: 0; } .cks-iphone-mount .cks-iphone { z-index: 1; } /* Subtle hover lift */ .cks-iphone { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .cks-iphone-mount:hover .cks-iphone { transform: translateY(-4px) rotate(-1deg); } @media (max-width: 900px) { .cks-iphone { --iphone-width: 240px; } } @media (max-width: 560px) { .cks-iphone { --iphone-width: 200px; } .cks-iphone-island { width: 78px; height: 24px; top: 10px; } } @media (prefers-reduced-motion: reduce) { .cks-iphone { transition: none; } .cks-iphone-mount:hover .cks-iphone { transform: none; } } /* ============================================================ Animated CKS logo — universal component Wrap in to autoplay. To replay programmatically: remove .is-playing, force reflow, add it back. ============================================================ */ .cks-logo { --cks-logo-size: 180px; width: var(--cks-logo-size); aspect-ratio: 301 / 149; display: inline-block; vertical-align: middle; } .cks-logo svg { width: 100%; height: 100%; display: block; overflow: visible; } .cks-logo path { fill: transparent; stroke-linejoin: round; stroke-linecap: round; } .cks-logo .shield { stroke: var(--cks-navy-ink); stroke-width: 1.2; stroke-dasharray: 520; stroke-dashoffset: 520; } .cks-logo .mark { stroke: var(--cks-teal); stroke-width: 1.2; stroke-dasharray: 560; stroke-dashoffset: 560; } .cks-logo .word { stroke: var(--cks-navy-ink); stroke-width: 0.7; stroke-dasharray: 1800; stroke-dashoffset: 1800; } .cks-logo .micro { stroke: var(--cks-navy-ink); stroke-width: 0.35; stroke-dasharray: 9000; stroke-dashoffset: 9000; } .cks-logo.is-playing .shield { animation: cks-draw 1.0s cubic-bezier(0.7, 0, 0.3, 1) 0.05s forwards, cks-fill-navy 0.35s ease-out 1.05s forwards; } .cks-logo.is-playing .mark { animation: cks-draw 1.05s cubic-bezier(0.7, 0, 0.3, 1) 0.25s forwards, cks-fill-teal 0.35s ease-out 1.30s forwards; } .cks-logo.is-playing .word { animation: cks-draw 1.10s ease-out 0.60s forwards, cks-fill-navy 0.4s ease-out 1.65s forwards; } .cks-logo.is-playing .micro { animation: cks-fill-navy 0.5s ease-out 1.95s forwards; } @keyframes cks-draw { to { stroke-dashoffset: 0; } } @keyframes cks-fill-navy { to { fill: var(--cks-navy-ink); stroke: transparent; } } @keyframes cks-fill-teal { to { fill: var(--cks-teal); stroke: transparent; } } @media (prefers-reduced-motion: reduce) { .cks-logo path { stroke: none; } .cks-logo .shield, .cks-logo .word, .cks-logo .micro { fill: var(--cks-navy-ink); } .cks-logo .mark { fill: var(--cks-teal); } } /* ============================================================ CLIENT label — animated logo block in the hero ============================================================ */ .cks-client-mark { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; border: 1.5px solid var(--cks-teal); background: rgba(27, 138, 156, 0.06); } .cks-client-mark .cks-client-id { display: inline-flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.28em; color: var(--cks-teal); text-transform: uppercase; } .cks-client-mark .cks-client-id .dash { width: 1px; height: 14px; background: rgba(27, 138, 156, 0.4); } .cks-client-mark .cks-client-name { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cks-client-mark .cks-logo { --cks-logo-size: 168px; } .cks-client-mark .cks-client-text { font-size: 14px; font-weight: 500; color: var(--cks-navy-ink); letter-spacing: -0.005em; max-width: 320px; line-height: 1.35; } /* ============================================================ Footer co-sign — Entropia × ЦКС ============================================================ */ .cks-cosign { display: inline-flex; align-items: center; gap: 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .cks-cosign .x { opacity: 0.45; font-weight: 400; } .cks-cosign .cks-cosign-mark { display: inline-flex; align-items: center; gap: 8px; } .cks-cosign .cks-logo { --cks-logo-size: 64px; } /* ============================================================ THEME FULL — whole page rebrand to navy + teal Primary accent uses TEAL-LIGHT (#22B0C8) for stronger pop against the dark navy background. ============================================================ */ .theme-cks-full { /* Brighter cyan-teal (#22B0C8) used as the primary accent — stronger pop on the dark navy ground than the deeper teal. */ --color-bg: var(--cks-navy); --color-primary: var(--cks-paper); --color-accent: var(--cks-teal-2); --accent: var(--cks-teal-2); --accent-12: rgba(34, 176, 200, 0.16); --accent-30: rgba(34, 176, 200, 0.40); --accent-glow: rgba(34, 176, 200, 0.7); --titanium-dim: rgba(240, 244, 248, 0.76); --titanium-faint: rgba(240, 244, 248, 0.5); --titanium-mute: rgba(240, 244, 248, 0.55); --line: rgba(240, 244, 248, 0.10); --hairline: 1px solid rgba(240, 244, 248, 0.10); background: var(--cks-navy); color: var(--cks-paper); font-family: 'Golos Text', system-ui, sans-serif; } .theme-cks-full .nav { background: rgba(13, 27, 42, 0.85); border-bottom: var(--hairline); color: var(--cks-paper); } .theme-cks-full .nav-item { color: rgba(240, 244, 248, 0.7); } .theme-cks-full .nav-item:hover, .theme-cks-full .nav-item.is-active { color: var(--cks-teal-2); } .theme-cks-full .logo { color: var(--cks-paper); } .theme-cks-full .status { color: var(--cks-teal-2); } .theme-cks-full .status-dot { background: var(--cks-teal-2); box-shadow: 0 0 8px var(--cks-teal-2); } .theme-cks-full .btn-primary { background: var(--cks-teal-2); border-color: var(--cks-teal-2); color: var(--cks-navy); } .theme-cks-full .btn-primary:hover { background: var(--cks-teal); border-color: var(--cks-teal); color: var(--cks-paper); } /* Recolor the Entropia bordeaux nav mark to teal-light against navy bg. The mark is rendered as an inline SVG of small rects with fill="oklch(...)" — we override the presentation attribute via CSS. */ .theme-cks-full .nav-mark svg rect { fill: var(--cks-teal-2) !important; } .theme-cks-full { --titanium: var(--cks-paper); } .theme-cks-full .display, .theme-cks-full h1, .theme-cks-full h2, .theme-cks-full h3, .theme-cks-full h4, .theme-cks-full .display .dim, .theme-cks-full h2 .dim, .theme-cks-full h3 .dim { color: var(--cks-paper); } /* Section headings — second word is full white, inline with the first */ .theme-cks-full h2 .dim, .theme-cks-full h3 .dim { opacity: 1; color: var(--cks-paper); } /* Hero h1 second line — also full white for impact. */ .theme-cks-full .hero .display .dim { opacity: 1; } .theme-cks-full .hero, .theme-cks-full .section { background: transparent; color: var(--cks-paper); } .theme-cks-full .section { border-top-color: rgba(240, 244, 248, 0.08); } /* Section rhythm: - DARK (untoned sections): base navy #0D1B2A - MID (.tone-cool) : lifted navy #142A40 - LIGHT (.tone-beige) : pale ice #E8EEF2 with navy text Alternation breaks up the dark stretch and provides a reading rhythm. */ .theme-cks-full .section.tone-cool::before { background: #142A40; } .theme-cks-full .section.tone-beige::before { background: #E8EEF2; } .theme-cks-full .section.tone-cream::before { background: var(--cks-navy); } .theme-cks-full .section.tone-clay::before { background: rgba(34, 176, 200, 0.10); } .theme-cks-full .section.tone-rose::before { background: rgba(27, 138, 156, 0.12); } .theme-cks-full .section.tone-sand::before { background: rgba(20, 50, 96, 0.20); } .theme-cks-full .section.tone-espresso::before { background: #050b14; } /* ── LIGHT band recoloring: navy text on pale bg ──────────────────── */ .theme-cks-full .section.tone-beige, .theme-cks-full .section.tone-beige h2, .theme-cks-full .section.tone-beige h3, .theme-cks-full .section.tone-beige h4, .theme-cks-full .section.tone-beige h2 .dim, .theme-cks-full .section.tone-beige h3 .dim { color: var(--cks-navy); } .theme-cks-full .section.tone-beige .cks-title-accent { color: var(--cks-teal); } .theme-cks-full .section.tone-beige .eyebrow { color: var(--cks-teal); } .theme-cks-full .section.tone-beige .dim, .theme-cks-full .section.tone-beige p.dim, .theme-cks-full .section.tone-beige .mute { color: rgba(13, 27, 42, 0.72); } .theme-cks-full .section.tone-beige .faint, .theme-cks-full .section.tone-beige .mono.faint { color: rgba(13, 27, 42, 0.5); } .theme-cks-full .section.tone-beige b, .theme-cks-full .section.tone-beige strong { color: var(--cks-navy); } .theme-cks-full .section.tone-beige .mono.accent, .theme-cks-full .section.tone-beige .accent { color: var(--cks-teal); } .theme-cks-full .section.tone-beige .chip { border-color: rgba(27, 138, 156, 0.4); color: var(--cks-teal-dark); background: rgba(27, 138, 156, 0.06); } /* Metric tile grids on LIGHT bg — white tiles + subtle navy hairlines */ .theme-cks-full .section.tone-beige [style*="background: var(--line)"], .theme-cks-full .section.tone-beige [style*="background:var(--line)"] { background: rgba(13, 27, 42, 0.12) !important; } .theme-cks-full .section.tone-beige [style*="background: rgba(255,255,255,0.5)"], .theme-cks-full .section.tone-beige [style*="background:rgba(255,255,255,0.5)"] { background: rgba(255, 255, 255, 0.78) !important; } .theme-cks-full .section.tone-beige [style*="background: rgba(255,255,255,0.3)"], .theme-cks-full .section.tone-beige [style*="background:rgba(255,255,255,0.3)"] { background: rgba(255, 255, 255, 0.55) !important; } .theme-cks-full .section.tone-beige [style*="border: var(--hairline)"] { border-color: rgba(13, 27, 42, 0.18) !important; } /* BURST — финальный CTA в CKS-палитре: тёмный navy-baseline + teal-light glow в правом-верхнем углу, глубокая navy-mid тень в левом-нижнем. */ .theme-cks-full .section.tone-burst::before { background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(34, 176, 200, 0.28) 0%, transparent 55%), radial-gradient(ellipse 55% 65% at 0% 100%, rgba(20, 50, 96, 0.55) 0%, transparent 60%), #061320; } .theme-cks-full .section.tone-burst { color: var(--cks-paper); } .theme-cks-full .section.tone-burst h2, .theme-cks-full .section.tone-burst h3 { color: var(--cks-paper); } .theme-cks-full .section.tone-burst .mono.faint, .theme-cks-full .section.tone-burst .mono.mute, .theme-cks-full .section.tone-burst .dim { color: rgba(240, 244, 248, 0.66) !important; } .theme-cks-full .section.tone-burst .handoff, .theme-cks-full .section.tone-burst .handoff-light { background: transparent; border-color: rgba(34, 176, 200, 0.35); } .theme-cks-full .section.tone-burst .btn.btn-primary { background: var(--cks-teal-2); color: var(--cks-navy); border-color: transparent; } .theme-cks-full .section.tone-burst .btn.btn-primary:hover { background: var(--cks-paper); color: var(--cks-navy); box-shadow: 0 0 24px rgba(34, 176, 200, 0.4); } /* Eyebrows, dim text, chips */ .theme-cks-full .eyebrow { color: var(--cks-teal-2); } .theme-cks-full .dim { color: rgba(240, 244, 248, 0.78); } .theme-cks-full .mute, .theme-cks-full .faint { color: rgba(240, 244, 248, 0.5); } .theme-cks-full .mono.accent, .theme-cks-full .mono.faint.accent, .theme-cks-full .accent { color: var(--cks-teal-2); } .theme-cks-full b, .theme-cks-full strong { color: var(--cks-paper); } .theme-cks-full .chip { border-color: rgba(34, 176, 200, 0.4); color: var(--cks-teal-2); background: rgba(27, 138, 156, 0.08); } /* dot grid background of hero — softer on navy */ .theme-cks-full .grid-bg { background-image: radial-gradient(circle, rgba(34, 176, 200, 0.12) 1px, transparent 1.2px); opacity: 0.6; } /* metric tiles inside sections — re-skin to navy */ .theme-cks-full .section [style*="background: var(--line)"], .theme-cks-full .section [style*="background:var(--line)"] { background: rgba(240, 244, 248, 0.08) !important; } .theme-cks-full .section [style*="background: rgba(255,255,255,0.5)"], .theme-cks-full .section [style*="background:rgba(255,255,255,0.5)"] { background: rgba(20, 50, 96, 0.35) !important; } .theme-cks-full .section [style*="background: rgba(255,255,255,0.3)"], .theme-cks-full .section [style*="background:rgba(255,255,255,0.3)"] { background: rgba(20, 50, 96, 0.28) !important; } /* Client mark — invert on dark page */ .theme-cks-full .cks-client-mark { background: rgba(27, 138, 156, 0.08); border-color: rgba(34, 176, 200, 0.6); } .theme-cks-full .cks-client-mark .cks-client-text { color: var(--cks-paper); } .theme-cks-full .cks-client-mark .cks-client-id { color: var(--cks-teal-2); } /* Logo on dark — switch ink to paper for shield/word/micro */ .theme-cks-full .cks-logo .shield, .theme-cks-full .cks-logo .word, .theme-cks-full .cks-logo .micro { stroke: var(--cks-paper); } .theme-cks-full .cks-logo.is-playing .shield { animation: cks-draw 1.0s cubic-bezier(0.7, 0, 0.3, 1) 0.05s forwards, cks-fill-paper 0.35s ease-out 1.05s forwards; } .theme-cks-full .cks-logo.is-playing .word { animation: cks-draw 1.10s ease-out 0.60s forwards, cks-fill-paper 0.4s ease-out 1.65s forwards; } .theme-cks-full .cks-logo.is-playing .micro { animation: cks-fill-paper 0.5s ease-out 1.95s forwards; } @keyframes cks-fill-paper { to { fill: var(--cks-paper); stroke: transparent; } } @media (prefers-reduced-motion: reduce) { .theme-cks-full .cks-logo .shield, .theme-cks-full .cks-logo .word, .theme-cks-full .cks-logo .micro { fill: var(--cks-paper); } } /* video-beam — recolor all tones to navy/teal in full mode */ .theme-cks-full .video-beam[data-tone="warm"], .theme-cks-full .video-beam[data-tone="cool"], .theme-cks-full .video-beam[data-tone="beige"] { --vb-c1: var(--cks-teal-dark); --vb-c2: var(--cks-teal-2); --vb-c3: var(--cks-paper); } .theme-cks-full .video-beam.is-slide .video-beam-surface { background: radial-gradient(ellipse 90% 70% at 25% 25%, rgba(34, 176, 200, 0.20) 0%, var(--cks-navy) 78%), var(--cks-navy); color: var(--cks-paper); } .theme-cks-full .video-beam-surface { background: #050b14; } .theme-cks-full .video-beam-surface .video-beam-overlay { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(20, 50, 96, 0.45) 0%, var(--cks-navy) 78%), var(--cks-navy); } .theme-cks-full .video-beam.is-slide .sp-block, .theme-cks-full .video-beam.is-slide .sp-list li { color: rgba(240, 244, 248, 0.88); } .theme-cks-full .video-beam.is-slide .sp-title { color: var(--cks-paper); } .theme-cks-full .video-beam.is-slide .sp-block strong, .theme-cks-full .video-beam.is-slide .sp-list li strong, .theme-cks-full .video-beam.is-slide .sp-block-label, .theme-cks-full .video-beam.is-slide .sp-eyebrow, .theme-cks-full .video-beam.is-slide .sp-list li::before, .theme-cks-full .video-beam.is-slide .sp-lede strong { color: var(--cks-teal-2); } /* Slide-panel typography */ .theme-cks-full .slide-panel, .theme-cks-full .slide-panel * { font-family: 'Golos Text', 'Inter Tight', system-ui, sans-serif; } /* Blueprint — colorize to navy/teal */ .theme-cks-full .platform-blueprint { background: rgba(13, 27, 42, 0.0); } .theme-cks-full .bp-svg rect[fill="url(#bp-dots)"] { opacity: 0.5; } .theme-cks-full .bp-tick { stroke: rgba(240, 244, 248, 0.5); } .theme-cks-full .bp-coord { fill: rgba(240, 244, 248, 0.5); } .theme-cks-full .bp-core-box { stroke: var(--cks-teal-2); fill: rgba(27, 138, 156, 0.18); } .theme-cks-full .bp-core-corner { fill: var(--cks-teal-2); } .theme-cks-full .bp-core-sub { fill: var(--cks-teal-2); } .theme-cks-full .bp-core-label { fill: var(--cks-paper); } .theme-cks-full .bp-core-meta { fill: rgba(240, 244, 248, 0.7); } .theme-cks-full .bp-pulse { stroke: rgba(34, 176, 200, 0.35); } .theme-cks-full .bp-module-box { stroke: rgba(240, 244, 248, 0.25); fill: rgba(20, 50, 96, 0.35); } .theme-cks-full .bp-mod-corner { stroke: rgba(240, 244, 248, 0.5); } .theme-cks-full .bp-mod-name { fill: var(--cks-paper); } .theme-cks-full .bp-mod-meta { fill: rgba(240, 244, 248, 0.6); } .theme-cks-full .bp-mod-id { fill: var(--cks-teal-2); } .theme-cks-full .bp-line { stroke: rgba(34, 176, 200, 0.45); } .theme-cks-full .bp-endpoint { fill: var(--cks-teal-2); } /* Process stream stage — dark background */ .theme-cks-full .stream-stage { background: rgba(13, 27, 42, 0.45); border-color: rgba(240, 244, 248, 0.1); } .theme-cks-full .stream-counter strong { color: var(--cks-teal-2); } /* Handoff (CTA) */ .theme-cks-full .handoff { background: rgba(27, 138, 156, 0.10); border-color: rgba(34, 176, 200, 0.3); } /* Footer */ .theme-cks-full .footer-dark { background: #050b14; color: var(--cks-paper); } .theme-cks-full .footer-dark a { color: rgba(240, 244, 248, 0.7); } /* Title accent — first line of the hero h1 takes the K-letterform teal from the CKS logo, tying the heading to the mark on the right. */ .theme-cks-full .cks-title-accent { color: var(--cks-teal); } /* Hero head row — title on the left, oversized animated logo on the right */ .cks-hero-headrow { display: grid; grid-template-columns: minmax(0, 1.05fr) auto; align-items: center; gap: clamp(24px, 4vw, 72px); margin-top: 36px; } .cks-hero-sidelogo { display: flex; justify-content: flex-end; } .cks-hero-sidelogo .cks-logo { --cks-logo-size: clamp(280px, 30vw, 460px); } @media (max-width: 1080px) { .cks-hero-headrow { grid-template-columns: 1fr; gap: 28px; } .cks-hero-sidelogo { justify-content: flex-start; } .cks-hero-sidelogo .cks-logo { --cks-logo-size: clamp(220px, 50vw, 360px); } } @media (max-width: 720px) { .cks-hero-sidelogo .cks-logo { --cks-logo-size: 200px; } }