/* web/themes/techprosolutions/css/components/et-services-modern.css * * "Income Tax Services We Offer" — Vercel/Linear-style BENTO GRID. * * Replaces the legacy flex layout (66.67% / 33.33% percentage widths + 10px * cell padding, which fit only 2 cards per row and let every card overflow its * own cell — that was the visible card-overlap bug) with a real 3-column CSS * Grid where the featured card spans 2 columns. * * Sections: * (1) Grid — 3-col bento, 24px gutters, featured spans 2. * (2) Featured card — dark gradient + white/10 hairline + soft glow. * (3) Standard cards — white, crisp slate-200 border, structural sm->md shadow. * (4) Icon tiles — 48x48 rounded "iOS app icon" wrappers. * (5) Typography — Manrope + token scale, slate-900 / slate-500. * (6) Section rhythm — trims the hardcoded py-100. * * Loaded globally in the `theme` bucket at a late weight so it aggregates after * new.css and wins on order; every selector is scoped to .service-outer-wrapper * so nothing else on the site is affected. Legacy card CSS leans on long * !important chains, so the overrides below are deliberately !important. * ------------------------------------------------------------------------- */ //* FORCE SPACING OVERRIDE FOR BENTO GRID */ .service-outer-wrapper.py-100 { padding-top: 96px !important; padding-bottom: 96px !important; } @media (max-width: 1023px) { .service-outer-wrapper.py-100 { padding-top: 64px !important; padding-bottom: 64px !important; } } .service-outer-wrapper { /* Local palette. Slate ramp mirrors the Tailwind values the design calls for; the wash + green stay on the locked brand tokens. */ --svc-border: #E2E8F0; /* slate-200 — crisp hairline */ --svc-body: #64748B; /* slate-500 — muted body copy */ --svc-heading: #1C3557; /* brand heading navy */ --svc-wash: #E8F5E9; /* locked brand light wash (icon tile) */ --svc-gap: var(--et-space-6); /* 24px gutters */ --svc-pad: var(--et-space-8); /* 32px card padding */ } /* (1) BENTO GRID ---------------------------------------------------------- */ .service-outer-wrapper .field--name-field-add-items { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--svc-gap) !important; align-items: stretch !important; } /* Kill the legacy percentage widths + 10px cell padding; the grid owns spacing now. The cell must also stretch so every card in a row is equal height. */ .service-outer-wrapper .field--name-field-add-items > .field__item { box-sizing: border-box !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; float: none !important; } /* Bento focus: the featured card claims a 2x2 tile. CELL ARITHMETIC (3 columns, 12 cards = 1 featured + 11 standard): featured 2 cols x 1 row = 2 cells + 11 = 13 -> 5 rows, 2 cells EMPTY featured 2 cols x 2 rows = 4 cells + 11 = 15 -> 5 rows, ZERO gaps So the row span is what keeps the grid flush at 12 cards: rows 1-2: featured (c1-c2) with one standard card stacked in c3 rows 3-5: 3 standard cards each */ .service-outer-wrapper .field--name-field-add-items > .field__item:first-child { grid-column: span 2; grid-row: span 2; } @media (max-width: 1199.98px) { .service-outer-wrapper .field--name-field-add-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* At 2 columns the featured tile is already full-width, so a 2-row span would leave an empty column beside it. Back to a single-row banner. */ .service-outer-wrapper .field--name-field-add-items > .field__item:first-child { grid-row: auto; } } @media (max-width: 767.98px) { .service-outer-wrapper .field--name-field-add-items { grid-template-columns: minmax(0, 1fr) !important; gap: var(--et-space-4) !important; /* 16px */ } .service-outer-wrapper .field--name-field-add-items > .field__item:first-child { grid-column: span 1; } } /* Card fills its cell and stacks as a column so the CTA can pin to the bottom — this is what stops cards overflowing and overlapping their neighbours. */ .service-outer-wrapper .service-item-wrapper { /* The legacy theme leaves these on content-box, so height:100% resolved to the CONTENT box and the 32/40px padding spilled past the cell (cards were 66px taller than their cell and bled into the row below). border-box fixes it. */ box-sizing: border-box !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; padding: var(--svc-pad) !important; border-radius: var(--et-radius-lg) !important; /* 16px */ transition: transform 0.3s var(--et-ease-out), box-shadow 0.3s var(--et-ease-out), border-color 0.3s var(--et-ease-out) !important; } /* CTA pinned to the card floor -> all CTAs align across a row. */ .service-outer-wrapper .service-item-wrapper .link { margin-top: auto !important; padding-top: var(--et-space-5) !important; /* 20px breathing room */ } /* (2) FEATURED CARD — rich gradient, hairline inner border, soft glow ------ */ .service-outer-wrapper .field__item:first-child .service-item-wrapper { background: linear-gradient(135deg, #0A2531 0%, #113E4C 55%, #164A5C 100%) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 20px 48px -16px rgba(10, 37, 49, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; padding: var(--et-space-10) !important; /* 40px — more presence */ } .service-outer-wrapper .field__item:first-child:hover .service-item-wrapper { transform: translateY(-4px) !important; box-shadow: 0 28px 64px -16px rgba(10, 37, 49, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; } /* Growing to 12 cards made the featured tile 2 rows tall (~734px). Its copy is only a title + two lines, which left a large void above a bottom-pinned CTA. Group the content and centre it vertically so the tall tile reads as a deliberate hero rather than an empty box. Scoped to the 3-column breakpoint, i.e. exactly where the 2-row span applies. */ @media (min-width: 1200px) { .service-outer-wrapper .field__item:first-child .service-item-wrapper { justify-content: center !important; } /* Beat the global `margin-top: auto` that pins CTAs to the card floor. */ .service-outer-wrapper .field__item:first-child .service-item-wrapper .link { margin-top: var(--et-space-8) !important; /* 32px */ } } /* (3) STANDARD CARDS — structural, not chunky ----------------------------- */ .service-outer-wrapper .field__item:not(:first-child) .service-item-wrapper { background: #FFFFFF !important; border: 1px solid var(--svc-border) !important; /* shadow-sm: a hairline of depth, replacing the old 0 0 40px blur. */ box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important; } .service-outer-wrapper .field__item:not(:first-child):hover .service-item-wrapper { transform: translateY(-4px) !important; border-color: #CBD5E1 !important; /* slate-300 on hover */ /* shadow-md */ box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 12px 24px -8px rgba(16, 24, 40, 0.10) !important; } /* (4) PREMIUM ICON TILES -------------------------------------------------- */ /* The legacy .icon was a naked 334x76 block. Turn it into a 48x48 rounded tile so the (raster) glyphs read like modern app icons. */ .service-outer-wrapper .service-item-wrapper .et-svc-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 48px !important; height: 48px !important; padding: 0 !important; border-radius: var(--et-radius-sm) !important; /* 12px */ background: var(--svc-wash) !important; color: var(--et-green-2) !important; /* inherited by any inline SVG */ margin: 0 0 var(--et-space-5) !important; /* 20px */ overflow: hidden !important; } /* Glyph inside the tile — these are PNG/JPG, so contain them rather than tint. */ .service-outer-wrapper .service-item-wrapper .et-svc-icon img, .service-outer-wrapper .service-item-wrapper .et-svc-icon svg { width: 28px !important; height: 28px !important; max-width: 28px !important; object-fit: contain !important; margin: 0 !important; display: block !important; } /* Drupal wraps the image in field/figure divs — neutralise their box. */ .service-outer-wrapper .service-item-wrapper .et-svc-icon > *, .service-outer-wrapper .service-item-wrapper .et-svc-icon .field { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; width: auto !important; background: none !important; } /* (5) TYPOGRAPHY ---------------------------------------------------------- */ /* Eyebrow / overline ("Popular Services"). */ .service-outer-wrapper .sec-title p { font-family: 'Manrope', system-ui, -apple-system, sans-serif !important; font-size: var(--et-overline-size) !important; /* 13px */ font-weight: var(--et-overline-weight) !important; /* 700 */ letter-spacing: var(--et-overline-track) !important; /* 0.08em */ line-height: 1.4 !important; text-transform: uppercase !important; color: var(--et-green-2) !important; /* #1D9E75 */ margin: 0 0 var(--et-space-3) !important; /* 12px */ } /* Section heading — H2 token scale, slate-900. */ .service-outer-wrapper .sec-title h2 { font-family: 'Manrope', system-ui, -apple-system, sans-serif !important; font-size: var(--et-h2-size) !important; /* clamp 28 -> 44px */ font-weight: var(--et-h2-weight) !important; /* 800 */ line-height: var(--et-h2-lh) !important; /* 1.1 */ letter-spacing: var(--et-h2-track) !important; /* -0.025em */ color: var(--svc-heading) !important; text-transform: none !important; margin: 0 0 var(--et-space-12) !important; /* 48px down to the grid */ } /* Card title — one unified H3 scale (featured was a 35px outlier). */ .service-outer-wrapper .service-item-wrapper .title { font-family: 'Manrope', system-ui, -apple-system, sans-serif !important; font-size: var(--et-h3-size) !important; /* 20px */ font-weight: var(--et-h3-weight) !important; /* 700 */ line-height: var(--et-h3-lh) !important; /* 1.3 */ letter-spacing: var(--et-h3-track) !important; /* -0.01em */ margin: 0 0 var(--et-space-3) !important; /* 12px */ } /* Card body — 16px / 1.6. */ .service-outer-wrapper .service-item-wrapper .text, .service-outer-wrapper .service-item-wrapper .text p { font-family: 'Manrope', system-ui, -apple-system, sans-serif !important; font-size: var(--et-body-size) !important; /* 16px */ line-height: var(--et-body-lh) !important; /* 1.6 */ margin-bottom: 0 !important; } /* High-contrast pairing on the light cards: slate-900 title / slate-500 body. */ .service-outer-wrapper .field__item:not(:first-child) .service-item-wrapper .title { color: var(--svc-heading) !important; } .service-outer-wrapper .field__item:not(:first-child) .service-item-wrapper .text, .service-outer-wrapper .field__item:not(:first-child) .service-item-wrapper .text p { color: var(--svc-body) !important; /* slate-500 */ } /* On the dark featured card: white title, softly muted body. */ .service-outer-wrapper .field__item:first-child .service-item-wrapper .title { color: var(--et-heading-color-inverse) !important; } .service-outer-wrapper .field__item:first-child .service-item-wrapper .text, .service-outer-wrapper .field__item:first-child .service-item-wrapper .text p { color: rgba(255, 255, 255, 0.72) !important; } /* CTA link — quiet, confident, consistent. */ .service-outer-wrapper .field__item:not(:first-child) .service-item-wrapper .link a { font-family: 'Manrope', system-ui, -apple-system, sans-serif !important; font-size: 0.9375rem !important; /* 15px */ font-weight: 700 !important; letter-spacing: 0.01em !important; } /* Featured card CTA hover effect */ .service-outer-wrapper .field__item:first-child .service-item-wrapper .link a, .service-outer-wrapper .svc-featured__body .link a, .service-outer-wrapper .svc-featured__body .link a.white-btn { transition: transform 0.25s var(--et-ease-out), box-shadow 0.25s var(--et-ease-out) !important; } .service-outer-wrapper .field__item:first-child .service-item-wrapper .link a:hover, .service-outer-wrapper .svc-featured__body .link a:hover, .service-outer-wrapper .svc-featured__body .link a.white-btn:hover { background: #FFFFFF !important; color: var(--svc-heading) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } /* (6) SECTION RHYTHM ------------------------------------------------------ * * MEASURED (1440px, ink-to-ink) BEFORE: above = 250px, below = 347px, * while the rest of the page runs at ~131px. Cause — it is NOT this block's * own padding and it is NOT margin collapse (every sibling
* has margin:0/padding:0, and there are no
or empty spacer divs). The * bloat lives INSIDE the two neighbouring components, which each carry a * 163.2px section pad on the face they present to us: * * SECTION.persona-slider padding-bottom: 163.2px * SECTION.bento-features-wrapper padding-top: 163.2px * * above = 163.2 (persona) + 86.4 (ours) = 249.6 -> 250 * below = 86.4 (ours) + 39 (card interior) + 163.2 + 58 (bento * header leading) = 346.6 -> 347 * * FIX: trim each seam-facing pad rather than fighting it with negative margins. * A negative margin-bottom big enough to close a 347px gap would drag the bento * BOX up over our bottom row of cards; being a later sibling it would sit on * top and swallow clicks on those cards' CTAs. Reducing the neighbour's own * padding instead moves its CONTENT up while its box stays put — same visual * result, no overlap, no pointer interception. * * Both neighbour rules are scoped by adjacency, so these components keep their * normal 163.2px rhythm everywhere else they appear on the site. * * above = 80 + 48 = 128px * below = 16 + 39 + 16 + 58 = 129px (page norm ~131px) */ .service-outer-wrapper.py-100 { padding-top: clamp(2rem, 3.4vw, 3rem) !important; /* 32 -> 48px */ padding-bottom: 1rem !important; /* 16px; the card's own 32px interior pad plus the CTA supply the rest */ margin-top: 0 !important; margin-bottom: 0 !important; } /* Seam ABOVE — the persona-slider immediately preceding this block. :has(+ …) is the only way to reach a previous sibling in CSS. */ .block:has(+ .service-outer-wrapper) .persona-slider { padding-bottom:6rem !important; /* 163.2 -> 48..80px clamp(3rem, 5.6vw, 5rem)*/ } /* Seam BELOW — the bento features section immediately following this block. */ .service-outer-wrapper + .block .bento-features-wrapper { padding-top: 6rem !important; /* 163.2 -> 16px */ } /* (7) SECTION ATMOSPHERE -------------------------------------------------- * * Replaces the flat cool-grey slab from new.css:192 * .linear-gradient-gray, .service-outer-wrapper { * background: linear-gradient(180deg, #eff7fb 0, #f8fafc 100%); } * with the Hero's atmosphere. The two radial blobs are copied VERBATIM from * .hero-orbital-trust.hero-orbital-section (et-color-depth.css:22) — same * brand green at 0.08, same navy at 0.07, same sizes and corner anchors — so * the two sections share one visual language. * * The only deliberate deviation is the vertical ramp. The Hero's ramp is * #F0F9F1 -> #F7FAF9 -> #FFFFFF, i.e. tinted at the TOP, which is right for a * page-opening section. This block sits BETWEEN two sections that are * transparent over the white body, so a tinted top edge would reintroduce the * exact hard seam we're removing. The ramp is therefore made symmetric: pure * #FFFFFF at both edges, peaking at the Hero's #F0F9F1 in the middle. Same * palette, same feel, zero seams. * * Doubled class (0,2,0) outranks new.css's single-class rule regardless of * aggregation order — the same technique et-color-depth.css uses for the FAQ * and bento washes. Scoped to .service-outer-wrapper only, so other users of * .linear-gradient-gray keep their existing look. */ .service-outer-wrapper.service-outer-wrapper { background: /* Edge caps (painted ON TOP). The Hero's navy blob is anchored at 88% 92%; in the tall Hero it has room to fade out, but this section is far shorter, so the blob is still ~3% opaque when it reaches the bottom edge and gets CLIPPED — a cool wedge butting against the white section below. These two caps force the first/last 12% to pure white, so no blob can ever terminate hard at a seam. rgba(255,255,255,0) — not `transparent` (= rgba(0,0,0,0)) — so the fade never interpolates through grey. */ linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 12%), linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 12%), radial-gradient(56rem 36rem at 12% 8%, rgba(60, 185, 68, 0.08), transparent 64%), radial-gradient(48rem 32rem at 88% 92%, rgba(28, 53, 87, 0.07), transparent 60%), linear-gradient( 180deg, #FFFFFF 0%, #F7FAF9 14%, #F0F9F1 50%, #F7FAF9 86%, #FFFFFF 100% ); /* No hard rules at the seams — the fade does all the separating. */ border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } /* Motion guard ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .service-outer-wrapper .service-item-wrapper { transition: none !important; } .service-outer-wrapper .field__item:hover .service-item-wrapper { transform: none !important; } } /* ------------------------------------------------------------------------- * * (8) LAYOUT RESTRUCTURE — 6 boxes (featured + 5) + a "View all" tile. * * ADDITIVE overrides only: the card / typography / icon / colour rules above * are untouched, so the section looks identical — only the count and the * featured tile's shape change. All values reuse the existing tokens and the * exact featured palette from section (2). * * Row 1: featured tile, FULL width (navy body + editable image). * Rows 2-3: 3-col grid = 5 service cards + a "View all services" tile. * ------------------------------------------------------------------------- */ /* Featured spans the full row instead of the old 2x2 corner. */ .service-outer-wrapper .field--name-field-add-items > .field__item:first-child { grid-column: 1 / -1 !important; grid-row: auto !important; } /* Featured wrapper becomes a 2-col shell (navy body | image). The navy/border/ shadow move to .svc-featured__body so the image reads as its own panel; the title/text/link/icon inside keep matching the section-(2)/(5) descendant rules, so their styling is unchanged. */ .service-outer-wrapper .field__item:first-child .service-item-wrapper.is-featured { background: transparent !important; border: 0 !important; /* Match the grid cards' flat, subtle shadow so the main tile sits at the SAME level as the others (not lifted/hovering). */ box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important; padding: 0 !important; border-radius: var(--et-radius-lg) !important; /* 16px */ overflow: hidden !important; /* A STRAIGHT (rectangular) image with the navy detail card sitting OVER its left edge — a distinct rounded card, NOT a blended seam. */ display: block !important; position: relative !important; min-height: 400px !important; /* > the 368px grid cards */ transition: transform 0.3s var(--et-ease-out), box-shadow 0.3s var(--et-ease-out) !important; } /* Hover — same gentle lift + shadow as the grid cards. */ .service-outer-wrapper .field__item:first-child:hover .service-item-wrapper.is-featured { transform: translateY(-4px) !important; box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 12px 24px -8px rgba(16, 24, 40, 0.10) !important; } /* Straight image — fills the RIGHT of the tile, rectangular, BEHIND the card. */ .service-outer-wrapper .svc-featured__media { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 0; overflow: hidden; background: var(--svc-wash); } .service-outer-wrapper .svc-featured__media .field, .service-outer-wrapper .svc-featured__media .field__item { height: 100%; margin: 0; padding: 0; } .service-outer-wrapper .svc-featured__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; display: block !important; } /* Navy detail — a distinct ROUNDED card floating OVER the image's left edge. */ .service-outer-wrapper .svc-featured__body { position: relative; z-index: 1; width: 52%; min-height: 400px; background: linear-gradient(135deg, #0A2531 0%, #113E4C 55%, #164A5C 100%); border-radius: var(--et-radius-lg); /* 16px */ padding: var(--et-space-10); /* 40px */ display: flex; flex-direction: column; justify-content: center; overflow: hidden; /* Just a hint so the card reads as ON TOP of the image — not a big lift. */ box-shadow: 2px 0 10px -3px rgba(10, 37, 49, 0.18); } .service-outer-wrapper .svc-featured__body .link { margin-top: var(--et-space-6) !important; /* 24px */ padding-top: 0 !important; } /* Subtle legacy corner watermark stays on the navy card. */ .service-outer-wrapper .field__item:first-child .service-item-wrapper.is-featured::after { content: none !important; } .service-outer-wrapper .svc-featured__body::after { content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 0; background: url("../../images/service-element2-copy.svg") no-repeat right bottom; background-size: 40%; opacity: 0.1; pointer-events: none; } .service-outer-wrapper .svc-featured__body > * { position: relative; z-index: 1; } /* DEFENSIVE — the image field lives on every service_items paragraph, but only the FEATURED (first) tile is meant to use it. If an editor uploads an image to a non-featured card, don't render the navy/2-col treatment: hide the image and let the card's text flow as a normal card (display:contents dissolves the .svc-featured__body wrapper). */ .service-outer-wrapper .field__item:not(:first-child) .svc-featured__media { display: none !important; } .service-outer-wrapper .field__item:not(:first-child) .svc-featured__body { display: contents !important; } /* "View all services →" tile — inherits the standard white card shell (:not(:first-child) from section (3)); this only lays out its CTA content. */ .service-outer-wrapper .service-item-wrapper.svc-view-all { align-items: center !important; justify-content: center !important; text-align: center; text-decoration: none; gap: var(--et-space-2); /* 8px */ } .service-outer-wrapper .service-item-wrapper.svc-view-all .svc-view-all__label { font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: var(--et-h3-size); /* 20px — matches card titles */ font-weight: var(--et-h3-weight); /* 700 */ line-height: var(--et-h3-lh); /* 1.3 */ letter-spacing: var(--et-h3-track); /* -0.01em */ color: var(--svc-heading); /* slate-900 */ } .service-outer-wrapper .service-item-wrapper.svc-view-all .svc-view-all__arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; /* 4px grid */ height: 40px; margin-top: var(--et-space-3); /* 12px */ border-radius: var(--et-radius-pill); background: var(--svc-wash); color: var(--et-green-2); /* brand green accent */ font-size: 20px; line-height: 1; transition: transform 0.25s var(--et-ease-out), background 0.25s var(--et-ease-out); } .service-outer-wrapper .service-item-wrapper.svc-view-all:hover .svc-view-all__arrow { transform: translateX(4px); background: #DDF0E0; } .service-outer-wrapper .service-item-wrapper.svc-view-all:focus-visible { outline: 2px solid var(--et-green) !important; /* locked brand green */ outline-offset: 2px !important; } /* Responsive — featured stays full-width; its 2 panels stack on mobile. */ @media (max-width: 1199.98px) { .service-outer-wrapper .field--name-field-add-items > .field__item:first-child { grid-column: 1 / -1 !important; grid-row: auto !important; } } @media (max-width: 767.98px) { /* Stack: navy card on top (full width), straight image below. */ .service-outer-wrapper .field__item:first-child .service-item-wrapper.is-featured { min-height: 0 !important; } .service-outer-wrapper .svc-featured__body { width: 100%; min-height: 0; border-radius: var(--et-radius-lg) var(--et-radius-lg) 0 0; /* rounded top */ box-shadow: none; } .service-outer-wrapper .svc-featured__media { position: static; /* flow below the body */ width: 100%; min-height: 200px; } } @media (prefers-reduced-motion: reduce) { .service-outer-wrapper .svc-featured__body, .service-outer-wrapper .service-item-wrapper.svc-view-all .svc-view-all__arrow { transition: none !important; } .service-outer-wrapper .field__item:first-child:hover .svc-featured__body { transform: none !important; } } @media (max-width: 767.98px) { .service-outer-wrapper .svc-featured__media { display: none !important; } }