/* Theme Name: IT Next Consultant Description: Custom WordPress theme for IT Next Consultant — network infrastructure & physical security systems for retail and commercial businesses. Author: GearUp Code Version: 1.0 */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0A1628; /* Widened from #0F2040. With the decorative glows gone, tone alternation is the main thing separating sections — the old 10-point luminance gap was too tight to register on its own. */ --surface: #12264A; --accent: #8DC63F; --blue: #45B8FF; --navy: #004670; --border: #1E3A5F; --white: #FFFFFF; --muted: #94A3B8; --foot-bg: #060E1A; --max-w: 1440px; --t: 0.3s cubic-bezier(0.22, 1, 0.36, 1); } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--white); font-size: 16px; line-height: 1.6; overflow-x: hidden; } .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 32px; } /* ── FADE UP ── */ /* Scroll reveal: opacity only, no slide. Sliding content on every section is the single biggest "template demo" tell — a quiet fade reads as considered. */ /* Hiding is gated on the `js` class, which an inline script in sets before first paint. Without it .fu stayed at opacity:0 unconditionally — so if main.js failed to load (it is enqueued in the footer) the entire site rendered blank with no way to recover. No JS, no hiding, content just shows. */ .js .fu { opacity: 0; transition: opacity 0.4s ease-out; } .js .fu.on { opacity: 1; } /* Halved stagger — enough to avoid everything snapping in at once, not enough to read as a choreographed cascade. */ .js .fu.d1 { transition-delay: 0.05s; } .js .fu.d2 { transition-delay: 0.10s; } .js .fu.d3 { transition-delay: 0.15s; } .js .fu.d4 { transition-delay: 0.20s; } /* Anyone who has asked their OS for less motion gets the content outright, with no fade and no stagger. Previously the only reduced-motion rule on the site covered the CTA dot pattern; every scroll reveal still ran. */ @media (prefers-reduced-motion: reduce) { .js .fu, .js .fu.on { opacity: 1; transition: none; transition-delay: 0s; } } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #8DC63F, #6A952F); color: #fff; font-size: 15px; font-weight: 600; padding: 14px 28px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; letter-spacing: 0.01em; transition: box-shadow var(--t), transform var(--t); position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent); border-radius: inherit; } .btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); transform: translateY(-2px); } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--muted); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; } .btn-scroll-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; animation: btn-scroll-bounce 1.6s ease-in-out infinite; } @keyframes btn-scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ── LABEL / HEADING ── */ .label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; } .label::before { content: ''; display: inline-block; width: 20px; height: 2px; background: var(--accent); border-radius: 2px; } /* Centred-heading modifier. Applied ONLY to sections whose content is already centre-aligned (stat cards, connected-node grids, process steps). Deliberately not the common centred-heading-over-left-body pattern — that creates a "T" the eye has to jump across, and is the classic template tell. Keeping each section internally consistent instead gives the page a left / centre rhythm without any single section contradicting itself. */ .section--centered > .container { text-align: center; } .section--centered > .container > .sub { margin-left: auto; margin-right: auto; } .h2 { font-size: 38px; font-weight: 700; color: var(--white); line-height: 1.2; margin-bottom: 16px; } .sub { font-size: 17px; color: var(--muted); line-height: 1.8; max-width: 540px; margin-bottom: 32px; } /* ════════════════════════════════ NAVBAR ════════════════════════════════ */ nav { position: fixed; top: 0; left: 0; right: 0; /* Must sit ABOVE .mobile-menu (1050). `position: fixed` makes this nav its own stacking context, so the hamburger's own z-index:1100 is capped by whatever the nav has — at 1000 the open menu covered the navbar entirely and the X could not be tapped, leaving no way to close the menu. */ z-index: 1100; padding: 0 32px; overflow: visible; background: rgba(10,22,40,0.97); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 1px 0 var(--border); transition: background var(--t), box-shadow var(--t); } nav.scrolled { background: rgba(10,22,40,0.98); } .nav-inner { max-width: var(--max-w); margin: 0 auto; height: 92px; display: flex; align-items: center; justify-content: space-between; overflow: visible; } .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 1; min-width: 0; } .nav-logo img { height: 62px; width: auto; object-fit: contain; display: block; filter: brightness(0) invert(1); transition: opacity var(--t); } .nav-logo img:hover { opacity: 0.85; } .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .nav-links > li { position: relative; } .nav-links > li > a { font-size: 15.5px; font-weight: 500; letter-spacing: 0.03em; color: var(--muted); text-decoration: none; transition: color var(--t); position: relative; display: inline-flex; align-items: center; gap: 4px; } .nav-links > li > a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent); border-radius: 2px; transition: width var(--t); } .nav-links > li > a:hover, .nav-links > li > a.active { color: var(--white); } .nav-links > li > a.active::after, .nav-links > li > a:hover::after { width: 100%; } /* ── NAV DROPDOWNS ── */ .nav-chevron { font-size: 11px; opacity: 0.85; transition: transform var(--t), opacity var(--t); position: relative; top: 0; display: inline-block; } .has-dropdown:hover .nav-chevron { transform: rotate(180deg); opacity: 1; color: var(--accent); } .dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 18px; width: max-content; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 48px rgba(0,0,0,0.45); padding: 8px; list-style: none; z-index: 200; } .dropdown::before { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px; } .has-dropdown:hover .dropdown { display: block; } .dropdown li a { display: block; padding: 12px 16px; font-size: 14px; font-weight: 500; white-space: nowrap; color: rgba(255,255,255,0.82); text-decoration: none; border-radius: 8px; transition: background var(--t), color var(--t); } .dropdown li a:hover { background: rgba(141,198,63,0.15); color: var(--white); } [data-theme="light"] .dropdown li a { color: rgba(15,23,42,0.75); } [data-theme="light"] .dropdown li a:hover { color: var(--white); } /* ── HAMBURGER ── */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; padding: 8px; z-index: 1100; transition: border-color var(--t); } .hamburger:hover { border-color: var(--accent); } .hamburger span { display: block; width: 100%; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.35s ease, opacity 0.35s ease; transform-origin: center; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── MOBILE DRAWER ── */ .mobile-menu { display: none; position: fixed; inset: 0; background: rgba(10,22,40,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 1050; flex-direction: column; /* Safety net: the menu is a fixed, full-height panel, so any content taller than the screen was simply unreachable — nothing could scroll and plain `center` clips equally off the top and bottom. `safe center` keeps the centred look when it fits but falls back to the start edge when it doesn't; the flex-start declaration above it covers browsers without `safe`. */ justify-content: flex-start; justify-content: safe center; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; align-items: flex-start; /* Top padding clears the navbar, which now sits above this panel so the close (X) stays tappable. Without it the first menu item hides behind the header. */ padding: 100px 32px 40px; opacity: 0; transform: translateX(100%); transition: opacity 0.35s ease, transform 0.35s ease; } .mobile-menu.open { opacity: 1; transform: translateX(0); } .mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 8px; width: 100%; margin-bottom: 40px; } .mobile-menu ul a { font-size: 32px; font-weight: 700; color: var(--muted); text-decoration: none; letter-spacing: -0.02em; display: block; padding: 10px 0; border-bottom: 1px solid var(--border); transition: color var(--t), padding-left var(--t); } .mobile-menu ul a:hover { color: var(--white); padding-left: 12px; } .mobile-menu ul li:last-child a { border-bottom: none; } .mm-group { border-bottom: 1px solid var(--border); padding: 10px 0; } .mm-heading { display: block; font-size: 28px; font-weight: 700; color: var(--muted); letter-spacing: -0.02em; padding: 4px 0 2px; } .mm-sub { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } /* Scoped to `.mobile-menu ul` deliberately. As plain `.mm-sub a` (0,1,1) this entire rule lost to `.mobile-menu ul a` (0,2,1) above — so every submenu item rendered at 32px instead of 17px, with no indent and no left border. That alone made the open menu ~1350px tall, roughly double any phone screen. */ .mobile-menu ul .mm-sub a { font-size: 17px; font-weight: 500; color: var(--muted); text-decoration: none; display: block; padding: 8px 0 8px 16px; border-bottom: none; border-left: 2px solid var(--border); transition: color var(--t), border-color var(--t); } .mobile-menu ul .mm-sub a:hover { color: var(--white); border-color: var(--accent); } .mobile-contact { display: flex; flex-direction: column; gap: 12px; } .mobile-contact a { font-size: 15px; color: var(--muted); text-decoration: none; display: flex; align-items: center; gap: 10px; transition: color var(--t); } .mobile-contact a:hover { color: var(--accent); } .mobile-contact svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .mobile-cta { margin-top: 32px; width: 100%; } .mobile-cta .btn { width: 100%; justify-content: center; font-size: 16px; padding: 16px; } /* ════════════════════════════════ HERO ════════════════════════════════ */ #home { min-height: 100vh; display: flex; align-items: center; padding-top: 140px; padding-bottom: 80px; position: relative; overflow: hidden; } /* ════════════════════════════════ INTERNAL PAGE HERO (shorter band, no video — used on service/area pages) ════════════════════════════════ */ /* Internal pages get a page HEADER, not a cinematic hero. 900px of near-empty background on every subpage is the clearest template-demo signal there is — real B2B sites reserve the full-height treatment for the homepage. */ .page-hero { min-height: 0; display: flex; align-items: center; padding-top: 150px; padding-bottom: 80px; position: relative; overflow: hidden; } /* The homepage's 580px measure forces the subpage intro to 5 lines and the trust line to wrap — together that was ~270px of the hero. A wider measure is still comfortably readable at this size and removes the dead space. */ .page-hero .hero-content p { max-width: 780px; margin-bottom: 34px; } .page-hero .hero-trust { max-width: 780px; } .page-hero .hero-content { margin-top: 0; } .page-hero .hero-content h1 { font-size: 44px; } /* video background */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.75; } /* fallback background image/gradient when no video is available */ .hero-fallback-bg { position: absolute; inset: 0; z-index: 0; /* Near-solid. A pronounced diagonal gradient is the giveaway of a background with nothing real behind it — this reads as a flat considered surface and lets the type carry the hero. Replace with genuine site photography when Juan supplies it; that is the proper fix here. */ background: linear-gradient(180deg, #0C1A30 0%, #0A1628 100%); } /* dark gradient overlay so text stays readable */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(10,22,40,0.80) 0%, rgba(10,22,40,0.55) 60%, rgba(10,22,40,0.35) 100% ); z-index: 1; } /* animated bottom glow line */ /* Static hairline. Was a pulsing accent glow — permanent ambient animation with no informational purpose. Now just a quiet section boundary. */ .hero-line { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--border); } /* Cable-run schematic canvas. Sits ABOVE .hero-overlay (z-index 1), not below it — underneath, the overlay's 35-80% dark gradient was knocking the traces down to roughly 4% effective opacity, which is why they were invisible. Still below .hero-content (2). */ .hero-schematic { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .hero-content { position: relative; z-index: 2; max-width: 960px; margin-left: 0; margin-top: 36px; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(141,198,63,0.1); border: 1px solid rgba(141,198,63,0.25); border-radius: 100px; padding: 6px 16px; font-size: 13px; font-weight: 500; color: var(--accent); margin-bottom: 28px; } .hero-badge .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; } /* blue variant — used on the Website Design & Development page, matching its homepage service card */ .hero-badge--blue { background: rgba(69,184,255,0.1); border-color: rgba(69,184,255,0.25); color: var(--blue); } .hero-badge--blue .dot { background: var(--blue); } .hero-content h1 { font-size: 52px; font-weight: 800; color: var(--white); line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 28px; } .hero-content h1 .accent-word { color: var(--accent); } .hero-content h1 .accent-word--blue { color: var(--blue); } .hero-tagline { font-size: 15px; font-weight: 500; color: var(--accent); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 28px; opacity: 0.85; } .hero-content p { font-size: 18px; color: rgba(255,255,255,0.88); text-shadow: 0 1px 12px rgba(0,0,0,0.4); line-height: 1.8; max-width: 580px; margin-bottom: 44px; } .hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .hero-trust { font-size: 13px; color: var(--muted); margin-top: 48px; display: flex; align-items: center; gap: 10px; } .hero-trust::before { content: ''; display: block; width: 32px; height: 1px; background: var(--border); } /* ════════════════════════════════ STATS BAR ════════════════════════════════ */ .stats-bar { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0 32px; } .stats-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); } .stat-item { padding: 44px 32px; text-align: left; border-right: 1px solid var(--border); position: relative; transition: background var(--t); } .stat-item:last-child { border-right: none; } .stat-item:hover { background: rgba(141,198,63,0.04); } .stat-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; background: rgba(141,198,63,0.1); border: 1px solid rgba(141,198,63,0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .stat-icon svg { width: 20px; height: 20px; min-width: 20px; min-height: 20px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .stat-num { display: block; font-size: 42px; font-weight: 800; color: var(--white); letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px; } .stat-lbl { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 1px; } /* ════════════════════════════════ SERVICES ════════════════════════════════ */ #services, .services-section { padding: 110px 32px; position: relative; overflow: hidden; } #services::before, .services-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); } .services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } /* Homepage only — four service pillars read better as 2x2 than as four cramped columns. Scoped as a modifier because .services-grid itself is a 3-col grid used by the Smart Systems, Website Design and Office Equipment pages. Deliberately no mobile rule here: the existing `.services-grid { 1fr }` at max-width 960px sits later in this file, so it already collapses this to a single column at the same breakpoint as every other grid. */ .services-grid--four { grid-template-columns: repeat(2,1fr); } .s-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 36px; position: relative; overflow: hidden; transition: border-color var(--t), box-shadow var(--t), transform var(--t); } .s-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(141,198,63,0), transparent); transition: background var(--t); } .s-card:hover { border-color: rgba(141,198,63,0.5); box-shadow: 0 8px 32px rgba(0,0,0,0.2); transform: translateY(-3px); } .s-card:hover::before { background: linear-gradient(90deg, transparent, var(--accent), transparent); } .s-icon { width: 52px; height: 52px; min-width: 52px; min-height: 52px; background: rgba(141,198,63,0.1); border: 1px solid rgba(141,198,63,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .s-icon svg { width: 22px; height: 22px; min-width: 22px; min-height: 22px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .s-card h3 { font-size: 18px; font-weight: 600; color: var(--white); margin-bottom: 12px; letter-spacing: -0.01em; word-break: break-word; overflow-wrap: break-word; } .s-card p { font-size: 15px; color: var(--muted); line-height: 1.8; } /* These are real elements now — they were
s with cursor:pointer and a "Learn More" affordance that went nowhere, which made all six homepage cards dead ends into the Services and Service Area pages. Reset the inherited link styling so they still render exactly like the surrounding cards. */ .s-card--linkable { cursor: pointer; display: block; text-decoration: none; color: inherit; } .s-card--linkable:hover h3 { color: var(--accent); } .s-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 13.5px; font-weight: 600; color: var(--accent); letter-spacing: 0.02em; } .s-card--blue .s-icon { background: rgba(69,184,255,0.1); border-color: rgba(69,184,255,0.25); } .s-card--blue .s-icon svg { stroke: var(--blue); } .s-card--blue:hover { border-color: rgba(69,184,255,0.5); box-shadow: 0 8px 32px rgba(0,0,0,0.2); } .s-card--blue:hover::before { background: linear-gradient(90deg, transparent, var(--blue), transparent); } .s-card--blue .s-card-link { color: var(--blue); } .s-card--blue .s-card-link svg { stroke: var(--blue); } /* Real-photo card variant: background image is set inline per-card (via PHP, so it works regardless of theme), this class just adds the treatment — cover sizing + pinned light text, since a photo card stays dark-styled in both themes rather than following the light-mode flip to a white card. */ .s-card--photo { background-size: cover; background-position: center; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; } .s-card--photo .s-icon { background: rgba(10,22,40,0.75); border-color: rgba(141,198,63,0.35); backdrop-filter: blur(3px); } .s-card--photo .s-icon svg { stroke: var(--accent); } .s-card--photo h3 { color: #FFFFFF; } .s-card--photo p { color: #C3CEDC; } .s-card-link svg { width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t); } .s-card--linkable:hover .s-card-link svg { transform: translateX(4px); } /* ════════════════════════════════ HOW WE WORK ════════════════════════════════ */ .how-section { background: var(--surface); padding: 110px 32px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .how-section > .container { position: relative; z-index: 1; } .how-watermark { position: absolute; top: 50%; right: -40px; transform: translateY(-50%); width: auto; height: 340px; max-width: none; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.03; pointer-events: none; } .steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; position: relative; } .steps-grid::before { content: ''; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 1px; border-top: 2px dashed #8DC63F; opacity: 0.35; } .step { text-align: center; padding: 0 20px; position: relative; z-index: 1; transition: transform var(--t); } .step:hover { transform: translateY(-4px); } .step-num { width: 54px; height: 54px; border-radius: 50%; background: var(--navy); border: 6px solid var(--surface); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #FFFFFF; margin: 0 auto 24px auto; transition: box-shadow var(--t), transform var(--t); } .step:hover .step-num { box-shadow: none; transform: scale(1.05); } .step h3 { font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 10px; } .step p { font-size: 14px; color: var(--muted); line-height: 1.75; } /* ════════════════════════════════ ABOUT ════════════════════════════════ */ #about { padding: 110px 32px; position: relative; overflow: hidden; border-top: 1px solid var(--border); } .about-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 55fr 45fr; gap: 90px; align-items: center; } .accent-line { width: 60px; height: 3px; background: #8DC63F; border-radius: 3px; margin-bottom: 16px; } .about-text p { font-size: 16.5px; color: rgba(255,255,255,0.82); line-height: 1.85; margin-bottom: 22px; max-width: 620px; } .about-text p:last-child { margin-bottom: 0; } /* ── Printers & Copiers section: text + feature list left, real photo right ── */ .printers-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; margin-top: 8px; } .printers-content { display: flex; flex-direction: column; } .printers-features { display: flex; flex-direction: column; gap: 24px; margin-top: 36px; } .printers-feature { display: flex; align-items: flex-start; gap: 18px; } .printers-feature-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; background: rgba(141,198,63,0.1); border: 1px solid rgba(141,198,63,0.2); display: flex; align-items: center; justify-content: center; } .printers-feature-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .printers-feature h3 { font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 6px; letter-spacing: -0.01em; } .printers-feature p { font-size: 14.5px; color: var(--muted); line-height: 1.7; } .printers-photo { min-height: 420px; border-radius: 16px; border: 1px solid var(--border); background-size: cover; background-position: center; box-shadow: 0 8px 32px rgba(0,0,0,0.2); } [data-theme="light"] .printers-photo { background-size: cover; } .about-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #8DC63F; border-radius: 12px; padding: 52px 40px; text-align: left; position: relative; overflow: hidden; } .about-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.4; } /* decorative rings */ .about-card .ring { position: absolute; border-radius: 50%; border: 1px solid var(--border); pointer-events: none; } .about-card .ring1 { width: 200px; height: 200px; top: -60px; right: -60px; opacity: 0.4; } .about-card .ring2 { width: 160px; height: 160px; bottom: -50px; left: -50px; opacity: 0.25; } .about-metric { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; } .about-metric:last-of-type { border-bottom: none; margin-bottom: 0; } .about-metric-num { font-size: 36px; font-weight: 700; color: #8DC63F; letter-spacing: -0.04em; line-height: 1; margin-bottom: 4px; } .about-metric-lbl { font-size: 13px; color: var(--muted); font-weight: 500; } .about-location { position: relative; z-index: 1; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); } .about-location-city { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 4px; } .about-location-sub { font-size: 13px; color: var(--muted); } /* ════════════════════════════════ WHY CHOOSE US ════════════════════════════════ */ .why-section { background: var(--surface); padding: 110px 32px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .why-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; overflow: hidden; transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .why-item::before { content: attr(data-num); position: absolute; top: 14px; right: 18px; font-size: 56px; font-weight: 800; line-height: 1; color: var(--accent); opacity: 0.08; pointer-events: none; transition: opacity var(--t), transform var(--t); } .why-item:hover { transform: translateY(-5px); border-color: rgba(141,198,63,0.5); box-shadow: 0 8px 32px rgba(0,0,0,0.25); } .why-item:hover::before { opacity: 0.14; transform: scale(1.08); } .why-icon { position: relative; z-index: 1; flex-shrink: 0; width: 52px; height: 52px; background: rgba(141,198,63,0.1); border: 1px solid rgba(141,198,63,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; transition: background var(--t), border-color var(--t), transform var(--t); } .why-item:hover .why-icon { background: var(--accent); border-color: var(--accent); transform: scale(1.08) rotate(-6deg); } .why-icon svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t); } .why-item:hover .why-icon svg { stroke: #FFFFFF; } .why-item h3 { position: relative; z-index: 1; font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 10px; letter-spacing: -0.01em; } .why-item p { position: relative; z-index: 1; font-size: 14px; color: var(--muted); line-height: 1.75; } /* Blue variant — Website Design & Development page */ .why-item--blue::before { color: var(--blue); } .why-item--blue:hover { border-color: rgba(69,184,255,0.5); box-shadow: 0 8px 32px rgba(0,0,0,0.25); } .why-item--blue .why-icon { background: rgba(69,184,255,0.1); border-color: rgba(69,184,255,0.2); } .why-item--blue .why-icon svg { stroke: var(--blue); } .why-item--blue:hover .why-icon { background: var(--blue); border-color: var(--blue); } /* ════════════════════════════════ SERVICE PAGE — OVERVIEW SECTION ════════════════════════════════ */ .ns-overview { background: var(--surface); padding: 110px 32px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .ns-overview-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; margin-top: 8px; } .ns-overview-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .ns-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px 18px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,0.85); text-decoration: none; transition: border-color var(--t), transform var(--t), box-shadow var(--t); } .ns-chip--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; } .ns-chip-icon { width: 38px; height: 38px; min-width: 38px; background: rgba(141,198,63,0.1); border: 1px solid rgba(141,198,63,0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: background var(--t), border-color var(--t), transform var(--t); } .ns-chip-icon svg { width: 17px; height: 17px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t); } .ns-chip:hover { border-color: rgba(141,198,63,0.5); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); } .ns-chip--wide:hover { transform: translateY(-2px); } .ns-chip:hover .ns-chip-icon { background: var(--accent); border-color: var(--accent); transform: scale(1.06) rotate(-4deg); } .ns-chip:hover .ns-chip-icon svg { stroke: #FFFFFF; } /* Blue variant — Website Design & Development page */ .ns-chip--blue .ns-chip-icon { background: rgba(69,184,255,0.1); border-color: rgba(69,184,255,0.2); } .ns-chip--blue .ns-chip-icon svg { stroke: var(--blue); } .ns-chip--blue:hover { border-color: rgba(69,184,255,0.5); box-shadow: 0 8px 20px rgba(0,0,0,0.2); } .ns-chip--blue:hover .ns-chip-icon { background: var(--blue); border-color: var(--blue); } /* ── MILESTONES (About page) ── */ .milestone-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 28px; } .milestone-item { /* --surface, not --bg: these cards sit on a bg-toned section, matching the .s-card convention. Using --bg here renders them invisible in dark mode. */ background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 30px 24px; text-align: center; transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .milestone-item:hover { transform: translateY(-4px); border-color: rgba(141,198,63,0.5); box-shadow: 0 8px 24px rgba(0,0,0,0.22); } .milestone-num { font-size: 42px; font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -0.02em; margin-bottom: 10px; } .milestone-lbl { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 8px; } .milestone-sub { font-size: 13px; color: var(--muted); line-height: 1.6; } /* ── FOUNDER PULL-QUOTE (About page) ── */ .story-quote { position: relative; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 14px; padding: 36px 34px; overflow: hidden; } .story-quote::before { content: '\201C'; position: absolute; top: 2px; right: 24px; font-size: 92px; line-height: 1; font-weight: 800; color: var(--accent); opacity: 0.12; pointer-events: none; } .story-quote p { position: relative; z-index: 1; font-size: 19px; line-height: 1.7; color: var(--white); font-style: italic; margin-bottom: 22px; } .story-quote cite { position: relative; z-index: 1; display: block; font-style: normal; font-size: 14px; font-weight: 600; color: var(--accent); } .story-quote cite span { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 3px; } /* ── FLAGSHIP HIGHLIGHT (EAS + Drive-Thru) ── */ .flagship-section { padding: 110px 32px; position: relative; overflow: hidden; border-top: 1px solid var(--border); } .flagship-section::after { content: ''; position: absolute; inset: 0; background-image: none; background-size: 28px 28px; mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 40%, transparent 100%); pointer-events: none; } .flagship-section > .container { position: relative; z-index: 1; } .flagship-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-top: 8px; } .flagship-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 40px; position: relative; overflow: hidden; transition: border-color var(--t), box-shadow var(--t), transform var(--t); } .flagship-card:hover { border-color: rgba(141,198,63,0.5); box-shadow: 0 8px 32px rgba(0,0,0,0.2); transform: translateY(-3px); } /* Video-backed flagship card. Uses a real