Spaces:
Running
Running
| :root{ | |
| --mt-blue:#1f3b63; | |
| --mt-light:#38bdf8; | |
| --graphite:#334155; | |
| --silver:#cbd5e1; | |
| --white:#ffffff; | |
| --bg:#f3f6fa; | |
| --bg-soft:rgba(31,59,99,.06); | |
| --ink:#111827; | |
| --secondary:#4b5563; | |
| --border-color: rgba(148,163,184,.20); | |
| } | |
| *{box-sizing:border-box} | |
| html{scroll-behavior:smooth} | |
| body{ | |
| margin:0; | |
| color:var(--ink); | |
| font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif; | |
| background:var(--bg); | |
| line-height:1.45; | |
| } | |
| .shell{width:min(1180px,calc(100% - 2rem));margin:0 auto} | |
| .site-header{ | |
| position:sticky; | |
| top:0; | |
| z-index:10; | |
| backdrop-filter:blur(18px); | |
| background:rgba(243,246,250,.82); | |
| border-bottom:1px solid rgba(148,163,184,.18); | |
| } | |
| .brand-shell{ | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| min-height:68px; | |
| gap:1rem; | |
| } | |
| .brand{ | |
| display:flex; | |
| align-items:center; | |
| gap:.75rem; | |
| color:var(--ink); | |
| text-decoration:none; | |
| font-weight:600; | |
| } | |
| .brand img{border-radius:999px} | |
| .brand-kicker{display:block;font-size:.75rem;color:var(--secondary);} | |
| .brand-name{display:block;font-size:.95rem} | |
| .main-nav{ | |
| display:flex; | |
| gap:.75rem; | |
| align-items:center; | |
| font-size:.9rem; | |
| color:var(--secondary); | |
| } | |
| .main-nav a{ | |
| color:var(--graphite); | |
| text-decoration:none; | |
| } | |
| .main-nav a:hover{color:var(--mt-blue);} | |
| .button{ | |
| display:inline-flex; | |
| align-items:center; | |
| justify-content:center; | |
| padding:.7rem 1rem; | |
| border-radius:999px; | |
| text-decoration:none; | |
| border:1px solid rgba(148,163,184,.22); | |
| color:var(--graphite); | |
| font-size:.9rem; | |
| } | |
| .button-primary{ | |
| background:var(--mt-blue); | |
| color:var(--white); | |
| border-color:var(--mt-blue); | |
| } | |
| .button-secondary{background:rgba(255,255,255,.66);} | |
| .hero{ | |
| display:grid; | |
| grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); | |
| gap:2rem; | |
| padding:4rem 0 2rem; | |
| align-items:end; | |
| } | |
| .hero-main h1{ | |
| margin:.35rem 0 .8rem; | |
| font-size:3rem; | |
| letter-spacing:-.03em; | |
| line-height:1.05; | |
| } | |
| .eyebrow{ | |
| font-size:.9rem; | |
| color:var(--mt-blue); | |
| letter-spacing:.06em; | |
| text-transform:uppercase; | |
| margin:0; | |
| font-weight:700; | |
| } | |
| .lead{ | |
| margin:0; | |
| color:var(--secondary); | |
| max-width:46rem; | |
| font-size:1.05rem; | |
| } | |
| .hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.2rem} | |
| .hero-note{ | |
| border:1px solid rgba(148,163,184,.24); | |
| background:rgba(255,255,255,.70); | |
| border-radius:1.5rem; | |
| padding:1.2rem; | |
| box-shadow:0 18px 40px rgba(15,23,42,.05); | |
| } | |
| .section{padding:2.25rem 0} | |
| .section-intro{margin-bottom:1rem} | |
| .section-intro h2{font-size:1.75rem;letter-spacing:-.02em;margin:0} | |
| .section-intro p{margin:.45rem 0 0;color:var(--secondary);} | |
| .catalog{ | |
| display:grid; | |
| gap:1rem; | |
| grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); | |
| } | |
| .model-card{ | |
| background:rgba(255,255,255,.78); | |
| border:1px solid rgba(148,163,184,.20); | |
| border-radius:1.25rem; | |
| padding:1rem; | |
| box-shadow:0 14px 30px rgba(15,23,42,.045); | |
| } | |
| .model-card h3{margin:.35rem 0;font-size:1.15rem} | |
| .model-card p{margin:.35rem 0 0;color:var(--secondary);font-size:.95rem} | |
| .model-card-head{ | |
| display:flex; | |
| gap:.5rem; | |
| flex-wrap:wrap; | |
| align-items:center; | |
| margin-bottom:.25rem; | |
| } | |
| .model-badge{ | |
| font-weight:700; | |
| font-size:.85rem; | |
| color:var(--graphite); | |
| } | |
| .status{ | |
| border-radius:999px; | |
| padding:.22rem .65rem; | |
| border:1px solid rgba(148,163,184,.22); | |
| font-size:.75rem; | |
| color:var(--graphite); | |
| } | |
| .status-ready{background:rgba(56,189,248,.10);border-color:rgba(56,189,248,.28)} | |
| .status-preparing{background:rgba(148,163,184,.10);} | |
| dl{margin:.8rem 0 0} | |
| dl div{display:flex;gap:.4rem;justify-content:space-between;border-top:1px solid rgba(148,163,184,.12);padding:.35rem 0;font-size:.9rem} | |
| dt{color:var(--secondary)} | |
| dd{margin:0;text-align:right;color:var(--ink);font-weight:500} | |
| .actions{ | |
| margin-top:.9rem; | |
| display:flex; | |
| gap:.5rem; | |
| flex-wrap:wrap; | |
| } | |
| .actions a{ | |
| text-decoration:none; | |
| border-radius:999px; | |
| border:1px solid rgba(148,163,184,.22); | |
| padding:.45rem .8rem; | |
| color:var(--graphite); | |
| font-size:.85rem; | |
| } | |
| .value-list,.roadmap-grid,.recommendation-grid{ | |
| display:grid; | |
| gap:1rem; | |
| grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); | |
| } | |
| .value-card,.roadmap-card,.recommendation-item{ | |
| background:rgba(255,255,255,.74); | |
| border:1px solid rgba(148,163,184,.18); | |
| border-radius:1.25rem; | |
| padding:1.1rem; | |
| } | |
| .value-card h3,.roadmap-card h3,.recommendation-item h3{margin:0 0 .35rem} | |
| .value-card p,.roadmap-card p,.recommendation-item p{margin:0;color:var(--secondary)} | |
| .small{font-size:.8rem;color:var(--secondary);} | |
| .panel-note{margin:.55rem 0 0;color:var(--secondary);font-size:.9rem} | |
| .site-footer{padding:1.4rem 0 1.8rem;color:var(--secondary);border-top:1px solid rgba(148,163,184,.18)} | |
| .site-footer p{margin:0;font-size:.85rem} | |
| @media (max-width:900px){ | |
| .hero{grid-template-columns:1fr;gap:1.25rem} | |
| .hero-main h1{font-size:2.35rem} | |
| .main-nav{ | |
| flex-wrap:wrap; | |
| max-width:62%; | |
| justify-content:flex-end; | |
| gap:.45rem; | |
| } | |
| } | |
| @media (max-width:640px){ | |
| .shell{width:min(1180px,calc(100% - 1.25rem))} | |
| .hero{padding:2.2rem 0 1rem} | |
| .hero-main h1{font-size:2rem} | |
| .main-nav{max-width:100%;font-size:.82rem} | |
| .brand span{display:block} | |
| } | |