/** * landing.css - Landing page (index.php) UI polish ONLY. * * Loaded exclusively by index.php (see the cssAsset() link in its ). * Every rule is scoped to `.landing-page` — the class added to *
on the landing page — so this file can never * affect the standalone frontend pages, the shared components or the admin * panel even if it were linked elsewhere. * * Design language (kept identical to the navbar + the stats strip): * navy #06163a (primary brand blue: navbar rail, dark bands, text accents) * navy deep #04122e (drawer + scrolled header) * cyan #22b8d1 (primary accent, buttons, active states) * brand light #E8ECF4 (chips, active pill backgrounds) * brand cloud #b9c2d6 (muted brand tone) * No new colors are introduced — the variables below are aliases only. * ============================================================ */ /* ============================================================ 1. TOKENS ============================================================ */ .landing-page { --lp-navy: #06163a; --lp-navy-deep: #04122e; --lp-cyan: #22b8d1; --lp-light: #E8ECF4; --lp-cloud: #b9c2d6; --lp-ink: #33424d; --lp-muted: #64748b; --lp-line: #e6ecf2; --lp-radius: 1rem; --lp-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ 2. SECTION HEADER (one canonical recipe for all sections) eyebrow pill -> headline -> subtitle -> accent rule ============================================================ */ .landing-page .lp-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 4vw, 4rem); } .landing-page .lp-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 9999px; background: rgba(34, 184, 209, 0.10); border: 1px solid rgba(34, 184, 209, 0.30); color: var(--lp-navy); font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 0.75rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; } .landing-page .lp-eyebrow__dot { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--lp-cyan); flex-shrink: 0; } /* Eyebrow on a navy band: the cyan reads directly on the dark surface. */ .landing-page .lp-eyebrow--invert { color: var(--lp-cyan); background: rgba(34, 184, 209, 0.12); border-color: rgba(34, 184, 209, 0.32); } @media (min-width: 640px) { .landing-page .lp-eyebrow { font-size: 0.8125rem; padding: 0.45rem 1.15rem; } } .landing-page .lp-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin: 1rem 0 0; } .landing-page .lp-title--light { color: #0f172a; } .landing-page .lp-title--dark { color: #ffffff; } /* One accent word per headline (cyan on every band, as in the navbar). */ .landing-page .lp-accent { color: var(--lp-cyan); } .landing-page .lp-sub { font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.125rem); line-height: 1.7; color: #475569; max-width: 40rem; margin: 1rem auto 0; } .landing-page .lp-sub--dark { color: rgba(226, 232, 240, 0.92); } /* Accent rule: 64 x 4px, brand cyan -> brand navy. */ .landing-page .lp-rule { display: block; width: 4rem; height: 0.25rem; border-radius: 9999px; margin: 1.5rem auto 0; background: linear-gradient(90deg, var(--lp-cyan), var(--lp-navy)); } /* ============================================================ 3. BUTTON SYSTEM One primary, one photo/dark ghost, one outline. The primary is the flat #22b8d1 fill used by the navbar's "Request A Quote" button, so every CTA feels like the same control family. ============================================================ */ .landing-page .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3rem; padding: 0 2rem; border: 1px solid transparent; border-radius: 0.75rem; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 700; line-height: 1; letter-spacing: 0.01em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .landing-page .lp-btn i, .landing-page .lp-btn svg { transition: transform 0.3s var(--lp-ease); } .landing-page .lp-btn:hover i, .landing-page .lp-btn:hover svg { transform: translateX(0.25rem); } .landing-page .lp-btn--primary { background: var(--lp-cyan); color: #ffffff; box-shadow: 0 10px 26px -12px rgba(34, 184, 209, 0.85); } .landing-page .lp-btn--primary:hover { background: var(--lp-navy); box-shadow: 0 16px 32px -12px rgba(34, 184, 209, 0.90); transform: translateY(-2px); } /* Photo / dark band: navy glass so it stays legible over imagery. */ .landing-page .lp-btn--ghost { background: rgba(6, 22, 58, 0.72); color: #ffffff; border-color: rgba(255, 255, 255, 0.40); backdrop-filter: blur(10px); box-shadow: 0 10px 26px -14px rgba(3, 12, 30, 0.90); } .landing-page .lp-btn--ghost:hover { background: rgba(6, 22, 58, 0.90); border-color: #ffffff; transform: translateY(-2px); } /* Dark section: subtle white wash secondary. */ .landing-page .lp-btn--outline { background: rgba(255, 255, 255, 0.10); color: #ffffff; border-color: rgba(255, 255, 255, 0.25); } .landing-page .lp-btn--outline:hover { background: rgba(255, 255, 255, 0.20); border-color: rgba(255, 255, 255, 0.45); transform: translateY(-2px); } /* Light surface (white sections): hairline slate secondary that answers with the brand cyan on hover — same language as the navbar links. */ .landing-page .lp-btn--light { background: #ffffff; color: #0f172a; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(6, 22, 58, 0.04); } .landing-page .lp-btn--light:hover { color: var(--lp-navy); border-color: rgba(34, 184, 209, 0.55); background: #ffffff; box-shadow: 0 14px 30px -16px rgba(34, 184, 209, 0.65); transform: translateY(-2px); } .landing-page .lp-btn:active { transform: translateY(0) scale(0.98); } .landing-page .lp-btn:focus-visible { outline: 2px solid var(--lp-cyan); outline-offset: 3px; } @media (min-width: 640px) { .landing-page .lp-btn { font-size: 1rem; min-height: 3.25rem; } } /* ============================================================ 4. CARD SYSTEM One card recipe (radius, hairline border, base shadow, hover lift + cyan border) for services, portfolio, team, blog and testimonials so every grid reads as the same component. ============================================================ */ .landing-page .lp-card { position: relative; display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); box-shadow: 0 1px 2px rgba(6, 22, 58, 0.04); overflow: hidden; transition: transform 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease), border-color 0.35s ease; } .landing-page .lp-card:hover { transform: translateY(-6px); border-color: rgba(34, 184, 209, 0.50); box-shadow: 0 24px 48px -18px rgba(6, 22, 58, 0.28), 0 16px 30px -14px rgba(34, 184, 209, 0.30); } /* Cards sitting on a navy band. */ .landing-page .lp-card--band { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 14px 36px -16px rgba(6, 22, 58, 0.70); } .landing-page .lp-card--band:hover { border-color: rgba(34, 184, 209, 0.60); box-shadow: 0 26px 54px -18px rgba(6, 22, 58, 0.80), 0 16px 30px -14px rgba(34, 184, 209, 0.35); } /* Media area: consistent 16/10 frame, slow zoom on hover. */ .landing-page .lp-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f1f5f9; } .landing-page .lp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--lp-ease); } .landing-page .lp-card:hover .lp-card__media img { transform: scale(1.05); } /* Overlay chips on thumbnails (category / department). Positioned by the component's own utilities; this class carries the look only. */ .landing-page .lp-card__chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 0.5rem; background: rgba(6, 22, 58, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 0.6875rem; font-weight: 600; line-height: 1.4; backdrop-filter: blur(6px); box-shadow: 0 6px 16px -10px rgba(3, 12, 30, 0.90); } /* In-card tags (technologies, skills). */ .landing-page .lp-tag { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 0.5rem; background: var(--lp-light); color: var(--lp-navy); font-size: 0.6875rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } /* Card text link ("Learn More" / "Details" / "Read More"). */ .landing-page .lp-card__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--lp-cyan); font-size: 0.875rem; font-weight: 700; text-decoration: none; transition: color 0.25s ease; } .landing-page .lp-card__link:hover { color: var(--lp-navy); } .landing-page .lp-card__link i { font-size: 0.75rem; transition: transform 0.3s var(--lp-ease); } .landing-page .lp-card__link:hover i { transform: translateX(0.25rem); } /* Card meta row (client / date + inline link). */ .landing-page .lp-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.875rem; border-top: 1px solid #eef2f6; color: #64748b; font-size: 0.75rem; } /* ============================================================ 6. FEATURE STRIP The stats bar and the About strip share one recipe: equal-height items, 48px icon tiles, bold title + muted non-clipped subtitle. ============================================================ */ .landing-page #stats .feature-item, .landing-page #about .feature-item { height: 100%; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; } .landing-page #stats .feature-item-title, .landing-page #about .feature-item-title { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; } @media (min-width: 640px) { .landing-page #stats .feature-item-title, .landing-page #about .feature-item-title { font-size: 1rem; } } /* Subtitle: never truncate (the shared `truncate` utility clipped longer copy such as "The price is always reasonable & good"). */ .landing-page #stats .feature-item-subtitle, .landing-page #about .feature-item-subtitle { margin-top: 0.25rem; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 0.8125rem; line-height: 1.45; color: #64748b; white-space: normal; overflow: visible; text-overflow: clip; } /* The About strip items lift slightly on hover, like the stats bar. */ .landing-page #about .feature-item { transition: background-color 0.25s ease, transform 0.25s ease; } .landing-page #about .feature-item:hover { transform: translateY(-2px); } /* ============================================================ 7. SECTION-SPECIFIC REFINEMENTS ============================================================ */ /* --- About: soft slate feature-strip band (sits between the white navbar / stats bar above and the white services band below, so the section reads as its own gentle step without breaking the page's light rhythm) --- */ .landing-page #about { position: relative; background: #f8fafc; } /* Soft brand glow behind the band: the navbar/stats cyan used as light so the tint never reads as flat and the strip pops out of it. */ .landing-page #about::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60rem 22rem at 90% -8%, rgba(34, 184, 209, 0.12), transparent 68%), radial-gradient(48rem 20rem at -8% 112%, rgba(6, 22, 58, 0.055), transparent 68%); } /* --- About watermark: a subtle, elegant brand signature behind the content (z-index 0 — the content shell above it is `relative z-10`). Two composed layers: the WebStrive "W" monogram drawn as inline-SVG strokes in brand navy at very low alpha (no extra HTTP request — the same data-URI technique already used in admin.css), plus a fine dot grid that fades out over the copy column. Static by design (nothing to disable for reduced motion) and purely decorative: `pointer-events: none` + `aria-hidden` on the element. --- */ .landing-page #about .about-watermark { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none'%3E%3Cpath d='M40 50L90 190L120 100L150 190L200 50' stroke='%2306163a' stroke-opacity='0.07' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), radial-gradient(rgba(6, 22, 58, 0.05) 1px, transparent 1.5px); background-repeat: no-repeat, repeat; background-position: right 2% bottom 6%, 0 0; background-size: clamp(18rem, 32vw, 30rem) auto, 22px 22px; -webkit-mask-image: radial-gradient(125% 125% at 16% 52%, transparent 0%, rgba(0, 0, 0, 0.35) 40%, #000 80%); mask-image: radial-gradient(125% 125% at 16% 52%, transparent 0%, rgba(0, 0, 0, 0.35) 40%, #000 80%); } /* Phones: drop the watermark so the stacked layout stays perfectly clean. */ @media (max-width: 640px) { .landing-page #about .about-watermark { display: none; } } /* --- About strip: the same raised surface + hairline language as #stats, so the four value items read as the page's second reference bar. The wrapper keeps its Tailwind utilities as a no-CSS fallback; the higher-specificity rules here own the band. --- */ .landing-page #about .about-strip { position: relative; z-index: 10; margin-top: clamp(2.5rem, 4vw, 3.5rem); padding: clamp(0.75rem, 1.6vw, 1.125rem) clamp(0.5rem, 1.4vw, 1rem); border: 1px solid var(--lp-line); border-radius: var(--lp-radius); background: #ffffff; box-shadow: 0 1px 2px rgba(6, 22, 58, 0.04), 0 22px 48px -34px rgba(6, 22, 58, 0.55); } /* Hairline dividers: the band is the raised white surface now (it inverted with the section tint), so the dividers keep the same one-step-stronger slate tone the stats bar uses on white. */ .landing-page #about .about-strip .feature-item { border-color: #e2e8f0; } /* Hover: the item settles onto the slate tint — the exact mirror of the stats bar's lift-onto-white language, tuned for the white band. */ .landing-page #about .about-strip .feature-item:hover { background-color: #f8fafc; box-shadow: 0 12px 26px -20px rgba(6, 22, 58, 0.55); } /* --- About media composition: same radius / hairline language as the strip tiles so the photography belongs to the feature-strip system. --- */ .landing-page #about .about-media { border-radius: var(--lp-radius); box-shadow: 0 30px 60px -36px rgba(6, 22, 58, 0.65); } .landing-page #about .about-media-float { border-radius: var(--lp-radius); border-color: #ffffff; box-shadow: 0 26px 50px -26px rgba(6, 22, 58, 0.60); } /* --- Video: navy -> cyan brand overlay (no stray teal / sky) --- */ .landing-page #video .lp-btn--play { background: var(--lp-cyan); border: 3px solid rgba(255, 255, 255, 0.85); color: #ffffff; box-shadow: 0 18px 40px -14px rgba(6, 22, 58, 0.9); } .landing-page #video .lp-btn--play:hover { background: var(--lp-navy); border-color: #ffffff; transform: scale(1.07); } /* --- Team: social circles mirror the navbar treatment --- */ .landing-page #team .lp-social { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; border: 1.5px solid rgba(34, 184, 209, 0.45); background: #f8fafc; color: var(--lp-navy); font-size: 0.75rem; line-height: 1; text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .landing-page #team .lp-social:hover { background: var(--lp-navy); border-color: var(--lp-navy); color: #ffffff; transform: translateY(-2px); } /* --- Testimonials: brand pagination dots (visible on light band) --- */ .landing-page #testimonials .swiper-pagination-bullet { background: rgba(15, 23, 42, 0.22); opacity: 1; transition: width 0.3s var(--lp-ease), background-color 0.3s ease; } .landing-page #testimonials .swiper-pagination-bullet-active { width: 1.75rem; border-radius: 9999px; background: var(--lp-cyan); } /* --- Testimonials: slider indicator (dots + arrows) --- */ .landing-page #testimonials .testimonial-pagination { position: static; width: auto; display: inline-flex; align-items: center; gap: 0.5rem; } .landing-page #testimonials .swiper-pagination-bullet { width: 0.5rem; height: 0.5rem; margin: 0 !important; cursor: pointer; } .landing-page #testimonials .testimonial-nav-btn { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1.5px solid rgba(34, 184, 209, 0.45); background: rgba(255, 255, 255, 0.08); color: var(--lp-cyan); font-size: 0.85rem; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .landing-page #testimonials .testimonial-nav-btn:hover { background: var(--lp-cyan); border-color: var(--lp-cyan); color: #ffffff; transform: translateY(-2px); } .landing-page #testimonials .testimonial-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; } /* --- Contact: canonical header, applied through the landing scope only. component/contact.php markup is shared with the standalone /contact page, so it stays byte-identical and is styled here. --- */ .landing-page #contact h2 { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin-top: 1rem; } /* Accent word: flat brand cyan like every other landing headline. */ .landing-page #contact h2>span { background-image: none !important; color: var(--lp-cyan); -webkit-text-fill-color: var(--lp-cyan); } /* Accent rule under the header (left aligned on the lg two-column layout). */ .landing-page #contact header::after { content: ""; display: block; width: 4rem; height: 0.25rem; border-radius: 9999px; margin: 1.5rem auto 0; background: linear-gradient(90deg, var(--lp-cyan), var(--lp-navy)); } @media (min-width: 1024px) { .landing-page #contact header::after { margin-left: 0; margin-right: auto; } } /* Form controls + submit: one comfortable size across all three tabs. */ .landing-page #contact input, .landing-page #contact textarea, .landing-page #contact select { border-radius: 0.75rem; } .landing-page #contact form button[type="submit"] { min-height: 3.25rem; border-radius: 0.75rem; font-size: 1rem; } /* --- Services Section (Redesigned: clean grid + asia map bg) --- */ /* No background colour — the section inherits the page background */ .landing-page #services { position: relative; background: linear-gradient(to bottom, #fbf4ff 0%, #f9efff 100%); } /* Asia map watermark — cropped into the upper background band */ .landing-page #services .services-map-bg { background-image: url('assets/img/services/world_map_bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 550px; bottom: auto; opacity: 0.22; mix-blend-mode: multiply; } .landing-page #services::before, .landing-page #services::after { content: ""; position: absolute; z-index: 0; pointer-events: none; } /* Reference watermark: soft dot matrix at the lower left. */ .landing-page #services::before { bottom: 28px; left: max(8%, calc((100% - 1240px) / 2)); width: 130px; height: 125px; background-image: radial-gradient(circle, rgba(185, 194, 214, 0.34) 0 5px, transparent 5.5px); background-size: 20px 20px; } /* Reference watermark: fine diagonal strokes at the lower right. */ .landing-page #services::after { bottom: 22px; right: max(8%, calc((100% - 1240px) / 2)); width: 135px; height: 125px; background: repeating-linear-gradient(120deg, transparent 0 8px, rgba(185, 194, 214, 0.25) 9px 11px, transparent 12px 18px); transform: skewX(-8deg); } @media (max-width: 767px) { .landing-page #services { background: linear-gradient(to bottom, #fbf4ff 0%, #f9efff 100%); } .landing-page #services .services-map-bg { height: 420px; } .landing-page #services::before { left: 8%; bottom: 22px; transform: scale(0.8); transform-origin: left top; } .landing-page #services::after { right: 7%; bottom: 18px; transform: skewX(-8deg) scale(0.8); transform-origin: right top; } } /* --- Service cards: modern, left-aligned, brand-consistent --- */ .landing-page .ref-service-card { position: relative; background: #ffffff; border-radius: 1.25rem; border: 1px solid var(--lp-line); box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05); overflow: hidden; transition: transform 0.35s var(--lp-ease), box-shadow 0.35s var(--lp-ease), border-color 0.35s ease; } /* Hover accent bar along the top edge */ .landing-page .ref-service-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--lp-cyan) 0%, var(--lp-navy) 100%); opacity: 0; transform: scaleX(0.4); transform-origin: center; transition: opacity 0.35s ease, transform 0.45s var(--lp-ease); z-index: 2; } .landing-page .ref-service-card:hover { transform: translateY(-8px); border-color: rgba(34, 184, 209, 0.45); box-shadow: 0 24px 44px -12px rgba(15, 23, 42, 0.16); } .landing-page .ref-service-card:hover::before { opacity: 1; transform: scaleX(1); } /* Media area */ .landing-page .ref-card__media img { transition: transform 0.7s var(--lp-ease); will-change: transform; } .landing-page .ref-service-card:hover .ref-card__media img { transform: scale(1.07); } /* Soft scrim at the bottom of the image so the badge pops */ .landing-page .ref-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 22, 58, 0.28) 0%, rgba(6, 22, 58, 0) 42%); pointer-events: none; } /* Icon badge overlapping the media / body seam */ .landing-page .ref-card__badge { position: absolute; left: 1.25rem; bottom: -1.375rem; width: 3.25rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--lp-navy); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 1rem; box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.28); transition: transform 0.35s var(--lp-ease), background-color 0.35s ease, color 0.35s ease; z-index: 2; } .landing-page .ref-service-card:hover .ref-card__badge { transform: translateY(-4px) rotate(-4deg); background: var(--lp-cyan); color: #ffffff; } /* Body */ .landing-page .ref-card__body { padding: 2.25rem 1.5rem 1.5rem; gap: 0.75rem; } /* Meta row: stars left, duration pill right */ .landing-page .ref-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .landing-page .ref-card__stars { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.7rem; color: #f59e0b; } .landing-page .ref-card__star--empty { color: #d5dde5; } .landing-page .ref-card__rating { margin-left: 0.35rem; font-style: normal; font-size: 0.7rem; font-weight: 600; color: var(--lp-muted); letter-spacing: 0.02em; white-space: nowrap; } .landing-page .ref-card__duration { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lp-navy); background: rgba(34, 184, 209, 0.1); padding: 0.3rem 0.65rem; border-radius: 999px; white-space: nowrap; } /* Title — Fraunces display serif, matching the lp design system */ .landing-page .ref-card__title { font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #0f172a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.3em * 2); /* keeps titles aligned across cards */ transition: color 0.3s ease; margin: 0; } .landing-page .ref-service-card:hover .ref-card__title { color: var(--lp-navy); } /* Supporting text — pulled from the existing short_description data */ .landing-page .ref-card__desc { font-size: 0.85rem; line-height: 1.6; color: var(--lp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } /* "See More" card CTA — cyan gradient aligned with the landing design language */ .landing-page .ref-quote-btn { margin-top: 1.25rem; background: linear-gradient(135deg, var(--lp-cyan) 0%, var(--lp-navy) 100%); box-shadow: 0 6px 18px rgba(34, 184, 209, 0.35); border: none; transition: transform 0.25s ease, box-shadow 0.25s ease; } .landing-page .ref-quote-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(6, 22, 58, 0.45); } .landing-page .ref-quote-btn i { transition: transform 0.3s var(--lp-ease); } .landing-page .ref-quote-btn:hover i { transform: translateX(3px); } /* Small phones: tighten the badge and body padding */ @media (max-width: 480px) { .landing-page .ref-card__body { padding: 2rem 1.25rem 1.25rem; } .landing-page .ref-card__badge { left: 1rem; width: 3rem; height: 3rem; font-size: 1.05rem; border-radius: 0.9rem; } } /* "View All Services" CTA */ .landing-page .view-all-services-btn { transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease; } .landing-page .view-all-services-btn:hover { background: var(--lp-cyan); color: #ffffff; transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(34, 184, 209, 0.5); } /* ============================================================ 8. REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .landing-page .lp-btn, .landing-page .lp-btn i, .landing-page .lp-btn svg, .landing-page .lp-card, .landing-page .lp-card__media img, .landing-page .lp-card__link i, .landing-page .ref-service-card, .landing-page .ref-service-card::before, .landing-page .ref-card__media img, .landing-page .ref-card__badge, .landing-page .ref-quote-btn, .landing-page .ref-quote-btn i, .landing-page .ref-card__title, .landing-page .view-all-services-btn, .landing-page #team .lp-social { transition: none !important; } .landing-page .lp-card:hover, .landing-page .lp-btn:hover, .landing-page .lp-card:hover .lp-card__media img, .landing-page .ref-service-card:hover, .landing-page .ref-service-card:hover .ref-card__media img, .landing-page .ref-service-card:hover .ref-card__badge, .landing-page .ref-quote-btn:hover, .landing-page .lp-card:hover .lp-card__link i, .landing-page #about .feature-item:hover { transform: none !important; } .landing-page #about .feature-item { transition: none !important; } } /* ============================================================ 9. HEADER / EDGE-CASE SAFETY ============================================================ */ /* Left-aligned header variant (two-column sections such as About). */ .landing-page .lp-head--start { text-align: left; max-width: 40rem; margin-left: 0; margin-right: 0; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .landing-page .lp-head--start .lp-sub { margin-left: 0; margin-right: 0; } .landing-page .lp-head--start .lp-rule { margin-left: 0; } /* Portrait media frame (team member photos keep their 4/3 ratio). */ .landing-page .lp-card__media--portrait { aspect-ratio: 4 / 3; } /* Very small phones: let section eyebrows wrap instead of overflowing. */ @media (max-width: 400px) { .landing-page .lp-eyebrow { white-space: normal; text-align: center; line-height: 1.35; } } /* --- Portfolio Section (Redesigned: mirrors the Services look + portfolio_bg watermark) --- */ .landing-page #portfolio { position: relative; background: linear-gradient(to bottom, #eefafd 0%, #e7f7fc 100%); } /* Portfolio watermark image - anchored to the BOTTOM of the Portfolio section */ .landing-page #portfolio .portfolio-map-bg { background-image: url('assets/img/portfolio/portfolio_bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 550px; bottom: auto; opacity: 0.16; mix-blend-mode: multiply; } .landing-page #portfolio::before, .landing-page #portfolio::after { content: ""; position: absolute; z-index: 0; pointer-events: none; } /* Watermark: soft dot matrix at the lower left */ .landing-page #portfolio::before { bottom: 28px; left: max(8%, calc((100% - 1240px) / 2)); width: 130px; height: 125px; background-image: radial-gradient(circle, rgba(34, 184, 209, 0.30) 0 5px, transparent 5.5px); background-size: 20px 20px; } /* Watermark: fine diagonal strokes at the lower right */ .landing-page #portfolio::after { bottom: 22px; right: max(8%, calc((100% - 1240px) / 2)); width: 135px; height: 125px; background: repeating-linear-gradient(120deg, transparent 0 8px, rgba(34, 184, 209, 0.22) 9px 11px, transparent 12px 18px); transform: skewX(-8deg); } /* Cards on the light band: same recipe as the Services ref-service-card - white surface, hairline border, cyan top accent bar revealed on hover. */ .landing-page #portfolio .lp-card { box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05); } .landing-page #portfolio .lp-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--lp-cyan) 0%, var(--lp-navy) 100%); opacity: 0; transform: scaleX(0.4); transform-origin: center; transition: opacity 0.35s ease, transform 0.45s var(--lp-ease); z-index: 2; } .landing-page #portfolio .lp-card:hover { transform: translateY(-8px); border-color: rgba(34, 184, 209, 0.45); box-shadow: 0 24px 44px -12px rgba(15, 23, 42, 0.16); } .landing-page #portfolio .lp-card:hover::before { opacity: 1; transform: scaleX(1); } .landing-page #portfolio .lp-card:hover .lp-card__media img { transform: scale(1.07); } @media (max-width: 767px) { .landing-page #portfolio { background: linear-gradient(to bottom, #eefafd 0%, #e7f7fc 100%); } .landing-page #portfolio .portfolio-map-bg { height: 420px; } .landing-page #portfolio::before { left: 8%; bottom: 22px; transform: scale(0.8); transform-origin: left top; } .landing-page #portfolio::after { right: 7%; bottom: 18px; transform: skewX(-8deg) scale(0.8); transform-origin: right top; } } /* ============================================================ 10. VIDEO SECTION — layout fixes (sizing / alignment / spacing) Scoped to the landing page only. ============================================================ */ /* Full-height band: content is vertically centered and the band never collapses to an awkwardly short strip. */ .landing-page #video { position: relative; display: flex; align-items: center; min-height: clamp(26rem, 62vh, 42rem); isolation: isolate; } /* Inner column: consistent responsive padding on every side. */ .landing-page #video .video-inner { width: 100%; padding-block: clamp(3.5rem, 8vw, 6rem); display: flex; flex-direction: column; align-items: center; } /* Content stack: one centered column with a stable max width. */ .landing-page #video .video-content { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 46rem; margin-inline: auto; text-align: center; } /* Play button: always a perfect circle that scales fluidly. */ .landing-page #video .video-play { width: clamp(4.75rem, 9vw, 6rem); height: clamp(4.75rem, 9vw, 6rem); flex-shrink: 0; } /* Ping ring: concentric with the button on every breakpoint. */ .landing-page #video .video-ping { width: clamp(6.25rem, 12vw, 7.5rem); height: clamp(6.25rem, 12vw, 7.5rem); } /* Rhythm between the stacked elements. */ .landing-page #video .video-content .lp-rule { margin-top: clamp(1.5rem, 2.5vw, 2rem); } /* ============================================================ 11. TEAM SECTION — Team_Watermark.jpg as a subtle watermark Same watermark recipe as the Services / Portfolio map layers. ============================================================ */ /* Tighter vertical height for the band. */ .landing-page #team { padding-top: clamp(1.75rem, 3vw, 2.75rem); padding-bottom: 0.75rem !important; } /* Header + nav/CTA gaps shrink a step to match. */ .landing-page #team .lp-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .landing-page #team .mt-12 { margin-top: clamp(1.5rem, 2.5vw, 2rem); } .landing-page #team .team-watermark-bg { position: absolute; inset: -15% 0; z-index: 0; pointer-events: none; background-image: url('assets/img/team/Team_Watermark.jpg'); background-repeat: no-repeat; background-size: 115% 145%; background-position: center center; opacity: 0.08; mix-blend-mode: multiply; } @media (max-width: 767px) { .landing-page #team .team-watermark-bg { opacity: 0.06; } } /* ============================================================ 12. BLOG SECTION — light band (like Team) + Blog_Watermark.jpg Same treatment as the Team watermark: multiply blend over a light tinted background, plus card shadows retuned from the old navy band to the light one. ============================================================ */ .landing-page #blog .blog-watermark-bg { position: absolute; inset: -15% 0; z-index: 0; pointer-events: none; background-image: url('assets/img/blog/Blog_Watermark.jpg'); background-repeat: no-repeat; background-size: 115% 145%; background-position: center center; opacity: 0.08; mix-blend-mode: multiply; } /* Cards: standard light-band shadow/hover instead of the navy-band ones. */ .landing-page #blog .blog-card { box-shadow: 0 1px 2px rgba(6, 22, 58, 0.04); } .landing-page #blog .blog-card:hover { border-color: rgba(34, 184, 209, 0.50) !important; box-shadow: 0 24px 48px -18px rgba(6, 22, 58, 0.28), 0 16px 30px -14px rgba(34, 184, 209, 0.30) !important; } @media (max-width: 767px) { .landing-page #blog .blog-watermark-bg { opacity: 0.06; } } /* ============================================================ 13. TESTIMONIALS SECTION — light band (like Team) + Team_Watermark.jpg as a subtle watermark. Same multiply treatment as the Team / Blog watermarks. ============================================================ */ /* Tighter vertical height for the band, with a subtle light divider between Team and Testimonials so they read as separate sections. */ .landing-page #testimonials { padding-top: 0.75rem !important; padding-bottom: clamp(2.25rem, 3.5vw, 3.25rem); border-top: 1px solid rgba(6, 22, 58, 0.10); } /* Header + nav/CTA gaps shrink a step to match. */ .landing-page #testimonials .lp-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .landing-page #testimonials .mt-8 { margin-top: clamp(1.5rem, 2.5vw, 2rem); } .landing-page #testimonials .mt-12 { margin-top: clamp(2rem, 3vw, 2.75rem); } .landing-page #testimonials .testimonial-watermark-bg { position: absolute; inset: -15% 0; z-index: 0; pointer-events: none; background-image: url('assets/img/team/Team_Watermark.jpg'); background-repeat: no-repeat; background-size: 115% 145%; background-position: center center; opacity: 0.08; mix-blend-mode: multiply; } @media (max-width: 767px) { .landing-page #testimonials .testimonial-watermark-bg { opacity: 0.06; } }