/* ============================================================ COMING-SOON.CSS Shared styles for Stockroom, Supply Chain, and Production placeholder pages. Each page sets its accent color via a CSS variable override in the page . Usage in each page's : ============================================================ */ /* ── COMING SOON HERO ── */ .btn-primary { background: var(--color-product-accent); box-shadow: 0 4px 22px var(--color-product-accent-subtle); } .btn-primary:hover { background: var(--color-product-accent); opacity: 0.88; box-shadow: 0 8px 30px var(--color-product-accent-subtle); } .cs-hero { padding: 180px 32px 100px; text-align: center; max-width: var(--max-content-width); margin: 0 auto; } .cs-hero-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-product-accent); margin-bottom: 32px; padding: 6px 14px; border: 1px solid var(--color-product-accent-border); border-radius: 2px; background: var(--color-product-accent-subtle); } .cs-hero-tag-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-product-accent); flex-shrink: 0; } .cs-hero-headline { margin-bottom: 8px; } .cs-hero-headline .cs-brand { display: block; font-family: var(--font-mono); font-size: 14px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted-text); margin-bottom: 10px; } .cs-hero-headline .cs-product-name { font-family: var(--font-serif); font-size: clamp(48px, 7vw, 84px); line-height: 1.0; letter-spacing: -0.03em; color: var(--color-ink); display: block; } .cs-hero-subheading { font-size: 18px; color: #3e3d3a; max-width: 560px; margin: 24px auto 0; line-height: 1.75; } /* Accent underline on product name */ .cs-hero-headline .cs-product-name::after { content: ''; display: block; width: 60px; height: 3px; background: var(--color-product-accent); border-radius: 2px; margin: 16px auto 0; } /* ── DESCRIPTION SECTION ── */ .cs-description { background: var(--color-ink); color: var(--color-paper); padding: 80px 32px; } .cs-description-inner { max-width: var(--max-content-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } .cs-description-left h2 { font-family: var(--font-serif); font-size: clamp(26px, 3.5vw, 40px); color: var(--color-paper); line-height: 1.1; margin-bottom: 20px; } .cs-description-left h2 em { font-style: italic; color: var(--color-product-accent); } .cs-description-left p { font-size: 15px; color: rgba(245, 242, 235, 0.55); line-height: 1.8; } .cs-description-right { display: flex; flex-direction: column; gap: 20px; padding-top: 6px; } .cs-description-point { display: flex; gap: 16px; align-items: start; } .cs-description-point-marker { width: 2px; height: 100%; min-height: 40px; background: var(--color-product-accent); opacity: 0.5; flex-shrink: 0; border-radius: 1px; margin-top: 4px; } .cs-description-point-text h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--color-paper); margin-bottom: 4px; } .cs-description-point-text p { font-size: 13px; color: rgba(245, 242, 235, 0.46); line-height: 1.65; } /* ── NOTIFY FORM ── */ .cs-notify { padding: 80px 32px 100px; text-align: center; } .cs-notify-inner { max-width: 520px; margin: 0 auto; } .cs-notify-heading { font-family: var(--font-serif); font-size: clamp(26px, 3.5vw, 38px); line-height: 1.1; margin-bottom: 12px; } .cs-notify-heading em { font-style: italic; color: var(--color-muted-text); } .cs-notify-subheading { font-size: 15px; color: #4a4a47; line-height: 1.7; margin-bottom: 36px; } .cs-notify-form { display: flex; gap: 10px; flex-wrap: wrap; } .cs-notify-input { flex: 1; min-width: 220px; padding: 13px 16px; border: 1.5px solid var(--color-border-strong); border-radius: 3px; font-size: 14px; font-family: var(--font-sans); background: var(--color-surface-warm); color: var(--color-ink); outline: none; transition: border-color var(--transition-fast); } .cs-notify-input:focus { border-color: var(--color-product-accent); } .cs-notify-input::placeholder { color: rgba(14, 15, 12, 0.32); } .cs-notify-btn { background: var(--color-product-accent); color: white; border: none; padding: 13px 24px; border-radius: 3px; font-size: 14px; font-family: var(--font-sans); font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity var(--transition-fast), transform var(--transition-fast); } .cs-notify-btn:hover { opacity: 0.88; transform: translateY(-1px); } .cs-notify-btn:disabled { opacity: 0.55; cursor: default; transform: none; } .cs-notify-footnote { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--color-muted-text); margin-top: 16px; line-height: 1.6; } .cs-notify-status { font-family: var(--font-mono); font-size: 12px; margin-top: 12px; min-height: 20px; } .cs-notify-status--success { color: var(--color-product-accent); } .cs-notify-status--error { color: #c0392b; } /* Back to suite link */ .cs-back-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-text); text-decoration: none; margin-top: 32px; transition: color var(--transition-fast); } .cs-back-link:hover { color: var(--color-ink); } /* ── RESPONSIVE ── */ @media (max-width: 820px) { .cs-hero { padding: 150px 20px 80px; } .cs-description { padding: 60px 20px; } .cs-description-inner { grid-template-columns: 1fr; gap: 40px; } .cs-notify { padding: 60px 20px 80px; } .cs-notify-form { flex-direction: column; } .cs-notify-btn { width: 100%; } }