/* ============================================================ * Quire landing โ€” vellum theme matching the app aesthetic. * Tokens mirror app/src/globals.css. Self-contained, no @import * except Google Fonts (in ). * ============================================================ */ :root { /* Vellum */ --color-vellum-deepest: #14110c; --color-vellum-deep: #1c1812; --color-vellum: #2a241d; --color-vellum-light: #3a3328; --color-vellum-lighter: #4a4234; /* Gold */ --color-gold: #b58e3f; --color-gold-soft: #8a6c34; --color-gold-pale: #d4b97a; --color-gold-deep: #6b5226; /* Crimson */ --color-crimson: #6e1b1b; --color-crimson-soft: #d56b6b; /* Bone */ --color-bone: #ebe2cc; --color-bone-soft: #c9bfa6; --color-bone-muted: #b3a78a; --color-bone-faint: #998d72; /* Semantic */ --bg: var(--color-vellum-deep); --bg-alt: var(--color-vellum-deepest); --surface: var(--color-vellum); --surface-raised: var(--color-vellum-light); --border: var(--color-vellum-lighter); --fg: var(--color-bone); --fg-muted: var(--color-bone-muted); --accent: var(--color-gold); /* Type */ --font-display: "Gloock", "EB Garamond", Georgia, serif; --font-serif: "Instrument Serif", "EB Garamond", Georgia, serif; --font-sans: "Inter", system-ui, -apple-system, sans-serif; /* Spacing */ --container-max: 1180px; --radius: 2px; --radius-md: 3px; --radius-lg: 6px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(181, 142, 63, 0.15); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: var(--color-gold-pale); text-decoration: none; } a:hover { color: var(--color-gold); } p { margin: 0 0 1em; } code { font-family: ui-monospace, "IBM Plex Mono", monospace; font-size: 0.9em; padding: 0.1em 0.35em; background: var(--color-vellum-deepest); border: 1px solid var(--border); border-radius: 2px; color: var(--color-gold-pale); } /* Catalog text โ€” small caps for plate refs */ .catalog { font-family: ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); } /* ============================================================ CONTAINER */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } /* ============================================================ HEADER */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(28, 24, 18, 0.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 24px; } .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .brand-mark { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.22em; color: var(--color-gold); text-transform: uppercase; } .brand-mark.small { font-size: 16px; letter-spacing: 0.18em; } .brand-logo { height: 28px; width: 28px; display: block; border-radius: var(--radius); } .footer-brandline { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; } .footer-brandline .brand-logo { height: 22px; width: 22px; } .site-nav { display: none; gap: 24px; } .site-nav a { font-size: 14px; color: var(--fg-muted); } .site-nav a:hover { color: var(--color-gold-pale); } .header-cta { font-size: 13px; padding: 8px 14px; } @media (min-width: 800px) { .site-nav { display: inline-flex; } } /* ============================================================ BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-gold); color: var(--color-vellum-deepest); border-color: var(--color-gold-soft); } .btn-primary:hover { background: var(--color-gold-pale); color: var(--color-vellum-deepest); } .btn-ghost { background: transparent; color: var(--color-bone-soft); border-color: var(--border); } .btn-ghost:hover { color: var(--color-gold-pale); border-color: var(--color-gold-soft); } .btn-block { display: flex; width: 100%; } .btn-large { padding: 16px 32px; font-size: 16px; } /* ============================================================ HERO */ .hero { position: relative; padding: 80px 0 96px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(181, 142, 63, 0.12) 0%, transparent 40%), radial-gradient(circle at 80% 100%, rgba(110, 27, 27, 0.08) 0%, transparent 50%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } .hero { padding: 120px 0 144px; } } .hero-title { font-family: var(--font-display); font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: 0.01em; color: var(--fg); margin: 16px 0 12px; } .hero-translation { font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 2vw, 22px); color: var(--color-bone-soft); margin: 0 0 24px; line-height: 1.45; } .hero-pitch { font-family: var(--font-serif); font-size: 18px; color: var(--color-bone-muted); line-height: 1.6; max-width: 540px; margin: 0 0 32px; } .hero-pitch strong { color: var(--color-gold-pale); font-weight: 500; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .hero-meta { font-size: 13px; color: var(--fg-muted); margin: 0; } /* Hero media frame */ .hero-media { position: relative; } .hero-frame { position: relative; aspect-ratio: 16 / 10; background: var(--color-vellum-deepest); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); overflow: hidden; } .hero-frame-glow { position: absolute; inset: -30%; background: radial-gradient(circle at 30% 30%, rgba(181, 142, 63, 0.15), transparent 60%); pointer-events: none; } .hero-placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--fg-muted); } .hero-placeholder p { font-family: ui-monospace, monospace; font-size: 12px; margin: 6px 0 0; } /* ============================================================ WHY */ .why { padding: 64px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .why-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 700px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .why-grid { grid-template-columns: repeat(4, 1fr); } } .why-card h3 { font-family: var(--font-display); font-size: 20px; color: var(--color-gold-pale); margin: 0 0 8px; letter-spacing: 0.01em; } .why-card p { font-family: var(--font-serif); font-size: 16px; color: var(--color-bone-soft); line-height: 1.55; } /* ============================================================ SECTIONS */ .section { padding: 96px 0; } .section-alt { background: var(--bg-alt); } .section-eyebrow { display: block; margin-bottom: 12px; } .section-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: 0.01em; color: var(--fg); margin: 0 0 16px; max-width: 700px; } .section-lede { font-family: var(--font-serif); font-size: 19px; color: var(--color-bone-soft); max-width: 640px; margin: 0 0 48px; line-height: 1.55; } /* ============================================================ FEATURE GRID */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 24px; transition: border-color 0.18s, transform 0.18s; } .feature-card:hover { border-color: var(--color-gold-soft); transform: translateY(-2px); } .feature-glyph { font-family: var(--font-display); font-size: 28px; color: var(--color-gold); line-height: 1; margin-bottom: 16px; } .feature-card h3 { font-family: var(--font-display); font-size: 22px; color: var(--fg); margin: 0 0 10px; letter-spacing: 0.01em; } .feature-card p { font-family: var(--font-serif); font-size: 16px; color: var(--color-bone-muted); line-height: 1.55; margin: 0; } /* ============================================================ ASPECT GRID */ .aspect-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 700px) { .aspect-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .aspect-grid { grid-template-columns: repeat(5, 1fr); } } .aspect-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px 20px; text-align: center; position: relative; overflow: hidden; } .aspect-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold-soft), transparent); } .aspect-mark { font-family: var(--font-display); font-size: 32px; color: var(--color-gold); line-height: 1; margin-bottom: 12px; } .aspect-card h3 { font-family: var(--font-display); font-size: 20px; color: var(--color-gold-pale); margin: 0 0 4px; letter-spacing: 0.04em; } .aspect-role { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--fg-muted); margin: 0 0 12px; } .aspect-card p:not(.aspect-role) { font-family: var(--font-serif); font-size: 15px; color: var(--color-bone-muted); line-height: 1.5; margin: 0; } /* ============================================================ USE CASES */ .use-case-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 900px) { .use-case-grid { grid-template-columns: repeat(3, 1fr); } } .use-case { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px 28px; } .use-case h3 { font-family: var(--font-display); font-size: 24px; color: var(--fg); margin: 8px 0 12px; letter-spacing: 0.01em; } .use-case p { font-family: var(--font-serif); font-size: 16px; color: var(--color-bone-muted); line-height: 1.6; } .use-case-modes { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-pale); margin-top: 12px; } /* ============================================================ PRICING */ .pricing-section { max-width: 720px; margin: 0 auto; } .pricing-card { background: var(--surface); border: 1px solid var(--color-gold-soft); border-radius: var(--radius-lg); padding: 40px 36px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .pricing-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .pricing-header h3 { font-family: var(--font-display); font-size: 28px; margin: 0 0 8px; color: var(--fg); letter-spacing: 0.04em; } .pricing-tagline { font-family: var(--font-serif); font-style: italic; color: var(--fg-muted); margin: 0 0 24px; } .pricing-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; } .price-amount { font-family: var(--font-display); font-size: 48px; color: var(--color-gold); letter-spacing: 0.02em; } .price-unit { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--fg-muted); } .pricing-features { list-style: none; padding: 0; margin: 0 0 28px; } .pricing-features li { font-family: var(--font-serif); font-size: 16px; color: var(--color-bone-soft); padding: 8px 0 8px 24px; position: relative; border-bottom: 1px solid var(--color-vellum-light); } .pricing-features li:last-child { border-bottom: none; } .pricing-features li::before { content: "ยท"; position: absolute; left: 8px; color: var(--color-gold-pale); font-weight: bold; } .pricing-fine { font-size: 12px; color: var(--fg-muted); text-align: center; margin: 12px 0 0; } .pricing-cta-row { text-align: center; margin-top: 24px; } .text-link { font-size: 14px; color: var(--color-gold-pale); } /* ============================================================ TESTIMONIALS */ .testimonials .testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 800px) { .testimonials .testimonial-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial { background: var(--surface); border-left: 2px solid var(--color-gold-soft); padding: 28px 24px; margin: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; } .testimonial p { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--color-bone); line-height: 1.55; margin: 0 0 16px; } .testimonial cite { font-style: normal; font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); } /* ============================================================ FAQ */ .faq-container { max-width: 760px; margin: 0 auto; } .faq-list { display: grid; gap: 8px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0; overflow: hidden; transition: border-color 0.15s; } .faq-item[open] { border-color: var(--color-gold-soft); } .faq-item summary { font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--color-bone); padding: 18px 22px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--font-display); font-size: 24px; color: var(--color-gold); transition: transform 0.15s; line-height: 1; } .faq-item[open] summary::after { content: "โˆ’"; } .faq-item p { padding: 0 22px 20px; font-family: var(--font-serif); font-size: 16px; color: var(--color-bone-muted); line-height: 1.6; margin: 0; } /* ============================================================ FINAL CTA */ .final-cta { text-align: center; background: radial-gradient(circle at 50% 50%, rgba(181, 142, 63, 0.08), transparent 60%); padding: 120px 0; } .final-cta-inner { max-width: 640px; margin: 0 auto; } .final-cta .section-title { margin: 12px auto 16px; } .final-cta-lede { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--color-bone-soft); margin-bottom: 32px; } /* ============================================================ FOOTER */ .site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 64px 0 32px; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 700px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; } } .footer-brand { max-width: 280px; } .footer-tagline { font-family: var(--font-serif); font-size: 14px; color: var(--fg-muted); margin: 8px 0; } .footer-by { font-size: 13px; color: var(--fg-muted); } .footer-col { display: flex; flex-direction: column; gap: 8px; } .footer-col .catalog { margin-bottom: 4px; } .footer-col a { font-size: 14px; color: var(--color-bone-soft); } .footer-col a:hover { color: var(--color-gold-pale); } .footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); } .footer-bottom .catalog { text-align: center; color: var(--color-bone-faint); } /* ============================================================ A11Y */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; border-radius: var(--radius); } /* ============================================================ PRICING PAGE */ .pricing-page { max-width: 920px; margin: 0 auto; } .pricing-card-large { padding: 48px 44px; } .comparison-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); color: var(--fg); margin: 80px 0 24px; letter-spacing: 0.01em; } .comparison-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .comparison-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 14px; } .comparison-table th, .comparison-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--color-vellum-light); vertical-align: top; } .comparison-table thead th { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-pale); border-bottom: 1px solid var(--color-gold-soft); background: var(--color-vellum-deepest); } .comparison-table tbody th { font-weight: 500; color: var(--color-bone); font-size: 14px; } .comparison-table td { color: var(--color-bone-muted); } .comparison-table td strong { color: var(--color-gold-pale); font-weight: 500; } .comparison-table tbody tr:last-child th, .comparison-table tbody tr:last-child td { border-bottom: none; } .comparison-fine { font-size: 12px; color: var(--fg-muted); margin: 12px 0 0; } .discount-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 800px) { .discount-grid { grid-template-columns: repeat(3, 1fr); } } .discount-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px 22px; } .discount-card h3 { font-family: var(--font-display); font-size: 22px; color: var(--color-gold-pale); margin: 8px 0 12px; letter-spacing: 0.01em; } .discount-card p { font-family: var(--font-serif); font-size: 15px; color: var(--color-bone-muted); line-height: 1.55; margin: 0; }