/* ============================================================= OnlyBizBasics — Design System Ancient-Indian sacred design language for a B2B advisory. ONE shared spine (parchment + gold + vermilion + Eczar/Mukta + jali + temple arches), themed per sector via a small set of --accent tokens. Apply a theme by setting data-sector on any container (usually ): emerald + lotus saffron + sun lapis + yantra-node No attribute = corporate theme (vermilion accent, master mandala). Load fonts: Eczar (display) + Mukta (body) from Google Fonts. ============================================================= */ /* ---------- 1. TOKENS : shared brand spine ---------- */ :root{ /* surfaces & ink (constant across all sectors) */ --indigo:#1E1433; --indigo-deep:#150D26; --ink:#2B1C12; --parchment:#F3E9D2; --parchment-2:#ECDFC2; --card:#FBF5E7; --line:#D9C9A4; --muted:#6E5B43; --muted-on-dark:#C9B89A; /* the unifying metals (constant) */ --gold:#BE8A2E; --gold-light:#E4C173; --gold-soft:#F0D79A; --vermilion:#B23A2E; --vermilion-deep:#8E2A20; /* THEME TOKENS — overridden per sector below. Default = corporate (vermilion accent). */ --accent:#B23A2E; /* primary sector colour (on light) */ --accent-deep:#8E2A20; /* darker, for hover/active */ --accent-light:#E0907E; /* lighter, for use on dark bg */ --accent-tint:rgba(178,58,46,.08); /* soft wash */ --hero-glow:#2a1b4d; /* radial tint at top of dark hero */ /* type */ --display:"Eczar",Georgia,serif; --body:"Mukta",system-ui,sans-serif; /* scale */ --maxw:1180px; --r:6px; --shadow:0 2px 4px rgba(43,28,18,.08), 0 22px 48px -28px rgba(43,28,18,.55); } /* ---------- 2. SECTOR THEMES (minor overrides only) ---------- */ [data-sector="corporate"]{ --accent:#B23A2E; --accent-deep:#8E2A20; --accent-light:#E0907E; --accent-tint:rgba(178,58,46,.08); --hero-glow:#2a1b4d; } [data-sector="healthcare"]{ --accent:#1F5E4E; --accent-deep:#16463A; --accent-light:#5FB89E; --accent-tint:rgba(31,94,78,.08); --hero-glow:#1d4a3f; } [data-sector="energy"]{ --accent:#C2702A; --accent-deep:#9E5A20; --accent-light:#E9A85A; --accent-tint:rgba(194,112,42,.09); --hero-glow:#5a3a1e; } [data-sector="tech"]{ --accent:#33407F; --accent-deep:#283566; --accent-light:#8C97D8; --accent-tint:rgba(51,64,127,.08); --hero-glow:#2a2d57; } /* ---------- 3. RESET / BASE ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--body);background:var(--parchment);color:var(--ink); line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} /* ---------- 4. TYPOGRAPHY ---------- */ h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;color:var(--ink)} h1{font-size:clamp(34px,5.3vw,58px);font-weight:800} h2{font-size:clamp(28px,4.2vw,44px)} h3{font-size:22px} p{max-width:66ch} .lede{font-size:clamp(18px,2.1vw,20px);color:var(--muted);max-width:60ch} /* ---------- 5. LAYOUT & UTILITIES ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} .section{padding:88px 0} .section--tight{padding-top:0} /* eyebrow + rule (eyebrow & gem pick up the sector accent) */ .eyebrow{font-family:var(--body);font-weight:600;font-size:12.5px; letter-spacing:.26em;text-transform:uppercase;color:var(--accent)} .eyebrow.on-dark{color:var(--gold-light)} .rule{display:flex;align-items:center;gap:14px;color:var(--gold)} .rule::before,.rule::after{content:"";height:1px;flex:1; background:linear-gradient(90deg,transparent,var(--gold),transparent)} .rule .gem{width:9px;height:9px;background:var(--accent);transform:rotate(45deg);flex:none} .head{max-width:64ch;margin:0 auto 48px;text-align:center} .head.left{margin-left:0;text-align:left} .head h2{margin:14px 0} /* jali lattice divider — stroke colour follows .jali { color } */ .jali{height:30px;width:100%;opacity:.5;color:var(--gold)} /* reveal-on-scroll (pair with JS adding .in) */ .reveal{opacity:0;transform:translateY(16px); transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* sector emblem swap: show only the active sector's emblem. Set data-sector="corporate" for the master mandala. */ .emblem{display:none} [data-sector="corporate"] .emblem-corporate{display:block} [data-sector="healthcare"] .emblem-healthcare{display:block} [data-sector="energy"] .emblem-energy{display:block} [data-sector="tech"] .emblem-tech{display:block} /* ---------- 6. COMPONENTS ---------- */ /* 6.1 Nav */ .obb-nav{position:sticky;top:0;z-index:60;background:rgba(243,233,210,.9); backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .obb-nav .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px} .brand{display:flex;align-items:center;gap:12px;font-family:var(--display); font-weight:700;font-size:21px;letter-spacing:.01em} .brand svg{width:30px;height:30px;flex:none} .brand img{height:30px;width:auto;flex:none;display:block} .nav-links{display:flex;align-items:center;gap:28px;font-weight:500;font-size:15.5px} .nav-links a:not(.btn){color:var(--muted)} .nav-links a:not(.btn):hover{color:var(--accent)} .nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:3px; font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;padding:8px 12px} /* 6.2 Buttons — gold is the universal conversion CTA (brand spine). .btn-accent uses the sector colour for secondary emphasis. */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body); font-weight:600;font-size:16px;padding:14px 28px;border:1.5px solid transparent; border-radius:2px;cursor:pointer; transition:transform .16s ease,box-shadow .2s ease,background .2s,color .2s,border-color .2s} .btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px} .btn-gold{background:var(--gold);color:#3a2a08} .btn-gold:hover{background:var(--gold-light);transform:translateY(-2px)} .btn-accent{background:var(--accent);color:#FBF1DE} .btn-accent:hover{background:var(--accent-deep);transform:translateY(-2px)} .btn-ghost{background:transparent;border-color:var(--accent);color:var(--accent)} .btn-ghost:hover{background:var(--accent-tint)} .btn-ghost.on-dark{color:var(--gold-light);border-color:rgba(228,193,115,.5)} .btn-ghost.on-dark:hover{border-color:var(--gold-light);background:rgba(228,193,115,.08)} /* 6.3 Hero (dark) — glow tint changes per sector via --hero-glow */ .obb-hero{position:relative;color:#FBF1DE;overflow:hidden; background:radial-gradient(130% 120% at 78% 0%, var(--hero-glow) 0%, var(--indigo) 52%, var(--indigo-deep) 100%)} .obb-hero .hero-in{position:relative;display:grid;grid-template-columns:1.08fr .92fr; gap:48px;align-items:center;padding:84px 0 92px} .obb-hero h1{color:#FBF1DE;margin:18px 0} .obb-hero h1 .hl{color:var(--gold-light)} .obb-hero .lede{color:var(--muted-on-dark);max-width:50ch} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px} .gateways{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px} .gateway{font-size:13.5px;font-weight:500;color:var(--gold-light); border:1px solid rgba(228,193,115,.35);border-radius:2px;padding:7px 15px;background:rgba(228,193,115,.05)} .hero-art{display:grid;place-items:center} .hero-art svg{width:min(420px,92%);height:auto;filter:drop-shadow(0 18px 50px rgba(0,0,0,.45))} .ring-spin{transform-origin:center;animation:obb-spin 60s linear infinite} .ring-spin-rev{transform-origin:center;animation:obb-spin 90s linear infinite reverse} @keyframes obb-spin{to{transform:rotate(360deg)}} /* verse band */ .verse{border-top:1px solid rgba(228,193,115,.2);background:var(--indigo-deep);color:var(--muted-on-dark)} .verse-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:8px 16px;padding:16px 0;text-align:center} .verse .sa{font-family:var(--display);font-weight:600;color:var(--gold-light);font-size:18px} .verse .tr{font-size:13px;letter-spacing:.04em} /* 6.4 Definition block (GEO definition-first) */ .define{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:34px 40px;box-shadow:var(--shadow);position:relative} .define::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px; background:linear-gradient(var(--gold),var(--accent))} .define p{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.4vw,26px); line-height:1.5;color:var(--ink);max-width:none} .define .kw{color:var(--accent)} /* 6.5 Sector / arch card */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .scard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent); border-radius:var(--r);padding:0 30px 30px;box-shadow:var(--shadow); transition:transform .2s ease;position:relative;overflow:hidden} .scard:hover{transform:translateY(-8px)} .scard .arch{height:78px;margin:0 -30px 6px;display:grid;place-items:center;color:var(--accent)} .scard .arch svg{height:78px;width:auto} .scard .tag{font-family:var(--body);font-weight:600;font-size:11.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .scard h3{margin:6px 0 10px;font-size:23px} .scard .desc{color:var(--muted);font-size:15px;margin-bottom:18px} .scard .go{margin-top:20px;display:inline-flex;gap:8px;font-weight:600;font-size:14.5px;color:var(--accent)} .offerings{list-style:none;display:grid;gap:9px} .offerings li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:500} .offerings .tick{flex:none;width:18px;height:18px;margin-top:3px;color:var(--accent)} /* 6.6 Feature / ecosystem card (works on dark indigo sections) */ .eco{background:var(--indigo);color:#FBF1DE} .eco .head h2{color:#FBF1DE} .grid-eco{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .ecard{background:rgba(228,193,115,.05);border:1px solid rgba(228,193,115,.22); border-radius:var(--r);padding:28px;transition:background .2s,transform .2s,border-color .2s} .ecard:hover{background:rgba(228,193,115,.1);transform:translateY(-6px);border-color:var(--gold-light)} .ecard .ic{width:38px;height:38px;margin-bottom:14px;color:var(--accent-light)} .ecard h3{color:var(--gold-light);font-size:19px;margin-bottom:8px} .ecard p{color:var(--muted-on-dark);font-size:14.5px;max-width:none} /* 6.7 Stat */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px} .stat .n{font-family:var(--display);font-size:34px;font-weight:700;color:var(--accent)} .stat .n .u{color:var(--gold)} .stat .l{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-weight:600} /* 6.8 Lead-gen band + form */ .lead{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold); border-radius:var(--r);padding:44px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px; align-items:center;box-shadow:var(--shadow)} .lead .tagk{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:var(--accent)} .form{display:flex;flex-direction:column;gap:12px} .form .row{display:flex;gap:10px;flex-wrap:wrap} .input{flex:1;min-width:0;width:100%;font-family:var(--body);font-size:15px; padding:13px 15px;border:1.5px solid var(--line);border-radius:3px;background:#fff;color:var(--ink)} .input:focus{outline:none;border-color:var(--accent)} .form small{color:var(--muted);font-size:12.5px} .form-ok{display:none;color:var(--accent-deep);font-weight:600;font-size:14px} /* 6.9 FAQ */ .faq{max-width:860px;margin:0 auto;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;padding:22px 6px;font-family:var(--display); font-weight:600;font-size:19px;display:flex;justify-content:space-between;gap:18px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq .pm{color:var(--accent);font-family:var(--display);flex:none;transition:transform .2s} .faq details[open] .pm{transform:rotate(45deg)} .faq .ans{padding:0 6px 24px;color:var(--muted);max-width:74ch} .faq .ans .kw{color:var(--accent);font-weight:600} /* 6.10 Footer */ .obb-foot{background:var(--indigo-deep);color:var(--muted-on-dark);padding:60px 0 30px;font-size:14.5px} .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px; padding-bottom:34px;border-bottom:1px solid rgba(228,193,115,.16)} .obb-foot h5{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--gold-light);margin-bottom:14px} .obb-foot a{display:block;padding:4px 0;color:var(--muted-on-dark)} .obb-foot a:hover{color:#FBF1DE} .foot-brand .brand{color:#FBF1DE;margin-bottom:12px} .foot-brand p{font-size:14px;max-width:38ch;color:var(--muted-on-dark)} .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;font-size:12.5px} /* 6.11 Closing CTA box (dark, themes via --hero-glow) */ .final{text-align:center} .final .box{position:relative;color:#FBF1DE;border-radius:8px;padding:60px 32px;overflow:hidden; background:radial-gradient(120% 140% at 50% -20%, var(--hero-glow), var(--indigo) 60%, var(--indigo-deep))} .final h2{color:#FBF1DE;max-width:20ch;margin:14px auto} .final .lede{color:var(--muted-on-dark);margin:0 auto 28px} .final .hero-cta{justify-content:center} /* ---------- 7. RESPONSIVE ---------- */ @media (max-width:920px){ .obb-hero .hero-in{grid-template-columns:1fr;gap:34px;padding:60px 0} .hero-art{order:-1} .grid3,.grid-eco{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .lead{grid-template-columns:1fr;padding:32px} .foot-grid{grid-template-columns:1fr 1fr} .nav-links{position:absolute;top:70px;left:0;right:0;flex-direction:column; align-items:flex-start;gap:4px;background:var(--parchment);border-bottom:1px solid var(--line); padding:14px 26px 22px;display:none} .nav-links.open{display:flex} .nav-links a:not(.btn){padding:8px 0} .nav-toggle{display:block} } @media (max-width:540px){ .stats,.foot-grid{grid-template-columns:1fr} .section{padding:62px 0} } @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .ring-spin,.ring-spin-rev{animation:none} html{scroll-behavior:auto} }