/* ========================================================================== Imran Brothers, Global Styles File: assets/css/style.css Depends on: Bootstrap 5.3+ Namespace: tg- ========================================================================== */ /* Root, color tokens, and semantic aliases */ :root { /* Brand Colors */ --color-primary: #1f255c; --color-primary-dark: #1d235a; --color-secondary: #ffffff; /* Supporting */ --color-background: #f9f9f9; --color-accent: #b3b9ff; --color-border: #e0e0e0; /* Text */ --color-text: #1c1f2a; --color-text-soft: #4b5065; --color-muted: #7a819d; /* Feedback */ --color-success: #19a974; --color-warning: #ffb703; --color-danger: #e63946; --color-info: #219ebc; /* Surfaces */ --surface-0: #ffffff; --surface-1: #fcfcff; --surface-2: #f5f6ff; /* Effects */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12); /* Radii */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-full: 999px; /* Spacing scale */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: 3rem; /* Typography scale */ --font-sans: "Inter", "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: .78rem; --fs-sm: .9rem; --fs-base: 1rem; --fs-md: 1.1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem; --lh-tight: 1.15; --lh-base: 1.5; --lh-loose: 1.75; /* Transitions */ --ease: cubic-bezier(.2, .6, .2, 1); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 380ms; /* Container widths */ --container-narrow: 860px; --container: 1140px; --container-wide: 1320px; } /* Optional dark mode Add data-theme="dark" to or when needed */ html[data-theme="dark"] { --color-background: #0e1024; --color-text: #eaeaff; --color-text-soft: #c7c9e3; --color-muted: #9aa0c6; --surface-0: #14183a; --surface-1: #171c44; --surface-2: #1b2152; --color-border: rgba(255, 255, 255, 0.12); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4); } /* ========================================================================== Base reset and typography ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--color-text); background: var(--color-background); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); } a:hover { color: var(--color-primary-dark); } p { margin: 0 0 var(--space-6); color: var(--color-text-soft); } small, .tg-text-muted { color: var(--color-muted); } /* Headings */ h1, h2, h3, h4, h5, h6 { color: var(--color-primary); margin: 0 0 var(--space-5); line-height: var(--lh-tight); font-weight: 700; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-md); } h6 { font-size: var(--fs-base); } /* Lists */ ul, ol { padding-left: 1.25rem; margin: 0 0 var(--space-6); } /* Code */ code, pre, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-sm); } pre { background: var(--surface-2); padding: var(--space-5); border-radius: var(--radius-md); overflow: auto; } /* ========================================================================== Layout helpers ========================================================================== */ .tg-container { width: 100%; margin-inline: auto; padding-inline: var(--space-6); max-width: var(--container); } .tg-container.narrow { max-width: var(--container-narrow); } .tg-container.wide { max-width: var(--container-wide); } .tg-section { padding-block: clamp(2.5rem, 4vw, 5rem); } .tg-section-tight { padding-block: clamp(1.5rem, 3vw, 3rem); } /* Grid helper */ .tg-grid { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .tg-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .tg-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .tg-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== Surfaces and cards ========================================================================== */ .tg-surface { background: var(--surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .tg-card { background: var(--surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-7); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .tg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .tg-card-header { margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-3); } .tg-card-title { margin: 0; } /* ========================================================================== Buttons ========================================================================== */ .tg-btn { --btn-bg: var(--color-primary); --btn-fg: var(--color-secondary); --btn-bg-hover: var(--color-primary-dark); appearance: none; border: 1px solid transparent; background: var(--btn-bg); color: var(--btn-fg); padding: .65rem 1rem; font-weight: 600; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .tg-btn:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); } .tg-btn:active { transform: translateY(0); } .tg-btn-outline { --btn-fg: var(--color-primary); background: transparent; border-color: var(--color-primary); color: var(--btn-fg); } .tg-btn-outline:hover { background: var(--surface-2); } .tg-btn-ghost { background: transparent; color: var(--color-primary); box-shadow: none; border: none; } .tg-btn-ghost:hover { background: rgba(31, 37, 92, 0.08); } .tg-btn-light { --btn-bg: var(--surface-1); --btn-fg: var(--color-primary); border-color: var(--color-border); } .tg-btn-danger { --btn-bg: var(--color-danger); --btn-bg-hover: #c62836; } .tg-btn-success { --btn-bg: var(--color-success); --btn-bg-hover: #108a60; } .tg-btn-warning { --btn-bg: var(--color-warning); --btn-bg-hover: #e09a02; } .tg-btn-info { --btn-bg: var(--color-info); --btn-bg-hover: #197b9b; } .tg-btn-sm { padding: .45rem .75rem; font-size: var(--fs-sm); } .tg-btn-lg { padding: .85rem 1.25rem; font-size: var(--fs-md); border-radius: var(--radius-lg); } /* ========================================================================== Forms ========================================================================== */ .tg-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--space-6); } .tg-label { font-weight: 600; color: var(--color-text); } .tg-input, .tg-select, .tg-textarea { width: 100%; border: 1px solid var(--color-border); background: var(--surface-0); color: var(--color-text); border-radius: var(--radius-md); padding: .7rem .9rem; outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .tg-textarea { min-height: 140px; resize: vertical; } .tg-input::placeholder, .tg-textarea::placeholder { color: var(--color-muted); } .tg-input:focus, .tg-select:focus, .tg-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(31, 37, 92, 0.15); } .tg-help { color: var(--color-muted); font-size: var(--fs-sm); } .tg-error { color: var(--color-danger); font-size: var(--fs-sm); } /* Input with icon */ .tg-input-wrap { position: relative; } .tg-input-icon { position: absolute; inset: 0 auto 0 var(--space-5); display: grid; place-items: center; color: var(--color-muted); pointer-events: none; } .tg-input.has-icon { padding-left: 2.5rem; } /* Switch */ .tg-switch { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: #cfd3e6; position: relative; outline: none; cursor: pointer; transition: background-color var(--dur) var(--ease); } .tg-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease); } .tg-switch:checked { background: var(--color-primary); } .tg-switch:checked::after { transform: translateX(18px); } /* ========================================================================== Navigation and header ========================================================================== */ .tg-header { position: sticky; top: 0; z-index: 1030; background: var(--surface-0); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .tg-navbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: .75rem 0; } .tg-nav { display: flex; align-items: center; gap: var(--space-4); } .tg-nav a { padding: .5rem .75rem; border-radius: var(--radius-full); color: var(--color-text); font-weight: 600; } .tg-nav a:hover, .tg-nav a[aria-current="page"] { background: var(--surface-2); color: var(--color-primary); } /* ========================================================================== Hero and banners ========================================================================== */ .tg-hero { background: radial-gradient(1200px 600px at 10% -20%, var(--color-accent) 0%, transparent 60%), var(--surface-1); border-bottom: 1px solid var(--color-border); } .tg-hero .tg-hero-inner { padding-block: clamp(3rem, 6vw, 7rem); display: grid; gap: var(--space-7); } .tg-hero .tg-kicker { display: inline-flex; align-items: center; gap: .5rem; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); padding: .4rem .7rem; border-radius: var(--radius-full); font-weight: 700; letter-spacing: .3px; font-size: var(--fs-sm); } .tg-hero h1 { margin-bottom: var(--space-4); } .tg-hero p { font-size: var(--fs-md); } /* ========================================================================== Tables ========================================================================== */ .tg-table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border); background: var(--surface-0); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .tg-table th, .tg-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--color-border); } .tg-table thead th { background: var(--surface-2); color: var(--color-text); font-weight: 700; } .tg-table tbody tr:hover { background: rgba(31, 37, 92, 0.03); } /* ========================================================================== Alerts and badges ========================================================================== */ .tg-alert { padding: .9rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--surface-1); } .tg-alert-success { border-color: rgba(25,169,116,.25); background: rgba(25,169,116,.07); color: #0a6b4b; } .tg-alert-warning { border-color: rgba(255,183,3,.3); background: rgba(255,183,3,.09); color: #a77000; } .tg-alert-danger { border-color: rgba(230,57,70,.25); background: rgba(230,57,70,.08); color: #92202a; } .tg-alert-info { border-color: rgba(33,158,188,.25); background: rgba(33,158,188,.08); color: #145a6b; } .tg-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: var(--radius-full); font-weight: 700; font-size: var(--fs-xs); background: var(--surface-2); color: var(--color-primary); } /* ========================================================================== Modals, drawers, and overlays ========================================================================== */ .tg-modal { background: var(--surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-7); } .tg-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); } .tg-modal-actions { display: flex; gap: var(--space-4); justify-content: flex-end; } /* ========================================================================== Footer ========================================================================== */ .tg-footer { background: var(--surface-1); border-top: 1px solid var(--color-border); padding-block: var(--space-7); } .tg-footer .tg-meta { color: var(--color-muted); font-size: var(--fs-sm); } /* ========================================================================== Animations and effects ========================================================================== */ .tg-fade-in { opacity: 0; transform: translateY(8px); animation: tgFadeIn var(--dur-slow) var(--ease) forwards; } @keyframes tgFadeIn { to { opacity: 1; transform: translateY(0); } } /* Focus ring utility for better a11y */ .tg-focusable { outline: none; border-radius: var(--radius-md); } .tg-focusable:focus-visible { box-shadow: 0 0 0 3px rgba(31, 37, 92, 0.3); } /* ========================================================================== Utility classes ========================================================================== */ /* Spacing, margin (m-*) and padding (p-*) scales, a few common sizes */ .m-0 { margin: 0 !important; } .mt-1 { margin-top: var(--space-1) !important; } .mt-2 { margin-top: var(--space-2) !important; } .mt-3 { margin-top: var(--space-3) !important; } .mt-4 { margin-top: var(--space-4) !important; } .mt-5 { margin-top: var(--space-5) !important; } .mt-6 { margin-top: var(--space-6) !important; } .mb-0 { margin-bottom: 0 !important; } .mb-4 { margin-bottom: var(--space-4) !important; } .mb-6 { margin-bottom: var(--space-6) !important; } .p-0 { padding: 0 !important; } .p-4 { padding: var(--space-4) !important; } .p-6 { padding: var(--space-6) !important; } .p-7 { padding: var(--space-7) !important; } .tg-shadow-sm { box-shadow: var(--shadow-sm) !important; } .tg-shadow-md { box-shadow: var(--shadow-md) !important; } .tg-shadow-lg { box-shadow: var(--shadow-lg) !important; } .tg-rounded { border-radius: var(--radius-md) !important; } .tg-rounded-lg { border-radius: var(--radius-lg) !important; } .tg-rounded-full { border-radius: var(--radius-full) !important; } .tg-bg-primary { background: var(--color-primary) !important; color: var(--color-secondary) !important; } .tg-bg-surface { background: var(--surface-0) !important; } .tg-bg-accent { background: var(--color-accent) !important; } .tg-text-primary { color: var(--color-primary) !important; } .tg-text-soft { color: var(--color-text-soft) !important; } .tg-text-muted { color: var(--color-muted) !important; } .tg-text-inverse { color: var(--color-secondary) !important; } .tg-border { border: 1px solid var(--color-border) !important; } .tg-border-top { border-top: 1px solid var(--color-border) !important; } .tg-border-bottom { border-bottom: 1px solid var(--color-border) !important; } .tg-blur { backdrop-filter: saturate(120%) blur(8px); -webkit-backdrop-filter: saturate(120%) blur(8px); } /* Width helpers */ .w-100 { width: 100% !important; } .max-w-narrow { max-width: var(--container-narrow) !important; } .max-w { max-width: var(--container) !important; } .max-w-wide { max-width: var(--container-wide) !important; } /* Text overflow helpers */ .tg-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Cursor helpers */ .tg-cursor-pointer { cursor: pointer; } /* ========================================================================== Component patterns ========================================================================== */ /* Feature row */ .tg-feature { display: grid; gap: var(--space-6); align-items: center; } @media (min-width: 992px) { .tg-feature { grid-template-columns: 1.1fr .9fr; } } /* Stat blocks */ .tg-stat { background: var(--surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } .tg-stat .tg-stat-kicker { color: var(--color-muted); font-size: var(--fs-sm); } .tg-stat .tg-stat-value { font-size: var(--fs-2xl); font-weight: 800; color: var(--color-primary); } .tg-stat .tg-stat-desc { color: var(--color-text-soft); } /* Breadcrumbs */ .tg-breadcrumb { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; color: var(--color-muted); font-size: var(--fs-sm); } .tg-breadcrumb a { color: var(--color-primary); } .tg-breadcrumb .sep { opacity: .5; } /* Pagination */ .tg-pagination { display: flex; gap: .5rem; align-items: center; justify-content: center; } .tg-page { min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--surface-0); color: var(--color-text); font-weight: 600; transition: all var(--dur) var(--ease); } .tg-page:hover { background: var(--surface-2); } .tg-page.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-secondary); } /* ========================================================================== Tiny Slider and AOS small tweaks ========================================================================== */ .tns-outer { position: relative; } .tns-nav > [aria-selected="true"] { background: var(--color-primary); } .tns-nav > button { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); margin: 0 4px; } /* ========================================================================== Print helpers ========================================================================== */ @media print { .tg-no-print { display: none !important; } .tg-print-only { display: block !important; } body { background: #fff; } .tg-card, .tg-surface { box-shadow: none; } } /* ========================================================================== End ========================================================================== */ /* Maintenance section */ .tg-maintenance { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(1000px 600px at 10% -10%, rgba(179,185,255,.25), transparent 60%), radial-gradient(800px 500px at 110% 110%, rgba(31,37,92,.08), transparent 60%), var(--surface-1); } /* Floating blobs */ .tg-maint-bg .tg-blob { position: absolute; filter: blur(30px); opacity: .55; transform: translate3d(0,0,0); will-change: transform; pointer-events: none; } .tg-maint-bg .b1 { width: 360px; height: 360px; background: radial-gradient(circle at 30% 30%, var(--color-accent), rgba(179,185,255,.2)); left: -120px; top: -120px; animation: tgFloat 18s var(--ease) infinite; } .tg-maint-bg .b2 { width: 420px; height: 420px; background: radial-gradient(circle at 70% 70%, rgba(31,37,92,.35), rgba(31,37,92,.05)); right: -160px; bottom: -160px; animation: tgFloat 22s var(--ease) infinite reverse; } .tg-maint-bg .b3 { width: 260px; height: 260px; background: radial-gradient(circle at 50% 50%, rgba(179,185,255,.5), rgba(179,185,255,.08)); right: 20%; top: 10%; animation: tgFloat 26s var(--ease) infinite; } /* Soft gridlines */ .tg-maint-bg .tg-gridlines::before, .tg-maint-bg .tg-gridlines::after { content: ""; position: absolute; inset: -50% -50%; background-image: linear-gradient(to right, rgba(31,37,92,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(31,37,92,.06) 1px, transparent 1px); background-size: 44px 44px; transform: rotate(0.5deg); mask-image: radial-gradient(closest-side, rgba(0,0,0,.35), transparent 70%); pointer-events: none; } .tg-maint-bg .tg-gridlines::after { transform: rotate(-0.3deg); opacity: .6; } @keyframes tgFloat { 0% { transform: translateY(0px) translateX(0px) scale(1); } 50% { transform: translateY(-18px) translateX(8px) scale(1.03); } 100% { transform: translateY(0px) translateX(0px) scale(1); } } /* Glass card */ .tg-maint-card { position: relative; margin-inline: auto; max-width: 880px; padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.35); background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.58)); box-shadow: var(--shadow-lg); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); } .tg-maint-logo { height: 64px; width: auto; object-fit: contain; margin-bottom: var(--space-5); } /* Clock */ .tg-clock { display: grid; gap: .25rem; margin-bottom: var(--space-5); text-align: left; } .tg-clock-time { font-weight: 800; letter-spacing: .5px; font-size: clamp(1.75rem, 4.2vw, 3rem); color: var(--color-primary); text-shadow: 0 1px 0 rgba(0,0,0,.04); } .tg-clock-time .blink { animation: tgBlink 1.2s steps(2, jump-none) infinite; } @keyframes tgBlink { 50% { opacity: .25; } } .tg-clock-date { color: var(--color-text-soft); font-size: clamp(.95rem, 1.8vw, 1.05rem); } /* Title and actions */ .tg-maint-title { margin: 0 0 var(--space-6); font-size: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--color-text); line-height: var(--lh-tight); } .tg-maint-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } /* Motion respect */ @media (prefers-reduced-motion: reduce) { .tg-maint-bg .tg-blob, .tg-fade-in { animation: none !important; } } /* Preloader overlay */ .tg-preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; opacity: 1; pointer-events: all; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); background: transparent; } .tg-preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .tg-preloader-backdrop { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 10% -10%, rgba(179,185,255,.25), transparent 60%), radial-gradient(900px 600px at 110% 110%, rgba(31,37,92,.08), transparent 60%), var(--surface-1); } /* Card */ .tg-preloader-card { position: relative; width: min(92vw, 440px); padding: clamp(1.25rem, 3.5vw, 2rem); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.45); background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.66)); box-shadow: var(--shadow-lg); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); display: grid; gap: var(--space-5); justify-items: center; text-align: center; } .tg-preloader-logo { height: 48px; width: auto; object-fit: contain; } /* Spinner ring */ .tg-preloader-ring { position: relative; width: 84px; height: 84px; } .tg-preloader-ring .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--color-primary) 0deg, var(--color-accent) 120deg, rgba(31,37,92,.15) 340deg, rgba(31,37,92,.15) 360deg); mask: radial-gradient(farthest-side, transparent calc(50% - 8px), #000 calc(50% - 7px)); animation: tgSpin 1.1s linear infinite; box-shadow: 0 2px 8px rgba(0,0,0,.08) inset; } .tg-preloader-ring .dot { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: var(--color-primary); border-radius: 50%; transform-origin: -32px 0; animation: tgOrbit 1.1s linear infinite; filter: drop-shadow(0 2px 4px rgba(31,37,92,.35)); } @keyframes tgSpin { to { transform: rotate(360deg); } } @keyframes tgOrbit { to { transform: rotate(360deg) translateX(32px); } } .tg-preloader-text { font-weight: 700; color: var(--color-primary); letter-spacing: .2px; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .tg-preloader-ring .ring, .tg-preloader-ring .dot { animation: none; } } /* ========================================================= Imran Brothers Header and Navigation ========================================================= */ .ib-header { position: sticky; top: 0; z-index: 1030; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(224, 224, 224, 0.9); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: .5rem; } /* Logo */ .ib-brand { display: inline-flex; align-items: center; gap: .5rem; } .ib-logo { height: 52px; width: auto; object-fit: contain; } /* Contact button on desktop */ .ib-contact-btn { margin-left: var(--space-6); white-space: nowrap; } .ib-contact-icon { font-size: 1.05rem; } /* General nav structure */ .ib-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-5); } .ib-nav-list { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .ib-nav-item { position: relative; } .ib-nav-link, .ib-nav-link-sub { position: relative; display: inline-flex; align-items: center; gap: .25rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid transparent; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; color: var(--color-text); background: transparent; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-nav-link:hover, .ib-nav-link-sub:hover { background-color: rgba(31, 37, 92, 0.06); color: var(--color-primary); box-shadow: 0 0 0 1px rgba(31, 37, 92, 0.06); } .ib-nav-link-active { background: var(--color-primary); color: var(--color-secondary); box-shadow: var(--shadow-sm); } .ib-nav-link-active:hover { background: var(--color-primary-dark); } /* Chevron on Products */ .ib-nav-chevron { font-size: .8rem; transition: transform var(--dur) var(--ease); } /* Submenu */ .ib-nav-item-has-sub { padding-right: .25rem; } .ib-nav-item-has-sub .ib-nav-link-sub { border-radius: 999px; } .ib-submenu { position: absolute; top: calc(100% + .55rem); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 220px; margin: 0; padding: .5rem; list-style: none; background: #ffffff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid rgba(224, 224, 224, 0.95); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease); } .ib-submenu::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; background: #ffffff; border-left: 1px solid rgba(224, 224, 224, 0.95); border-top: 1px solid rgba(224, 224, 224, 0.95); transform-origin: center; transform: translateX(-50%) rotate(45deg); } .ib-submenu-link { display: block; padding: .45rem .7rem; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-soft); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-submenu-link:hover { background-color: rgba(31, 37, 92, 0.06); color: var(--color-primary); transform: translateX(2px); } /* Desktop hover for submenu */ @media (min-width: 992px) { .ib-nav-item-has-sub:hover > .ib-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .ib-nav-item-has-sub:hover .ib-nav-chevron { transform: rotate(180deg); } } /* Mobile styles */ .ib-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(31, 37, 92, 0.16); background: #ffffff; padding: 0; cursor: pointer; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-nav-toggle .bar { display: block; width: 18px; height: 2px; border-radius: 999px; background: var(--color-primary); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background-color var(--dur) var(--ease); } .ib-nav-toggle .bar + .bar { margin-top: 5px; } .ib-nav-toggle:hover { background: rgba(31, 37, 92, 0.04); box-shadow: var(--shadow-sm); } /* Transform icon when open */ .ib-header.is-open .ib-nav-toggle .bar:first-child { transform: translateY(3px) rotate(45deg); } .ib-header.is-open .ib-nav-toggle .bar:last-child { transform: translateY(-4px) rotate(-45deg); } /* Base layout changes for small screens */ @media (max-width: 991.98px) { .ib-header-inner { padding-block: .45rem; } .ib-nav-toggle { display: inline-flex; } .ib-nav { position: fixed; inset: 64px 0 auto 0; background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid rgba(224, 224, 224, 0.9); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12); transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); flex-direction: column; align-items: stretch; padding: .5rem var(--space-6) 1rem; gap: .35rem; } .ib-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .ib-nav-list { flex-direction: column; align-items: stretch; gap: .25rem; } .ib-nav-link, .ib-nav-link-sub { justify-content: space-between; width: 100%; border-radius: var(--radius-md); } .ib-contact-btn { align-self: stretch; justify-content: center; margin-left: 0; margin-top: .5rem; } /* Mobile submenu as accordion */ .ib-submenu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border-radius: 0; border: none; padding: 0 0 .35rem 0; margin-top: .15rem; } .ib-submenu::before { display: none; } .ib-nav-item-has-sub .ib-submenu { display: none; } .ib-nav-item-has-sub.is-open .ib-submenu { display: block; } .ib-nav-item-has-sub.is-open .ib-nav-chevron { transform: rotate(180deg); } } /* Scroll state styling */ .ib-header.is-scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07); border-color: rgba(224, 224, 224, 0.4); } /* Optional helper to prevent body scroll when menu open */ body.ib-nav-open { overflow: hidden; } /* ============================================ Contact Modal ============================================ */ .ib-contact-modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; } .ib-contact-modal.is-open { display: flex; } /* Backdrop */ .ib-contact-backdrop { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 10% -10%, rgba(179,185,255,.35), transparent 60%), radial-gradient(900px 600px at 110% 110%, rgba(31,37,92,.18), transparent 60%), rgba(12, 14, 32, 0.72); } /* Dialog */ .ib-contact-dialog { position: relative; width: min(100vw - 2.5rem, 520px); background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.98)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid rgba(224, 224, 224, 0.9); padding: clamp(1.4rem, 3vw, 1.9rem); z-index: 1; display: flex; flex-direction: column; gap: var(--space-5); } /* Close button */ .ib-contact-close { position: absolute; top: .65rem; right: .65rem; width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(31,37,92,.12); background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ib-contact-close i { font-size: .8rem; color: var(--color-text-soft); } .ib-contact-close:hover { background-color: rgba(31,37,92,.04); box-shadow: var(--shadow-sm); } /* Header */ .ib-contact-header { padding-right: 2.2rem; } .ib-contact-title { margin: 0 0 .25rem; font-size: var(--fs-xl); color: var(--color-primary); } .ib-contact-subtitle { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); } /* Form layout */ .ib-contact-form { display: flex; flex-direction: column; gap: var(--space-4); } .ib-field { display: flex; flex-direction: column; gap: .35rem; } .ib-label { font-weight: 600; color: var(--color-text); font-size: var(--fs-sm); } .ib-input, .ib-textarea { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--color-border); background-color: #ffffff; padding: .65rem .85rem; font-size: var(--fs-base); color: var(--color-text); outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } .ib-input::placeholder, .ib-textarea::placeholder { color: var(--color-muted); font-size: var(--fs-sm); } .ib-input:focus, .ib-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(31, 37, 92, 0.2); background-color: #ffffff; } .ib-textarea { min-height: 120px; resize: vertical; } /* Help and error */ .ib-help { font-size: var(--fs-xs); color: var(--color-muted); } .ib-error { font-size: var(--fs-xs); color: var(--color-danger); min-height: 1em; } /* Row between error and counter */ .ib-row-between { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .ib-char-count { font-size: var(--fs-xs); color: var(--color-muted); } /* Actions */ .ib-contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-3); } .ib-contact-submit { min-width: 120px; } .ib-contact-cancel { font-size: var(--fs-sm); } /* Status line */ .ib-contact-status { margin-top: .4rem; font-size: var(--fs-sm); min-height: 1.2em; } .ib-status-info { color: var(--color-text-soft); } .ib-status-success { color: var(--color-success); } .ib-status-error { color: var(--color-danger); } /* Body scroll lock when modal open */ body.ib-contact-open { overflow: hidden; } /* ============================================ Hero Slider ============================================ */ .ib-hero-section { padding-block: clamp(2rem, 5vw, 4rem); background: var(--surface-1); } .ib-hero-shell { position: relative; } .ib-hero-slider { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: linear-gradient( 130deg, rgba(31, 37, 92, 0.04), rgba(179, 185, 255, 0.1) ); box-shadow: var(--shadow-md); min-height: 260px; padding-bottom: 0.75rem; /* extra space under content */ } /* Track and slides */ .ib-hero-track { position: relative; } .ib-hero-slide { position: absolute; inset: 0; opacity: 0; transform: translateX(8%); pointer-events: none; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .ib-hero-slide.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; } .ib-hero-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; gap: var(--space-6); padding: clamp(1.75rem, 4vw, 1.75rem); min-height: clamp(260px, 48vh, 420px); } /* Left text column */ .ib-hero-text { align-self: center; max-width: 520px; } .ib-hero-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6rem; } .ib-hero-title { margin: 0 0 .5rem; font-size: clamp(1.35rem, 2.4vw, 1.9rem); color: var(--color-primary); line-height: var(--lh-tight); position: relative; } /* Animated underline for title */ .ib-hero-title::after { content: ""; position: absolute; left: 0; bottom: -.35rem; width: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transition: width .6s var(--ease); } .ib-hero-slide.is-active .ib-hero-title::after { width: 72px; } .ib-hero-desc { margin: .9rem 0 0; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Right image column */ .ib-hero-media { position: relative; min-height: 180px; } .ib-hero-image { position: absolute; /* add breathing space, especially at the bottom */ inset: 0.25rem 0.25rem 0.9rem 0.25rem; border-radius: clamp(var(--radius-md), 1.5vw, var(--radius-lg)); background-size: cover; background-position: center; background-repeat: no-repeat; transform-origin: center; transform: scale(1.02); box-shadow: var(--shadow-md); transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur) var(--ease); } /* Example backgrounds, replace with actual images */ .ib-hero-image-1 { background-image: url("../img/pic/1.png"); } .ib-hero-image-2 { background-image: url("../img/pic/2.png"); } .ib-hero-image-3 { background-image: url("../img/pic/3.png"); } /* Active zoom effect */ .ib-hero-slide.is-active .ib-hero-image { transform: scale(1); } /* Arrows */ .ib-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(31, 37, 92, 0.15); background: rgba(255, 255, 255, 0.95); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: var(--shadow-sm); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-hero-arrow i { font-size: .9rem; color: var(--color-primary); } .ib-hero-arrow:hover { background: rgba(31, 37, 92, 0.04); box-shadow: var(--shadow-md); } .ib-hero-prev { left: 1rem; } .ib-hero-next { right: 1rem; } /* Dots */ .ib-hero-dots { position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(255,255,255,0.9); box-shadow: 0 8px 18px rgba(0,0,0,0.12); } .ib-hero-dot { width: 9px; height: 9px; border-radius: 999px; border: 1px solid rgba(31,37,92,0.45); background: transparent; padding: 0; cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease), width var(--dur) var(--ease); } .ib-hero-dot.is-active { width: 22px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-color: transparent; } /* Responsive behavior */ @media (max-width: 991.98px) { .ib-hero-layout { grid-template-columns: minmax(0, 1fr); min-height: 260px; } .ib-hero-media { order: -1; min-height: 180px; } .ib-hero-section { padding-top: 1rem; } } @media (max-width: 575.98px) { .ib-hero-slider { border-radius: var(--radius-md); } .ib-hero-layout { padding: 1.25rem 1.2rem 1.3rem; } .ib-hero-media { min-height: 160px; } .ib-hero-arrow { display: none; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .ib-hero-slide, .ib-hero-image { transition: none; } } /* ============================================ Pocketing Categories Slider ============================================ */ .ib-cat-section { padding-block: clamp(2rem, 4vw, 3rem); background: var(--surface-1); } .ib-cat-header { text-align: center; max-width: 720px; margin: 0 auto var(--space-5); } .ib-cat-title { margin: 0 0 .4rem; font-size: clamp(1.4rem, 2.5vw, 1.9rem); color: var(--color-primary); } .ib-cat-subtitle { margin: 0; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Slider wrapper */ .ib-cat-slider { position: relative; margin-top: var(--space-3); padding-inline: 2.4rem; } .ib-cat-track-wrap { overflow: hidden; } .ib-cat-track { display: flex; transition: transform var(--dur-slow) var(--ease); will-change: transform; } /* Cards */ .ib-cat-card { flex: 0 0 calc(100% / 3); padding: 1rem 1.1rem 1.2rem; box-sizing: border-box; border-radius: var(--radius-lg); background: #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .5rem; opacity: 0.94; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .ib-cat-card:hover { opacity: 1; transform: translateY(0); box-shadow: var(--shadow-md); border-color: rgba(31, 37, 92, 0.25); } /* Icon circle */ .ib-cat-icon { width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, var(--color-accent), rgba(179,185,255,.12)); color: var(--color-primary); box-shadow: 0 6px 14px rgba(31,37,92,0.18); margin-bottom: .25rem; } .ib-cat-icon i { font-size: 1.1rem; } .ib-cat-name { margin: 0; font-size: var(--fs-md); color: var(--color-primary); } .ib-cat-desc { margin: 0; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Arrows */ .ib-cat-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(31,37,92,.16); background: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: var(--shadow-sm); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-cat-arrow i { font-size: .9rem; color: var(--color-primary); } .ib-cat-arrow:hover { background: rgba(31,37,92,.04); box-shadow: var(--shadow-md); } .ib-cat-prev { left: 0; } .ib-cat-next { right: 0; } /* Dots */ .ib-cat-dots { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: var(--space-3); } .ib-cat-dot { width: 8px; height: 8px; border-radius: 999px; border: 1px solid rgba(31,37,92,.45); background: transparent; cursor: pointer; padding: 0; transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-cat-dot.is-active { width: 20px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-color: transparent; } /* Responsive: 2 cards per view on md, 1 on xs */ @media (max-width: 991.98px) { .ib-cat-slider { padding-inline: 1.4rem; } .ib-cat-card { flex: 0 0 calc(100% / 2); } } @media (max-width: 575.98px) { .ib-cat-slider { padding-inline: .6rem; } .ib-cat-card { flex: 0 0 100%; } .ib-cat-arrow { display: none; } } /* ============================================ About Us Section ============================================ */ .ib-about-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: var(--surface-1); } .ib-about-shell { position: relative; } .ib-about-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); align-items: center; } /* Text side */ .ib-about-text { max-width: 620px; } .ib-about-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6rem; } .ib-about-title { margin: 0 0 .75rem; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); position: relative; } /* Simple underline animation */ .ib-about-title::after { content: ""; position: absolute; left: 0; bottom: -.35rem; width: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); animation: ibTitleUnderline .9s var(--ease) .25s forwards; } @keyframes ibTitleUnderline { from { width: 0; } to { width: 84px; } } .ib-about-body { margin: .4rem 0; font-size: var(--fs-sm); color: var(--color-text); text-align: justify; } .ib-about-body-muted { color: var(--color-text-soft); text-align: justify; } /* Badges row */ .ib-about-badges { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; } .ib-about-badge { padding: .45rem .8rem; border-radius: 999px; background: #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); display: inline-flex; flex-direction: column; min-width: 120px; } .ib-badge-label { font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: .08em; } .ib-badge-value { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); } /* More link */ .ib-about-actions { margin-top: 1.3rem; } .ib-about-more { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); text-decoration: none; padding-bottom: .1rem; border-bottom: 1px solid rgba(31, 37, 92, 0.4); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-about-more::after { content: "›"; font-size: 1.1em; } .ib-about-more:hover { color: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateX(2px); } /* Media side */ .ib-about-media { display: flex; justify-content: center; } .ib-about-card { position: relative; width: min(100%, 420px); min-height: 420px; padding: 1.3rem 1.3rem 1.5rem; border-radius: 24px; background: radial-gradient(circle at 0% 0%, rgba(179,185,255,.45), transparent 55%), radial-gradient(circle at 120% 120%, rgba(31,37,92,.18), transparent 60%), #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; } /* Photos */ .ib-about-photo { position: absolute; border-radius: 20px; background-size: cover; background-position: center; background-repeat: no-repeat; } /* Main big image */ .ib-about-photo-main { inset: 1.4rem 1.4rem 3.6rem 1.4rem; background-image: url("../img/pic/10.png"); } /* Small overlay image */ .ib-about-photo-overlay { width: 46%; height: 38%; right: 1.1rem; bottom: 1.1rem; border-radius: 18px; box-shadow: 0 10px 24px rgba(0,0,0,0.18); background-image: url("../img/pic/12.png"); } /* Chip label */ .ib-about-chip { position: absolute; left: 1.75rem; bottom: 1.3rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); } .ib-about-chip i { font-size: .9rem; } /* Stat corner */ .ib-about-stat { position: absolute; top: 1.3rem; right: 1.3rem; padding: .5rem .8rem; border-radius: 16px; background: rgba(12, 14, 32, 0.86); color: #ffffff; text-align: right; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24); } .ib-about-stat-number { font-size: 1.3rem; font-weight: 700; line-height: 1.1; } .ib-about-stat-label { font-size: var(--fs-xs); opacity: .8; } /* Responsive */ @media (max-width: 991.98px) { .ib-about-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .ib-about-text { order: 2; } .ib-about-media { order: 1; } } @media (max-width: 575.98px) { .ib-about-card { border-radius: 20px; padding: 1.1rem 1.1rem 1.3rem; } .ib-about-photo-main { inset: 1.15rem 1.15rem 3.3rem 1.15rem; } .ib-about-chip { left: 1.2rem; bottom: 1.1rem; } .ib-about-stat { top: 1.1rem; right: 1.1rem; } } /* ============================================ Pocketing Products Grid ============================================ */ .ib-pocket-products-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #f7f8fc; } .ib-pocket-products-header { text-align: center; max-width: 760px; margin: 0 auto var(--space-5); } .ib-pocket-products-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; } .ib-pocket-products-title { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); position: relative; } /* Animated underline */ .ib-pocket-products-title::after { content: ""; position: absolute; left: 50%; bottom: -.35rem; transform: translateX(-50%); width: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); animation: ibPocketProductsUnderline .7s var(--ease) .3s forwards; } @keyframes ibPocketProductsUnderline { from { width: 0; } to { width: 110px; } } .ib-pocket-products-subtitle { margin: .2rem auto 0; font-size: var(--fs-sm); color: var(--color-text-soft); max-width: 640px; } /* Grid layout */ .ib-pocket-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } /* Card */ .ib-pocket-product-card { position: relative; border-radius: 22px; background: #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06); padding: .95rem .95rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; overflow: hidden; transform: translateY(2px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } /* Soft gradient glow on top right */ .ib-pocket-product-card::before { content: ""; position: absolute; inset: -40% -40% auto auto; background: radial-gradient(circle at 100% 0, rgba(179,185,255,.25), transparent 55%); opacity: .9; pointer-events: none; } .ib-pocket-product-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); border-color: rgba(31, 37, 92, 0.25); } /* Header row */ .ib-pocket-product-header { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; } .ib-pocket-product-tag { width: 28px; height: 28px; border-radius: 999px; background: var(--color-primary); color: var(--color-secondary); font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(31,37,92,.4); } .ib-pocket-product-name { margin: 0; font-size: var(--fs-md); color: var(--color-primary); } /* Image area */ .ib-pocket-product-media { position: relative; border-radius: 18px; overflow: hidden; background: #edf0ff; min-height: 150px; } .ib-pocket-product-image { width: 100%; height: 100%; min-height: 150px; object-fit: cover; display: block; transform: scale(1.02); transition: transform var(--dur-slow) var(--ease); } .ib-pocket-product-card:hover .ib-pocket-product-image { transform: scale(1.06); } /* Body text */ .ib-pocket-product-body { position: relative; z-index: 1; font-size: var(--fs-sm); color: var(--color-text-soft); display: flex; flex-direction: column; gap: .15rem; } .ib-pocket-product-body p { margin: 0; } /* Footer and button */ .ib-pocket-product-footer { margin-top: .5rem; display: flex; justify-content: flex-end; } .ib-pocket-product-detail { min-width: 114px; font-size: var(--fs-sm); } /* Responsive */ @media (max-width: 991.98px) { .ib-pocket-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .ib-pocket-products-grid { grid-template-columns: minmax(0, 1fr); } .ib-pocket-products-section { padding-block: 2rem; } } /* ============================================ Clients Section ============================================ */ .ib-clients-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #ffffff; } .ib-clients-header { text-align: center; max-width: 760px; margin: 0 auto var(--space-5); } .ib-clients-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; } .ib-clients-title { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); position: relative; } /* Animated underline */ .ib-clients-title::after { content: ""; position: absolute; left: 50%; bottom: -.35rem; transform: translateX(-50%); width: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); animation: ibClientsUnderline .7s var(--ease) .3s forwards; } @keyframes ibClientsUnderline { from { width: 0; } to { width: 120px; } } .ib-clients-subtitle { margin: .2rem auto 0; font-size: var(--fs-sm); color: var(--color-text-soft); max-width: 640px; } /* Slider layout */ .ib-clients-slider { position: relative; margin-top: var(--space-3); padding-inline: 2.8rem; } .ib-clients-track-wrap { overflow: hidden; } .ib-clients-track { display: flex; transition: transform var(--dur-slow) var(--ease); will-change: transform; } /* Client card */ .ib-client-card { flex: 0 0 calc(100% / 4); box-sizing: border-box; padding: .9rem .9rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .55rem; border-radius: 20px; background: #f8f9ff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06); transform: translateY(2px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); text-align: center; } /* Soft highlight */ .ib-client-card::before { content: ""; position: absolute; inset: -30% -30% auto auto; background: radial-gradient(circle at 100% 0, rgba(179,185,255,.35), transparent 55%); opacity: .9; pointer-events: none; } .ib-client-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12); border-color: rgba(31, 37, 92, 0.28); background: #ffffff; } /* Logo */ .ib-client-logo-wrap { width: 90px; height: 54px; border-radius: 14px; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .ib-client-logo { max-width: 80px; max-height: 44px; width: auto; height: auto; object-fit: contain; } /* Name */ .ib-client-name { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); } /* Arrows */ .ib-clients-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(31,37,92,.16); background: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: var(--shadow-sm); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-clients-arrow i { font-size: .9rem; color: var(--color-primary); } .ib-clients-arrow:hover { background: rgba(31,37,92,.04); box-shadow: var(--shadow-md); } .ib-clients-prev { left: 0; } .ib-clients-next { right: 0; } /* Dots */ .ib-clients-dots { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: var(--space-3); } .ib-clients-dot { width: 8px; height: 8px; border-radius: 999px; border: 1px solid rgba(31,37,92,.45); background: transparent; cursor: pointer; padding: 0; transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-clients-dot.is-active { width: 20px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-color: transparent; } /* Responsive: 2 per view on md, 1 on xs */ @media (max-width: 991.98px) { .ib-clients-slider { padding-inline: 1.6rem; } .ib-client-card { flex: 0 0 calc(100% / 2); } } @media (max-width: 575.98px) { .ib-clients-slider { padding-inline: .8rem; } .ib-client-card { flex: 0 0 100%; } .ib-clients-arrow { display: none; } } /* ============================================ Domestic Clients Section ============================================ */ .ib-domestic-clients-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #f5f7ff; } .ib-domestic-clients-header { text-align: center; max-width: 760px; margin: 0 auto var(--space-5); } .ib-domestic-clients-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(31, 37, 92, 0.08); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; } .ib-domestic-clients-title { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); position: relative; } /* Animated underline, slightly wider */ .ib-domestic-clients-title::after { content: ""; position: absolute; left: 50%; bottom: -.35rem; transform: translateX(-50%); width: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); animation: ibDomesticClientsUnderline .7s var(--ease) .3s forwards; } @keyframes ibDomesticClientsUnderline { from { width: 0; } to { width: 140px; } } .ib-domestic-clients-subtitle { margin: .2rem auto 0; font-size: var(--fs-sm); color: var(--color-text-soft); max-width: 640px; } /* Slider layout */ .ib-domestic-clients-slider { position: relative; margin-top: var(--space-3); padding-inline: 2.8rem; } .ib-domestic-clients-track-wrap { overflow: hidden; } .ib-domestic-clients-track { display: flex; transition: transform var(--dur-slow) var(--ease); will-change: transform; } /* Client card */ .ib-domestic-client-card { position: relative; flex: 0 0 calc(100% / 4); box-sizing: border-box; padding: 1rem 1rem 1.1rem; display: flex; flex-direction: column; align-items: center; gap: .55rem; border-radius: 22px; background: #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08); transform: translateY(2px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); text-align: center; } /* Soft diagonal highlight */ .ib-domestic-client-card::before { content: ""; position: absolute; inset: -26% auto auto -26%; background: radial-gradient(circle at 0 0, rgba(179,185,255,.4), transparent 55%); opacity: .9; pointer-events: none; } .ib-domestic-client-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14); border-color: rgba(31, 37, 92, 0.28); } /* Logo holder */ .ib-domestic-client-logo-wrap { width: 96px; height: 58px; border-radius: 16px; background: #f8f9ff; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .ib-domestic-client-logo { max-width: 84px; max-height: 46px; width: auto; height: auto; object-fit: contain; } /* Name */ .ib-domestic-client-name { font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); } /* Arrows */ .ib-domestic-clients-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(31,37,92,.16); background: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: var(--shadow-sm); transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-domestic-clients-arrow i { font-size: .9rem; color: var(--color-primary); } .ib-domestic-clients-arrow:hover { background: rgba(31,37,92,.04); box-shadow: var(--shadow-md); } .ib-domestic-clients-prev { left: 0; } .ib-domestic-clients-next { right: 0; } /* Dots */ .ib-domestic-clients-dots { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: var(--space-3); } .ib-domestic-clients-dot { width: 8px; height: 8px; border-radius: 999px; border: 1px solid rgba(31,37,92,.45); background: transparent; cursor: pointer; padding: 0; transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-domestic-clients-dot.is-active { width: 20px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-color: transparent; } /* Responsive: 2 per view on md, 1 on xs */ @media (max-width: 991.98px) { .ib-domestic-clients-slider { padding-inline: 1.6rem; } .ib-domestic-client-card { flex: 0 0 calc(100% / 2); } } @media (max-width: 575.98px) { .ib-domestic-clients-slider { padding-inline: .8rem; } .ib-domestic-client-card { flex: 0 0 100%; } .ib-domestic-clients-arrow { display: none; } } /* ============================================ Address and Contact Section ============================================ */ .ib-address-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #ffffff; } .ib-address-header { text-align: center; max-width: 780px; margin: 0 auto var(--space-5); } .ib-address-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; } .ib-address-title { margin: 0 0 .5rem; font-size: clamp(1.45rem, 2.6vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); position: relative; } /* Animated underline */ .ib-address-title::after { content: ""; position: absolute; left: 50%; bottom: -.35rem; transform: translateX(-50%); width: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); animation: ibAddressUnderline .7s var(--ease) .3s forwards; } @keyframes ibAddressUnderline { from { width: 0; } to { width: 130px; } } .ib-address-subtitle { margin: .2rem auto 0; font-size: var(--fs-sm); color: var(--color-text-soft); max-width: 640px; } /* Grid layout */ .ib-address-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } /* Card */ .ib-address-card { position: relative; border-radius: 22px; background: #f8f9ff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06); padding: 1.1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; overflow: hidden; transform: translateY(2px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } /* Subtle gradient glow */ .ib-address-card::before { content: ""; position: absolute; inset: -30% -30% auto auto; background: radial-gradient(circle at 100% 0, rgba(179,185,255,.3), transparent 55%); opacity: .9; pointer-events: none; } .ib-address-card:hover, .ib-address-card.ib-address-card-hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14); border-color: rgba(31, 37, 92, 0.25); background: #ffffff; } /* Icon */ .ib-address-icon-wrap { display: flex; justify-content: flex-start; } .ib-address-icon-circle { width: 40px; height: 40px; border-radius: 999px; background: radial-gradient(circle at 0 0, var(--color-accent), var(--color-primary)); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(31,37,92,.4); color: var(--color-secondary); animation: ibAddressIconPulse 3s ease-in-out infinite; } .ib-address-icon-circle i { font-size: 1.1rem; } @keyframes ibAddressIconPulse { 0%, 100% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-2px) scale(1.04); opacity: .96; } } /* Card title */ .ib-address-card-title { margin: .35rem 0 .2rem; font-size: var(--fs-md); color: var(--color-primary); } /* Body */ .ib-address-card-body { font-size: var(--fs-sm); color: var(--color-text); display: flex; flex-direction: column; gap: .35rem; } .ib-address-text { margin: 0; text-align: justify; } /* Contacts */ .ib-address-contact { margin-bottom: .25rem; } .ib-address-contact-name { font-weight: 600; color: var(--color-primary); margin-bottom: .1rem; } .ib-address-contact-line { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--color-text-soft); } .ib-address-contact-line i { font-size: .9rem; opacity: .9; } /* Links */ .ib-address-link { text-decoration: none; color: var(--color-text-soft); position: relative; padding-bottom: 1px; border-bottom: 1px dashed rgba(31,37,92,.25); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ib-address-link:hover { color: var(--color-primary); border-color: var(--color-primary); } /* Responsive */ @media (max-width: 1199.98px) { .ib-address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .ib-address-grid { grid-template-columns: minmax(0, 1fr); } .ib-address-section { padding-block: 2rem; } } /* ============================================ We Are At Work Gallery ============================================ */ .ib-work-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #f7f8fc; } .ib-work-header { text-align: center; max-width: 780px; margin: 0 auto var(--space-5); } .ib-work-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; } .ib-work-title { margin: 0 0 .5rem; font-size: clamp(1.45rem, 2.6vw, 2.1rem); color: var(--color-primary); line-height: var(--lh-tight); position: relative; } /* Animated underline */ .ib-work-title::after { content: ""; position: absolute; left: 50%; bottom: -.35rem; transform: translateX(-50%); width: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); animation: ibWorkUnderline .7s var(--ease) .3s forwards; } @keyframes ibWorkUnderline { from { width: 0; } to { width: 132px; } } .ib-work-subtitle { margin: .2rem auto 0; font-size: var(--fs-sm); color: var(--color-text-soft); max-width: 640px; } /* We are at work - gallery grid version */ /* Section */ .ib-work-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: radial-gradient(circle at 0 0, rgba(179,185,255,.06), transparent 55%), #f7f8fc; } /* Header */ .ib-work-header { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: clamp(1.5rem, 3vw, 2rem); } .ib-work-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .85rem; border-radius: 999px; background: rgba(31,37,92,0.04); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-work-title { margin: .4rem 0 .25rem; font-size: clamp(1.5rem, 2.3vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-work-subtitle { margin: 0; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Grid layout: 3 columns desktop */ .ib-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } /* Card */ .ib-work-card { border-radius: 20px; background: #ffffff; border: 1px solid rgba(224,224,224,0.95); box-shadow: 0 14px 30px rgba(0,0,0,0.10); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ib-work-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.14); border-color: rgba(31,37,92,0.18); } /* Media */ .ib-work-media { position: relative; width: 100%; overflow: hidden; } /* Maintain aspect ratio */ .ib-work-media::before { content: ""; display: block; aspect-ratio: 4 / 3; } /* Real image, simple */ .ib-work-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-work-card:hover .ib-work-img { transform: scale(1.06); filter: brightness(1.04); } /* Overlay chip on image */ .ib-work-overlay { position: absolute; left: .7rem; right: auto; bottom: .7rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(12,14,32,0.85); color: #ffffff; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); backdrop-filter: blur(6px); z-index: 2; } .ib-work-overlay i { font-size: .9rem; } /* Body under image */ .ib-work-body { padding: .6rem .85rem .75rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .ib-work-label { font-size: var(--fs-xs); color: var(--color-text-soft); } .ib-work-counter { font-size: var(--fs-xs); color: var(--color-primary); font-weight: 600; } /* Actions */ .ib-work-actions { text-align: center; margin-top: 1.3rem; } .ib-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem 1.3rem; border-radius: 999px; border: 1px solid rgba(31,37,92,0.25); background: #ffffff; color: var(--color-primary); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ib-btn-secondary:hover { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); box-shadow: 0 12px 26px rgba(31,37,92,0.30); transform: translateY(-1px); } .ib-btn-secondary:disabled { opacity: .6; cursor: default; box-shadow: none; transform: none; } /* Responsive columns */ @media (max-width: 991.98px) { .ib-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .ib-work-grid { grid-template-columns: minmax(0, 1fr); } } /* Compact factory view section with four static images */ .ib-work-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: radial-gradient(circle at 0 0, rgba(179,185,255,.06), transparent 55%), #f7f8fc; } /* Header kept similar to earlier styling */ .ib-work-header { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: clamp(1.4rem, 3vw, 1.9rem); } .ib-work-kicker { display: inline-flex; align-items: center; justify-content: center; padding: .18rem .9rem; border-radius: 999px; background: rgba(31, 37, 92, 0.04); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .ib-work-title { margin: .45rem 0 .25rem; font-size: clamp(1.5rem, 2.3vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-work-title a { color: inherit; text-decoration: none; } .ib-work-title a:hover { text-decoration: underline; } .ib-work-subtitle { margin: 0; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Four image grid */ .ib-work-grid-simple { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } /* Card */ .ib-work-thumb { margin: 0; border-radius: 18px; background: #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .ib-work-thumb-inner { position: relative; width: 100%; overflow: hidden; } /* Maintain aspect ratio for all images */ .ib-work-thumb-inner::before { content: ""; display: block; aspect-ratio: 4 / 3; } /* Image */ .ib-work-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-work-thumb:hover .ib-work-thumb-img { transform: scale(1.06); filter: brightness(1.04); } /* Caption */ .ib-work-thumb-caption { padding: .6rem .8rem .7rem; font-size: var(--fs-xs); color: var(--color-primary); font-weight: 600; border-top: 1px solid rgba(224, 224, 224, 0.85); } /* Hover lift */ .ib-work-thumb:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14); border-color: rgba(31, 37, 92, 0.16); } /* Responsive behavior */ @media (max-width: 1199.98px) { .ib-work-grid-simple { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .ib-work-grid-simple { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .ib-work-grid-simple { grid-template-columns: minmax(0, 1fr); } } /* ============================================ Footer ============================================ */ .ib-footer { background: #0d0f21; color: rgba(255, 255, 255, 0.86); padding-top: 2.4rem; padding-bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: var(--fs-sm); } .ib-footer-main { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1.8fr); gap: var(--space-4); padding-bottom: 1.8rem; } /* Brand column */ .ib-footer-logo-wrap { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .ib-footer-logo { width: 46px; height: auto; object-fit: contain; } .ib-footer-logo-text { font-weight: 700; color: #ffffff; font-size: .95rem; } .ib-footer-desc { margin: 0; color: rgba(255, 255, 255, 0.7); line-height: 1.55; } /* Column titles */ .ib-footer-heading { font-size: .9rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, 0.85); margin: .1rem 0 .7rem; } /* Links list */ .ib-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; } .ib-footer-links a { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: var(--fs-sm); position: relative; padding: .05rem 0; } .ib-footer-links a::before { content: ""; width: 8px; height: 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.26); transform: scale(.8); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ib-footer-links a:hover::before { transform: scale(1); background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); border-color: transparent; } .ib-footer-links a:hover { color: #ffffff; } /* Contact and social */ .ib-footer-contact-line { display: flex; align-items: flex-start; gap: .4rem; margin-bottom: .25rem; color: rgba(255, 255, 255, 0.7); } .ib-footer-contact-line i { font-size: .9rem; margin-top: .12rem; color: rgba(255, 255, 255, 0.8); } .ib-footer-contact-line a { color: rgba(255, 255, 255, 0.78); text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.35); padding-bottom: 1px; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ib-footer-contact-line a:hover { color: #ffffff; border-color: #ffffff; } .ib-footer-social { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; } .ib-footer-social-link { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ib-footer-social-link i { font-size: .9rem; } .ib-footer-social-link:hover { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #ffffff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55); } /* Bottom bar */ .ib-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: .2rem; padding-block: .65rem; background: #090a16; } .ib-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: .7rem; } .ib-footer-copy { font-size: .8rem; color: rgba(255, 255, 255, 0.6); } /* Back to top button */ .ib-footer-top { display: inline-flex; align-items: center; gap: .35rem; padding: .16rem .7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: rgba(255, 255, 255, 0.82); font-size: .78rem; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .ib-footer-top i { font-size: .85rem; } .ib-footer-top:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.8); transform: translateY(-1px); } /* Responsive layout */ @media (max-width: 991.98px) { .ib-footer-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr); } } @media (max-width: 767.98px) { .ib-footer-main { grid-template-columns: minmax(0, 1fr); } .ib-footer-col-brand { order: 1; } .ib-footer-col-links { order: 2; } .ib-footer-col-contact { order: 3; } .ib-footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; } } /* ============================================ Breadcrumb Section ============================================ */ .ib-breadcrumb-section { position: relative; isolation: isolate; min-height: 220px; display: flex; align-items: flex-end; color: #ffffff; overflow: hidden; } /* Background image layer */ .ib-breadcrumb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.04); filter: brightness(0.65); transition: transform 7s ease-out, filter var(--dur-slow) var(--ease); z-index: -2; } /* Color overlay */ .ib-breadcrumb-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15, 17, 38, 0.9), rgba(31, 37, 92, 0.7)); mix-blend-mode: multiply; z-index: -1; } /* Inner layout */ .ib-breadcrumb-inner { padding-block: 2.2rem; } .ib-breadcrumb-text { max-width: 720px; } /* Kicker text */ .ib-breadcrumb-kicker { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .4rem; color: rgba(255, 255, 255, 0.78); } /* Title */ .ib-breadcrumb-title { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: var(--lh-tight); font-weight: 700; text-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } /* Breadcrumb path */ .ib-breadcrumb-nav { margin-top: .55rem; } .ib-breadcrumb-list { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .86rem; } .ib-breadcrumb-item { display: inline-flex; align-items: center; gap: .25rem; color: rgba(255, 255, 255, 0.8); } .ib-breadcrumb-item a { display: inline-flex; align-items: center; gap: .25rem; color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: color var(--dur) var(--ease); } .ib-breadcrumb-item a:hover { color: #ffffff; } .ib-breadcrumb-item i { font-size: .9rem; } .ib-breadcrumb-item.is-current span { color: rgba(255, 255, 255, 0.85); } /* Separator */ .ib-breadcrumb-separator { color: rgba(255, 255, 255, 0.65); } /* Active state classes (added by JS) */ .ib-breadcrumb-section.is-ready .ib-breadcrumb-bg { transform: scale(1.01); filter: brightness(0.82); } .ib-breadcrumb-section.is-ready .ib-breadcrumb-title { opacity: 1; transform: translateY(0); } /* Responsive */ @media (max-width: 767.98px) { .ib-breadcrumb-section { min-height: 180px; align-items: flex-end; } .ib-breadcrumb-inner { padding-block: 1.6rem; } .ib-breadcrumb-title { font-size: clamp(1.4rem, 4vw, 1.9rem); } } /* ============================================ About Section ============================================ */ .ib-about-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #ffffff; } .ib-about-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr); gap: clamp(2rem, 4vw, 3rem); align-items: flex-start; } /* Left side text */ .ib-about-kicker { margin-bottom: .5rem; } .ib-about-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .75rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .ib-about-kicker-pill i { font-size: .95rem; } .ib-about-title { margin: 0 0 .75rem; font-size: clamp(1.45rem, 2.5vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-about-body { margin: 0 0 .6rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } /* Tags */ .ib-about-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; } .ib-about-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(31, 37, 92, 0.05); color: var(--color-primary); font-size: var(--fs-xs); border: 1px solid rgba(31, 37, 92, 0.15); } .ib-about-tag i { font-size: .8rem; } /* Right side cards */ .ib-about-side { display: flex; flex-direction: column; gap: 1rem; } .ib-about-card { position: relative; border-radius: 22px; padding: 1.1rem 1.15rem 1.25rem; background: #f8f9ff; border: 1px solid rgba(224, 224, 224, 0.9); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06); overflow: hidden; transform: translateY(2px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } /* Soft gradient glow */ .ib-about-card::before { content: ""; position: absolute; inset: -30% -30% auto auto; background: radial-gradient(circle at 100% 0, rgba(179, 185, 255, .36), transparent 58%); opacity: .9; pointer-events: none; } .ib-about-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12); border-color: rgba(31, 37, 92, 0.28); background: #ffffff; } /* Capacity card specifics */ .ib-about-card-capacity { background: radial-gradient(circle at 0 0, rgba(179,185,255,.45), transparent 60%), #ffffff; } .ib-about-card-icon-wrap { display: flex; justify-content: flex-start; margin-bottom: .4rem; } .ib-about-card-icon { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 0 0, var(--color-accent), var(--color-primary)); box-shadow: 0 10px 24px rgba(31, 37, 92, .4); color: #ffffff; } .ib-about-card-icon i { font-size: 1.1rem; } .ib-about-card-title { margin: .2rem 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-about-card-text { margin: 0 0 .7rem; font-size: var(--fs-sm); color: var(--color-text-soft); text-align: justify; } /* Metrics */ .ib-about-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } .ib-about-metric { padding: .5rem .45rem; border-radius: 16px; background: rgba(31, 37, 92, 0.02); border: 1px dashed rgba(31, 37, 92, 0.16); text-align: center; } .ib-about-metric-value { font-size: .95rem; font-weight: 700; color: var(--color-primary); } .ib-about-metric-label { margin-top: .05rem; font-size: .7rem; color: var(--color-text-soft); line-height: 1.3; } /* Features card */ .ib-about-card-features { padding-top: .9rem; } .ib-about-card-title-small { margin: 0 0 .4rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .14em; color: var(--color-primary); } .ib-about-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--fs-sm); color: var(--color-text); } .ib-about-list li { display: flex; align-items: flex-start; gap: .35rem; } .ib-about-list i { font-size: .8rem; margin-top: .15rem; color: var(--color-primary); } /* Responsive */ @media (max-width: 991.98px) { .ib-about-grid { grid-template-columns: minmax(0, 1fr); } .ib-about-side { max-width: 520px; margin-inline: auto; } } @media (max-width: 575.98px) { .ib-about-section { padding-block: 2rem; } .ib-about-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================ CEO Message Section ============================================ */ .ib-ceo-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #f7f8fc; } .ib-ceo-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 4vw, 3rem); align-items: flex-start; } /* Left side */ .ib-ceo-kicker { margin-bottom: .5rem; } .ib-ceo-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; background: rgba(31, 37, 92, 0.07); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .ib-ceo-kicker-pill i { font-size: .95rem; } .ib-ceo-title { margin: 0 0 .7rem; font-size: clamp(1.45rem, 2.5vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } /* Intro quote block */ .ib-ceo-quote-intro { position: relative; padding: .75rem .85rem .75rem 2.6rem; border-radius: 18px; background: #ffffff; border: 1px solid rgba(224, 224, 224, 0.9); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06); margin-bottom: .7rem; } .ib-ceo-quote-intro i { position: absolute; left: .95rem; top: .8rem; font-size: 1.35rem; color: rgba(31, 37, 92, 0.2); } .ib-ceo-quote-intro p { margin: 0; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } /* Body paragraphs */ .ib-ceo-body { margin: 0 0 .55rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } .ib-ceo-signoff { margin-top: .3rem; font-style: italic; color: var(--color-text-soft); } /* Pillars list */ .ib-ceo-pillars { list-style: none; margin: .3rem 0 .7rem; padding: 0; display: grid; gap: .4rem; } .ib-ceo-pillars li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem; align-items: flex-start; } .ib-ceo-pillars-icon { width: 34px; height: 34px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ib-ceo-pillars-icon i { font-size: .9rem; } .ib-ceo-pillars-text strong { display: inline-block; margin-right: .15rem; color: var(--color-primary); } .ib-ceo-pillars-text span { font-size: var(--fs-sm); color: var(--color-text); } /* Signature */ .ib-ceo-signature { margin-top: .4rem; } .ib-ceo-sign-name { font-weight: 700; color: var(--color-primary); } .ib-ceo-sign-role { font-size: .82rem; color: var(--color-text-soft); } /* Right side card */ .ib-ceo-side { display: flex; flex-direction: column; gap: 1rem; } .ib-ceo-card { position: relative; border-radius: 22px; padding: 1.2rem 1.15rem 1.3rem; background: radial-gradient(circle at 0 0, rgba(179,185,255,.44), transparent 60%), #ffffff; border: 1px solid rgba(224, 224, 224, 0.9); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08); overflow: hidden; transform: translateY(2px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .ib-ceo-card::before { content: ""; position: absolute; inset: -32% -28% auto auto; background: radial-gradient(circle at 100% 0, rgba(31,37,92,.32), transparent 60%); opacity: .9; pointer-events: none; } .ib-ceo-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14); border-color: rgba(31, 37, 92, 0.28); } /* CEO photo area */ .ib-ceo-photo-wrap { position: relative; margin-bottom: .7rem; display: flex; align-items: center; gap: .7rem; } .ib-ceo-photo-bg { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 0 0, var(--color-accent), var(--color-primary)); display: inline-flex; align-items: center; justify-content: center; color: #ffffff; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35); } .ib-ceo-photo-bg i { font-size: 2.2rem; } .ib-ceo-photo-badge { position: absolute; left: 58px; bottom: 2px; display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; background: rgba(11, 13, 32, 0.9); color: #ffffff; font-size: .7rem; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); } .ib-ceo-photo-badge i { font-size: .9rem; } /* Card body */ .ib-ceo-card-body { font-size: var(--fs-sm); color: var(--color-text); } .ib-ceo-card-title { margin: 0 0 .25rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-ceo-card-text { margin: 0 0 .6rem; font-size: var(--fs-sm); color: var(--color-text-soft); text-align: justify; } /* Highlights */ .ib-ceo-highlights { display: grid; gap: .5rem; } .ib-ceo-highlight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem; align-items: flex-start; } .ib-ceo-highlight-icon { width: 32px; height: 32px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ib-ceo-highlight-icon i { font-size: .9rem; } .ib-ceo-highlight-text { font-size: var(--fs-sm); } .ib-ceo-highlight-label { font-weight: 600; color: var(--color-primary); } .ib-ceo-highlight-value { color: var(--color-text-soft); } /* Responsive */ @media (max-width: 991.98px) { .ib-ceo-grid { grid-template-columns: minmax(0, 1fr); } .ib-ceo-side { max-width: 520px; margin-inline: auto; } } @media (max-width: 575.98px) { .ib-ceo-section { padding-block: 2rem; } } /* ============================================ Vision, Mission, Core Values ============================================ */ .ib-vmc-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #ffffff; } .ib-vmc-header { text-align: center; max-width: 780px; margin: 0 auto var(--space-5); } .ib-vmc-kicker { margin-bottom: .45rem; } .ib-vmc-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .85rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-vmc-kicker-pill i { font-size: .95rem; } .ib-vmc-title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-vmc-subtitle { margin: 0; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Grid layout */ .ib-vmc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.5fr); gap: clamp(1.4rem, 3vw, 2.1rem); } /* Cards */ .ib-vmc-card { position: relative; border-radius: 22px; padding: 1.15rem 1.1rem 1.25rem; background: #f8f9ff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06); overflow: hidden; transform: translateY(2px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } /* Soft glow */ .ib-vmc-card::before { content: ""; position: absolute; inset: -30% -30% auto auto; background: radial-gradient(circle at 100% 0, rgba(179,185,255,.34), transparent 60%); opacity: .9; pointer-events: none; } .ib-vmc-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12); border-color: rgba(31, 37, 92, 0.28); background: #ffffff; } /* Card variations */ .ib-vmc-card-vision { background: radial-gradient(circle at 0 0, rgba(179,185,255,.45), transparent 60%), #ffffff; } .ib-vmc-card-values { background: radial-gradient(circle at 0 0, rgba(179,185,255,.32), transparent 65%), #ffffff; } /* Icon */ .ib-vmc-card-icon-wrap { display: flex; justify-content: flex-start; margin-bottom: .35rem; } .ib-vmc-card-icon { width: 40px; height: 40px; border-radius: 999px; background: radial-gradient(circle at 0 0, var(--color-accent), var(--color-primary)); display: inline-flex; align-items: center; justify-content: center; color: #ffffff; box-shadow: 0 10px 24px rgba(31,37,92,.4); } .ib-vmc-card-icon i { font-size: 1.1rem; } /* Titles and text */ .ib-vmc-card-title { margin: .15rem 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-vmc-card-text { margin: 0; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } /* Mission list */ .ib-vmc-list-mission { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: var(--fs-sm); color: var(--color-text); } .ib-vmc-list-mission li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem; align-items: flex-start; } .ib-vmc-list-bullet { width: 32px; height: 32px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ib-vmc-list-bullet i { font-size: .9rem; } .ib-vmc-list-text strong { display: inline-block; margin-right: .12rem; color: var(--color-primary); } .ib-vmc-list-text span { color: var(--color-text); } /* Core values layout */ .ib-vmc-values-grid { display: grid; gap: .45rem; } .ib-vmc-value-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: flex-start; } .ib-vmc-value-badge { width: 32px; height: 32px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); } .ib-vmc-value-content { font-size: var(--fs-sm); } .ib-vmc-value-title { font-weight: 600; color: var(--color-primary); } .ib-vmc-value-text { color: var(--color-text-soft); line-height: 1.5; } /* Responsive */ @media (max-width: 1199.98px) { .ib-vmc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ib-vmc-card-values { grid-column: span 2; } } @media (max-width: 767.98px) { .ib-vmc-grid { grid-template-columns: minmax(0, 1fr); } .ib-vmc-card-values { grid-column: auto; } .ib-vmc-section { padding-block: 2rem; } } /* ============================================ Certificates Section ============================================ */ .ib-cert-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #f7f8fc; } .ib-cert-header { text-align: center; max-width: 760px; margin: 0 auto var(--space-5); } .ib-cert-kicker { margin-bottom: .45rem; } .ib-cert-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .85rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-cert-kicker-pill i { font-size: .95rem; } .ib-cert-title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-cert-subtitle { margin: 0; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Grid */ .ib-cert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); } /* Card */ .ib-cert-card { cursor: pointer; } .ib-cert-card-inner { position: relative; border-radius: 22px; padding: .85rem .85rem 1rem; background: #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06); overflow: hidden; transform: translateY(1px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } /* Subtle glow */ .ib-cert-card-inner::before { content: ""; position: absolute; inset: -32% -32% auto auto; background: radial-gradient(circle at 100% 0, rgba(179,185,255,.34), transparent 60%); opacity: .9; pointer-events: none; } /* Chip */ .ib-cert-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .16rem .55rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: .72rem; margin-bottom: .45rem; } .ib-cert-chip i { font-size: .85rem; } /* Image */ .ib-cert-image-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #f0f1fa; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12); margin-bottom: .55rem; } .ib-cert-image { width: 100%; height: 210px; object-fit: cover; transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } /* Overlay on hover */ .ib-cert-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(8, 9, 24, 0.1), rgba(8, 9, 24, 0.7) ); opacity: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: .35rem .45rem; transition: opacity var(--dur) var(--ease); } .ib-cert-overlay-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); } .ib-cert-overlay-icon i { font-size: .9rem; } /* Name */ .ib-cert-name { margin: 0; font-size: .9rem; font-weight: 600; color: var(--color-primary); } /* Hover state */ .ib-cert-card-inner:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12); border-color: rgba(31, 37, 92, 0.28); } .ib-cert-card-inner:hover .ib-cert-image { transform: scale(1.05); filter: brightness(0.98); } .ib-cert-card-inner:hover .ib-cert-overlay { opacity: 1; } /* Modal */ .ib-cert-modal { border-radius: 18px; overflow: hidden; border: 1px solid rgba(224, 224, 224, 0.9); } .ib-cert-modal-header { border-bottom: 1px solid rgba(224, 224, 224, 0.9); background: #0f1126; color: #ffffff; } .ib-cert-modal-header .modal-title { font-size: .95rem; } .ib-cert-modal-body { padding: .9rem; background: #0c0d1e; } .ib-cert-modal-img-wrap { border-radius: 12px; overflow: hidden; background: #111325; max-height: 70vh; display: flex; align-items: center; justify-content: center; } .ib-cert-modal-image { width: 100%; height: auto; object-fit: contain; } /* Responsive */ @media (max-width: 1199.98px) { .ib-cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .ib-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ib-cert-image { height: 190px; } } @media (max-width: 575.98px) { .ib-cert-section { padding-block: 2rem; } .ib-cert-grid { grid-template-columns: minmax(0, 1fr); } .ib-cert-image { height: 200px; } } /* ============================================ Dyed Pocketing Fabrics Section ============================================ */ .ib-dyed-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #ffffff; } .ib-dyed-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr); gap: clamp(1.8rem, 3vw, 2.4rem); align-items: center; } /* Media side */ .ib-dyed-media { display: flex; justify-content: center; } .ib-dyed-card { position: relative; width: min(100%, 420px); min-height: 320px; padding: 1.3rem 1.3rem 1.5rem; border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(179,185,255,.45), transparent 55%), radial-gradient(circle at 120% 120%, rgba(31,37,92,.18), transparent 60%), #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; } /* Main image */ .ib-dyed-photo { position: absolute; inset: 1.3rem 1.3rem 3.4rem 1.3rem; border-radius: 20px; background-image: url("../img/pic/18.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-dyed-card:hover .ib-dyed-photo { transform: scale(1.03); filter: brightness(1.02); } /* Bottom pill */ .ib-dyed-pill { position: absolute; left: 1.7rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .ib-dyed-pill i { font-size: .9rem; } /* Top badge */ .ib-dyed-badge { position: absolute; top: 1.3rem; right: 1.3rem; padding: .5rem .8rem; border-radius: 18px; background: rgba(12, 14, 32, 0.9); color: #ffffff; text-align: right; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .ib-dyed-badge-number { font-size: 1.1rem; font-weight: 700; line-height: 1.1; } .ib-dyed-badge-label { font-size: var(--fs-xs); opacity: .85; } /* Content side */ .ib-dyed-content { font-size: var(--fs-sm); color: var(--color-text); } /* Header texts */ .ib-dyed-kicker { margin-bottom: .3rem; } .ib-dyed-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .8rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-dyed-kicker-pill i { font-size: .9rem; } .ib-dyed-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-dyed-subtitle { margin: .15rem 0 .5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Body text and blocks */ .ib-dyed-text { margin: 0 0 .55rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } .ib-dyed-text-highlight { margin-top: .35rem; font-style: italic; color: var(--color-primary); } .ib-dyed-block { margin-top: .8rem; } .ib-dyed-block-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-dyed-block-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; } .ib-dyed-block-icon i { font-size: .85rem; } /* Bullet list */ .ib-dyed-list { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; gap: .3rem; } .ib-dyed-list li { display: flex; align-items: flex-start; gap: .35rem; } .ib-dyed-list i { font-size: .8rem; margin-top: .16rem; color: var(--color-primary); } .ib-dyed-list span { text-align: justify; } /* Why choose grid */ .ib-dyed-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .5rem; } .ib-dyed-why-item { border-radius: 18px; padding: .55rem .6rem; background: #f8f9ff; border: 1px solid rgba(224, 224, 224, 0.95); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: flex-start; } .ib-dyed-why-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ib-dyed-why-icon i { font-size: .85rem; } .ib-dyed-why-title { font-weight: 600; color: var(--color-primary); margin-bottom: .1rem; } .ib-dyed-why-text { font-size: .8rem; color: var(--color-text-soft); text-align: justify; } /* Responsive */ @media (max-width: 991.98px) { .ib-dyed-grid { grid-template-columns: minmax(0, 1fr); } .ib-dyed-media { order: 1; } .ib-dyed-content { order: 2; } } @media (max-width: 575.98px) { .ib-dyed-section { padding-block: 2rem; } .ib-dyed-card { padding: 1.1rem 1.1rem 1.3rem; border-radius: 20px; min-height: 290px; } .ib-dyed-photo { inset: 1.1rem 1.1rem 3.2rem 1.1rem; } .ib-dyed-pill { left: 1.2rem; bottom: 1.05rem; } .ib-dyed-badge { top: 1.05rem; right: 1.05rem; } .ib-dyed-why-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================ Printed Pocketing Fabrics Section ============================================ */ .ib-printed-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #f9f9fc; } .ib-printed-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr); gap: clamp(1.8rem, 3vw, 2.4rem); align-items: center; } /* Media side */ .ib-printed-media { display: flex; justify-content: center; } .ib-printed-card { position: relative; width: min(100%, 420px); min-height: 320px; padding: 1.3rem 1.3rem 1.5rem; border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(179,185,255,.45), transparent 55%), radial-gradient(circle at 120% 120%, rgba(31,37,92,.18), transparent 60%), #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; } .ib-printed-photo { position: absolute; inset: 1.3rem 1.3rem 3.4rem 1.3rem; border-radius: 20px; background-image: url("../img/pic/19.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-printed-card:hover .ib-printed-photo { transform: scale(1.03); filter: brightness(1.02); } /* Pill */ .ib-printed-pill { position: absolute; left: 1.7rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .ib-printed-pill i { font-size: .9rem; } /* Badge */ .ib-printed-badge { position: absolute; top: 1.3rem; right: 1.3rem; padding: .5rem .8rem; border-radius: 18px; background: rgba(12, 14, 32, 0.9); color: #ffffff; text-align: right; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .ib-printed-badge-number { font-size: 1.1rem; font-weight: 700; line-height: 1.1; } .ib-printed-badge-label { font-size: var(--fs-xs); opacity: .85; } /* Content side */ .ib-printed-content { font-size: var(--fs-sm); color: var(--color-text); } /* Header */ .ib-printed-kicker { margin-bottom: .3rem; } .ib-printed-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .8rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-printed-kicker-pill i { font-size: .9rem; } .ib-printed-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-printed-subtitle { margin: .15rem 0 .5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Text and blocks */ .ib-printed-text { margin: 0 0 .55rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } .ib-printed-text-highlight { margin-top: .35rem; font-style: italic; color: var(--color-primary); } .ib-printed-block { margin-top: .8rem; } .ib-printed-block-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-printed-block-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; } .ib-printed-block-icon i { font-size: .85rem; } /* Bullet list */ .ib-printed-list { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; gap: .3rem; } .ib-printed-list li { display: flex; align-items: flex-start; gap: .35rem; } .ib-printed-list i { font-size: .8rem; margin-top: .16rem; color: var(--color-primary); } .ib-printed-list span { text-align: justify; } /* Why choose grid */ .ib-printed-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .5rem; } .ib-printed-why-item { border-radius: 18px; padding: .55rem .6rem; background: #f8f9ff; border: 1px solid rgba(224, 224, 224, 0.95); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: flex-start; } .ib-printed-why-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ib-printed-why-icon i { font-size: .85rem; } .ib-printed-why-title { font-weight: 600; color: var(--color-primary); margin-bottom: .1rem; } .ib-printed-why-text { font-size: .8rem; color: var(--color-text-soft); text-align: justify; } /* Responsive */ @media (max-width: 991.98px) { .ib-printed-grid { grid-template-columns: minmax(0, 1fr); } .ib-printed-media { order: 1; } .ib-printed-content { order: 2; } } @media (max-width: 575.98px) { .ib-printed-section { padding-block: 2rem; } .ib-printed-card { padding: 1.1rem 1.1rem 1.3rem; border-radius: 20px; min-height: 290px; } .ib-printed-photo { inset: 1.1rem 1.1rem 3.2rem 1.1rem; } .ib-printed-pill { left: 1.2rem; bottom: 1.05rem; } .ib-printed-badge { top: 1.05rem; right: 1.05rem; } .ib-printed-why-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================ Waistband Printed Fabrics Section ============================================ */ .ib-waistband-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #ffffff; } .ib-waistband-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr); gap: clamp(1.8rem, 3vw, 2.4rem); align-items: center; } /* Content side */ .ib-waistband-content { font-size: var(--fs-sm); color: var(--color-text); } /* Kicker and headings */ .ib-waistband-kicker { margin-bottom: .3rem; } .ib-waistband-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .8rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-waistband-kicker-pill i { font-size: .9rem; } .ib-waistband-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-waistband-subtitle { margin: .15rem 0 .5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Text and blocks */ .ib-waistband-text { margin: 0 0 .55rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } .ib-waistband-text-highlight { margin-top: .35rem; font-style: italic; color: var(--color-primary); } .ib-waistband-block { margin-top: .8rem; } .ib-waistband-block-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-waistband-block-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; } .ib-waistband-block-icon i { font-size: .85rem; } /* Bullet list */ .ib-waistband-list { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; gap: .3rem; } .ib-waistband-list li { display: flex; align-items: flex-start; gap: .35rem; } .ib-waistband-list i { font-size: .8rem; margin-top: .16rem; color: var(--color-primary); } .ib-waistband-list span { text-align: justify; } /* Why choose grid */ .ib-waistband-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .5rem; } .ib-waistband-why-item { border-radius: 18px; padding: .55rem .6rem; background: #f8f9ff; border: 1px solid rgba(224, 224, 224, 0.95); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: flex-start; } .ib-waistband-why-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ib-waistband-why-icon i { font-size: .85rem; } .ib-waistband-why-title { font-weight: 600; color: var(--color-primary); margin-bottom: .1rem; } .ib-waistband-why-text { font-size: .8rem; color: var(--color-text-soft); text-align: justify; } /* Media side */ .ib-waistband-media { display: flex; justify-content: center; } .ib-waistband-card { position: relative; width: min(100%, 420px); min-height: 320px; padding: 1.3rem 1.3rem 1.5rem; border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(179,185,255,.45), transparent 55%), radial-gradient(circle at 120% 120%, rgba(31,37,92,.18), transparent 60%), #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; } .ib-waistband-photo { position: absolute; inset: 1.3rem 1.3rem 3.4rem 1.3rem; border-radius: 20px; background-image: url("../img/pic/21.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-waistband-card:hover .ib-waistband-photo { transform: scale(1.03); filter: brightness(1.02); } /* Pill */ .ib-waistband-pill { position: absolute; left: 1.7rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .ib-waistband-pill i { font-size: .9rem; } /* Badge */ .ib-waistband-badge { position: absolute; top: 1.3rem; right: 1.3rem; padding: .5rem .8rem; border-radius: 18px; background: rgba(12, 14, 32, 0.9); color: #ffffff; text-align: right; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .ib-waistband-badge-number { font-size: 1.1rem; font-weight: 700; line-height: 1.1; } .ib-waistband-badge-label { font-size: var(--fs-xs); opacity: .85; } /* Responsive */ @media (max-width: 991.98px) { .ib-waistband-grid { grid-template-columns: minmax(0, 1fr); } .ib-waistband-media { order: 1; } .ib-waistband-content { order: 2; } } @media (max-width: 575.98px) { .ib-waistband-section { padding-block: 2rem; } .ib-waistband-card { padding: 1.1rem 1.1rem 1.3rem; border-radius: 20px; min-height: 290px; } .ib-waistband-photo { inset: 1.1rem 1.1rem 3.2rem 1.1rem; } .ib-waistband-pill { left: 1.2rem; bottom: 1.05rem; } .ib-waistband-badge { top: 1.05rem; right: 1.05rem; } .ib-waistband-why-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================ Waistband Yarn Dyed Fabrics Section ============================================ */ .ib-waistyd-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #f9f9fc; } .ib-waistyd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr); gap: clamp(1.8rem, 3vw, 2.4rem); align-items: center; } /* Media side */ .ib-waistyd-media { display: flex; justify-content: center; } .ib-waistyd-card { position: relative; width: min(100%, 420px); min-height: 320px; padding: 1.3rem 1.3rem 1.5rem; border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(179,185,255,.45), transparent 55%), radial-gradient(circle at 120% 120%, rgba(31,37,92,.18), transparent 60%), #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; } .ib-waistyd-photo { position: absolute; inset: 1.3rem 1.3rem 3.4rem 1.3rem; border-radius: 20px; background-image: url("../img/pic/21.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-waistyd-card:hover .ib-waistyd-photo { transform: scale(1.03); filter: brightness(1.02); } /* Pill */ .ib-waistyd-pill { position: absolute; left: 1.7rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .ib-waistyd-pill i { font-size: .9rem; } /* Badge */ .ib-waistyd-badge { position: absolute; top: 1.3rem; right: 1.3rem; padding: .5rem .8rem; border-radius: 18px; background: rgba(12, 14, 32, 0.9); color: #ffffff; text-align: right; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .ib-waistyd-badge-number { font-size: 1.1rem; font-weight: 700; line-height: 1.1; } .ib-waistyd-badge-label { font-size: var(--fs-xs); opacity: .85; } /* Content side */ .ib-waistyd-content { font-size: var(--fs-sm); color: var(--color-text); } /* Header */ .ib-waistyd-kicker { margin-bottom: .3rem; } .ib-waistyd-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .8rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-waistyd-kicker-pill i { font-size: .9rem; } .ib-waistyd-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-waistyd-subtitle { margin: .15rem 0 .5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Text and blocks */ .ib-waistyd-text { margin: 0 0 .55rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } .ib-waistyd-text-highlight { margin-top: .35rem; font-style: italic; color: var(--color-primary); } .ib-waistyd-block { margin-top: .8rem; } .ib-waistyd-block-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-waistyd-block-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; } .ib-waistyd-block-icon i { font-size: .85rem; } /* Bullet list */ .ib-waistyd-list { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; gap: .3rem; } .ib-waistyd-list li { display: flex; align-items: flex-start; gap: .35rem; } .ib-waistyd-list i { font-size: .8rem; margin-top: .16rem; color: var(--color-primary); } .ib-waistyd-list span { text-align: justify; } /* Why choose grid */ .ib-waistyd-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .5rem; } .ib-waistyd-why-item { border-radius: 18px; padding: .55rem .6rem; background: #f8f9ff; border: 1px solid rgba(224, 224, 224, 0.95); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: flex-start; } .ib-waistyd-why-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ib-waistyd-why-icon i { font-size: .85rem; } .ib-waistyd-why-title { font-weight: 600; color: var(--color-primary); margin-bottom: .1rem; } .ib-waistyd-why-text { font-size: .8rem; color: var(--color-text-soft); text-align: justify; } /* Responsive */ @media (max-width: 991.98px) { .ib-waistyd-grid { grid-template-columns: minmax(0, 1fr); } .ib-waistyd-media { order: 1; } .ib-waistyd-content { order: 2; } } @media (max-width: 575.98px) { .ib-waistyd-section { padding-block: 2rem; } .ib-waistyd-card { padding: 1.1rem 1.1rem 1.3rem; border-radius: 20px; min-height: 290px; } .ib-waistyd-photo { inset: 1.1rem 1.1rem 3.2rem 1.1rem; } .ib-waistyd-pill { left: 1.2rem; bottom: 1.05rem; } .ib-waistyd-badge { top: 1.05rem; right: 1.05rem; } .ib-waistyd-why-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================ White Pocketing Fabrics Section ============================================ */ .ib-whitep-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #ffffff; } .ib-whitep-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr); gap: clamp(1.8rem, 3vw, 2.4rem); align-items: center; } /* Content side */ .ib-whitep-content { font-size: var(--fs-sm); color: var(--color-text); } .ib-whitep-kicker { margin-bottom: .3rem; } .ib-whitep-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .8rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-whitep-kicker-pill i { font-size: .9rem; } .ib-whitep-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-whitep-subtitle { margin: .15rem 0 .5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Body text */ .ib-whitep-text { margin: 0 0 .55rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } .ib-whitep-text-label { font-weight: 600; color: var(--color-primary); margin-top: .25rem; } .ib-whitep-text-highlight { margin-top: .35rem; font-style: italic; color: var(--color-primary); } /* Blocks */ .ib-whitep-block { margin-top: .8rem; } .ib-whitep-block-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-whitep-block-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; } .ib-whitep-block-icon i { font-size: .85rem; } /* Feature list */ .ib-whitep-list { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; gap: .3rem; } .ib-whitep-list li { display: flex; align-items: flex-start; gap: .35rem; } .ib-whitep-list i { font-size: .8rem; margin-top: .16rem; color: var(--color-primary); } .ib-whitep-list span { text-align: justify; } /* Why choose grid */ .ib-whitep-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .5rem; } .ib-whitep-why-item { border-radius: 18px; padding: .55rem .6rem; background: #f9f9ff; border: 1px solid rgba(224, 224, 224, 0.95); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: flex-start; } .ib-whitep-why-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ib-whitep-why-icon i { font-size: .85rem; } .ib-whitep-why-title { font-weight: 600; color: var(--color-primary); margin-bottom: .1rem; } .ib-whitep-why-text { font-size: .8rem; color: var(--color-text-soft); text-align: justify; } /* Media side */ .ib-whitep-media { display: flex; justify-content: center; } .ib-whitep-card { position: relative; width: min(100%, 420px); min-height: 320px; padding: 1.3rem 1.3rem 1.5rem; border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(255,255,255,.9), transparent 55%), radial-gradient(circle at 120% 120%, rgba(31,37,92,.12), transparent 60%), #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; } .ib-whitep-photo { position: absolute; inset: 1.3rem 1.3rem 3.4rem 1.3rem; border-radius: 20px; background-image: url("../img/pic/22.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-whitep-card:hover .ib-whitep-photo { transform: scale(1.03); filter: brightness(1.03); } /* Pill */ .ib-whitep-pill { position: absolute; left: 1.7rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16); } .ib-whitep-pill i { font-size: .9rem; } /* Badge */ .ib-whitep-badge { position: absolute; top: 1.3rem; right: 1.3rem; padding: .5rem .8rem; border-radius: 18px; background: rgba(12, 14, 32, 0.9); color: #ffffff; text-align: right; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); } .ib-whitep-badge-number { font-size: 1.1rem; font-weight: 700; line-height: 1.1; } .ib-whitep-badge-label { font-size: var(--fs-xs); opacity: .85; } /* Responsive */ @media (max-width: 991.98px) { .ib-whitep-grid { grid-template-columns: minmax(0, 1fr); } .ib-whitep-media { order: 1; } .ib-whitep-content { order: 2; } } @media (max-width: 575.98px) { .ib-whitep-section { padding-block: 2rem; } .ib-whitep-card { padding: 1.1rem 1.1rem 1.3rem; border-radius: 20px; min-height: 290px; } .ib-whitep-photo { inset: 1.1rem 1.1rem 3.2rem 1.1rem; } .ib-whitep-pill { left: 1.2rem; bottom: 1.05rem; } .ib-whitep-badge { top: 1.05rem; right: 1.05rem; } .ib-whitep-why-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================ Yarn Dyed Pocketing Fabrics Section ============================================ */ .ib-yarnp-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #f9f9fc; } .ib-yarnp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr); gap: clamp(1.8rem, 3vw, 2.4rem); align-items: center; } /* Media side */ .ib-yarnp-media { display: flex; justify-content: center; } .ib-yarnp-card { position: relative; width: min(100%, 420px); min-height: 320px; padding: 1.3rem 1.3rem 1.5rem; border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(179,185,255,.45), transparent 55%), radial-gradient(circle at 120% 120%, rgba(31,37,92,.18), transparent 60%), #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; } .ib-yarnp-photo { position: absolute; inset: 1.3rem 1.3rem 3.4rem 1.3rem; border-radius: 20px; background-image: url("../img/pic/22.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-yarnp-card:hover .ib-yarnp-photo { transform: scale(1.03); filter: brightness(1.02); } /* Pill */ .ib-yarnp-pill { position: absolute; left: 1.7rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .ib-yarnp-pill i { font-size: .9rem; } /* Badge */ .ib-yarnp-badge { position: absolute; top: 1.3rem; right: 1.3rem; padding: .5rem .8rem; border-radius: 18px; background: rgba(12, 14, 32, 0.9); color: #ffffff; text-align: right; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .ib-yarnp-badge-number { font-size: 1.1rem; font-weight: 700; line-height: 1.1; } .ib-yarnp-badge-label { font-size: var(--fs-xs); opacity: .85; } /* Content side */ .ib-yarnp-content { font-size: var(--fs-sm); color: var(--color-text); } /* Header */ .ib-yarnp-kicker { margin-bottom: .3rem; } .ib-yarnp-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .8rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-yarnp-kicker-pill i { font-size: .9rem; } .ib-yarnp-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-yarnp-subtitle { margin: .15rem 0 .5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Text and blocks */ .ib-yarnp-text { margin: 0 0 .55rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } .ib-yarnp-text-label { font-weight: 600; color: var(--color-primary); margin-top: .25rem; } .ib-yarnp-text-highlight { margin-top: .35rem; font-style: italic; color: var(--color-primary); } .ib-yarnp-block { margin-top: .8rem; } .ib-yarnp-block-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-yarnp-block-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; } .ib-yarnp-block-icon i { font-size: .85rem; } /* Feature list */ .ib-yarnp-list { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; gap: .3rem; } .ib-yarnp-list li { display: flex; align-items: flex-start; gap: .35rem; } .ib-yarnp-list i { font-size: .8rem; margin-top: .16rem; color: var(--color-primary); } .ib-yarnp-list span { text-align: justify; } /* Why choose grid */ .ib-yarnp-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .5rem; } .ib-yarnp-why-item { border-radius: 18px; padding: .55rem .6rem; background: #f8f9ff; border: 1px solid rgba(224, 224, 224, 0.95); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: flex-start; } .ib-yarnp-why-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ib-yarnp-why-icon i { font-size: .85rem; } .ib-yarnp-why-title { font-weight: 600; color: var(--color-primary); margin-bottom: .1rem; } .ib-yarnp-why-text { font-size: .8rem; color: var(--color-text-soft); text-align: justify; } /* Responsive */ @media (max-width: 991.98px) { .ib-yarnp-grid { grid-template-columns: minmax(0, 1fr); } .ib-yarnp-media { order: 1; } .ib-yarnp-content { order: 2; } } @media (max-width: 575.98px) { .ib-yarnp-section { padding-block: 2rem; } .ib-yarnp-card { padding: 1.1rem 1.1rem 1.3rem; border-radius: 20px; min-height: 290px; } .ib-yarnp-photo { inset: 1.1rem 1.1rem 3.2rem 1.1rem; } .ib-yarnp-pill { left: 1.2rem; bottom: 1.05rem; } .ib-yarnp-badge { top: 1.05rem; right: 1.05rem; } .ib-yarnp-why-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================ Polyester & Cotton Pocketing Fabrics ============================================ */ .ib-pc-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #ffffff; } .ib-pc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); gap: clamp(1.8rem, 3vw, 2.4rem); align-items: flex-start; } /* Media card */ .ib-pc-media { display: flex; justify-content: center; } .ib-pc-card { position: relative; width: min(100%, 420px); min-height: 320px; padding: 1.3rem 1.3rem 1.5rem; border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(179,185,255,.45), transparent 55%), radial-gradient(circle at 120% 120%, rgba(31,37,92,.18), transparent 60%), #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; } .ib-pc-photo { position: absolute; inset: 1.3rem 1.3rem 3.4rem 1.3rem; border-radius: 20px; background-image: url("../img/pic/22.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-pc-card:hover .ib-pc-photo { transform: scale(1.03); filter: brightness(1.02); } /* Pill */ .ib-pc-pill { position: absolute; left: 1.7rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .ib-pc-pill i { font-size: .9rem; } /* Badge */ .ib-pc-badge { position: absolute; top: 1.3rem; right: 1.3rem; padding: .5rem .8rem; border-radius: 18px; background: rgba(12, 14, 32, 0.9); color: #ffffff; text-align: right; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .ib-pc-badge-number { font-size: 1.1rem; font-weight: 700; line-height: 1.1; } .ib-pc-badge-label { font-size: var(--fs-xs); opacity: .85; } /* Content side */ .ib-pc-content { font-size: var(--fs-sm); color: var(--color-text); } .ib-pc-kicker { margin-bottom: .3rem; } .ib-pc-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .8rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-pc-kicker-pill i { font-size: .9rem; } .ib-pc-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-pc-subtitle { margin: .15rem 0 .5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Text */ .ib-pc-text { margin: 0 0 .55rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } .ib-pc-text-highlight { margin-top: .35rem; font-style: italic; color: var(--color-primary); } /* Blocks */ .ib-pc-block { margin-top: .8rem; } .ib-pc-block-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-pc-block-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; } .ib-pc-block-icon i { font-size: .85rem; } /* Table shell */ .ib-pc-table-wrap { margin-top: .4rem; border-radius: 20px; border: 1px solid rgba(224, 224, 224, 0.95); background: #f9f9ff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06); overflow: hidden; } .ib-pc-table-headerbar { display: flex; justify-content: space-between; align-items: center; padding: .55rem .9rem; background: linear-gradient(120deg, rgba(31,37,92,0.96), rgba(77,99,205,0.95)); color: #ffffff; } .ib-pc-table-title { font-size: var(--fs-sm); font-weight: 600; } .ib-pc-table-hint { font-size: var(--fs-xs); opacity: .9; } .ib-pc-table-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; } /* Custom scrollbar for table area */ .ib-pc-table-scroll::-webkit-scrollbar { height: 6px; } .ib-pc-table-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); } .ib-pc-table-scroll::-webkit-scrollbar-thumb { background: rgba(31, 37, 92, 0.35); border-radius: 999px; } /* Actual table */ .ib-pc-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: var(--fs-xs); } .ib-pc-table thead { background: #f1f2ff; } .ib-pc-table th, .ib-pc-table td { padding: .55rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(224, 224, 224, 0.9); } .ib-pc-table th { font-weight: 600; color: var(--color-primary); white-space: nowrap; } .ib-pc-table td { color: var(--color-text); } .ib-pc-table tbody tr:nth-child(2n) { background: rgba(248, 249, 255, 0.9); } .ib-pc-table tbody tr:hover { background: rgba(179, 185, 255, 0.12); } /* Mobile hint */ .ib-pc-table-hint-mobile { display: flex; align-items: center; gap: .35rem; padding: .35rem .7rem .55rem; font-size: var(--fs-xs); color: var(--color-text-soft); background: #f9f9ff; } .ib-pc-table-hint-mobile i { font-size: .9rem; color: var(--color-primary); } /* Lists and applications */ .ib-pc-list { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; gap: .3rem; } .ib-pc-list li { display: flex; align-items: flex-start; gap: .35rem; } .ib-pc-list i { font-size: .8rem; margin-top: .16rem; color: var(--color-primary); } .ib-pc-list span { text-align: justify; } .ib-pc-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .7rem; } .ib-pc-app-item { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); color: var(--color-text); } .ib-pc-app-item i { font-size: .9rem; color: var(--color-primary); } /* Responsive */ @media (max-width: 991.98px) { .ib-pc-grid { grid-template-columns: minmax(0, 1fr); } .ib-pc-media { order: 1; } .ib-pc-content { order: 2; } } @media (max-width: 575.98px) { .ib-pc-section { padding-block: 2rem; } .ib-pc-card { padding: 1.1rem 1.1rem 1.3rem; border-radius: 20px; min-height: 290px; } .ib-pc-photo { inset: 1.1rem 1.1rem 3.2rem 1.1rem; } .ib-pc-pill { left: 1.2rem; bottom: 1.05rem; } .ib-pc-badge { top: 1.05rem; right: 1.05rem; } .ib-pc-app-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================ Cotton Pocketing Fabrics ============================================ */ .ib-cot-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #f9f9fc; } .ib-cot-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); gap: clamp(1.8rem, 3vw, 2.4rem); align-items: flex-start; } /* Media card */ .ib-cot-media { display: flex; justify-content: center; } .ib-cot-card { position: relative; width: min(100%, 420px); min-height: 320px; padding: 1.3rem 1.3rem 1.5rem; border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(179,185,255,.45), transparent 55%), radial-gradient(circle at 120% 120%, rgba(31,37,92,.18), transparent 60%), #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; } .ib-cot-photo { position: absolute; inset: 1.3rem 1.3rem 3.4rem 1.3rem; border-radius: 20px; background-image: url("../img/pic/22.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-cot-card:hover .ib-cot-photo { transform: scale(1.03); filter: brightness(1.02); } /* Pill */ .ib-cot-pill { position: absolute; left: 1.7rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.96); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .ib-cot-pill i { font-size: .9rem; } /* Badge */ .ib-cot-badge { position: absolute; top: 1.3rem; right: 1.3rem; padding: .5rem .8rem; border-radius: 18px; background: rgba(12, 14, 32, 0.9); color: #ffffff; text-align: right; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .ib-cot-badge-number { font-size: 1.1rem; font-weight: 700; line-height: 1.1; } .ib-cot-badge-label { font-size: var(--fs-xs); opacity: .85; } /* Content side */ .ib-cot-content { font-size: var(--fs-sm); color: var(--color-text); } .ib-cot-kicker { margin-bottom: .3rem; } .ib-cot-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .8rem; border-radius: 999px; background: rgba(31, 37, 92, 0.06); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-cot-kicker-pill i { font-size: .9rem; } .ib-cot-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-cot-subtitle { margin: .15rem 0 .5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Text and blocks */ .ib-cot-text { margin: 0 0 .55rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } .ib-cot-text-label { font-weight: 600; color: var(--color-primary); margin-top: .25rem; } .ib-cot-text-highlight { margin-top: .35rem; font-style: italic; color: var(--color-primary); } .ib-cot-block { margin-top: .8rem; } .ib-cot-block-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-cot-block-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; } .ib-cot-block-icon i { font-size: .85rem; } /* Table shell */ .ib-cot-table-wrap { margin-top: .4rem; border-radius: 20px; border: 1px solid rgba(224, 224, 224, 0.95); background: #f9f9ff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06); overflow: hidden; } .ib-cot-table-headerbar { display: flex; justify-content: space-between; align-items: center; padding: .55rem .9rem; background: linear-gradient(120deg, rgba(31,37,92,0.96), rgba(77,99,205,0.95)); color: #ffffff; } .ib-cot-table-title { font-size: var(--fs-sm); font-weight: 600; } .ib-cot-table-hint { font-size: var(--fs-xs); opacity: .9; } .ib-cot-table-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; } /* Scrollbar for table */ .ib-cot-table-scroll::-webkit-scrollbar { height: 6px; } .ib-cot-table-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); } .ib-cot-table-scroll::-webkit-scrollbar-thumb { background: rgba(31, 37, 92, 0.35); border-radius: 999px; } /* Table */ .ib-cot-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-xs); } .ib-cot-table thead { background: #f1f2ff; } .ib-cot-table th, .ib-cot-table td { padding: .55rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(224, 224, 224, 0.9); } .ib-cot-table th { font-weight: 600; color: var(--color-primary); white-space: nowrap; } .ib-cot-table td { color: var(--color-text); } .ib-cot-table tbody tr:nth-child(2n) { background: rgba(248, 249, 255, 0.9); } .ib-cot-table tbody tr:hover { background: rgba(179, 185, 255, 0.12); } /* Mobile hint */ .ib-cot-table-hint-mobile { display: flex; align-items: center; gap: .35rem; padding: .35rem .7rem .55rem; font-size: var(--fs-xs); color: var(--color-text-soft); background: #f9f9ff; } .ib-cot-table-hint-mobile i { font-size: .9rem; color: var(--color-primary); } /* Lists and applications */ .ib-cot-list { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; gap: .3rem; } .ib-cot-list li { display: flex; align-items: flex-start; gap: .35rem; } .ib-cot-list i { font-size: .8rem; margin-top: .16rem; color: var(--color-primary); } .ib-cot-list span { text-align: justify; } .ib-cot-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .7rem; } .ib-cot-app-item { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); color: var(--color-text); } .ib-cot-app-item i { font-size: .9rem; color: var(--color-primary); } /* Why choose grid */ .ib-cot-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .5rem; } .ib-cot-why-item { border-radius: 18px; padding: .55rem .6rem; background: #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: flex-start; } .ib-cot-why-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); } .ib-cot-why-icon i { font-size: .85rem; } .ib-cot-why-title { font-weight: 600; color: var(--color-primary); margin-bottom: .1rem; } .ib-cot-why-text { font-size: .8rem; color: var(--color-text-soft); text-align: justify; } /* Responsive */ @media (max-width: 991.98px) { .ib-cot-grid { grid-template-columns: minmax(0, 1fr); } .ib-cot-media { order: 1; } .ib-cot-content { order: 2; } } @media (max-width: 575.98px) { .ib-cot-section { padding-block: 2rem; } .ib-cot-card { padding: 1.1rem 1.1rem 1.3rem; border-radius: 20px; min-height: 290px; } .ib-cot-photo { inset: 1.1rem 1.1rem 3.2rem 1.1rem; } .ib-cot-pill { left: 1.2rem; bottom: 1.05rem; } .ib-cot-badge { top: 1.05rem; right: 1.05rem; } .ib-cot-app-grid { grid-template-columns: minmax(0, 1fr); } .ib-cot-why-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================ Recycle Polyester & Cotton Fabrics ============================================ */ .ib-rec-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: #f4f8f5; } .ib-rec-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); gap: clamp(1.8rem, 3vw, 2.4rem); align-items: flex-start; } /* Media card */ .ib-rec-media { display: flex; justify-content: center; } .ib-rec-card { position: relative; width: min(100%, 420px); min-height: 320px; padding: 1.3rem 1.3rem 1.5rem; border-radius: 24px; background: radial-gradient(circle at 0 0, rgba(179, 215, 186, .55), transparent 55%), radial-gradient(circle at 120% 120%, rgba(31, 37, 92, .18), transparent 60%), #ffffff; border: 1px solid rgba(210, 224, 210, 0.95); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); overflow: hidden; } .ib-rec-photo { position: absolute; inset: 1.3rem 1.3rem 3.4rem 1.3rem; border-radius: 20px; background-image: url("../img/pic/22.png"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-rec-card:hover .ib-rec-photo { transform: scale(1.03); filter: brightness(1.04); } /* Pill */ .ib-rec-pill { position: absolute; left: 1.7rem; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.97); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 600; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); } .ib-rec-pill i { font-size: .9rem; } /* Badge */ .ib-rec-badge { position: absolute; top: 1.3rem; right: 1.3rem; padding: .5rem .85rem; border-radius: 18px; background: rgba(12, 32, 20, 0.95); color: #ffffff; text-align: right; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); } .ib-rec-badge-number { font-size: 1.05rem; font-weight: 700; line-height: 1.1; } .ib-rec-badge-label { font-size: var(--fs-xs); opacity: .85; } /* Content side */ .ib-rec-content { font-size: var(--fs-sm); color: var(--color-text); } .ib-rec-kicker { margin-bottom: .3rem; } .ib-rec-kicker-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .8rem; border-radius: 999px; background: rgba(41, 132, 72, 0.08); color: #2c7e4c; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-rec-kicker-pill i { font-size: .9rem; } .ib-rec-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-rec-subtitle { margin: .15rem 0 .5rem; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Text and blocks */ .ib-rec-text { margin: 0 0 .55rem; font-size: var(--fs-sm); color: var(--color-text); line-height: 1.7; text-align: justify; } .ib-rec-text-label { font-weight: 600; color: var(--color-primary); margin-top: .25rem; } .ib-rec-text-highlight { margin-top: .4rem; font-style: italic; color: var(--color-primary); } .ib-rec-block { margin-top: .8rem; } .ib-rec-block-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .4rem; font-size: var(--fs-md); color: var(--color-primary); } .ib-rec-block-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(31, 37, 92, 0.06); display: inline-flex; align-items: center; justify-content: center; } .ib-rec-block-icon i { font-size: .85rem; } /* Table shell */ .ib-rec-table-wrap { margin-top: .4rem; border-radius: 20px; border: 1px solid rgba(210, 224, 210, 0.95); background: #f4faf4; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06); overflow: hidden; } .ib-rec-table-headerbar { display: flex; justify-content: space-between; align-items: center; padding: .55rem .9rem; background: linear-gradient(120deg, #2f8c58, #1f255c); color: #ffffff; } .ib-rec-table-title { font-size: var(--fs-sm); font-weight: 600; } .ib-rec-table-hint { font-size: var(--fs-xs); opacity: .9; } .ib-rec-table-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; } /* Scrollbar for table */ .ib-rec-table-scroll::-webkit-scrollbar { height: 6px; } .ib-rec-table-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); } .ib-rec-table-scroll::-webkit-scrollbar-thumb { background: rgba(47, 140, 88, 0.5); border-radius: 999px; } /* Table */ .ib-rec-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: var(--fs-xs); } .ib-rec-table thead { background: #e6f3e9; } .ib-rec-table th, .ib-rec-table td { padding: .55rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(210, 224, 210, 0.9); } .ib-rec-table th { font-weight: 600; color: var(--color-primary); white-space: nowrap; } .ib-rec-table td { color: var(--color-text); } .ib-rec-table tbody tr:nth-child(2n) { background: rgba(239, 248, 240, 0.9); } .ib-rec-table tbody tr:hover { background: rgba(179, 215, 186, 0.18); } /* Mobile hint */ .ib-rec-table-hint-mobile { display: flex; align-items: center; gap: .35rem; padding: .35rem .7rem .55rem; font-size: var(--fs-xs); color: var(--color-text-soft); background: #f4faf4; } .ib-rec-table-hint-mobile i { font-size: .9rem; color: #2f8c58; } /* Lists */ .ib-rec-list { list-style: none; margin: 0 0 .55rem; padding: 0; display: grid; gap: .3rem; } .ib-rec-list-compact { gap: .25rem; } .ib-rec-list li { display: flex; align-items: flex-start; gap: .35rem; } .ib-rec-list i { font-size: .8rem; margin-top: .16rem; color: #2f8c58; } .ib-rec-list span { text-align: justify; } /* Applications */ .ib-rec-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .7rem; } .ib-rec-app-item { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); color: var(--color-text); } .ib-rec-app-item i { font-size: .9rem; color: #2f8c58; } /* Why choose grid */ .ib-rec-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .5rem; } .ib-rec-why-item { border-radius: 18px; padding: .55rem .6rem; background: #ffffff; border: 1px solid rgba(210, 224, 210, 0.95); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: flex-start; } .ib-rec-why-icon { width: 30px; height: 30px; border-radius: 999px; background: rgba(47, 140, 88, 0.12); display: inline-flex; align-items: center; justify-content: center; color: #2f8c58; } .ib-rec-why-icon i { font-size: .85rem; } .ib-rec-why-title { font-weight: 600; color: var(--color-primary); margin-bottom: .1rem; } .ib-rec-why-text { font-size: .8rem; color: var(--color-text-soft); text-align: justify; } /* Responsive */ @media (max-width: 991.98px) { .ib-rec-grid { grid-template-columns: minmax(0, 1fr); } .ib-rec-media { order: 1; } .ib-rec-content { order: 2; } } @media (max-width: 575.98px) { .ib-rec-section { padding-block: 2rem; } .ib-rec-card { padding: 1.1rem 1.1rem 1.3rem; border-radius: 20px; min-height: 290px; } .ib-rec-photo { inset: 1.1rem 1.1rem 3.2rem 1.1rem; } .ib-rec-pill { left: 1.2rem; bottom: 1.05rem; } .ib-rec-badge { top: 1.05rem; right: 1.05rem; } .ib-rec-app-grid { grid-template-columns: minmax(0, 1fr); } .ib-rec-why-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================ We are at work factory gallery ============================================ */ .ib-work-section { padding-block: clamp(2.5rem, 5vw, 3.5rem); background: radial-gradient(circle at 0 0, rgba(179, 185, 255, .06), transparent 55%), #f7f8fc; } .ib-work-header { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: clamp(1.5rem, 3vw, 2rem); } .ib-work-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .85rem; border-radius: 999px; background: rgba(31, 37, 92, 0.04); color: var(--color-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ib-work-kicker i { font-size: .9rem; } .ib-work-title { margin: .4rem 0 .25rem; font-size: clamp(1.5rem, 2.3vw, 2rem); color: var(--color-primary); line-height: var(--lh-tight); } .ib-work-subtitle { margin: 0; font-size: var(--fs-sm); color: var(--color-text-soft); } /* Grid layout */ .ib-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } /* Card */ .ib-work-card { position: relative; border-radius: 20px; background: #ffffff; border: 1px solid rgba(224, 224, 224, 0.95); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ib-work-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14); border-color: rgba(31, 37, 92, 0.18); } /* Image area */ .ib-work-media { position: relative; overflow: hidden; } .ib-work-media::before { content: ""; display: block; aspect-ratio: 4 / 3; } .ib-work-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform var(--dur-slow) var(--ease), filter var(--dur) var(--ease); } .ib-work-card:hover .ib-work-img { transform: scale(1.06); filter: brightness(1.04); } /* Overlay for subtle label */ .ib-work-overlay { position: absolute; inset: auto .7rem .7rem .7rem; padding: .4rem .6rem; border-radius: 999px; background: rgba(12, 14, 32, 0.85); color: #ffffff; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); backdrop-filter: blur(6px); } .ib-work-overlay i { font-size: .9rem; } .ib-work-overlay span { white-space: nowrap; } /* Card meta below image */ .ib-work-body { padding: .6rem .85rem .75rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .ib-work-label { font-size: var(--fs-xs); color: var(--color-text-soft); } .ib-work-counter { font-size: var(--fs-xs); color: var(--color-primary); font-weight: 600; } /* Button area */ .ib-work-actions { text-align: center; margin-top: 1.3rem; } .ib-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem 1.3rem; border-radius: 999px; border: 1px solid rgba(31, 37, 92, 0.25); background: #ffffff; color: var(--color-primary); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .ib-btn-secondary:hover { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); box-shadow: 0 12px 26px rgba(31, 37, 92, 0.30); transform: translateY(-1px); } .ib-btn-secondary:disabled { opacity: .6; cursor: default; box-shadow: none; transform: none; } /* Responsive */ @media (max-width: 991.98px) { .ib-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .ib-work-grid { grid-template-columns: minmax(0, 1fr); } }