/* ================================================================ CO-PUBLIC.CSS -- Crown & Oak Capital Shared stylesheet for all public-facing pages. Theme: data-theme="dark" | data-theme="light" Default: time-based (light 6am-8pm, dark 8pm-6am) Manual override stored in localStorage key: co-theme ================================================================ */ /* ================================================================ GOOGLE FONTS -- loaded by each page's Newsreader | Barlow | Barlow Condensed | JetBrains Mono ================================================================ */ /* ================================================================ DARK THEME ================================================================ */ html[data-theme="dark"] { --bg-primary: #070a0f; --bg-secondary: #0b1019; --bg-surface: #0a0f17; --bg-card: #131924; --bg-panel: rgba(7,10,15,0.97); --text-primary: rgba(242,238,228,0.93); --text-secondary: rgba(242,238,228,0.66); --text-muted: rgba(242,238,228,0.50); --accent: rgba(242, 238, 228, 0.84); --accent-dim: rgba(242, 238, 228, 0.30); --gold-wash: rgba(242, 238, 228, 0.04); --gold-highlight: rgba(242, 238, 228, 0.97); --border: rgba(242, 238, 228, 0.11); --border-hover: rgba(242, 238, 228, 0.26); --live-green: #1dc894; --live-green-dim: rgba(29,200,148,0.15); --sage: #4d7a5f; --error: #c75050; --nav-scrolled-bg: rgba(7,10,15,0.94); --nav-mobile-bg: rgba(7,10,15,0.98); --hero-radial-a: rgba(242, 238, 228, 0.022); --hero-radial-b: rgba(242, 238, 228, 0.014); --hero-radial-c: rgba(242, 238, 228, 0.010); --section-radial: rgba(242, 238, 228, 0.028); --grain-opacity: 0.028; --hud-color: rgba(242,238,228,0.28); --hud-time-color: rgba(242, 238, 228, 0.50); } /* ================================================================ LIGHT THEME ================================================================ */ html[data-theme="light"] { --bg-primary: #f8f5ef; --bg-secondary: #f0ece3; --bg-surface: #ede8df; --bg-card: #ffffff; --bg-panel: #111010; --text-primary: rgba(13,15,20,0.92); --text-secondary: rgba(13,15,20,0.66); --text-muted: rgba(13,15,20,0.48); --accent: rgba(13, 15, 20, 0.84); --accent-dim: rgba(13, 15, 20, 0.34); --gold-wash: rgba(13, 15, 20, 0.055); --gold-highlight: rgba(13, 15, 20, 0.96); --border: rgba(13, 15, 20, 0.11); --border-hover: rgba(13, 15, 20, 0.30); --live-green: #1a8a5f; --live-green-dim: rgba(26,138,95,0.12); --sage: #3d6b50; --error: #b03030; --nav-scrolled-bg: rgba(248,245,239,0.96); --nav-mobile-bg: rgba(248,245,239,0.99); --hero-radial-a: rgba(13, 15, 20, 0.030); --hero-radial-b: rgba(13, 15, 20, 0.020); --hero-radial-c: rgba(13, 15, 20, 0.012); --section-radial: rgba(13, 15, 20, 0.036); --grain-opacity: 0.022; --hud-color: rgba(13,15,20,0.22); --hud-time-color: rgba(13, 15, 20, 0.52); } /* ================================================================ THEME TRANSITION -- smooth swap on toggle ================================================================ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } /* ================================================================ FONT VARIABLES (theme-independent) ================================================================ */ :root { --serif: 'Newsreader', Georgia, serif; --sans: 'Barlow', -apple-system, sans-serif; --condensed: 'Barlow Condensed', 'Barlow', sans-serif; --mono: 'JetBrains Mono', monospace; } /* ================================================================ RESET + BASE ================================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--sans); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; } ::selection { background: var(--accent); color: var(--bg-primary); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* ================================================================ NAV ================================================================ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.25rem 3rem; display: flex; justify-content: space-between; align-items: center; transition: all 0.4s ease; background: transparent; } nav.scrolled { background: var(--nav-scrolled-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 0.85rem 3rem; } .nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text-primary); flex-shrink: 0; } .nav-logo-img { width: 38px; height: auto; display: block; } .nav-logo-text { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; letter-spacing: 0.03em; white-space: nowrap; } .nav-logo-text span { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 2.25rem; list-style: none; margin-left: auto; } .nav-links li { white-space: nowrap; } .nav-links a { text-decoration: none; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--live-green); transition: width 0.3s; } .nav-links a:hover { color: var(--accent); } .nav-links a:hover::after { width: 100%; } .nav-cta { padding: 0.6rem 1.5rem !important; border: 1px solid var(--accent-dim); color: var(--accent) !important; transition: all 0.3s !important; } .nav-cta:hover { background: var(--accent) !important; color: var(--bg-primary) !important; } .nav-cta::after { display: none !important; } .mobile-toggle { display: none; background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 0.5rem; flex-shrink: 0; } .mobile-toggle span { display: block; width: 22px; height: 1.5px; background: var(--text-primary); margin: 5px 0; transition: all 0.3s; } .nav-direct { display: flex; gap: 1.25rem; align-items: center; margin-left: 1.5rem; flex-shrink: 0; } .nav-direct-link { font-size: 0.72rem; color: var(--text-muted); text-decoration: none; letter-spacing: 0.04em; transition: color 0.3s; white-space: nowrap; } .nav-direct-link:hover { color: var(--accent); } /* ================================================================ THEME TOGGLE BUTTON (in nav) ================================================================ */ .theme-toggle { background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: border-color 0.3s, color 0.3s; flex-shrink: 0; margin-left: 1rem; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 14px; height: 14px; pointer-events: none; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* tablet squeeze */ @media (max-width: 1140px) { nav { padding: 1rem 2rem; } nav.scrolled { padding: 0.75rem 2rem; } .nav-links { gap: 1.25rem; } .nav-links a { font-size: 0.72rem; letter-spacing: 0.06em; } .nav-cta { padding: 0.5rem 1rem !important; font-size: 0.72rem !important; } .nav-logo-text { font-size: 1.15rem; } .nav-logo-img { width: 32px; } .nav-direct { margin-left: 1rem; } } /* ================================================================ HERO ================================================================ */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; padding: 6rem 4rem 4rem; background: var(--bg-primary); } .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 28% 52%, var(--hero-radial-a), transparent), radial-gradient(ellipse 40% 55% at 72% 48%, var(--hero-radial-b), transparent); } .hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, var(--hero-radial-c), transparent); animation: heroBreathe 90s ease-in-out infinite; } @keyframes heroBreathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 55fr 45fr; gap: 4rem; align-items: center; max-width: 1400px; margin: 0 auto; width: 100%; } .hero-left { display: flex; flex-direction: column; align-items: flex-start; } .hero-eyebrow { font-family: var(--condensed); font-size: 0.65rem; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; margin-bottom: 2rem; opacity: 0; animation: fadeIn 0.8s ease 0.2s forwards; } .hero-desc { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.65; font-weight: 300; max-width: 480px; opacity: 0; animation: fadeUp 0.8s ease 0.6s forwards; } .hero-ticker-row { display: flex; align-items: center; gap: 0.6em; margin-bottom: 2.5rem; opacity: 0; animation: fadeUp 0.8s ease 0.65s forwards; } .hero-ticker-label { font-family: var(--condensed); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--live-green); flex-shrink: 0; } /* asset ticker -- used inside .hero-ticker-row */ .asset-ticker-outer { position: relative; height: 1.6em; flex: 1; min-width: 0; overflow: visible; } .asset-ticker-item { position: absolute; top: 0; left: 0; right: 0; line-height: 1.6; white-space: nowrap; color: var(--text-secondary); font-size: 1rem; font-weight: 300; will-change: transform, opacity; } .hero-title { font-family: var(--serif); font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 250; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 1.5rem; text-align: left; opacity: 0; animation: fadeUp 0.8s ease 0.4s forwards; will-change: transform, opacity; } .hero-title em { font-style: italic; color: rgba(242,238,228,1.0); } html[data-theme="light"] .hero-title em, html[data-theme="light"] .section-title em { color: rgba(13,15,20,1.0); } .hero-sub-rotate { color: var(--text-secondary); transition: opacity 0.35s ease; } .hero-sub-rotate.fading { opacity: 0; } .hero-cta-group { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s ease 0.8s forwards; } /* hero inline stat strip */ .hero-inline-stats { display: flex; align-items: center; gap: 0.65rem; margin-top: 1.75rem; font-family: var(--condensed); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } .his-sep { color: var(--accent-dim); } /* asset ticker */ .hero-sub { font-size: 1rem; color: var(--text-muted); margin-bottom: 2.5rem; line-height: 1.6; font-weight: 300; letter-spacing: 0.02em; display: flex; align-items: center; gap: 0.55em; flex-wrap: nowrap; opacity: 0; animation: fadeUp 0.8s ease 0.6s forwards; } .hero-sub-prefix { white-space: nowrap; flex-shrink: 0; } .asset-ticker-outer { position: relative; height: 1.6em; flex: 1; min-width: 0; overflow: visible; } .asset-ticker-item { position: absolute; top: 0; left: 0; right: 0; line-height: 1.6; white-space: nowrap; color: var(--text-secondary); will-change: transform, opacity; } /* hero panel -- always dark regardless of page theme */ .hero-panel { position: relative; overflow: hidden; border: 1px solid rgba(242, 238, 228, 0.08); background: var(--bg-panel); padding: 2rem; opacity: 0; animation: fadeUp 0.8s ease 0.7s forwards; box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.10); transition: box-shadow 0.35s ease; } html[data-theme="light"] .hero-panel { border-color: rgba(242, 238, 228, 0.14); box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 12px 40px rgba(0,0,0,0.22), 0 32px 80px rgba(0,0,0,0.16), inset 0 1px 0 rgba(242, 238, 228, 0.08); } .hero-panel-glow { position: absolute; inset: -1px; pointer-events: none; z-index: 2; border: 1px solid transparent; background: linear-gradient(var(--bg-panel), var(--bg-panel)) padding-box, radial-gradient( circle 180px at var(--px, -200px) var(--py, -200px), rgba(242, 238, 228, 0.42), transparent 70% ) border-box; transition: background 0.05s linear; } html[data-theme="light"] .hero-panel-glow { background: linear-gradient(var(--bg-panel), var(--bg-panel)) padding-box, radial-gradient( circle 180px at var(--px, -200px) var(--py, -200px), rgba(242, 238, 228, 0.48), transparent 70% ) border-box; } html[data-theme="light"] .hero-panel-surface { background: radial-gradient( circle 280px at var(--px, -300px) var(--py, -300px), rgba(242, 238, 228, 0.07), transparent 60% ); } .hero-panel-surface { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( circle 280px at var(--px, -300px) var(--py, -300px), rgba(242, 238, 228, 0.05), transparent 60% ); } .hero-panel-scan { position: absolute; left: 0; right: 0; height: 80px; pointer-events: none; z-index: 1; background: linear-gradient( to bottom, transparent, rgba(242, 238, 228, 0.030) 35%, rgba(242, 238, 228, 0.055) 50%, rgba(242, 238, 228, 0.030) 65%, transparent ); animation: panelScan 11s linear infinite; } html[data-theme="light"] .hero-panel-scan { background: linear-gradient( to bottom, transparent, rgba(242, 238, 228, 0.040) 35%, rgba(242, 238, 228, 0.070) 50%, rgba(242, 238, 228, 0.040) 65%, transparent ); } @keyframes panelScan { 0% { transform: translateY(-80px); } 100% { transform: translateY(520px); } } .hp-corner { position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 3; } .hp-corner::before, .hp-corner::after { content: ''; position: absolute; background: var(--accent); opacity: 0.45; } .hp-corner.tl { top: -1px; left: -1px; } .hp-corner.tl::before { top: 0; left: 0; width: 14px; height: 1px; } .hp-corner.tl::after { top: 0; left: 0; width: 1px; height: 14px; } .hp-corner.tr { top: -1px; right: -1px; } .hp-corner.tr::before { top: 0; right: 0; width: 14px; height: 1px; } .hp-corner.tr::after { top: 0; right: 0; width: 1px; height: 14px; } .hp-corner.bl { bottom: -1px; left: -1px; } .hp-corner.bl::before { bottom: 0; left: 0; width: 14px; height: 1px; } .hp-corner.bl::after { bottom: 0; left: 0; width: 1px; height: 14px; } .hp-corner.br { bottom: -1px; right: -1px; } .hp-corner.br::before { bottom: 0; right: 0; width: 14px; height: 1px; } .hp-corner.br::after { bottom: 0; right: 0; width: 1px; height: 14px; } .hero-panel-body { position: relative; z-index: 2; } .hero-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(242, 238, 228, 0.12); } .hero-panel-label { font-family: var(--condensed); font-size: 0.62rem; letter-spacing: 0.22em; color: rgba(242,238,228,0.58); text-transform: uppercase; } .hero-panel-live { font-family: var(--condensed); font-size: 0.6rem; letter-spacing: 0.18em; color: #1dc894; display: flex; align-items: center; gap: 0.45rem; } .hero-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #1dc894; animation: heroLivePulse 2.4s ease infinite; } @keyframes heroLivePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(29,200,148,0.4); } 50% { opacity: 0.3; box-shadow: 0 0 0 4px rgba(29,200,148,0); } } .hero-panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; margin-bottom: 2rem; } .hero-stat-value { font-family: var(--serif); font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 260; color: rgba(242,238,228,0.93); line-height: 1; margin-bottom: 0.45rem; font-variant-numeric: tabular-nums; } .hero-stat-value .unit { font-size: 0.55em; color: rgba(242,238,228,0.62); margin-left: 0.06em; } .hero-stat-label { font-family: var(--condensed); font-size: 0.57rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242,238,228,0.54); } .hero-panel-divider { width: 100%; height: 1px; background: rgba(242, 238, 228, 0.08); margin-bottom: 1rem; } .hero-panel-footer { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 0.52rem; color: rgba(242,238,228,0.40); letter-spacing: 0.09em; padding-top: 0.75rem; } .hero-scroll { position: absolute; bottom: 2.5rem; left: 4rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0; animation: fadeIn 1s ease 1.2s forwards; } .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--live-green), transparent); opacity: 0.5; animation: scrollPulse 2s ease infinite; } /* ================================================================ HEADLINE STATS ================================================================ */ .headline-stats { background: #040608; border-top: 1px solid rgba(242,238,228,0.07); border-bottom: 1px solid rgba(242,238,228,0.07); position: relative; } .headline-live-tag { position: absolute; top: 0.75rem; right: 1.25rem; display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.15em; color: var(--live-green); opacity: 0; transition: opacity 0.6s ease; } .headline-live-tag.active { opacity: 1; } .headline-live-tag::before { content: ''; width: 4px; height: 4px; background: var(--live-green); border-radius: 50%; flex-shrink: 0; animation: liveDotPulse 1.5s ease-in-out infinite; } .headline-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); } .headline-card { padding: 2.5rem 1.5rem; text-align: center; border-right: 1px solid rgba(242,238,228,0.07); } .headline-card:last-child { border-right: none; } .headline-num { font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 220; color: rgba(242,238,228,0.93); line-height: 1; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; } .headline-num .unit { font-size: 0.5em; color: var(--live-green); font-weight: 400; } .headline-label { font-family: var(--condensed); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,238,228,0.42); font-weight: 500; } /* ================================================================ COMMON SECTION ELEMENTS ================================================================ */ section { padding: 6rem 3rem; } section.section-secondary { padding: 4.5rem 3rem; } .section-container { max-width: 1200px; margin: 0 auto; } .section-eyebrow { font-family: var(--condensed); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .section-num { font-family: var(--mono); font-size: 0.7rem; color: var(--accent); font-weight: 500; margin-right: 0.5rem; } .section-title em { font-style: italic; color: rgba(242,238,228,1.0); } .section-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 230; line-height: 1.12; margin-bottom: 1.25rem; } .section-desc { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; max-width: 600px; font-weight: 300; margin-bottom: 2.5rem; } /* ================================================================ TRUST STRIP ================================================================ */ .trust-strip { padding: 2.25rem 3rem; border-bottom: 1px solid var(--border); background: var(--bg-primary); overflow: hidden; } .trust-strip-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 2rem; flex-wrap: wrap; font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } .trust-strip-inner span { white-space: nowrap; } .trust-sep { color: var(--accent-dim); } @media (min-width: 769px) { .trust-strip-inner { display: flex !important; flex-direction: row !important; white-space: nowrap !important; flex-wrap: nowrap !important; gap: 2.5rem !important; animation: tickerScroll 32s linear infinite; width: max-content; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } } /* ================================================================ BUTTONS ================================================================ */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 2.25rem; background: var(--accent); color: var(--bg-primary); text-decoration: none; font-family: var(--condensed); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; } .btn-primary:hover { background: var(--text-primary); } .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 2.25rem; background: transparent; color: var(--text-secondary); text-decoration: none; font-family: var(--condensed); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--border-hover); cursor: pointer; position: relative; overflow: hidden; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1px; background-position: bottom left; background-repeat: no-repeat; transition: color 0.3s, border-color 0.3s, background-size 0.3s ease !important; } .btn-secondary:hover { color: var(--accent); border-color: var(--accent-dim); background-size: 100% 1px; } /* shine sweep */ .btn-primary::after, .btn-secondary::after { content: ''; position: absolute; top: -50%; left: -80%; width: 50%; height: 200%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%); transform: skewX(-15deg); transition: left 0.5s cubic-bezier(0.22,1,0.36,1); pointer-events: none; } .btn-primary:hover::after, .btn-secondary:hover::after { left: 130%; } /* ================================================================ PILLAR CARDS (Why section) ================================================================ */ .pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .pillar-card { background: var(--bg-card); border: 1px solid var(--border); padding: 2.25rem 1.75rem; transition: all 0.4s ease; position: relative; overflow: hidden; } .pillar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--live-green); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .pillar-card:hover::before { transform: scaleX(1); } .pillar-card:hover { border-color: var(--border-hover); } .pillar-icon { width: 40px; height: 40px; margin-bottom: 1.5rem; color: var(--accent); } .pillar-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; margin-bottom: 0.75rem; letter-spacing: -0.01em; } .pillar-text { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; font-weight: 300; } /* ================================================================ CASE STUDY ================================================================ */ #casestudy { background: #040608; border-top: 1px solid rgba(242,238,228,0.07); border-bottom: 1px solid rgba(242,238,228,0.07); } #casestudy { color: rgba(242,238,228,0.93); } #casestudy .section-eyebrow { color: rgba(242,238,228,0.84); } #casestudy .section-title { color: rgba(242,238,228,0.93); } #casestudy .section-title em { color: rgba(242,238,228,1.0); } #casestudy .section-desc { color: rgba(242,238,228,0.66); } #casestudy .case-meta-label { color: rgba(242,238,228,0.50); } #casestudy .case-meta-value { color: rgba(242,238,228,0.93); } #casestudy .case-meta-row { border-bottom-color: rgba(242,238,228,0.09); } #casestudy .case-narrative { background: rgba(242,238,228,0.04); border-color: rgba(242,238,228,0.10); } #casestudy .case-narrative h3 { color: rgba(242,238,228,0.93); } #casestudy .case-narrative p { color: rgba(242,238,228,0.66); } #casestudy .case-tag { color: rgba(242,238,228,0.84); border-color: rgba(242,238,228,0.22); } #casestudy .activity-card { background: rgba(242,238,228,0.03); border-color: rgba(242,238,228,0.09); } #casestudy .activity-card:hover { background: rgba(242,238,228,0.06); border-color: rgba(242,238,228,0.18); } #casestudy .activity-market { color: rgba(242,238,228,0.93); } #casestudy .activity-detail { color: rgba(242,238,228,0.50); } #casestudy .activity-status.status-execution { color: rgba(242,238,228,0.84); background: transparent; border: 1px solid rgba(242,238,228,0.22); } #casestudy .activity-status.status-review { color: rgba(242,238,228,0.50); background: transparent; border: 1px solid rgba(242,238,228,0.12); } #casestudy .recent-activity { border-top-color: rgba(242,238,228,0.09); } #casestudy .verified-badge { color: var(--live-green); } .case-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; } .case-meta { display: flex; flex-direction: column; gap: 1.5rem; } .case-meta-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--border); } .case-meta-row:last-child { border-bottom: none; } .case-meta-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 400; } .case-meta-value { font-family: var(--mono); font-size: 0.88rem; font-weight: 500; color: var(--text-primary); } .case-narrative { background: var(--bg-card); border: 1px solid var(--border); padding: 1.75rem; position: relative; } .case-narrative::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--live-green); } .case-narrative h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; margin-bottom: 0.75rem; } .case-narrative p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; font-weight: 300; margin-bottom: 0.65rem; } .case-narrative p:last-of-type { margin-bottom: 0; } .case-tag { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); background: transparent; border: 1px solid var(--border-hover); padding: 0.3rem 0.75rem; margin-top: 0.5rem; } .recent-activity { margin-top: 4rem; border-top: 1px solid var(--border); padding-top: 3rem; } .activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; } .activity-card { background: var(--bg-card); border: 1px solid var(--border); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; transition: border-color 0.3s, background 0.3s; } .activity-card:hover { border-color: var(--border-hover); background: rgba(242,238,228,0.04); } .activity-info { display: flex; flex-direction: column; gap: 0.15rem; } .activity-market { font-size: 0.9rem; font-weight: 500; } .activity-detail { font-size: 0.75rem; color: var(--text-muted); } .activity-status { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.65rem; } .status-available { color: var(--live-green); background: var(--live-green-dim); } .status-execution { color: var(--text-primary); background: transparent; border: 1px solid var(--border-hover); } .status-review { color: var(--text-secondary); background: rgba(128,120,110,0.08); } /* ================================================================ PIPELINE ================================================================ */ #pipeline { background: var(--bg-secondary); } .pipeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 4rem; } .pipeline-block { background: var(--bg-card); border: 1px solid var(--border); padding: 2rem 1.75rem; border-left: 2px solid var(--border-hover); } .pipeline-block h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; margin-bottom: 1.25rem; } .stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .stat-row:last-child { border-bottom: none; } .stat-label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 300; } .stat-value { font-family: var(--mono); font-size: 0.88rem; font-weight: 500; color: var(--text-primary); } /* ================================================================ TRACK RECORD ================================================================ */ .track-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; } .track-card { background: var(--bg-card); border: 1px solid var(--border); padding: 2rem; position: relative; overflow: hidden; } .track-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; } .track-card.track-2025::before { background: var(--border-hover); } .track-card.track-2026::before { background: var(--live-green); } .track-year { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.6rem; } .track-2025 .track-year { color: var(--text-secondary); } .track-2026 .track-year { color: var(--live-green); } .live-dot { width: 6px; height: 6px; background: var(--live-green); border-radius: 50%; animation: livePulse 2s ease-in-out infinite; } .live-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.15em; color: var(--live-green); background: var(--live-green-dim); border: 1px solid var(--live-green); padding: 0.15rem 0.5rem; animation: liveBlink 1.5s ease-in-out infinite; } .live-badge::before { content: ''; width: 5px; height: 5px; background: var(--live-green); border-radius: 50%; flex-shrink: 0; animation: liveDotPulse 1.5s ease-in-out infinite; } @keyframes liveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes liveDotPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--live-green-dim); } 50% { box-shadow: 0 0 0 4px transparent; } } @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .track-stats { display: flex; flex-direction: column; gap: 1rem; } .track-stat { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .track-stat:last-child { border-bottom: none; padding-bottom: 0; } .track-stat-label { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .track-stat-value { font-family: var(--serif); font-size: 1.15rem; font-weight: 300; color: var(--text-primary); font-variant-numeric: tabular-nums; } .track-2025 .track-stat-value { color: var(--text-primary); } .track-2026 .track-stat-value { color: var(--live-green); } .track-stat-value.loading { color: var(--text-muted); font-size: 0.8rem; font-weight: 400; } /* ================================================================ MANDATE BARS / CAPITAL NETWORK ================================================================ */ .capital-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; margin-bottom: 3rem; } .capital-grid .pillar-card { text-align: center; padding: 2rem; } .mandate-list { display: flex; flex-direction: column; gap: 0.85rem; } .mandate-row { display: grid; grid-template-columns: 160px 1fr 55px; align-items: center; gap: 1rem; } .mandate-name { font-size: 0.88rem; font-weight: 500; color: var(--text-primary); } .mandate-bar-bg { height: 6px; background: rgba(242,238,228,0.10); overflow: hidden; } html[data-theme="light"] .mandate-bar-bg { background: rgba(13,15,20,0.10); } .mandate-bar-fill { height: 100%; background: var(--accent); transition: width 1s ease; } .mandate-bar-fill.sage { background: var(--sage); } .mandate-bar-fill.dark { background: var(--text-primary); } .mandate-bar-fill.muted { background: var(--text-muted); } .mandate-pct { font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted); text-align: right; } /* ================================================================ PROCESS ================================================================ */ #process { background: var(--bg-primary); } .process-header { text-align: center; margin-bottom: 5rem; } .process-header .section-desc { margin: 0 auto; } .process-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .process-timeline::before { content: ''; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-dim), var(--accent-dim), transparent); } .process-step { text-align: center; padding: 0 1.5rem; position: relative; } .step-number { width: 56px; height: 56px; border: 1px solid var(--accent-dim); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.75rem; font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--accent); background: var(--bg-primary); position: relative; z-index: 1; transition: all 0.3s; } .process-step:hover .step-number { background: var(--live-green); color: var(--bg-primary); border-color: var(--live-green); } .step-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; margin-bottom: 0.65rem; } .step-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.65; font-weight: 300; } /* ================================================================ INTEL / MARKETS ================================================================ */ #intel { background: var(--bg-secondary); } .intel-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-bottom: 4rem; } .intel-left .section-desc { margin-bottom: 2rem; } .intel-features { display: flex; flex-direction: column; gap: 1.25rem; } .intel-feature { display: flex; gap: 1rem; align-items: flex-start; } .intel-feature-icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; } .intel-feature-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; font-weight: 300; } .intel-feature-text strong { color: var(--text-primary); font-weight: 500; } .intel-right { display: flex; flex-direction: column; gap: 1.25rem; } .market-card { background: var(--bg-card); border: 1px solid var(--border); padding: 1.5rem 1.75rem; display: flex; justify-content: space-between; align-items: center; transition: border-color 0.3s, background 0.3s; } .market-card:hover { border-color: var(--border-hover); background: rgba(242,238,228,0.04); } .market-name-text { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; margin-bottom: 0.2rem; } .market-detail { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.05em; } .market-stat { text-align: right; } .market-stat-value { font-family: var(--mono); font-size: 1.1rem; color: var(--accent); font-weight: 500; } .market-stat-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .deal-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); overflow: hidden; margin-top: 3rem; } .deal-profile-item { background: var(--bg-card); padding: 1.5rem 1.75rem; } .dp-label { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; font-weight: 500; } .dp-value { font-size: 0.92rem; color: var(--text-primary); font-weight: 500; } .grade-bars { margin-top: 3rem; } /* ================================================================ TEAM ================================================================ */ #team { background: var(--bg-primary); border-top: 1px solid var(--border); } .team-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; } .team-card { background: var(--bg-card); border: 1px solid var(--border); padding: 2.5rem 2rem; display: flex; gap: 1.75rem; align-items: flex-start; transition: all 0.3s; } .team-card:hover { border-color: var(--border-hover); } .team-avatar { width: 72px; height: 72px; flex-shrink: 0; background: var(--bg-secondary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--accent); } .team-info { flex: 1; } .team-name { font-family: var(--serif); font-size: 1.25rem; font-weight: 420; margin-bottom: 0.2rem; letter-spacing: -0.01em; } .team-role { font-family: var(--condensed); font-size: 0.72rem; color: var(--accent); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.4rem; } .team-credential { font-family: var(--condensed); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.85rem; } .team-bio { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; font-weight: 300; margin-bottom: 1rem; } .team-link { font-size: 0.78rem; color: var(--text-muted); text-decoration: none; letter-spacing: 0.05em; transition: color 0.3s; display: inline-flex; align-items: center; gap: 0.4rem; } .team-link:hover { color: var(--accent); } .team-link svg { width: 14px; height: 14px; } /* ================================================================ APPROACH ================================================================ */ #approach { background: var(--bg-secondary); } .approach-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .client-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 4rem; } .client-card { background: var(--bg-card); border: 1px solid var(--border); padding: 2.25rem 1.75rem; transition: all 0.3s; } .client-card:hover { border-color: var(--border-hover); } .client-card-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; margin-bottom: 1rem; color: var(--text-primary); letter-spacing: -0.01em; } .client-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .client-list li { font-size: 0.85rem; color: var(--text-secondary); font-weight: 300; padding-left: 1rem; position: relative; } .client-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 4px; height: 1px; background: var(--accent-dim); } /* ================================================================ DEAL ROOM ================================================================ */ .dealroom { background: var(--bg-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; position: relative; overflow: hidden; } .dealroom::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 50% at 50% 30%, var(--section-radial), transparent); } .dealroom .section-container { position: relative; z-index: 1; } .dealroom-lock { margin-bottom: 1.5rem; color: var(--text-muted); } .dealroom-stats { display: flex; justify-content: center; gap: 3.5rem; margin-bottom: 2rem; flex-wrap: wrap; } .dealroom-stat-num { font-family: var(--serif); font-size: 1.8rem; font-weight: 250; color: var(--text-primary); line-height: 1; margin-bottom: 0.35rem; font-variant-numeric: tabular-nums; } .dealroom-stat-num .unit { font-size: 0.55em; color: var(--accent); } .dealroom-stat-label { font-family: var(--condensed); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; } .dealroom-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; max-width: 540px; margin: 0 auto 2.5rem; font-weight: 300; } .dealroom-cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .dealroom-live { font-family: var(--condensed); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 1.5rem; font-weight: 500; } .dealroom-live::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--sage); border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; } /* ================================================================ CONTACT ================================================================ */ #contact { background: var(--bg-primary); text-align: center; position: relative; overflow: hidden; } #contact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--section-radial), transparent); } .contact-content { position: relative; z-index: 1; } .contact-title { font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 3.5rem); font-weight: 230; line-height: 1.12; margin-bottom: 1.25rem; } .contact-desc { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; max-width: 550px; margin: 0 auto 2.5rem; font-weight: 300; } .contact-form { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-input { background: var(--bg-card); border: 1px solid var(--border); padding: 0.85rem 1.15rem; color: var(--text-primary); font-family: var(--sans); font-size: 0.88rem; transition: border-color 0.3s; outline: none; width: 100%; } .form-input::placeholder { color: var(--text-muted); } .form-input:focus { border-color: var(--accent-dim); } .form-submit { margin-top: 0.5rem; } .sms-consent-block { background: var(--gold-wash); border: 1px solid var(--border); padding: 0.85rem 1rem; margin-top: 0.25rem; } .sms-consent-label { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; } .sms-consent-checkbox { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; } .sms-consent-text { font-size: 0.72rem; color: var(--text-muted); line-height: 1.55; font-weight: 300; } .sms-consent-text a { color: var(--accent-dim); text-decoration: underline; transition: color 0.3s; } .sms-consent-text a:hover { color: var(--accent); } .form-status { font-size: 0.82rem; margin-top: 0.5rem; min-height: 1.5em; } .form-status.success { color: var(--sage); } .form-status.error { color: var(--error); } .contact-note { margin-top: 1.25rem; font-size: 0.75rem; color: var(--text-muted); } .contact-direct { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted); font-weight: 300; } .contact-direct a { color: var(--accent-dim); text-decoration: none; transition: color 0.3s; } .contact-direct a:hover { color: var(--accent); } /* ================================================================ MANDATE BUILDER ================================================================ */ .mandate-builder { max-width: 540px; margin: 0 auto; text-align: left; display: none; opacity: 0; } .mandate-builder.visible { display: block; animation: mandateReveal 0.6s ease forwards; } @keyframes mandateReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .mandate-divider { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 2rem; color: var(--text-muted); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; } .mandate-divider::before, .mandate-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .mandate-intro { text-align: center; margin-bottom: 2rem; } .mandate-intro h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.5rem; } .mandate-intro p { font-size: 0.88rem; color: var(--text-secondary); font-weight: 300; line-height: 1.6; } .role-toggle { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.65rem; margin-bottom: 2rem; } .role-btn { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.1rem 0.75rem; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; transition: all 0.3s; text-align: center; } .role-btn:hover { border-color: var(--accent-dim); } .role-btn.active { border-color: var(--border-hover); background: rgba(242,238,228,0.05); } .role-btn .role-icon-svg { width: 22px; height: 22px; color: var(--text-muted); transition: color 0.3s; margin-bottom: 0.2rem; } .role-btn .role-label { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.02em; } .role-btn .role-sub { font-size: 0.68rem; color: var(--text-muted); font-weight: 300; } .role-btn.active .role-icon-svg { color: var(--accent); } .role-panel { display: none; } .role-panel.active { display: block; } .mandate-group { margin-bottom: 1.5rem; } .mandate-group-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.65rem; } .mandate-options { display: flex; flex-wrap: wrap; gap: 0.5rem; } .mandate-chip { display: inline-flex; align-items: center; padding: 0.5rem 1rem; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; font-size: 0.8rem; color: var(--text-secondary); transition: all 0.25s; user-select: none; } .mandate-chip:hover { border-color: var(--accent-dim); color: var(--text-primary); } .mandate-chip.selected { border-color: var(--border-hover); color: var(--text-primary); background: rgba(242,238,228,0.07); } .mandate-chip input { display: none; } .mandate-text-input { background: var(--bg-card); border: 1px solid var(--border); padding: 0.75rem 1rem; color: var(--text-primary); font-family: var(--sans); font-size: 0.85rem; transition: border-color 0.3s; outline: none; width: 100%; } .mandate-text-input::placeholder { color: var(--text-muted); } .mandate-text-input:focus { border-color: var(--accent-dim); } .mandate-notes { background: var(--bg-card); border: 1px solid var(--border); padding: 0.85rem 1.15rem; color: var(--text-primary); font-family: var(--sans); font-size: 0.88rem; transition: border-color 0.3s; outline: none; width: 100%; min-height: 80px; resize: vertical; } .mandate-notes::placeholder { color: var(--text-muted); } .mandate-notes:focus { border-color: var(--accent-dim); } .mandate-submit-wrap { margin-top: 1.75rem; text-align: center; } .mandate-skip { display: block; margin: 1rem auto 0; background: none; border: none; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; font-family: var(--sans); transition: color 0.3s; } .mandate-skip:hover { color: var(--text-secondary); } /* ================================================================ FOOTER ================================================================ */ footer { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 3rem; } .footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; } .footer-left { display: flex; flex-direction: column; gap: 0.5rem; } .footer-brand { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; color: var(--text-primary); } .footer-brand span { color: var(--accent); } .footer-copy { font-size: 0.75rem; color: var(--text-muted); } .footer-address { font-size: 0.72rem; color: var(--text-muted); font-weight: 300; } .footer-coords { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em; color: var(--accent-dim); text-transform: uppercase; margin-top: 0.2rem; } .footer-disclaimer { font-size: 0.68rem; color: var(--text-muted); max-width: 500px; line-height: 1.6; opacity: 0.7; margin-top: 0.25rem; } .footer-right { display: flex; gap: 3rem; } .footer-col h4 { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 0.75rem; } .footer-col-links { display: flex; flex-direction: column; gap: 0.4rem; list-style: none; } .footer-col-links a { font-size: 0.78rem; color: var(--text-muted); text-decoration: none; letter-spacing: 0.03em; transition: color 0.3s; font-weight: 300; } .footer-col-links a:hover { color: var(--accent); } /* ================================================================ ANIMATIONS ================================================================ */ @keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes scrollPulse { 0%,100% { opacity:0.3; } 50% { opacity:1; } } .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.95s cubic-bezier(0.16,1,0.3,1), transform 0.95s cubic-bezier(0.16,1,0.3,1) !important; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ================================================================ PROPTECH ENHANCEMENT LAYER ================================================================ */ /* reticle corners */ .reticle { position: relative; } .reticle::before, .reticle::after, .reticle > .rc-bl, .reticle > .rc-br { content: ''; position: absolute; pointer-events: none; z-index: 3; } .reticle::before { top: -1px; left: -1px; width: 14px; height: 1px; background: var(--accent-dim); transition: opacity 0.3s; } .reticle::after { top: -1px; left: -1px; width: 1px; height: 14px; background: var(--accent-dim); transition: opacity 0.3s; } .reticle > .rc-bl { bottom: -1px; left: -1px; width: 14px; height: 1px; background: var(--accent-dim); transition: opacity 0.3s; } .reticle > .rc-br { bottom: -1px; right: -1px; width: 14px; height: 1px; background: var(--accent-dim); transition: opacity 0.3s; } .reticle > .rc-bl::after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 14px; background: var(--accent-dim); } .reticle > .rc-br::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 14px; background: var(--accent-dim); } .reticle > .rc-tr { top: -1px; right: -1px; position: absolute; width: 14px; height: 1px; background: var(--accent-dim); pointer-events: none; } .reticle > .rc-tr::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 14px; background: var(--accent-dim); } .reticle:hover::before, .reticle:hover::after, .reticle:hover > .rc-bl, .reticle:hover > .rc-br, .reticle:hover > .rc-tr { opacity: 1; filter: brightness(1.8); } /* section dividers */ .section-divider { width: 100%; height: 1px; background: var(--border); position: relative; margin: 0; } .section-divider .divider-label { position: absolute; top: -0.6em; left: 50%; transform: translateX(-50%); background: var(--bg-primary); padding: 0 1rem; font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.2em; color: var(--accent-dim); white-space: nowrap; text-transform: uppercase; } .section-divider.on-secondary .divider-label { background: var(--bg-secondary); } .section-divider.on-card .divider-label { background: var(--bg-card); } /* grain texture */ body::after { content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px 256px; } /* HUD */ #co-hud { position: fixed; bottom: 2rem; right: 2.5rem; z-index: 90; pointer-events: none; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; color: var(--hud-color); text-align: right; line-height: 1.8; text-transform: uppercase; } #hud-time { color: var(--hud-time-color); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1024px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } .process-timeline { grid-template-columns: repeat(2, 1fr); gap: 3rem; } .process-timeline::before { display: none; } .headline-grid { grid-template-columns: repeat(3, 1fr); } .headline-card:nth-child(3) { border-right: none; } .headline-card:nth-child(4) { border-top: 1px solid var(--border); } .headline-card:nth-child(5) { border-top: 1px solid var(--border); border-right: none; } .intel-layout, .approach-layout, .case-layout { grid-template-columns: 1fr; gap: 3rem; } .pipeline-grid { grid-template-columns: 1fr; } .team-layout { grid-template-columns: 1fr; } .client-types { grid-template-columns: repeat(2, 1fr); } .activity-grid { grid-template-columns: 1fr; } .capital-grid { grid-template-columns: repeat(2, 1fr); } .track-layout { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .hero { padding: 5rem 1.5rem 3rem; } .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } .hero-panel { display: none; } .hero-scroll { left: 50%; transform: translateX(-50%); } } @media (max-width: 768px) { nav { padding: 1rem 1.25rem; } nav.scrolled { padding: 0.75rem 1.25rem; } .nav-links { display: none; } .nav-direct { display: flex; margin-left: auto; margin-right: 0.75rem; } .mobile-toggle { display: block; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--nav-mobile-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 1.5rem 1.5rem 2rem; gap: 0; border-bottom: 1px solid var(--border); } .nav-links.open li { border-bottom: 1px solid var(--border); } .nav-links.open li:last-child { border-bottom: none; padding-top: 0.75rem; } .nav-links.open a { display: block; padding: 0.85rem 0; font-size: 0.85rem; letter-spacing: 0.1em; } .nav-links.open a::after { display: none; } .nav-links.open .nav-cta { display: block; text-align: center; margin-top: 0.25rem; padding: 0.85rem 1.5rem !important; background: var(--accent); color: var(--bg-primary) !important; border-color: var(--accent); font-size: 0.82rem !important; } .nav-logo-text { font-size: 1.1rem; } .nav-logo-img { width: 30px; } section { padding: 4.5rem 1.5rem; } section.section-secondary { padding: 3rem 1.5rem; } .hero { padding: 5rem 1.5rem 3rem; } .pillars-grid { grid-template-columns: 1fr; } .process-timeline { grid-template-columns: 1fr; gap: 2.5rem; } .headline-grid { grid-template-columns: repeat(2, 1fr); } .headline-card { border-bottom: 1px solid var(--border); } .headline-card:last-child { border-bottom: none; } .headline-card:nth-child(2n) { border-right: none; } .headline-card:nth-child(2n+1) { border-right: 1px solid var(--border); } .headline-card:nth-child(3) { border-right: 1px solid var(--border); } .headline-card:nth-child(4) { border-top: none; } .headline-card:nth-child(5) { border-top: none; } .client-types { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .deal-profile-grid { grid-template-columns: 1fr; } .mandate-row { grid-template-columns: 120px 1fr 50px; } .stat-row { flex-direction: column; gap: 0.2rem; align-items: flex-start; } .stat-value { align-self: flex-end; } .team-card { flex-direction: column; align-items: center; text-align: center; } .footer-content { flex-direction: column; text-align: center; } .footer-right { flex-direction: column; gap: 1.5rem; } .footer-disclaimer { text-align: center; } .hero-cta-group { flex-direction: column; gap: 1rem; } .hero-cta-group .btn-primary, .hero-cta-group .btn-secondary { width: 100%; justify-content: center; } .dealroom-stats { gap: 2rem; } .dealroom-cta-row { flex-direction: column; align-items: center; } .dealroom-cta-row .btn-primary, .dealroom-cta-row .btn-secondary { width: 100%; justify-content: center; max-width: 320px; } .trust-strip-inner { gap: 1rem; font-size: 0.58rem; flex-direction: row; flex-wrap: nowrap; justify-content: center; overflow: hidden; } .trust-sep { display: inline; } .theme-toggle { margin-left: 0.5rem; } } @media (max-width: 480px) { .headline-grid { grid-template-columns: 1fr; } .headline-card { border-right: none !important; } .hero-title { font-size: 2rem; } .section-title { font-size: 1.8rem; } .pipeline-block { padding: 1.5rem 1.25rem; } .track-layout { grid-template-columns: 1fr; } .hero-scroll { display: none; } .nav-logo { gap: 0.5rem; } .nav-logo-text { font-size: 1rem; } .nav-logo-img { width: 28px; } .contact-title { font-size: 1.8rem; } .headline-card { padding: 1.75rem 1.25rem; } .role-toggle { grid-template-columns: 1fr; } .mandate-chip { padding: 0.45rem 0.75rem; font-size: 0.75rem; } .mandate-options { gap: 0.4rem; } } /* Deal room sign-in distinction */ .dealroom-signin { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--condensed); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--live-green); text-decoration: none; border-bottom: 1px solid rgba(29,200,148,0.3); padding-bottom: 0.1rem; transition: border-color 0.3s, color 0.3s; margin-top: 1.25rem; display: block; text-align: center; } .dealroom-signin:hover { border-color: var(--live-green); } /* Platform callout block */ .platform-callout { background: #040608; border: 1px solid rgba(242,238,228,0.09); border-left: 3px solid var(--live-green); padding: 2rem 2.25rem; margin-top: 5rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; } .platform-callout-text { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.7; font-weight: 300; } .platform-callout-text strong { color: var(--text-primary); font-weight: 500; } .platform-callout-label { font-family: var(--condensed); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--live-green); margin-bottom: 0.6rem; } @media (max-width: 768px) { .platform-callout { grid-template-columns: 1fr; gap: 1.25rem; } } /* Verified badge on case study */ .verified-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--live-green); background: var(--live-green-dim); border: 1px solid rgba(29,200,148,0.3); padding: 0.2rem 0.6rem; margin-bottom: 0.85rem; display: inline-flex; } .verified-badge::before { content: ''; width: 5px; height: 5px; background: var(--live-green); border-radius: 50%; flex-shrink: 0; } /* ================================================================ LEGAL PAGES -- body.legal-page Scoped under body.legal-page to avoid conflicts with main site vars. Uses Cormorant Garamond + DM Sans, fixed dark theme. Pages: privacy.html, terms.html, sms-terms.html, unsubscribe.html ================================================================ */ body.legal-page { --lp-bg: #0a0c10; --lp-bg2: #0f1218; --lp-card: #181d27; --lp-text: #e8e6e1; --lp-muted: #9a978f; --lp-dim: #5c5a54; --lp-gold: #c9a84c; --lp-border: rgba(201,168,76,0.08); --lp-serif: 'Cormorant Garamond', Georgia, serif; --lp-sans: 'DM Sans', sans-serif; --lp-mono: 'JetBrains Mono', ui-monospace, monospace; --lp-accent-dim: #8a7433; --lp-border-hover: rgba(201,168,76,0.20); --lp-success: #4a9e6e; --lp-error: #c94c4c; font-family: var(--lp-sans); background: var(--lp-bg); color: var(--lp-text); line-height: 1.7; -webkit-font-smoothing: antialiased; } /* Suppress grain overlay on legal pages -- handled separately */ body.legal-page::after { display: none; } /* ---------------------------------------------------------------- Legal nav ---------------------------------------------------------------- */ .legal-nav { padding: 1.25rem 3rem; border-bottom: 1px solid var(--lp-border); display: flex; justify-content: space-between; align-items: center; } .legal-nav a { font-family: var(--lp-serif); font-size: 1.2rem; color: var(--lp-text); text-decoration: none; display: flex; align-items: center; gap: 0.6rem; } .legal-nav a img { height: 28px; width: auto; } .legal-nav a span { color: var(--lp-gold); } .legal-nav .back { font-family: var(--lp-sans); font-size: 0.82rem; color: var(--lp-muted); text-decoration: none; letter-spacing: 0.05em; } .legal-nav .back:hover { color: var(--lp-gold); } /* ---------------------------------------------------------------- Legal content body ---------------------------------------------------------------- */ .legal-content { max-width: 720px; margin: 0 auto; padding: 4rem 2rem 6rem; } .legal-content h1 { font-family: var(--lp-serif); font-size: 2.2rem; font-weight: 300; margin-bottom: 0.5rem; } .legal-content .updated { font-size: 0.8rem; color: var(--lp-dim); margin-bottom: 3rem; } .legal-content h2 { font-family: var(--lp-serif); font-size: 1.25rem; font-weight: 500; margin: 2.5rem 0 0.75rem; color: var(--lp-gold); } .legal-content p { font-size: 0.92rem; color: var(--lp-muted); margin-bottom: 1rem; font-weight: 300; } .legal-content strong { color: var(--lp-text); font-weight: 500; } .legal-content a { color: var(--lp-gold); text-decoration: underline; } .legal-content a:hover { color: #d4b45a; } /* ---------------------------------------------------------------- Legal list style (used in sms-terms) ---------------------------------------------------------------- */ .legal-content ul { list-style: none; padding: 0; margin: 0 0 1rem 0; } .legal-content ul li { font-size: 0.92rem; color: var(--lp-muted); font-weight: 300; padding: 0.35rem 0 0.35rem 1.25rem; position: relative; } .legal-content ul li::before { content: '--'; position: absolute; left: 0; color: var(--lp-gold); opacity: 0.5; } /* ---------------------------------------------------------------- Callout block (used in sms-terms) ---------------------------------------------------------------- */ .callout { background: var(--lp-card); border: 1px solid var(--lp-border); border-left: 3px solid var(--lp-gold); padding: 1.25rem 1.5rem; margin: 1.5rem 0; } .callout p { margin-bottom: 0.5rem; } .callout p:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------- Unsubscribe page -- shell + components ---------------------------------------------------------------- */ body.legal-page.unsub-page { min-height: 100vh; overflow: hidden; background: radial-gradient(1200px 700px at 18% -10%, rgba(201,168,76,0.12), transparent 55%), radial-gradient(900px 650px at 90% 10%, rgba(90,122,158,0.14), transparent 50%), radial-gradient(800px 520px at 30% 110%, rgba(201,168,76,0.08), transparent 55%), var(--lp-bg); } body.legal-page.unsub-page::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); opacity: 0.4; } /* Shell */ .unsub-shell { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; } /* Seal */ .unsub-seal-wrap { position: relative; margin-bottom: 48px; opacity: 0; animation: unsubReveal 1s cubic-bezier(.2,.9,.2,1) 0.2s forwards; } .unsub-seal-ring { width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.18); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 60px rgba(201,168,76,0.05), 0 0 120px rgba(201,168,76,0.025), inset 0 0 30px rgba(201,168,76,0.025); } .unsub-seal-ring::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.08); } .unsub-seal-ring::after { content: ''; position: absolute; inset: -25px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.035); } .unsub-seal-logo { width: 68px; height: 68px; filter: brightness(1.1) contrast(1.05); } /* Unsub typography */ .unsub-overline { font-family: var(--lp-mono); font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: var(--lp-gold); margin-bottom: 22px; opacity: 0; animation: unsubReveal 0.8s cubic-bezier(.2,.9,.2,1) 0.5s forwards; } .unsub-title { font-family: var(--lp-serif); font-size: 2.4rem; font-weight: 300; color: var(--lp-text); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 12px; opacity: 0; animation: unsubReveal 0.8s cubic-bezier(.2,.9,.2,1) 0.6s forwards; } .unsub-title em { font-style: italic; color: var(--lp-gold); } .unsub-subtitle { font-family: var(--lp-sans); font-size: 14px; font-weight: 400; color: var(--lp-muted); line-height: 1.8; max-width: 400px; margin-bottom: 40px; opacity: 0; animation: unsubReveal 0.8s cubic-bezier(.2,.9,.2,1) 0.7s forwards; } .unsub-rule { width: 72px; height: 1px; margin-bottom: 40px; background: linear-gradient(90deg, transparent, var(--lp-gold), transparent); opacity: 0; animation: unsubReveal 0.8s cubic-bezier(.2,.9,.2,1) 0.8s forwards; } /* Unsub card */ .unsub-card { background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); border: 1px solid var(--lp-border); border-radius: 24px; box-shadow: 0 10px 28px rgba(0,0,0,0.40); padding: 36px 44px; width: 100%; max-width: 480px; opacity: 0; animation: unsubReveal 0.8s cubic-bezier(.2,.9,.2,1) 0.9s forwards; } .unsub-card-text { font-family: var(--lp-sans); font-size: 14px; font-weight: 400; color: var(--lp-muted); line-height: 1.8; margin-bottom: 28px; } /* Unsub buttons */ .unsub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 28px; background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.32); color: var(--lp-gold); font-family: var(--lp-mono); font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 18px; transition: transform 120ms cubic-bezier(.2,.9,.2,1), background 120ms cubic-bezier(.2,.9,.2,1), border-color 120ms cubic-bezier(.2,.9,.2,1), box-shadow 120ms cubic-bezier(.2,.9,.2,1), color 120ms cubic-bezier(.2,.9,.2,1); } .unsub-btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(201,168,76,0.18), rgba(201,168,76,0.08)); border-color: rgba(201,168,76,0.48); box-shadow: 0 10px 26px rgba(0,0,0,0.28); color: var(--lp-text); } .unsub-btn:active { transform: translateY(0); } .unsub-btn:disabled { opacity: 0.35; cursor: default; transform: none; } .unsub-btn:disabled:hover { background: rgba(201,168,76,0.06); border-color: rgba(201,168,76,0.32); color: var(--lp-gold); box-shadow: none; } .unsub-btn-ghost { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; padding: 10px 20px; background: transparent; border: none; color: var(--lp-dim); font-family: var(--lp-mono); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color 180ms cubic-bezier(.2,.9,.2,1); } .unsub-btn-ghost:hover { color: var(--lp-gold); } .unsub-btn-ghost .arrow { transition: transform 180ms cubic-bezier(.2,.9,.2,1); font-size: 11px; } .unsub-btn-ghost:hover .arrow { transform: translateX(4px); } /* Unsub tagline + footer */ .unsub-tagline { font-family: var(--lp-mono); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--lp-dim); margin-top: 24px; opacity: 0; animation: unsubReveal 0.6s cubic-bezier(.2,.9,.2,1) 1.1s forwards; } .unsub-footer { position: absolute; bottom: 28px; display: flex; align-items: center; gap: 16px; opacity: 0; animation: unsubReveal 0.6s cubic-bezier(.2,.9,.2,1) 1.3s forwards; } .unsub-footer-line { width: 36px; height: 1px; background: rgba(201,168,76,0.12); } .unsub-footer-text { font-family: var(--lp-mono); font-size: 8px; letter-spacing: 2.5px; color: rgba(255,255,255,0.10); text-transform: uppercase; } /* Unsub states */ .unsub-state { display: none; flex-direction: column; align-items: center; text-align: center; } .unsub-state.active { display: flex; } /* Success check ring */ .unsub-check-ring { width: 88px; height: 88px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.22); display: flex; align-items: center; justify-content: center; margin-bottom: 40px; box-shadow: 0 0 60px rgba(201,168,76,0.05), 0 0 120px rgba(201,168,76,0.025); } .unsub-check-ring svg { width: 30px; height: 30px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: unsubDrawCheck 0.6s ease-out 0.3s forwards; } /* Spinner */ .unsub-spinner { width: 13px; height: 13px; border: 1.5px solid rgba(201,168,76,0.25); border-top-color: var(--lp-gold); border-radius: 50%; animation: unsubSpin 0.8s linear infinite; } /* Error */ .unsub-error { display: none; margin-top: 16px; font-family: var(--lp-sans); font-size: 13px; color: #8b4c4c; font-weight: 400; } /* Animations */ @keyframes unsubReveal { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes unsubDrawCheck { to { stroke-dashoffset: 0; } } @keyframes unsubSpin { to { transform: rotate(360deg); } } /* Unsub responsive */ @media (max-width: 520px) { .unsub-shell { padding: 28px 18px; } .unsub-title { font-size: 1.8rem; } .unsub-card { padding: 24px 22px; } .unsub-seal-ring { width: 120px; height: 120px; } .unsub-seal-ring::before { inset: -10px; } .unsub-seal-ring::after { inset: -20px; } .unsub-seal-logo { width: 55px; height: 55px; } } @media (prefers-reduced-motion: reduce) { body.legal-page * { transition: none !important; animation: none !important; } .unsub-state.active, .unsub-seal-wrap, .unsub-overline, .unsub-title, .unsub-subtitle, .unsub-rule, .unsub-card, .unsub-tagline, .unsub-footer, .unsub-check-ring svg { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } } /* ================================================================ NCNDA PAGE -- body.ncnda-page Secure document signing flow. Inherits --lp-* vars from body.legal-page scope in co-public.css ================================================================ */ body.ncnda-page { /* Google Places autocomplete dropdown */ .pac-container { background: var(--lp-card); border: 1px solid var(--lp-border-hover); box-shadow: 0 8px 32px rgba(0,0,0,0.5); font-family: var(--lp-sans); z-index: 10000; } .pac-item { padding: 8px 12px; border-top: 1px solid var(--lp-border); color: var(--lp-muted); font-size: 0.85rem; cursor: pointer; } .pac-item:hover, .pac-item-selected { background: rgba(201,168,76,0.08); } .pac-item-query { color: var(--lp-text); font-weight: 500; } .pac-icon { display: none; } .pac-logo::after { display: none; } /* ===== CINEMATIC OVERLAY ===== */ .cin-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--lp-bg); transition: opacity 0.6s ease; } .cin-overlay.hidden { opacity: 0; pointer-events: none; } .cin-backdrop { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(15,28,48,0.9) 0%, var(--lp-bg) 70%), radial-gradient(ellipse 40% 30% at 30% 70%, rgba(201,168,76,0.03) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 70% 30%, rgba(201,168,76,0.02) 0%, transparent 70%); } .cin-backdrop::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); opacity: 0.4; pointer-events: none; } .cin-state { position: relative; z-index: 1; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; width: 100%; } .cin-state.active { display: flex; } /* Cinematic: Loading */ .cin-seal-wrap { position: relative; margin-bottom: 32px; } .cin-seal-ring { width: 100px; height: 100px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.2); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(201,168,76,0.06), 0 0 80px rgba(201,168,76,0.03), inset 0 0 20px rgba(201,168,76,0.03); } .cin-seal-ring::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.07); } .cin-seal-ring::after { content: ''; position: absolute; inset: -16px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.03); } .cin-seal-logo { width: 48px; height: 48px; filter: brightness(1.1); animation: cinPulse 2s ease-in-out infinite; } .cin-line { width: 48px; height: 1px; margin: 20px 0; background: linear-gradient(90deg, transparent, var(--lp-gold), transparent); } .cin-label { font-family: var(--lp-mono); font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: rgba(201,168,76,0.5); } .cin-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--lp-gold); margin-top: 16px; animation: cinDotPulse 1.5s ease-in-out infinite; } /* Cinematic: Gate */ .cin-gate { max-width: 500px; width: 100%; margin: 0 auto; } .cin-gate-reveal { opacity: 0; animation: cinReveal 0.8s ease-out forwards; } .cin-gate-reveal-d1 { animation-delay: 0.2s; } .cin-gate-reveal-d2 { animation-delay: 0.4s; } .cin-gate-reveal-d3 { animation-delay: 0.6s; } .cin-gate-reveal-d4 { animation-delay: 0.8s; } .cin-gate-reveal-d5 { animation-delay: 1.0s; } .cin-overline { font-family: var(--lp-mono); font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--lp-gold); margin-bottom: 20px; } .cin-title { font-family: var(--lp-serif); font-size: 28px; font-weight: 400; color: var(--lp-text); line-height: 1.2; margin-bottom: 8px; } .cin-subtitle { font-family: var(--lp-mono); font-size: 11px; color: rgba(255,255,255,0.35); letter-spacing: 1px; margin-bottom: 32px; } .cin-rule { width: 64px; height: 1px; margin: 0 auto 32px; background: linear-gradient(90deg, transparent, var(--lp-gold), transparent); } .cin-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(201,168,76,0.1); border-radius: 2px; padding: 28px 32px; width: 100%; backdrop-filter: blur(8px); } .cin-card-text { font-family: var(--lp-sans); font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1.8; margin-bottom: 24px; } .cin-card-google { display: flex; justify-content: center; min-height: 44px; } .cin-card-fine { font-family: var(--lp-mono); font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.2); margin-top: 20px; } .cin-footer { position: fixed; bottom: 28px; z-index: 1; display: flex; align-items: center; gap: 16px; opacity: 0; animation: cinReveal 0.6s ease-out 1.2s forwards; } .cin-footer-line { width: 32px; height: 1px; background: rgba(201,168,76,0.15); } .cin-footer-text { font-family: var(--lp-mono); font-size: 8px; letter-spacing: 2px; color: rgba(255,255,255,0.12); text-transform: uppercase; } /* Cinematic: Transition */ .cin-trans-text { font-family: var(--lp-mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(201,168,76,0.5); } .cin-trans-bar-wrap { width: 200px; height: 1px; background: rgba(255,255,255,0.05); margin-top: 20px; border-radius: 1px; overflow: hidden; } .cin-trans-bar { height: 100%; width: 0%; background: var(--lp-gold); animation: cinTransProgress 1.6s ease-in-out forwards; } /* ===== SCROLL-TO-BOTTOM GATE (Step 3) ===== */ .scroll-gate-hidden { opacity: 0; pointer-events: none; max-height: 0; overflow: hidden; transition: all 0.5s ease; } .scroll-gate-visible { opacity: 1; pointer-events: auto; max-height: 400px; transition: all 0.5s ease; } .scroll-indicator { position: sticky; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; padding: 16px 0 8px; z-index: 5; background: linear-gradient(transparent, var(--lp-card) 40%); transition: opacity 0.4s ease; } .scroll-indicator.faded { opacity: 0; pointer-events: none; } .scroll-indicator-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(201,168,76,0.3); display: flex; align-items: center; justify-content: center; animation: scrollBounce 2s ease-in-out infinite; } .scroll-indicator-arrow svg { width: 16px; height: 16px; stroke: var(--lp-gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .scroll-indicator-text { font-family: var(--lp-mono); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: rgba(201,168,76,0.4); margin-top: 6px; } /* ===== PHONE VALIDATION ===== */ .field-error-phone { font-size: 0.72rem; color: var(--lp-error); display: none; } .form-input.error ~ .field-error-phone { display: block; } /* ===== NAV ===== */ nav { padding: 1.25rem 3rem; display: flex; align-items: center; border-bottom: 1px solid var(--lp-border); background: var(--lp-bg); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--lp-text); } .nav-logo img { width: 32px; height: auto; } .nav-logo-text { font-family: var(--lp-serif); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.03em; } .nav-logo-text span { color: var(--lp-gold); } /* ===== MAIN CONTAINER ===== */ .container { max-width: 760px; margin: 0 auto; padding: 3rem 2rem 6rem; } /* ===== PAGE HEADER ===== */ .page-header { text-align: center; margin-bottom: 3rem; } .page-header h1 { font-family: var(--lp-serif); font-size: 2.2rem; font-weight: 300; margin-bottom: 0.75rem; } .page-header p { color: var(--lp-muted); font-size: 0.95rem; font-weight: 300; max-width: 520px; margin: 0 auto; line-height: 1.65; } /* ===== PROGRESS BAR ===== */ .progress-bar { display: flex; justify-content: center; gap: 0; margin-bottom: 3.5rem; position: relative; } .progress-step { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; max-width: 160px; } .progress-step:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 1px; background: var(--lp-border); z-index: 0; } .progress-step.completed:not(:last-child)::after { background: var(--lp-gold); } .step-dot { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lp-border); background: var(--lp-card); display: flex; align-items: center; justify-content: center; font-family: var(--lp-mono); font-size: 0.72rem; color: var(--lp-dim); position: relative; z-index: 1; transition: all 0.4s ease; } .progress-step.active .step-dot { border-color: var(--lp-gold); color: var(--lp-gold); box-shadow: 0 0 20px rgba(201,168,76,0.15); } .progress-step.completed .step-dot { border-color: var(--lp-gold); background: var(--lp-gold); color: var(--lp-bg); } .step-label { font-size: 0.68rem; color: var(--lp-dim); margin-top: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; text-align: center; } .progress-step.active .step-label { color: var(--lp-gold); } .progress-step.completed .step-label { color: var(--lp-muted); } /* ===== STEP PANELS ===== */ .step-panel { display: none; animation: fadeUp 0.4s ease; } .step-panel.active { display: block; } /* ===== STEP 1: IDENTITY ===== */ .identity-card { background: var(--lp-card); border: 1px solid var(--lp-border); padding: 3rem; text-align: center; } .identity-card .crest { width: 60px; margin: 0 auto 1.5rem; opacity: 0.6; } .identity-card h2 { font-family: var(--lp-serif); font-size: 1.4rem; font-weight: 400; margin-bottom: 0.75rem; } .identity-card p { color: var(--lp-muted); font-size: 0.88rem; font-weight: 300; margin-bottom: 2rem; line-height: 1.6; } .google-btn-wrap { display: flex; justify-content: center; margin-bottom: 1.5rem; } .identity-note { font-size: 0.75rem; color: var(--lp-dim); font-weight: 300; line-height: 1.55; max-width: 400px; margin: 0 auto; } .identity-fallback { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--lp-border); font-size: 0.8rem; color: var(--lp-dim); font-weight: 300; } .identity-fallback a { color: var(--lp-accent-dim); text-decoration: none; } .identity-fallback a:hover { color: var(--lp-gold); } /* ===== STEP 2: DETAILS ===== */ .verified-block { background: rgba(74, 158, 110, 0.06); border: 1px solid rgba(74, 158, 110, 0.15); padding: 1.25rem 1.5rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; } .verified-block .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--lp-card); border: 1px solid rgba(74, 158, 110, 0.3); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .verified-block .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .verified-block .avatar-initials { font-family: var(--lp-serif); font-size: 1.1rem; color: var(--lp-success); } .verified-info .v-name { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.15rem; } .verified-info .v-email { font-size: 0.8rem; color: var(--lp-success); display: flex; align-items: center; gap: 0.35rem; } .verified-info .v-email svg { width: 13px; height: 13px; } .form-section-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lp-dim); margin-bottom: 1rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .form-grid.full { grid-template-columns: 1fr; } .form-field { display: flex; flex-direction: column; gap: 0.35rem; } .form-field label { font-size: 0.75rem; color: var(--lp-dim); font-weight: 500; letter-spacing: 0.04em; } .form-input { background: var(--lp-card); border: 1px solid var(--lp-border); padding: 0.8rem 1rem; color: var(--lp-text); font-family: var(--lp-sans); font-size: 0.88rem; transition: border-color 0.3s; outline: none; width: 100%; } .form-input::placeholder { color: var(--lp-dim); } .form-input:focus { border-color: var(--lp-accent-dim); outline: 2px solid rgba(201,168,76,0.15); outline-offset: -2px; } .form-input.error { border-color: var(--lp-error); } .field-error { font-size: 0.72rem; color: var(--lp-error); display: none; } .form-input.error + .field-error { display: block; } /* ===== STEP 3: AGREEMENT REVIEW ===== */ .agreement-doc { background: var(--lp-card); border: 1px solid var(--lp-border); padding: 2.5rem 2rem; max-height: 60vh; overflow-y: auto; margin-bottom: 1.5rem; font-size: 0.88rem; line-height: 1.7; scrollbar-width: thin; scrollbar-color: var(--lp-accent-dim) var(--lp-card); } .agreement-doc::-webkit-scrollbar { width: 6px; } .agreement-doc::-webkit-scrollbar-track { background: var(--lp-card); } .agreement-doc::-webkit-scrollbar-thumb { background: var(--lp-accent-dim); border-radius: 3px; } .agreement-doc h2 { font-family: var(--lp-serif); font-size: 1.3rem; font-weight: 600; text-align: center; margin-bottom: 1.75rem; letter-spacing: 0.02em; } .doc-section { margin-bottom: 1.75rem; } .doc-section h3 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-gold); margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--lp-border); } .doc-section p, .doc-section li { color: var(--lp-muted); font-weight: 300; margin-bottom: 0.6rem; } .doc-section ul { list-style: none; padding-left: 0; } .doc-section ul li { padding-left: 1.25rem; position: relative; } .doc-section ul li::before { content: '\2022'; position: absolute; left: 0.25rem; color: var(--lp-accent-dim); } .doc-subsection { margin-bottom: 1rem; padding-left: 0; } .doc-subsection-title { font-weight: 600; color: var(--lp-text); margin-bottom: 0.3rem; font-size: 0.86rem; } .party-block { background: var(--lp-bg2); padding: 1.25rem; border: 1px solid var(--lp-border); margin-bottom: 1rem; } .party-block h4 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-gold); margin-bottom: 0.5rem; } .party-block p { font-size: 0.85rem; color: var(--lp-muted); margin-bottom: 0.25rem; } .party-block .highlight { color: var(--lp-text); font-weight: 500; } .agreement-checkbox { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; padding: 1rem; background: rgba(201,168,76,0.04); border: 1px solid var(--lp-border); } .agreement-checkbox input { margin-top: 2px; flex-shrink: 0; accent-color: var(--lp-gold); width: 18px; height: 18px; cursor: pointer; } .agreement-checkbox span { font-size: 0.88rem; color: var(--lp-muted); font-weight: 400; } /* ===== STEP 4: SIGNATURE ===== */ .execution-block { background: var(--lp-card); border: 1px solid var(--lp-border); padding: 2rem; margin-bottom: 2rem; } .execution-block h3 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lp-dim); margin-bottom: 1rem; } .exec-party { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--lp-border); } .exec-party:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .exec-name { font-family: var(--lp-serif); font-size: 1.1rem; font-weight: 500; margin-bottom: 0.15rem; } .exec-role { font-size: 0.8rem; color: var(--lp-dim); font-weight: 300; } .exec-entity { font-size: 0.82rem; color: var(--lp-muted); margin-bottom: 0.15rem; } .exec-date { font-family: var(--lp-mono); font-size: 0.78rem; color: var(--lp-dim); } .pre-sig { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-style: italic; color: var(--lp-gold); font-weight: 400; } .sig-section { margin-bottom: 1.5rem; } .sig-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lp-dim); margin-bottom: 0.75rem; } .sig-canvas-wrap { background: #fafaf8; border: 2px dashed var(--lp-border-hover); position: relative; cursor: crosshair; transition: border-color 0.3s; } .sig-canvas-wrap:hover { border-color: var(--lp-gold); } .sig-canvas-wrap.signed { border-style: solid; border-color: var(--lp-accent-dim); } .sig-canvas-wrap.error { border-color: var(--lp-error); } #signatureCanvas { width: 100%; height: 160px; display: block; } .sig-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.82rem; color: #999; pointer-events: none; transition: opacity 0.3s; } .sig-canvas-wrap.signed .sig-placeholder { opacity: 0; } .sig-actions { display: flex; gap: 1rem; margin-top: 0.75rem; } .sig-clear { background: none; border: 1px solid var(--lp-border); color: var(--lp-dim); padding: 0.4rem 1rem; font-size: 0.75rem; cursor: pointer; font-family: var(--lp-sans); letter-spacing: 0.05em; transition: all 0.3s; } .sig-clear:hover { border-color: var(--lp-accent-dim); color: var(--lp-muted); } .esign-notice { font-size: 0.75rem; color: var(--lp-dim); font-weight: 300; line-height: 1.55; margin-bottom: 1.5rem; padding: 1rem; background: rgba(201,168,76,0.04); border: 1px solid var(--lp-border); } /* ===== STEP 5: CONFIRMATION ===== */ .confirmation { text-align: center; padding: 2rem 0; } .confirm-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(74, 158, 110, 0.1); border: 1px solid rgba(74, 158, 110, 0.25); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; } .confirm-icon svg { width: 32px; height: 32px; color: var(--lp-success); } .confirmation h2 { font-family: var(--lp-serif); font-size: 1.8rem; font-weight: 400; margin-bottom: 0.75rem; } .confirmation p { color: var(--lp-muted); font-size: 0.92rem; font-weight: 300; line-height: 1.65; margin-bottom: 0.5rem; } .confirm-id { font-family: var(--lp-mono); font-size: 0.78rem; color: var(--lp-dim); margin: 1.5rem 0; } .confirm-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; } /* ===== BUTTONS ===== */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; background: var(--lp-gold); color: var(--lp-bg); text-decoration: none; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.3s; font-family: var(--lp-sans); } .btn-primary:hover { background: #d4b45a; transform: translateY(-1px); box-shadow: 0 8px 30px rgba(201,168,76,0.25); } .btn-primary:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; background: transparent; border: 1px solid var(--lp-border-hover); color: var(--lp-muted); text-decoration: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.3s; font-family: var(--lp-sans); } .btn-secondary:hover { border-color: var(--lp-gold); color: var(--lp-gold); } .btn-secondary:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; } .btn-full { width: 100%; justify-content: center; } .btn-back { display: block; width: 100%; margin-top: 0.75rem; padding: 0.7rem; background: none; border: none; color: var(--lp-dim); cursor: pointer; font-family: var(--lp-sans); font-size: 0.82rem; letter-spacing: 0.02em; transition: color 0.3s; } .btn-back:hover { color: var(--lp-muted); } /* ===== FOOTER ===== */ .page-footer { text-align: center; padding: 2rem; border-top: 1px solid var(--lp-border); font-size: 0.72rem; color: var(--lp-dim); font-weight: 300; } /* ===== LOADING ===== */ .loading-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(10,12,16,0.85); backdrop-filter: blur(8px); align-items: center; justify-content: center; flex-direction: column; gap: 1.25rem; } .loading-overlay.active { display: flex; } .spinner { width: 40px; height: 40px; border: 2px solid var(--lp-border); border-top-color: var(--lp-gold); border-radius: 50%; animation: spin 0.8s linear infinite; } .loading-text { font-size: 0.88rem; color: var(--lp-muted); font-weight: 300; } /* ===== STEP 6: MANDATE WIZARD ===== */ .mw-header { text-align: center; margin-bottom: 2rem; } .mw-header h2 { font-family: var(--lp-serif); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.5rem; } .mw-header p { color: var(--lp-muted); font-size: 0.85rem; font-weight: 300; line-height: 1.6; max-width: 480px; margin: 0 auto; } /* Progress track */ .mw-progress { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 2.5rem; position: relative; } .mw-prog-step { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; max-width: 120px; } .mw-prog-step:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: 50%; width: 100%; height: 1px; background: var(--lp-border); z-index: 0; } .mw-prog-step.completed:not(:last-child)::after { background: var(--lp-gold); } .mw-prog-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--lp-border); background: var(--lp-bg); display: flex; align-items: center; justify-content: center; font-family: var(--lp-mono); font-size: 0.7rem; color: var(--lp-dim); position: relative; z-index: 1; transition: all 0.3s; } .mw-prog-step.active .mw-prog-dot { border-color: var(--lp-gold); color: var(--lp-gold); box-shadow: 0 0 12px rgba(201,168,76,0.2); } .mw-prog-step.completed .mw-prog-dot { border-color: var(--lp-gold); background: var(--lp-gold); color: var(--lp-bg); } .mw-prog-label { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-dim); margin-top: 6px; } .mw-prog-step.active .mw-prog-label { color: var(--lp-gold); } .mw-prog-step.completed .mw-prog-label { color: var(--lp-muted); } /* Wizard view panels */ .mw-view { display: none; animation: fadeUp 0.4s ease; } .mw-view.active { display: block; } .mw-context { background: var(--lp-bg2); border: 1px solid var(--lp-border); border-left: 3px solid var(--lp-gold); padding: 1rem 1.25rem; margin-bottom: 2rem; border-radius: 2px; } .mw-context-title { font-family: var(--lp-serif); font-size: 1.05rem; font-weight: 500; color: var(--lp-text); margin-bottom: 0.35rem; } .mw-context-desc { font-size: 0.8rem; color: var(--lp-muted); font-weight: 300; line-height: 1.6; } /* Wizard nav buttons */ .mw-nav { display: flex; gap: 0.75rem; margin-top: 2rem; } .mw-nav-back { background: none; border: 1px solid var(--lp-border); color: var(--lp-muted); padding: 0.75rem 1.5rem; font-family: var(--lp-sans); font-size: 0.85rem; cursor: pointer; transition: all 0.3s; flex: 0; } .mw-nav-back:hover { border-color: var(--lp-accent-dim); color: var(--lp-text); } .mw-nav-next { background: var(--lp-gold); border: none; color: var(--lp-bg); padding: 0.75rem 2rem; font-family: var(--lp-sans); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s; flex: 1; } .mw-nav-next:hover { background: var(--gold-light, #d4b876); } .mw-nav-next:disabled { opacity: 0.4; cursor: not-allowed; } /* Review summary */ .mw-review { margin-bottom: 1.5rem; } .mw-review-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.6rem 0; border-bottom: 1px solid var(--lp-border); } .mw-review-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-dim); flex: 0 0 140px; } .mw-review-value { font-size: 0.85rem; color: var(--lp-text); font-weight: 400; text-align: right; flex: 1; } .mw-review-value.empty { color: var(--lp-dim); font-style: italic; } /* Existing mandate styles kept */ .mandate-section { margin-bottom: 2rem; } .mandate-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lp-dim); margin-bottom: 0.75rem; } .mandate-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .mandate-chip { display: inline-flex; align-items: center; padding: 0.5rem 1rem; background: var(--lp-card); border: 1px solid var(--lp-border); cursor: pointer; font-size: 0.8rem; color: var(--lp-muted); transition: all 0.25s; user-select: none; } .mandate-chip:hover { border-color: var(--lp-accent-dim); color: var(--lp-text); } .mandate-chip.selected { border-color: var(--lp-gold); color: var(--lp-gold); background: rgba(201,168,76,0.08); } .mandate-chip input { display: none; } .mandate-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75rem; align-items: center; } .mandate-range .range-sep { color: var(--lp-dim); font-size: 0.8rem; } .mandate-input { background: var(--lp-card); border: 1px solid var(--lp-border); padding: 0.75rem 1rem; color: var(--lp-text); font-family: var(--lp-sans); font-size: 0.85rem; transition: border-color 0.3s; outline: none; width: 100%; } .mandate-input::placeholder { color: var(--lp-dim); } .mandate-input:focus { border-color: var(--lp-accent-dim); } .mandate-input.half { max-width: 200px; } .mandate-textarea { background: var(--lp-card); border: 1px solid var(--lp-border); padding: 0.85rem 1rem; color: var(--lp-text); font-family: var(--lp-sans); font-size: 0.85rem; transition: border-color 0.3s; outline: none; width: 100%; min-height: 80px; resize: vertical; } .mandate-textarea::placeholder { color: var(--lp-dim); } .mandate-textarea:focus { border-color: var(--lp-accent-dim); } .mandate-actions { text-align: center; margin-top: 2.5rem; } .mandate-saved { text-align: center; padding: 2rem 0; } .mandate-saved h3 { font-family: var(--lp-serif); font-size: 1.3rem; font-weight: 400; margin-bottom: 0.5rem; color: var(--lp-success); } .mandate-saved p { color: var(--lp-muted); font-size: 0.88rem; font-weight: 300; } .match-count-highlight { display: inline-block; background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(201, 168, 76, 0.3); padding: 0.75rem 1.25rem; margin: 1rem auto; font-size: 0.85rem; color: var(--lp-gold); font-weight: 400; } .match-count-highlight strong { font-size: 1.1rem; font-weight: 600; } /* ===== RESPONSIVE ===== */ } /* NCNDA: keyframe animations */ @keyframes cinPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.02); } } @keyframes cinDotPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } } @keyframes cinReveal { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes cinTransProgress { 0% { width: 0%; } 30% { width: 40%; } 60% { width: 70%; } 90% { width: 95%; } 100% { width: 100%; } } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(4px); opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } /* NCNDA: responsive */ @media (max-width: 768px) { body.ncnda-page nav { padding: 1rem 1.5rem; } body.ncnda-page .container { padding: 2rem 1.25rem 4rem; } body.ncnda-page .page-header h1 { font-size: 1.8rem; } body.ncnda-page .form-grid { grid-template-columns: 1fr; } body.ncnda-page .agreement-doc { padding: 1.5rem 1.25rem; max-height: 50vh; } body.ncnda-page .execution-block { padding: 1.5rem; } body.ncnda-page .exec-party { flex-direction: column; align-items: flex-start; gap: 0.5rem; } body.ncnda-page .progress-step { max-width: 80px; } body.ncnda-page .step-label { font-size: 0.6rem; } body.ncnda-page .identity-card { padding: 2rem 1.5rem; } } @media (max-width: 480px) { body.ncnda-page .page-header h1 { font-size: 1.5rem; } body.ncnda-page .step-dot { width: 28px; height: 28px; font-size: 0.65rem; } body.ncnda-page .confirm-actions { flex-direction: column; } .confirm-actions .btn-primary, body.ncnda-page .confirm-actions .btn-secondary { width: 100%; justify-content: center; } body.ncnda-page .mandate-chip { padding: 0.45rem 0.75rem; font-size: 0.75rem; } body.ncnda-page .mandate-chips { gap: 0.4rem; } body.ncnda-page .mandate-range { grid-template-columns: 1fr; gap: 0.5rem; } body.ncnda-page .mandate-range .range-sep { display: none; } body.ncnda-page .mw-prog-label { font-size: 0.55rem; } body.ncnda-page .mw-prog-dot { width: 24px; height: 24px; font-size: 0.6rem; } body.ncnda-page .mw-nav { flex-direction: column; } body.ncnda-page .mw-nav-back, body.ncnda-page .mw-nav-next { width: 100%; text-align: center; } body.ncnda-page .mw-review-row { flex-direction: column; gap: 0.25rem; } body.ncnda-page .mw-review-value { text-align: left; } }