/* ========================================================================== Landing page styles — overrides/home.html only. Every rule is scoped under `.stt-landing` (the wrapper the custom template emits) so nothing here can leak into documentation pages, which keep the stock mkdocs-material look. Loaded globally via extra_css rather than from the template's , because `navigation.instant` swaps documents client side and a page-local is not guaranteed to survive that; scoping makes global loading harmless. No webfont, no CDN, no image files: system font stack (the theme is built with `font: false`) and an inline SVG diagram animated with CSS. ========================================================================== */ /* -------------------------------------------------------------------------- Escape mkdocs-material's 61rem content grid, for this page only. `:has()` keeps the selector page-local without needing a body class; where it is unsupported the landing simply renders at the normal doc width, which is a graceful degradation rather than a broken layout. -------------------------------------------------------------------------- */ .md-main__inner:has(> .stt-landing) { max-width: none; margin: 0; } .stt-landing { --stt-green: #6db33f; --stt-green-dark: #56922f; --stt-green-soft: rgba(109, 179, 63, 0.12); --stt-ink: #10151b; --stt-body: #46525f; --stt-muted: #6b7885; --stt-line: rgba(16, 21, 27, 0.1); --stt-surface: #ffffff; --stt-tint: #f6f8f9; --stt-code-bg: #0f1720; --stt-radius: 14px; max-width: none; margin: 0; padding: 0; color: var(--stt-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } [data-md-color-scheme="slate"] .stt-landing { --stt-ink: #e7edf3; --stt-body: #b3c0cd; --stt-muted: #8b99a7; --stt-line: rgba(255, 255, 255, 0.12); --stt-surface: #1a1f26; --stt-tint: #151a20; --stt-green-soft: rgba(109, 179, 63, 0.16); } .stt-landing *, .stt-landing *::before, .stt-landing *::after { box-sizing: border-box; } .stt-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; } .stt-landing h1, .stt-landing h2, .stt-landing h3 { color: var(--stt-ink); letter-spacing: -0.02em; margin: 0; } .stt-landing p { margin: 0; } .stt-landing a { color: var(--stt-green-dark); text-decoration: none; } [data-md-color-scheme="slate"] .stt-landing a { color: var(--stt-green); } .stt-landing a:hover { text-decoration: underline; } .stt-landing code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; background: var(--stt-green-soft); color: inherit; padding: 0.12em 0.38em; border-radius: 5px; } /* ----------------------------- 1. Hero ---------------------------------- */ .stt-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 6vw, 88px); background: radial-gradient(1100px 380px at 12% -8%, var(--stt-green-soft), transparent 70%), var(--stt-surface); border-bottom: 1px solid var(--stt-line); } .stt-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .stt-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stt-green-dark); margin-bottom: 14px !important; } [data-md-color-scheme="slate"] .stt-eyebrow { color: var(--stt-green); } .stt-hero__title { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.06; font-weight: 800; margin-bottom: 20px !important; } .stt-hero__sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--stt-body); margin-bottom: 30px !important; } .stt-hero__meta { margin-top: 20px !important; font-size: 13.5px; color: var(--stt-muted); } .stt-cta { display: flex; flex-wrap: wrap; gap: 12px; } .stt-cta--center { justify-content: center; } .stt-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 10px; font-size: 15.5px; font-weight: 650; line-height: 1; border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .stt-btn:hover { text-decoration: none !important; transform: translateY(-1px); } .stt-btn--primary { background: var(--stt-green); color: #fff !important; box-shadow: 0 6px 18px rgba(109, 179, 63, 0.32); } .stt-btn--primary:hover { background: var(--stt-green-dark); box-shadow: 0 9px 24px rgba(109, 179, 63, 0.4); } .stt-btn--ghost { background: transparent; color: var(--stt-ink) !important; border-color: var(--stt-line); } .stt-btn--ghost:hover { border-color: var(--stt-green); background: var(--stt-green-soft); } .stt-btn__arrow { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .stt-btn__gh { width: 17px; height: 17px; fill: currentColor; } /* Terminal mock in the hero */ .stt-terminal { border-radius: var(--stt-radius); overflow: hidden; background: var(--stt-code-bg); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 22px 50px rgba(16, 21, 27, 0.22); } .stt-terminal__bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .stt-dot { width: 11px; height: 11px; border-radius: 50%; display: block; } .stt-dot--r { background: #ff5f57; } .stt-dot--y { background: #febc2e; } .stt-dot--g { background: #28c840; } .stt-terminal__title { margin-left: 8px; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* --------------------------- 2. Sections -------------------------------- */ .stt-section { padding: clamp(52px, 6.5vw, 92px) 0; background: var(--stt-surface); } .stt-section--tint { background: var(--stt-tint); border-block: 1px solid var(--stt-line); } .stt-h2 { font-size: clamp(27px, 3.1vw, 38px); font-weight: 780; line-height: 1.18; text-align: center; } .stt-lede { max-width: 730px; margin: 16px auto 0 !important; text-align: center; font-size: 17px; color: var(--stt-body); } /* --------------------- 2b. Animated SVG diagram -------------------------- */ .stt-diagram { margin-top: clamp(28px, 4vw, 48px); padding: clamp(18px, 3vw, 34px); background: var(--stt-surface); border: 1px solid var(--stt-line); border-radius: 18px; box-shadow: 0 10px 34px rgba(16, 21, 27, 0.06); overflow-x: auto; } .stt-svg { display: block; width: 100%; min-width: 660px; height: auto; } .stt-node rect { fill: var(--stt-surface); stroke: var(--stt-line); stroke-width: 1.5; } .stt-node--live rect { fill: rgba(255, 176, 32, 0.09); stroke: rgba(255, 176, 32, 0.5); } .stt-node--cassette rect { fill: var(--stt-green-soft); stroke: var(--stt-green); stroke-width: 1.8; } .stt-svg__node { fill: var(--stt-ink); font-size: 15px; font-weight: 640; text-anchor: middle; font-family: inherit; } .stt-svg__nodesub { fill: var(--stt-muted); font-size: 12px; text-anchor: middle; font-family: inherit; } .stt-svg__lane { fill: var(--stt-ink); font-size: 12.5px; font-weight: 760; letter-spacing: 0.1em; font-family: inherit; } .stt-svg__lanesub { fill: var(--stt-muted); font-size: 12px; font-family: inherit; } .stt-svg__edge { fill: var(--stt-muted); font-size: 12px; text-anchor: middle; font-family: inherit; } .stt-svg__badge { fill: #fff; font-size: 13px; font-weight: 700; text-anchor: middle; font-family: inherit; } .stt-badge--fast rect { fill: var(--stt-green); } .stt-svg__line { stroke: var(--stt-line); stroke-width: 2; fill: none; } .stt-svg__arrowhead { fill: var(--stt-muted); } .stt-svg__line--dash { stroke-dasharray: 7 6; stroke: rgba(255, 176, 32, 0.75); } .stt-svg__line--solid { stroke: var(--stt-green); stroke-width: 2.4; } /* Travelling request dots. Lane A crawls (a real model call); lane B snaps across almost instantly, then repeats — the whole point of the picture. */ .stt-pulse { fill: var(--stt-green); } .stt-pulse--a { fill: #f0a91e; animation: stt-lane-a 7s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .stt-pulse--b { animation: stt-lane-b 7s ease-in-out infinite; } @keyframes stt-lane-a { 0% { transform: translateX(150px); opacity: 0; } 3% { opacity: 1; } 34% { transform: translateX(600px); opacity: 1; } 40% { transform: translateX(740px); opacity: 0.25; } 44%, 100% { transform: translateX(740px); opacity: 0; } } @keyframes stt-lane-b { 0%, 46% { transform: translateX(150px); opacity: 0; } 49% { transform: translateX(150px); opacity: 1; } 57% { transform: translateX(742px); opacity: 1; } 60% { transform: translateX(742px); opacity: 0; } 64% { transform: translateX(150px); opacity: 1; } 72% { transform: translateX(742px); opacity: 1; } 75% { transform: translateX(742px); opacity: 0; } 79% { transform: translateX(150px); opacity: 1; } 87% { transform: translateX(742px); opacity: 1; } 90%, 100% { transform: translateX(742px); opacity: 0; } } .stt-write { animation: stt-dashflow 1.4s linear infinite; } @keyframes stt-dashflow { to { stroke-dashoffset: -26; } } /* Single-lane crawl for the Stubbing panel, which has no record/replay split to contrast -- one continuous, looping pass end to end. */ .stt-pulse--stub { fill: var(--stt-green); animation: stt-lane-stub 4.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes stt-lane-stub { 0% { transform: translateX(150px); opacity: 0; } 4% { opacity: 1; } 92% { transform: translateX(900px); opacity: 1; } 97%, 100% { transform: translateX(900px); opacity: 0; } } /* Tool Isolation panel: the skipped real-method node reads as visibly inert -- muted fill, dashed outline, struck-through label -- next to the normal nodes around it. */ .stt-node--authored rect { fill: rgba(93, 143, 214, 0.09); stroke: rgba(93, 143, 214, 0.55); } .stt-node--bypassed rect { fill: rgba(120, 130, 140, 0.08); stroke: var(--stt-muted); stroke-dasharray: 5 4; } .stt-svg__node--strike { text-decoration: line-through; fill: var(--stt-muted); } @media (prefers-reduced-motion: reduce) { .stt-pulse--a, .stt-pulse--b, .stt-pulse--stub, .stt-write { animation: none; } .stt-pulse--a, .stt-pulse--b, .stt-pulse--stub { opacity: 0; } } /* ------------------------ 2c. Interactive demo tabs ----------------------- */ /* CSS-only tabs: the radios are visually hidden but keyboard-focusable; each label is a `for`-bound trigger, and every stateful rule below reaches its target through a `:checked ~ ...` general-sibling selector. No JavaScript, so this works unmodified on a static GitHub Pages build. */ .stt-demo__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .stt-demo__bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 3.5vw, 36px); justify-content: center; } .stt-demo__tab { display: flex; flex-direction: column; gap: 3px; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--stt-line); background: var(--stt-surface); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; min-width: 148px; } .stt-demo__tab:hover { border-color: var(--stt-green); transform: translateY(-1px); } .stt-demo__name { font-size: 13.5px; font-weight: 700; color: var(--stt-ink); } .stt-demo__benefit { font-size: 12px; color: var(--stt-muted); line-height: 1.4; } /* Active-tab styling and panel visibility, one pair of rules per tab. */ #stt-demo-1:checked ~ .stt-demo__bar .stt-demo__tab[data-n="1"], #stt-demo-2:checked ~ .stt-demo__bar .stt-demo__tab[data-n="2"], #stt-demo-3:checked ~ .stt-demo__bar .stt-demo__tab[data-n="3"], #stt-demo-4:checked ~ .stt-demo__bar .stt-demo__tab[data-n="4"], #stt-demo-5:checked ~ .stt-demo__bar .stt-demo__tab[data-n="5"], #stt-demo-6:checked ~ .stt-demo__bar .stt-demo__tab[data-n="6"] { border-color: var(--stt-green); background: var(--stt-green-soft); } #stt-demo-1:checked ~ .stt-demo__bar .stt-demo__tab[data-n="1"] .stt-demo__name, #stt-demo-2:checked ~ .stt-demo__bar .stt-demo__tab[data-n="2"] .stt-demo__name, #stt-demo-3:checked ~ .stt-demo__bar .stt-demo__tab[data-n="3"] .stt-demo__name, #stt-demo-4:checked ~ .stt-demo__bar .stt-demo__tab[data-n="4"] .stt-demo__name, #stt-demo-5:checked ~ .stt-demo__bar .stt-demo__tab[data-n="5"] .stt-demo__name, #stt-demo-6:checked ~ .stt-demo__bar .stt-demo__tab[data-n="6"] .stt-demo__name { color: var(--stt-green-dark); } .stt-demo__panels { position: relative; } .stt-demo__panel { display: none; } #stt-demo-1:checked ~ .stt-demo__panels .stt-demo__panel[data-panel="1"], #stt-demo-2:checked ~ .stt-demo__panels .stt-demo__panel[data-panel="2"], #stt-demo-3:checked ~ .stt-demo__panels .stt-demo__panel[data-panel="3"], #stt-demo-4:checked ~ .stt-demo__panels .stt-demo__panel[data-panel="4"], #stt-demo-5:checked ~ .stt-demo__panels .stt-demo__panel[data-panel="5"], #stt-demo-6:checked ~ .stt-demo__panels .stt-demo__panel[data-panel="6"] { display: block; animation: stt-fade-in 0.25s ease; } @keyframes stt-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .stt-demo__panel { animation: none !important; } /* landing.js already refuses to run under reduced motion; these rules are a CSS-only backstop so the terminal is fully static even if script runs anyway (or a future edit forgets the matchMedia guard). */ .stt-demo-terminal__cursor { animation: none; opacity: 0; } .stt-demo-terminal__result { transition: none; opacity: 1 !important; } } .stt-demo__proves { max-width: 760px; margin: 18px auto 0 !important; text-align: center; font-size: 14px; line-height: 1.6; color: var(--stt-body); } .stt-demo__proves code { font-size: 0.92em; } /* Hero terminal content: a static, already-rendered readout of scenario 1 of 6, and also the complete no-JS/no-motion experience -- the command line already holds its full text and the result is already visible, so nothing here depends on script. The inline script at the end of this template progressively enhances it: typing each scenario's command, revealing its result, and cycling to the next of six, skipping all of that under prefers-reduced-motion. Sits inside .stt-terminal (see above), which supplies the outer chrome shared with the rest of the hero art. */ .stt-demo-terminal__body { padding: 18px 20px 20px; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.65; color: #c9d6e2; } .stt-demo-terminal__cmdline { margin: 0 0 10px; color: #c9d6e2; } .stt-demo-terminal__cursor { display: inline-block; margin-left: 1px; color: #7ee08a; animation: stt-cursor-blink 1s steps(1) infinite; } .stt-terminal.is-typing .stt-demo-terminal__cursor { animation: stt-cursor-blink 0.85s steps(1) infinite; } @keyframes stt-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .stt-demo-terminal__result { transition: opacity 0.2s ease; } .stt-demo-terminal__line { margin: 0; color: #93a4b3; white-space: pre-wrap; } .stt-demo-terminal__line code { color: #cde3f5; background: none; font-size: 0.95em; } .stt-demo-terminal__line--comment { color: #6b7d8f; font-style: italic; margin-bottom: 6px; } .stt-demo-terminal__line--tag { color: #dbe6ef; font-weight: 700; } .stt-demo-terminal__line--record { color: #f0a91e; } .stt-demo-terminal__line--stub { color: #7fb2f0; } .stt-demo-terminal__line--plain { color: #7b8b9c; } .stt-demo-terminal__line--ok { color: #7ee08a; } .stt-demo-terminal__line--summary { color: #e3ecf3; } .stt-demo-terminal__sep { margin: 10px 0 6px; color: #5c6b7a; letter-spacing: 0.08em; font-size: 12px; text-align: center; } @media screen and (max-width: 700px) { .stt-demo__bar { justify-content: stretch; } .stt-demo__tab { flex: 1 1 calc(50% - 10px); min-width: 0; } } /* ----------------------------- 3. Stats --------------------------------- */ .stt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .stt-stat { text-align: center; padding: 26px 16px; border: 1px solid var(--stt-line); border-radius: var(--stt-radius); background: var(--stt-surface); } .stt-stat__num { font-size: clamp(34px, 4vw, 46px); font-weight: 800; line-height: 1; color: var(--stt-green-dark); letter-spacing: -0.03em; } [data-md-color-scheme="slate"] .stt-stat__num { color: var(--stt-green); } .stt-stat__unit { font-size: 0.5em; font-weight: 700; margin-left: 3px; } .stt-stat__unit--pre { margin: 0 2px 0 0; } .stt-stat__label { margin-top: 12px; font-size: 14px; font-weight: 620; color: var(--stt-ink); line-height: 1.45; } .stt-stat__was { font-weight: 450; color: var(--stt-muted); font-size: 13px; } .stt-note { max-width: 860px; margin: 26px auto 0 !important; text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--stt-muted); } .stt-note--center { max-width: 640px; } /* ------------------------- 4. Code showcase ------------------------------ */ .stt-codegrid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 22px; margin-top: clamp(28px, 4vw, 44px); align-items: start; } .stt-code { border-radius: var(--stt-radius); overflow: hidden; background: var(--stt-code-bg); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 32px rgba(16, 21, 27, 0.14); } .stt-code__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; } .stt-code__file { color: #d5e0eb; font-weight: 600; } .stt-code__tag { color: var(--stt-green); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; } .stt-code__body { margin: 0; padding: 18px; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.72; color: #c9d6e2; white-space: pre; overflow-x: auto; } .stt-code__body .c-key { color: #7fb2f0; } .stt-code__body .c-val { color: #7ee08a; } .stt-code__body .c-str { color: #e5b567; } .stt-code__body .c-cmt { color: #6b7d8f; font-style: italic; } .stt-code__body .c-ann { color: #d19a66; } .stt-code__body .c-typ { color: #63c8b4; } .stt-code__body .c-fn { color: #b48ce0; } /* --------------------------- 5. Cards ----------------------------------- */ .stt-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 44px); } .stt-card { display: flex; flex-direction: column; padding: 22px 20px 20px; border: 1px solid var(--stt-line); border-radius: var(--stt-radius); background: var(--stt-surface); color: inherit !important; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .stt-card:hover { text-decoration: none !important; transform: translateY(-3px); border-color: var(--stt-green); box-shadow: 0 12px 28px rgba(16, 21, 27, 0.09); } .stt-card__ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--stt-green-soft); color: var(--stt-green-dark); font-size: 18px; line-height: 1; margin-bottom: 14px; } [data-md-color-scheme="slate"] .stt-card__ico { color: var(--stt-green); } .stt-card__title { font-size: 16px; font-weight: 700; color: var(--stt-ink); margin-bottom: 7px; } .stt-card__body { font-size: 14px; line-height: 1.6; color: var(--stt-body); } /* ----------------------------- 6. Why ----------------------------------- */ .stt-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(28px, 4vw, 44px); } .stt-why__item { padding: 22px 20px; border-radius: var(--stt-radius); background: var(--stt-surface); border: 1px solid var(--stt-line); border-top: 3px solid var(--stt-green); } .stt-why__item h3 { font-size: 16.5px; font-weight: 720; margin-bottom: 8px !important; } .stt-why__item p { font-size: 14px; line-height: 1.62; } /* -------------------------- 7. Comparison ------------------------------- */ .stt-tablewrap { margin-top: clamp(28px, 4vw, 44px); overflow-x: auto; border: 1px solid var(--stt-line); border-radius: var(--stt-radius); background: var(--stt-surface); } .stt-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; } .stt-table th, .stt-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--stt-line); vertical-align: middle; } .stt-table thead th { font-size: 13px; font-weight: 700; color: var(--stt-ink); background: var(--stt-tint); white-space: nowrap; } .stt-table tbody th { font-weight: 620; color: var(--stt-ink); white-space: nowrap; } .stt-table tbody tr:last-child th, .stt-table tbody tr:last-child td { border-bottom: 0; } .stt-table__us { background: var(--stt-green-soft); font-weight: 620; color: var(--stt-ink); } .stt-table thead .stt-table__us { background: var(--stt-green); color: #fff; } .stt-yes::before { content: "✓ "; color: var(--stt-green-dark); font-weight: 800; } [data-md-color-scheme="slate"] .stt-yes::before { color: var(--stt-green); } .stt-no::before { content: "✕ "; color: #d0555a; font-weight: 800; } .stt-fair { margin-top: 26px; padding: 22px 24px; border-radius: var(--stt-radius); background: var(--stt-tint); border: 1px solid var(--stt-line); border-left: 3px solid var(--stt-muted); } .stt-fair h3 { font-size: 16px; font-weight: 720; margin-bottom: 8px !important; } .stt-fair p { font-size: 14.5px; line-height: 1.68; } /* -------------------------- 8. Architecture ------------------------------ */ .stt-tree { margin-top: clamp(24px, 3.5vw, 38px); border-radius: var(--stt-radius); background: var(--stt-code-bg); border: 1px solid rgba(255, 255, 255, 0.08); overflow-x: auto; box-shadow: 0 12px 32px rgba(16, 21, 27, 0.14); } .stt-tree pre { margin: 0; padding: 22px; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12.8px; line-height: 1.78; color: #c9d6e2; white-space: pre; } .stt-tree .t-dim { color: #6b7d8f; } /* --------------------------- 9. Final CTA -------------------------------- */ .stt-final { padding: clamp(56px, 7vw, 96px) 0; background: radial-gradient(900px 320px at 50% 0%, var(--stt-green-soft), transparent 72%), var(--stt-surface); border-top: 1px solid var(--stt-line); text-align: center; } .stt-final__title { font-size: clamp(27px, 3.3vw, 40px); font-weight: 800; } .stt-final__sub { margin: 14px 0 28px !important; font-size: 17px; color: var(--stt-body); } .stt-disclaimer { max-width: 760px; margin: 44px auto 0; padding: 16px 20px; border: 1px dashed var(--stt-line); border-radius: var(--stt-radius); font-size: 13px; line-height: 1.65; color: var(--stt-muted); text-align: left; } .stt-disclaimer strong { color: var(--stt-ink); } /* --------------------------- Responsive ---------------------------------- */ @media screen and (max-width: 1100px) { .stt-cards, .stt-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 900px) { .stt-hero__inner, .stt-codegrid { grid-template-columns: minmax(0, 1fr); } .stt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stt-hero__art { order: 2; } } @media screen and (max-width: 560px) { .stt-cards, .stt-why, .stt-stats { grid-template-columns: minmax(0, 1fr); } .stt-cta { flex-direction: column; align-items: stretch; } .stt-btn { justify-content: center; } }