/* ============================================================ PtahCast — Design System Palette: deep lapis + burnished gold + papyrus sand Type: Cinzel (monumental) + Inter (modern) + JetBrains Mono (data) ============================================================ */ /* Fonts (Cinzel, Inter, JetBrains Mono) are loaded via tags in base.html with preconnect, not @import here — @import adds an extra blocking round trip before the browser can even start fetching the font CSS. See templates/base.html . */ /* ===== Tokens ===== */ :root { /* Lapis-based palette */ --bg-void: #080d14; --bg-lapis: #0c1520; --bg-surface: #0f1d2d; --bg-raised: #152437; --bg-highlight: #1a2d42; /* Borders */ --border-stone: #253d58; --border-faint: #1a2d40; /* Gold */ --gold: #c8a84b; --gold-bright: #e6c55a; --gold-dim: #a8892a; /* bumped up from #8a6f2a — was invisible */ --gold-soft: rgba(200, 168, 75, 0.10); --gold-glow: rgba(200, 168, 75, 0.06); /* Sand / papyrus — all bumped for legibility */ --sand: #d4c5a9; --sand-muted: #b0a08a; /* bumped from #8a7d66 — primary secondary text */ --sand-dim: #7a6e5c; /* decorative use only, not body text */ /* Ink — all bumped for legibility */ --ink: #eae8e2; --ink-muted: #b8b2aa; /* bumped from #9a9288 — readable secondary */ --ink-dim: #7a746c; /* decorative/non-critical only */ /* Accent */ --lapis-bright: #2d6b9f; /* Type */ --font-monument: 'Cinzel', serif; --font-body: 'Inter', sans-serif; --font-data: 'JetBrains Mono', monospace; /* Geometry */ --radius: 6px; --radius-sm: 3px; } /* ===== Reset ===== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg-void); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--gold); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--gold-bright); } /* ===== Shared layout ===== */ .container { max-width: 1080px; margin: 0 auto; padding: 0 32px; } .container--narrow { max-width: 720px; margin: 0 auto; padding: 0 32px; } /* ===== Navigation ===== */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(8, 13, 20, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-stone); padding: 0 32px; } .nav__inner { max-width: 1080px; margin: 0 auto; height: 60px; display: flex; align-items: center; justify-content: space-between; } .nav__wordmark { font-family: var(--font-monument); font-size: 18px; font-weight: 600; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; text-decoration: none; } .nav__wordmark span { color: var(--sand); font-weight: 400; } .nav__right { display: flex; align-items: center; gap: 20px; } .build-badge { display: flex; align-items: center; gap: 7px; font-family: var(--font-data); font-size: 11px; letter-spacing: 0.06em; color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-dim); border-radius: 20px; padding: 4px 12px; text-transform: uppercase; } .build-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ===== Egyptian frieze divider ===== */ .frieze { width: 100%; height: 28px; overflow: hidden; opacity: 0.6; } .frieze--gold { opacity: 0.5; margin: 0; } /* ===== Hero ===== */ .hero { background: var(--bg-lapis); padding: 96px 32px 80px; position: relative; overflow: hidden; } /* Subtle lapis texture — diagonal grain */ .hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, rgba(45, 107, 159, 0.04) 0px, rgba(45, 107, 159, 0.04) 1px, transparent 1px, transparent 24px ); pointer-events: none; } .hero__inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .hero__eyebrow { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin: 0 0 20px; } .hero__headline { font-family: var(--font-monument); font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; line-height: 1.15; color: var(--ink); margin: 0 0 24px; letter-spacing: 0.01em; } .hero__headline em { font-style: normal; color: var(--gold); } .hero__sub { font-size: 16px; color: var(--sand-muted); line-height: 1.7; margin: 0; max-width: 480px; } /* ===== Forecast demo (signature element) ===== */ .forecast-demo { background: var(--bg-surface); border: 1px solid var(--border-stone); border-radius: var(--radius); padding: 28px 32px; position: relative; } /* Cartouche-style top accent */ .forecast-demo::before { content: ''; position: absolute; top: -1px; left: 32px; right: 32px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .forecast-demo__label { font-family: var(--font-data); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sand-muted); /* was sand-faint — now readable */ margin: 0 0 6px; } .forecast-demo__title { font-size: 13px; color: var(--ink-muted); /* was a darker value — now readable */ margin: 0 0 22px; font-weight: 400; } .forecast-demo__title strong { color: var(--sand); font-weight: 500; } .forecast-row { display: grid; grid-template-columns: 36px 1fr 64px; align-items: center; gap: 12px; margin-bottom: 10px; } .forecast-row:last-of-type { margin-bottom: 0; } .forecast-pct { font-family: var(--font-data); font-size: 12px; color: var(--ink-muted); /* was ink-faint — bumped to readable */ text-align: right; } .forecast-row--highlight .forecast-pct { color: var(--gold); font-weight: 500; } .forecast-track { height: 6px; background: var(--bg-raised); border-radius: 3px; overflow: hidden; } .forecast-fill { height: 100%; background: var(--border-stone); border-radius: 3px; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .forecast-row--highlight .forecast-fill { background: var(--gold); } .forecast-date { font-family: var(--font-data); font-size: 11px; color: var(--ink-muted); /* was ink-faint — bumped to readable */ text-align: right; white-space: nowrap; } .forecast-row--highlight .forecast-date { color: var(--gold-bright); font-weight: 500; } .forecast-meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-faint); font-family: var(--font-data); font-size: 10px; color: var(--sand-muted); /* was sand-faint — bumped to readable */ letter-spacing: 0.04em; } .forecast-vs { margin-top: 14px; padding: 10px 14px; background: var(--bg-raised); border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .forecast-vs__old { font-family: var(--font-data); color: var(--ink-muted); /* was ink-faint — bumped to readable */ text-decoration: line-through; text-decoration-color: var(--ink-dim); } .forecast-vs__new { font-family: var(--font-data); color: var(--gold); font-size: 11px; letter-spacing: 0.04em; } /* ===== Section base ===== */ .section { padding: 80px 32px; } .section--dark { background: var(--bg-void); } .section--surface { background: var(--bg-lapis); } .section__eyebrow { font-family: var(--font-data); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; } .section__heading { font-family: var(--font-monument); font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; color: var(--ink); margin: 0 0 16px; letter-spacing: 0.02em; } .section__sub { font-size: 16px; color: var(--sand-muted); line-height: 1.7; margin: 0 0 48px; max-width: 600px; } /* ===== Problem section ===== */ .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 48px; } .problem-card { background: var(--bg-surface); padding: 32px; } .problem-card:first-child { border-radius: var(--radius) 0 0 var(--radius); } .problem-card:last-child { border-radius: 0 var(--radius) var(--radius) 0; } .problem-card__glyph { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; } .problem-card--old .problem-card__glyph { color: var(--ink-muted); } .problem-card--new .problem-card__glyph { color: var(--gold); } .problem-card__headline { font-size: 20px; font-weight: 600; margin: 0 0 12px; line-height: 1.3; } .problem-card--old .problem-card__headline { color: var(--sand-muted); } .problem-card--new .problem-card__headline { color: var(--ink); } .problem-card__body { font-size: 14px; color: var(--sand-muted); line-height: 1.7; margin: 0; } /* ===== Three pillars ===== */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 8px; } .pillar { background: var(--bg-surface); padding: 36px 28px; position: relative; overflow: hidden; } .pillar:first-child { border-radius: var(--radius) 0 0 var(--radius); } .pillar:last-child { border-radius: 0 var(--radius) var(--radius) 0; } /* Subtle vertical accent line at top */ .pillar::before { content: ''; position: absolute; top: 0; left: 28px; width: 24px; height: 2px; background: var(--gold); } .pillar__number { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.14em; color: var(--gold); /* was gold-dim which was invisible — now full gold */ text-transform: uppercase; margin-bottom: 16px; display: block; } .pillar__name { font-size: 17px; font-weight: 600; color: var(--sand); margin: 0 0 12px; } .pillar__body { font-size: 14px; color: var(--sand-muted); line-height: 1.7; margin: 0; } .pillar__tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; } .tag { font-family: var(--font-data); font-size: 10px; letter-spacing: 0.05em; color: var(--ink-muted); /* was sand-faint — bumped to readable */ background: var(--bg-raised); border: 1px solid var(--border-stone); border-radius: 2px; padding: 3px 8px; } /* ===== Build in public section ===== */ .build-section { background: var(--bg-surface); border-top: 1px solid var(--border-stone); border-bottom: 1px solid var(--border-stone); } .build-inner { max-width: 1080px; margin: 0 auto; padding: 80px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .phase-list { margin-top: 32px; display: flex; flex-direction: column; gap: 0; } .phase { display: grid; grid-template-columns: 20px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-faint); position: relative; } .phase:first-child { padding-top: 0; } .phase:last-child { border-bottom: none; padding-bottom: 0; } .phase__indicator { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-stone); background: var(--bg-raised); margin-top: 4px; flex-shrink: 0; } .phase--active .phase__indicator { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 12px rgba(200, 168, 75, 0.4); } .phase--done .phase__indicator { border-color: var(--gold-dim); background: var(--gold-dim); } .phase__name { font-size: 14px; font-weight: 500; color: var(--ink-muted); /* was ink-faint for done state — now readable */ margin-bottom: 2px; } .phase--active .phase__name { color: var(--ink); } .phase__desc { font-size: 13px; color: var(--sand-muted); /* was sand-faint — bumped to readable */ line-height: 1.5; } .phase--active .phase__desc { color: var(--sand-muted); } /* ===== Signup ===== */ .signup-block { margin-top: 48px; } .signup-block__label { font-size: 14px; color: var(--sand-muted); margin-bottom: 14px; } .signup-form { display: flex; gap: 8px; } .signup-input { flex: 1; font-family: var(--font-body); font-size: 14px; color: var(--ink); background: var(--bg-raised); border: 1px solid var(--border-stone); border-radius: var(--radius-sm); padding: 11px 14px; outline: none; transition: border-color 0.15s; } .signup-input::placeholder { color: var(--ink-dim); } .signup-input:focus { border-color: var(--gold); } .signup-btn { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #0a0806; background: var(--gold); border: none; border-radius: var(--radius-sm); padding: 11px 20px; cursor: pointer; white-space: nowrap; transition: background 0.15s; } .signup-btn:hover { background: var(--gold-bright); } /* ===== LinkedIn CTA ===== */ .follow-block { margin-top: 24px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sand-muted); } .follow-link { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--gold-dim); padding-bottom: 1px; transition: border-color 0.15s, color 0.15s; } .follow-link:hover { color: var(--gold-bright); border-color: var(--gold-bright); } /* Build summary card */ .build-summary { background: var(--bg-raised); border: 1px solid var(--border-stone); border-radius: var(--radius); padding: 28px; position: relative; } .build-summary::before { content: ''; position: absolute; top: -1px; left: 28px; right: 28px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .build-summary__title { font-family: var(--font-data); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; } .build-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border-faint); font-size: 13px; gap: 16px; } .build-stat:last-child { border-bottom: none; padding-bottom: 0; } .build-stat__key { color: var(--sand-muted); flex-shrink: 0; } .build-stat__val { font-family: var(--font-data); font-size: 12px; color: var(--ink-muted); /* was darker — now readable */ text-align: right; } .build-stat__val--gold { color: var(--gold); font-weight: 500; } .build-stat__val--struck { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: var(--ink-dim); } /* ===== Philosophy strip ===== */ .philosophy { background: var(--bg-void); border-top: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint); padding: 48px 32px; text-align: center; } .philosophy__quote { font-family: var(--font-monument); font-size: clamp(18px, 2.2vw, 26px); font-weight: 400; color: var(--sand); letter-spacing: 0.02em; line-height: 1.4; max-width: 720px; margin: 0 auto 14px; } .philosophy__quote em { font-style: normal; color: var(--gold); } .philosophy__attr { font-family: var(--font-data); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand-muted); /* was sand-faint — bumped to readable */ } /* ===== Why Ptah? ===== */ .why-ptah { background: var(--bg-lapis); padding: 80px 32px; border-top: 1px solid var(--border-stone); } .why-ptah__inner { max-width: 640px; margin: 0 auto; text-align: center; } .why-ptah__cartouche { display: flex; justify-content: center; margin-bottom: 28px; } .why-ptah__eyebrow { font-family: var(--font-data); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; } .why-ptah__heading { font-family: var(--font-monument); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; color: var(--ink); letter-spacing: 0.04em; margin: 0 0 36px; } .why-ptah__body { text-align: left; } .why-ptah__body p { font-size: 15px; color: var(--sand-muted); line-height: 1.8; margin: 0 0 18px; } .why-ptah__body p:last-child { margin-bottom: 0; } .why-ptah__body em { font-style: normal; color: var(--sand); } /* ===== Footer ===== */ .footer { background: var(--bg-void); border-top: 1px solid var(--border-stone); padding: 36px 32px; } .footer__inner { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; } .footer__wordmark { font-family: var(--font-monument); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; } .footer__wordmark span { color: var(--sand-muted); font-weight: 400; } .footer__copy { font-size: 12px; color: var(--ink-muted); /* was ink-faint — bumped to readable */ } .footer__nav { display: flex; gap: 20px; } .footer__link { font-size: 12px; color: var(--sand-muted); transition: color 0.15s; } .footer__link:hover { color: var(--gold); } /* ===== Utility ===== */ .text-gold { color: var(--gold); } .text-sand { color: var(--sand); } .text-muted { color: var(--sand-muted); } .mono { font-family: var(--font-data); } /* ===== Accessibility ===== */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ===== Responsive ===== */ @media (max-width: 860px) { .hero__inner { grid-template-columns: 1fr; gap: 48px; } .problem-grid { grid-template-columns: 1fr; } .problem-card:first-child { border-radius: var(--radius) var(--radius) 0 0; } .problem-card:last-child { border-radius: 0 0 var(--radius) var(--radius); } .pillars { grid-template-columns: 1fr; } .pillar:first-child { border-radius: var(--radius) var(--radius) 0 0; } .pillar:last-child { border-radius: 0 0 var(--radius) var(--radius); } .build-inner { grid-template-columns: 1fr; gap: 48px; } .footer__inner { flex-direction: column; text-align: center; } } @media (max-width: 560px) { .container, .container--narrow { padding: 0 20px; } .section { padding: 60px 20px; } .nav { padding: 0 20px; } .hero { padding: 64px 20px 60px; } .build-inner { padding: 60px 20px; } .signup-form { flex-direction: column; } .signup-btn { width: 100%; } } /* ============================================================ Get-started section (Request info / Start a trial forms) Added for the Flask build — reuses the pricing-card and signup-input classes already defined above. ============================================================ */ .get-started-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; } .get-started-card { border: 1px solid rgba(200, 168, 75, 0.25); border-radius: 8px; padding: 32px 28px; background: rgba(200, 168, 75, 0.03); } .get-started-card--highlight { border-color: var(--gold); background: rgba(200, 168, 75, 0.07); } .get-started-card .pricing-card__name { font-family: var(--font-monument); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; } .get-started-card .pricing-card__for { opacity: 0.7; font-size: 14px; margin: 0 0 20px; } .get-started-card__submit { width: 100%; margin-top: 4px; background: none; cursor: pointer; font-family: var(--font-body); } .form-field { margin-bottom: 16px; } .form-field label { display: block; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--sand-muted); margin-bottom: 6px; } .form-field textarea.signup-input { width: 100%; resize: vertical; font-family: var(--font-body); } .form-field--checkbox { display: flex; align-items: center; gap: 8px; } .form-field--checkbox label { margin-bottom: 0; text-transform: none; font-size: 14px; } .form-error { display: block; color: #d97a6b; font-size: 12px; margin-top: 4px; } /* ===== Flash messages ===== */ .flash-messages { max-width: 640px; margin: 16px auto 0; padding: 0 20px; } .flash { padding: 12px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 8px; } .flash--error { background: rgba(217, 122, 107, 0.12); border: 1px solid rgba(217, 122, 107, 0.4); color: #d97a6b; } .flash--success { background: rgba(200, 168, 75, 0.1); border: 1px solid var(--gold); color: var(--gold-bright); } .flash--warning { background: rgba(200, 168, 75, 0.08); border: 1px solid var(--gold-dim); color: var(--sand); } @media (max-width: 640px) { .get-started-grid { grid-template-columns: 1fr; } } /* ============================================================ Pricing section — moved here from the inline