/* * WebWithSM — assets/css/main.css * * All theme styles. * Media queries live in responsive.css. * * Table of contents: * 1. Design tokens (CSS custom properties) * 2. Reset & base * 3. Typography * 4. Utilities * 5. Buttons * 6. Header & nav * 7. Mobile nav * 8. Skip link * 9. Hero section * 10. About card * 11. Trust bar * 12. CTA strip (Build / Advise) * 13. Sections commons * 14. Services * 15. Industries * 16. Why / E-E-A-T / Process * 17. Case studies * 18. Fiverr * 19. Packages * 20. FAQ * 21. Testimonials * 22. Blog * 23. Final CTA * 24. Footer * 25. Single service * 26. Single case study * 27. Single post * 28. Archive pages * 29. 404 page * 30. Breadcrumbs * 31. Pagination * 32. Prose (rich text content) * 33. Accessibility helpers */ /* ───────────────────────────────────────────────────────────────────────────── 1. DESIGN TOKENS ───────────────────────────────────────────────────────────────────────────── */ :root { /* Colours */ --navy: #06142B; --navy-mid: #0D1F3C; --navy-soft: #132848; --blue: #2563EB; --blue-lt: #3B82F6; --blue-bright: #60A5FA; --white: #FFFFFF; --off: #F5F7FB; --muted: #5A6478; --border: #DDE3EE; --gold: #92400E; --wa: #25D366; --wa-dk: #1EB85A; /* Typography */ --font-head: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; /* Spacing */ --pad: clamp( 16px, 5vw, 64px ); --max: 1280px; --section-pad: clamp( 56px, 8vw, 96px ); /* Radii */ --r: 14px; --r-lg: 18px; --r-xl: 24px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-md: 0 4px 16px rgba(0,0,0,.1); --shadow-lg: 0 8px 32px rgba(0,0,0,.14); /* Transitions */ --transition: 0.2s ease; } /* ───────────────────────────────────────────────────────────────────────────── 2. RESET & BASE ───────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var( --font-body ); font-size: 16px; line-height: 1.65; color: var( --navy ); background: var( --white ); overflow-x: hidden; } body.nav-open { overflow: hidden; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; font-family: var( --font-body ); border: none; background: none; } /* ───────────────────────────────────────────────────────────────────────────── 3. TYPOGRAPHY ───────────────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var( --font-head ); font-weight: 600; line-height: 1.2; color: var( --navy ); } h1 { font-size: clamp( 32px, 5vw, 52px ); font-weight: 700; letter-spacing: -.5px; } h2 { font-size: clamp( 26px, 4vw, 36px ); letter-spacing: -.3px; } h3 { font-size: clamp( 18px, 2.5vw, 22px ); } h4 { font-size: clamp( 16px, 2vw, 19px ); } h5 { font-size: clamp( 14px, 1.8vw, 17px ); } p { font-family: var( --font-body ); font-size: clamp( 14px, 1.5vw, 16px ); line-height: 1.7; color: var( --muted ); } /* ───────────────────────────────────────────────────────────────────────────── 4. UTILITIES ───────────────────────────────────────────────────────────────────────────── */ .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); width: 100%; } .section-pad { padding: var(--section-pad) 0; } .kicker { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; } .kicker-lt { color: var(--blue-bright); } .section-lead { font-size: clamp(15px,1.8vw,17px); color: var(--muted); line-height: 1.8; max-width: 600px; margin-bottom: 52px; } .text-white { color: var(--white) !important; } .text-blue-bright { color: var(--blue-bright) !important; } .prose { max-width: 72ch; } .section-cta { text-align: center; margin-top: 44px; } /* ───────────────────────────────────────────────────────────────────────────── 5. BUTTONS ───────────────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all var(--transition); white-space: nowrap; text-decoration: none; } .btn--full { width: 100%; justify-content: center; } .btn-sm { padding: 9px 18px; font-size: 13px; } .btn-lg { padding: 15px 34px; font-size: 16px; } .btn-primary { background: var(--blue); color: var(--white); } .btn-primary:hover { background: var(--blue-lt); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.3); } .btn-outline:hover { border-color: rgba(255,255,255,.65); } .btn-outline-dark { background: transparent; color: var(--navy); border: 1.5px solid var(--border); } .btn-outline-dark:hover { border-color: var(--blue); color: var(--blue); } .btn-wa { background: var(--wa); color: var(--white); } .btn-wa:hover { background: var(--wa-dk); } .btn-text { background: none; border: none; color: var(--blue); font-family:var(--font-body); font-size: 13.5px; font-weight:500; display: inline-flex; align-items:center; gap: 6px; padding: 0; cursor: pointer; transition: gap var(--transition); } .btn-text:hover { gap: 10px; } .btn-fiverr { width: 100%; background: #1DBF73; color: var(--white); border: none; border-radius: 8px; padding: 12px; font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .btn-fiverr:hover { background: #17a862; } /* ───────────────────────────────────────────────────────────────────────────── 6. HEADER & NAV ───────────────────────────────────────────────────────────────────────────── */ .site-header { background: var(--navy); position: sticky; top: 0; z-index: 100; height: 72px; display: flex; align-items: center; transition: box-shadow var(--transition); } .site-header.is-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.25); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; } .nav-logo { display: flex; align-items: baseline; cursor: default; flex-shrink: 0; } .logo-web, .logo-sm{ font-family: var(--font-head); font-size: clamp(18px,2.5vw,26px); font-weight: 700; color: var(--white); } .logo-with { font-family: var(--font-head); font-size: clamp(18px,2.5vw,26px); font-weight: 400; color: var(--blue-bright); } .primary-nav-wrap { flex: 1; display: flex; justify-content: center; } .primary-nav { display: flex; gap: clamp(16px, 2.5vw, 30px); align-items:center; } .primary-nav .nav__item { list-style: none; } .primary-nav .nav__link { color: rgba(255,255,255,.58); font-family: var(--font-body); font-size: 14px; font-weight: 500; transition: color var(--transition); padding: 4px 0; position: relative; } .primary-nav .nav__link::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 100%; height: 2px; background: var(--blue-bright); transition: right var(--transition); } .primary-nav .nav__link:hover, .primary-nav .nav__link.nav__link--active, .primary-nav .nav__link[aria-current="page"] { color: var(--white); } .primary-nav .nav__link:hover::after, .primary-nav .nav__link.nav__link--active::after { right: 0; } .nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } .btn-wa-text { display: inline; } .nav-hamburger { display: none; background: none; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 8px; color: var(--white); align-items: center; justify-content: center; flex-shrink: 0; } .hamburger-close { display: none; } .nav-hamburger[aria-expanded="true"] .hamburger-icon { display: none; } .nav-hamburger[aria-expanded="true"] .hamburger-close { display: block; } /* ───────────────────────────────────────────────────────────────────────────── 7. MOBILE NAV ───────────────────────────────────────────────────────────────────────────── */ .mobile-nav { display: none; background: var(--navy-mid); position: fixed; top: 72px; left: 0; right: 0; bottom: 0; z-index: 99; overflow-y: auto; border-top: 1px solid rgba(255,255,255,.08); } .mobile-nav.open { display: block; } .mobile-nav .container { padding-top: 24px; padding-bottom: 40px; } .mobile-nav__list { display: flex; flex-direction: column; margin-bottom: 28px; } .mobile-nav__list .nav__item { border-bottom: 1px solid rgba(255,255,255,.06); } .mobile-nav__list .nav__item:last-child { border-bottom: none; } .mobile-nav__list .nav__link { display: block; color: rgba(255,255,255,.7); font-family: var(--font-body); font-size: 16px; font-weight: 500; padding: 14px 0; } .mobile-nav__list .nav__link[aria-current="page"] { color: var(--blue-bright); } .mobile-nav__actions { display: flex; flex-direction: column; gap: 12px; } /* ───────────────────────────────────────────────────────────────────────────── 8. SKIP LINK ───────────────────────────────────────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--blue); color: var(--white); padding: 10px 20px; border-radius: 0 0 8px 8px; z-index: 9999; font-weight:500; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ───────────────────────────────────────────────────────────────────────────── 9. HERO ───────────────────────────────────────────────────────────────────────────── */ .hero { background: var(--navy); padding: clamp(56px,8vw,88px) 0 clamp(64px,8vw,96px); } .hero-grid { display: grid; grid-template-columns: 1fr 400px; gap: clamp(32px,5vw,72px); align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.2); border-radius:20px; padding: 7px 16px; margin-bottom:26px; } .hero-eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--blue-bright); flex-shrink:0; } .hero-eyebrow span{ color:var(--blue-bright); font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.3px; } .hero h1 { color:var(--white); margin-bottom:20px; } .hero h1 em { color:var(--blue-bright); font-style:normal; } .hero-desc { color:rgba(255,255,255,.65); font-size:clamp(15px,1.8vw,17px); line-height:1.75; margin-bottom:36px; max-width:520px; } .hero-ctas { display:flex; gap:14px; margin-bottom:48px; flex-wrap:wrap; } .hero-stats { display:flex; gap:clamp(20px,4vw,44px); border-top:1px solid rgba(255,255,255,.08); padding-top:34px; flex-wrap:wrap; } .stat-num { font-family:var(--font-head); font-size:clamp(24px,3vw,32px); font-weight:700; color:var(--white); line-height:1; } .stat-label { font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,.45); margin-top:5px; } /* ───────────────────────────────────────────────────────────────────────────── 10. ABOUT CARD ───────────────────────────────────────────────────────────────────────────── */ .about-card { background:var(--navy-mid); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-xl); padding:clamp(20px,3vw,32px); position:relative; } .avail-badge { position:absolute; top:18px; right:18px; display:flex; align-items:center; gap:6px; background:rgba(5,150,105,.18); border:1px solid rgba(5,150,105,.35); border-radius:20px; padding:5px 12px; } .avail-dot { width:7px; height:7px; border-radius:50%; background:#10B981; flex-shrink:0; } .avail-badge span{ font-family:var(--font-body); font-size:11px; color:#34D399; font-weight:500; } .about-avatar { width:80px; height:80px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; border:3px solid rgba(255,255,255,.1); } .about-avatar span{ font-family:var(--font-head); font-size:26px; font-weight:700; color:var(--white); } .about-name { font-family:var(--font-head); font-size:clamp(18px,2vw,22px); font-weight:600; color:var(--white); text-align:center; margin-bottom:4px; } .about-role { font-family:var(--font-body); font-size:11px; color:var(--blue-bright); text-align:center; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; font-weight:500; } .about-bio { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.55); line-height:1.65; text-align:center; margin-bottom:18px; } .skills { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:18px; } .skill-tag { background:rgba(26,68,204,.2); border:1px solid rgba(37,99,235,.3); border-radius:5px; padding:4px 10px; font-family:var(--font-body); font-size:11.5px; color:var(--blue-bright); font-weight:500; } .about-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; } .about-stat { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:9px; padding:11px; text-align:center; } .about-stat-num { font-family:var(--font-head); font-size:22px; font-weight:700; color:var(--white); line-height:1; } .about-stat-label{ font-family:var(--font-body); font-size:10.5px; color:rgba(255,255,255,.4); margin-top:3px; } /* ───────────────────────────────────────────────────────────────────────────── 11. TRUST BAR ───────────────────────────────────────────────────────────────────────────── */ .trust-bar { background:var(--off); border-bottom:1px solid var(--border); padding:14px var(--pad); } .trust-list { display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,36px); flex-wrap:wrap; } .trust-item { display:flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:12.5px; color:var(--muted); font-weight:500; } .trust-icon { width:15px; height:15px; border-radius:50%; background:#D1FAE5; display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* ───────────────────────────────────────────────────────────────────────────── 12. CTA STRIP — BUILD / ADVISE ───────────────────────────────────────────────────────────────────────────── */ .cta-strip-section { background:var(--white); padding:clamp(48px,6vw,80px) 0; border-bottom:1px solid var(--border); } .cta-strip-header { text-align:center; margin-bottom:44px; } .cta-eyebrow { display:inline-flex; align-items:center; gap:8px; background:#EFF6FF; border:1px solid #BFDBFE; border-radius:20px; padding:5px 14px; margin-bottom:14px; } .cta-eyebrow span { font-family:var(--font-body); font-size:12px; font-weight:500; color:var(--blue); } .cta-strip-header h2 em { color:var(--blue); font-style:normal; } .cta-cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; } .cta-card { border-radius:var(--r-lg); padding:clamp(24px,4vw,40px) clamp(20px,4vw,44px); border:1.5px solid var(--border); transition:transform var(--transition),border-color var(--transition); position:relative; overflow:hidden; } .cta-card.blue { background:linear-gradient(135deg,#EFF6FF,#F5F9FF); border-color:#BFDBFE; } .cta-card.green { background:linear-gradient(135deg,#ECFDF5,#F2FDF7); border-color:#A7F3D0; } .cta-card:hover { transform:translateY(-3px); } .cta-card.blue:hover { border-color:#93C5FD; } .cta-card.green:hover{ border-color:#6EE7B7; } .cta-card-deco { position:absolute; bottom:-20px; right:16px; font-family:var(--font-head); font-size:clamp(80px,12vw,110px); font-weight:700; line-height:1; pointer-events:none; user-select:none; opacity:.05; } .blue .cta-card-deco { color:var(--blue); } .green .cta-card-deco { color:#047857; } .cta-tag { display:inline-flex; align-items:center; gap:7px; border-radius:6px; padding:4px 12px; font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:16px; } .tag-blue { background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.2); color:var(--blue); } .tag-green { background:rgba(5,150,105,.1); border:1px solid rgba(5,150,105,.2); color:#047857; } .cta-card h3 { font-family:var(--font-head); font-size:clamp(20px,2.5vw,28px); font-weight:600; color:var(--navy); margin-bottom:10px; } .cta-card > p { font-size:clamp(14px,1.5vw,16px); margin-bottom:18px; } .chip-row { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:24px; } .chip-blue { background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.18); border-radius:5px; padding:4px 11px; font-family:var(--font-body); font-size:12.5px; color:var(--blue); font-weight:500; } .chip-green { background:rgba(5,150,105,.08); border:1px solid rgba(5,150,105,.18); border-radius:5px; padding:4px 11px; font-family:var(--font-body); font-size:12.5px; color:#047857; font-weight:500; } /* ───────────────────────────────────────────────────────────────────────────── 13. SECTION COMMONS ───────────────────────────────────────────────────────────────────────────── */ .sec-white { background:var(--white); } .sec-off { background:var(--off); } .sec-dark { background:var(--navy); } .sec-dark2 { background:var(--navy-mid); } .archive-hero { background:var(--navy); padding:clamp(48px,6vw,80px) 0; } .archive-hero h1 { color:var(--white); margin:12px 0 16px; } .archive-hero__lead { color:rgba(255,255,255,.58); font-size:clamp(15px,1.8vw,17px); max-width:620px; line-height:1.78; } .archive-filter { background:var(--off); border-bottom:1px solid var(--border); padding:16px 0; } .filter-row { display:flex; gap:8px; flex-wrap:wrap; } .filter-btn { background:rgba(6,20,43,.06); border:1px solid var(--border); border-radius:6px; padding:8px 18px; font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; transition:all var(--transition); } .filter-btn:hover { background:var(--off); border-color:var(--blue); color:var(--blue); } .filter-btn.active { background:var(--blue); border-color:var(--blue); color:var(--white); } .sec-dark .filter-btn,.sec-dark2 .filter-btn { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.55); } .sec-dark .filter-btn:hover,.sec-dark2 .filter-btn:hover { background:rgba(255,255,255,.1); color:var(--white); } /* ───────────────────────────────────────────────────────────────────────────── 14. SERVICES ───────────────────────────────────────────────────────────────────────────── */ .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .service-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:clamp(20px,3vw,30px); position:relative; overflow:hidden; transition:transform var(--transition),border-color var(--transition); display:flex; flex-direction:column; } .service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .3s; } .service-card:hover { border-color:#BFDBFE; transform:translateY(-3px); } .service-card:hover::before { transform:scaleX(1); } .service-icon { width:44px; height:44px; border-radius:10px; background:#EFF6FF; display:flex; align-items:center; justify-content:center; margin-bottom:16px; flex-shrink:0; } .service-card h3 { color:var(--navy); margin-bottom:8px; } .service-card p { font-size:14.5px; flex:1; } .service-card .btn-text { margin-top:16px; } .service-card__tagline { font-size:14.5px; color:var(--muted); line-height:1.65; flex:1; } /* Single service */ .service-hero { background:var(--navy); padding:clamp(48px,7vw,80px) 0; } .service-hero__grid { display:grid; grid-template-columns:1fr 400px; gap:64px; align-items:center; } .service-hero__content h1 { color:var(--white); margin:10px 0 18px; } .service-hero__tagline { color:rgba(255,255,255,.65); font-size:17px; line-height:1.75; margin-bottom:28px; max-width:500px; } .service-hero__badges { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:32px; } .service-badge { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:12px 18px; } .service-badge__label { font-family:var(--font-body); font-size:11px; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:4px; } .service-badge__value { font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--white); } .service-hero__ctas { display:flex; gap:12px; flex-wrap:wrap; } .service-hero__visual { border-radius:var(--r-lg); overflow:hidden; } .service-hero__img { width:100%; height:100%; object-fit:cover; border-radius:var(--r-lg); } .service-hero__icon { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:40px; display:flex; align-items:center; justify-content:center; } .service-hero__icon svg { width:80px; height:80px; color:var(--blue-bright); } .service-features { background:var(--off); } .service-features__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; } .service-features__intro h2 em { color:var(--blue); font-style:normal; } .service-features__list { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; } .service-features__item { display:flex; align-items:flex-start; gap:10px; font-family:var(--font-body); font-size:14.5px; color:var(--navy); } .service-features__icon { width:20px; height:20px; border-radius:50%; background:#EFF6FF; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; } .service-content { background:var(--white); } .service-content__body { margin:0 auto; } .service-process { background:var(--navy); } .service-process h2 { color:var(--white); margin-bottom:44px; } .service-process__list { display:grid; grid-template-columns:repeat(2,1fr); gap:0; } .service-process__step { display:flex; gap:16px; align-items:flex-start; padding:24px; border-bottom:1px solid rgba(255,255,255,.06); border-right:1px solid rgba(255,255,255,.06); } .service-process__step:nth-child(even) { border-right:none; } .service-process__step h3 { font-family:var(--font-head); font-size:17px; color:var(--white); margin-bottom:6px; } .service-process__step p { font-size:13.5px; color:rgba(255,255,255,.45); } .related-services { background:var(--off); } .cs-related-service { background:var(--off); } .cs-related-service__card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(28px,4vw,48px); display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .cs-related-service__price{ font-family:var(--font-body); font-size:16px; color:var(--muted); margin-top:10px; } .cs-related-service__price strong { color:var(--blue); } .cs-related-service__ctas { display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; } /* ───────────────────────────────────────────────────────────────────────────── 15. INDUSTRIES ───────────────────────────────────────────────────────────────────────────── */ .industries-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .industry-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:clamp(16px,2.5vw,24px); text-align:center; transition:all var(--transition); } .industry-card:hover { border-color:#BFDBFE; background:#EFF6FF; transform:translateY(-2px); } .industry-card__link { display:block; text-decoration:none; } .industry-icon { width:48px; height:48px; border-radius:11px; background:#EFF6FF; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; transition:background var(--transition); } .industry-card:hover .industry-icon { background:rgba(37,99,235,.1); } .industry-card h3 { font-size:clamp(14px,1.8vw,16px); color:var(--navy); margin-bottom:6px; } .industry-card p { font-size:12.5px; line-height:1.6; } .industry-more { font-family:var(--font-body); font-size:12.5px; color:var(--blue); margin-top:10px; display:block; font-weight:500; } /* ───────────────────────────────────────────────────────────────────────────── 16. WHY / E-E-A-T / PROCESS ───────────────────────────────────────────────────────────────────────────── */ .why-section { background:var(--navy); } .why-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; } .why-section h2{ color:var(--white); margin-bottom:12px; } .why-lead { color:rgba(255,255,255,.55); font-size:clamp(14px,1.5vw,16px); margin-bottom:0; line-height:1.75; } .eeat-list { display:flex; flex-direction:column; gap:22px; margin-top:32px; } .eeat-item { display:flex; gap:16px; align-items:flex-start; } .eeat-icon { width:40px; height:40px; border-radius:9px; background:rgba(37,99,235,.18); border:1px solid rgba(37,99,235,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .eeat-item h4 { color:var(--white); margin-bottom:5px; } .eeat-item p { color:rgba(255,255,255,.5); font-size:14px; line-height:1.65; } .process-card { background:var(--navy-soft); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); padding:clamp(20px,3vw,34px); } .process-kicker{ font-family:var(--font-body); font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:24px; font-weight:600; } .process-step { display:flex; gap:16px; align-items:flex-start; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.06); } .process-step:last-child { border-bottom:none; padding-bottom:0; } .step-num { width:30px; height:30px; border-radius:7px; background:rgba(37,99,235,.22); border:1px solid rgba(37,99,235,.38); display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--blue-bright); flex-shrink:0; margin-top:2px; } .process-step h5 { color:var(--white); font-size:clamp(14px,1.5vw,16px); } .process-step p { color:rgba(255,255,255,.4); font-size:12.5px; margin-top:3px; } /* ───────────────────────────────────────────────────────────────────────────── 17. CASE STUDIES ───────────────────────────────────────────────────────────────────────────── */ .casestudies-section { background:var(--navy-mid); } .casestudies-archive { background:var(--white); } .cs-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; } .cs-header h2 { color:var(--white); } .cs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .cs-card { background:var(--navy); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:all var(--transition); display:flex; flex-direction:column; } .cs-card:hover{ transform:translateY(-4px); border-color:rgba(37,99,235,.4); } .cs-hidden { display:none !important; } .cs-img-block { height:180px; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden; } .ci-hotel { background:linear-gradient(135deg,#0F2240,#1a3a6e); } .ci-ecom { background:linear-gradient(135deg,#0F2240,#1e3a5f); } .ci-saas { background:linear-gradient(135deg,#0F2240,#162f52); } .ci-rest { background:linear-gradient(135deg,#1a1a0a,#2d2a10); } .ci-real { background:linear-gradient(135deg,#0a1f0a,#1a3a1a); } .ci-health { background:linear-gradient(135deg,#0a1829,#0d2240); } .cs-img-inner { text-align:center; width:100%; } .cs-letter { font-family:var(--font-head); font-size:48px; font-weight:700; color:rgba(255,255,255,.1); line-height:1; margin-bottom:10px; } .cs-img-badge { display:inline-flex; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:20px; padding:5px 14px; } .cs-img-badge span { font-family:var(--font-body); font-size:11.5px; color:rgba(255,255,255,.7); font-weight:500; } .cs-body { padding:clamp(16px,2.5vw,22px) clamp(16px,2.5vw,24px); flex:1; display:flex; flex-direction:column; } .cs-cat { font-family:var(--font-body); font-size:10.5px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; color:var(--blue-bright); margin-bottom:8px; } .cs-card h3 { color:var(--white); font-size:clamp(16px,2vw,18px); margin-bottom:8px; } .cs-body p { font-size:13.5px; color:rgba(255,255,255,.5); margin-bottom:16px; flex:1; } .cs-metrics { display:flex; border-top:1px solid rgba(255,255,255,.07); padding-top:14px; } .cs-metric { flex:1; text-align:center; padding:0 8px; border-right:1px solid rgba(255,255,255,.07); } .cs-metric:last-child { border-right:none; } .cs-metric-num { font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--white); line-height:1; } .cs-metric-label{ font-family:var(--font-body); font-size:10.5px; color:rgba(255,255,255,.35); margin-top:3px; } .cs-foot { display:flex; align-items:center; justify-content:space-between; padding:12px clamp(16px,2.5vw,24px); border-top:1px solid rgba(255,255,255,.07); } .cs-techs { display:flex; gap:5px; flex-wrap:wrap; } .cs-tech-tag { background:rgba(37,99,235,.15); border:1px solid rgba(37,99,235,.25); border-radius:4px; padding:3px 9px; font-family:var(--font-body); font-size:11px; color:var(--blue-bright); font-weight:500; } .cs-link { font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,.35); font-weight:500; transition:color var(--transition); } .cs-card:hover .cs-link { color:var(--blue-bright); } /* Single case study */ .cs-hero { background:var(--navy); padding:clamp(48px,7vw,80px) 0; } .cs-hero__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .cs-hero__content h1 { color:var(--white); margin:10px 0 20px; } .cs-hero__meta { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px; } .cs-hero__meta-item dt { font-family:var(--font-body); font-size:11px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-bottom:4px; } .cs-hero__meta-item dd { font-family:var(--font-body); font-size:15px; color:var(--white); font-weight:500; } .cs-hero__platforms { display:flex; gap:8px; flex-wrap:wrap; } .cs-hero__img { width:100%; border-radius:var(--r-lg); } .cs-hero__metrics { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .cs-hero__metric { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:24px; text-align:center; } .cs-hero__metric-num { font-family:var(--font-head); font-size:clamp(28px,4vw,42px); font-weight:700; color:var(--white); line-height:1; margin-bottom:6px; } .cs-hero__metric-label{ font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.5); } .cs-metrics-bar { background:var(--navy-mid); padding:36px 0; border-top:1px solid rgba(255,255,255,.07); } .cs-metrics-bar__list { display:flex; justify-content:center; gap:0; flex-wrap:wrap; } .cs-metrics-bar__item { flex:1; min-width:160px; text-align:center; padding:20px; border-right:1px solid rgba(255,255,255,.07); } .cs-metrics-bar__item:last-child { border-right:none; } .cs-metrics-bar__num { font-family:var(--font-head); font-size:clamp(32px,4vw,48px); font-weight:700; color:var(--white); line-height:1; margin-bottom:6px; } .cs-metrics-bar__label{ font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,.5); } .cs-section { background:var(--white); } .cs-section--challenge { background:var(--off); } .cs-section__grid { display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:start; } .cs-section__label h2 { margin-top:12px; } .cs-results { background:var(--navy); } .cs-results h2 { color:var(--white); margin-bottom:44px; } .cs-results__metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:44px; } .cs-results__metric { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:32px; text-align:center; } .cs-results__metric-num { font-family:var(--font-head); font-size:clamp(36px,5vw,56px); font-weight:700; color:var(--white); line-height:1; margin-bottom:8px; } .cs-results__metric-label{ font-family:var(--font-body); font-size:15px; color:rgba(255,255,255,.5); } .cs-testimonial { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:clamp(24px,4vw,40px); margin:0 0 36px; } .cs-testimonial__quote { font-family:var(--font-body); font-size:clamp(16px,2vw,20px); color:var(--white); line-height:1.75; font-style:italic; margin-bottom:16px; } .cs-testimonial__author { font-family:var(--font-body); font-size:14px; color:rgba(255,255,255,.5); } .cs-results__tech { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .cs-results__tech-label { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.4); white-space:nowrap; } /* ───────────────────────────────────────────────────────────────────────────── 18. FIVERR ───────────────────────────────────────────────────────────────────────────── */ .fiverr-section { background:var(--navy); } .fiverr-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; } .fiverr-section h2{ color:var(--white); margin-bottom:14px; } .fiverr-lead { color:rgba(255,255,255,.55); font-size:clamp(14px,1.5vw,16px); margin-bottom:28px; line-height:1.75; } .gig-list { display:flex; flex-direction:column; gap:10px; } .gig-item { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:10px; transition:background var(--transition); } .gig-item:hover { background:rgba(255,255,255,.09); } .gig-link { display:flex; align-items:center; gap:12px; padding:clamp(12px,2vw,15px) clamp(14px,2vw,18px); text-decoration:none; } .gig-icon { width:34px; height:34px; border-radius:7px; background:rgba(37,99,235,.22); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .gig-meta { flex:1; } .gig-name { font-family:var(--font-body); font-size:14px; color:var(--white); font-weight:500; } .gig-price { font-family:var(--font-body); font-size:12px; color:rgba(255,255,255,.4); margin-top:2px; } .gig-arrow { color:rgba(255,255,255,.25); font-size:14px; } /* ───────────────────────────────────────────────────────────────────────────── 19. PACKAGES ───────────────────────────────────────────────────────────────────────────── */ .packages-section { background:var(--white); } .pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; } .pkg { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(20px,3vw,34px); position:relative; } .pkg.featured { border:2px solid var(--blue); } .pkg-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--blue); color:var(--white); font-family:var(--font-body); font-size:11px; font-weight:500; padding:4px 16px; border-radius:20px; white-space:nowrap; } .pkg-tier { font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .pkg-price { font-family:var(--font-head); font-size:clamp(34px,4vw,42px); font-weight:700; color:var(--navy); letter-spacing:-.5px; } .pkg-price sub { font-family:var(--font-body); font-size:13px; color:var(--muted); font-weight:400; } .pkg-desc { font-family:var(--font-body); font-size:14.5px; color:var(--muted); margin:10px 0 18px; line-height:1.65; } .pkg-divider { border:none; border-top:1px solid var(--border); margin:0 0 18px; } .pkg-features { display:flex; flex-direction:column; gap:10px; margin-bottom:26px; } .pkg-feature { display:flex; gap:9px; align-items:flex-start; font-family:var(--font-body); font-size:14px; color:var(--navy); } .check-icon { width:18px; height:18px; border-radius:50%; background:#EFF6FF; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; } /* ───────────────────────────────────────────────────────────────────────────── 20. FAQ ───────────────────────────────────────────────────────────────────────────── */ .faq-section { background:var(--off); } .faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,56px); align-items:start; } .faq-intro p { font-size:clamp(14px,1.5vw,16px); margin-top:12px; } .faq-list { display:flex; flex-direction:column; gap:14px; } .faq-item { background:var(--white); border:1px solid var(--border); border-radius:10px; padding:clamp(16px,2.5vw,22px) clamp(16px,2.5vw,24px); } .faq-item__q { font-family:var(--font-head); font-size:clamp(15px,1.8vw,18px); color:var(--navy); margin-bottom:10px; font-weight:600; } .faq-item__a { font-family:var(--font-body); font-size:14.5px; color:var(--muted); line-height:1.75; } /* ───────────────────────────────────────────────────────────────────────────── 21. TESTIMONIALS ───────────────────────────────────────────────────────────────────────────── */ .testimonials-section { background:var(--white); } .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; } .testimonial-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:clamp(18px,3vw,28px); } .stars { display:flex; gap:3px; margin-bottom:12px; } .star { width:14px; height:14px; background:var(--gold); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); } .testimonial-card blockquote { font-family:var(--font-body); font-size:clamp(13.5px,1.5vw,15.5px); color:#2D3748; line-height:1.7; margin-bottom:16px; font-style:italic; } .testimonial-author { display:flex; align-items:center; gap:10px; } .author-avatar { width:36px; height:36px; border-radius:50%; background:#EFF6FF; display:flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--blue); flex-shrink:0; } .author-name { font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--navy); } .author-role { font-family:var(--font-body); font-size:12px; color:var(--muted); margin-top:1px; } /* ───────────────────────────────────────────────────────────────────────────── 22. BLOG ───────────────────────────────────────────────────────────────────────────── */ .blog-section { background:var(--off); } .blog-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:44px; flex-wrap:wrap; gap:20px; } .blog-header h2 { margin-bottom:8px; } .blog-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:22px; align-items:start; } .blog-secondary { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .blog-featured { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:all var(--transition); } .blog-featured:hover { transform:translateY(-3px); border-color:#BFDBFE; } .blog-feat-img-wrap { display:block; } .blog-feat-img { height:clamp(180px,20vw,250px); display:flex; align-items:flex-end; background:linear-gradient(135deg,var(--navy),var(--navy-mid)); position:relative; overflow:hidden; padding:clamp(20px,3vw,30px); } .blog-feat-deco { font-family:var(--font-head); font-size:clamp(60px,10vw,100px); font-weight:700; color:rgba(255,255,255,.05); position:absolute; bottom:-15px; right:10px; line-height:1; pointer-events:none; } .blog-feat-badge { display:inline-flex; background:rgba(37,99,235,.25); border:1px solid rgba(37,99,235,.4); border-radius:20px; padding:4px 13px; margin-bottom:10px; } .blog-feat-badge span { font-family:var(--font-body); font-size:11.5px; color:var(--blue-bright); font-weight:500; } .blog-feat-title { font-family:var(--font-head); font-size:clamp(16px,2vw,22px); font-weight:600; color:var(--white); line-height:1.35; position:relative; z-index:1; } .blog-feat-body { padding:clamp(18px,3vw,26px); } .blog-cat { font-family:var(--font-body); font-size:10.5px; font-weight:600; letter-spacing:1.8px; text-transform:uppercase; color:var(--blue); margin-bottom:7px; } .blog-feat-body h2 { font-size:clamp(16px,2vw,20px); color:var(--navy); margin-bottom:8px; } .blog-feat-body p { font-size:14px; margin-bottom:16px; } .blog-feat-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; } .blog-meta { display:flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:12px; color:var(--muted); flex-wrap:wrap; } .blog-meta-sep { width:3px; height:3px; border-radius:50%; background:var(--border); flex-shrink:0; } .blog-col { display:flex; flex-direction:column; gap:16px; } .blog-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:all var(--transition); display:flex; flex-direction:column; } .blog-card:hover{ transform:translateY(-3px); border-color:#BFDBFE; } .blog-card-img { height:clamp(100px,15vw,125px); display:flex; align-items:center; justify-content:center; padding:16px; } .bc-seo { background:linear-gradient(135deg,#0a1829,#162f52); } .bc-wp { background:linear-gradient(135deg,#1a0a2e,#2d1a50); } .bc-ecom { background:linear-gradient(135deg,#0a1f0a,#1a3a1a); } .bc-sh { background:linear-gradient(135deg,#1a0a0a,#3a1a1a); } .blog-card-img-txt { font-family:var(--font-head); font-size:34px; font-weight:700; color:rgba(255,255,255,.1); line-height:1; } .blog-card-body { padding:clamp(14px,2vw,18px) clamp(14px,2vw,20px); flex:1; display:flex; flex-direction:column; } .blog-card-body h3 { font-size:clamp(14px,1.8vw,16px); color:var(--navy); margin-bottom:6px; line-height:1.4; } .blog-card-body p { font-size:13px; margin-bottom:10px; flex:1; } .blog-card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid var(--border); margin-top:auto; } .blog-card-meta { font-family:var(--font-body); font-size:11.5px; color:var(--muted); } .blog-card-read { font-family:var(--font-body); font-size:12px; font-weight:500; color:var(--blue); } /* Single post */ .post-hero { background:var(--navy); padding:clamp(40px,6vw,72px) 0 0; } .post-hero__inner { padding-bottom:40px; } .post-hero h1 { color:var(--white); margin:12px 0 20px; } .post-hero__meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .post-hero__meta-item { display:flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.55); } .post-hero__meta-sep { color:rgba(255,255,255,.25); } .post-hero__meta time { color:rgba(255,255,255,.55); } .post-hero__img-wrap { border-top:1px solid rgba(255,255,255,.08); padding-top:0; } .post-hero__img { width:100%; max-height:500px; object-fit:cover; } .post-article { background:var(--white); } .post-article__layout { max-width:760px; margin:0 auto; } .post-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:36px; } .post-tag { background:#EFF6FF; border:1px solid #BFDBFE; border-radius:6px; padding:5px 14px; font-family:var(--font-body); font-size:13px; color:var(--blue); font-weight:500; transition:all var(--transition); } .post-tag:hover { background:var(--blue); color:var(--white); border-color:var(--blue); } .author-bio { background:var(--off); padding:clamp(32px,5vw,56px) 0; } .author-bio__card { display:flex; gap:28px; align-items:flex-start; background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(24px,3vw,36px); } .author-bio__img { width:80px; height:80px; border-radius:50%; flex-shrink:0; } .author-bio__label{ font-family:var(--font-body); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:4px; } .author-bio__name { font-family:var(--font-head); font-size:22px; color:var(--navy); margin-bottom:8px; } .author-bio__desc { font-size:15px; margin-bottom:16px; } .related-posts { background:var(--white); } .posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; } .posts-grid--3 { grid-template-columns:repeat(3,1fr); } /* ───────────────────────────────────────────────────────────────────────────── 23. FINAL CTA ───────────────────────────────────────────────────────────────────────────── */ .final-cta-section { background:var(--navy); padding:clamp(64px,8vw,104px) 0; text-align:center; } .final-cta-section h2 { color:var(--white); margin-bottom:16px; } .final-cta-section h2 em { color:var(--blue-bright); font-style:normal; } .final-cta-section > .container > p { color:rgba(255,255,255,.55); font-size:clamp(14px,1.6vw,17px); max-width:460px; margin:0 auto 32px; line-height:1.78; } .final-cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } /* ───────────────────────────────────────────────────────────────────────────── 24. FOOTER ───────────────────────────────────────────────────────────────────────────── */ .site-footer { background:#04101F; padding:clamp(40px,6vw,64px) 0 28px; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:clamp(24px,4vw,48px); margin-bottom:44px; } .footer-logo { display:flex; align-items:baseline; gap:0; margin-bottom:12px; } .footer-bio { font-family:var(--font-body); font-size:13.5px; color:rgba(255,255,255,.32); line-height:1.78; max-width:240px; } .footer-social { display:flex; gap:12px; margin-top:20px; } .footer-social a { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.5); transition:all var(--transition); } .footer-social a:hover { background:var(--blue); color:var(--white); } .footer-social__icon { width:18px; height:18px; } .footer-col h5 { font-family:var(--font-body); font-size:10.5px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:16px; } .footer-col__heading { font-family:var(--font-head); font-size:14px; font-weight:600; color:rgba(255,255,255,.5); margin-bottom:16px; letter-spacing:.5px; } .footer-col__list { display:flex; flex-direction:column; gap:9px; } .footer-col__list .nav__link, .footer-col a { font-family:var(--font-body); font-size:13.5px; color:rgba(255,255,255,.38); transition:color var(--transition); display:block; } .footer-col__list .nav__link:hover, .footer-col a:hover { color:rgba(255,255,255,.78); } .footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; } .footer-bottom p { font-family:var(--font-body); font-size:12.5px; color:rgba(255,255,255,.22); } /* ───────────────────────────────────────────────────────────────────────────── 25. BREADCRUMBS ───────────────────────────────────────────────────────────────────────────── */ .breadcrumb-wrap { background:var(--navy); padding-top:20px; } .breadcrumb { margin-bottom:8px; } .breadcrumb__list { display:flex; align-items:center; gap:8px; flex-wrap:wrap; list-style:none; } .breadcrumb__item { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.4); } .breadcrumb__item + .breadcrumb__item::before { content:'›'; margin-right:8px; color:rgba(255,255,255,.25); } .breadcrumb__item a { color:rgba(255,255,255,.55); transition:color var(--transition); } .breadcrumb__item a:hover { color:var(--blue-bright); } .breadcrumb__item--active { color:rgba(255,255,255,.7); } /* ───────────────────────────────────────────────────────────────────────────── 26. PAGINATION ───────────────────────────────────────────────────────────────────────────── */ .pagination, .nav-links { margin-top:52px; } .pagination .nav-links { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; } .pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--navy); border:1px solid var(--border); background:var(--white); transition:all var(--transition); text-decoration:none; } .pagination .page-numbers.current { background:var(--blue); color:var(--white); border-color:var(--blue); } .pagination .page-numbers:hover { border-color:var(--blue); color:var(--blue); } .pagination .page-numbers.dots { border:none; background:none; } .pagination .prev.page-numbers, .pagination .next.page-numbers { width:auto; padding:0 16px; } /* ───────────────────────────────────────────────────────────────────────────── 27. PROSE (rich text content from the_content()) ───────────────────────────────────────────────────────────────────────────── */ .prose h1,.prose h2,.prose h3,.prose h4,.prose h5 { color:var(--navy); margin:1.75em 0 .75em; } .prose h2 { font-size:clamp(22px,3vw,28px); } .prose h3 { font-size:clamp(18px,2.5vw,22px); } .prose p { color:var(--muted); margin-bottom:1.25em; font-size:clamp(15px,1.6vw,17px); line-height:1.8; } .prose a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; } .prose a:hover { color:var(--blue-lt); } .prose ul, .prose ol { margin:1em 0 1.5em 1.5em; display:flex; flex-direction:column; gap:8px; } .prose ul { list-style:disc; } .prose ol { list-style:decimal; } .prose li { font-family:var(--font-body); font-size:clamp(15px,1.6vw,16px); color:var(--muted); line-height:1.7; } .prose blockquote { border-left:4px solid var(--blue); padding:16px 24px; background:#EFF6FF; border-radius:0 8px 8px 0; margin:1.5em 0; } .prose blockquote p { color:var(--navy); font-style:italic; margin:0; } .prose img { border-radius:var(--r); margin:1.5em 0; } .prose code { background:#EFF6FF; color:var(--blue); padding:2px 6px; border-radius:4px; font-size:.9em; } .prose pre { background:var(--navy); color:rgba(255,255,255,.85); padding:24px; border-radius:var(--r); overflow-x:auto; margin:1.5em 0; } .prose pre code { background:none; color:inherit; padding:0; } .prose table { width:100%; border-collapse:collapse; margin:1.5em 0; } .prose th, .prose td { padding:10px 14px; text-align:left; border:1px solid var(--border); font-family:var(--font-body); font-size:14px; } .prose th { background:var(--off); font-weight:600; color:var(--navy); } .prose hr { border:none; border-top:1px solid var(--border); margin:2em 0; } /* ───────────────────────────────────────────────────────────────────────────── 28. 404 PAGE ───────────────────────────────────────────────────────────────────────────── */ .error-404 { background:var(--off); } .error-404__inner { display:grid; grid-template-columns:auto 1fr; gap:64px; align-items:center; max-width:880px; } .error-404__code { font-family:var(--font-head); font-size:clamp(80px,15vw,160px); font-weight:700; color:rgba(6,20,43,.07); line-height:1; flex-shrink:0; } .error-404__title { font-size:clamp(24px,4vw,36px); margin-bottom:14px; } .error-404__desc { font-size:clamp(15px,1.8vw,17px); margin-bottom:28px; } .error-404__links ul { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; list-style:none; } .error-404__search { margin-top:12px; } .error-404__search p { font-size:14px; margin-bottom:10px; } /* WordPress search form */ .search-form { display:flex; gap:8px; } .search-form .search-field{ flex:1; padding:10px 16px; border:1.5px solid var(--border); border-radius:8px; font-family:var(--font-body); font-size:14px; color:var(--navy); outline:none; } .search-form .search-field:focus { border-color:var(--blue); } .search-form .search-submit { background:var(--blue); color:var(--white); border:none; padding:10px 20px; border-radius:8px; font-family:var(--font-body); font-size:14px; font-weight:500; cursor:pointer; transition:background var(--transition); } .search-form .search-submit:hover { background:var(--blue-lt); } /* WordPress default alignment */ .aligncenter { display:block; margin:0 auto; } .alignright { float:right; margin-left:1.5em; } .alignleft { float:left; margin-right:1.5em; } /* ───────────────────────────────────────────────────────────────────────────── 29. ACCESSIBILITY ───────────────────────────────────────────────────────────────────────────── */ .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background: var(--blue); clip: auto !important; clip-path: none; color: var(--white); display: block; font-size: 14px; font-weight: 500; height: auto; left: 5px; line-height: normal; padding: 10px 16px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Focus styles — keyboard navigation */ :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; } /* No focus ring on mouse click */ :focus:not(:focus-visible) { outline: none; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* No posts empty state */ .no-posts { text-align:center; padding:60px 0; } .no-posts p { font-size:17px; margin-bottom:24px; } /* Page hero (page.php) */ .page-hero { background:var(--navy); padding:clamp(48px,7vw,80px) 0; } .page-hero__title { color:var(--white); margin-top:12px; } .page-hero__lead { color:rgba(255,255,255,.6); font-size:17px; margin-top:14px; max-width:560px; line-height:1.75; } .page-content { background:var(--white); } /* ───────────────────────────────────────────────────────────────────────────── CONTACT PAGE ───────────────────────────────────────────────────────────────────────────── */ .contact-hero { background:var(--navy); padding:clamp(48px,7vw,80px) 0 clamp(32px,5vw,56px); } .contact-hero__top { text-align:center; margin-bottom:56px; } .contact-hero h1 { color:var(--white); margin:12px 0 16px; } .contact-hero h1 em { color:var(--blue-bright); font-style:normal; } .contact-hero__lead { color:rgba(255,255,255,.6); font-size:clamp(15px,1.8vw,17px); max-width:520px; margin:0 auto; line-height:1.78; } .contact-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .contact-method { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; } .contact-method--wa { background:rgba(37,211,102,.08); border-color:rgba(37,211,102,.2); } .contact-method__icon { width:48px; height:48px; border-radius:11px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .contact-method--wa .contact-method__icon { background:rgba(37,211,102,.15); color:var(--wa); } .contact-method__icon svg{ width:22px; height:22px; color:var(--blue-bright); } .contact-method h3 { font-family:var(--font-head); font-size:18px; color:var(--white); margin-bottom:8px; } .contact-method p { font-size:14px; color:rgba(255,255,255,.5); line-height:1.65; margin-bottom:20px; flex:1; } .contact-method .btn { margin-top:auto; } .contact-form-section { background:var(--off); } .contact-grid { display:grid; grid-template-columns:1fr 360px; gap:clamp(40px,5vw,72px); align-items:start; } .contact-form-wrap h2 { margin-bottom:10px; } .contact-form-wrap__lead { font-size:16px; color:var(--muted); margin-bottom:32px; line-height:1.75; } .contact-form-wrap__form { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(24px,4vw,44px); } /* CF7 form overrides */ .contact-form-wrap__form .wpcf7-form { display:flex; flex-direction:column; gap:20px; } .contact-form-wrap__form p { margin:0 !important; color:var(--navy) !important; font-size:14px !important; } .contact-form-wrap__form label { font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--navy); display:block; margin-bottom:6px; } .contact-form-wrap__form input[type="text"], .contact-form-wrap__form input[type="email"], .contact-form-wrap__form input[type="tel"], .contact-form-wrap__form select, .contact-form-wrap__form textarea { width:100%; padding:12px 16px; border:1.5px solid var(--border); border-radius:8px; font-family:var(--font-body); font-size:15px; color:var(--navy); background:var(--white); transition:border-color .2s; outline:none; } .contact-form-wrap__form input:focus, .contact-form-wrap__form select:focus, .contact-form-wrap__form textarea:focus { border-color:var(--blue); } .contact-form-wrap__form textarea { min-height:140px; resize:vertical; } .contact-form-wrap__form input[type="submit"] { background:var(--blue); color:var(--white); border:none; border-radius:8px; padding:13px 32px; font-family:var(--font-body); font-size:15px; font-weight:500; cursor:pointer; transition:background .2s; width:100%; } .contact-form-wrap__form input[type="submit"]:hover { background:var(--blue-lt); } .contact-form-wrap__form .wpcf7-not-valid-tip { font-family:var(--font-body); font-size:12.5px; color:#DC2626; margin-top:4px; } .contact-form-wrap__form .wpcf7-response-output { border-radius:8px; padding:12px 16px; font-family:var(--font-body); font-size:14px; margin:0 !important; } .contact-form-wrap__form .wpcf7-mail-sent-ok { background:#ECFDF5; border-color:#6EE7B7 !important; color:#065F46; } .contact-form-wrap__form .wpcf7-validation-errors { background:#FEF2F2; border-color:#FECACA !important; color:#991B1B; } .contact-form-notice, .contact-form-fallback { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; } .contact-form-notice p, .contact-form-fallback p { font-size:15px; margin-bottom:12px; } .contact-form-fallback__btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; } .contact-sidebar { display:flex; flex-direction:column; gap:16px; } .contact-sidebar__card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(20px,3vw,28px); } .contact-sidebar__card--availability { background:var(--navy); border-color:rgba(255,255,255,.1); } .contact-availability { display:flex; flex-direction:column; gap:10px; } .contact-availability__time { display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:15px; color:rgba(255,255,255,.75); margin:0; } .contact-availability__time svg { color:var(--blue-bright); flex-shrink:0; } .contact-availability__note { font-family:var(--font-body); font-size:13px; color:rgba(255,255,255,.4); margin:0; } .contact-steps { display:flex; flex-direction:column; gap:0; margin-top:20px; } .contact-steps__item { display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--border); } .contact-steps__item:last-child { border-bottom:none; padding-bottom:0; } .contact-steps__item h4 { font-size:15px; color:var(--navy); margin-bottom:4px; } .contact-steps__item p { font-size:13px; color:var(--muted); line-height:1.65; margin:0; } .contact-sidebar__stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .contact-sidebar__stat { text-align:center; padding:12px; background:var(--off); border-radius:8px; } .contact-faq { background:var(--white); } .contact-faq h2 { margin-bottom:36px; } .contact-faq__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } /* Responsive — contact */ @media(max-width:1024px){ .contact-methods { grid-template-columns:1fr; } .contact-grid { grid-template-columns:1fr; gap:36px; } .contact-faq__grid{ grid-template-columns:1fr; } } @media(max-width:640px){ .contact-hero__top { margin-bottom:36px; } .contact-methods { gap:14px; } } /* ───────────────────────────────────────────────────────────────────────────── INDUSTRY TAXONOMY PAGES ───────────────────────────────────────────────────────────────────────────── */ .industry-hero { background:var(--navy); padding:clamp(48px,7vw,80px) 0; } .industry-hero__grid { display:grid; grid-template-columns:1fr 380px; gap:clamp(40px,5vw,72px); align-items:center; } .industry-hero__content h1{ color:var(--white); margin:10px 0 18px; } .industry-hero__content h1 em { color:var(--blue-bright); font-style:normal; } .industry-hero__tagline { color:rgba(255,255,255,.65); font-size:clamp(15px,1.8vw,17px); line-height:1.78; margin-bottom:28px; max-width:520px; } .industry-hero__points { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; } .industry-hero__point { display:flex; align-items:flex-start; gap:10px; font-family:var(--font-body); font-size:15px; color:rgba(255,255,255,.75); } .industry-hero__check { width:20px; height:20px; border-radius:50%; background:rgba(37,99,235,.25); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; } .industry-hero__ctas { display:flex; gap:12px; flex-wrap:wrap; } .industry-hero__card { background:var(--navy-soft); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-xl); padding:clamp(24px,3vw,36px); } .industry-hero__icon { width:72px; height:72px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--accent,var(--blue-bright)); } .industry-hero__icon svg { width:28px; height:28px; } .industry-hero__card-title{ font-family:var(--font-head); font-size:18px; color:var(--white); margin-bottom:20px; } .industry-hero__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; } .industry-hero__stat { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:16px 10px; text-align:center; } .industry-hero__stat-num { font-family:var(--font-head); font-size:clamp(20px,2.5vw,26px); font-weight:700; line-height:1; margin-bottom:6px; } .industry-hero__stat-label{ font-family:var(--font-body); font-size:11px; color:rgba(255,255,255,.4); line-height:1.4; } .industry-hero__card-note { font-family:var(--font-body); font-size:11.5px; color:rgba(255,255,255,.25); } .industry-services { background:var(--white); } .industry-casestudies { background:var(--navy-mid); } .industry-why { background:var(--off); } .industry-why__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; } .industry-why__intro h2 { margin-bottom:14px; } .industry-why__intro p { font-size:clamp(14px,1.5vw,16px); } .industry-blog { background:var(--white); } /* Responsive — industry */ @media(max-width:1024px){ .industry-hero__grid { grid-template-columns:1fr; gap:40px; } .industry-hero__card { max-width:480px; } .industry-why__grid { grid-template-columns:1fr; gap:36px; } } @media(max-width:640px){ .industry-hero__ctas { flex-direction:column; } .industry-hero__ctas .btn { width:100%; justify-content:center; } .industry-hero__stats { grid-template-columns:repeat(3,1fr); gap:8px; } .industry-hero__stat-num { font-size:18px; } } /* ───────────────────────────────────────────────────────────────────────────── COMMENTS ───────────────────────────────────────────────────────────────────────────── */ .comments-section { background:var(--off); } .comments-wrap { max-width:760px; margin:0 auto; } .comments-title { font-size:clamp(22px,3vw,28px); margin-bottom:36px; } .comments-list { display:flex; flex-direction:column; gap:24px; margin-bottom:52px; list-style:none; } .comment-item { background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:clamp(18px,3vw,28px); } .comment-body { display:flex; flex-direction:column; gap:14px; } .comment-meta { display:flex; align-items:center; gap:12px; } .comment-avatar { width:48px; height:48px; border-radius:50%; flex-shrink:0; } .comment-author-name{ font-family:var(--font-head); font-size:15px; font-weight:600; color:var(--navy); display:block; } .comment-author-name a { color:var(--navy); } .comment-date { font-family:var(--font-body); font-size:12px; color:var(--muted); display:block; margin-top:3px; } .comment-awaiting { background:#FEF3C7; border:1px solid #FDE68A; border-radius:6px; padding:8px 14px; font-family:var(--font-body); font-size:13px; color:#92400E; } .comment-reply { margin-top:8px; } .comment-reply a { font-family:var(--font-body); font-size:13px; color:var(--blue); font-weight:500; } .comment-reply-title{ font-size:clamp(20px,2.5vw,26px); margin-bottom:28px; } .comment-form { display:flex; flex-direction:column; gap:18px; } .comment-form-field { display:flex; flex-direction:column; gap:6px; } .comment-form-field label { font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--navy); } .comment-form-field .required { color:#DC2626; margin-left:3px; } .comment-form-field input, .comment-form-field textarea { padding:12px 16px; border:1.5px solid var(--border); border-radius:8px; font-family:var(--font-body); font-size:15px; color:var(--navy); transition:border-color .2s; outline:none; } .comment-form-field input:focus, .comment-form-field textarea:focus { border-color:var(--blue); } .comment-form-field textarea { min-height:130px; resize:vertical; } .form-submit { margin-top:8px; } .no-comments { font-family:var(--font-body); font-size:15px; color:var(--muted); padding:20px 0; } /* Single generic (single.php) */ .single-content { background:var(--white); } .single-content__img{ margin-bottom:40px; border-radius:var(--r-lg); overflow:hidden; } .single-content__thumb { width:100%; max-height:480px; object-fit:cover; } /* ───────────────────────────────────────────────────────────────────────────── SEARCH PAGE (moved from inline