/* =================================================================== * Grantforge — Style * Brand: editorial / text-forward; pine green primary, amber accent * Fonts: IBM Plex Serif (display), IBM Plex Sans (body), IBM Plex Mono (mono) * Radius: 2px | Space unit: 4px * Stance: editorial * =================================================================== */ /* --- Google Fonts (loaded via in HTML for faster initial paint) --- */ /* We declare the font stack here with fallbacks; font loading is handled by the HTML link tags. */ /* --- CSS Variables (light — default) --- */ :root { --color-primary: #1a5e4a; --color-accent: #c4820e; --color-on-surface: #1a1c1a; --color-on-surface-muted: #5c5e5b; --color-surface: #faf8f5; --color-surface-elevated: #ffffff; --color-border: #d6d4d0; --color-error: #b33a33; --color-success: #2a7a5a; --color-visited: #4a7a6a; --font-display: "IBM Plex Serif", Georgia, serif; --font-body: "IBM Plex Sans", Arial, sans-serif; --font-mono: "IBM Plex Mono", "Courier New", monospace; --radius: 2px; --space: 4px; --max-width: 960px; --content-width: 42em; --color-rule: 214, 212, 208; --color-surface-alpha: 250, 248, 245; } /* --- Dark theme --- */ [data-theme="dark"] { --color-primary: #3a9a7a; --color-accent: #e09515; --color-on-surface: #e0ddd5; --color-on-surface-muted: #9a9b96; --color-surface: #1a1c1a; --color-surface-elevated: #242624; --color-border: #3a3c38; --color-error: #d45a52; --color-success: #4aaa82; --color-visited: #6a9a8a; --color-rule: 58, 60, 56; --color-surface-alpha: 26, 28, 26; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--color-on-surface); background: var(--color-surface); line-height: 1.5; transition: background 200ms ease, color 200ms ease; } ::selection { background: var(--color-primary); color: var(--color-surface); } /* --- Layout container --- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 calc(var(--space) * 4); } /* --- Content columns (constrained prose) --- */ .content-col { max-width: var(--content-width); margin-left: 0; } /* --- Typography --- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-primary); font-weight: 600; line-height: 1.25; } h1 { font-size: 1.75rem; margin-bottom: calc(var(--space) * 3); } h2 { font-size: 1.25rem; margin-bottom: calc(var(--space) * 2); } h3 { font-size: 1.0625rem; margin-bottom: calc(var(--space) * 2); } p { margin-bottom: calc(var(--space) * 2); } a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } a:visited { color: var(--color-visited); } a:hover { text-decoration: none; } /* --- Eyebrow --- */ .eyebrow { display: block; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: calc(var(--space) * 2); font-weight: 400; } /* --- Section (numbered, with rule) --- */ .section { margin-top: calc(var(--space) * 12); margin-bottom: calc(var(--space) * 8); } .section-header { display: flex; align-items: baseline; gap: calc(var(--space) * 2); margin-bottom: calc(var(--space) * 4); position: relative; } .section-header::after { content: ""; flex: 1; height: 1px; background: var(--color-border); } .section-header h1, .section-header h2 { margin-bottom: 0; white-space: nowrap; } .section-body { max-width: var(--content-width); } /* --- Navigation --- */ .site-nav { display: flex; align-items: center; gap: calc(var(--space) * 6); padding: calc(var(--space) * 4) 0; border-bottom: 1px solid var(--color-border); margin-bottom: calc(var(--space) * 6); } .site-nav .logo-area { display: flex; align-items: center; gap: calc(var(--space) * 2); text-decoration: none; margin-right: auto; } .site-nav .mark { width: 24px; height: 24px; background: var(--color-primary); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); flex-shrink: 0; transition: background 200ms ease; } .site-nav .brand-text { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-primary); line-height: 1.2; } .site-nav .nav-links { display: flex; align-items: center; gap: calc(var(--space) * 4); list-style: none; } .site-nav .nav-links a { font-size: 0.8125rem; text-decoration: none; color: var(--color-on-surface-muted); padding: calc(var(--space) * 1) calc(var(--space) * 2); border-radius: var(--radius); transition: color 150ms ease, background 150ms ease; } .site-nav .nav-links a:hover { color: var(--color-on-surface); background: color-mix(in srgb, var(--color-on-surface) 6%, transparent); } .site-nav .nav-links a.active { color: var(--color-primary); font-weight: 600; } /* --- Theme toggle --- */ .theme-toggle { background: none; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; padding: calc(var(--space) * 1) calc(var(--space) * 2); display: flex; align-items: center; justify-content: center; color: var(--color-on-surface-muted); transition: color 150ms ease, border-color 150ms ease; width: 36px; height: 36px; } .theme-toggle:hover { color: var(--color-on-surface); border-color: var(--color-on-surface-muted); } .theme-toggle svg { width: 16px; height: 16px; fill: currentColor; } /* --- Hero (split layout) --- */ .hero { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space) * 8); padding: calc(var(--space) * 8) 0 calc(var(--space) * 6); } .hero-text { max-width: 36em; } .hero-text .hero-headline { font-size: 1.75rem; color: var(--color-on-surface); font-family: var(--font-display); font-weight: 600; margin-bottom: calc(var(--space) * 3); line-height: 1.25; } .hero-text .hero-headline .accent-word { color: var(--color-accent); } .hero-text p { font-size: 1rem; line-height: 1.6; color: var(--color-on-surface-muted); } .hero-actions { display: flex; gap: calc(var(--space) * 3); margin-top: calc(var(--space) * 4); flex-wrap: wrap; } /* --- Hero visual / figure area --- */ .hero-visual { display: flex; align-items: flex-start; justify-content: center; } .hero-screenshot { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius); } /* --- Drawn figure (the product pipeline) --- */ .product-figure { width: 100%; max-width: 420px; height: auto; } .product-figure .fig-bg { fill: var(--color-surface-elevated); stroke: var(--color-border); stroke-width: 1; rx: var(--radius); } .product-figure .fig-arrow { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; } .product-figure .fig-arrow-head { fill: var(--color-accent); } .product-figure .fig-box { fill: var(--color-surface-elevated); stroke: var(--color-border); stroke-width: 1; rx: var(--radius); } .product-figure .fig-box-primary { fill: var(--color-primary); rx: var(--radius); } .product-figure .fig-box-accent { fill: var(--color-accent); rx: var(--radius); } .product-figure .fig-label { font-family: var(--font-mono); font-size: 9px; fill: var(--color-on-surface-muted); text-anchor: middle; } .product-figure .fig-label-light { fill: var(--color-surface); font-family: var(--font-mono); font-size: 8px; text-anchor: middle; font-weight: 600; } /* Hero 4-panel mark (shown on non-index pages) */ .hero-mark { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space) * 2); width: 100%; max-width: 360px; } .hero-mark .panel { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-elevated); padding: calc(var(--space) * 3); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-on-surface-muted); min-height: 72px; } .hero-mark .panel .label { font-family: var(--font-body); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-on-surface-muted); margin-bottom: calc(var(--space) * 1); } .hero-mark .panel .value { font-size: 0.875rem; color: var(--color-primary); font-weight: 600; transition: color 200ms ease; } .hero-mark .panel .value.checked { color: var(--color-success); } /* --- Buttons --- */ .btn-row { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 2); } .btn { display: inline-flex; align-items: center; padding: calc(var(--space) * 3) calc(var(--space) * 6); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; border: none; border-radius: var(--radius); cursor: pointer; text-decoration: none; transition: opacity 150ms ease, background 150ms ease, color 150ms ease; line-height: 1; } .btn:hover { opacity: 0.9; } .btn:active { opacity: 0.8; } .btn-primary { background: var(--color-primary); color: var(--color-surface-elevated); } .btn-secondary { background: var(--color-surface-elevated); color: var(--color-primary); border: 1px solid var(--color-primary); } .btn-secondary:disabled { opacity: 0.4; cursor: default; } /* --- List (features, checks) --- */ .check-list { list-style: none; padding: 0; } .check-list li { padding: calc(var(--space) * 1) 0; padding-left: calc(var(--space) * 5); position: relative; font-size: 0.9375rem; color: var(--color-on-surface); line-height: 1.5; } .check-list li::before { content: ""; position: absolute; left: 0; top: calc(var(--space) * 2); width: 14px; height: 11px; border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(-45deg) scale(0.85); transform-origin: center; } /* --- Limits list --- */ .limits-list { list-style: none; padding: 0; } .limits-list li { padding: calc(var(--space) * 1) 0; padding-left: calc(var(--space) * 4); position: relative; font-size: 0.9375rem; color: var(--color-on-surface-muted); line-height: 1.5; } .limits-list li::before { content: "\u00d7"; position: absolute; left: 0; top: calc(var(--space) * 1); color: var(--color-error); font-weight: 600; font-family: var(--font-mono); font-size: 0.875rem; } /* --- Objection / QA pair --- */ .qa-pair { margin-bottom: calc(var(--space) * 6); } .qa-pair .question { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--color-primary); margin-bottom: calc(var(--space) * 1); } .qa-pair .answer { color: var(--color-on-surface-muted); font-size: 0.9375rem; line-height: 1.6; } /* --- Proof strip --- */ .proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface-elevated); } .proof-cell { padding: calc(var(--space) * 5) calc(var(--space) * 4); text-align: center; border-right: 1px solid var(--color-border); } .proof-cell:last-child { border-right: none; } .proof-cell .number { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; color: var(--color-primary); display: block; line-height: 1.1; margin-bottom: calc(var(--space) * 1); } .proof-cell .caption { font-size: 0.75rem; color: var(--color-on-surface-muted); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.03em; } /* --- Pricing table --- */ .pricing-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .pricing-table th { font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-on-surface-muted); text-align: left; padding: calc(var(--space) * 3) calc(var(--space) * 3); border-bottom: 1px solid var(--color-border); } .pricing-table td { padding: calc(var(--space) * 3) calc(var(--space) * 3); border-bottom: 1px solid var(--color-border); color: var(--color-on-surface); vertical-align: top; } .pricing-table tr:last-child td { border-bottom: none; } .pricing-table .price { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--color-primary); white-space: nowrap; } .pricing-table .feature-yes { font-family: var(--font-mono); color: var(--color-success); font-weight: 600; } .pricing-table .feature-no { font-family: var(--font-mono); color: var(--color-on-surface-muted); font-weight: 400; opacity: 0.5; } .pricing-cta { margin-top: calc(var(--space) * 6); text-align: center; } /* --- Mock checkout --- */ .mock-checkout { margin-top: calc(var(--space) * 6); border: 1px solid var(--color-border); border-radius: var(--radius); padding: calc(var(--space) * 6); background: var(--color-surface-elevated); max-width: 400px; } .mock-checkout .demo-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius); padding: calc(var(--space) * 1) calc(var(--space) * 2); margin-bottom: calc(var(--space) * 3); } .mock-checkout h3 { margin-bottom: calc(var(--space) * 3); } .mock-checkout .form-group { margin-bottom: calc(var(--space) * 3); } .mock-checkout .form-group label { display: block; font-size: 0.8125rem; color: var(--color-on-surface-muted); margin-bottom: calc(var(--space) * 1); } .mock-checkout .form-group input { width: 100%; padding: calc(var(--space) * 2) calc(var(--space) * 3); font-family: var(--font-mono); font-size: 0.9375rem; color: var(--color-on-surface); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); outline: none; transition: border-color 150ms ease; } .mock-checkout .form-group input:focus { border-color: var(--color-primary); } /* --- Tool page (form + output) --- */ .tool-layout { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space) * 6); margin-bottom: calc(var(--space) * 6); } .form-section { background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); padding: calc(var(--space) * 6); } .form-section h3 { font-family: var(--font-display); font-size: 1rem; color: var(--color-primary); margin-bottom: calc(var(--space) * 3); } .form-group { margin-bottom: calc(var(--space) * 3); } .form-group label { display: block; font-size: 0.8125rem; color: var(--color-on-surface-muted); margin-bottom: calc(var(--space) * 1); font-weight: 400; } .form-group input[type="number"] { width: 100%; padding: calc(var(--space) * 2) calc(var(--space) * 3); font-family: var(--font-mono); font-size: 0.9375rem; color: var(--color-on-surface); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); outline: none; transition: border-color 150ms ease; } .form-group input[type="number"]:focus { border-color: var(--color-primary); } .form-group input[type="number"]::placeholder { color: var(--color-border); } .form-group input[type="text"] { width: 100%; padding: calc(var(--space) * 2) calc(var(--space) * 3); font-family: var(--font-mono); font-size: 0.9375rem; color: var(--color-on-surface); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); outline: none; transition: border-color 150ms ease; } .form-group input[type="text"]:focus { border-color: var(--color-primary); } /* --- Summary bar --- */ .summary-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--space) * 3); padding: calc(var(--space) * 4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-elevated); margin-bottom: calc(var(--space) * 4); } .summary-item { text-align: center; } .summary-item .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-on-surface-muted); } .summary-item .value { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 600; color: var(--color-on-surface); margin-top: calc(var(--space) * 1); } /* --- Report preview --- */ #report-section { display: none; margin-top: calc(var(--space) * 4); } #report-body { background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); padding: calc(var(--space) * 6); max-height: 600px; overflow-y: auto; } #report-body h1 { font-size: 1.25rem; margin-bottom: calc(var(--space) * 2); } #report-body table { width: 100%; border-collapse: collapse; margin-bottom: calc(var(--space) * 4); } #report-body th, #report-body td { font-family: var(--font-mono); font-size: 0.875rem; text-align: right; padding: calc(var(--space) * 1) calc(var(--space) * 2); border-bottom: 1px solid var(--color-border); } #report-body th { font-family: var(--font-body); text-align: left; background: var(--color-primary); color: var(--color-surface-elevated); font-weight: 600; font-size: 0.8125rem; } #report-body td:first-child, #report-body th:first-child { text-align: left; } #report-body tr:nth-child(even) td { background: rgba(var(--color-rule), 0.2); } #report-body .finding { margin: calc(var(--space) * 2) 0; padding: calc(var(--space) * 2); border-left: 3px solid; font-size: 0.875rem; } #report-body .finding--error { border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 8%, transparent); } #report-body .finding--warning { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); } #report-body .finding--info { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); } /* --- Disclaimer box --- */ .disclaimer-box { background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); padding: calc(var(--space) * 4); margin-bottom: calc(var(--space) * 4); font-size: 0.8125rem; color: var(--color-on-surface-muted); line-height: 1.6; } .disclaimer-box strong { color: var(--color-on-surface); } /* --- Motion (allowed per brand: section reveal, check indicator) --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes checkPulse { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes countUp { from { opacity: 1; } } .section-reveal { animation: fadeInUp 200ms ease both; } .check-indicator { animation: checkPulse 200ms ease both; } /* --- Figure flow animation (one-shot on hero figure) --- */ @keyframes flowDash { to { stroke-dashoffset: 0; } } .product-figure .fig-animate-flow { stroke-dasharray: 200; stroke-dashoffset: 200; animation: flowDash 1.2s ease forwards; } .product-figure .fig-animate-flow-2 { stroke-dasharray: 100; stroke-dashoffset: 100; animation: flowDash 0.8s ease 0.4s forwards; } /* --- Footer --- */ .site-footer { margin-top: calc(var(--space) * 10); padding: calc(var(--space) * 6) 0; border-top: 1px solid var(--color-border); } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: calc(var(--space) * 6); margin-bottom: calc(var(--space) * 4); } .footer-col h4 { font-family: var(--font-body); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-on-surface-muted); margin-bottom: calc(var(--space) * 3); } .footer-col p { font-size: 0.8125rem; color: var(--color-on-surface-muted); line-height: 1.5; margin-bottom: 0; } .footer-col ul { list-style: none; padding: 0; } .footer-col ul li { margin-bottom: calc(var(--space) * 1); } .footer-col ul a { font-size: 0.8125rem; color: var(--color-on-surface-muted); text-decoration: none; } .footer-col ul a:hover { color: var(--color-primary); } .footer-bottom { border-top: 1px solid var(--color-border); padding-top: calc(var(--space) * 4); margin-top: calc(var(--space) * 4); display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-on-surface-muted); } /* --- Legal pages (privacy, terms) prose --- */ .legal-page { max-width: var(--content-width); margin: 0 auto; padding: calc(var(--space) * 6) 0; } .legal-page h1 { margin-bottom: calc(var(--space) * 2); } .legal-page .last-updated { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-on-surface-muted); margin-bottom: calc(var(--space) * 6); } .legal-page h2 { margin-top: calc(var(--space) * 6); margin-bottom: calc(var(--space) * 2); } .legal-page h3 { font-family: var(--font-display); margin-top: calc(var(--space) * 4); margin-bottom: calc(var(--space) * 2); } .legal-page p { font-size: 0.9375rem; line-height: 1.6; color: var(--color-on-surface); } .legal-page ul { margin-bottom: calc(var(--space) * 2); padding-left: calc(var(--space) * 6); } .legal-page ul li { font-size: 0.9375rem; line-height: 1.6; color: var(--color-on-surface); margin-bottom: calc(var(--space) * 1); } /* --- Minimal app page styling (no hero) --- */ .app-page .site-nav { margin-bottom: calc(var(--space) * 4); } .app-page h1 { font-size: 1.5rem; } /* --- Hover-only (no touch) --- */ @media (hover: hover) { .btn:hover { opacity: 0.85; } } /* --- Respect reduced motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* --- Responsive --- */ @media (max-width: 899px) { .hero { grid-template-columns: 1fr; gap: calc(var(--space) * 6); } .hero-visual { order: 1; } .tool-layout { grid-template-columns: 1fr; } .site-nav { flex-wrap: wrap; gap: calc(var(--space) * 3); } .site-nav .nav-links { order: 1; width: 100%; justify-content: flex-start; padding-top: calc(var(--space) * 2); border-top: 1px solid var(--color-border); } .proof-strip { grid-template-columns: repeat(2, 1fr); } .proof-cell:nth-child(even) { border-right: none; } .proof-cell:nth-child(2) { border-right: 1px solid var(--color-border); } .footer-content { grid-template-columns: 1fr; gap: calc(var(--space) * 4); } .footer-bottom { flex-direction: column; gap: calc(var(--space) * 2); text-align: center; } .pricing-table { font-size: 0.8125rem; } .pricing-table th, .pricing-table td { padding: calc(var(--space) * 2); } } @media (max-width: 599px) { .proof-strip { grid-template-columns: 1fr; } .proof-cell { border-right: none; border-bottom: 1px solid var(--color-border); } .proof-cell:last-child { border-bottom: none; } .section-header h2 { font-size: 1.0625rem; } .hero-text .hero-headline { font-size: 1.375rem; } } /* --- Success message (pricing demo) --- */ #subscribe-success { display: none; margin-top: calc(var(--space) * 4); padding: calc(var(--space) * 4); border: 1px solid var(--color-success); border-radius: var(--radius); background: color-mix(in srgb, var(--color-success) 8%, transparent); text-align: center; } #subscribe-success .success-icon { font-family: var(--font-mono); font-size: 1.5rem; color: var(--color-success); margin-bottom: calc(var(--space) * 1); } #subscribe-success p { font-size: 0.9375rem; color: var(--color-on-surface); margin-bottom: 0; }