/* Theme Name: AlRefada Aluminum Theme URI: http://localhost/alrefadaaluminum Author: AlRefada Aluminum Description: Custom WordPress theme for AlRefada Aluminum. Version: 1.0.0 Text Domain: alrefadaaluminum */ /* ─── Force LTR — WordPress admin in Arabic sets dir="rtl" on ──── */ html { direction: ltr !important; } body { direction: ltr !important; text-align: left !important; } /* ─── Override webflow.css global h1/h3 { text-align: center } ────────── Targets every custom template hero and card — never the homepage Webflow sections */ .svc-sp-hero__title, .ref-sp-hero__title, .abt-hero__title, .arc-hero__title, .svc-sp-hero__excerpt, .ref-sp-hero__title, .abt-hero__sub, .arc-hero__sub, .abt-story__heading, .abt-val-card__title, .abt-why-item__text h3, .arc-svc-card__title, .arc-ref-card__title, .svc-sp-card__title, .ref-sp-proj-card__body h3 { text-align: left !important; } /* ─── Values cards — icon left-top, text left-aligned beneath ─────────── */ .abt-val-card { text-align: left !important; } .abt-val-card__icon { margin-left: 0 !important; margin-right: auto !important; } /* ─── Hide all legacy Webflow nav elements ────────────────── */ .brand-menu2, .navbartop, .mobile-nav, .w-nav-overlay, .nav-trigger, .nav-menu, .navbar-container { display: none !important; } /* ════════════════════════════════════════════════════════════ ALREFADA HEADER No fixed heights here — logo size + padding drives everything. Dynamic values (logo height, body offset) come from alrefada_dynamic_styles() in theme-setup.php. ════════════════════════════════════════════════════════════ */ .alrefada-header { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 999999 !important; border-bottom: 1px solid #e8eef8; transition: box-shadow 0.3s ease; } /* ── Inner container ──────────────────────────────────────── */ .alrefada-header__inner { display: flex !important; align-items: center !important; justify-content: space-between !important; max-width: 1400px; margin: 0 auto; padding: 12px 48px; gap: 0; } /* ── Logo ─────────────────────────────────────────────────── */ .alrefada-header__logo { display: flex !important; align-items: center; flex-shrink: 0; text-decoration: none !important; line-height: 1; } .alrefada-header__logo img { display: block !important; height: 46px; /* default — overridden by dynamic CSS */ width: auto; max-width: 280px; object-fit: contain; } /* ── Desktop nav ──────────────────────────────────────────── */ .alrefada-header__nav { display: flex !important; align-items: center !important; gap: 2px; margin-left: auto; padding-left: 32px; } .alrefada-nav__link { display: inline-block !important; font-family: 'Montserrat', sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; text-decoration: none !important; padding: 6px 16px !important; border-radius: 3px; position: relative; transition: color 0.2s ease, background-color 0.2s ease !important; white-space: nowrap; } /* Animated underline on hover / active */ .alrefada-nav__link::after { content: ''; position: absolute; bottom: -1px; left: 16px; right: 16px; height: 2px; background-color: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; border-radius: 2px; } .alrefada-nav__link:hover::after, .alrefada-nav__link--active::after { transform: scaleX(1) !important; } .alrefada-nav__link:hover { background-color: rgba(12, 43, 98, 0.06) !important; } .alrefada-nav__link--active { font-weight: 700 !important; } /* ── Hamburger button — hidden on desktop ─────────────────── */ .alrefada-header__toggle { display: none !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: transparent; border: none; border-radius: 4px; cursor: pointer; padding: 8px; width: 44px; height: 44px; flex-shrink: 0; transition: background-color 0.2s; } .alrefada-header__toggle:hover { background-color: rgba(12, 43, 98, 0.06); } .alrefada-header__toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; transition: transform 0.3s ease, opacity 0.25s ease; transform-origin: center; } /* Hamburger → X */ .alrefada-header__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .alrefada-header__toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .alrefada-header__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 991px) { .alrefada-header__inner { padding: 10px 24px; } /* Show hamburger */ .alrefada-header__toggle { display: flex !important; } /* Mobile nav dropdown — top is set dynamically */ .alrefada-header__nav { display: none !important; position: absolute !important; top: 56px; /* default — overridden by dynamic CSS */ left: 0; right: 0; flex-direction: column !important; align-items: stretch !important; padding: 8px 0 16px !important; gap: 0 !important; border-top: 2px solid #e8eef8; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; margin-left: 0 !important; padding-left: 0 !important; } .alrefada-header__nav.is-open { display: flex !important; } .alrefada-nav__link { font-size: 13px !important; padding: 13px 28px !important; border-radius: 0 !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; letter-spacing: 0.5px !important; } .alrefada-nav__link::after { display: none !important; } .alrefada-nav__link:hover { background-color: rgba(12, 43, 98, 0.05) !important; padding-left: 36px !important; } .alrefada-nav__link--active { border-left: 3px solid currentColor !important; padding-left: 25px !important; } } @media (max-width: 479px) { .alrefada-header__inner { padding: 10px 16px; } } /* ════════════════════════════════════════════════════════════ HOMEPAGE SECTIONS ════════════════════════════════════════════════════════════ */ /* ── Scroll-reveal utility ───────────────────────────────── */ .hp-section { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .hp-section.is-visible { opacity: 1; transform: translateY(0); } /* Hero never fades in — show immediately */ .herosection.hp-section { opacity: 1 !important; transform: none !important; } /* ── HERO ────────────────────────────────────────────────── */ .herosection { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: row !important; align-items: flex-end; justify-content: center !important; direction: ltr !important; } .herosection .imageholder { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 0; } .herosection .div-block-7 { width: 100%; height: 100%; } .herosection .image-4 { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: none; } .herosection .herotitles { position: relative; z-index: 2; padding: 36px 52px 40px; width: auto !important; max-width: 865px !important; text-align: center !important; align-items: center !important; direction: ltr !important; } .herosection .herotitles::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.18); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 3px; z-index: -1; } /* Hero CTA button */ .btn-hero { display: inline-block; margin-top: 28px; padding: 14px 36px; background-color: #0c2b62; color: #fff !important; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none !important; border-radius: 2px; transition: background-color 0.2s ease, transform 0.2s ease; } .btn-hero:hover { background-color: #1a4a9e; transform: translateY(-2px); } @media (max-width: 991px) { .herosection { min-height: 70vh !important; height: auto !important; } } @media (max-width: 767px) { .herosection { min-height: 70vh !important; height: auto !important; } .herosection .herotitles { padding: 32px 20px; } } @media (max-width: 480px) { .herosection { min-height: 75vh !important; } } /* Force LTR on all content sections so RTL-admin doesn't affect them */ .herosection, .servicessection, .aboutsection, .referencesslidersection, .banerssection, .gallery-strip, .unlimited-cta { direction: ltr !important; text-align: left; } /* Services section heading block */ .products-title, .products-title.mycontainer { flex-direction: column !important; height: auto !important; padding-bottom: 32px; text-align: left; } /* ── SERVICES SECTION — override Webflow sticky animation layout ── */ /* Webflow: .servicessection { height: 150vw; display:none at 991px } → we need auto + always visible */ .servicessection { height: auto !important; background-color: #fff; display: block !important; width: 100% !important; } /* Webflow: .camera-2 { position: sticky; overflow: hidden; height: 100vh } */ .servicessection .camera-2 { position: static !important; overflow: visible !important; height: auto !important; width: 100% !important; padding-top: 60px; padding-bottom: 60px; } /* ── SERVICES SWIPER ─────────────────────────────────────── */ .svc-swiper-wrap { position: relative; padding: 0 52px; } /* Swiper core CSS (no swiper.css file loaded — provide the minimum required) */ .svc-swiper { overflow: hidden; position: relative; width: 100%; } /* This is the critical rule Swiper CSS normally provides */ .svc-swiper .swiper-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; box-sizing: content-box; transition-property: transform; will-change: transform; height: 100%; } .svc-swiper .swiper-slide { flex-shrink: 0 !important; position: relative; transition-property: transform; } .svc-slide { height: 420px; background-color: #1c3056; background-size: cover; background-position: center; border-radius: 4px; overflow: hidden; flex-shrink: 0; } .svc-slide__link { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 28px 24px; text-decoration: none; } .svc-slide__title { color: #fff; font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin: 0 0 8px; line-height: 1.3; } .svc-slide__more { color: rgba(255,255,255,0.75); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity 0.22s ease, transform 0.22s ease; display: block; } .svc-slide:hover .svc-slide__more { opacity: 1; transform: translateY(0); } /* Slider prev/next arrows */ .svc-prev, .svc-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 46px; height: 46px; background: #0c2b62; border: none; border-radius: 50%; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; } .svc-prev { left: 6px; width: 36px; height: 36px; font-size: 15px; } .svc-next { right: 6px; width: 36px; height: 36px; font-size: 15px; } .svc-prev:hover, .svc-next:hover { background: #1a4a9e; transform: translateY(-50%) scale(1.08); } /* Pagination dots */ .svc-pagination { position: relative !important; bottom: auto !important; margin-top: 24px; display: flex; justify-content: center; gap: 8px; } .svc-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: #b0bcd6; opacity: 1; border-radius: 50%; transition: background 0.2s, transform 0.2s; } .svc-pagination .swiper-pagination-bullet-active { background: #0c2b62; transform: scale(1.3); } @media (min-width: 640px) { /* Hide pagination on tablet/desktop — arrows are enough */ .svc-pagination { display: none; } } @media (max-width: 639px) { .svc-swiper-wrap { padding: 0 44px; } .svc-slide { height: 280px; border-radius: 8px; } .svc-prev { left: 0; width: 36px; height: 36px; font-size: 16px; } .svc-next { right: 0; width: 36px; height: 36px; font-size: 16px; } /* About video panel: must have explicit height on mobile (children are all position:absolute) */ .aboutsection .aboutimg { min-height: 300px !important; height: 300px; } } @media (max-width: 767px) { /* About video panel fallback for mid-range tablets */ .aboutsection .aboutimg { min-height: 300px; } } /* ── ABOUT ───────────────────────────────────────────────── */ .aboutsection .aboutimg { position: relative; overflow: hidden; min-height: 340px; /* all children are position:absolute so element needs explicit height */ } .aboutsection .aboutimg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Centered play overlay on the about video panel */ .aboutimg__play { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(0,0,0,0.18); } .aboutimg__play-btn { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease; padding: 0; } .aboutimg__play-btn:hover { background: rgba(255,255,255,0.28); border-color: #fff; transform: scale(1.1); } .aboutimg__play-btn .play-icon { color: #fff; font-size: 30px; line-height: 1; margin-left: 4px; } .aboutimg__play-label { color: rgba(255,255,255,0.9); font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin: 0; } /* ── VIDEO MODAL ─────────────────────────────────────────── */ .alrefada-video-modal { padding: 0; border: none; background: transparent; max-width: 90vw; width: 900px; border-radius: 4px; overflow: hidden; } .alrefada-video-modal::backdrop { background: rgba(0,0,0,0.85); } .alrefada-video-modal__inner { position: relative; background: #000; } .alrefada-video-modal__player { width: 100%; max-height: 80vh; display: block; } .alrefada-video-modal__close { position: absolute; top: 8px; right: 12px; z-index: 10; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 22px; line-height: 1; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; } .alrefada-video-modal__close:hover { background: rgba(255,255,255,0.2); } /* ── REFERENCES SLIDER ───────────────────────────────────── */ /* Remove container padding so .mycontainer's margin:auto centres heading same as other sections */ .referencesslidersection { padding-top: 80px !important; } .referencesslidersection .container-slider { padding: 0 !important; } .referencesslidersection .slider-item { width: 520px; flex-shrink: 0; } .referencesslidersection .image-2 { width: 100%; height: 380px; object-fit: cover; display: block; vertical-align: bottom; /* removes gap between img and absolute blogdesc */ } /* Reference cards: blogdesc as absolute overlay at bottom of image. This avoids all Swiper/webflow overflow:hidden clipping issues. */ .referencesslidersection .slider-item { position: relative !important; overflow: hidden !important; } /* Image link fills the full card */ .referencesslidersection .linkhoverblog { display: block !important; } .blogdesc { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; height: auto !important; background: rgba(255,255,255,0.97) !important; padding: 16px 20px !important; box-sizing: border-box; } /* Tighten margins inside the overlay card */ .blogdesc .heading-14 { margin-top: 0 !important; margin-bottom: 6px !important; font-size: 15px; } .blogdesc .div-block-6 { display: flex; align-items: center; gap: 6px; margin-bottom: 0; } /* Pagination dots for references (mobile only) */ .refs-pagination { display: none; margin-top: 20px; justify-content: center; gap: 8px; } .refs-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: #b0bcd6; opacity: 1; border-radius: 50%; transition: background 0.2s, transform 0.2s; display: inline-block; } .refs-pagination .swiper-pagination-bullet-active { background: #0c2b62; transform: scale(1.3); } /* Mobile reference card: hide prev arrow (start=obvious), show only next */ @media (max-width: 767px) { .referencesslidersection .slider-item { width: 80vw; } .referencesslidersection .image-2 { height: 240px; } .refs-pagination { display: flex; } /* Hide prev arrow — only show next as scroll indicator */ .referencesslidersection .prev-slide { display: none !important; } .referencesslidersection .wrapper-nav { gap: 0; } } @media (max-width: 479px) { .referencesslidersection .slider-item { width: calc(100vw - 48px); } } /* ── BANNERS ─────────────────────────────────────────────── */ /* Fix Webflow's broken URLs + wrong background-size:contain on banerleft2 */ .banerssection .banerleft2, .banerssection .banerright { background-size: cover !important; background-position: center !important; opacity: 1 !important; } /* ── UNLIMITED CTA ───────────────────────────────────────── */ .unlimited-cta .aboutimg2 { background-size: cover !important; background-position: center !important; } /* Webflow overrides heading-8-copy to text-align:center at 991px — force left */ .unlimited-cta .heading-8-copy { text-align: left !important; max-width: 480px; } .unlimited-cta .aboutboxinside { align-items: flex-start !important; text-align: left !important; } @media (max-width: 767px) { .unlimited-cta .aboutimg2 { min-height: 260px; } } /* ── GALLERY LIGHTBOX ────────────────────────────────────── */ .gallery-lightbox { padding: 0; border: none; background: transparent; max-width: 95vw; max-height: 95vh; overflow: visible; } .gallery-lightbox::backdrop { background: rgba(0,0,0,0.92); } .gallery-lightbox__img { display: block; max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 2px; } .gallery-lightbox__close { position: fixed; top: 16px; right: 16px; z-index: 10000; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.45); color: #fff; font-size: 26px; line-height: 1; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .gallery-lightbox__close:hover { background: rgba(255,255,255,0.25); } /* Cursor on clickable gallery thumbs */ .gallery-thumb { cursor: pointer; color: transparent; /* hide alt text if image fails to load */ font-size: 0; } /* ── GALLERY STRIP ───────────────────────────────────────── */ .gallery-strip { padding: 64px 0 72px; background: #f4f6fb; overflow: hidden; } .gallery-strip__header { margin-bottom: 36px; } .gallery-strip__outer { overflow: hidden; width: 100%; } .gallery-strip__track { display: flex; gap: 12px; width: max-content; animation: galScroll 36s linear infinite; } .gallery-strip__track:hover { animation-play-state: paused; } .gallery-strip__track img { height: 240px; width: auto; object-fit: cover; border-radius: 3px; flex-shrink: 0; display: block; transition: transform 0.3s ease; } .gallery-strip__track img:hover { transform: scale(1.03); } @keyframes galScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 767px) { .gallery-strip { padding: 48px 0; } .gallery-strip__track img { height: 170px; } .gallery-strip__track { gap: 8px; animation-duration: 24s; } } /* ═══════════════════════════════════════════════════════════════════════════ COUNTER SECTION (homepage) ═══════════════════════════════════════════════════════════════════════════ */ .counter-section { background: #0c2b62; padding: 64px 24px; } .counter-grid { display: flex; justify-content: center; gap: 0; max-width: 1100px; margin: 0 auto; flex-wrap: wrap; } .counter-item { flex: 1 1 200px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 24px; position: relative; } .counter-item + .counter-item::before { content: ''; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: rgba(255,255,255,0.18); } .counter-number { font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5vw, 58px); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -1px; } .counter-label { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1.2px; text-align: center; } @media (max-width: 767px) { .counter-item { flex: 1 1 45%; padding: 24px 16px; } .counter-item + .counter-item::before { display: none; } } @media (max-width: 479px) { .counter-item { flex: 1 1 100%; padding: 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); } .counter-item:last-child { border-bottom: none; } } /* ═══════════════════════════════════════════════════════════════════════════ SINGLE PAGE — SERVICE & REFERENCE All new BEM-style classes (svc-sp-* / ref-sp-*) — no Webflow conflicts ═══════════════════════════════════════════════════════════════════════════ */ /* ── Legacy sp-hero kept for dynamic-styles margin-top target ── */ .sp-hero { position: relative; min-height: 65vh; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding-bottom: 0; } .sp-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(8,22,52,0.35) 0%, rgba(8,22,52,0.75) 60%, rgba(8,22,52,0.92) 100% ); } .sp-hero__content { position: relative; z-index: 2; width: 100%; max-width: 900px; margin: 0 auto; padding: 48px 32px 60px; } .sp-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .sp-breadcrumb a, .sp-breadcrumb span { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.65); text-decoration: none; text-transform: uppercase; letter-spacing: 0.8px; transition: color 0.2s; } .sp-breadcrumb a:hover { color: #fff; } .sp-breadcrumb span:last-child { color: rgba(255,255,255,0.9); } .sp-hero__title { font-family: 'Montserrat', sans-serif; font-size: clamp(32px, 5vw, 54px); font-weight: 800; color: #fff; line-height: 1.15; margin: 0 0 16px; text-transform: uppercase; letter-spacing: -0.5px; } .sp-hero__sub { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 400; color: rgba(255,255,255,0.82); margin: 0; display: flex; align-items: center; gap: 8px; line-height: 1.5; } /* ── Content (description + features) ───────────────────── */ .sp-content { background: #fff; padding: 80px 32px; } .sp-content__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .sp-section-title { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #0c2b62; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid #0c2b62; display: inline-block; } .sp-section-title--center { display: block; text-align: center; border-bottom: none; margin-bottom: 40px; } .sp-section-title--center::after { content: ''; display: block; width: 48px; height: 2px; background: #0c2b62; margin: 12px auto 0; } .sp-desc { font-family: 'Raleway', sans-serif; font-size: 16px; line-height: 1.8; color: #444; } .sp-features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .sp-features-list li { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; color: #1a3060; padding: 14px 18px; background: #f4f7fc; border-left: 3px solid #0c2b62; border-radius: 0 4px 4px 0; line-height: 1.4; } .sp-features-list li::before { content: '✓ '; color: #0c2b62; font-weight: 700; } /* Reference meta list */ .sp-meta-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 0; } .sp-meta-list li { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #e8eef8; font-family: 'Montserrat', sans-serif; font-size: 14px; } .sp-meta-list li strong { color: #0c2b62; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.8px; } .sp-meta-list li span { color: #444; font-weight: 500; } .sp-inline-cta { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #0c2b62; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #0c2b62; padding-bottom: 2px; transition: opacity 0.2s; } .sp-inline-cta:hover { opacity: 0.7; } /* ── Gallery ──────────────────────────────────────────────── */ .sp-gallery { background: #f4f6fb; padding: 80px 32px; } .sp-gallery__inner { max-width: 1100px; margin: 0 auto; } .sp-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .sp-gallery__item { background: none; border: none; padding: 0; cursor: zoom-in; border-radius: 4px; overflow: hidden; aspect-ratio: 4/3; display: block; } .sp-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .sp-gallery__item:hover img { transform: scale(1.04); } /* ── Related cards ────────────────────────────────────────── */ .sp-related { background: #fff; padding: 80px 32px; } .sp-related__inner { max-width: 1100px; margin: 0 auto; } .sp-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sp-related__card { display: flex; flex-direction: column; text-decoration: none; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 16px rgba(12,43,98,0.08); transition: box-shadow 0.3s, transform 0.3s; background: #fff; } .sp-related__card:hover { box-shadow: 0 8px 32px rgba(12,43,98,0.16); transform: translateY(-4px); } .sp-related__img { height: 200px; background-size: cover; background-position: center; flex-shrink: 0; } .sp-related__info { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .sp-related__info h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: #0c2b62; margin: 0; line-height: 1.3; } .sp-related__info p { font-family: 'Raleway', sans-serif; font-size: 13px; color: #666; margin: 0; line-height: 1.5; flex: 1; } .sp-related__arrow { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: #0c2b62; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; } /* ── CTA section ─────────────────────────────────────────── */ .sp-cta { background: #0c2b62; padding: 88px 32px; text-align: center; } .sp-cta__inner { max-width: 680px; margin: 0 auto; } .sp-cta h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(26px, 4vw, 40px); font-weight: 800; color: #fff; margin: 0 0 16px; line-height: 1.2; } .sp-cta p { font-family: 'Raleway', sans-serif; font-size: 16px; color: rgba(255,255,255,0.78); line-height: 1.7; margin: 0 0 36px; } .sp-cta__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .sp-cta__btn { display: inline-flex; align-items: center; padding: 15px 36px; border-radius: 3px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; transition: all 0.25s ease; } .sp-cta__btn--primary { background: #fff; color: #0c2b62; } .sp-cta__btn--primary:hover { background: #e8f0ff; } .sp-cta__btn--outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.5); } .sp-cta__btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); } /* ── Single page legacy responsive (keep for any old markup refs) */ @media (max-width: 900px) { .sp-content__inner { grid-template-columns: 1fr; gap: 40px; } .sp-related__grid { grid-template-columns: repeat(2, 1fr); } .sp-gallery__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sp-hero { min-height: 55vh; } .sp-hero__content { padding: 32px 20px 48px; } .sp-gallery__grid { grid-template-columns: 1fr 1fr; gap: 10px; } .sp-related__grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ NEW SINGLE-PAGE DESIGN SYSTEM (svc-sp-* / ref-sp-*) Brand: #0c2b62 (dark navy), #1a4a9e (mid blue), accent white Fonts: Montserrat (headings/labels), Raleway (body) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Shared tokens ───────────────────────────────────────────────────────── */ .svc-sp-eyebrow { display: block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #1a4a9e; margin-bottom: 10px; } .svc-sp-eyebrow--light { color: rgba(255,255,255,0.6); } .svc-sp-heading { font-family: 'Montserrat', sans-serif; font-size: clamp(22px, 2.8vw, 32px); font-weight: 800; color: #0c2b62; margin: 0 0 24px; line-height: 1.2; } .svc-sp-prose { font-family: 'Raleway', sans-serif; font-size: 16px; line-height: 1.85; color: #444; } .svc-sp-prose p { margin: 0 0 1em; } .svc-sp-text-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #0c2b62; text-decoration: none; border-bottom: 2px solid #0c2b62; padding-bottom: 2px; margin-top: 24px; transition: opacity 0.2s; } .svc-sp-text-link:hover { opacity: 0.65; } /* ── Shared buttons ──────────────────────────────────────────────────────── */ .svc-sp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: 3px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; transition: all 0.25s ease; border: 2px solid transparent; white-space: nowrap; } .svc-sp-btn--primary { background: #fff; color: #0c2b62; border-color: #fff; } .svc-sp-btn--primary:hover { background: #e8f0ff; border-color: #e8f0ff; } .svc-sp-btn--ghost { background: transparent; color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.5); } .svc-sp-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; } .svc-sp-btn--white { background: #fff; color: #0c2b62; border-color: #fff; } .svc-sp-btn--white:hover { background: #e8f0ff; } .svc-sp-btn--ghost-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); } .svc-sp-btn--ghost-white:hover { border-color: #fff; background: rgba(255,255,255,0.1); } /* ── Shared breadcrumb ───────────────────────────────────────────────────── */ .svc-sp-breadcrumb { display: flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 24px; flex-wrap: wrap; } .svc-sp-breadcrumb a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; } .svc-sp-breadcrumb a:hover { color: #fff; } .svc-sp-breadcrumb span { color: rgba(255,255,255,0.85); } /* ═══ SERVICE HERO ════════════════════════════════════════════════════════ */ .svc-sp-hero { position: relative; min-height: 88vh; background-size: cover; background-position: center; background-color: #0c2b62; display: flex; align-items: center; overflow: hidden; } .svc-sp-hero__overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(12,43,98,0.88) 0%, rgba(12,43,98,0.55) 60%, rgba(0,0,0,0.3) 100%); } .svc-sp-hero__content { position: relative; z-index: 2; max-width: 720px; padding: 80px 64px; } .svc-sp-hero__badge { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); padding: 6px 14px; border-radius: 2px; margin-bottom: 20px; } .svc-sp-hero__title { font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5.5vw, 64px); font-weight: 900; color: #fff; line-height: 1.1; margin: 0 0 18px; letter-spacing: -0.5px; } .svc-sp-hero__excerpt { font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 400; color: rgba(255,255,255,0.78); margin: 0 0 36px; line-height: 1.6; max-width: 540px; } .svc-sp-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ═══ BODY (DESCRIPTION + FEATURES) ═════════════════════════════════════ */ .svc-sp-body { background: #fff; padding: 96px 48px; } .svc-sp-body__inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: start; } .svc-sp-body__desc { } .svc-sp-body__features { } /* Features list */ .svc-sp-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .svc-sp-features__item { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: #f4f7fc; border-left: 3px solid #0c2b62; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; color: #1a3060; line-height: 1.5; transition: background 0.2s; } .svc-sp-features__item:hover { background: #eaf0ff; } .svc-sp-features__icon { flex-shrink: 0; width: 30px; height: 30px; background: #0c2b62; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; margin-top: -2px; } /* ═══ WHY-CHOOSE-US STRIP ════════════════════════════════════════════════ */ .svc-sp-strip { background: #0c2b62; padding: 48px 48px; } .svc-sp-strip__inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .svc-sp-strip__item { display: flex; align-items: flex-start; gap: 16px; padding: 0 32px; border-right: 1px solid rgba(255,255,255,0.12); color: #fff; } .svc-sp-strip__item:first-child { padding-left: 0; } .svc-sp-strip__item:last-child { border-right: none; } .svc-sp-strip__item svg { flex-shrink: 0; opacity: 0.7; margin-top: 2px; } .svc-sp-strip__item strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; margin-bottom: 4px; } .svc-sp-strip__item span { font-family: 'Raleway', sans-serif; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; } /* ═══ GALLERY ════════════════════════════════════════════════════════════ */ .svc-sp-gallery { background: #f0f3f9; padding: 96px 48px; } .svc-sp-gallery__inner { max-width: 1140px; margin: 0 auto; } .svc-sp-gallery__head { margin-bottom: 40px; } /* Asymmetric grid: first item spans 2 rows when ≥3 images */ .svc-sp-gallery__grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); } .svc-sp-gallery__grid--1 { grid-template-columns: 1fr; } .svc-sp-gallery__grid--2 { grid-template-columns: repeat(2, 1fr); } .svc-sp-gallery__item { position: relative; overflow: hidden; border-radius: 4px; cursor: zoom-in; background: #dde4f0; aspect-ratio: 4/3; border: none; padding: 0; display: block; } .svc-sp-gallery__item--featured { grid-row: span 2; aspect-ratio: unset; } .svc-sp-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .svc-sp-gallery__item:hover img { transform: scale(1.06); } .svc-sp-gallery__zoom { position: absolute; bottom: 12px; right: 12px; width: 40px; height: 40px; background: rgba(12,43,98,0.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transform: scale(0.7); transition: opacity 0.25s ease, transform 0.25s ease; } .svc-sp-gallery__item:hover .svc-sp-gallery__zoom { opacity: 1; transform: scale(1); } /* ═══ LIGHTBOX ═══════════════════════════════════════════════════════════ */ .svc-sp-lightbox { padding: 0; background: rgba(0,0,0,0.92); border: none; max-width: 92vw; max-height: 92vh; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .svc-sp-lightbox::backdrop { background: rgba(0,0,0,0.7); } .svc-sp-lightbox .gallery-lightbox__img { max-width: 100%; max-height: 88vh; object-fit: contain; display: block; } .svc-sp-lightbox__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; background: rgba(255,255,255,0.15); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 10; transition: background 0.2s; } .svc-sp-lightbox__close:hover { background: rgba(255,255,255,0.3); } /* ═══ RELATED SERVICES CARDS ═════════════════════════════════════════════ */ .svc-sp-related { background: #fff; padding: 96px 48px; } .svc-sp-related__inner { max-width: 1140px; margin: 0 auto; } .svc-sp-related__head { margin-bottom: 40px; } .svc-sp-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .svc-sp-card { display: flex; flex-direction: column; text-decoration: none; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 16px rgba(12,43,98,0.07); transition: box-shadow 0.3s ease, transform 0.3s ease; background: #fff; } .svc-sp-card:hover { box-shadow: 0 12px 40px rgba(12,43,98,0.16); transform: translateY(-5px); } .svc-sp-card__img { height: 200px; background-size: cover; background-position: center; background-color: #dde4f0; flex-shrink: 0; position: relative; overflow: hidden; } .svc-sp-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,43,98,0.45), transparent); opacity: 0; transition: opacity 0.3s; } .svc-sp-card:hover .svc-sp-card__overlay { opacity: 1; } .svc-sp-card__label { position: absolute; bottom: 12px; left: 14px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity 0.3s; } .svc-sp-card:hover .svc-sp-card__label { opacity: 1; } .svc-sp-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .svc-sp-card__title { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: #0c2b62; margin: 0; line-height: 1.35; } .svc-sp-card__exc { font-family: 'Raleway', sans-serif; font-size: 13px; color: #666; margin: 0; line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .svc-sp-card__arrow { display: flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #1a4a9e; margin-top: 4px; transition: gap 0.2s; } .svc-sp-card:hover .svc-sp-card__arrow { gap: 9px; } /* ═══ CTA SECTION ════════════════════════════════════════════════════════ */ .svc-sp-cta { background: linear-gradient(135deg, #0c2b62 0%, #163d88 100%); padding: 96px 48px; } .svc-sp-cta__inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .svc-sp-cta__text { flex: 1; min-width: 280px; } .svc-sp-cta__text h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(24px, 3.5vw, 40px); font-weight: 800; color: #fff; margin: 0 0 14px; line-height: 1.2; } .svc-sp-cta__text p { font-family: 'Raleway', sans-serif; font-size: 16px; color: rgba(255,255,255,0.72); line-height: 1.7; margin: 0; max-width: 520px; } .svc-sp-cta__actions { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; } /* ═══ REFERENCE HERO ══════════════════════════════════════════════════════ */ .ref-sp-hero { position: relative; min-height: 88vh; background-size: cover; background-position: center; background-color: #0c2b62; display: flex; align-items: flex-end; overflow: hidden; } .ref-sp-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,43,98,0.92) 0%, rgba(12,43,98,0.45) 55%, rgba(0,0,0,0.15) 100%); } .ref-sp-hero__content { position: relative; z-index: 2; width: 100%; max-width: 900px; padding: 56px 64px; } .ref-sp-hero__meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .ref-sp-hero__badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); padding: 6px 12px; border-radius: 30px; } .ref-sp-hero__title { font-family: 'Montserrat', sans-serif; font-size: clamp(32px, 5vw, 58px); font-weight: 900; color: #fff; line-height: 1.1; margin: 0 0 32px; letter-spacing: -0.5px; } .ref-sp-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ═══ PROJECT STATS BAR ═══════════════════════════════════════════════════ */ .ref-sp-stats { background: #fff; border-bottom: 1px solid #e8eef8; padding: 0 48px; } .ref-sp-stats__inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: stretch; } .ref-sp-stats__item { display: flex; align-items: center; gap: 14px; padding: 28px 36px; border-right: 1px solid #e8eef8; flex: 1; color: #0c2b62; } .ref-sp-stats__item:first-child { padding-left: 0; } .ref-sp-stats__item:last-child { border-right: none; } .ref-sp-stats__item svg { flex-shrink: 0; opacity: 0.5; } .ref-sp-stats__label { display: block; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #999; margin-bottom: 4px; } .ref-sp-stats__value { display: block; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: #0c2b62; } /* ═══ REFERENCE BODY (DESC + ASIDE) ══════════════════════════════════════ */ .ref-sp-body { background: #fff; padding: 96px 48px; } .ref-sp-body__inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; } .ref-sp-aside-card { background: #f4f7fc; border-radius: 8px; padding: 36px 32px; border: 1px solid #dde4f0; } .ref-sp-aside-card__title { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #1a4a9e; margin: 0 0 20px; } .ref-sp-detail-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 0; } .ref-sp-detail-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid #dde4f0; } .ref-sp-detail-list__key { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #999; white-space: nowrap; } .ref-sp-detail-list__val { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: #0c2b62; text-align: right; } .ref-sp-aside-btn { display: inline-flex; align-items: center; width: 100%; justify-content: center; padding: 14px 24px; background: #0c2b62; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; border-radius: 3px; transition: background 0.25s; } .ref-sp-aside-btn:hover { background: #1a4a9e; } /* ═══ REFERENCE GALLERY ═══════════════════════════════════════════════════ */ .ref-sp-gallery { background: #f0f3f9; padding: 96px 48px; } .ref-sp-gallery__inner { max-width: 1140px; margin: 0 auto; } .ref-sp-gallery__grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } .ref-sp-gallery__grid--1 { grid-template-columns: 1fr; } .ref-sp-gallery__grid--3, .ref-sp-gallery__grid--4 { grid-template-columns: repeat(2, 1fr); } .ref-sp-gallery__item { position: relative; overflow: hidden; border-radius: 4px; cursor: zoom-in; background: #dde4f0; aspect-ratio: 16/10; border: none; padding: 0; display: block; } .ref-sp-gallery__item--featured { grid-column: span 1; grid-row: span 2; aspect-ratio: unset; } .ref-sp-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .ref-sp-gallery__item:hover img { transform: scale(1.05); } .ref-sp-gallery__item:hover .svc-sp-gallery__zoom { opacity: 1; transform: scale(1); } /* ═══ REFERENCE RELATED PROJECTS ═════════════════════════════════════════ */ .ref-sp-related { background: #fff; padding: 96px 48px; } .ref-sp-related__inner { max-width: 1140px; margin: 0 auto; } .ref-sp-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ref-sp-proj-card { display: flex; flex-direction: column; text-decoration: none; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 18px rgba(12,43,98,0.07); transition: box-shadow 0.3s ease, transform 0.3s ease; background: #fff; } .ref-sp-proj-card:hover { box-shadow: 0 14px 48px rgba(12,43,98,0.15); transform: translateY(-5px); } .ref-sp-proj-card__img { height: 220px; background-size: cover; background-position: center; background-color: #dde4f0; position: relative; overflow: hidden; } .ref-sp-proj-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,43,98,0.6), transparent 60%); } .ref-sp-proj-card__loc { position: absolute; bottom: 12px; left: 14px; display: flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: rgba(255,255,255,0.9); } .ref-sp-proj-card__body { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .ref-sp-proj-card__body h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: #0c2b62; margin: 0; line-height: 1.3; } .ref-sp-proj-card__year { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; color: #999; text-transform: uppercase; flex: 1; } /* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media (max-width: 1200px) { .svc-sp-related__grid { grid-template-columns: repeat(2, 1fr); } .svc-sp-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; } .svc-sp-strip__item { border-right: none; padding: 0; } } @media (max-width: 1024px) { .svc-sp-hero__content { padding: 80px 48px; } .ref-sp-hero__content { padding: 48px 48px; } .svc-sp-body { padding: 72px 32px; } .svc-sp-body__inner { gap: 48px; } .svc-sp-gallery { padding: 72px 32px; } .svc-sp-related { padding: 72px 32px; } .svc-sp-cta { padding: 72px 32px; } .svc-sp-cta__inner { flex-direction: column; align-items: flex-start; } .ref-sp-body { padding: 72px 32px; } .ref-sp-gallery { padding: 72px 32px; } .ref-sp-related { padding: 72px 32px; } .ref-sp-stats { padding: 0 32px; } .ref-sp-stats__item { padding: 22px 24px; } .ref-sp-stats__item:first-child { padding-left: 0; } } @media (max-width: 900px) { .svc-sp-body__inner { grid-template-columns: 1fr; gap: 48px; } .ref-sp-body__inner { grid-template-columns: 1fr; gap: 40px; } .svc-sp-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; } .ref-sp-related__grid { grid-template-columns: repeat(2, 1fr); } .ref-sp-gallery__grid--3, .ref-sp-gallery__grid--4 { grid-template-columns: repeat(2, 1fr); } .ref-sp-gallery__item--featured { grid-row: span 1; aspect-ratio: 16/10; } .svc-sp-gallery__grid { grid-template-columns: repeat(2, 1fr); } .svc-sp-gallery__item--featured { grid-row: span 1; aspect-ratio: 4/3; } } @media (max-width: 768px) { .svc-sp-hero { min-height: 70vh; } .ref-sp-hero { min-height: 70vh; } .svc-sp-hero__content { padding: 48px 24px; } .ref-sp-hero__content { padding: 40px 24px; } .svc-sp-hero__title { font-size: clamp(28px, 7vw, 48px); } .ref-sp-hero__title { font-size: clamp(26px, 6.5vw, 44px); } .svc-sp-body { padding: 56px 24px; } .ref-sp-body { padding: 56px 24px; } .svc-sp-gallery { padding: 56px 24px; } .ref-sp-gallery { padding: 56px 24px; } .svc-sp-strip { padding: 36px 24px; } .svc-sp-strip__inner { grid-template-columns: 1fr 1fr; gap: 20px; } .svc-sp-related { padding: 56px 24px; } .svc-sp-related__grid { grid-template-columns: repeat(2, 1fr); } .ref-sp-related { padding: 56px 24px; } .ref-sp-related__grid { grid-template-columns: 1fr; } .svc-sp-cta { padding: 64px 24px; } .ref-sp-stats { padding: 0 24px; overflow-x: auto; } .ref-sp-stats__inner { min-width: 540px; } } @media (max-width: 560px) { .svc-sp-hero { min-height: 60vh; } .ref-sp-hero { min-height: 60vh; } .svc-sp-hero__actions, .ref-sp-hero__actions { flex-direction: column; align-items: flex-start; } .svc-sp-btn { width: 100%; justify-content: center; padding: 13px 24px; } .svc-sp-strip__inner { grid-template-columns: 1fr; gap: 16px; } .svc-sp-gallery__grid { grid-template-columns: 1fr 1fr; } .ref-sp-gallery__grid { grid-template-columns: 1fr; } .svc-sp-related__grid { grid-template-columns: 1fr; } .svc-sp-cta__inner { gap: 28px; } .svc-sp-cta__actions { flex-direction: column; width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ ARCHIVE PAGE TEMPLATES — Services & References Classes: arc-hero, arc-svc-card, arc-ref-card, arc-grid-section ═══════════════════════════════════════════════════════════════════════════ */ /* ── Archive hero ──────────────────────────────────────────────────────── */ .arc-hero { position: relative; min-height: 56vh; background-size: cover; background-position: center; background-color: #0c2b62; display: flex; align-items: center; overflow: hidden; } .arc-hero--ref { min-height: 60vh; align-items: flex-end; } .arc-hero__overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(12,43,98,0.88) 0%, rgba(12,43,98,0.6) 60%, rgba(0,0,0,0.35) 100%); } .arc-hero__overlay--bottom { background: linear-gradient(to top, rgba(12,43,98,0.92) 0%, rgba(12,43,98,0.45) 55%, rgba(0,0,0,0.15) 100%); } .arc-hero__content { position: relative; z-index: 2; max-width: 780px; padding: 72px 64px; } .arc-hero--ref .arc-hero__content { max-width: 900px; padding: 48px 64px; } .arc-hero__badge { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); padding: 6px 14px; border-radius: 2px; margin-bottom: 18px; } .arc-hero__title { font-family: 'Montserrat', sans-serif; font-size: clamp(38px, 6vw, 68px); font-weight: 900; color: #fff; line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.5px; } .arc-hero__sub { font-family: 'Raleway', sans-serif; font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.65; margin: 0; max-width: 540px; } /* ── Grid section wrapper ──────────────────────────────────────────────── */ .arc-grid-section { background: #f0f3f9; padding: 88px 48px; } .arc-grid-inner { max-width: 1200px; margin: 0 auto; } .arc-empty { font-family: 'Raleway', sans-serif; font-size: 16px; color: #888; text-align: center; padding: 64px 0; } /* ═══ SERVICES GRID ════════════════════════════════════════════════════════ */ .arc-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .arc-svc-card { display: flex; flex-direction: column; text-decoration: none; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 16px rgba(12,43,98,0.06); transition: box-shadow 0.3s ease, transform 0.3s ease; } .arc-svc-card:hover { box-shadow: 0 16px 48px rgba(12,43,98,0.14); transform: translateY(-6px); } .arc-svc-card__img { height: 230px; background-size: cover; background-position: center; background-color: #c8d4e8; position: relative; overflow: hidden; flex-shrink: 0; } .arc-svc-card__img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,43,98,0.55), transparent 60%); opacity: 0; transition: opacity 0.35s ease; } .arc-svc-card:hover .arc-svc-card__img-overlay { opacity: 1; } .arc-svc-card__hover-label { position: absolute; bottom: 14px; left: 16px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; } .arc-svc-card:hover .arc-svc-card__hover-label { opacity: 1; transform: translateY(0); } .arc-svc-card__body { padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .arc-svc-card__title { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; color: #0c2b62; margin: 0; line-height: 1.3; } .arc-svc-card__exc { font-family: 'Raleway', sans-serif; font-size: 14px; color: #555; line-height: 1.65; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .arc-svc-card__feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .arc-svc-card__feats li { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; color: #666; padding-left: 14px; position: relative; } .arc-svc-card__feats li::before { content: '—'; position: absolute; left: 0; color: #1a4a9e; font-weight: 700; } .arc-svc-card__cta { display: inline-flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #1a4a9e; margin-top: 4px; transition: gap 0.2s; } .arc-svc-card:hover .arc-svc-card__cta, .arc-ref-card:hover .arc-svc-card__cta { gap: 10px; } /* ═══ REFERENCES GRID ══════════════════════════════════════════════════════ */ .arc-ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; /* Auto-rows equal height — first card spans 2 rows if featured */ } .arc-ref-card { display: flex; flex-direction: column; text-decoration: none; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 16px rgba(12,43,98,0.06); transition: box-shadow 0.3s ease, transform 0.3s ease; } .arc-ref-card:hover { box-shadow: 0 16px 48px rgba(12,43,98,0.14); transform: translateY(-6px); } .arc-ref-card__img { height: 240px; background-size: cover; background-position: center; background-color: #c8d4e8; position: relative; overflow: hidden; flex-shrink: 0; } .arc-ref-card--featured .arc-ref-card__img { height: 320px; } .arc-ref-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,43,98,0.65) 0%, rgba(12,43,98,0.1) 55%, transparent 100%); } .arc-ref-card__loc { position: absolute; bottom: 12px; left: 14px; display: flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.9); letter-spacing: 0.3px; } .arc-ref-card__body { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .arc-ref-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .arc-ref-card__year { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #1a4a9e; text-transform: uppercase; background: #eef2fb; padding: 3px 10px; border-radius: 2px; } .arc-ref-card__client { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; color: #999; text-transform: uppercase; letter-spacing: 0.5px; } .arc-ref-card__title { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800; color: #0c2b62; margin: 0; line-height: 1.3; } .arc-ref-card__desc { font-family: 'Raleway', sans-serif; font-size: 13px; color: #666; line-height: 1.65; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Archive responsive ────────────────────────────────────────────────── */ @media (max-width: 1100px) { .arc-svc-grid { grid-template-columns: repeat(2, 1fr); } .arc-ref-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .arc-hero__content { padding: 56px 32px; } .arc-hero--ref .arc-hero__content { padding: 40px 32px; } .arc-grid-section { padding: 64px 24px; } .arc-hero__title { font-size: clamp(30px, 8vw, 50px); } .arc-hero__sub { font-size: 16px; } } @media (max-width: 600px) { .arc-svc-grid { grid-template-columns: 1fr; } .arc-ref-grid { grid-template-columns: 1fr; } .arc-hero { min-height: 50vh; } .arc-hero--ref { min-height: 55vh; } .arc-hero__content { padding: 40px 20px; } .arc-svc-card__img { height: 200px; } .arc-ref-card__img { height: 200px; } .arc-ref-card--featured .arc-ref-card__img { height: 220px; } } /* ── Results bar ──────────────────────────────────────────── */ .arc-results-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid #dde4f0; } .arc-results-bar__count { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #0c2b62; } .arc-results-bar__page { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; color: #999; } /* ── Pagination ───────────────────────────────────────────── */ .arc-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 56px; flex-wrap: wrap; } .arc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; height: 44px; padding: 0 14px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: #0c2b62; background: #fff; border: 1.5px solid #dde4f0; border-radius: 4px; text-decoration: none; transition: all 0.2s ease; } .arc-pagination .page-numbers:hover { background: #0c2b62; border-color: #0c2b62; color: #fff; } .arc-pagination .page-numbers.current { background: #0c2b62; border-color: #0c2b62; color: #fff; cursor: default; } .arc-pagination .page-numbers.dots { background: transparent; border-color: transparent; cursor: default; color: #aaa; min-width: 24px; padding: 0; } .arc-pagination .prev, .arc-pagination .next { font-size: 12px; letter-spacing: 0.5px; padding: 0 18px; } @media (max-width: 480px) { .arc-pagination .page-numbers { min-width: 38px; height: 38px; font-size: 12px; } } /* ═══════════════════════════════════════════════════════════════════════════ ABOUT US PAGE (abt-*) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hero ──────────────────────────────────────────────────────────────── */ .abt-hero { position: relative; min-height: 80vh; background-size: cover; background-position: center; background-color: #0c2b62; display: flex; align-items: center; overflow: hidden; } .abt-hero__overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(12,43,98,0.9) 0%, rgba(12,43,98,0.6) 55%, rgba(0,0,0,0.3) 100%); } .abt-hero__content { position: relative; z-index: 2; max-width: 760px; padding: 80px 64px; } .abt-hero__eyebrow { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); padding: 6px 14px; border-radius: 2px; margin-bottom: 20px; } .abt-hero__title { font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5.5vw, 62px); font-weight: 900; color: #fff; line-height: 1.08; margin: 0 0 18px; letter-spacing: -0.5px; } .abt-hero__sub { font-family: 'Raleway', sans-serif; font-size: 18px; color: rgba(255,255,255,0.75); line-height: 1.65; margin: 0 0 36px; max-width: 520px; } .abt-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ── Our Story ─────────────────────────────────────────────────────────── */ .abt-story { background: #fff; padding: 96px 48px; } .abt-story__inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .abt-story__img-wrap { position: relative; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 64px rgba(12,43,98,0.14); } .abt-story__img-wrap img { width: 100%; height: 520px; object-fit: cover; display: block; } .abt-story__img-badge { position: absolute; bottom: 24px; right: 24px; background: #0c2b62; color: #fff; padding: 16px 22px; border-radius: 4px; text-align: center; line-height: 1.2; } .abt-story__img-badge strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.6; margin-bottom: 4px; } .abt-story__img-badge span { display: block; font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 900; } .abt-story__img-placeholder { width: 100%; height: 520px; background: linear-gradient(135deg, #c8d4e8, #a0b4d0); border-radius: 6px; display: flex; align-items: center; justify-content: center; } .abt-story__heading { font-family: 'Montserrat', sans-serif; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: #0c2b62; line-height: 1.2; margin: 0 0 24px; } .abt-story__body { margin-bottom: 28px; } .abt-story__quote { margin: 0 0 28px; padding: 20px 24px; background: #f4f7fc; border-left: 4px solid #0c2b62; border-radius: 0 4px 4px 0; display: flex; gap: 12px; align-items: flex-start; font-family: 'Raleway', sans-serif; font-size: 15px; font-style: italic; color: #0c2b62; line-height: 1.6; font-weight: 600; } .abt-story__quote svg { flex-shrink: 0; margin-top: 2px; opacity: 0.4; } /* ── Mission Strip ─────────────────────────────────────────────────────── */ .abt-mission { background: linear-gradient(135deg, #0c2b62 0%, #163d88 100%); padding: 80px 48px; text-align: center; } .abt-mission__inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; } .abt-mission__icon { flex-shrink: 0; } .abt-mission__text { font-family: 'Raleway', sans-serif; font-size: clamp(18px, 2.5vw, 26px); font-style: italic; font-weight: 600; color: #fff; line-height: 1.6; margin: 0; } .abt-mission__line { width: 48px; height: 2px; background: rgba(255,255,255,0.3); } .abt-mission__attr { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45); } /* ── Core Values ───────────────────────────────────────────────────────── */ .abt-values { background: #f0f3f9; padding: 96px 48px; } .abt-values__inner { max-width: 1140px; margin: 0 auto; } .abt-values__head { margin-bottom: 48px; } .abt-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .abt-val-card { background: #fff; border-radius: 8px; padding: 36px 28px; box-shadow: 0 2px 16px rgba(12,43,98,0.06); transition: box-shadow 0.3s, transform 0.3s; border-top: 3px solid transparent; } .abt-val-card:hover { box-shadow: 0 12px 36px rgba(12,43,98,0.12); transform: translateY(-4px); border-top-color: #0c2b62; } .abt-val-card__icon { width: 52px; height: 52px; background: #eef2fb; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #0c2b62; margin-bottom: 20px; transition: background 0.3s; } .abt-val-card:hover .abt-val-card__icon { background: #0c2b62; color: #fff; } .abt-val-card__title { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800; color: #0c2b62; margin: 0 0 10px; } .abt-val-card__desc { font-family: 'Raleway', sans-serif; font-size: 14px; color: #666; line-height: 1.7; margin: 0; } /* ── Stats Bar ─────────────────────────────────────────────────────────── */ .abt-stats { background: #0c2b62; padding: 64px 48px; } .abt-stats__inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .abt-stats__item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; border-right: 1px solid rgba(255,255,255,0.12); } .abt-stats__item:last-child { border-right: none; } .abt-stats__number { font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5vw, 54px); font-weight: 900; color: #fff; line-height: 1; margin-bottom: 10px; } .abt-stats__label { font-family: 'Raleway', sans-serif; font-size: 13px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500; } /* ── Why Choose Us ─────────────────────────────────────────────────────── */ .abt-why { background: #fff; padding: 96px 48px; } .abt-why__inner { max-width: 1140px; margin: 0 auto; } .abt-why__head { margin-bottom: 48px; } .abt-why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; } .abt-why-item { display: flex; gap: 20px; align-items: flex-start; padding: 32px 36px; background: #f4f7fc; transition: background 0.2s; } .abt-why-item:hover { background: #eef2fb; } .abt-why-item__icon { flex-shrink: 0; width: 48px; height: 48px; background: #0c2b62; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; margin-top: 2px; } .abt-why-item__text h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800; color: #0c2b62; margin: 0 0 8px; } .abt-why-item__text p { font-family: 'Raleway', sans-serif; font-size: 14px; color: #666; line-height: 1.7; margin: 0; } /* ── Gallery ───────────────────────────────────────────────────────────── */ .abt-gallery { background: #f0f3f9; padding: 96px 48px; } .abt-gallery__inner { max-width: 1140px; margin: 0 auto; } .abt-gallery__head { margin-bottom: 40px; } .abt-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .abt-gallery__grid--1 { grid-template-columns: 1fr; } .abt-gallery__grid--2 { grid-template-columns: repeat(2, 1fr); } .abt-gallery__item { position: relative; overflow: hidden; border-radius: 4px; cursor: zoom-in; background: #c8d4e8; aspect-ratio: 4/3; border: none; padding: 0; display: block; } .abt-gallery__item--featured { grid-row: span 2; aspect-ratio: unset; } .abt-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .abt-gallery__item:hover img { transform: scale(1.06); } .abt-gallery__item:hover .svc-sp-gallery__zoom { opacity: 1; transform: scale(1); } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .abt-values__grid { grid-template-columns: repeat(2, 1fr); } .abt-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 32px; } .abt-stats__item { border-right: none; padding: 0; } } @media (max-width: 900px) { .abt-story__inner { grid-template-columns: 1fr; gap: 48px; } .abt-story__img-wrap img { height: 380px; } .abt-story__img-placeholder { height: 300px; } .abt-why__grid { grid-template-columns: 1fr; } .abt-gallery__grid { grid-template-columns: repeat(2, 1fr); } .abt-gallery__item--featured { grid-row: span 1; aspect-ratio: 4/3; } } @media (max-width: 768px) { .abt-hero { min-height: 70vh; } .abt-hero__content { padding: 56px 32px; } .abt-story { padding: 64px 24px; } .abt-mission { padding: 64px 24px; } .abt-values { padding: 64px 24px; } .abt-stats { padding: 48px 24px; } .abt-why { padding: 64px 24px; } .abt-gallery { padding: 64px 24px; } .abt-why-item { padding: 24px 20px; } } @media (max-width: 560px) { .abt-hero { min-height: 60vh; } .abt-hero__content { padding: 40px 20px; } .abt-hero__actions { flex-direction: column; align-items: flex-start; } .abt-values__grid { grid-template-columns: 1fr; } .abt-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; } .abt-gallery__grid { grid-template-columns: 1fr 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════ CONTACT US PAGE (cnt-*) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hero ──────────────────────────────────────────────────────────────── */ .cnt-hero { position: relative; min-height: 52vh; background-size: cover; background-position: center; background-color: #0c2b62; display: flex; align-items: center; overflow: hidden; } .cnt-hero__overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(12,43,98,0.92) 0%, rgba(12,43,98,0.65) 60%, rgba(0,0,0,0.35) 100%); } .cnt-hero__content { position: relative; z-index: 2; max-width: 700px; padding: 72px 64px; } .cnt-hero__title { font-family: 'Montserrat', sans-serif; font-size: clamp(34px, 5vw, 58px); font-weight: 900; color: #fff; line-height: 1.08; margin: 0 0 16px; letter-spacing: -0.5px; text-align: left !important; } .cnt-hero__sub { font-family: 'Raleway', sans-serif; font-size: 17px; color: rgba(255,255,255,0.75); line-height: 1.65; margin: 0 0 28px; max-width: 480px; } .cnt-hero__chips { display: flex; gap: 10px; flex-wrap: wrap; } .cnt-hero__chip { display: inline-flex; align-items: center; gap: 7px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: #fff; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.25); padding: 9px 16px; border-radius: 30px; text-decoration: none; transition: background 0.2s, border-color 0.2s; } .cnt-hero__chip:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); } .cnt-hero__chip--wa { color: #fff; } .cnt-hero__chip--wa:hover { background: rgba(37,211,102,0.25); border-color: rgba(37,211,102,0.6); } /* ── Main 2-col layout ─────────────────────────────────────────────────── */ .cnt-main { background: #f0f3f9; padding: 88px 48px; } .cnt-main__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 420px 1fr; gap: 56px; align-items: start; } /* ── Info sidebar ──────────────────────────────────────────────────────── */ .cnt-info { position: sticky; top: 100px; } .cnt-info__heading { font-family: 'Montserrat', sans-serif; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; color: #0c2b62; margin: 0 0 12px; line-height: 1.25; text-align: left !important; } .cnt-info__intro { font-family: 'Raleway', sans-serif; font-size: 15px; color: #666; line-height: 1.7; margin: 0 0 32px; } .cnt-info-list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 0; } .cnt-info-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid #dde4f0; } .cnt-info-item:first-child { padding-top: 0; } .cnt-info-item__icon { flex-shrink: 0; width: 40px; height: 40px; background: #eef2fb; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #0c2b62; margin-top: 2px; } .cnt-info-item__icon--wa { background: #e8f8ef; color: #25d366; } .cnt-info-item strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #999; margin-bottom: 5px; } .cnt-info-item span, .cnt-info-item a { display: block; font-family: 'Raleway', sans-serif; font-size: 14px; color: #333; text-decoration: none; line-height: 1.6; transition: color 0.2s; } .cnt-info-item a:hover { color: #1a4a9e; } .cnt-map { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(12,43,98,0.1); } .cnt-map iframe { display: block; } /* ── Form card ─────────────────────────────────────────────────────────── */ .cnt-form-wrap { background: #fff; border-radius: 12px; padding: 48px 48px; box-shadow: 0 4px 32px rgba(12,43,98,0.08); } .cnt-form-header { margin-bottom: 32px; } .cnt-form-title { font-family: 'Montserrat', sans-serif; font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; color: #0c2b62; margin: 0 0 10px; text-align: left !important; } .cnt-form-intro { font-family: 'Raleway', sans-serif; font-size: 15px; color: #666; line-height: 1.65; margin: 0; } /* Error banner */ .cnt-error { display: flex; align-items: center; gap: 10px; background: #fff3f3; border: 1.5px solid #f5b8b8; border-radius: 6px; padding: 14px 18px; margin-bottom: 24px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: #c0392b; } /* Form rows */ .cnt-form__row { display: flex; gap: 20px; } .cnt-form__row--2 > .cnt-field { flex: 1; } /* Fields */ .cnt-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .cnt-field__label { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #0c2b62; } .cnt-field__label span { color: #c0392b; margin-left: 2px; } .cnt-field__input { width: 100%; padding: 13px 16px; font-family: 'Raleway', sans-serif; font-size: 15px; color: #222; background: #f8fafd; border: 1.5px solid #dde4f0; border-radius: 6px; outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; box-sizing: border-box; -webkit-appearance: none; appearance: none; } .cnt-field__input:focus { border-color: #0c2b62; background: #fff; box-shadow: 0 0 0 3px rgba(12,43,98,0.1); } .cnt-field__input::placeholder { color: #aab; } .cnt-field__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230c2b62' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } .cnt-field__textarea { resize: vertical; min-height: 130px; line-height: 1.6; } /* Footer: privacy + submit */ .cnt-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; flex-wrap: wrap; } .cnt-form__privacy { display: flex; align-items: center; gap: 6px; font-family: 'Montserrat', sans-serif; font-size: 11px; color: #aaa; margin: 0; flex: 1; } .cnt-submit { display: inline-flex; align-items: center; gap: 10px; padding: 15px 36px; background: #0c2b62; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; transition: background 0.25s, transform 0.2s; white-space: nowrap; } .cnt-submit:hover { background: #1a4a9e; transform: translateY(-1px); } .cnt-submit:active { transform: translateY(0); } .cnt-submit--back { background: #f0f3f9; color: #0c2b62; margin-top: 20px; display: inline-flex; } .cnt-submit--back:hover { background: #dde4f0; } /* ── Success state ─────────────────────────────────────────────────────── */ .cnt-success { text-align: center; padding: 48px 32px; } .cnt-success__icon { width: 72px; height: 72px; background: #e8f8ef; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #27ae60; margin: 0 auto 24px; } .cnt-success__title { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800; color: #0c2b62; margin: 0 0 14px; text-align: center !important; } .cnt-success__msg { font-family: 'Raleway', sans-serif; font-size: 16px; color: #555; line-height: 1.7; margin: 0 auto 32px; max-width: 400px; } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .cnt-main__inner { grid-template-columns: 360px 1fr; gap: 40px; } } @media (max-width: 900px) { .cnt-main__inner { grid-template-columns: 1fr; } .cnt-info { position: static; } .cnt-map iframe { height: 220px; } } @media (max-width: 768px) { .cnt-hero { min-height: 44vh; } .cnt-hero__content { padding: 56px 32px; } .cnt-main { padding: 64px 24px; } .cnt-form-wrap { padding: 32px 24px; } } @media (max-width: 600px) { .cnt-hero__content { padding: 40px 20px; } .cnt-form__row--2 { flex-direction: column; gap: 0; } .cnt-form__footer { flex-direction: column; align-items: flex-start; } .cnt-submit { width: 100%; justify-content: center; } .cnt-form__privacy { font-size: 10px; } } /* ═══════════════════════════════════════════════════════════════════════════ BLOG — Archive (home.php) & Single (single.php) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Blog Archive Hero ──────────────────────────────────────────────────── */ .blog-arc-hero { position: relative; min-height: 52vh; background: linear-gradient(135deg, #0c2b62 0%, #1a4a9e 60%, #0c2b62 100%); display: flex; align-items: flex-end; overflow: hidden; } .blog-arc-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .blog-arc-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,43,98,.85) 0%, rgba(12,43,98,.3) 100%); } .blog-arc-hero__content { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 60px 40px 72px; } .blog-arc-hero__badge { display: inline-block; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #c8d8f5; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; margin-bottom: 18px; } .blog-arc-hero__title { font-family: 'Montserrat', sans-serif; font-size: clamp(38px, 5vw, 60px); font-weight: 900; color: #fff; line-height: 1.1; margin: 0 0 18px; text-align: left !important; } .blog-arc-hero__sub { font-family: 'Raleway', sans-serif; font-size: 17px; color: rgba(255,255,255,.78); line-height: 1.65; max-width: 600px; margin: 0; } /* ── Blog Archive Section ───────────────────────────────────────────────── */ .blog-arc-section { background: #f7f9fc; padding: 80px 40px; } .blog-arc-inner { max-width: 1240px; margin: 0 auto; } /* ── Blog Card Grid ─────────────────────────────────────────────────────── */ .blog-arc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } /* ── Blog Card ──────────────────────────────────────────────────────────── */ .blog-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 16px rgba(12,43,98,.07); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(12,43,98,.14); } .blog-card__img-link { display: block; text-decoration: none; overflow: hidden; } .blog-card__img { height: 220px; background-size: cover; background-position: center; position: relative; transition: transform .35s; } .blog-card:hover .blog-card__img { transform: scale(1.04); } .blog-card__cat { position: absolute; top: 16px; left: 16px; background: #0c2b62; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; } .blog-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; } .blog-card__meta { display: flex; align-items: center; gap: 8px; font-family: 'Raleway', sans-serif; font-size: 13px; color: #888; margin-bottom: 12px; } .blog-card__title { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 800; color: #0c2b62; line-height: 1.35; margin: 0 0 12px; text-align: left !important; } .blog-card__title a { color: inherit; text-decoration: none; transition: color .2s; } .blog-card__title a:hover { color: #1a4a9e; } .blog-card__excerpt { font-family: 'Raleway', sans-serif; font-size: 14px; color: #555; line-height: 1.65; margin: 0 0 20px; flex: 1; } .blog-card__cta { display: inline-flex; align-items: center; gap: 7px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #1a4a9e; text-decoration: none; letter-spacing: .3px; transition: gap .2s, color .2s; margin-top: auto; } .blog-card__cta:hover { gap: 11px; color: #0c2b62; } /* ── Arc Pagination ─────────────────────────────────────────────────────── */ .arc-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 64px; flex-wrap: wrap; } .arc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 10px; border: 2px solid #d5dff5; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: #0c2b62; text-decoration: none; transition: all .2s; background: #fff; } .arc-pagination .page-numbers:hover, .arc-pagination .page-numbers.current { background: #0c2b62; border-color: #0c2b62; color: #fff; } .arc-pagination .page-numbers.dots { border: none; background: transparent; color: #888; pointer-events: none; } /* ── Arc empty ──────────────────────────────────────────────────────────── */ .arc-empty { text-align: center; font-family: 'Raleway', sans-serif; font-size: 17px; color: #888; padding: 80px 0; } /* ═══════════════════════════════════════════════════════════════════════════ BLOG SINGLE (single.php) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Single Hero ────────────────────────────────────────────────────────── */ .blog-sp-hero { position: relative; min-height: 60vh; background-size: cover; background-position: center; display: flex; align-items: flex-end; overflow: hidden; } .blog-sp-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,18,46,.92) 0%, rgba(6,18,46,.55) 50%, rgba(6,18,46,.2) 100%); } .blog-sp-hero__content { position: relative; z-index: 2; width: 100%; max-width: 900px; margin: 0 auto; padding: 60px 40px 72px; } .blog-sp-hero__cat { display: inline-block; background: #c8a96e; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; text-decoration: none; margin-bottom: 16px; } .blog-sp-hero__title { font-family: 'Montserrat', sans-serif; font-size: clamp(28px, 4vw, 50px); font-weight: 900; color: #fff; line-height: 1.2; margin: 0 0 22px; text-align: left !important; } .blog-sp-hero__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .blog-sp-hero__meta-item { display: inline-flex; align-items: center; gap: 6px; font-family: 'Raleway', sans-serif; font-size: 14px; color: rgba(255,255,255,.78); } .blog-sp-hero__meta-sep { color: rgba(255,255,255,.4); } /* ── Layout: 2-col (article + sidebar) ─────────────────────────────────── */ .blog-sp-layout { background: #f7f9fc; padding: 72px 40px; } .blog-sp-layout__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; } /* ── Article Body ───────────────────────────────────────────────────────── */ .blog-sp-article { background: #fff; border-radius: 14px; box-shadow: 0 2px 20px rgba(12,43,98,.07); padding: 52px 56px; } .blog-sp-article__body { font-family: 'Raleway', sans-serif; font-size: 16.5px; line-height: 1.85; color: #2c3e50; } .blog-sp-article__body h2 { font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 800; color: #0c2b62; margin: 40px 0 14px; line-height: 1.3; text-align: left !important; } .blog-sp-article__body h3 { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; color: #1a4a9e; margin: 32px 0 12px; line-height: 1.35; text-align: left !important; } .blog-sp-article__body h4 { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700; color: #0c2b62; margin: 28px 0 10px; text-align: left !important; } .blog-sp-article__body p { margin: 0 0 22px; } .blog-sp-article__body ul, .blog-sp-article__body ol { padding-left: 26px; margin: 0 0 22px; } .blog-sp-article__body li { margin-bottom: 8px; } .blog-sp-article__body strong { color: #0c2b62; font-weight: 700; } .blog-sp-article__body a { color: #1a4a9e; text-decoration: underline; text-underline-offset: 3px; } .blog-sp-article__body blockquote { border-left: 4px solid #c8a96e; margin: 32px 0; padding: 16px 24px; background: #f0f4fb; border-radius: 0 8px 8px 0; font-style: italic; color: #444; font-size: 17px; } .blog-sp-article__body img { width: 100%; border-radius: 10px; margin: 28px 0; display: block; } .blog-sp-article__body table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15px; } .blog-sp-article__body th { background: #0c2b62; color: #fff; padding: 12px 16px; text-align: left; font-family: 'Montserrat', sans-serif; font-weight: 700; } .blog-sp-article__body td { padding: 11px 16px; border-bottom: 1px solid #e8eef6; } .blog-sp-article__body tr:nth-child(even) td { background: #f7f9fc; } /* ── Article Footer: Tags ───────────────────────────────────────────────── */ .blog-sp-article__footer { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e8eef6; } .blog-sp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .blog-sp-tags__label { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #666; margin-right: 4px; } .blog-sp-tag { display: inline-block; background: #f0f4fb; border: 1px solid #d5dff5; color: #0c2b62; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 100px; text-decoration: none; transition: background .2s, color .2s; } .blog-sp-tag:hover { background: #0c2b62; color: #fff; border-color: #0c2b62; } /* ── Sidebar ────────────────────────────────────────────────────────────── */ .blog-sp-sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 28px; } .blog-sp-widget { background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(12,43,98,.07); padding: 28px 24px; } .blog-sp-widget__title { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; color: #0c2b62; letter-spacing: .5px; text-transform: uppercase; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 2px solid #e8eef6; text-align: left !important; } .blog-sp-share-btns { display: flex; flex-direction: column; gap: 10px; } .blog-sp-share-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 8px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; transition: opacity .2s, transform .15s; } .blog-sp-share-btn:hover { opacity: .88; transform: translateX(3px); } .blog-sp-share-btn--wa { background: #25d366; color: #fff; } .blog-sp-share-btn--li { background: #0077b5; color: #fff; } .blog-sp-share-btn--fb { background: #1877f2; color: #fff; } .blog-sp-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .blog-sp-recent__item { display: flex; gap: 14px; align-items: flex-start; } .blog-sp-recent__img-link { flex-shrink: 0; } .blog-sp-recent__img { width: 72px; height: 72px; border-radius: 8px; background-size: cover; background-position: center; } .blog-sp-recent__info { display: flex; flex-direction: column; gap: 4px; } .blog-sp-recent__cat { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #c8a96e; } .blog-sp-recent__title { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #0c2b62; text-decoration: none; line-height: 1.4; transition: color .2s; } .blog-sp-recent__title:hover { color: #1a4a9e; } .blog-sp-recent__date { font-family: 'Raleway', sans-serif; font-size: 12px; color: #999; } .blog-sp-widget--cta { background: linear-gradient(135deg, #0c2b62 0%, #1a4a9e 100%); text-align: center; } .blog-sp-widget--cta .blog-sp-widget__title { color: #fff; border-color: rgba(255,255,255,.2); } .blog-sp-widget__cta-title { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 800; color: #fff; margin: 0 0 10px; text-align: center !important; } .blog-sp-widget__cta-body { font-family: 'Raleway', sans-serif; font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.6; margin: 0 0 20px; } .blog-sp-widget__cta-btn { display: inline-flex; align-items: center; gap: 7px; background: #c8a96e; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; padding: 12px 22px; border-radius: 8px; text-decoration: none; transition: background .2s, gap .2s; } .blog-sp-widget__cta-btn:hover { background: #b8934a; gap: 11px; } /* ── Related Posts ──────────────────────────────────────────────────────── */ .blog-sp-related { background: #fff; padding: 80px 40px; } .blog-sp-related__inner { max-width: 1240px; margin: 0 auto; } .blog-sp-related__header { margin-bottom: 48px; } .blog-sp-related__title { font-family: 'Montserrat', sans-serif; font-size: clamp(26px, 3vw, 36px); font-weight: 900; color: #0c2b62; margin: 8px 0 0; text-align: left !important; } /* ── Blog Responsive ────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .blog-sp-layout__inner { grid-template-columns: 1fr 300px; gap: 40px; } .blog-sp-article { padding: 40px 40px; } } @media (max-width: 900px) { .blog-sp-layout__inner { grid-template-columns: 1fr; } .blog-sp-sidebar { position: static; } .blog-sp-share-btns { flex-direction: row; flex-wrap: wrap; } .blog-sp-share-btn { flex: 1; justify-content: center; } } @media (max-width: 768px) { .blog-arc-hero__content { padding: 48px 24px 56px; } .blog-sp-hero__content { padding: 48px 24px 56px; } .blog-arc-section { padding: 56px 20px; } .blog-sp-layout { padding: 48px 20px; } .blog-sp-article { padding: 32px 24px; } .blog-sp-related { padding: 56px 20px; } } @media (max-width: 640px) { .blog-arc-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .blog-sp-hero { min-height: 50vh; } .blog-sp-hero__meta-sep { display: none; } }