/* Theme Name: Intics Theme URI: https://intics.ai Author: Intics Description: Intics — Agentic Document Intelligence. A fully WordPress-native theme: real Pages, an editable menu (Appearance > Menus), Customizer logo, and Blog/Use Cases/Videos/Whitepapers driven by Posts. Activating the theme provisions all pages, the menu, and example content. Version: 2.1.6 Requires at least: 5.9 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: intics */ /* ══════════════════════════════════ DESIGN TOKENS ══════════════════════════════════ */ :root { /* Palette — Intics Brand Guidelines */ --bg: #F4F4F5; --bg2: #FFFFFF; --bg3: #E8E8EA; --border: rgba(35,35,35,0.12); --border-hi: rgba(55,115,185,0.35); --accent: #F59B00; --accent-dim: rgba(245,155,0,0.15); --accent2: #3773B9; --accent2-dim: rgba(55,115,185,0.12); --gold: #F59B00; /* Text */ --text-primary: #232323; --text-secondary: rgba(35,35,35,0.70); --text-muted: rgba(35,35,35,0.50); --text-faint: rgba(35,35,35,0.35); /* Typography */ --font: 'Nunito Sans', system-ui, sans-serif; /* Spacing */ --px: 64px; --section-py: 100px; --radius: 10px; } /* ══════════════════════════════════ RESET & BASE ══════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--bg); color: var(--text-primary); font-family: var(--font); font-weight: 400; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { text-decoration: none; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; } /* ══════════════════════════════════ PAGE SYSTEM ══════════════════════════════════ */ /* (Removed: legacy ".page { display:none }" from the old single-page version. WordPress adds a "page" class to on every Page, so that rule was hiding the entire body on all Pages. Real WordPress Pages need no such rule.) */ @keyframes pgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════ TYPOGRAPHY SCALE ══════════════════════════════════ */ .t-overline { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .t-h1 { font-size: clamp(40px, 5.5vw, 72px); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; } .t-h2 { font-size: clamp(28px, 3.5vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; } .t-h3 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; } .t-h4 { font-size: 17px; font-weight: 700; line-height: 1.4; } .t-body { font-size: 15px; font-weight: 400; line-height: 1.75; color: var(--text-secondary); } .t-small { font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--text-muted); } .t-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); } .t-accent { color: var(--accent); } .t-white { color: var(--text-primary); } /* ══════════════════════════════════ LAYOUT UTILS ══════════════════════════════════ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--px); } .section { padding: var(--section-py) var(--px); } .section-sm { padding: 64px var(--px); } .divider { height: 1px; background: var(--border); margin: 0 var(--px); } .section-header { margin-bottom: 56px; } .section-header .t-overline { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .section-header .t-overline::before { content: ''; width: 20px; height: 2px; background: var(--accent); border-radius: 1px; display: inline-block; } .section-header .t-h2 { margin-bottom: 16px; } .section-header .t-body { max-width: 580px; } /* ══════════════════════════════════ NAV ══════════════════════════════════ */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--px); background: rgba(244,244,245,0.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .nav-logo { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 2px; } .nav-logo .dot { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 2px; list-style: none; } .nav-links a { font-size: 13px; font-weight: 600; color: var(--text-secondary); padding: 7px 13px; border-radius: 6px; cursor: pointer; transition: color .18s, background .18s; } .nav-links a:hover { color: var(--text-primary); background: rgba(35,35,35,0.07); } .nav-links a.active { color: var(--accent); } .nav-cta { background: var(--accent) !important; color: #FFFFFF !important; font-weight: 800 !important; border-radius: 6px; } .nav-cta:hover { opacity: 0.88; background: var(--accent) !important; } .nav-demo { background: transparent !important; color: var(--accent) !important; font-weight: 700 !important; border: 1.5px solid rgba(245,196,0,0.5) !important; border-radius: 6px; transition: background .18s, border-color .18s !important; } .nav-demo:hover { background: rgba(245,155,0,0.12) !important; border-color: var(--accent) !important; } .burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; } .burger span { width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; display: block; transition: all .25s; } .burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); } /* ══════════════════════════════════ MOBILE MENU ══════════════════════════════════ */ .mob-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 99; background: rgba(244,244,245,0.99); padding: 32px var(--px); flex-direction: column; gap: 2px; } .mob-menu.open { display: flex; animation: pgIn .2s ease; } .mob-menu a { font-size: 24px; font-weight: 700; color: var(--text-secondary); padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: color .18s; } .mob-menu a:hover { color: var(--accent); } /* ══════════════════════════════════ HERO ══════════════════════════════════ */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 100px var(--px) 80px; position: relative; overflow: hidden; } .hero-gradient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 65% 55% at 68% 38%, rgba(245,155,0,0.14) 0%, transparent 55%), radial-gradient(ellipse 45% 55% at 18% 72%, rgba(55,115,185,0.14) 0%, transparent 55%); } .hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(35,35,35,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(35,35,35,0.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 100%); } .hero-slide { display: none; position: relative; z-index: 1; } .hero-slide.active { display: block; animation: pgIn .5s ease; } .hero-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 24px; } .hero-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--accent); border-radius: 1px; } .hero-title { font-size: clamp(46px, 6.5vw, 88px); font-weight: 900; line-height: 1.03; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 28px; max-width: 820px; } .hero-title .accent { color: var(--accent); } .hero-sub { font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--text-secondary); max-width: 540px; margin-bottom: 44px; } .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; } .hero-dots { position: absolute; right: var(--px); bottom: 80px; z-index: 2; display: flex; flex-direction: column; gap: 9px; } .hdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(35,35,35,0.18); cursor: pointer; transition: all .3s; border: 1px solid rgba(35,35,35,0.12); } .hdot.active { background: var(--accent); border-color: var(--accent); height: 22px; border-radius: 3px; } /* ══════════════════════════════════ BUTTONS ══════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 14px; font-weight: 700; padding: 13px 26px; border-radius: 7px; border: none; cursor: pointer; transition: all .18s; letter-spacing: 0.01em; } .btn-primary { background: var(--accent); color: #FFFFFF; font-weight: 800; } .btn-primary:hover { opacity: 0.88; transform: translateY(-1px); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1.5px solid rgba(35,35,35,0.18); } .btn-secondary:hover { border-color: rgba(35,35,35,0.35); background: rgba(35,35,35,0.05); } .btn-ghost { background: var(--bg3); color: var(--text-secondary); border: 1px solid var(--border); } .btn-ghost:hover { color: var(--text-primary); border-color: rgba(35,35,35,0.25); } /* ══════════════════════════════════ TICKER ══════════════════════════════════ */ .ticker-wrap { overflow: hidden; background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 13px 0; } .ticker-inner { display: flex; white-space: nowrap; animation: ticker 32s linear infinite; } .tick { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); padding: 0 36px; } .tick .sep { color: var(--accent); margin-right: 8px; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ══════════════════════════════════ STATS BAR ══════════════════════════════════ */ .stats-bar { display: grid; grid-template-columns: repeat(4,1fr); background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stat-item { padding: 40px 24px; text-align: center; border-right: 1px solid var(--border); } .stat-item:last-child { border-right: none; } .stat-num { font-size: 38px; font-weight: 900; line-height: 1; color: var(--text-primary); letter-spacing: -0.03em; margin-bottom: 6px; } .stat-num .hi { color: var(--accent); } .stat-lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } /* ══════════════════════════════════ CARDS — 2-COL GRID ══════════════════════════════════ */ .card-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .card-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .grid-card { background: var(--bg2); padding: 40px; transition: background .2s; position: relative; } .grid-card:hover { background: var(--bg3); } .grid-card-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent-dim); border: 1px solid rgba(245,155,0,0.20); font-size: 12px; font-weight: 800; color: var(--accent); margin-bottom: 20px; } .grid-card .t-h4 { margin-bottom: 10px; } .grid-card .t-h4 .hi { color: var(--accent); } /* ══════════════════════════════════ OUTLINE CARDS ══════════════════════════════════ */ .outline-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; transition: border-color .2s, transform .2s; position: relative; overflow: hidden; } .outline-card:hover { border-color: var(--border-hi); } .outline-card::after { content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; } .outline-card:hover::after { width: 100%; } /* ══════════════════════════════════ FORCE CARDS ══════════════════════════════════ */ .forces-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 56px; } .force-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; transition: border-color .2s; } .force-card:hover { border-color: var(--border-hi); } .force-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .force-card .t-h4 { margin-bottom: 10px; } /* ══════════════════════════════════ PLATFORM TABLE ══════════════════════════════════ */ .layer-table { width: 100%; border-collapse: collapse; margin-top: 56px; } .layer-table thead tr { background: var(--bg3); } .layer-table th { padding: 14px 24px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); } .layer-table td { padding: 28px 24px; border-bottom: 1px solid var(--border); vertical-align: top; } .layer-table tbody tr { background: var(--bg2); transition: background .2s; } .layer-table tbody tr:hover { background: var(--bg3); } .layer-num { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: 6px; } .layer-name { font-size: 16px; font-weight: 700; color: var(--text-primary); } .layer-purpose-tag { display: inline-block; padding: 3px 10px; border-radius: 4px; background: var(--accent-dim); border: 1px solid rgba(245,155,0,0.20); font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; } .layer-desc { font-size: 14px; font-weight: 400; color: var(--text-secondary); line-height: 1.65; } /* ══════════════════════════════════ MODEL CARDS ══════════════════════════════════ */ .models-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; } .model-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 32px; text-align: center; transition: border-color .2s, transform .2s; } .model-card:hover { border-color: var(--border-hi); transform: translateY(-3px); } .model-element { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 14px; } .model-name { font-size: 36px; font-weight: 900; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 16px; } .model-tag { display: inline-block; padding: 4px 12px; border-radius: 4px; background: var(--accent-dim); font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 20px; } .model-desc { font-size: 13px; font-weight: 400; color: var(--text-secondary); line-height: 1.7; } /* ══════════════════════════════════ OFFERINGS ══════════════════════════════════ */ .offerings-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; } .offer-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; transition: border-color .2s, transform .2s; } .offer-card:hover { border-color: var(--border-hi); transform: translateY(-3px); } .offer-icon-wrap { width: 48px; height: 48px; border-radius: 10px; background: var(--accent-dim); border: 1px solid rgba(245,155,0,0.20); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 24px; } .offer-card .t-h3 { margin-bottom: 12px; } .offer-list { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 9px; } .offer-list li { font-size: 13px; font-weight: 400; color: var(--text-secondary); padding-left: 18px; position: relative; line-height: 1.5; } .offer-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-weight: 700; } /* ══════════════════════════════════ ECONOMICS ══════════════════════════════════ */ .econ-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; margin-top: 56px; } .econ-kpi-stack { display: flex; flex-direction: column; gap: 16px; } .kpi-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center; } .kpi-val { font-size: 52px; font-weight: 900; letter-spacing: -0.04em; color: var(--accent); line-height: 1; margin-bottom: 6px; } .kpi-lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .econ-points { display: flex; flex-direction: column; gap: 14px; } .econ-point { display: flex; gap: 16px; padding: 22px 24px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); align-items: flex-start; transition: border-color .2s; } .econ-point:hover { border-color: var(--border-hi); } .econ-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 6px; } .econ-pt-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .econ-pt-body { font-size: 13px; font-weight: 400; color: var(--text-secondary); line-height: 1.6; } /* ══════════════════════════════════ ROI CALCULATOR ══════════════════════════════════ */ .roi-calc { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 44px; margin-top: 56px; } .roi-calc-head { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } .roi-calc-head .t-h3 { margin-bottom: 6px; } .roi-inputs-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-bottom: 36px; } .roi-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } .roi-field input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; height: 4px; margin-bottom: 10px; } .roi-field-val { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; } .roi-results-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); } .roi-res-item { background: var(--bg3); padding: 28px 20px; text-align: center; } .roi-res-num { font-size: 26px; font-weight: 900; color: var(--accent); letter-spacing: -0.02em; margin-bottom: 6px; } .roi-res-lbl { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; } /* ══════════════════════════════════ VERTICALS ══════════════════════════════════ */ .verticals-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 56px; } .vert-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; transition: border-color .2s; } .vert-card:hover { border-color: var(--border-hi); } .vert-industry { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .vert-card .t-h3 { margin-bottom: 12px; } .vert-link { margin-top: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; transition: gap .2s; } .vert-link:hover { gap: 10px; } /* CASE CARDS */ .cases-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 56px; } .case-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; position: relative; overflow: hidden; transition: border-color .2s; } .case-card:hover { border-color: var(--border-hi); } .case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent2)); } .case-ind { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent2); margin-bottom: 20px; } .case-big { font-size: 52px; font-weight: 900; letter-spacing: -0.04em; color: var(--accent); line-height: 1; margin-bottom: 4px; } .case-big-lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 24px; } .case-card .t-h4 { margin-bottom: 10px; } /* ══════════════════════════════════ ECOSYSTEM ══════════════════════════════════ */ .partners-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; } .partner-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-align: center; transition: border-color .2s, transform .2s; } .partner-card:hover { border-color: var(--border-hi); transform: translateY(-2px); } .partner-name { font-size: 24px; font-weight: 900; color: var(--text-primary); margin-bottom: 10px; } .partner-desc { font-size: 13px; font-weight: 400; color: var(--text-secondary); line-height: 1.65; } .sap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 32px; } .sap-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; } .sap-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } /* ══════════════════════════════════ ADVANTAGE ══════════════════════════════════ */ .adv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; } .adv-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; transition: border-color .2s; } .adv-card:hover { border-color: var(--border-hi); } .adv-icon { font-size: 26px; margin-bottom: 18px; } .adv-card .t-h4 { margin-bottom: 10px; } /* ══════════════════════════════════ CONTACT ══════════════════════════════════ */ .contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; margin-top: 56px; } .contact-info-block { display: flex; flex-direction: column; gap: 28px; } .contact-field-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .contact-field-val { font-size: 16px; font-weight: 600; color: var(--text-primary); line-height: 1.5; } .contact-note { font-size: 14px; font-weight: 400; color: var(--text-secondary); line-height: 1.7; } .contact-cta-stack { display: flex; flex-direction: column; gap: 12px; } .c-btn { display: block; padding: 18px 28px; border-radius: 7px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all .18s; text-align: center; border: none; font-family: var(--font); } .c-btn-p { background: var(--accent); color: #FFFFFF; font-weight: 800; } .c-btn-p:hover { opacity: 0.88; } .c-btn-s { background: var(--bg2); color: var(--text-primary); border: 1.5px solid var(--border); } .c-btn-s:hover { border-color: rgba(35,35,35,0.25); background: var(--bg3); } .contact-form { margin-top: 20px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; } .contact-form .t-label { margin-bottom: 16px; display: block; } .c-input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font); font-size: 14px; font-weight: 400; padding: 13px 16px; border-radius: 7px; outline: none; margin-bottom: 12px; display: block; transition: border-color .18s; } .c-input:focus { border-color: var(--accent); } .c-input::placeholder { color: var(--text-faint); } /* ══════════════════════════════════ ACCORDION ══════════════════════════════════ */ .acc-section { margin-top: 0; } .acc-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px; } .acc-item { border-bottom: 1px solid var(--border); } .acc-q { padding: 20px 0; font-size: 15px; font-weight: 600; color: var(--text-primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .18s; } .acc-q:hover { color: var(--accent); } .acc-q::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--text-muted); transition: transform .3s, color .18s; flex-shrink: 0; } .acc-item.open .acc-q { color: var(--accent); } .acc-item.open .acc-q::after { transform: rotate(45deg); color: var(--accent); } .acc-a { font-size: 14px; font-weight: 400; color: var(--text-secondary); line-height: 1.75; max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s; } .acc-item.open .acc-a { max-height: 220px; padding-bottom: 20px; } /* ══════════════════════════════════ SHARED FOOTER ══════════════════════════════════ */ .site-footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 64px var(--px) 32px; } .footer-main { display: grid; grid-template-columns: 1.3fr 3fr; gap: 56px; margin-bottom: 48px; } .footer-brand .foot-logo { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 12px; } .footer-brand .foot-logo span { color: var(--accent); } .footer-brand p { font-size: 13px; font-weight: 400; color: var(--text-muted); line-height: 1.7; max-width: 240px; margin-bottom: 20px; } .foot-contact-mini { display: flex; flex-direction: column; gap: 6px; } .foot-contact-mini a { font-size: 13px; font-weight: 600; color: var(--text-secondary); transition: color .18s; } .foot-contact-mini a:hover { color: var(--accent); } .footer-col h4 { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col ul li a { font-size: 14px; font-weight: 400; color: var(--text-secondary); cursor: pointer; transition: color .18s; } .footer-col ul li a:hover { color: var(--text-primary); } .footer-bottom { padding-top: 28px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-copy { font-size: 12px; font-weight: 400; color: var(--text-faint); } /* ══════════════════════════════════ RESPONSIVE ══════════════════════════════════ */ @media (max-width: 960px) { :root { --px: 24px; --section-py: 72px; } nav { padding: 0 24px; } .nav-links { display: none; } .burger { display: flex; } .hero { padding: 64px 24px 64px; } .hero-dots { right: 24px; bottom: 64px; } .card-grid-2, .card-grid-3, .forces-grid, .models-grid, .offerings-grid, .econ-layout, .verticals-grid, .cases-grid, .partners-grid, .sap-grid, .adv-grid, .contact-layout, .roi-inputs-row, .roi-results-row, .stats-bar, .footer-main { grid-template-columns: 1fr !important; } .stat-item { border-right: none; border-bottom: 1px solid var(--border); } .stat-item:last-child { border-bottom: none; } .footer-bottom { flex-direction: column; text-align: center; } } /* ── INSIGHTS DROPDOWN ── */ .nav-dropdown { position: relative; } .nav-dropdown > a { display: flex; align-items: center; gap: 5px; } .nav-dropdown > a::after { content: '▾'; font-size: 10px; opacity: 0.6; transition: transform .2s; } .nav-dropdown:hover > a::after { transform: rotate(180deg); } .dropdown-menu { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 8px; min-width: 210px; box-shadow: 0 20px 56px rgba(0,0,0,0.55); z-index: 200; } .nav-dropdown:hover .dropdown-menu { display: block; animation: pgIn .15s ease; } .dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s; text-decoration: none; white-space: nowrap; } .dropdown-menu a:hover { background: var(--bg3); color: var(--text-primary); } .dropdown-menu a .drop-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; } .dropdown-divider { height: 1px; background: var(--border); margin: 6px 4px; } /* ── PARTNER EXPLORE LINK ── */ .partner-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; cursor: pointer; transition: gap .2s, opacity .2s; } .partner-link:hover { gap: 9px; opacity: 0.85; } /* ── 5-LAYER AI STACK TABLE ── */ .stack-table { display: grid; grid-template-columns: 120px 220px 1fr; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 56px; } .stack-th { padding: 14px 24px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; background: var(--bg3); border-bottom: 1px solid var(--border); color: var(--text-muted); } .stack-th-layer { border-right: 1px solid var(--border); } .stack-th-name { border-right: 1px solid var(--border); } .stack-td { padding: 22px 24px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; font-size: 14px; font-weight: 400; color: var(--text-secondary); line-height: 1.6; transition: background .18s; } .stack-td.last-row { border-bottom: none; } .stack-td-layer { border-right: 1px solid var(--border); } .stack-td-name { border-right: 1px solid var(--border); } .intics-row { background: var(--bg2); } .intics-row:hover { background: rgba(245,155,0,0.05); } .hw-row { background: var(--bg); } .hw-row:hover { background: var(--bg2); } .stack-layer-num { font-size: 13px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.04em; } .stack-name-text { font-size: 16px; font-weight: 800; letter-spacing: 0.04em; display: block; margin-bottom: 3px; } .intics-text { color: var(--accent); } .hw-text { color: rgba(35,35,35,0.55); } .stack-owner { font-size: 11px; font-weight: 600; color: var(--text-faint); letter-spacing: 0.04em; } @media(max-width:960px) { .stack-table { grid-template-columns: 1fr; } .stack-th-layer, .stack-th-name, .stack-th-desc { border-right: none; } .stack-th-name, .stack-th-layer { display: none; } .stack-td-layer { display: none; } .stack-td-name { border-right: none; border-bottom: none; padding-bottom: 4px; } .stack-td-cap { padding-top: 4px; } } /* ══════════════════════════════════ WORDPRESS NAV MENU MAPPING ══════════════════════════════════ */ .nav-logo a { display:flex; align-items:center; gap:2px; color:inherit; text-decoration:none; } .nav-links { list-style:none; } .nav-links > li { position:relative; } .nav-links .current-menu-item > a, .nav-links .current-page-ancestor > a, .nav-links .current-menu-ancestor > a { color: var(--accent); } .nav-links li.menu-item-has-children > a::after { content:'▾'; font-size:10px; opacity:.6; margin-left:5px; display:inline-block; transition:transform .2s; } .nav-links li.menu-item-has-children:hover > a::after { transform: rotate(180deg); } .nav-links .sub-menu { display:none; position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:8px; min-width:210px; box-shadow:0 20px 56px rgba(0,0,0,0.18); z-index:200; list-style:none; } .nav-links li.menu-item-has-children:hover > .sub-menu { display:block; animation: dropdownIn .15s ease; } .nav-links .sub-menu::before { content:''; position:absolute; top:-12px; left:0; right:0; height:12px; } .nav-links .sub-menu li { position:relative; } .nav-links .sub-menu a { display:block; padding:10px 14px; border-radius:6px; font-size:13px; font-weight:600; color:var(--text-secondary); white-space:nowrap; } .nav-links .sub-menu a:hover { background:var(--bg3); color:var(--text-primary); } @keyframes dropdownIn { from{opacity:0; transform:translateX(-50%) translateY(8px);} to{opacity:1; transform:translateX(-50%) translateY(0);} } .nav-links li.nav-cta > a { background:var(--accent); color:#FFFFFF; font-weight:800; border-radius:6px; } .nav-links li.nav-cta > a:hover { opacity:.88; background:var(--accent); } .nav-links li.nav-demo > a { color:var(--accent); font-weight:700; border:1.5px solid rgba(245,196,0,.5); border-radius:6px; } .nav-links li.nav-demo > a:hover { background:rgba(245,155,0,.12); border-color:var(--accent); } /* mobile menu list (generated from same menu) */ .mob-menu .mob-list { list-style:none; display:flex; flex-direction:column; gap:0; width:100%; } .mob-menu .mob-list > li { width:100%; } .mob-menu .mob-list a { display:block; font-size:22px; font-weight:700; color:var(--text-secondary); padding:14px 0; border-bottom:1px solid var(--border); } .mob-menu .mob-list a:hover { color:var(--accent); } .mob-menu .mob-list .sub-menu { list-style:none; padding-left:16px; } .mob-menu .mob-list .sub-menu a { font-size:18px; font-weight:600; } /* blog / archive post cards */ .post-card { display:flex; flex-direction:column; text-decoration:none; } .post-card .grid-card-num { margin-bottom:18px; } .post-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; margin-bottom:18px; } .post-meta { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin-top:14px; } .pagination { display:flex; gap:8px; margin-top:48px; flex-wrap:wrap; } .pagination .page-numbers { padding:8px 14px; border:1px solid var(--border); border-radius:7px; font-size:13px; font-weight:700; color:var(--text-secondary); } .pagination .page-numbers.current { background:var(--accent); color:#fff; border-color:var(--accent); } .single-wrap { max-width:760px; } .single-wrap img { max-width:100%; height:auto; border-radius:8px; } /* ══════════════════════════════════ VERTICAL HARMONISATION + GATE ══════════════════════════════════ */ .hero-ctas { display:flex; flex-wrap:wrap; gap:14px; } .card-grid-1 { display:grid; grid-template-columns:1fr; max-width:640px; } .faq-wrap { max-width:860px; } /* whitepaper gate */ .gate { margin-top:40px; padding:32px; background:var(--bg2); border:1px solid var(--border); border-radius:14px; } .gate-head { margin-bottom:20px; } .gate-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .gate-input { width:100%; padding:13px 15px; font:inherit; font-size:14px; color:var(--text-primary); background:var(--bg); border:1px solid var(--border); border-radius:8px; outline:none; } .gate-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); } .gate-consent { display:flex; align-items:center; gap:9px; margin:16px 0 18px; font-size:13px; color:var(--text-secondary); } .gate-consent input { width:16px; height:16px; accent-color:var(--accent); } .gate-submit { border:0; cursor:pointer; } .gate-submit:disabled { opacity:.6; cursor:default; } .gate-msg { min-height:18px; margin-top:12px; font-size:13px; font-weight:600; color:var(--accent2); } .gate-done { margin-top:18px; } @media (max-width:640px){ .gate-grid { grid-template-columns:1fr; } } /* ── Logo sizing: any uploaded logo is auto-fitted to the bar ── */ .nav-logo-img { height: 30px; width: auto; max-width: 200px; display: block; object-fit: contain; } .foot-logo img { height: 28px; width: auto; display: block; } /* ── Leftover vertical sub-classes mapped to the main look ── */ .section-label { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; } .section-label.light { color: var(--text-secondary); } .demo-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .demo-tag { font-size:12px; font-weight:600; color:var(--text-secondary); background:var(--bg3); border:1px solid var(--border); border-radius:999px; padding:5px 12px; } /* ============================================================ VERTICAL COMPONENTS — v2.1.5 Unified light theme: chips, metric boxes, comparison columns, platform-demo, CTA panel. No italics / serif. ============================================================ */ /* sentence-case stat captions on vertical top stats */ .stats-bar.stats-prose .stat-lbl { text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); } /* highlight chips (document types / demo tags) */ .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .chip { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--text-secondary); background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; } .chip-accent { color: var(--accent); background: var(--accent-dim); border-color: rgba(245,155,0,0.25); font-weight: 700; letter-spacing: 0.04em; margin-bottom: 14px; } /* inline highlight box — use-case metric / workflow outcome */ .metric-box { margin-top: 16px; padding: 12px 14px; background: var(--accent-dim); border: 1px solid rgba(245,155,0,0.22); border-radius: 10px; color: var(--accent); font-weight: 700; font-size: 13px; line-height: 1.5; } /* big-number metric cards — proof points + economics numbers */ .metric-card { text-align: left; } .metric-big { font-size: 42px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--accent); margin-bottom: 12px; } .metric-label { font-size: 13px; color: var(--text-muted); line-height: 1.65; text-transform: none; } /* economics comparison columns */ .compare-title { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; } .compare-title.bad { color: #C0552F; } .compare-title.good { color: var(--accent); } .compare-item { position: relative; padding-left: 22px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 12px 0; } .compare-item::before { position: absolute; left: 0; top: 0; font-weight: 700; } .compare-item.bad::before { content: '\2014'; color: var(--text-faint); } .compare-item.good::before { content: '\2713'; color: var(--accent); } /* platform demo — copy + video placeholder */ .demo-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; } .video-placeholder { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; padding: 40px; } .play-btn-circle { width: 74px; height: 74px; border-radius: 50%; background: var(--accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 8px 30px rgba(245,155,0,0.35); } .video-cap { color: var(--text-muted); font-size: 13px; line-height: 1.6; max-width: 280px; } @media (max-width: 860px) { .demo-grid { grid-template-columns: 1fr; gap: 28px; } } /* bottom CTA accent panel */ .cta-panel { background: var(--accent); border-radius: var(--radius); padding: 52px; display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 40px; align-items: center; } .cta-panel .t-h2, .cta-panel .t-body { color: #1B1B2E; } .cta-panel .t-body { opacity: 0.80; } .cta-panel .t-accent { color: #FFFFFF; } .cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; } .cta-panel .cta-actions .btn-primary { background: var(--text-primary); color: #FFFFFF; text-align: center; } .cta-panel .cta-actions .btn-secondary { background: transparent; border: 1px solid rgba(27,27,46,0.4); color: var(--text-primary); text-align: center; } .cta-panel .cta-actions .t-small { color: rgba(27,27,46,0.6); margin-top: 4px; } @media (max-width: 860px) { .cta-panel { grid-template-columns: 1fr; padding: 36px; } } /* let long vertical FAQ answers expand fully (no italics anywhere) */ .acc-item.open .acc-a { max-height: 640px; } .acc-q, .acc-a, .t-accent { font-style: normal; } /* ============================================================ FOOTER SITEMAP (multi-column, grouped) + INSIGHTS HUB — v2.1.6 ============================================================ */ /* footer menu rendered as columns: top item = bold heading, children below */ .footer-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .footer-menu > li > a { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--text-primary); margin-bottom: 16px; cursor: pointer; transition: color .18s; } .footer-menu > li > a:hover { color: var(--accent); } /* "Company" style heading: a label, not a link */ .footer-menu > li.footer-col-label > a { pointer-events: none; cursor: default; color: var(--text-primary); } .footer-menu .sub-menu { list-style: none; margin: 0; padding: 0; } .footer-menu .sub-menu li { margin: 9px 0; } .footer-menu .sub-menu a { font-size: 13px; font-weight: 500; color: var(--text-muted); transition: color .18s; } .footer-menu .sub-menu a:hover { color: var(--accent); } @media (max-width: 980px) { .footer-main { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 760px) { .footer-menu { grid-template-columns: repeat(2, 1fr); gap: 28px; } } @media (max-width: 440px) { .footer-menu { grid-template-columns: 1fr; gap: 26px; } } /* Insights hub: grouped category sections */ .insights-group { margin-top: 56px; } .insights-group:first-of-type { margin-top: 8px; } .insights-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .insights-viewall { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; transition: opacity .18s; } .insights-viewall:hover { opacity: 0.75; }