/* ═══════════════════════════════════════════════════════════ style_site.css — shared page-level components for Fractal-SAP Requires: style_common.css (load before this file) ═══════════════════════════════════════════════════════════ */ html { scroll-padding-top: 16rem; } /* ── HERO variants (per page, keyed by class) ── */ .page-home .hero { min-height: 100vh; justify-content: center; padding: 10rem 3rem 6rem; border-bottom: none; } .page-home .hero::before { background: radial-gradient(ellipse 55% 60% at 75% 40%, rgba(200,80,255,0.10) 0%, transparent 65%), radial-gradient(ellipse 50% 50% at 25% 60%, rgba(0,212,255,0.08) 0%, transparent 60%), radial-gradient(ellipse 30% 40% at 60% 90%, rgba(57,232,122,0.05) 0%, transparent 50%); } .page-home .hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.05; max-width: 17ch; animation: fadeUp 0.7s 0.25s forwards; } .page-home .hero-sub { margin-top: 2rem; font-size: 1.15rem; max-width: 50ch; line-height: 1.7; animation: fadeUp 0.7s 0.4s forwards; } .page-how .hero, .page-pricing .hero, .page-ecosystem .hero, .page-about .hero { min-height: 62vh; } .page-how .hero::before { background: radial-gradient(ellipse 55% 65% at 90% 20%, rgba(0,212,255,0.08) 0%, transparent 65%), radial-gradient(ellipse 45% 55% at 10% 75%, rgba(200,80,255,0.07) 0%, transparent 60%); } .page-pricing .hero::before { background: radial-gradient(ellipse 55% 65% at 85% 25%, rgba(57,232,122,0.07) 0%, transparent 65%), radial-gradient(ellipse 45% 55% at 15% 75%, rgba(0,212,255,0.08) 0%, transparent 60%); } .page-ecosystem .hero::before { background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(200,80,255,0.09) 0%, transparent 65%), radial-gradient(ellipse 45% 55% at 15% 70%, rgba(0,212,255,0.07) 0%, transparent 60%); } .page-about .hero::before { background: radial-gradient(ellipse 55% 65% at 80% 25%, rgba(0,212,255,0.08) 0%, transparent 65%), radial-gradient(ellipse 45% 55% at 20% 75%, rgba(57,232,122,0.06) 0%, transparent 60%); } .page-contact .hero { min-height: 52vh; } .page-contact .hero::before { background: radial-gradient(ellipse 55% 65% at 80% 30%, rgba(0,212,255,0.08) 0%, transparent 65%), radial-gradient(ellipse 40% 50% at 15% 70%, rgba(200,80,255,0.07) 0%, transparent 60%); } .hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.8rem); max-width: 22ch; } .hero-sub { max-width: 56ch; } .hero-ctas { display: flex; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.7s 0.55s forwards; } /* ── SECTION BASE ── */ section { padding: 6rem 3rem; position: relative; z-index: 1; } .section-title { font-family: 'Montserrat', sans-serif; font-size: clamp(1.7rem, 3.2vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; max-width: 26ch; } .section-body { margin-top: 1.25rem; color: #7aa8bc; font-size: 1rem; font-weight: 300; line-height: 1.8; max-width: 58ch; } .section-body strong { color: var(--white); font-weight: 500; } /* ── MEET / TWO-COLUMN INTRO ── */ .meet { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: center; } /* ── STAT BLOCK ── */ .stat-block { background: var(--mid); border: 1px solid var(--border); padding: 3rem; display: flex; flex-direction: column; gap: 1.5rem; position: relative; overflow: hidden; } .stat-block::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 80% at 20% 20%, rgba(200,80,255,0.07) 0%, transparent 60%); pointer-events: none; } .stat-item { display: flex; align-items: baseline; gap: 0.75rem; } .stat-number { font-family: 'Montserrat', sans-serif; font-size: 2.75rem; font-weight: 800; background: linear-gradient(135deg, #00d4ff, #c850ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; white-space: nowrap; } .stat-label { color: var(--muted); font-size: 0.9rem; } /* ── STEPS (numbered process cards) ── */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 4rem; } .steps.steps-4 { grid-template-columns: repeat(4, 1fr); } .step { background: var(--mid); border: 1px solid var(--border2); padding: 2.5rem; position: relative; transition: border-color 0.2s, box-shadow 0.2s; } .step:hover { border-color: rgba(0,212,255,0.35); box-shadow: 0 0 30px rgba(0,212,255,0.06); } .step-num { font-family: 'Montserrat', sans-serif; font-size: 3.25rem; font-weight: 800; color: rgba(0,212,255,0.12); line-height: 1; margin-bottom: 1.5rem; } .step h3 { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.75rem; } .step p { color: #7aa8bc; font-size: 0.92rem; font-weight: 300; line-height: 1.7; } .step-tag { display: inline-block; margin-top: 1.25rem; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border); padding: 0.25rem 0.6rem; border-radius: 2px; } /* ── TABLE SECTION ── */ .table-section { background: var(--mid2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .table-section .sub { color: #7aa8bc; font-size: 0.9rem; font-weight: 300; margin-top: 0.75rem; font-style: italic; } .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 3rem; } .comparison-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 620px; } .comparison-table thead th { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 1.1rem 1.5rem; text-align: left; border-bottom: 1px solid var(--border); } .comparison-table thead th:first-child { color: var(--muted); } .comparison-table thead th:not(:first-child) { color: var(--muted); } .comparison-table thead th.hl { color: var(--accent); background: rgba(0,212,255,0.04); border-left: 1px solid var(--border); } .comparison-table tbody td { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border2); vertical-align: top; line-height: 1.55; color: #6a9ab0; } .comparison-table tbody td:first-child { color: var(--white); font-weight: 600; font-family: 'Montserrat', sans-serif; font-size: 0.82rem; letter-spacing: 0.01em; } .comparison-table tbody td.hl { color: var(--accent); background: rgba(0,212,255,0.03); border-left: 1px solid var(--border); font-weight: 500; } .comparison-table tbody tr:last-child td { border-bottom: none; } .comparison-table tbody tr:hover td { background: rgba(0,212,255,0.025); } .comparison-table tbody tr:hover td.hl { background: rgba(0,212,255,0.07); } .table-note { margin-top: 1.25rem; font-size: 0.78rem; color: var(--muted); font-style: italic; } /* ── DEPLOY / OPTION CARDS ── */ .deploy-section { padding: 6rem 3rem; background: var(--mid2); border-bottom: 1px solid var(--border); } .deploy-section h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; max-width: 30ch; margin-bottom: 1.25rem; } .deploy-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.5rem; } .deploy-cards.cols-3 { grid-template-columns: repeat(3, 1fr); } .deploy-card { background: var(--mid); border: 1px solid var(--border2); padding: 2.25rem 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; transition: border-color 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; } .deploy-card:hover { border-color: rgba(0,212,255,0.3); box-shadow: 0 0 28px rgba(0,212,255,0.05); } .deploy-card-icon { font-size: 1.5rem; } .deploy-card h3 { font-family: 'Montserrat', sans-serif; font-size: 0.98rem; font-weight: 700; color: var(--white); } .deploy-card p { font-size: 0.88rem; color: #7aa8bc; font-weight: 300; line-height: 1.65; } /* ── TIP / RESULT CALLOUT ── */ .tip-callout { margin-top: 3rem; background: rgba(0,212,255,0.04); border: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 1.5rem 2rem; display: flex; gap: 1rem; align-items: flex-start; } .tip-callout-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; } .tip-callout p { font-size: 0.92rem; color: #7aa8bc; font-weight: 300; line-height: 1.7; } .tip-callout p strong { color: var(--white); } .result-callout { background: var(--mid); border: 1px solid var(--border); padding: 2rem 2.5rem; margin: 2.5rem 0; position: relative; overflow: hidden; } .result-callout p { margin: 0 !important; color: #7aa8bc !important; } .result-callout strong { color: var(--accent) !important; } /* ── POC / TIMELINE ── */ .poc-section { padding: 6rem 3rem; background: var(--mid2); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; } .poc-section > div:first-child h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1.25rem; } .poc-section > div:first-child p { color: #7aa8bc; font-size: 1rem; font-weight: 300; line-height: 1.85; max-width: 46ch; margin-bottom: 2rem; } .poc-timeline { display: flex; flex-direction: column; gap: 0; } .poc-step { display: grid; grid-template-columns: 60px 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border2); position: relative; } .poc-step:last-child { border-bottom: none; } .poc-step-marker { display: flex; flex-direction: column; align-items: center; gap: 0; } .poc-step-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 10px rgba(0,212,255,0.5); margin-top: 4px; } .poc-step-line { flex: 1; width: 1px; background: var(--border); margin-top: 6px; } .poc-step:last-child .poc-step-line { display: none; } .poc-step-label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 0.25rem; } .poc-step h4 { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.4rem; } .poc-step p { font-size: 0.88rem; color: var(--muted); margin: 0; line-height: 1.6; } /* ── VERTICAL LIST ROWS (used for referral flow / FAQ-style rows) ── */ .rows { margin-top: 3rem; display: grid; gap: 0; border: 1px solid var(--border); } .rows-row { display: grid; grid-template-columns: 260px 1fr; border-bottom: 1px solid var(--border); transition: background 0.2s; } .rows-row:last-child { border-bottom: none; } .rows-row:hover { background: rgba(0,212,255,0.03); } .rows-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; padding: 1.5rem 2rem; border-right: 1px solid var(--border); display: flex; align-items: center; color: var(--accent); } .rows-stat { padding: 1.5rem 2rem; font-size: 0.9rem; color: #7aa8bc; display: flex; align-items: center; font-weight: 300; } /* ── TRUST STRIP ── */ .trust-strip { background: var(--mid2); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); padding: 4rem 3rem; text-align: center; } .trust-strip h3 { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2rem; } .trust-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); max-width: 720px; margin: 0 auto; } .trust-stat { background: var(--mid); padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; align-items: center; } .trust-stat-num { font-family: 'Montserrat', sans-serif; font-size: 2.1rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .trust-stat-label { font-size: 0.8rem; color: var(--muted); font-weight: 300; text-align: center; } /* ── CTA SECTION / STRIP ── */ .cta-section { background: var(--mid2); border-top: 1px solid var(--border); text-align: center; padding: 7rem 3rem; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(200,80,255,0.06) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 30% 80%, rgba(0,212,255,0.05) 0%, transparent 60%); pointer-events: none; } .cta-section .section-title { margin: 0 auto; text-align: center; max-width: none; } .cta-section .section-body { margin: 1.5rem auto 2.5rem; text-align: center; } .cta-section .hero-ctas { justify-content: center; opacity: 1; animation: none; } .cta-strip { background: var(--black); border-top: 1px solid var(--border); padding: 6rem 3rem; text-align: center; position: relative; overflow: hidden; } .cta-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(200,80,255,0.06) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 70% 80%, rgba(0,212,255,0.05) 0%, transparent 60%); pointer-events: none; } .cta-strip h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem; } .cta-strip p { color: #7aa8bc; font-size: 1rem; font-weight: 300; margin-bottom: 2.25rem; max-width: 48ch; margin-left: auto; margin-right: auto; } .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ── DIVIDER ── */ hr { border: none; border-top: 1px solid var(--border); } /* ══════════════════════════════════════════════════════════ CONTACT FORM ══════════════════════════════════════════════════════════ */ .contact-section { padding: 6rem 3rem; border-bottom: 1px solid var(--border); } .contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 7rem; align-items: start; } .contact-info h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1.25rem; } .contact-info p { color: #7aa8bc; font-size: 1rem; font-weight: 300; line-height: 1.85; margin-bottom: 1.25rem; } .contact-info p:last-of-type { margin-bottom: 2rem; } .expect-list { list-style: none; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); } .expect-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border2); transition: background 0.2s; } .expect-item:last-child { border-bottom: none; } .expect-item:hover { background: rgba(0,212,255,0.03); } .expect-icon { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.85rem; color: var(--accent); margin-top: 0.1rem; } .expect-text { font-size: 0.92rem; color: #7aa8bc; font-weight: 300; line-height: 1.65; } .expect-text strong { color: var(--white); font-weight: 500; } .contact-form-wrap { background: var(--mid); border: 1px solid var(--border); padding: 3rem; position: relative; overflow: hidden; } .contact-form-wrap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(0,212,255,0.04) 0%, transparent 60%); pointer-events: none; } .form-title { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .form-subtitle { font-size: 0.88rem; color: var(--muted); font-weight: 300; margin-bottom: 2rem; line-height: 1.6; } .contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: 0.45rem; } .form-group label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .form-group label span { color: var(--accent); margin-left: 2px; } .form-group input, .form-group select, .form-group textarea { background: var(--mid2); border: 1px solid var(--border); color: var(--white); font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 300; padding: 0.75rem 1rem; border-radius: 2px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; width: 100%; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); opacity: 0.7; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: rgba(0,212,255,0.5); box-shadow: 0 0 0 3px rgba(0,212,255,0.07); } .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a8a9f' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .form-group select option { background: var(--mid2); } .form-group textarea { resize: vertical; min-height: 100px; line-height: 1.65; } .intent-group { display: flex; gap: 0; border: 1px solid var(--border); flex-wrap: wrap; } .intent-option { flex: 1; min-width: 120px; position: relative; } .intent-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .intent-option label { display: flex; align-items: center; justify-content: center; padding: 0.7rem 0.75rem; font-size: 0.8rem; font-weight: 500; color: var(--muted); cursor: pointer; border-right: 1px solid var(--border); transition: all 0.2s; text-align: center; letter-spacing: 0; text-transform: none; } .intent-option:last-child label { border-right: none; } .intent-option input[type="radio"]:checked + label { background: rgba(0,212,255,0.08); color: var(--accent); border-color: rgba(0,212,255,0.3); } .form-consent { display: flex; align-items: flex-start; gap: 0.75rem; padding-top: 0.25rem; } .form-consent input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; accent-color: var(--accent); cursor: pointer; } .form-consent label { font-size: 0.82rem; color: var(--muted); font-weight: 300; line-height: 1.6; cursor: pointer; letter-spacing: 0; text-transform: none; } .form-submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 0.5rem; } .form-note { font-size: 0.78rem; color: var(--muted); font-weight: 300; line-height: 1.5; } .form-success { display: none; text-align: center; padding: 3rem 2rem; } .form-success-icon { font-size: 2.5rem; margin-bottom: 1rem; } .form-success h3 { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700; margin-bottom: 0.75rem; } .form-success p { color: #7aa8bc; font-size: 0.95rem; font-weight: 300; line-height: 1.7; } /* ── SCROLL ANIMATIONS ── */ .animate { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .animate.in-view { opacity: 1; transform: translateY(0); } /* ── TABLET (≤ 1024px) ── */ @media (max-width: 1024px) { section, .deploy-section, .poc-section, .table-section, .cta-section, .cta-strip, .contact-section { padding: 5rem 2rem; } .meet { gap: 3rem; } .steps, .steps.steps-4 { grid-template-columns: 1fr 1fr; } .deploy-cards, .deploy-cards.cols-3 { grid-template-columns: 1fr 1fr; } .poc-section { grid-template-columns: 1fr; gap: 3rem; } .contact-layout { grid-template-columns: 1fr; gap: 4rem; } .rows-row { grid-template-columns: 200px 1fr; } } /* ── MOBILE (≤ 767px) ── */ @media (max-width: 767px) { .hero h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); max-width: 100%; } .hero-ctas { flex-direction: column; align-items: flex-start; } .hero-ctas .btn { width: 100%; justify-content: center; } section, .deploy-section, .poc-section, .table-section, .cta-section, .cta-strip, .contact-section, .trust-strip { padding: 4rem 1.25rem; } .section-title { font-size: clamp(1.5rem, 6vw, 2.1rem); max-width: 100%; } .section-body { max-width: 100%; } .meet { grid-template-columns: 1fr; gap: 2rem; } .stat-block { padding: 2rem 1.5rem; } .stat-number { font-size: 2.1rem; } .steps, .steps.steps-4 { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; } .step { padding: 1.75rem 1.5rem; } .deploy-cards, .deploy-cards.cols-3 { grid-template-columns: 1fr; gap: 1rem; } .deploy-card { padding: 1.75rem 1.5rem; } .rows-row { grid-template-columns: 1fr; } .rows-name { border-right: none; border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; font-size: 0.8rem; } .rows-stat { padding: 1rem 1.25rem; font-size: 0.88rem; } .trust-stats { grid-template-columns: 1fr; } .trust-stat { padding: 1.5rem; } .cta-section .hero-ctas { flex-direction: column; align-items: center; } .btn-row { flex-direction: column; align-items: center; } .btn-row .btn { width: 100%; max-width: 320px; justify-content: center; } .contact-form-wrap { padding: 2rem 1.25rem; } .form-row { grid-template-columns: 1fr; } .intent-group { flex-direction: column; } .intent-option label { border-right: none; border-bottom: 1px solid var(--border); } .intent-option:last-child label { border-bottom: none; } } @media (max-width: 380px) { .hero h1 { font-size: 1.85rem; } .stat-number { font-size: 1.9rem; } }