/* page-specific additions for case-study. Generated. */ /* ============ v3 additions: canonical case-study template ============ */ /* radius tokens referenced by the v2 rules (stat-card, def-card, qa…) but never declared in the homepage CSS */ :root{--r-md:14px;--r-lg:22px} /* no-JS fallback for reveal animations — swaps html.no-js → html.js before paint */ html:not(.js) .rv{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;font-weight:700;padding:.6rem 1rem;border-radius:0 0 12px 0} .skip:focus{left:0} .band-white{background:#fff;border-block:1px solid var(--line)} /* --- page-head: case hero (headline + meta chips + CTAs left · 2×2 KPI stack right) --- */ .sd-hero.cs-hero{grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.6rem)} .cs-hero h1{font-size:clamp(2.1rem,4vw,3.3rem)} .cs-hero .hl{color:var(--green-deep)} .cs-hero .lead{margin-top:1rem} .cs-hero .hero-cta{margin-top:1.6rem} .cs-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem} .cs-chip{display:inline-flex;gap:.45rem;align-items:baseline;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.42rem 1rem;font-size:.84rem;color:var(--ink);font-weight:600} .cs-chip .k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:500} .stat-stack.stat-2x2{grid-template-columns:1fr 1fr} .stat-stack.stat-2x2 .stat-card{flex-direction:column;align-items:flex-start;gap:.35rem;padding:1.25rem 1.3rem} .stat-stack.stat-2x2 .stat-card b{font-size:clamp(1.7rem,2.6vw,2.25rem);line-height:1.05;color:var(--ink);box-shadow:inset 0 -7px 0 var(--leaf-2),inset 0 -10px 0 var(--lime);padding:0 .08em} .stat-stack.stat-2x2 .stat-card span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:500} /* --- scoreboard: the .term terminal block as a full-width dark band --- */ .term-band{padding:clamp(56px,7vw,88px) 0;border-block:1px solid var(--dark-line)} .term-band .sec-head{max-width:760px} .term-band .term-note{color:#8A969B} .term-col.dim .site{color:#C7D0CC} .term-col.dim .trow .v{color:#AEB9BB;font-weight:500} /* --- proof: the terminal scoreboard (.term) — the one place lime text is used on dark --- */ .term{background-color:#15191B;background-image:linear-gradient(rgba(140,198,63,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(140,198,63,.045) 1px,transparent 1px);background-size:34px 34px;border:1px solid #2C3438;border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px rgba(21,25,27,.28);color:#C7D0CC} .term-bar{display:flex;align-items:center;gap:8px;background:#1D2326;border-bottom:1px solid #2C3438;padding:12px 18px} .term-bar i{width:11px;height:11px;border-radius:50%;background:#2C3438;display:inline-block} .term-bar i.g{background:var(--lime)} .term-title{font-family:var(--font-mono);font-size:.72rem;color:#8A969B;margin-left:8px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .term-body{padding:26px 28px 24px;font-family:var(--font-mono)} .term-cmd{font-size:.82rem;color:#C7D0CC;margin-bottom:24px;word-break:break-word} .term-cmd .ps{color:var(--lime);font-weight:600} .term-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px} .term-col .site{font-size:.8rem;font-weight:600;color:var(--lime);letter-spacing:.06em;margin:0 0 16px;padding-bottom:12px;border-bottom:1px dashed #2C3438} .term-col.alt .site{color:var(--lime-soft)} .term-col .site small{color:#8A969B;font-weight:500;letter-spacing:.1em} .trow{display:flex;align-items:baseline;gap:10px;padding:7px 0;font-size:.8rem} .trow .k{color:#8A969B;letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;font-weight:500;flex:none;max-width:48%} .trow .fill{flex:1;min-width:18px;border-bottom:1px dotted #3A4448;transform:translateY(-4px)} .trow .v{color:var(--lime);font-weight:600;font-size:.94rem;flex:none;max-width:58%;text-align:right} .term-col.alt .trow .v{color:var(--lime-soft)} .term-status{margin-top:24px;font-size:.74rem;color:#8A969B;letter-spacing:.04em} .term-status b{color:var(--lime);font-weight:600} .term-note{font-family:var(--font-mono);font-size:.72rem;color:var(--mute);letter-spacing:.05em;margin:-1.2rem 0 1.2rem} /* --- report body: about, challenge, strategy, results --- */ .about-grid.cs-about{grid-template-columns:1.45fr 1fr;align-items:start} .cs-about .art p:first-child{margin-top:0} .client-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden;position:sticky;top:96px} .client-card .cc-top{background:var(--leaf);border-bottom:1px solid var(--line);padding:1rem 1.4rem;font-family:var(--font-mono);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)} .client-card dl{padding:.5rem 1.4rem .9rem} .client-card .row{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)} .client-card .row:last-child{border-bottom:0} .client-card dt{font-family:var(--font-mono);font-weight:500;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);flex:none;padding-top:.2rem} .client-card dd{color:var(--ink);font-weight:600;font-size:max(15px,.92rem);text-align:right} .ch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem} .ch-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.35rem;transition:transform .2s,box-shadow .2s} .ch-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .ch-card .n{font-family:var(--font-mono);font-weight:600;font-size:.76rem;color:var(--green-deep);letter-spacing:.12em} .ch-card h3{font-size:1.06rem;margin:.65rem 0 .45rem} .ch-card p{font-size:max(15px,.92rem)} .sec-grid{display:grid;grid-template-columns:272px minmax(0,1fr);gap:clamp(2rem,5vw,3.6rem);align-items:start} .sec-grid > *{min-width:0} .sec-side{position:sticky;top:96px} .sec-side .sec-head{margin-bottom:0} .sec-side h2{font-size:clamp(1.6rem,2.4vw,2.05rem)} .pull-metric{margin-top:2rem;padding-top:1.1rem;border-top:3px solid var(--lime)} .pull-num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,4vw,3.3rem);letter-spacing:-.03em;line-height:1;color:var(--ink)} .pull-cap{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:.65rem;line-height:1.7} .steps{list-style:none} .step{display:flex;gap:1.4rem;align-items:flex-start;padding:1.4rem 0;border-bottom:1px solid var(--line)} .step:first-child{padding-top:0} .step:last-child{border-bottom:0;padding-bottom:0} .step .n{flex:none;width:52px;height:52px;border-radius:14px;background:var(--leaf);border:1px solid var(--leaf-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:.88rem;color:var(--green-deep)} .step h3{font-size:1.1rem;margin-bottom:.3rem} .step p{font-size:.95rem} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)} .cs-table{border-collapse:collapse;width:100%;min-width:440px} .cs-table caption{text-align:left;font-family:var(--font-mono);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);padding:1.05rem 1.3rem .55rem} .cs-table th,.cs-table td{padding:.85rem 1.3rem;text-align:left;font-size:max(15px,.93rem);border-top:1px solid var(--line)} .cs-table thead th{font-family:var(--font-mono);font-weight:600;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border-top:0} .cs-table tbody th{font-weight:600;color:var(--ink)} .cs-table td.before{font-family:var(--font-mono);font-size:max(15px,.9rem);color:var(--mute)} .cs-table td.after{font-family:var(--font-mono);font-weight:600;color:var(--green-deep);white-space:nowrap} .cs-table td.after .up{font-size:.7em;margin-right:.4em} .exhibit{margin-top:1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.5rem 1.1rem;box-shadow:var(--shadow-sm)} .exhibit-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem} .exhibit-head h3{font-size:1.12rem} .exhibit-key{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--mute);display:flex;align-items:center;gap:.5rem} .exhibit-key i{width:12px;height:12px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);display:inline-block} .exhibit svg{width:100%;height:auto} .exhibit figcaption{font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);border-top:1px solid var(--line);margin-top:.9rem;padding-top:.9rem;line-height:1.7} /* Exhibit A draw-in: runs only with JS (html.js) once the figure reveals; reduced-motion and no-JS show it fully drawn */ html.js .exhibit .chart-line{stroke-dasharray:1;stroke-dashoffset:1} html.js .exhibit.in .chart-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .25s} html.js .exhibit .chart-area,html.js .exhibit .chart-dot,html.js .exhibit .chart-tag{opacity:0;transition:opacity .5s ease} html.js .exhibit.in .chart-area,html.js .exhibit.in .chart-dot,html.js .exhibit.in .chart-tag{opacity:1} html.js .exhibit.in .chart-area{transition-duration:.9s;transition-delay:1.1s} html.js .exhibit.in .chart-dot.p1{transition-delay:.4s} html.js .exhibit.in .chart-dot.p2{transition-delay:.9s} html.js .exhibit.in .chart-dot.p3{transition-delay:1.3s} html.js .exhibit.in .chart-dot.p4,html.js .exhibit.in .chart-tag{transition-delay:1.8s} @media (prefers-reduced-motion:reduce){ html.js .exhibit .chart-line{stroke-dashoffset:0} html.js .exhibit .chart-area,html.js .exhibit .chart-dot,html.js .exhibit .chart-tag{opacity:1} } /* --- testimonial, related, cta --- */ .quote-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md);padding:clamp(1.8rem,4vw,2.8rem) clamp(1.5rem,4vw,3rem);max-width:880px;margin:0 auto;position:relative;overflow:hidden} .quote-card::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(180deg,var(--lime),var(--lime-soft))} .quote-card::after{content:"\201C";position:absolute;top:-.12em;right:.15em;font-family:var(--font-display);font-weight:800;font-size:10rem;line-height:1;color:var(--leaf-2);pointer-events:none} .quote-card blockquote{position:relative;z-index:1} .quote-card blockquote p{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:clamp(1.2rem,2.3vw,1.5rem);line-height:1.4;letter-spacing:-.01em} .quote-who{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;position:relative;z-index:1} .quote-who b{display:block;color:var(--ink);font-size:.98rem} .quote-who span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} a.case-card{color:inherit;text-decoration:none !important} .case-card .ind{font-family:var(--font-mono);font-weight:600;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);background:var(--leaf);border:1px solid var(--leaf-2);border-radius:999px;padding:.3rem .75rem;width:max-content} .case-card h3{font-size:1.08rem;line-height:1.3} .case-card .go{margin-top:auto;font-weight:700;font-size:.9rem;color:var(--ink)} .cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;position:relative;z-index:1} .cta-phone{display:inline-block;margin-top:1.2rem;font-family:var(--font-mono);font-weight:600;font-size:.88rem;letter-spacing:.06em;color:var(--lime-soft);position:relative;z-index:1} /* --- responsive (mirrors the 1020 / 860 / 640 breakpoints of the homepage) --- */ @media (max-width:1020px){ .sd-hero.cs-hero{grid-template-columns:minmax(0,1fr);gap:1.8rem} .ch-grid{grid-template-columns:repeat(2,1fr)} .sec-grid{grid-template-columns:minmax(0,1fr);gap:1.6rem} .sec-side{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:end} .pull-metric{margin-top:0;min-width:180px} .client-card{position:static} } @media (max-width:860px){ .about-grid.cs-about{grid-template-columns:minmax(0,1fr)} .term-grid{grid-template-columns:1fr;gap:26px} } @media (max-width:640px){ .term-body{padding:20px 16px} .trow{flex-wrap:wrap;row-gap:2px} .trow .k{max-width:none} .trow .v{max-width:100%} .stat-stack.stat-2x2{gap:.7rem} .stat-stack.stat-2x2 .stat-card{padding:1rem .95rem} .stat-stack.stat-2x2 .stat-card b{font-size:1.55rem} .ch-grid,.sec-side{grid-template-columns:1fr} .step{gap:1rem} .step .n{width:44px;height:44px;border-radius:12px} .cta-actions .btn{width:100%;justify-content:center} } /* --- QA pass: contrast + readable-size floors (same overrides as the service pages' v3.2 block; kept last so they win by source order) --- */ /* muted caption token darkened: #71808A is ~4.1:1 on white/paper; #62717B is ~5:1 */ :root{--green-deep:#467B12;--mute:#62717B} /* readable copy inside cards/tables never drops below 15px (rem is root-based = 16px, so .9–.93rem rendered at 14.4–14.9px) */ .case-card p{font-size:max(15px,.93rem)} .nav-links a{font-size:max(15px,.93rem)} .foot-brand p,footer ul{font-size:max(15px,.9rem)} /* mono labels / chips: 12.5px floor */ .cs-chip .k,.client-card dt,.pull-cap,.quote-who span,.cs-table thead th,.exhibit-key,.stat-stack.stat-2x2 .stat-card span{font-size:max(12.5px,.68rem)} /* ============ shared chrome (identical on every CMBD page) ============ */ /* AA tokens: #467B12 = 5.1:1 on white / 4.6:1 on leaf · #62717B = 5.0:1 on paper */ :root{--green-deep:#467B12;--mute:#62717B} .testi-stars{color:var(--green-deep)} .lang-chip{white-space:nowrap} /* the EN | বাং chip broke onto two lines at 375px */ @media (max-width:640px){ /* phone nav: brand + burger + EN|বাং chip did not fit in 345px (name wrapped to 3 lines) */ .nav-inner{gap:.8rem} .brand{gap:.5rem} .brand-mark{width:38px;height:38px} .brand-name{font-size:.95rem} .lang-chip{padding:.45em .65em;font-size:.66rem} }