/* ============================================================ IAASTHA — WordPress integration components. Layered on top of assets/css/site.css (design tokens + chrome). Only GENERIC, shared components live here; page-specific section styles are ported inline into their templates (guarded print-once). ============================================================ */ /* ---------- live "decision ledger" / build-monitor panel ---------- Values are the prototype's verbatim (build/index.html, build/gcc.html, build/services/agentic-ai.html all define this block identically). */ .panel{background:var(--panel);border:1px solid rgba(252,252,253,0.12);border-radius:6px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.5);} .panel__head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid rgba(252,252,253,0.12);} .panel__title{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;color:rgba(252,252,253,0.55);} .live{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--violet-light);} .live__dot{width:6px;height:6px;border-radius:50%;background:var(--violet);animation:pulse 1.6s ease-in-out infinite;display:inline-block;} .panel__foot{padding:11px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:rgba(252,252,253,0.3);} .ledger-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(252,252,253,0.07);font-family:var(--font-mono);font-size:11px;} .ledger-row .t{color:rgba(252,252,253,0.5);} .ledger-row .d{color:var(--violet-light);min-width:54px;} .ledger-row .m{flex:1;color:rgba(252,252,253,0.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .chip{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;padding:3px 7px;border-radius:2px;white-space:nowrap;} .chip--on{background:rgba(108,56,245,0.18);border:1px solid transparent;color:var(--violet-light);} .chip--off{background:transparent;border:1px solid rgba(252,252,253,0.3);color:rgba(252,252,253,0.6);} /* GCC ramp monitor variant */ .ramp__meter{display:flex;align-items:center;gap:20px;padding:16px;border-bottom:1px solid rgba(252,252,253,0.08);} .ramp__fte{font-family:var(--font-display);font-weight:600;font-size:34px;letter-spacing:-0.02em;line-height:1;} .ramp__ftelabel{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;color:rgba(252,252,253,0.6);margin-top:5px;} .ramp__bars{display:flex;gap:3px;} .ramp__bars i{flex:1;height:5px;display:block;} .ramp__phase{display:flex;justify-content:space-between;gap:8px;margin-top:7px;font-family:var(--font-mono);font-size:8px;letter-spacing:0.06em;color:rgba(252,252,253,0.55);white-space:nowrap;} .ramp__phase .on{color:var(--violet-light);} .ramp-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid rgba(252,252,253,0.07);font-family:var(--font-mono);font-size:11px;} .ramp-row .t{color:rgba(252,252,253,0.5);} .ramp-row .d{color:var(--violet-light);min-width:70px;} .ramp-row .m{flex:1;color:rgba(252,252,253,0.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* ---------- shared hero band (template-parts/hero.php) ---------- */ .hero-band__title{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,5.4vw,84px);letter-spacing:-0.03em;line-height:1.04;margin:20px 0 0;max-width:16ch;} .hero-band__title .accent{color:var(--violet-light);} .hero-band__lede{margin:22px 0 0;max-width:620px;font-size:18px;line-height:1.65;color:rgba(252,252,253,0.64);font-family:var(--font-body);} .hero-band__cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;} /* ---------- closing CTA band (template-parts/cta-band.php) ---------- */ .cta-band__inner{max-width:820px;} .cta-band__title{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.6vw,52px);letter-spacing:-0.02em;line-height:1.08;margin:16px 0 0;} .zone--violet .cta-band__title,.zone--violet .cta-band__body{color:#fff;} .cta-band__body{margin:18px 0 0;font-size:17px;line-height:1.65;color:rgba(252,252,253,0.7);font-family:var(--font-body);max-width:640px;} .cta-band__actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;} /* ---------- custom logo ---------- add_theme_support('custom-logo') only hints the media cropper, and with flex-height/flex-width WP prints the image at its uploaded size — so an uncapped upload blows the header open. The prototype's brand mark is text (.brand, 18px), so cap the image to the same 40px band. Lives here, not in site.css: that file is a byte-identical copy of the prototype's stylesheet and must stay that way. */ .custom-logo-link{display:inline-flex;align-items:center;line-height:0;} .custom-logo{height:40px;width:auto;max-width:100%;display:block;} /* ---------- menu-driven mega panels ---------- The nav walker builds panels from a real WordPress menu and emits .megamenu--menu / --cols / --right, .mm-col, .mm-col--split and .mm-group__title. None of those had any CSS, so every panel fell back to the bare .megamenu rule — which sets no width — and collapsed to a narrow shrink-to-fit dropdown. The prototype's panels are wide: .megamenu--services is 520px across two columns, .megamenu--industries 340px. These rules give the menu-driven equivalents the same geometry. */ .megamenu--menu{width:340px;} .megamenu--menu .mm-ind__label{display:block;} /* Multi-column panel: the walker sets --mm-cols to the column count. */ .megamenu--cols{width:min(calc(var(--mm-cols,2) * 260px), calc(100vw - 48px));display:grid;grid-template-columns:repeat(var(--mm-cols,2),minmax(0,1fr));gap:2px;align-items:start;} .megamenu--cols .mm-all{grid-column:1 / -1;} /* A long flat list splits inside its single column rather than running tall. */ .mm-col--split{column-count:2;column-gap:2px;} .mm-col--split > a{break-inside:avoid;} .megamenu--menu:has(.mm-col--split){width:520px;} /* Group heading above a column of links. */ .mm-group__title{display:block;padding:10px 12px 6px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;color:rgba(252,252,253,0.45);} /* Panels near the right edge open leftwards so they cannot overflow. */ .megamenu--right{left:auto;right:0;} /* Descriptions inside menu-driven rows, matching .mm-svc__desc. */ .mm-ind__desc{display:block;font-family:var(--font-body);font-size:11px;color:rgba(252,252,253,0.5);margin-top:3px;letter-spacing:0;} .megamenu--menu .mm-ind,.megamenu--cols .mm-ind{align-items:flex-start;} @media (max-width:1100px){ .megamenu--cols{width:min(calc(var(--mm-cols,2) * 220px), calc(100vw - 32px));} } /* Mobile drawer group heading — the walker emits this for a menu item that has children; it had no rule, so the heading rendered as unstyled inline text indistinguishable from the links under it. Matches .mm-group__title. */ .drawer__subhead{display:block;padding:14px 0 6px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;color:rgba(252,252,253,0.45);} /* ---------- breadcrumbs ---------- */ .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--body);} .crumbs li{display:flex;align-items:center;gap:8px;} .crumbs li:not(:last-child)::after{content:"/";color:var(--violet);opacity:0.6;} .crumbs a{color:var(--body);} .crumbs a:hover{color:var(--violet-hover);} .crumbs [aria-current="page"]{color:var(--violet-hover);} .crumbs--dark,.crumbs--dark a,.crumbs--dark [aria-current="page"]{color:rgba(252,252,253,0.55);} .crumbs--dark a:hover{color:var(--paper);} /* ---------- pagination ---------- */ .iaastha-pagination{margin-top:48px;} .iaastha-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:12px;} .iaastha-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--hair-ink);border-radius:2px;color:var(--ink-text);transition:background .12s ease,border-color .12s ease;} .iaastha-pagination .page-numbers:hover{background:var(--tint);border-color:var(--violet);} .iaastha-pagination .page-numbers.current{background:var(--violet);color:#fff;border-color:var(--violet);} .iaastha-pagination .page-numbers.dots{border:none;} /* ---------- search form ---------- */ .search-form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px;} .search-form__field{flex:1 1 240px;min-height:50px;padding:0 16px;border:1px solid var(--hair-ink);border-radius:2px;font-family:var(--font-body);font-size:15px;background:var(--paper);color:var(--ink-text);} .search-form__field:focus{outline:none;border-color:var(--violet);} .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ---------- generic index list / cards ---------- */ .index-list{display:flex;flex-direction:column;} .index-row--3{grid-template-columns:120px 1fr 40px;} .index-row__title{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2vw,24px);letter-spacing:-0.01em;} .index-empty{font-size:16px;color:var(--body);margin-bottom:20px;} @media (max-width:640px){ .index-row--3{grid-template-columns:1fr 32px;} .index-row--3 .idx{grid-column:1 / -1;margin-bottom:4px;} } /* card grid helper for archives */ .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1px;background:var(--hair-ink);border:1px solid var(--hair-ink);} .card{background:var(--paper);padding:28px 26px;display:flex;flex-direction:column;gap:12px;transition:background .12s ease;min-width:0;} .card:hover{background:var(--tint);} .card__eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--violet);} .card__title{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-0.01em;color:var(--ink-text);} .card__desc{font-size:14.5px;line-height:1.6;color:var(--body);} .card__meta{margin-top:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:rgba(14,14,18,0.55);display:flex;gap:12px;flex-wrap:wrap;} .card__thumb{aspect-ratio:3/2;overflow:hidden;background:var(--alt);margin:-28px -26px 4px;} .card__thumb img{width:100%;height:100%;object-fit:cover;display:block;} /* ---------- decorative motif tiles (service cards) ---------- */ .motif{position:relative;width:100%;aspect-ratio:2/1;border:1px solid var(--hair-ink);border-radius:4px;overflow:hidden;background:var(--alt);} .motif__grid{position:absolute;inset:0;background-image: repeating-linear-gradient(0deg,rgba(14,14,18,0.05) 0 1px,transparent 1px 22px), repeating-linear-gradient(90deg,rgba(14,14,18,0.05) 0 1px,transparent 1px 22px);} .motif__label{position:absolute;left:12px;bottom:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;color:var(--violet-hover);} .motif::after{content:"";position:absolute;inset:20% 16%;border:1.5px solid var(--violet);opacity:0.5;} .motif--orbit::after{border-radius:50%;} .motif--rings::after{border-radius:50%;box-shadow:0 0 0 10px rgba(108,56,245,0.14);} .motif--bars::after{border:none;background:linear-gradient(90deg,var(--violet) 0 12%,transparent 12% 20%,var(--violet) 20% 40%,transparent 40% 48%,var(--violet) 48% 64%,transparent 64% 72%,var(--violet) 72% 100%);opacity:0.5;} .motif--pipeline::after,.motif--flow::after{inset:44% 16%;border:none;border-top:1.5px dashed var(--violet);} .motif--histogram::after{border:none;background:repeating-linear-gradient(90deg,var(--violet) 0 8%,transparent 8% 16%);opacity:0.45;} .motif--nodes::after{border-radius:50%;box-shadow:36px 0 0 -4px var(--violet),-36px 0 0 -4px var(--violet);} .motif--roadmap::after{inset:46% 14%;border:none;border-top:2px solid var(--violet);} /* ---------- forms (contact + comments) ---------- */ .frm{display:flex;flex-direction:column;gap:16px;max-width:560px;} .frm__row{display:flex;flex-direction:column;gap:7px;} .frm__label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--body);} .frm__input,.frm__textarea,.frm__select{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--hair-ink);border-radius:2px;font-family:var(--font-body);font-size:15px;background:var(--paper);color:var(--ink-text);} .frm__textarea{min-height:140px;resize:vertical;} .frm__input:focus,.frm__textarea:focus,.frm__select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 2px rgba(108,56,245,0.15);} .frm__error{font-family:var(--font-mono);font-size:11px;color:#C0392B;min-height:14px;} .frm__success{border:1px dashed var(--violet);background:var(--tint);border-radius:4px;padding:22px 24px;} .frm__success-stamp{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;color:var(--violet);} /* ---------- article / single content typography ---------- */ .entry-content{font-size:17px;line-height:1.8;color:var(--body);max-width:760px;} .entry-content h2{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-0.02em;color:var(--ink-text);margin:44px 0 16px;} .entry-content h3{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--ink-text);margin:32px 0 12px;} .entry-content p{margin:0 0 20px;} .entry-content a{color:var(--violet-hover);text-decoration:underline;text-underline-offset:2px;} .entry-content a:hover{color:var(--violet);} .entry-content blockquote{margin:28px 0;padding:6px 0 6px 24px;border-left:2px solid var(--violet);font-family:var(--font-display);font-size:22px;line-height:1.4;color:var(--ink-text);} .entry-content ul,.entry-content ol{margin:0 0 20px;padding-left:22px;} .entry-content li{margin-bottom:8px;} .entry-content img{max-width:100%;height:auto;border-radius:4px;} .entry-content figure{margin:28px 0;} .entry-content figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;color:rgba(14,14,18,0.55);margin-top:8px;} .entry-content .wp-block-pullquote,.entry-content .wp-block-quote.is-style-large{border:none;border-left:2px solid var(--violet);} /* utility */ .zone-pad{padding-top:clamp(72px,9vw,110px);padding-bottom:clamp(72px,9vw,110px);} .error-404{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(72px,9vw,110px);} .error-404__links{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;} /* Base placeholder slot. Values are the prototype's most common variant (build/careers.html, build/gcc.html, build/insights/**). Pages that vary it (about, industries, leadership) re-declare .img-slot in their own template, which wins because template