/* Case Study components — Saiftec. Tokens: navy #170D3D, purple #3A0CA3, off-white #F0F0FA. */ /* Stat strips (hero + inline) */ .cs-metrics{display:flex;flex-wrap:wrap;gap:32px;} .cs-metric{display:flex;flex-direction:column;gap:4px;} .cs-metric__value{font-size:40px;font-weight:800;line-height:1;color:#170D3D;} .cs-metric__label{font-size:14px;color:#5a5a72;letter-spacing:.02em;} .cs-metrics.cs-metrics--hero .cs-metric__value{color:#fff;} .cs-metrics.cs-metrics--hero .cs-metric__label{color:rgba(255,255,255,.75);} /* Section title (rendered by section shortcodes when they have content) */ .cs-section-title{font-size:30px;font-weight:700;color:#170D3D;margin:0 0 26px;line-height:1.25;} /* Overview meta panel */ .cs-meta{background:#fff;border:1px solid #e7e7f2;border-radius:20px;padding:28px 30px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 35px rgba(17,17,51,.06);} .cs-meta__row{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #f0f0fa;padding-bottom:12px;} .cs-meta__row:last-of-type{border-bottom:0;padding-bottom:0;} .cs-meta__k{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#8a8aa0;} .cs-meta__v{font-size:15px;color:#170D3D;text-align:right;font-weight:500;} .cs-meta__link{margin-top:6px;font-weight:600;color:#3A0CA3;text-decoration:none;} .cs-meta__link:hover{text-decoration:underline;} /* Rich text */ .cs-rte{color:#42425a;line-height:1.75;font-size:17px;} .cs-rte p{margin:0 0 1em;} .cs-rte p:last-child{margin-bottom:0;} /* Story blocks */ .cs-story{display:flex;flex-direction:column;gap:56px;} .cs-block h2{font-size:30px;font-weight:700;color:#170D3D;margin:0 0 18px;line-height:1.25;} .cs-block--ti{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;} .cs-ti--left{direction:rtl;} .cs-ti--left>*{direction:ltr;} .cs-ti__img img,.cs-block--imgfull img,.cs-gallery__item img,.cs-ba__col img,.cs-related__img img{width:100%;height:auto;border-radius:16px;display:block;} .cs-block--imgfull{margin:0;} .cs-block--imgfull figcaption,.cs-ba__label{font-size:14px;color:#8a8aa0;margin-top:10px;} .cs-pullquote{margin:0;border-left:4px solid #3A0CA3;padding:8px 0 8px 26px;} .cs-pullquote p{font-size:24px;font-weight:600;color:#170D3D;line-height:1.4;margin:0 0 10px;} .cs-pullquote cite{font-style:normal;color:#8a8aa0;font-size:15px;} /* Results */ .cs-results__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:28px;} .cs-result{background:#fff;border-radius:18px;padding:26px;box-shadow:0 10px 35px rgba(17,17,51,.06);display:flex;flex-direction:column;gap:6px;} .cs-result__value{font-size:42px;font-weight:800;color:#3A0CA3;line-height:1;} .cs-result__label{font-size:15px;color:#42425a;} .cs-result__ba{font-size:13px;color:#8a8aa0;margin-top:4px;} /* Gallery */ .cs-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;} /* Before / After */ .cs-ba{display:flex;flex-direction:column;gap:32px;} .cs-ba__imgs{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .cs-ba__col{margin:0;} .cs-ba__col figcaption{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#8a8aa0;margin-bottom:8px;} /* Testimonial */ .cs-testimonial{margin:0;background:#170D3D;color:#fff;border-radius:22px;padding:40px 44px;} .cs-testimonial blockquote{margin:0 0 22px;font-size:24px;line-height:1.5;font-weight:500;} .cs-testimonial__by{display:flex;align-items:center;gap:14px;} .cs-testimonial__avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;} .cs-testimonial__id{display:flex;flex-direction:column;} .cs-testimonial__meta{color:rgba(255,255,255,.7);font-size:14px;} /* Related */ .cs-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;} .cs-related__card{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 35px rgba(17,17,51,.06);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;} .cs-related__card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(17,17,51,.12);} .cs-related__img img{border-radius:0;} .cs-related__body{padding:20px 22px;} .cs-related__body h3{margin:0 0 6px;font-size:18px;color:#170D3D;} .cs-related__metric{font-size:14px;font-weight:700;color:#3A0CA3;} /* ========================================================================================== * Shared card parts used by the OTHER case-study loop items — not by #2722. * * #2722 dropped its taxonomy pills and its metric list in the redesign (industry and service moved * into a labelled two-column row, and the card shows one KPI instead of a list). These base rules * stay because three siblings still render those shortcodes and only override the layout on top: * * #3673 IND — Case Study Card .ind-work-card badges + metrics (Industries page) * #4104 IND1 — Case Study Card .ind1-case-card metrics (single industry) * #3920 LOC — Project Card .loc-proj-card badges + metrics (location pages) * * industries.css restyles the metric list but never defined the pills, so deleting these took the * Industries page's Success Stories cards with them. * ========================================================================================== */ .cs-card__badges{display:flex;flex-wrap:wrap;gap:8px;} .cs-badge{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:999px;line-height:1;} .cs-badge--industry{background:#f0e9ff;color:#531dab;} .cs-badge--cs_service{background:#e6f4ff;color:#0958d9;} .cs-card__metrics{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;} .cs-card__metric{display:flex;align-items:center;gap:10px;margin:0;padding:0;} .cs-card__metric-icon{width:18px;height:18px;flex:0 0 auto;color:#3A0CA3;} .cs-card__metric-value{font-size:17px;font-weight:800;color:#170D3D;flex:0 0 auto;} .cs-card__metric-label{font-size:14px;color:#5a5a72;} /* [cs_card_cta] is superseded on #2722 by the SaifTec Case Study Button widget, which carries the per-project aria-label and its own Elementor style controls. Kept styled so the shortcode is not left bare if it is reused somewhere. */ .cs-card__cta{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#3A0CA3;border:2px solid #ece7fb;border-radius:999px;padding:9px 20px;text-decoration:none;} /* ========================================================================================== * Portfolio card (loop item #2722) — screenshot on top, then name + KPI, description, * industry/service, the feature row, and one full-width CTA. * * WHAT IS *NOT* HERE, ON PURPOSE. The card's background, border, radius, shadow, padding, gaps, * heading and body typography, the KPI panel's colours and the CTA's gradient/height/radius are all * set on the elements in Elementor, so they are editable in the panel rather than locked in this file. * What follows is only the part Elementor has no control for: * * - the 16:9 preview window and the hover pan (object-position over a tall image) * - the two-line clamp on the description * - the internals of the three data-driven widgets (meta columns, feature row, KPI panel) * - the stretched click layer, and the hairlines between blocks * - the staggered fade-in * * Tokens match the rest of the site: navy #170D3D, purple #3A0CA3, body #5A5A72, hairline #ECE7FB. * ========================================================================================== */ /* * The Loop Grid stretches each item to the tallest in its row; the card has to fill that cell or two * cards in a row end up different heights and their buttons do not line up. * * Doubled class AND `--height`, because `.e-con{height:var(--height)}` with `--height:auto` is (0,1,0) * and loads after this file: a plain `.cs-card{height:100%}` ties and loses. It looked fine at 1440 * only because every card's content happened to come out the same height there; at 768, where titles * and feature rows wrap differently, cards were up to 70px short of their cell. */ /* * `width:100%` as well as the height, and for the same reason: a container-query context cannot be * sized by its own contents, so the card has to take its width from its grid cell explicitly. Without * it the card is only as wide as whatever its parent happens to offer, which on the home rail was * nothing at all. */ .cs-card.cs-card{--height:100%;height:100%;--width:100%;width:100%;} /* * The card is a container query context, because what has to change at narrow widths is driven by the * CARD's width, not the viewport's. At a 768px viewport the archive shows two columns, which makes each * card 279px — NARROWER than the single-column card at a 390px viewport (~330px). A viewport media * query therefore fixes the wrong thing: on tablet the feature labels were breaking one letter per * line while the mobile layout was fine. * * `inline-size` containment only stops the card being sized by its contents horizontally, which the * Loop Grid already does; it does not clip painting, so the hover lift and its shadow are unaffected. */ .cs-card{position:relative;transition:transform .28s ease,box-shadow .28s ease; container-type:inline-size;container-name:cscard;} /* * The class is doubled to reach (0,3,0). The RESTING shadow is an Elementor control, which writes * `.elementor-element.elementor-element-pcd0100{box-shadow:...}` — also (0,2,0), and Elementor's * stylesheet loads after this one, so a plain `.cs-card:hover` ties and loses: the card lifted on * hover but its shadow never deepened. Same class of collision as `.e-con.e-flex`. */ .cs-card.cs-card:hover, .cs-card.cs-card:focus-within{transform:translateY(-8px);box-shadow:0 24px 60px rgba(15,23,42,.14);} /* ---- the preview window --------------------------------------------------------------------- * 16:9, and the image inside is a ~2.2:1 TALL capture of the client home page, so `cover` shows the * top of it and the hover transition pans to the bottom. object-position is the only property that * can do this without a wrapper transform, which would also scale the card's own border radius. */ .cs-card .cs-card__cover{aspect-ratio:16/9;overflow:hidden;position:relative;flex:0 0 auto;} .cs-card .cs-card__cover .elementor-widget-image, .cs-card .cs-card__cover .elementor-widget-image .elementor-widget-container{position:absolute;inset:0;margin:0;height:100%;} .cs-card .cs-card__cover img{ width:100%;height:100%;display:block;object-fit:cover;object-position:50% 0%; transition:object-position 4.2s cubic-bezier(.22,.61,.36,1),transform .35s ease; } .cs-card:hover .cs-card__cover img, .cs-card:focus-within .cs-card__cover img{object-position:50% 100%;transform:scale(1.02);} /* A hairline under the window, so a screenshot with a white footer edge still reads as a panel. */ .cs-card .cs-card__cover::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:#ECE7FB;} /* ---- name + KPI ----------------------------------------------------------------------------- */ .cs-card .cs-card__title{min-width:0;} .cs-card .cs-card__title .elementor-heading-title{text-wrap:balance;} /* Above the stretched click layer so the project name is still selectable text. */ .cs-card .cs-card__title,.cs-card .cs-card__kpi{position:relative;z-index:3;} .cs-kpi{display:flex;flex-direction:column;gap:2px;text-align:right;align-items:flex-end;transition:box-shadow .28s ease;} .cs-kpi__top{display:inline-flex;align-items:center;gap:5px;} .cs-kpi__arrow{width:15px;height:15px;flex:0 0 auto;} .cs-kpi__value{font-family:'Heebo',sans-serif;font-size:24px;font-weight:800;line-height:1.05;letter-spacing:-.4px;font-variant-numeric:tabular-nums;white-space:nowrap;} .cs-kpi__label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;line-height:1.3;max-width:11ch;} /* "Metric card glows slightly" on hover. */ .cs-card:hover .cs-kpi{box-shadow:0 0 0 1px rgba(58,12,163,.16),0 6px 18px rgba(58,12,163,.14);} .cs-kpi--empty{font-size:12px;color:#8A8AA0;font-style:italic;} /* ---- description, two lines ----------------------------------------------------------------- */ .cs-card .cs-card__excerpt{position:relative;z-index:3;} .cs-card .cs-card__excerpt .elementor-widget-container{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .cs-card .cs-card__excerpt p{margin:0;} /* ---- industry | service --------------------------------------------------------------------- */ .cs-card .cs-card__meta{border-top:1px solid #ECE7FB;padding-top:18px;} .cs-meta--cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px; background:none;border:0;padding:0;box-shadow:none;} .cs-meta--cols .cs-meta__item{display:grid;grid-template-columns:20px 1fr;gap:0 10px;align-items:start;min-width:0;} .cs-meta--cols .cs-meta__icon{grid-row:1/span 2;width:19px;height:19px;color:#5A5A72;margin-top:1px;} .cs-meta--cols .cs-meta__body{display:flex;flex-direction:column;gap:3px;min-width:0;} /* #6B6B85, not the #8A8AA0 the rest of the site uses for this label: at 10px uppercase on white that grey measures 3.37:1, below WCAG AA. This one is 5.16:1 and keeps the same violet-grey bias. */ .cs-meta--cols .cs-meta__label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:.08em;color:#6B6B85;} .cs-meta--cols .cs-meta__value{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600; color:#170D3D;line-height:1.35;text-align:left;} /* ---- the feature row ------------------------------------------------------------------------ * ONE row, however many features there are: `grid-auto-flow:column` with auto columns puts every item * on a single line and divides the width evenly, so the LABEL wraps rather than the row. A wrapping * flex row was tried first and gave 3 + 1 on a four-feature card, which reads as an accident; a fixed * five-column grid has the mirror problem, leaving a gap whenever a case study lists four. * * Labels are top-aligned to the icon so a two-line label ("Project / Gallery") still lines up with its * neighbours' first line. */ .cs-card .cs-card__features{border-top:1px solid #ECE7FB;padding-top:18px;} /* The eyebrow is set to the same 10px uppercase as INDUSTRY / SERVICES above it, so the card reads as three labelled blocks rather than two labelled blocks and a loose list. #6B6B85 for the same reason as the meta label: #8A8AA0 measures 3.37:1 at this size, below AA. Visible only — the string is put on the