| |
| |
| |
| |
|
|
| :root { |
| color-scheme: light; |
|
|
| --paper: #f5f8f5; |
| --paper-raised: #ffffff; |
| --ink: #10251c; |
| --ink-soft: #60736a; |
| --ink-muted: #91a098; |
|
|
| --forest: #027e65; |
| --forest-dark: #07513e; |
| --forest-light: #1ec677; |
| --forest-pale: #e6f6ed; |
|
|
| --mint: #c9f4dd; |
| --gold: #c08a32; |
| --rust: #b44936; |
|
|
| --line: #e1e9e3; |
| --line-strong: #c8d5cc; |
|
|
| --font-display: "Fraunces", Georgia, serif; |
| --font-body: "DM Sans", -apple-system, sans-serif; |
| --font-mono: "IBM Plex Mono", ui-monospace, monospace; |
|
|
| --radius: 12px; |
| --radius-lg: 20px; |
| --shadow: 0 18px 50px rgba(10, 60, 42, 0.06); |
| } |
|
|
| |
| |
| |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| color-scheme: light; |
| } |
|
|
| body { |
| margin: 0; |
| background: var(--paper); |
| color: var(--ink); |
| font-family: var(--font-body); |
| font-size: 15px; |
| line-height: 1.6; |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| button, |
| input, |
| select { |
| font: inherit; |
| } |
|
|
| button, |
| select { |
| cursor: pointer; |
| } |
|
|
| button:disabled { |
| cursor: progress; |
| } |
|
|
| button:focus-visible, |
| input:focus-visible, |
| select:focus-visible, |
| a:focus-visible { |
| outline: 3px solid rgba(30, 198, 119, 0.35); |
| outline-offset: 3px; |
| } |
|
|
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
|
|
| [hidden] { |
| display: none !important; |
| } |
|
|
| |
| |
| |
|
|
| .page-shell { |
| width: min(1180px, calc(100% - 48px)); |
| margin: 0 auto; |
| } |
|
|
| |
| |
| |
|
|
| .site-header { |
| min-height: 90px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 24px; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .brand { |
| display: inline-flex; |
| align-items: center; |
| gap: 11px; |
| } |
|
|
| .brand-mark { |
| width: 42px; |
| height: 42px; |
| border-radius: 11px; |
| overflow: hidden; |
| background: var(--forest); |
| display: grid; |
| place-items: center; |
| flex-shrink: 0; |
| } |
|
|
| .brand-mark img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| } |
|
|
| .brand-name { |
| font-family: var(--font-display); |
| font-size: 29px; |
| font-weight: 600; |
| letter-spacing: -1.4px; |
| color: var(--forest-dark); |
| } |
|
|
| .brand-name span { |
| color: var(--forest-light); |
| } |
|
|
| .header-center { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| color: var(--ink-soft); |
| font-size: 12px; |
| font-family: var(--font-mono); |
| } |
|
|
| .header-right { |
| display: flex; |
| align-items: center; |
| } |
|
|
| .prototype-badge { |
| background: var(--forest-pale); |
| border: 1px solid #ccebd9; |
| color: var(--forest); |
| padding: 6px 11px; |
| border-radius: 100px; |
| font-size: 11px; |
| font-weight: 600; |
| letter-spacing: 0.1px; |
| } |
|
|
| .status-dot { |
| width: 7px; |
| height: 7px; |
| display: inline-block; |
| border-radius: 50%; |
| background: var(--forest-light); |
| box-shadow: 0 0 0 3px rgba(30, 198, 119, 0.13); |
| } |
|
|
| |
| |
| |
|
|
| .hero { |
| min-height: 420px; |
| display: grid; |
| grid-template-columns: 1.05fr 0.95fr; |
| gap: 50px; |
| align-items: center; |
| padding: 72px 0 56px; |
| } |
|
|
| .eyebrow { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| color: var(--forest); |
| font-family: var(--font-mono); |
| font-size: 10px; |
| font-weight: 600; |
| letter-spacing: 1.4px; |
| margin-bottom: 20px; |
| } |
|
|
| .eyebrow-line { |
| width: 25px; |
| height: 2px; |
| background: var(--forest-light); |
| } |
|
|
| .hero h1 { |
| margin: 0; |
| font-family: var(--font-display); |
| font-size: clamp(42px, 5vw, 66px); |
| font-weight: 500; |
| line-height: 1.08; |
| letter-spacing: -2.7px; |
| color: var(--forest-dark); |
| } |
|
|
| .hero h1 em { |
| font-style: italic; |
| color: var(--forest); |
| } |
|
|
| .hero-description { |
| max-width: 410px; |
| margin: 23px 0 25px; |
| color: var(--ink-soft); |
| font-size: 15px; |
| line-height: 1.8; |
| } |
|
|
| .hero-tags { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .hero-tags span, |
| .tech-stack span { |
| background: var(--paper-raised); |
| border: 1px solid var(--line); |
| border-radius: 100px; |
| padding: 6px 11px; |
| color: var(--ink-soft); |
| font-family: var(--font-mono); |
| font-size: 10px; |
| } |
|
|
| |
| |
| |
|
|
| .hero-visual { |
| position: relative; |
| min-height: 340px; |
| display: grid; |
| place-items: center; |
| overflow: hidden; |
| border-radius: 26px; |
| background: |
| radial-gradient( |
| circle at 50% 50%, |
| rgba(30, 198, 119, 0.13), |
| transparent 65% |
| ); |
| } |
|
|
| .orb { |
| position: absolute; |
| border: 1px solid rgba(2, 126, 101, 0.12); |
| border-radius: 50%; |
| pointer-events: none; |
| } |
|
|
| .orb-one { |
| width: 320px; |
| height: 320px; |
| } |
|
|
| .orb-two { |
| width: 240px; |
| height: 240px; |
| } |
|
|
| .jar-illustration { |
| position: relative; |
| z-index: 2; |
| width: 185px; |
| height: 245px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
|
|
| .jar-lid { |
| width: 138px; |
| height: 20px; |
| border-radius: 8px 8px 3px 3px; |
| background: var(--forest-dark); |
| border: 5px solid #b8e6cd; |
| position: relative; |
| z-index: 2; |
| box-shadow: 0 4px 0 rgba(7, 81, 62, 0.1); |
| } |
|
|
| .jar-body { |
| width: 185px; |
| height: 220px; |
| margin-top: -2px; |
| border-radius: 32px 32px 42px 42px; |
| border: 6px solid var(--forest); |
| background: linear-gradient(145deg, #d9f8e6, #a8e9c5); |
| position: relative; |
| overflow: hidden; |
| box-shadow: |
| inset 8px 0 0 rgba(255, 255, 255, 0.32), |
| 0 20px 35px rgba(2, 126, 101, 0.12); |
| } |
|
|
| .jar-shine { |
| position: absolute; |
| left: 17px; |
| top: 22px; |
| width: 14px; |
| height: 115px; |
| border-radius: 20px; |
| background: rgba(255, 255, 255, 0.6); |
| transform: rotate(7deg); |
| } |
|
|
| .jar-label { |
| position: absolute; |
| left: 26px; |
| right: 26px; |
| top: 56px; |
| padding: 15px 5px; |
| border-radius: 9px; |
| text-align: center; |
| color: var(--forest-dark); |
| background: rgba(255, 255, 255, 0.6); |
| border: 1px solid rgba(2, 126, 101, 0.14); |
| } |
|
|
| .jar-label-small { |
| display: block; |
| font-family: var(--font-mono); |
| font-size: 8px; |
| letter-spacing: 1px; |
| } |
|
|
| .jar-label strong { |
| display: block; |
| font-family: var(--font-display); |
| font-size: 20px; |
| font-weight: 600; |
| letter-spacing: -0.6px; |
| margin: 2px 0; |
| } |
|
|
| .jar-coins { |
| position: absolute; |
| bottom: 12px; |
| left: 0; |
| right: 0; |
| display: flex; |
| justify-content: center; |
| gap: 5px; |
| } |
|
|
| .jar-coins span { |
| width: 30px; |
| height: 30px; |
| border-radius: 50%; |
| display: grid; |
| place-items: center; |
| font-family: var(--font-mono); |
| font-weight: 600; |
| font-size: 14px; |
| color: #91651e; |
| background: #f4d48a; |
| border: 2px solid #c79a40; |
| box-shadow: 0 2px 0 rgba(145, 101, 30, 0.12); |
| } |
|
|
| .floating-note { |
| position: absolute; |
| z-index: 3; |
| display: flex; |
| align-items: center; |
| gap: 9px; |
| padding: 12px 14px; |
| background: rgba(255, 255, 255, 0.92); |
| border: 1px solid var(--line); |
| border-radius: 12px; |
| box-shadow: 0 12px 35px rgba(10, 60, 42, 0.07); |
| } |
|
|
| .floating-note strong { |
| display: block; |
| font-size: 11px; |
| color: var(--forest-dark); |
| } |
|
|
| .floating-note small { |
| display: block; |
| font-size: 10px; |
| color: var(--ink-soft); |
| margin-top: 2px; |
| } |
|
|
| .floating-icon { |
| width: 30px; |
| height: 30px; |
| display: grid; |
| place-items: center; |
| border-radius: 9px; |
| background: var(--forest-pale); |
| color: var(--forest); |
| font-family: var(--font-mono); |
| font-size: 14px; |
| } |
|
|
| .floating-note-top { |
| top: 32px; |
| right: 8px; |
| } |
|
|
| .floating-note-bottom { |
| bottom: 24px; |
| left: 4px; |
| } |
|
|
| |
| |
| |
|
|
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 13px; |
| margin-bottom: 85px; |
| } |
|
|
| .stat-card { |
| background: var(--paper-raised); |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| padding: 20px 21px; |
| min-width: 0; |
| } |
|
|
| .stat-label { |
| display: block; |
| font-family: var(--font-mono); |
| font-size: 10px; |
| letter-spacing: 1px; |
| color: var(--ink-muted); |
| margin-bottom: 10px; |
| } |
|
|
| .stat-value { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| color: var(--forest-dark); |
| font-family: var(--font-display); |
| font-size: 29px; |
| font-weight: 600; |
| letter-spacing: -1px; |
| line-height: 1.2; |
| } |
|
|
| .status-value { |
| font-family: var(--font-body); |
| font-size: 22px; |
| letter-spacing: -0.5px; |
| } |
|
|
| .stat-description { |
| display: block; |
| color: var(--ink-soft); |
| font-size: 11px; |
| margin-top: 6px; |
| } |
|
|
| |
| |
| |
|
|
| .section-heading { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-end; |
| gap: 25px; |
| margin-bottom: 32px; |
| } |
|
|
| .section-heading .eyebrow { |
| margin-bottom: 13px; |
| } |
|
|
| .section-heading h2 { |
| margin: 0; |
| font-family: var(--font-display); |
| font-size: clamp(32px, 4vw, 45px); |
| font-weight: 500; |
| letter-spacing: -1.5px; |
| line-height: 1.15; |
| color: var(--forest-dark); |
| } |
|
|
| .section-heading p { |
| max-width: 480px; |
| margin: 12px 0 0; |
| color: var(--ink-soft); |
| font-size: 13px; |
| line-height: 1.7; |
| } |
|
|
| .section-number { |
| font-family: var(--font-mono); |
| color: var(--ink-muted); |
| font-size: 11px; |
| white-space: nowrap; |
| padding-bottom: 5px; |
| } |
|
|
| |
| |
| |
|
|
| .workspace { |
| padding-bottom: 85px; |
| scroll-margin-top: 30px; |
| } |
|
|
| .workspace-grid { |
| display: grid; |
| grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); |
| gap: 35px; |
| align-items: start; |
| } |
|
|
| .form-panel { |
| min-width: 0; |
| background: var(--paper-raised); |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| padding: 30px; |
| } |
|
|
| .cluster { |
| border: 0; |
| border-bottom: 1px solid var(--line); |
| padding: 0 0 23px; |
| margin: 0 0 25px; |
| min-width: 0; |
| } |
|
|
| .cluster:last-of-type { |
| border-bottom: 0; |
| margin-bottom: 0; |
| padding-bottom: 5px; |
| } |
|
|
| .cluster legend { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| width: 100%; |
| padding: 0 0 19px; |
| color: var(--forest-dark); |
| font-family: var(--font-display); |
| font-size: 17px; |
| font-weight: 500; |
| } |
|
|
| .legend-number { |
| display: inline-grid; |
| place-items: center; |
| width: 25px; |
| height: 25px; |
| border-radius: 8px; |
| background: var(--forest-pale); |
| color: var(--forest); |
| font-family: var(--font-mono); |
| font-size: 10px; |
| } |
|
|
| .field { |
| display: flex; |
| flex-direction: column; |
| gap: 7px; |
| margin-bottom: 17px; |
| min-width: 0; |
| } |
|
|
| .field:last-child { |
| margin-bottom: 0; |
| } |
|
|
| .field-row { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 14px; |
| } |
|
|
| label { |
| color: var(--ink-soft); |
| font-size: 11px; |
| font-weight: 600; |
| } |
|
|
| input, |
| select { |
| width: 100%; |
| min-width: 0; |
| height: 44px; |
| padding: 10px 12px; |
| border: 1px solid var(--line-strong); |
| border-radius: 9px; |
| background: #fbfdfb; |
| color: var(--ink); |
| font-family: var(--font-body); |
| font-size: 13px; |
| transition: |
| border-color 0.15s ease, |
| box-shadow 0.15s ease, |
| background 0.15s ease; |
| } |
|
|
| input:hover, |
| select:hover { |
| border-color: #9ebbae; |
| } |
|
|
| input:focus, |
| select:focus { |
| outline: none; |
| border-color: var(--forest); |
| box-shadow: 0 0 0 3px rgba(2, 126, 101, 0.09); |
| background: white; |
| } |
|
|
| input::placeholder { |
| color: #a5b2aa; |
| } |
|
|
| input[type="number"] { |
| font-family: var(--font-mono); |
| } |
|
|
| select { |
| appearance: auto; |
| } |
|
|
| .input-wrap { |
| position: relative; |
| } |
|
|
| .input-prefix { |
| position: absolute; |
| left: 13px; |
| top: 50%; |
| transform: translateY(-50%); |
| color: var(--forest); |
| font-family: var(--font-mono); |
| font-size: 14px; |
| font-weight: 600; |
| pointer-events: none; |
| } |
|
|
| .input-wrap input { |
| padding-left: 34px; |
| } |
|
|
| |
| |
| |
|
|
| .submit-btn { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 15px; |
| width: 100%; |
| min-height: 52px; |
| padding: 13px 17px 13px 20px; |
| margin-top: 25px; |
| border: 0; |
| border-radius: 10px; |
| background: var(--forest); |
| color: white; |
| font-size: 13px; |
| font-weight: 600; |
| transition: |
| background 0.15s ease, |
| transform 0.15s ease, |
| box-shadow 0.15s ease; |
| } |
|
|
| .submit-btn:hover { |
| background: var(--forest-dark); |
| box-shadow: 0 8px 22px rgba(2, 126, 101, 0.15); |
| } |
|
|
| .submit-btn:active { |
| transform: translateY(1px); |
| } |
|
|
| .submit-btn:disabled { |
| opacity: 0.7; |
| } |
|
|
| .btn-arrow { |
| width: 28px; |
| height: 28px; |
| display: grid; |
| place-items: center; |
| border-radius: 7px; |
| background: rgba(255, 255, 255, 0.14); |
| font-size: 16px; |
| } |
|
|
| .reset-btn { |
| width: 100%; |
| border: 0; |
| background: transparent; |
| color: var(--ink-soft); |
| font-size: 11px; |
| padding: 12px 0 0; |
| text-decoration: underline; |
| text-underline-offset: 3px; |
| } |
|
|
| .reset-btn:hover { |
| color: var(--forest); |
| } |
|
|
| .form-note { |
| min-height: 18px; |
| margin: 12px 0 0; |
| color: var(--rust); |
| font-size: 11px; |
| line-height: 1.5; |
| } |
|
|
| .form-note.success { |
| color: var(--forest); |
| } |
|
|
| |
| |
| |
|
|
| .receipt-wrap { |
| min-width: 0; |
| position: sticky; |
| top: 25px; |
| } |
|
|
| .receipt { |
| position: relative; |
| background: var(--paper-raised); |
| border: 1px solid var(--line); |
| border-radius: var(--radius-lg); |
| padding: 25px 26px 27px; |
| box-shadow: var(--shadow); |
| overflow: hidden; |
| } |
|
|
| .receipt::after { |
| content: ""; |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: -1px; |
| height: 4px; |
| background: repeating-linear-gradient( |
| 135deg, |
| var(--forest-light) 0, |
| var(--forest-light) 5px, |
| transparent 5px, |
| transparent 10px |
| ); |
| } |
|
|
| .receipt-topline { |
| display: flex; |
| justify-content: space-between; |
| gap: 10px; |
| color: var(--ink-muted); |
| font-family: var(--font-mono); |
| font-size: 9px; |
| letter-spacing: 0.8px; |
| } |
|
|
| .receipt-empty { |
| text-align: center; |
| padding: 48px 18px 45px; |
| } |
|
|
| .empty-illustration { |
| width: 76px; |
| height: 76px; |
| margin: 0 auto 23px; |
| border-radius: 50%; |
| display: grid; |
| place-items: center; |
| background: var(--forest-pale); |
| border: 1px dashed #a9d9bf; |
| } |
|
|
| .empty-coin { |
| width: 46px; |
| height: 46px; |
| display: grid; |
| place-items: center; |
| border-radius: 50%; |
| border: 2px solid var(--forest); |
| color: var(--forest); |
| font-family: var(--font-mono); |
| font-size: 21px; |
| } |
|
|
| .empty-label { |
| display: block; |
| color: var(--forest); |
| font-family: var(--font-mono); |
| font-size: 9px; |
| font-weight: 600; |
| letter-spacing: 1.2px; |
| } |
|
|
| .receipt-empty h3 { |
| margin: 12px 0 9px; |
| font-family: var(--font-display); |
| font-size: 23px; |
| font-weight: 500; |
| letter-spacing: -0.7px; |
| color: var(--forest-dark); |
| } |
|
|
| .receipt-empty p { |
| max-width: 235px; |
| margin: 0 auto; |
| color: var(--ink-soft); |
| font-size: 12px; |
| line-height: 1.8; |
| } |
|
|
| .empty-dashes { |
| margin-top: 30px; |
| color: #b3c8bc; |
| font-family: var(--font-mono); |
| letter-spacing: 3px; |
| font-size: 11px; |
| } |
|
|
| .receipt-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 10px; |
| margin-top: 28px; |
| } |
|
|
| .receipt-kicker { |
| color: var(--forest); |
| font-family: var(--font-mono); |
| font-size: 9px; |
| letter-spacing: 1px; |
| } |
|
|
| .receipt-header h3 { |
| margin: 5px 0 0; |
| color: var(--forest-dark); |
| font-family: var(--font-display); |
| font-size: 25px; |
| font-weight: 500; |
| letter-spacing: -0.8px; |
| } |
|
|
| .receipt-check { |
| width: 34px; |
| height: 34px; |
| display: grid; |
| place-items: center; |
| border-radius: 50%; |
| background: var(--forest-pale); |
| color: var(--forest); |
| font-weight: 700; |
| } |
|
|
| .receipt-divider { |
| height: 1px; |
| border-top: 1px solid var(--line); |
| margin: 22px 0; |
| } |
|
|
| .receipt-divider.dashed { |
| border-top-style: dashed; |
| border-color: var(--line-strong); |
| } |
|
|
| .receipt-line { |
| display: flex; |
| justify-content: space-between; |
| align-items: baseline; |
| gap: 15px; |
| margin: 13px 0; |
| color: var(--ink-soft); |
| font-family: var(--font-mono); |
| font-size: 11px; |
| } |
|
|
| .receipt-line strong { |
| color: var(--ink); |
| font-weight: 500; |
| text-align: right; |
| } |
|
|
| .savings-block { |
| text-align: center; |
| padding: 6px 0; |
| } |
|
|
| .receipt-savings-label { |
| display: block; |
| color: var(--ink-muted); |
| font-family: var(--font-mono); |
| font-size: 9px; |
| letter-spacing: 1.2px; |
| } |
|
|
| .receipt-savings-amount { |
| display: block; |
| margin: 9px 0 7px; |
| color: var(--forest); |
| font-family: var(--font-display); |
| font-size: clamp(34px, 4vw, 48px); |
| font-weight: 600; |
| line-height: 1.1; |
| letter-spacing: -1.5px; |
| overflow-wrap: anywhere; |
| } |
|
|
| .savings-caption { |
| color: var(--ink-soft); |
| font-size: 11px; |
| } |
|
|
| .total-line { |
| padding: 14px 12px; |
| background: var(--forest-pale); |
| border-radius: 9px; |
| color: var(--forest-dark); |
| } |
|
|
| .total-line strong { |
| color: var(--forest); |
| font-weight: 600; |
| } |
|
|
| .receipt-message { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 9px; |
| text-align: left; |
| margin-top: 23px; |
| } |
|
|
| .message-icon { |
| color: var(--forest-light); |
| font-size: 18px; |
| } |
|
|
| .receipt-message p { |
| margin: 0; |
| color: var(--ink-soft); |
| font-family: var(--font-display); |
| font-style: italic; |
| font-size: 13px; |
| line-height: 1.5; |
| } |
|
|
| .receipt-meta { |
| display: flex; |
| justify-content: space-between; |
| gap: 10px; |
| margin-top: 26px; |
| padding-top: 15px; |
| border-top: 1px solid var(--line); |
| color: var(--ink-muted); |
| font-family: var(--font-mono); |
| font-size: 9px; |
| } |
|
|
| .receipt-disclaimer { |
| display: flex; |
| gap: 8px; |
| margin-top: 15px; |
| padding: 0 3px; |
| color: var(--ink-muted); |
| font-size: 10px; |
| line-height: 1.6; |
| } |
|
|
| .receipt-disclaimer p { |
| margin: 0; |
| } |
|
|
| .receipt-disclaimer span { |
| color: var(--forest); |
| } |
|
|
| |
| |
| |
|
|
| @keyframes print-out { |
| from { |
| opacity: 0; |
| transform: translateY(7px); |
| } |
|
|
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .receipt.printing #receipt-body { |
| animation: print-out 0.4s ease-out; |
| } |
|
|
| |
| |
| |
|
|
| .pipeline-section { |
| padding-bottom: 75px; |
| } |
|
|
| .pipeline-grid { |
| display: grid; |
| grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr; |
| gap: 9px; |
| align-items: stretch; |
| } |
|
|
| .pipeline-step { |
| position: relative; |
| min-width: 0; |
| padding: 22px 17px; |
| border: 1px solid var(--line); |
| background: var(--paper-raised); |
| border-radius: 12px; |
| } |
|
|
| .pipeline-number { |
| display: block; |
| margin-bottom: 18px; |
| color: var(--ink-muted); |
| font-family: var(--font-mono); |
| font-size: 10px; |
| } |
|
|
| .pipeline-icon { |
| width: 39px; |
| height: 39px; |
| display: grid; |
| place-items: center; |
| margin-bottom: 17px; |
| border-radius: 10px; |
| background: var(--forest-pale); |
| color: var(--forest); |
| font-size: 20px; |
| font-family: var(--font-mono); |
| } |
|
|
| .pipeline-step h3 { |
| margin: 0 0 7px; |
| color: var(--forest-dark); |
| font-family: var(--font-display); |
| font-size: 16px; |
| font-weight: 500; |
| letter-spacing: -0.3px; |
| line-height: 1.3; |
| } |
|
|
| .pipeline-step p { |
| margin: 0; |
| color: var(--ink-soft); |
| font-size: 11px; |
| line-height: 1.7; |
| } |
|
|
| .pipeline-connector { |
| display: grid; |
| place-items: center; |
| color: var(--forest-light); |
| font-size: 17px; |
| } |
|
|
| .pipeline-footer { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 20px; |
| padding-top: 23px; |
| } |
|
|
| .tech-stack { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 7px; |
| } |
|
|
| .pipeline-status { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| color: var(--ink-soft); |
| font-family: var(--font-mono); |
| font-size: 10px; |
| } |
|
|
| |
| |
| |
|
|
| .site-footer { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 18px; |
| padding: 28px 0 40px; |
| border-top: 1px solid var(--line); |
| color: var(--ink-muted); |
| font-size: 11px; |
| } |
|
|
| .footer-brand, |
| .footer-right { |
| display: flex; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 15px; |
| } |
|
|
| .footer-brand .brand-name { |
| font-size: 22px; |
| } |
|
|
| .footer-right { |
| font-family: var(--font-mono); |
| font-size: 10px; |
| } |
|
|
| |
| |
| |
|
|
| @media (max-width: 1050px) { |
| .pipeline-grid { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
|
|
| .pipeline-connector { |
| display: none; |
| } |
| } |
|
|
| @media (max-width: 850px) { |
| .page-shell { |
| width: min(100% - 32px, 700px); |
| } |
|
|
| .header-center { |
| display: none; |
| } |
|
|
| .hero { |
| grid-template-columns: 1fr; |
| gap: 25px; |
| padding: 52px 0 35px; |
| } |
|
|
| .hero-visual { |
| min-height: 300px; |
| } |
|
|
| .hero-copy { |
| max-width: 550px; |
| } |
|
|
| .stats-grid { |
| margin-bottom: 60px; |
| } |
|
|
| .workspace-grid { |
| grid-template-columns: 1fr; |
| gap: 28px; |
| } |
|
|
| .receipt-wrap { |
| position: static; |
| } |
|
|
| .receipt-empty { |
| padding: 35px 18px; |
| } |
|
|
| .receipt-savings-amount { |
| font-size: 44px; |
| } |
| } |
|
|
| @media (max-width: 600px) { |
| .page-shell { |
| width: calc(100% - 28px); |
| } |
|
|
| .site-header { |
| min-height: 75px; |
| } |
|
|
| .brand-mark { |
| width: 35px; |
| height: 35px; |
| border-radius: 9px; |
| } |
|
|
| .brand-name { |
| font-size: 25px; |
| } |
|
|
| .prototype-badge { |
| font-size: 9px; |
| padding: 5px 8px; |
| } |
|
|
| .hero { |
| padding-top: 38px; |
| } |
|
|
| .hero h1 { |
| font-size: 43px; |
| letter-spacing: -1.8px; |
| } |
|
|
| .hero-description { |
| font-size: 13px; |
| } |
|
|
| .hero-visual { |
| min-height: 275px; |
| } |
|
|
| .jar-illustration { |
| transform: scale(0.86); |
| } |
|
|
| .floating-note { |
| padding: 9px 10px; |
| } |
|
|
| .floating-note strong { |
| font-size: 10px; |
| } |
|
|
| .floating-note small { |
| font-size: 9px; |
| } |
|
|
| .floating-note-top { |
| top: 12px; |
| right: 0; |
| } |
|
|
| .floating-note-bottom { |
| bottom: 10px; |
| left: 0; |
| } |
|
|
| .stats-grid { |
| grid-template-columns: repeat(2, 1fr); |
| gap: 9px; |
| margin-bottom: 55px; |
| } |
|
|
| .stat-card { |
| padding: 16px; |
| } |
|
|
| .stat-value { |
| font-size: 26px; |
| } |
|
|
| .section-heading { |
| align-items: flex-start; |
| flex-direction: column; |
| gap: 10px; |
| margin-bottom: 25px; |
| } |
|
|
| .section-heading h2 { |
| font-size: 34px; |
| } |
|
|
| .section-number { |
| display: none; |
| } |
|
|
| .form-panel { |
| padding: 21px 17px; |
| } |
|
|
| .field-row { |
| grid-template-columns: 1fr; |
| gap: 0; |
| } |
|
|
| .cluster { |
| padding-bottom: 20px; |
| margin-bottom: 22px; |
| } |
|
|
| .receipt { |
| padding: 21px 19px 24px; |
| } |
|
|
| .pipeline-grid { |
| grid-template-columns: 1fr; |
| gap: 9px; |
| } |
|
|
| .pipeline-step { |
| display: grid; |
| grid-template-columns: 40px 1fr; |
| column-gap: 13px; |
| padding: 17px; |
| } |
|
|
| .pipeline-number { |
| grid-column: 1; |
| grid-row: 1 / span 2; |
| margin: 0; |
| padding-top: 2px; |
| } |
|
|
| .pipeline-icon { |
| grid-column: 2; |
| grid-row: 1; |
| margin-bottom: 10px; |
| } |
|
|
| .pipeline-step h3 { |
| grid-column: 2; |
| grid-row: 2; |
| margin-bottom: 5px; |
| } |
|
|
| .pipeline-step p { |
| grid-column: 2; |
| grid-row: 3; |
| } |
|
|
| .site-footer { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| animation-duration: 0.001ms !important; |
| transition-duration: 0.001ms !important; |
| scroll-behavior: auto !important; |
| } |
| } |
