@charset "utf-8"; /* ========================================================================== Parabole.ai — "bold" theme -------------------------------------------------------------------------- A flashier, enterprise-marketing skin (AWS Industrial / Manufacturing feel): gradient hero, filled accent CTAs, elevated rounded cards with hover-lift, tinted section bands, a sticky in-page subnav, animated stat counters and scroll-reveal (both from bold.js). Loads on every page; every rule is scoped to [data-theme="bold"], which every page hardcodes on — the only theme now (the earlier "editorial" bare-styles.css alternative and its footer toggle are retired). Structure/layout still comes from styles.css; this file only restyles. ========================================================================== */ [data-theme="bold"] { --radius: 14px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(15, 24, 30, 0.06), 0 8px 24px rgba(15, 24, 30, 0.07); --shadow-lg: 0 2px 6px rgba(15, 24, 30, 0.08), 0 20px 48px rgba(15, 24, 30, 0.14); --grad: linear-gradient(115deg, #15181A 0%, #2B3034 100%); --grad-soft: linear-gradient(150deg, #FAFAFB 0%, #F1F2F3 100%); --ok: #454C51; --paper: #F6F7F8; } [data-theme="bold"] body { font-size: 17px; background: var(--paper); } [data-theme="bold"] h1, [data-theme="bold"] h2, [data-theme="bold"] h3 { letter-spacing: -0.02em; font-weight: 300; } [data-theme="bold"] .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="bold"] img { border-radius: var(--radius-sm); } [data-theme="bold"] .hdr .logo img, [data-theme="bold"] .ftr .logo img { border-radius: 0; } /* --- header ---------------------------------------------------------- */ [data-theme="bold"] .hdr { background: rgba(244, 246, 247, 0.97); border-bottom: 1px solid rgba(198, 202, 205, 0.7); } [data-theme="bold"] .nav a { transition: color 0.15s; } /* current-page underline — ::before + absolute, so it never changes the item's box (the ::after slot stays free for the dropdown caret) */ [data-theme="bold"] .nav > a[aria-current]::before, [data-theme="bold"] .nav-group > a[aria-current]::before { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--nav-active); } [data-theme="bold"] .hdr .btn { border: 0; color: #fff; background: var(--ink); border-radius: 999px; padding: 10px 18px; box-shadow: 0 6px 16px rgba(15, 24, 30, 0.18); transition: transform 0.15s, box-shadow 0.15s; } [data-theme="bold"] .hdr .btn:hover { background: #2B3034; color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 24, 30, 0.26); } /* --- buttons ------------------------------------------------------- */ [data-theme="bold"] .btn { border-radius: 999px; padding: 12px 22px; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s; } [data-theme="bold"] .hero .acts .btn:first-child, [data-theme="bold"] .cta .btn { border: 0; color: #fff; background: var(--ink); box-shadow: 0 10px 26px rgba(15, 24, 30, 0.20); } [data-theme="bold"] .hero .acts .btn:first-child:hover, [data-theme="bold"] .cta .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(15, 24, 30, 0.28); background: #2B3034; color: #fff; } [data-theme="bold"] .hero .acts .btn:last-child:hover { transform: translateY(-2px); } /* --- hero --------------------------------------------------------- */ [data-theme="bold"] .hero, [data-theme="bold"] .ivhero { position: relative; overflow: hidden; background: var(--grad-soft); padding-top: 84px; } [data-theme="bold"] .hero::before, [data-theme="bold"] .ivhero::before { content: ""; position: absolute; top: -30%; right: -12%; width: 60vw; height: 120%; background: radial-gradient(closest-side, rgba(21, 24, 26, 0.06), rgba(21, 24, 26, 0) 70%), radial-gradient(closest-side, rgba(21, 24, 26, 0.05), rgba(21, 24, 26, 0) 70%); background-position: 30% 20%, 70% 80%; background-repeat: no-repeat; filter: blur(8px); pointer-events: none; } [data-theme="bold"] .hero .wrap, [data-theme="bold"] .ivhero .wrap { position: relative; } [data-theme="bold"] .heroline { border-top: 0; padding-top: 0; } [data-theme="bold"] .hero .eyebrow, [data-theme="bold"] .ivhero > .wrap > .mono:first-child { display: inline-block; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(198, 202, 205, 0.8); box-shadow: var(--shadow); color: var(--ink-2); } [data-theme="bold"] .hero h1, [data-theme="bold"] .ivhero h1 { font-size: clamp(44px, 7.4vw, 92px); } [data-theme="bold"] .hero .sub, [data-theme="bold"] .ivhero .lead { color: #37414A; } [data-theme="bold"] .hero-note { background: #fff; border: 1px solid rgba(198, 202, 205, 0.7); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } /* --- proof band (verified credential strip) --------------------- */ [data-theme="bold"] .proof { background: #0D1012; color: #E4E8EA; padding: 30px 0; } [data-theme="bold"] .proof .wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } [data-theme="bold"] .proof .k { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #9AA0A6; } [data-theme="bold"] .proof p { font-size: clamp(16px, 1.9vw, 20px); color: #F4F6F7; max-width: 70ch; } /* --- stat band --------------------------------------------------- */ [data-theme="bold"] .band { background: linear-gradient(180deg, #EEF2F4, #E6EDF0); border: 0; padding: 26px 0; } [data-theme="bold"] .band .stats { gap: 20px; display: grid; grid-template-columns: repeat(4, 1fr); } [data-theme="bold"] .band .st { background: #fff; border: 0; border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow); position: relative; overflow: hidden; } [data-theme="bold"] .band .st::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--grad); } [data-theme="bold"] .band .st .n { font-size: clamp(30px, 3.2vw, 44px); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="bold"] .band .st .src { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 10px 14px; border-radius: var(--radius-sm); background: #EEF2F4; color: #4A5257; } [data-theme="bold"] .band .st .src .mono { letter-spacing: 0.04em; } /* --- section headers ------------------------------------------- */ [data-theme="bold"] .sec-head > .mono, [data-theme="bold"] .sec > .wrap > .sec-head .mono { display: inline-flex; align-items: center; gap: 8px; color: var(--steel); } [data-theme="bold"] .sec-head > .mono::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); } /* --- method columns as cards --------------------------------- */ [data-theme="bold"] .cols { border: 0; gap: 20px; grid-template-columns: repeat(3, 1fr); } [data-theme="bold"] .col { border: 1px solid rgba(198, 202, 205, 0.6); border-radius: var(--radius); padding: 28px 26px; background: #fff; box-shadow: var(--shadow); transition: transform 0.18s, box-shadow 0.18s; } [data-theme="bold"] .col:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } [data-theme="bold"] .col .tag { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(21, 24, 26, 0.07); color: var(--ink); } /* --- cards / routes / people / legend ----------------------- */ [data-theme="bold"] .card, [data-theme="bold"] .route { border: 1px solid rgba(198, 202, 205, 0.6); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; } [data-theme="bold"] .card:hover, [data-theme="bold"] .route:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; } [data-theme="bold"] .route { padding: 34px; } [data-theme="bold"] .route .go { color: var(--signal); } [data-theme="bold"] .route:hover .go { text-decoration: underline; text-underline-offset: 4px; } [data-theme="bold"] .card .kpi .kn { color: var(--steel); } [data-theme="bold"] .people { border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } [data-theme="bold"] .pp { border: 1px solid rgba(198, 202, 205, 0.6) !important; border-radius: var(--radius); padding: 24px !important; background: #fff; box-shadow: var(--shadow); } [data-theme="bold"] .pp .li { border-bottom-color: var(--steel); color: var(--steel); } [data-theme="bold"] .legend { border: 0; gap: 16px; grid-template-columns: repeat(4, 1fr); } [data-theme="bold"] .lg { border: 1px solid rgba(198, 202, 205, 0.6); border-radius: var(--radius-sm); padding: 18px !important; background: #fff; box-shadow: var(--shadow); } [data-theme="bold"] .lg:last-child { border-right: 1px solid rgba(198, 202, 205, 0.6); } /* --- claim rows (premise / investors) ---------------------- */ [data-theme="bold"] .claim { border-top: 0; } [data-theme="bold"] .crow { border: 1px solid rgba(198, 202, 205, 0.6); border-radius: var(--radius); background: #fff; padding: 26px 28px; margin-bottom: 14px; box-shadow: var(--shadow); } [data-theme="bold"] .crow .ck { color: var(--steel); } [data-theme="bold"] .demo-form { border: 1px solid rgba(198, 202, 205, 0.6); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); } [data-theme="bold"] .demo-form input, [data-theme="bold"] .demo-form select, [data-theme="bold"] .demo-form textarea { border-radius: var(--radius-sm); } [data-theme="bold"] .gap-core { border-radius: var(--radius); border-color: rgba(198, 202, 205, 0.7); box-shadow: var(--shadow); } [data-theme="bold"] .pull { border: 0; border-radius: var(--radius); padding: 40px; background: var(--grad); color: #fff; box-shadow: var(--shadow-lg); } [data-theme="bold"] .pull blockquote { color: #fff; } [data-theme="bold"] .pull .by { color: rgba(255, 255, 255, 0.8); } /* --- dark sections ---------------------------------------- */ [data-theme="bold"] .dark { background: radial-gradient(90rem 40rem at 85% -10%, rgba(255, 255, 255, 0.06), transparent 60%), radial-gradient(70rem 40rem at 0% 120%, rgba(255, 255, 255, 0.03), transparent 55%), #0B0E10; } [data-theme="bold"] .deploy { border-top-color: rgba(255, 255, 255, 0.14); } [data-theme="bold"] .dp { border-color: rgba(255, 255, 255, 0.12); transition: background 0.18s; } [data-theme="bold"] .dp:hover { background: rgba(255, 255, 255, 0.03); } [data-theme="bold"] .dp h3 { display: flex; align-items: baseline; gap: 10px; } [data-theme="bold"] .dp h3::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: #9AA0A6; flex: 0 0 auto; } /* --- oil & gas portfolio -------------------------------- */ [data-theme="bold"] .chainstrip { border: 0; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; } [data-theme="bold"] .chainstrip .cs { border: 1px solid rgba(198, 202, 205, 0.6); border-radius: 999px; padding: 14px 20px; background: #fff; align-items: center; box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s; } [data-theme="bold"] .chainstrip .cs:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } [data-theme="bold"] .chainstrip .cs .ico { flex-basis: 30px; } [data-theme="bold"] .chainstrip .cs .ico svg { width: 30px; height: 30px; } [data-theme="bold"] .seghead { border-bottom: 2px solid var(--ink); } [data-theme="bold"] .seghead .cnt { padding: 4px 10px; border-radius: 999px; background: #EEF2F4; color: #4A5257; } [data-theme="bold"] .case { border: 1px solid rgba(198, 202, 205, 0.55); border-radius: var(--radius); background: #fff; padding: 26px; margin-top: 16px; box-shadow: var(--shadow); transition: box-shadow 0.18s, transform 0.18s; } [data-theme="bold"] .case:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } [data-theme="bold"] .case .shot { border-radius: var(--radius-sm); border-color: rgba(198, 202, 205, 0.7); transition: filter 0.25s; } [data-theme="bold"] .case:hover .shot { filter: grayscale(0); } [data-theme="bold"] .met .mv { color: var(--steel); } [data-theme="bold"] .chip { border-radius: 999px; border-color: rgba(46, 125, 91, 0.4); color: var(--ok); background: rgba(46, 125, 91, 0.08); } [data-theme="bold"] .chip.proto { border-color: rgba(21, 24, 26, 0.28); color: #5E656B; background: rgba(21, 24, 26, 0.05); } /* --- sticky subnav (injected by bold.js) --------------- */ [data-theme="bold"] .subnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(244, 246, 247, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(198, 202, 205, 0.7); } [data-theme="bold"] .subnav .wrap { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; } [data-theme="bold"] .subnav .wrap::-webkit-scrollbar { display: none; } [data-theme="bold"] .subnav a { flex: 0 0 auto; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: #4A5257; padding: 7px 13px; border-radius: 999px; border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; } [data-theme="bold"] .subnav a:hover { color: var(--ink); background: #fff; border-color: rgba(198, 202, 205, 0.7); } [data-theme="bold"] .subnav a.active { color: var(--ink); background: #fff; border-color: rgba(198, 202, 205, 0.9); box-shadow: var(--shadow); } /* --- CTA --------------------------------------------- */ [data-theme="bold"] .cta { background: radial-gradient(60rem 30rem at 100% 0%, rgba(21, 24, 26, 0.05), transparent 60%), #ECEDEF; border: 0; } /* --- footer ---------------------------------------- */ [data-theme="bold"] .ftr h5 { color: #A2ABB0; } [data-theme="bold"] .ftr-b [data-theme-toggle] { color: #B8C1C5; text-decoration: underline; text-underline-offset: 3px; } [data-theme="bold"] .ftr-b [data-theme-toggle] b { color: #fff; text-transform: capitalize; } /* --- scroll reveal (bold.js adds .reveal, then .in) --- */ [data-theme="bold"] .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="bold"] .reveal.in { opacity: 1; transform: none; } /* --- responsive ----------------------------------- */ @media (max-width: 1000px) { [data-theme="bold"] .band .stats { grid-template-columns: 1fr 1fr; } [data-theme="bold"] .cols, [data-theme="bold"] .people, [data-theme="bold"] .legend { grid-template-columns: 1fr; } [data-theme="bold"] .chainstrip { grid-template-columns: 1fr; } [data-theme="bold"] .chainstrip .cs { border-radius: var(--radius-sm); } [data-theme="bold"] .hdr .btn { padding: 8px 14px; font-size: 11px; box-shadow: none; } } @media (max-width: 640px) { [data-theme="bold"] .band .stats { grid-template-columns: 1fr; } [data-theme="bold"] .pull { padding: 26px; } } @media (prefers-reduced-motion: reduce) { [data-theme="bold"] .reveal { opacity: 1; transform: none; transition: none; } [data-theme="bold"] .col:hover, [data-theme="bold"] .card:hover, [data-theme="bold"] .route:hover, [data-theme="bold"] .case:hover, [data-theme="bold"] .chainstrip .cs:hover { transform: none; } }