/* Theme Name: Sharjeel Child Theme URI: https://sharjeelahmed.pk Template: hello-elementor Author: Sharjeel Ahmed Author URI: https://sharjeelahmed.pk Description: Child theme for sharjeelahmed.pk portfolio. Built on Hello Elementor (official parent), Elementor Free compatible, single-page site. Version: 1.7.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: sharjeel-child */ /* ===================================================================== PHASE 2 DESIGN CSS Covers the markup rendered by the 12 Sharjeel Elementor widgets only. No Style tab controls exist on those widgets on purpose (Elementor Free has no per-widget custom CSS) so every visual rule lives here, baked in, and edits to color/spacing/etc. happen in this one file. COLOR PALETTE (strict, per Phase 2 brief): --ink #0b1720 dark base (kept from original design) --primary #0c8b82 ALL former accent colors (orange #ff5a35, lime #d7ff4f, gold #E7AD50) collapse into this single accent: CTAs, hover states, kickers, badges. --border #C3C9D0 borders, dividers, secondary accents. --bg-light #F6F7F8 light/soft section backgrounds (replaces the old --paper #f5f4ee and --soft #e9efed). --muted see note below. NOTE on --muted: the brief maps "muted text" to #C3C9D0 directly. Used as literal text color, #C3C9D0 on white is roughly a 1.5:1 contrast ratio, far under WCAG AA (4.5:1) for body copy, so most paragraph text would become very hard to read. --muted below is computed from --border darkened toward --ink with color-mix(), so it stays visually "in family" with the strict palette but is actually legible. If a literal #C3C9D0 is wanted instead, replace the color-mix() line with: --muted:#C3C9D0; (one line change). Flagging this rather than silently deciding it either way. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap'); :root{ --ink:#0b1720; --primary:#0c8b82; --border:#C3C9D0; --bg-light:#F6F7F8; --white:#fff; --muted:color-mix(in srgb, var(--border) 55%, var(--ink) 45%); --shadow:0 25px 70px rgba(11,23,32,.10); --max:1180px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:"DM Sans",sans-serif;background:var(--bg-light);color:var(--ink);line-height:1.6;overflow-x:hidden} h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif} a{text-decoration:none;color:inherit} /* PHASE 7 FIX: buttons/links below use "a.class" (element+class) instead of plain ".class" wherever the rule sets `color` on an anchor itself. Browsers' built-in stylesheet gives every a slightly-higher-specificity default colour for :visited (and some for :hover/:active) than a single class selector can beat on its own, that mismatch was the "text turns blue on hover" bug across the site (Start a Project, service rows, etc.). Adding the element type ties the specificity, and author rules win ties, so this fixes it without ever using color:inherit (which would just take on whatever colour the parent element happens to be, breaking dark buttons on light parents and vice versa). Search "a.btn-dark", "a.service-row", etc. */ img{display:block;max-width:100%} .container{width:min(var(--max),calc(100% - 42px));margin:auto} .section{padding:110px 0} .kicker{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:800;color:var(--primary)} .kicker:before{content:"";width:30px;height:2px;background:currentColor} .title{font-size:clamp(38px,5vw,68px);line-height:.98;letter-spacing:-.055em;color:var(--ink)} .copy{color:var(--muted);font-size:14px;max-width:650px} .btn{display:inline-flex;align-items:center;gap:12px;padding:14px 19px;border-radius:5px;font-size:12px;font-weight:800;transition:.25s;border:none;cursor:pointer} a.btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{transform:translateY(-3px)} a.btn-lime{background:var(--primary);color:#fff} .btn-lime:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(12,139,130,.25)} a.btn-orange{background:var(--primary);color:#fff} .btn-orange:hover{transform:translateY(-3px)} a.btn-ghost{border:1px solid var(--border);background:#fff;color:var(--ink)} .btn-ghost:hover{border-color:var(--ink)} /* ---------- HEADER / NAVIGATION (Phase 4) ---------- */ /* section[id] gets scroll-margin-top so the sticky header (78px tall) never covers a section's heading when a nav link, the logo, or a footer link jumps to it. The original static Home.html never had a real working header wired up, so it never needed this; 100px = header height + a small buffer, kept close to the 115px already used by .sticky-title further down for the same "clear the sticky header" reason. Flagging this as a Phase 4 addition rather than a literal port, since there was nothing to literally port it from. */ section[id]{scroll-margin-top:100px} .site-header{height:78px;background:rgba(246,247,248,.92);backdrop-filter:blur(16px);position:sticky;top:0;z-index:99;border-bottom:1px solid var(--border)} .site-header .nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px} a.logo{font-size:22px;font-weight:700;letter-spacing:-.06em;color:var(--ink);flex:none} .logo span{color:var(--primary)} .logo b{color:var(--primary)} .navlinks{display:flex;gap:28px;font-size:11px;font-weight:700;color:#526269} .navlinks a{position:relative;color:#526269} .navlinks a:after{content:"";position:absolute;left:0;bottom:-9px;width:0;height:2px;background:var(--primary);transition:.2s} .navlinks a:hover:after,.navlinks a.active:after{width:100%} .site-header .btn{flex:none} .menu{display:none;background:none;border:0;font-size:25px;color:var(--ink);cursor:pointer;padding:0;line-height:1} /* ---------- HERO ---------- */ .hero{background:var(--bg-light);position:relative;overflow:hidden} .hero:before{content:"";position:absolute;right:-160px;top:-180px;width:500px;height:500px;border-radius:50%;background:var(--primary);opacity:.14} .hero-grid{min-height:720px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative} .hero-copy{padding:55px 0} .hero h1{font-size:clamp(55px,7vw,94px);line-height:.88;letter-spacing:-.075em;max-width:680px;margin:18px 0 27px;color:var(--ink)} .hero h1 em{font-style:normal;color:var(--primary)} .hero h1 .outline{color:transparent;-webkit-text-stroke:1.5px var(--ink)} .hero-text{font-size:15px;color:var(--muted);max-width:580px;margin-bottom:30px} .hero-actions{display:flex;gap:10px;flex-wrap:wrap} .hero-meta{display:flex;gap:35px;margin-top:38px;padding-top:22px;border-top:1px solid var(--border)} .hero-meta strong{display:block;font-family:"Space Grotesk";font-size:21px;color:var(--ink)} .hero-meta span{display:block;color:var(--muted);font-size:10px;margin-top:2px} .hero-art{height:590px;position:relative;display:flex;align-items:center;justify-content:center} .photo-card{width:380px;height:490px;position:relative;overflow:hidden;background:var(--ink);border-radius:190px 190px 20px 20px;box-shadow:var(--shadow);z-index:2} .photo-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15);mix-blend-mode:screen;opacity:.9} .photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(5,20,25,.85))} .photo-label{position:absolute;bottom:25px;left:25px;color:#fff;z-index:2} .photo-label b{font-size:12px;letter-spacing:.13em;text-transform:uppercase} .photo-label span{display:block;font-size:10px;color:#dfe6e5;margin-top:5px} .art-circle{position:absolute;width:470px;height:470px;border:1px solid var(--border);border-radius:50%;right:0;top:50px} .art-circle:before{content:"";position:absolute;inset:35px;border:1px dashed var(--border);border-radius:50%} /* PHASE 7 FIX: the "Available for new projects" sticker text was spilling outside its own circle. flex + a tight padding box keeps every line inside the visible ring regardless of exact wording; overflow:hidden is a hard backstop so a longer custom label clips instead of escaping the shape. Paired with the hero widget's sticker_text default now using explicit line breaks (Available / for new / projects) so wrapping is predictable instead of left to the browser to guess word-by-word. */ .sticker{position:absolute;z-index:4;background:var(--primary);color:#fff;width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:1.35;padding:14px;overflow:hidden;transform:rotate(12deg);right:3%;top:10%} .sticker:before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.5);border-radius:50%} /* PHASE 7 FIX: the floating "5+ Years..." card used to be positioned with percentages against .hero-art, a container much taller than the photo card itself; at the default breakpoint that math placed it directly over the name label. Nesting it (via .photo-card-wrap) against the card's own real box and hanging it off the corner with small negative offsets means it can never land on top of the label again, at any screen size, without needing separate percentage math per breakpoint. */ /* PHASE 8 FIX: Phase 7 moved this card onto the photo card's own corner, but at bottom:-22px its top edge still climbed back over the name label sitting at bottom:25px. Dropped to -58px so the box's whole height now clears the label: the card is ~72px tall, so its top edge lands at roughly 14px from the photo card's bottom, below the label's 25px baseline. Kept hanging off the corner (rather than moved fully outside) so the original overlapping-card look is preserved. */ .photo-card-wrap{position:relative} .floating-stat{position:absolute;z-index:5;background:#fff;padding:17px 18px;box-shadow:var(--shadow);border-radius:8px;left:-26px;bottom:-58px} .floating-stat strong{font-family:"Space Grotesk";font-size:31px;line-height:1;color:var(--ink)} .floating-stat small{display:block;font-size:9px;color:var(--muted);margin-top:4px} /* ---------- TRUST BAR (folded into Hero widget) ---------- */ /* PHASE 7 FIX: grid-template-columns used to be a hardcoded repeat(5,1fr); deleting one item left an empty gap on the right since the grid still reserved 5 equal tracks for 4 items. Column count is now set inline per request from the hero widget's "Columns Per Row" control (see columns_style_attr() in class-widget-base.php); its default, "auto", uses auto-fit/minmax so whatever number of items exist always fills the row evenly. The old nth-child rules that hid items past the 3rd on tablet are dropped for the same reason, they assumed exactly 5 items. */ .trust-bar{background:var(--ink);color:#fff;border-top:1px solid #203943;border-bottom:1px solid #203943} .trust-grid-v2{display:grid} .trust-item{display:flex;align-items:center;gap:12px;padding:22px 18px;border-right:1px solid rgba(255,255,255,.13)} .trust-item:first-child{padding-left:0} .trust-item:last-child{border-right:0} .trust-mark{width:35px;height:35px;border-radius:8px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:9px;font-weight:900} .trust-item strong{display:block;font-family:"Space Grotesk";font-size:11px;color:#fff} .trust-item small{display:block;color:#91a8ae;font-size:7px;letter-spacing:.1em;margin-top:2px} /* ---------- ABOUT ---------- */ .about-v2{background:#fff} .about-grid-v2{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center} .about-card-v2{background:var(--ink);border-radius:24px;padding:42px;color:#fff;position:relative;overflow:hidden;min-height:390px;box-shadow:var(--shadow)} .about-card-v2:after{content:"";position:absolute;width:260px;height:260px;border:55px solid rgba(12,139,130,.22);border-radius:50%;right:-90px;bottom:-80px} .about-card-v2 .big{font-family:"Space Grotesk";font-size:120px;line-height:.8;font-weight:700;letter-spacing:-.09em;position:relative;z-index:1} .small-label{font-size:12px;color:#a8bec4;position:relative;z-index:1;margin-top:15px} .about-card-note{position:absolute;left:42px;bottom:38px;z-index:2;font-size:14px;max-width:230px;color:#c5d5d8} .about-list-v2{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:30px 0} .check-v2{display:flex;gap:10px;align-items:flex-start;font-size:12px;font-weight:700;color:var(--ink)} .check-v2 i{width:20px;height:20px;border-radius:50%;background:var(--bg-light);color:var(--primary);display:grid;place-items:center;font-style:normal;font-size:12px;flex:none} /* ---------- EXPERTISE ---------- */ .expertise{background:#fff;position:relative;overflow:hidden} .expertise:before{content:"";position:absolute;right:-180px;top:80px;width:420px;height:420px;border:1px solid var(--bg-light);border-radius:50%;pointer-events:none} .expertise:after{content:"EXPERTISE";position:absolute;right:-18px;bottom:40px;font-family:"Space Grotesk";font-size:120px;font-weight:800;letter-spacing:-.08em;color:var(--bg-light);transform:rotate(-90deg);pointer-events:none} .expertise .container{position:relative;z-index:1} .head-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.7fr);gap:80px;align-items:end;margin-bottom:38px} .head-row .copy{max-width:430px;font-size:14px;line-height:1.8;margin-bottom:5px} /* PHASE 7: CTA added under the "I combine development..." copy. Its own flex column keeps the button under the paragraph regardless of how many lines the copy wraps to, and stays inside the same grid track .copy already used so the section's overall two-column balance is untouched. */ .expertise-head-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px} .expertise-head-actions .copy{margin-bottom:0} /* PHASE 7 FIX: grid-template-columns is now set inline per the "Columns Per Row" control (default "auto" = auto-fit/minmax), same reasoning as the trust bar above, so removing a card never leaves a gap on the right. The two fixed responsive overrides that assumed exactly 4 cards are dropped for the same reason; auto-fit already reflows at any width. */ .expertise-grid{display:grid;gap:16px} .expertise-card{background:var(--bg-light);border:1px solid var(--border);border-radius:16px;min-height:345px;padding:27px;position:relative;overflow:hidden;transition:transform .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(11,23,32,.035)} .expertise-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(12,139,130,.08),transparent 42%);opacity:0;transition:.35s} .expertise-card:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-9px);box-shadow:0 24px 45px rgba(8,28,36,.14)} .expertise-card:hover:before{opacity:1} .expertise-card:after{content:"";position:absolute;right:-42px;bottom:-42px;width:105px;height:105px;border:1px solid rgba(12,139,130,.10);border-radius:50%;pointer-events:none;transition:.35s ease} .expertise-card:hover:after{right:-30px;bottom:-30px;border-color:rgba(12,139,130,.35)} .expertise-no{font-family:"Space Grotesk";font-size:10px;color:var(--primary);font-weight:800;letter-spacing:.12em;position:relative;z-index:1} .expertise-icon{width:62px;height:62px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;font-family:"Space Grotesk";font-size:27px;color:var(--primary);margin:32px 0 25px;background:#fff;position:relative;z-index:1;transition:.35s} .expertise-card:hover .expertise-icon{background:var(--primary);border-color:var(--primary);color:#fff;transform:rotate(-8deg) scale(1.05)} .expertise-card h3{font-family:"Space Grotesk";font-size:25px;line-height:1.08;letter-spacing:-.035em;position:relative;z-index:1;color:var(--ink)} .expertise-card:hover h3{color:#fff} .expertise-card p{font-size:11px;line-height:1.7;color:var(--muted);margin-top:10px;max-width:250px;position:relative;z-index:1} .expertise-card:hover p{color:#c9dedb} .expertise-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:20px;position:relative;z-index:1} .expertise-tags span{font-size:9px;line-height:1;border:1px solid var(--border);border-radius:999px;padding:8px 10px;color:var(--muted);background:#fff} .expertise-card:hover .expertise-tags span{color:#dce7e8;border-color:#385057;background:transparent} .expertise-card .line{position:absolute;bottom:0;left:0;width:100%;height:4px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:.35s;z-index:2} .expertise-card:hover .line{transform:scaleX(1)} .expertise-card .arrow{position:absolute;right:22px;top:22px;width:31px;height:31px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--muted);transition:.35s;z-index:2} .expertise-card:hover .arrow{border-color:var(--primary);background:var(--primary);color:#fff;transform:translate(2px,-2px)} /* ---------- SERVICES ---------- */ .services{background:var(--ink);color:#fff} .services .title{color:#fff} .services .copy{color:#9eb2b8} /* PHASE 7: paragraph + CTA moved into the right column, stacked, so this scopes the shared .head-row's alignment to "center" for Services only, the other sections reusing .head-row (Expertise, Projects, Certifications) keep their own existing bottom-alignment untouched. */ .services .head-row{align-items:center} .services-head-actions{display:flex;flex-direction:column;align-items:flex-start;gap:22px} .service-list{margin-top:50px;border-top:1px solid rgba(255,255,255,.16)} .service-row{display:grid;grid-template-columns:70px 1.1fr 1.6fr 80px;gap:25px;align-items:center;padding:28px 5px;border-bottom:1px solid rgba(255,255,255,.16);transition:.25s;color:#fff} a.service-row{color:#fff} .service-row:hover{padding-left:18px;background:rgba(255,255,255,.035)} .service-row .num{color:var(--primary);font-size:12px;font-family:"Space Grotesk";font-weight:700} .service-row h3{font-size:25px;letter-spacing:-.04em} .service-row p{font-size:12px;color:#94aab0;max-width:500px} .service-arrow{width:43px;height:43px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;color:var(--primary);font-size:18px;justify-self:end} /* ---------- EXPERIENCE ---------- */ .experience{background:var(--bg-light)} .experience-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px} .sticky-title{position:sticky;top:115px;height:max-content} .timeline{border-left:1px solid var(--border);padding-left:35px} .timeline-item{position:relative;padding:0 0 48px} .timeline-item:before{content:"";position:absolute;left:-41px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--primary);border:3px solid var(--bg-light);box-shadow:0 0 0 1px var(--primary)} .timeline-date{font-size:10px;color:var(--primary);font-weight:800;letter-spacing:.08em;text-transform:uppercase} .timeline h3{font-size:25px;margin:8px 0 3px;color:var(--ink)} .timeline h4{font-family:"DM Sans";font-size:12px;color:var(--primary);font-weight:800} .timeline p{font-size:12px;color:var(--muted);max-width:650px;margin-top:10px} .timeline-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px} .timeline-tags span{font-size:9px;padding:5px 8px;border:1px solid var(--border);border-radius:20px;color:var(--muted);background:#fff} /* ---------- TOOLS ---------- */ .tools{background:#fff} .tools-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:65px;align-items:start} .tool-cloud{display:grid;gap:10px} .tool{border:1px solid var(--border);background:#f8faf9;padding:13px 14px;border-radius:12px;min-height:72px;display:flex;align-items:center;gap:12px;transition:.25s;box-shadow:0 5px 18px rgba(11,23,32,.035)} .tool:hover{background:var(--ink);color:#fff;transform:translateY(-3px);box-shadow:0 14px 28px rgba(11,23,32,.12)} .tool-logo{width:38px;height:38px;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:10px;font-weight:900;color:var(--primary);flex:none} .tool strong{font-family:"Space Grotesk";font-size:11px;color:var(--ink)} .tool:hover strong{color:#fff} .tool small{display:block;font-size:8px;color:var(--muted);margin-top:1px;text-transform:uppercase;letter-spacing:.05em} .tool:hover small{color:#a5b9bd} .tools-note{margin-top:35px;border-left:3px solid var(--primary);padding-left:16px;font-size:12px;color:var(--muted)} /* ---------- PROCESS ---------- */ .process-v2{padding:82px 0 92px;background:#fff;overflow:hidden} .process-intro-v3{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;margin-bottom:52px} .process-heading-v3{max-width:620px} .process-title-v3{font-family:"Space Grotesk",sans-serif;font-size:clamp(48px,5.8vw,78px);line-height:.94;letter-spacing:-.055em;color:var(--ink);margin:14px 0 0} .process-title-v3 em{font-style:normal;color:var(--primary)} /* PHASE 7 FIX: intro paragraph + "Let's Work Together" button now sit right-aligned as a stacked column (line, then paragraph, then button), instead of a left-aligned row. align-items:flex-end keeps all three flush to the same right edge, so the little accent line sits directly above the paragraph's own edge rather than pinned to the column's edge while the (now right-aligned) text extends further right past it. */ .process-intro-copy-v3{display:flex;flex-direction:column;align-items:flex-end;gap:14px;max-width:560px;margin-left:auto} .process-intro-copy-v3 p{font-size:14px;line-height:1.75;color:var(--muted);margin:0;max-width:500px;text-align:right} .process-line-v3{width:42px;height:3px;background:var(--primary);display:block;flex:none} .process-cta-v4{margin:0;padding:13px 17px;font-size:9px} /* PHASE 7 FIX: column count now comes from the actual number of steps ("auto") or an explicit editor choice via the widget's "Columns Per Row" control, computed in class-process-widget.php's render(), instead of a template hardcoded for exactly 4 (1fr 28px 1fr 28px 1fr 28px 1fr) with a separate connector element wedged into each 28px gap column. The connecting arrow is now a ::after pseudo-element on the card itself (below) with its own explicit gap and z-index, which is also what fixes it being invisible: the old connector was a plain sibling
with no z-index, so later cards painted over it in source order at some screen widths. An explicit z-index always wins over that regardless of order. */ .process-flow-v3{display:grid;gap:28px;align-items:stretch} .process-card-v3{background:var(--bg-light);border:1px solid var(--border);border-radius:18px;padding:24px 23px 22px;min-height:285px;position:relative;overflow:visible;transition:transform .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease} /* PHASE 8 FIX: this accent line used to be a full-width 4px bar pinned to top:0/left:0. It was invisible while the card still had overflow:hidden, but Phase 7 switched the card to overflow:visible (so the connector arrow could sit outside it), and the bar's square ends immediately began poking out past the card's 18px rounded corners, most obviously on the always-on "Strategize" card. Insetting it and rounding its own ends keeps it fully inside the card on both the hover state and the pre-highlighted state, which is what it always looked like before. */ .process-card-v3:before{content:"";position:absolute;top:6px;left:18px;right:18px;height:4px;background:var(--primary);border-radius:999px;transform:scaleX(0);transform-origin:left;transition:transform .35s ease} .process-card-v3:hover,.process-card-v3.is-active{background:var(--ink);border-color:var(--ink);transform:translateY(-8px);box-shadow:0 22px 45px rgba(11,23,32,.16);color:#fff} .process-card-v3:hover:before,.process-card-v3.is-active:before{transform:scaleX(1)} .process-card-top-v3{display:flex;align-items:center;justify-content:space-between;gap:10px} .process-card-top-v3 span{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:800;color:var(--primary)} .process-card-top-v3 b{font-size:8px;letter-spacing:.16em;color:var(--primary)} .process-badge-v3{width:54px;height:54px;border-radius:15px;background:#dff4f1;color:var(--primary);display:grid;place-items:center;font-size:25px;font-weight:700;margin:35px 0 24px;transition:.35s ease} .process-card-v3:hover .process-badge-v3,.process-card-v3.is-active .process-badge-v3{background:var(--primary);color:#fff;transform:rotate(-5deg) scale(1.05)} .process-card-v3 h3{font-family:"Space Grotesk",sans-serif;font-size:24px;line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:0} .process-card-v3 p{font-size:11px;line-height:1.65;color:var(--muted);margin:10px 0 16px} .process-card-v3:hover h3,.process-card-v3.is-active h3{color:#fff} .process-card-v3:hover p,.process-card-v3.is-active p{color:#a9bcc1} .process-tags-v3{display:flex;gap:7px;flex-wrap:wrap} .process-tags-v3 i{font-style:normal;font-size:8px;padding:6px 9px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:#fff} .process-card-v3:hover .process-tags-v3 i,.process-card-v3.is-active .process-tags-v3 i{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#c7d6d9} /* PHASE 8 FIX: the connector arrow was drawn on each card's RIGHT edge (:not(:last-child):after, right:-41px). That put the arrow inside the stacking context of the card it belonged to, and the NEXT card in the DOM paints after it, so the arrow following a transformed card (the hovered one, and the always-on "Strategize" card, both of which get a `transform` and therefore their own stacking context) was covered by its neighbour, while the others sat on top. That's the inconsistent "some in front, some behind" look. Now the arrow hangs off each card's LEFT edge instead, on every card except the first. Visually identical (it still lands in the gap between two cards), but it now belongs to the LATER of the two cards, and later siblings paint above earlier ones, so every arrow is on top of its left-hand neighbour. No z-index tug-of-war, it's fixed by paint order. */ .process-card-v3:not(:first-child):after{content:"→";position:absolute;top:50%;left:-40px;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--primary);color:var(--primary);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transform:translateY(-50%);z-index:6;box-shadow:0 4px 10px rgba(11,23,32,.08)} /* The arrow is a child of the card, so the card's -8px hover/active lift would drag it upward too and make the row of arrows look uneven. This cancels that lift out so every arrow stays on the same line. */ .process-card-v3:hover:after,.process-card-v3.is-active:after{transform:translateY(calc(-50% + 8px))} /* ---------- PROJECTS ---------- */ .projects-v4{background:#07151d;color:#fff;padding:105px 0 92px;overflow:hidden} .projects-v4 .container{position:relative} .projects-head-v4{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end;margin-bottom:55px} .projects-kicker-v4{display:flex;align-items:center;gap:12px;color:var(--primary);margin:0} .projects-kicker-v4 span{font-family:"Space Grotesk",sans-serif;font-size:10px;color:var(--primary);letter-spacing:.14em} .projects-title-v4{font-family:"Space Grotesk",sans-serif;font-size:clamp(54px,7vw,92px);line-height:.9;letter-spacing:-.065em;color:#fff;margin:17px 0 0} .projects-title-v4 em{font-style:normal;color:var(--primary)} .projects-intro-v4{max-width:510px;padding-bottom:5px} .projects-intro-v4 p{font-size:14px;line-height:1.75;color:#9eb2b8;margin:0 0 24px} .project-link-v4 span{color:var(--primary);font-size:16px} /* PHASE 7: "Start a project ↗" restyled from a plain underlined text link into the same button system (padding/radius/weight) the rest of the site uses, just in a light-on-dark "outline" treatment that fits this section's dark background, per the "make ghost/text-only CTAs consistent" request. */ a.project-link-v4{display:inline-flex;align-items:center;gap:10px;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:5px;padding:14px 19px;font-size:11px;font-weight:800} a.project-link-v4:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);transform:translateY(-3px)} /* PHASE 7: category tabs (WordPress / SEO / Ads and any custom tab). PHASE 8 FIX: these are real