/* ============================================================ BUILD ENOLA - Sales Page Stylesheet Extends shared.css with sales page–specific components. © Sean Gal | enolarevenu.com ============================================================ */ /* Design tokens and shared components are in shared.css Link both files in : shared.css first, then styles.css */ details { cursor: pointer; } /* ============================================================ LAYOUT ============================================================ */ .center { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 24px; } .center-wide { width: 100%; max-width: var(--wide-width); margin: 0 auto; padding: 0 40px; } /* ============================================================ TYPOGRAPHY ============================================================ */ .eyebrow, .label { display: block; font-size: var(--type-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .section-headline { font-family: var(--font-ed); font-size: var(--type-display-lg); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); margin-bottom: 28px; } .section-intro { font-size: 17px; color: var(--text-dim); line-height: 1.65; margin-bottom: 40px; } .section-body { font-size: var(--type-body-lg); color: var(--text-dim); line-height: 1.7; margin-bottom: 20px; } .section-body:last-of-type { margin-bottom: 0; } .punch { color: var(--text) !important; font-weight: 500; } /* ============================================================ BUTTONS ============================================================ */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; background-color: var(--accent); color: #fff; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; padding: 13px 24px; border-radius: 6px; border: none; cursor: pointer; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms; white-space: nowrap; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(184, 92, 56, 0.3); background-color: var(--accent-dark); } .btn-primary:active { transform: scale(0.97); } .btn-lg { font-size: 16px; padding: 16px 32px; } .btn-white { background-color: #fff; color: var(--text); } .btn-white:hover { background-color: var(--bg-tint); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text); font-family: var(--font); font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: 6px; border: 1.5px solid var(--text); cursor: pointer; transition: background-color 200ms, color 200ms; white-space: nowrap; } .btn-secondary:hover { background-color: var(--text); color: var(--bg); } .btn-ghost { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--text-dim); border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: color 200ms, border-color 200ms; white-space: nowrap; } .btn-ghost:hover { color: var(--accent); border-color: var(--accent); } .hero-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .trust { display: block; font-size: 13px; color: var(--text-muted); margin-top: 16px; text-align: center; } .trust--dim { color: rgba(255,255,255,0.35); } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; background-color: rgba(250, 247, 242, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; justify-content: space-between; } .nav-brand { font-family: var(--font-ed); font-size: 17px; font-weight: 700; color: var(--text); } .nav-brand span { color: var(--accent); } /* ============================================================ HERO ============================================================ */ .hero { padding: 80px 0 72px; background-color: var(--bg); overflow: hidden; } .hero-wrap { max-width: 1100px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .hero-copy { max-width: 520px; } .hero-headline { font-family: var(--font-ed); font-size: clamp(40px, 6vw, 68px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); margin-bottom: 22px; } .hero-sub { font-size: var(--type-body-lg); color: var(--text-dim); line-height: 1.65; margin-bottom: 32px; } .hero-trust { margin-top: 16px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.01em; } /* ============================================================ ORG DIAGRAM ============================================================ */ .hero-visual { display: flex; align-items: center; justify-content: center; } .org-diagram { position: relative; width: min(400px, 100%); aspect-ratio: 1; } /* SVG arrow overlay */ .org-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms var(--ease-in) 900ms; } .org-diagram.is-live .org-svg { opacity: 1; } /* Radial division nodes */ .org-node { position: absolute; left: var(--nl); top: var(--nt); width: 20%; aspect-ratio: 1; border-radius: 50%; background: var(--bg-surface); border: 1.5px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; z-index: 2; opacity: 0; transform: scale(0.7); transition: opacity 300ms var(--ease-in) calc(400ms + var(--i) * 80ms), transform 300ms var(--ease-in) calc(400ms + var(--i) * 80ms); } .org-diagram.is-live .org-node { opacity: 1; transform: scale(1); } .org-node--quality { border-color: var(--accent); border-width: 1.5px; } .org-node-num { font-size: clamp(8px, 2.5%, 10px); font-weight: 700; letter-spacing: 0.04em; color: var(--accent); line-height: 1; } .org-node-label { font-size: clamp(7px, 2%, 8px); font-weight: 500; color: var(--text-dim); line-height: 1.2; text-align: center; padding: 0 4%; } .org-node-title { font-size: clamp(6px, 1.8%, 7px); font-weight: 700; letter-spacing: 0.06em; color: var(--accent); opacity: 0.7; line-height: 1; text-align: center; } /* Center node: Enola - renders behind division nodes */ .org-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; z-index: 1; opacity: 0; transition: opacity 500ms var(--ease-in); } .org-diagram.is-live .org-center { opacity: 1; } .org-pulse-ring { position: absolute; inset: -10px; border-radius: 16px; border: 1.5px solid var(--accent); opacity: 0; animation: none; } .org-diagram.is-live .org-pulse-ring { animation: pulseRing 2.4s ease-out infinite; } .org-diagram.is-live .org-pulse-ring--2 { animation: pulseRing 2.4s ease-out 1.2s infinite; } @keyframes pulseRing { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.7); opacity: 0; } } .org-ceo-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; background-color: var(--bg-dark); color: #fff; padding: 14px 24px; border-radius: 10px; min-width: 140px; text-align: center; } .org-ceo-mark { color: var(--accent); opacity: 0.8; display: flex; align-items: center; justify-content: center; font-size: 20px; } .org-ceo-name { font-family: var(--font-ed); font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1; cursor: default; transition: opacity 150ms; } .org-ceo-role { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); } /* Floating memory badge */ .org-memory-badge { position: absolute; bottom: 0; right: -16px; display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); background-color: var(--bg-surface); border: 1px solid var(--border); padding: 5px 10px; border-radius: 100px; opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease-in) 1.4s, transform 400ms var(--ease-in) 1.4s; animation: none; } .org-diagram.is-live .org-memory-badge { opacity: 1; transform: translateY(0); animation: floatBadge 4s ease-in-out 1.8s infinite; } @keyframes floatBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ============================================================ SECTIONS ============================================================ */ .section { padding: 80px 0; border-top: 1px solid var(--border); } .section--tinted { background-color: var(--bg-tint); } .section--dark { background-color: var(--bg-dark); border-top: none; text-align: center; } /* ============================================================ HOOK ============================================================ */ .hook { padding: 80px 0; border-top: 1px solid var(--border); text-align: center; } .hook-text { font-size: var(--type-body-lg); color: var(--text-dim); line-height: 1.7; margin-bottom: 18px; } .hook-punch { font-size: 18px; color: var(--text); font-weight: 500; line-height: 1.5; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); } /* ============================================================ DIVISIONS SECTION ============================================================ */ .divisions-section { padding: 80px 0; } /* CEO card - full width, dark */ .div-ceo-card { display: flex; align-items: center; justify-content: space-between; background-color: var(--bg-dark); color: #fff; padding: 36px 40px; border-radius: 12px; margin-bottom: 16px; overflow: hidden; position: relative; } .div-ceo-left { display: flex; align-items: center; gap: 28px; } .div-num-lg { font-family: var(--font); font-size: 48px; font-weight: 800; letter-spacing: -0.04em; color: rgba(255,255,255,0.15); line-height: 1; flex-shrink: 0; } .div-ceo-text .div-name { font-family: var(--font-ed); font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin-bottom: 6px; } .div-ceo-text .div-desc { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.55; max-width: 440px; } .div-ceo-mark { color: var(--accent); opacity: 0.4; flex-shrink: 0; font-size: 56px; } /* 6-division grid */ .div-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .div-card { background-color: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px 24px; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out), background-color 200ms var(--ease-out); } .div-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(28, 20, 16, 0.08); border-color: var(--accent); background-color: var(--accent-bg); } .div-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; } .div-num { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); } .div-mark { color: var(--text-muted); transition: color 200ms var(--ease-out); flex-shrink: 0; font-size: 20px; } .div-card:hover .div-mark { color: var(--accent); } .div-name { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 8px; } .div-desc { font-size: var(--type-body-md); color: var(--text-dim); line-height: 1.55; } /* ============================================================ FEATURE LIST ============================================================ */ .feature-list { margin-top: 32px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background-color: var(--bg-surface); } .feature-item { padding: 22px 24px; border-bottom: 1px solid var(--border); transition: background-color 150ms var(--ease-out); } .feature-item:last-child { border-bottom: none; } .feature-item:hover { background-color: var(--accent-bg); } .fi-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; } .fi-left { display: flex; align-items: center; gap: 10px; } .fi-mark { display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; width: 28px; height: 28px; background-color: var(--accent-bg); border-radius: 6px; transition: background-color 150ms; font-size: 16px; } .feature-item:hover .fi-mark { background-color: rgba(184, 92, 56, 0.2); } .fi-name { font-size: 15px; font-weight: 600; color: var(--text); } .fi-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); background-color: var(--bg); padding: 3px 8px; border-radius: 100px; border: 1px solid var(--border); } .fi-desc { font-size: var(--type-body-md); color: var(--text-dim); line-height: 1.6; padding-left: 38px; } .product-note { margin-top: 20px; font-size: 13px; color: var(--text-muted); text-align: center; } /* ============================================================ SOCIAL PROOF ============================================================ */ .proof-bar { display: flex; align-items: baseline; gap: 14px; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--border); } .proof-stat { font-family: var(--font-ed); font-size: 56px; font-weight: 700; color: var(--accent); line-height: 1; flex-shrink: 0; } .proof-label { font-size: 17px; color: var(--text-dim); line-height: 1.4; } .founder-quote { border-left: 3px solid var(--accent); padding: 4px 0 4px 28px; margin: 0 0 28px; } .founder-quote p { font-family: var(--font-ed); font-size: 22px; font-weight: 600; line-height: 1.55; color: var(--text); font-style: italic; } .founder-quote footer { font-size: 13px; color: var(--text-muted); margin-top: 16px; font-style: normal; } .proof-note { font-size: 14px; color: var(--text-muted); margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--border); } /* ============================================================ STORY ============================================================ */ .sig { font-size: 14px; color: var(--text-muted); margin-top: 32px; font-style: italic; } /* ============================================================ WHO IT'S FOR ============================================================ */ .yes-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: 8px; } .yes-list li { font-size: 16px; color: var(--text-dim); line-height: 1.5; padding: 18px 0; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; } .yes-list li::before { content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%; background-color: var(--accent); flex-shrink: 0; margin-top: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23FAF7F2' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* Not-for-you list */ .no-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: 32px; } .no-list li { font-size: 15px; color: var(--text-muted); line-height: 1.5; padding: 16px 0; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; } .no-list li::before { content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%; background-color: var(--border); flex-shrink: 0; margin-top: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2' viewBox='0 0 10 2'%3E%3Cpath d='M1 1h8' stroke='%236B5A50' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* Guarantee line */ .guarantee { font-size: 14px; color: rgba(255,255,255,0.55); margin-top: 20px; text-align: center; } /* Tier grid - $49 / $99 */ .tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; } .tier-card { padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); display: flex; flex-direction: column; gap: 10px; position: relative; } .tier-card--accent { border-color: var(--accent); background: var(--text); } .tier-card--accent .tier-price, .tier-card--accent .tier-name { color: #fff; } .tier-card--accent .tier-desc { color: rgba(255,255,255,.7); } .tier-badge { position: absolute; top: -11px; left: 20px; font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bg-surface); background: var(--accent); padding: 3px 10px; border-radius: 20px; } .tier-price { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); line-height: 1; } .tier-name { font-size: 16px; font-weight: 600; color: var(--text); } .tier-desc { font-size: 14px; color: var(--text-dim); line-height: 1.6; flex: 1; } .tier-card .btn-primary { margin-top: 8px; text-align: center; } /* Engine block */ .engine-block { margin: 28px 0 8px; } .engine-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; } .engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .engine-card { border: 1.5px solid var(--border); border-radius: 10px; padding: 18px; background: var(--bg-surface); } .engine-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .engine-tag { font-family: var(--font-mono, monospace); font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 600; } .engine-tag--primary { background: var(--accent-bg); color: var(--accent); } .engine-tag--alt { background: var(--border); color: var(--text-dim); } .engine-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; } /* Tier features list */ .tier-features { list-style: none; padding: 0; margin: 8px 0 12px; display: flex; flex-direction: column; gap: 6px; } .tier-features li { font-size: 13px; color: var(--text-dim); padding-left: 16px; position: relative; line-height: 1.4; } .tier-features li::before { content: '\2022'; position: absolute; left: 0; color: var(--border-dark, #C8B8A8); } .tier-card--accent .tier-features li { color: rgba(255,255,255,.72); } .tier-card--accent .tier-features li::before { color: rgba(255,255,255,.35); } .tier-badge--soft { background: var(--border); color: var(--text-dim); } /* Flow block */ .flow-block { margin-top: 40px; padding: 28px 32px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--bg-surface); } .flow-label { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .flow-text { font-size: 15px; color: var(--text-dim); line-height: 1.7; } .flow-learn-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--accent); border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color 200ms; } .flow-learn-more:hover { border-color: var(--accent); } /* ============================================================ BUY ============================================================ */ .buy-section { text-align: center; } .label--dim { color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.15); } .price-display { font-family: var(--font); font-size: 72px; font-weight: 800; letter-spacing: -0.04em; color: #fff; line-height: 1; margin: 8px 0 12px; } .price-was { display: block; font-size: 22px; font-weight: 600; color: rgba(255,255,255,0.3); text-decoration: line-through; letter-spacing: 0; margin-bottom: 2px; } .countdown-bar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 6px 14px; margin-bottom: 16px; } .countdown-bar i { font-size: 14px; } .countdown-timer { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: #fff; } .countdown-timer.is-expired { color: rgba(255,255,255,0.4); } .price-note { font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 28px; line-height: 1.5; } .promo-box { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 12px 20px; font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 20px; } .promo-box i { font-size: 15px; color: var(--accent); flex-shrink: 0; } .promo-code { font-weight: 700; font-size: 14px; color: #fff; background: rgba(255,255,255,0.12); padding: 2px 8px; border-radius: 4px; letter-spacing: 0.06em; } /* Tier card - strikethrough price */ .tier-price-wrap { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .tier-price-was { font-size: 18px; font-weight: 600; color: var(--text-muted); text-decoration: line-through; } /* Email list section */ .email-form { display: flex; gap: 8px; margin: 24px 0 12px; max-width: 440px; margin-left: auto; margin-right: auto; } .email-input { flex: 1; font-family: var(--font); font-size: 15px; color: var(--text); background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: 6px; padding: 13px 16px; outline: none; transition: border-color 200ms; } .email-input::placeholder { color: var(--text-muted); } .email-input:focus { border-color: var(--accent); } @media (max-width: 560px) { .email-form { flex-direction: column; } .email-input { width: 100%; } } /* ============================================================ PROCESS STEPS ============================================================ */ .steps-list { margin-top: 8px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background-color: var(--bg-surface); } .step { display: flex; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--border); align-items: flex-start; transition: background-color 150ms var(--ease-out); } .step:last-child { border-bottom: none; } .step:hover { background-color: var(--accent-bg); } .step-n { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-bg); border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--accent); flex-shrink: 0; } .step-body strong { display: block; font-size: 15px; color: var(--text); margin-bottom: 3px; } .step-body p { font-size: 14px; color: var(--text-dim); line-height: 1.6; } /* ============================================================ FAQ ============================================================ */ .faq-list { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background-color: var(--bg-surface); } .faq-item { border-bottom: 1px solid var(--border); } .faq-item:last-child { border-bottom: none; } .faq-item summary { list-style: none; padding: 20px 24px; font-size: 15px; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: background-color 150ms, color 150ms; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--text-muted); flex-shrink: 0; transition: transform 200ms var(--ease-out), color 200ms; } .faq-item[open] summary { color: var(--accent); background-color: var(--accent-bg); } .faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); } .faq-item summary:hover { background-color: var(--accent-bg); } .faq-item p { padding: 0 24px 20px; font-size: 15px; color: var(--text-dim); line-height: 1.7; } /* ============================================================ FINAL CTA ============================================================ */ .final-headline { font-family: var(--font-ed); font-size: clamp(28px, 5vw, 44px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: #fff; margin-bottom: 24px; } .final-body { font-size: 17px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 16px; max-width: 480px; margin-left: auto; margin-right: auto; } .section--dark .btn-white { margin-top: 24px; } /* ============================================================ FOOTER ============================================================ */ .footer { background-color: var(--bg-dark); border-top: 1px solid rgba(255,255,255,0.06); padding: 28px 40px; } .footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,0.3); } .footer-brand { cursor: default; transition: color 200ms; color: rgba(255,255,255,0.5); font-family: var(--font-ed); font-size: 15px; letter-spacing: 0.01em; } .footer-brand:hover { color: var(--accent); } .footer-anagram { max-width: 1100px; margin: 10px auto 0; display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.15); font-style: italic; } .anagram-hint { color: var(--accent); font-style: normal; opacity: 0.5; } .anagram-text { letter-spacing: 0.04em; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 500ms var(--ease-in), transform 500ms var(--ease-in); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-item { opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--ease-in) calc(var(--i, 0) * 80ms), transform 400ms var(--ease-in) calc(var(--i, 0) * 80ms); } .reveal-item.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-item, .org-center, .org-node, .org-svg { opacity: 1; transform: none; transition: none; animation: none; } } /* ============================================================ MOBILE STICKY ============================================================ */ .mobile-sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background-color: rgba(250, 247, 242, 0.95); backdrop-filter: blur(8px); border-top: 1px solid var(--border); z-index: 100; transform: translateY(100%); transition: transform 300ms var(--ease-out); } .mobile-sticky.is-visible { transform: translateY(0); } .btn-sticky { width: 100%; justify-content: center; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .hero-wrap { grid-template-columns: 1fr; gap: 56px; padding: 0 24px; } .hero-copy { max-width: 100%; } .hero-visual { justify-content: flex-start; } .org-diagram { width: min(360px, 100%); } .div-grid { grid-template-columns: repeat(2, 1fr); } .center-wide { padding: 0 24px; } } /* ============================================================ PHOSPHOR ICONS - font-based, sized via font-size ============================================================ */ .org-ceo-mark i { font-size: 20px; } .div-ceo-mark i { font-size: 52px; } .div-mark { font-size: 20px; } .fi-mark i { font-size: 15px; } .org-memory-badge i { font-size: 13px; color: var(--accent); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .hero { padding: 48px 0 64px; } .section { padding: 64px 0; } .hook { padding: 64px 0; } .engine-grid { grid-template-columns: 1fr; } .system-what-grid { grid-template-columns: 1fr; } .hero-visual { justify-content: center; } .org-diagram { width: min(340px, 100%); } .org-ceo-inner { min-width: 110px; padding: 12px 18px; } .org-ceo-name { font-size: 18px; } .div-ceo-card { padding: 28px 24px; flex-direction: column; align-items: flex-start; gap: 20px; } .div-ceo-left { gap: 16px; } .div-num-lg { font-size: 36px; } .div-ceo-mark { display: none; } .div-grid { grid-template-columns: 1fr; } .price-display { font-size: 56px; } .mobile-sticky { display: flex; } body { padding-bottom: 72px; } .footer-inner { flex-direction: column; gap: 8px; text-align: center; } .footer { padding: 24px 20px; } .nav-cta { display: none; } .nav-inner { padding: 14px 20px; } } /* ============================================================ SYSTEM OVERVIEW ============================================================ */ .system-section { padding: 96px 0; background: var(--bg-tint); } /* System infrastructure grid */ .system-what-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 40px; margin-bottom: 52px; } .system-what-item { padding: 20px 22px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); } .system-what-name { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: 0.01em; } .system-what-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: 0; } /* Roster layout */ .roster-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; align-items: start; } .roster-col--full { margin-top: 0; } .roster-col-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; } .roster-list { list-style: none; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg-surface); } .roster-item { padding: 20px 24px; border-bottom: 1px solid var(--border); transition: background 180ms var(--ease-out); } .roster-item:last-child { border-bottom: none; } .roster-item:hover { background: var(--accent-bg); } .roster-item--ceo { background: var(--bg-dark); } .roster-item--ceo:hover { background: #2a1e18; } .roster-item--ceo .roster-name { color: #fff; } .roster-item--ceo .roster-role { color: rgba(255,255,255,0.45); } .roster-item--ceo .roster-desc { color: rgba(255,255,255,0.6); } .roster-name { display: inline; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .roster-role { display: inline; font-size: 12px; color: var(--text-muted); margin-left: 8px; } .roster-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin-top: 4px; } @media (max-width: 900px) { .roster-wrap { grid-template-columns: 1fr; gap: 24px; } } /* ============================================================ BEFORE / AFTER ============================================================ */ .ba-section { padding: 96px 0; } .ba-wrap { max-width: 800px; margin: 0 auto; padding: 0 24px; } .ba-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 48px; align-items: start; margin-top: 12px; } .ba-divider { background: var(--border); align-self: stretch; } .ba-label { display: block; font-size: var(--type-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; } .ba-col--before .ba-label { color: var(--text-muted); } .ba-col--after .ba-label { color: var(--accent); } .ba-list { display: flex; flex-direction: column; gap: 14px; } .ba-list li { font-size: 16px; color: var(--text-dim); line-height: 1.5; padding-left: 22px; position: relative; } .ba-col--before .ba-list li::before { content: '×'; position: absolute; left: 0; color: var(--text-muted); font-weight: 600; } .ba-col--after .ba-list li { color: var(--text); } .ba-col--after .ba-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-weight: 600; } @media (max-width: 640px) { .ba-grid { grid-template-columns: 1fr; gap: 32px; } .ba-divider { display: none; } }