/* ========================================================== CREDA Systems — Product Layer product.css Purpose: Product-page overlay for CREDA Systems product pages. Requires /assets/css/styles.css as foundation. Usage: ========================================================== */ .product-page{ --product-max: 1120px; --product-accent: #9fb8d6; --product-accent-strong: #c5d8ee; --product-surface: rgba(255,255,255,0.045); --product-surface-2: rgba(255,255,255,0.065); --product-line: rgba(255,255,255,0.10); --product-glow: rgba(143,163,191,0.16); } /* Wider product canvas */ .product-page .container{ max-width: var(--product-max); } /* Product hero */ .product-hero{ padding: 56px 0 42px; } .product-hero-grid{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 22px; align-items: stretch; } .product-kicker{ display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 14px; padding: 6px 11px; border: 1px solid rgba(143,163,191,0.22); border-radius: 999px; color: var(--product-accent-strong); background: rgba(143,163,191,0.08); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .product-hero h1{ margin: 0 0 14px; max-width: 12ch; font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: clamp(38px, 5vw, 62px); line-height: 1.02; letter-spacing: 0.005em; color: #fff; } .product-lede{ max-width: 68ch; margin: 0; color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; } /* CTA row */ .product-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .product-button{ display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 15px; border-radius: 10px; border: 1px solid var(--product-line); color: #fff; background: rgba(255,255,255,0.045); font-size: 14px; font-weight: 600; } .product-button:hover{ background: rgba(255,255,255,0.075); } .product-button.primary{ border-color: rgba(159,184,214,0.34); background: rgba(143,163,191,0.16); } .product-button.primary:hover{ background: rgba(143,163,191,0.24); } /* Product cards */ .product-panel, .product-card{ background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.028)); border: 1px solid var(--product-line); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.18); } .product-panel{ padding: 22px; } .product-card{ padding: 18px; } .product-card h3, .product-panel h3{ margin: 0 0 8px; color: #fff; font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 600; } .product-card p, .product-panel p{ margin: 0; color: var(--muted); font-size: 14px; } /* Product proof box */ .product-proof{ display: grid; gap: 12px; } .proof-row{ display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.025); } .proof-mark{ flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; border: 1px solid rgba(159,184,214,0.32); background: rgba(143,163,191,0.12); } .proof-row strong{ display: block; margin-bottom: 2px; color: #fff; font-size: 14px; } .proof-row span{ display: block; color: var(--muted); font-size: 13px; line-height: 1.45; } /* Product sections */ .product-section{ padding: 34px 0; } .product-section-header{ max-width: 760px; margin-bottom: 18px; } .product-section-header h2{ margin: 0 0 10px; color: #fff; font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; font-weight: 600; } .product-section-header p{ margin: 0; color: var(--muted); font-size: 16px; } /* Product grids */ .product-grid-2{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .product-grid-3{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } .product-grid-4{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; } /* Workflow strip */ .product-flow{ display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; } .flow-step{ position: relative; padding: 15px; min-height: 118px; border: 1px solid var(--product-line); border-radius: 14px; background: rgba(255,255,255,0.035); } .flow-step small{ display: block; margin-bottom: 10px; color: var(--product-accent); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .flow-step strong{ display: block; margin-bottom: 6px; color: #fff; font-size: 14px; } .flow-step span{ display: block; color: var(--muted); font-size: 13px; line-height: 1.45; } /* Audience cards */ .audience-card{ min-height: 178px; } .audience-card ul{ margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; } .audience-card li{ margin-bottom: 6px; } /* Viewing code block */ .viewing-code{ display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 13px; border: 1px solid rgba(159,184,214,0.28); border-radius: 12px; background: rgba(143,163,191,0.10); color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: 0.04em; } .viewing-code span{ color: var(--product-accent-strong); } /* CTA band */ .product-cta{ margin-top: 34px; padding: 26px; border: 1px solid rgba(159,184,214,0.22); border-radius: 16px; background: radial-gradient(500px 240px at 15% 0%, var(--product-glow), transparent 60%), rgba(255,255,255,0.04); } .product-cta h2{ margin: 0 0 8px; color: #fff; font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: clamp(24px, 3vw, 32px); } .product-cta p{ max-width: 72ch; margin: 0; color: var(--muted); } /* Product note */ .product-note{ margin-top: 18px; padding: 14px 16px; border-left: 3px solid rgba(159,184,214,0.42); background: rgba(255,255,255,0.03); color: var(--muted); font-size: 14px; } /* Product footer badge */ .product-brand-line{ margin-top: 22px; color: var(--muted); font-size: 13px; letter-spacing: 0.02em; } /* Responsive */ @media (max-width: 960px){ .product-hero-grid, .product-grid-2, .product-grid-3, .product-grid-4, .product-flow{ grid-template-columns: 1fr; } .product-hero h1{ max-width: 14ch; } .flow-step{ min-height: auto; } } @media (max-width: 640px){ .product-hero{ padding: 38px 0 24px; } .product-section{ padding: 24px 0; } .product-panel, .product-card, .product-cta{ padding: 16px; } .product-actions{ flex-direction: column; } .product-button{ width: 100%; } .viewing-code{ width: 100%; justify-content: center; font-size: 13px; } }