olzhasAl/harness-engineering-kz
0
1:root {2 font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;3 color: #17191c;4 background: #f4f1e9;5 font-synthesis: none;6 text-rendering: optimizeLegibility;7 --ink: #101214;8 --paper: #f4f1e9;9 --card: #fbfaf6;10 --line: #d8d4c9;11 --lime: #c8ff3d;12 --dark: #0b0d0f;13}14* { box-sizing: border-box; }15html { scroll-behavior: smooth; }16body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }17button, input { font: inherit; }18button { cursor: pointer; }19a { color: inherit; }20 21.site-header {22 position: sticky;23 top: 0;24 z-index: 50;25 height: 72px;26 display: grid;27 grid-template-columns: 1fr auto 1fr;28 align-items: center;29 padding: 0 32px;30 background: rgba(244, 241, 233, .93);31 border-bottom: 1px solid var(--line);32 backdrop-filter: blur(16px);33}34.brand { display: inline-flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 0; justify-self: start; color: var(--ink); }35.brand-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--dark); color: var(--paper); display: grid; place-items: center; font-weight: 760; }36.brand-text { font-weight: 720; letter-spacing: -.02em; }37.desktop-nav { display: flex; align-items: center; gap: 4px; }38.nav-link { border: 0; background: transparent; padding: 10px 12px; border-radius: 10px; color: #55595d; font-size: 14px; }39.nav-link:hover, .nav-link.active { background: #e8e4da; color: var(--ink); }40.header-actions { justify-self: end; }41.lang-switch { display: inline-flex; border: 1px solid #c9c4b8; border-radius: 999px; padding: 3px; background: #eeebe3; }42.lang-switch button { border: 0; background: transparent; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 760; color: #676a6d; }43.lang-switch button.selected { background: var(--dark); color: #fff; }44 45.section-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }46.hero { min-height: 620px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; padding: 84px 0 72px; }47.hero-copy { max-width: 720px; }48.eyebrow { font-size: 12px; font-weight: 820; letter-spacing: .18em; color: #5e625e; margin-bottom: 18px; }49.hero h1 { font-size: clamp(56px, 7.2vw, 112px); line-height: .91; letter-spacing: -.07em; margin: 0; max-width: 850px; }50.hero-text { max-width: 680px; font-size: 22px; line-height: 1.45; color: #55595c; margin: 34px 0 30px; }51.button-row { display: flex; flex-wrap: wrap; gap: 10px; }52.button { border: 1px solid transparent; border-radius: 999px; padding: 13px 20px; font-weight: 730; transition: transform .18s ease, background .18s ease; }53.button:hover { transform: translateY(-1px); }54.button.primary { background: var(--dark); color: #fff; }55.button.secondary { border-color: #aaa69d; background: transparent; color: var(--ink); }56.button.light { background: var(--lime); color: var(--dark); }57.hero-links { margin-top: 20px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #64676a; }58.hero-links a:hover { color: #111; }59 60.hero-panel { min-height: 480px; background: var(--dark); border-radius: 28px; padding: 30px; box-shadow: 0 30px 70px rgba(15,16,17,.16); overflow: hidden; }61.panel-grid { height: 100%; min-height: 420px; position: relative; border: 1px solid #2b3033; border-radius: 18px; background-image: linear-gradient(#1e2326 1px, transparent 1px), linear-gradient(90deg, #1e2326 1px, transparent 1px); background-size: 36px 36px; overflow: hidden; }62.panel-label { position: absolute; left: 26px; top: 24px; color: #e8e9e5; font-size: 11px; letter-spacing: .22em; font-weight: 820; }63.panel-line { height: 2px; background: #5c6367; position: absolute; left: 26px; top: 62px; width: 110px; }64.panel-line.wide { width: 180px; top: 72px; background: var(--lime); }65.panel-line.medium { width: 140px; top: 82px; }66.panel-node { position: absolute; border: 1px solid #4a5155; background: #14181a; color: #d9ddda; border-radius: 10px; padding: 12px 14px; font-size: 11px; letter-spacing: .1em; }67.n1 { left: 9%; top: 38%; }68.n2 { right: 10%; top: 25%; }69.n3 { left: 19%; bottom: 16%; }70.n4 { right: 12%; bottom: 22%; }71.panel-flow { position: absolute; height: 1px; background: #596064; transform-origin: left center; }72.f1 { width: 46%; left: 28%; top: 44%; transform: rotate(-16deg); }73.f2 { width: 40%; left: 35%; top: 61%; transform: rotate(13deg); }74.panel-score { position: absolute; right: 24px; top: 24px; text-align: right; color: #90979b; font-size: 10px; letter-spacing: .13em; }75.panel-score strong { color: var(--lime); font-size: 29px; line-height: 1.25; letter-spacing: -.03em; }76 77.stats-strip { display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }78.stat { padding: 28px 16px 28px 0; border-right: 1px solid var(--line); }79.stat:last-child { border-right: 0; }80.stat-value { font-size: 42px; font-weight: 730; letter-spacing: -.05em; }81.stat-label { color: #727477; font-size: 13px; margin-top: 4px; }82 83.content-section { padding: 96px 0 110px; }84.section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 38px; }85.section-heading h2, .checker-teaser h2, .page-intro h1 { font-size: clamp(38px,5vw,70px); letter-spacing: -.055em; line-height: .98; margin: 0; }86.section-heading p, .checker-teaser p, .page-intro p { font-size: 18px; line-height: 1.55; color: #65686a; margin: 0; max-width: 650px; }87.course-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }88.course-card { min-height: 235px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(251,250,246,.48); }89.course-card-number { font-size: 11px; letter-spacing: .15em; color: #8a8b89; }90.course-card h3 { margin: 58px 0 10px; font-size: 24px; letter-spacing: -.03em; }91.course-card p { margin: 0; line-height: 1.55; color: #66696c; }92 93.checker-teaser { margin-bottom: 96px; background: var(--dark); color: #fff; border-radius: 26px; padding: 48px; display: flex; justify-content: space-between; gap: 40px; align-items: end; }94.checker-teaser .eyebrow { color: #939b96; }95.checker-teaser p { margin-top: 20px; color: #aeb3b0; }96 97.page-shell { padding: 70px 0 100px; min-height: 70vh; }98.narrow-page { width: min(920px, calc(100% - 48px)); }99.page-intro { margin-bottom: 52px; }100.page-intro p { margin-top: 20px; }101 102.reader-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 42px; align-items: start; }103.toc-panel { position: sticky; top: 94px; max-height: calc(100vh - 116px); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(251,250,246,.7); }104.toc-panel input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 14px 15px; outline: none; }105.toc-list { max-height: calc(100vh - 165px); overflow-y: auto; padding: 8px; }106.toc-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 10px; border-radius: 8px; color: #44494c; font-size: 13px; line-height: 1.35; }107.toc-item:hover { background: #ece8df; color: #111; }108.toc-item.sub { padding-left: 22px; color: #74777a; }109.markdown-body { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px,5vw,58px); box-shadow: 0 16px 50px rgba(30,30,24,.04); }110.markdown-body h1 { font-size: clamp(38px,5vw,64px); line-height: 1; letter-spacing: -.05em; margin: 0 0 32px; }111.markdown-body h2 { font-size: 34px; letter-spacing: -.04em; line-height: 1.08; margin: 70px 0 20px; scroll-margin-top: 100px; }112.markdown-body h3 { font-size: 22px; letter-spacing: -.025em; margin: 38px 0 14px; scroll-margin-top: 100px; }113.markdown-body p, .markdown-body li { line-height: 1.72; color: #3d4245; }114.markdown-body strong { color: #111; }115.markdown-body blockquote { margin: 24px 0; border-left: 3px solid var(--dark); padding: 5px 0 5px 18px; color: #515558; }116.markdown-body pre { overflow-x: auto; background: #111416; color: #e8ebe7; border-radius: 12px; padding: 18px; font-size: 13px; line-height: 1.6; position: relative; }117.markdown-body pre[data-mermaid="true"] { background: #f1eee6; color: #2d3336; border: 1px solid #dbd6ca; padding-top: 42px; }118.markdown-body pre[data-mermaid="true"]::before { content: "MERMAID SOURCE"; position: absolute; top: 13px; left: 18px; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #7b7f80; }119.markdown-body code:not(pre code) { background: #e9e6de; border-radius: 5px; padding: 2px 5px; font-size: .9em; }120.markdown-body table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }121.markdown-body th, .markdown-body td { border: 1px solid #d8d5cc; padding: 10px 12px; text-align: left; vertical-align: top; }122.markdown-body img { max-width: 100%; }123.markdown-body a { text-decoration-thickness: 1px; text-underline-offset: 3px; }124.loading-line { height: 3px; width: 100%; background: #d5d1c6; }125 126.quiz-card, .result-card, .analysis-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 30px; }127.quiz-meta { display: flex; gap: 12px; flex-wrap: wrap; color: #74787a; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }128.quiz-card h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.035em; margin: 24px 0 28px; }129.option-list { display: grid; gap: 10px; }130.option { text-align: left; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; border: 1px solid var(--line); background: #f6f3eb; border-radius: 12px; padding: 14px 16px; line-height: 1.45; }131.option span { width: 28px; height: 28px; border-radius: 50%; background: #e4e0d6; display: grid; place-items: center; font-size: 12px; font-weight: 760; }132.option.correct { border-color: #74a32d; background: #edf6dd; }133.option.wrong { border-color: #b85b53; background: #f8e4e1; }134.answer-panel { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 22px; }135.answer-panel p { line-height: 1.6; color: #55595b; }136.result-card { text-align: center; padding: 70px 30px; }137.result-score { font-size: 76px; font-weight: 780; letter-spacing: -.06em; }138.result-caption { color: #696d70; margin: 8px 0 28px; }139 140.drop-zone { min-height: 310px; border: 1px dashed #9d9a92; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(251,250,246,.7); text-align: center; padding: 30px; }141.drop-symbol { width: 72px; height: 72px; border: 1px solid #bbb6aa; border-radius: 18px; display: grid; place-items: center; font-size: 15px; font-weight: 800; letter-spacing: .1em; }142.drop-zone p { margin: 0; color: #74777a; }143.error-line { color: #9a3832; font-weight: 650; }144.analysis-card { margin-top: 24px; }145.score-block { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--line); }146.score-label { color: #6d7173; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }147.score-value { font-size: 72px; font-weight: 800; letter-spacing: -.07em; line-height: 1; margin-top: 6px; }148.score-value span { font-size: 18px; letter-spacing: 0; color: #777a7d; }149.score-meta { text-align: right; color: #74777a; font-size: 13px; line-height: 1.5; }150.check-list { margin-top: 10px; }151.check-row { display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid #e0ddd5; padding: 17px 0; }152.check-main { display: grid; gap: 4px; }153.check-main span { color: #717477; font-size: 13px; line-height: 1.45; }154.check-points { font-weight: 800; min-width: 48px; text-align: right; }155.heuristic-note { color: #7b7d7f; font-size: 12px; margin: 18px 0 0; }156 157.golden-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }158.golden-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; overflow: hidden; }159.golden-head { display: flex; gap: 12px; flex-wrap: wrap; color: #76797b; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }160.golden-card h2 { font-size: 25px; letter-spacing: -.035em; margin: 18px 0; }161.golden-card pre { white-space: pre-wrap; background: #f0ede5; border-radius: 10px; padding: 14px; line-height: 1.5; font-family: inherit; font-size: 14px; }162.criteria { border-top: 1px solid var(--line); padding-top: 15px; margin-top: 15px; display: grid; gap: 7px; font-size: 13px; color: #4d5254; }163.criteria.reject strong { color: #8b3d36; }164.baseline { margin-top: 16px; color: #777a7c; font-size: 12px; }165 166.footer { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 48px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }167.footer-brand { font-size: 18px; font-weight: 760; letter-spacing: -.025em; }168.footer p { color: #737679; font-size: 13px; line-height: 1.55; max-width: 760px; }169.footer-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-end; align-content: start; font-size: 13px; }170.mobile-nav { display: none; }171 172@media (max-width: 980px) {173 .site-header { grid-template-columns: 1fr auto; padding: 0 20px; }174 .desktop-nav { display: none; }175 .hero { grid-template-columns: 1fr; padding-top: 60px; }176 .hero-panel { min-height: 390px; }177 .stats-strip { grid-template-columns: repeat(3,1fr); }178 .stat:nth-child(3) { border-right: 0; }179 .course-grid { grid-template-columns: repeat(2,1fr); }180 .reader-layout { grid-template-columns: 1fr; }181 .toc-panel { position: relative; top: 0; max-height: 360px; }182 .toc-list { max-height: 290px; }183 .golden-grid { grid-template-columns: 1fr; }184 .mobile-nav { display: grid; position: fixed; z-index: 60; bottom: 10px; left: 12px; right: 12px; grid-template-columns: repeat(5,1fr); gap: 4px; background: rgba(11,13,15,.94); border: 1px solid #2c3033; border-radius: 16px; padding: 5px; backdrop-filter: blur(16px); }185 .mobile-nav button { border: 0; background: transparent; color: #aeb3b0; border-radius: 11px; padding: 9px 4px; font-size: 10px; }186 .mobile-nav button.active { background: #272b2e; color: #fff; }187 body { padding-bottom: 70px; }188}189 190@media (max-width: 680px) {191 .section-shell, .narrow-page, .footer { width: min(100% - 28px,1240px); }192 .brand-text { display: none; }193 .site-header { height: 62px; }194 .hero { min-height: auto; gap: 34px; padding: 48px 0; }195 .hero h1 { font-size: 55px; }196 .hero-text { font-size: 18px; margin-top: 24px; }197 .hero-panel { min-height: 320px; padding: 16px; border-radius: 20px; }198 .panel-grid { min-height: 286px; }199 .stats-strip { grid-template-columns: repeat(2,1fr); }200 .stat:nth-child(3) { border-right: 1px solid var(--line); }201 .stat:nth-child(2n) { border-right: 0; }202 .section-heading { grid-template-columns: 1fr; gap: 20px; }203 .course-grid { grid-template-columns: 1fr; }204 .checker-teaser { padding: 28px; align-items: flex-start; flex-direction: column; }205 .page-shell { padding-top: 46px; }206 .markdown-body { padding: 22px 18px; border-radius: 14px; }207 .markdown-body h2 { font-size: 28px; }208 .quiz-card, .result-card, .analysis-card { padding: 20px; }209 .quiz-card h2 { font-size: 27px; }210 .score-block { align-items: flex-start; flex-direction: column; }211 .score-meta { text-align: left; }212 .check-row { gap: 12px; }213 .footer { grid-template-columns: 1fr; }214 .footer-links { justify-content: flex-start; }215}216