/* ===================================================== KB Qube — Global Stylesheet Light · clean · premium editorial UI ===================================================== */ /* ---------- Design Tokens ---------- */ :root { /* Neutrals */ --bg: #ffffff; --bg-2: #f6f7f9; --bg-3: #eef1f5; --ink: #14171f; --ink-2: #3c4351; --muted: #6b7280; --muted-2: #9aa1ad; --line: #e7e9ee; --line-2: #dfe2e8; /* Brand (default theme: Emerald / Teal) */ --primary: #0d9488; --primary-600: #0f766e; --primary-700: #115e59; --primary-tint: #e2f6f2; --violet: #10b981; /* Accent tints (for icon chips) */ --t-indigo-bg:#eef0fe; --t-indigo:#4f46e5; --t-violet-bg:#f4ecff; --t-violet:#7c3aed; --t-teal-bg:#e4f6f2; --t-teal:#0d9488; --t-amber-bg:#fdf1e3; --t-amber:#c2710c; --t-rose-bg:#fdecf0; --t-rose:#e11d48; --t-blue-bg:#e8f1ff; --t-blue:#2563eb; /* Effects */ --grad-text: linear-gradient(100deg, #0d9488 0%, #10b981 55%, #06b6d4 100%); --grad-brand: linear-gradient(135deg, #0d9488 0%, #0e7490 100%); --glow-1: rgba(16, 185, 129, .12); --glow-2: rgba(6, 182, 212, .10); --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06); --shadow-sm: 0 2px 8px rgba(16, 24, 40, .06); --shadow-md: 0 10px 30px rgba(16, 24, 40, .08); --shadow-lg: 0 24px 60px rgba(16, 24, 40, .12); --ring: 0 0 0 4px rgba(13, 148, 136, .18); /* Metrics */ --radius: 16px; --radius-lg: 24px; --radius-sm: 10px; --container: 1180px; --header-h: 76px; --topbar-h: 42px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-head: "Plus Jakarta Sans", var(--font-body); } /* ===================================================== COLOR THEMES (set data-theme on ) default (no attribute) = Emerald / Teal ===================================================== */ [data-theme="blue"] { --primary: #2563eb; --primary-600: #1d4ed8; --primary-700: #1e40af; --primary-tint: #e6effe; --violet: #06b6d4; --grad-text: linear-gradient(100deg, #2563eb 0%, #3b82f6 55%, #06b6d4 100%); --grad-brand: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); --ring: 0 0 0 4px rgba(37, 99, 235, .18); --glow-1: rgba(37, 99, 235, .12); --glow-2: rgba(6, 182, 212, .10); } [data-theme="sunset"] { --primary: #f43f5e; --primary-600: #e11d48; --primary-700: #be123c; --primary-tint: #fde7ec; --violet: #7c3aed; --grad-text: linear-gradient(100deg, #fb7185 0%, #f43f5e 50%, #7c3aed 100%); --grad-brand: linear-gradient(135deg, #f43f5e 0%, #7c3aed 100%); --ring: 0 0 0 4px rgba(244, 63, 94, .18); --glow-1: rgba(244, 63, 94, .12); --glow-2: rgba(124, 58, 237, .10); } [data-theme="charcoal"] { --primary: #14171f; --primary-600: #000000; --primary-700: #000000; --primary-tint: #f0ece3; --violet: #d97706; --grad-text: linear-gradient(100deg, #14171f 15%, #b45309 100%); --grad-brand: linear-gradient(135deg, #1f242e 0%, #0f1115 100%); --ring: 0 0 0 4px rgba(20, 23, 31, .16); --glow-1: rgba(217, 119, 6, .14); --glow-2: rgba(20, 23, 31, .06); } /* ===================================================== DARK MODE (set data-mode="dark" on ) Layers on top of any accent theme. ===================================================== */ :root { --card: #ffffff; } [data-mode="dark"] { --bg: #0b0f17; --bg-2: #111726; --bg-3: #1a2233; --ink: #e9edf5; --ink-2: #c4ccda; --muted: #8b93a5; --muted-2: #6b7484; --line: #232c3d; --line-2: #2c3547; --card: #121a2a; --primary-tint: color-mix(in srgb, var(--primary) 24%, #0b0f17); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40); --shadow-sm: 0 3px 12px rgba(0, 0, 0, .45); --shadow-md: 0 14px 36px rgba(0, 0, 0, .50); --shadow-lg: 0 26px 64px rgba(0, 0, 0, .60); } /* surfaces that hardcode white */ [data-mode="dark"] .float-card, [data-mode="dark"] .btn-print, [data-mode="dark"] .page-hero.hl .badge, [data-mode="dark"] .card, [data-mode="dark"] .stats, [data-mode="dark"] .stat.boxed, [data-mode="dark"] .tl-card, [data-mode="dark"] .tech-group, [data-mode="dark"] .tech-pill, [data-mode="dark"] .project, [data-mode="dark"] .info-card, [data-mode="dark"] .form-card, [data-mode="dark"] .service-card, [data-mode="dark"] .model-card, [data-mode="dark"] .hcard, [data-mode="dark"] .tcard, [data-mode="dark"] .mv-card:not(.accent), [data-mode="dark"] .faq-item, [data-mode="dark"] .stat-chip, [data-mode="dark"] .ap-badge, [data-mode="dark"] .pf-filter, [data-mode="dark"] .btn-outline, [data-mode="dark"] .nav-toggle, [data-mode="dark"] .theme-switch .ts-btn, [data-mode="dark"] .theme-switch .ts-panel { background: var(--card); border-color: var(--line); } [data-mode="dark"] .header { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 12%, #0e1524) 0%, #0b0f17 92%); border-bottom-color: var(--line); } [data-mode="dark"] .header.scrolled { background: rgba(11, 15, 23, .92); } [data-mode="dark"] .page-hero.hl { background: radial-gradient(58% 72% at 50% -8%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--primary) 12%, #0e1524), #0b0f17); } [data-mode="dark"] .bg-tint { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, #0e1524), var(--bg)); } [data-mode="dark"] .legal-toc { background: linear-gradient(180deg, var(--card), var(--bg-2)); } [data-mode="dark"] .field input, [data-mode="dark"] .field textarea, [data-mode="dark"] .field select { background: var(--bg-2); border-color: var(--line-2); color: var(--ink); } /* readability tweaks for accents on dark */ [data-mode="dark"] .badge { color: color-mix(in srgb, var(--primary) 55%, #ffffff); } [data-mode="dark"] .nav-link.active { color: color-mix(in srgb, var(--primary) 62%, #ffffff); } [data-mode="dark"] .legal .updated { color: color-mix(in srgb, var(--primary) 60%, #ffffff); } [data-mode="dark"] .ts-mode.active { color: color-mix(in srgb, var(--primary) 62%, #ffffff); } [data-mode="dark"] .hero-badge-float { background: #0a0e17; } /* keep dark text on chips/buttons that stay white in dark mode */ [data-mode="dark"] .project-cover .tag-abs, [data-mode="dark"] .fc-visual .tag-abs, [data-mode="dark"] .pf-modal-cat, [data-mode="dark"] .pc-overlay .pc-btn { color: #14171f; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink-2); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: inherit; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .section { padding: 104px 0; position: relative; } .section-sm { padding: 72px 0; } .bg-soft { background: var(--bg-2); } /* faint brand-tinted band */ .bg-tint { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, #fff), color-mix(in srgb, var(--primary) 3%, #fff)); } /* hairline separators so adjacent sections read as distinct bands */ .section.line-top { border-top: 1px solid var(--line); } .section.line-bottom { border-bottom: 1px solid var(--line); } /* subtle dotted texture behind a section's content */ .bg-dots { position: relative; } .bg-dots > .container { position: relative; z-index: 1; } .bg-dots::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(var(--line-2) 1px, transparent 1px); background-size: 24px 24px; opacity: .45; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 55%, transparent 100%); } .text-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-center { text-align: center; } h1, h2, h3, h4, h5 { color: var(--ink); font-family: var(--font-head); font-weight: 700; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 12px; font-weight: 600; font-size: .95rem; letter-spacing: .1px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s; } .btn i { font-size: .9em; } .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-600); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(79,70,229,.28); } .btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--line-2); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .btn-ghost { color: var(--primary); padding: 10px 0; font-weight: 600; } .btn-ghost i { transition: transform .25s var(--ease); } .btn-ghost:hover i { transform: translateX(4px); } .btn-light { background: #fff; color: var(--primary); } .btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-block { width: 100%; justify-content: center; } /* ---------- Badge / eyebrow ---------- */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: var(--primary-tint); color: var(--primary-600); font-size: .76rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } /* ---------- Section heading ---------- */ .section-head { max-width: 660px; margin: 0 auto 64px; text-align: center; } .section-head .badge { margin-bottom: 18px; } .section-title { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.12; letter-spacing: -1px; font-weight: 800; } .section-subtitle { margin-top: 18px; color: var(--muted); font-size: 1.08rem; } /* ===================================================== TOP UTILITY BAR ===================================================== */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 1001; display: flex; align-items: center; background: var(--grad-brand); color: rgba(255, 255, 255, .92); font-size: .84rem; transition: transform .35s var(--ease); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; } .tb-left, .tb-right { display: flex; align-items: center; gap: 22px; } .tb-left a, .tb-loc { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9); transition: color .2s; } .tb-left a:hover { color: #fff; } .tb-left i, .tb-loc i { font-size: .82em; opacity: .85; } .tb-right .tb-follow { font-size: .8rem; color: rgba(255,255,255,.7); letter-spacing: .3px; } .tb-right a { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: .82rem; background: rgba(255, 255, 255, .12); color: #fff; transition: background .2s, color .2s, transform .2s; } .tb-right a:hover { background: rgba(255, 255, 255, .28); transform: translateY(-2px); } /* brand-coloured hovers */ .tb-right a[aria-label="X (Twitter)"]:hover { background: #ffffff; color: #000000; } .tb-right a[aria-label="LinkedIn"]:hover { background: #0a66c2; color: #fff; } .tb-right a[aria-label="Facebook"]:hover { background: #1877f2; color: #fff; } .tb-right a[aria-label="YouTube"]:hover { background: #ff0000; color: #fff; } body.scrolled .topbar { transform: translateY(-100%); } /* ===================================================== HEADER / NAV ===================================================== */ .header { position: fixed; top: var(--topbar-h); left: 0; right: 0; height: var(--header-h); z-index: 1000; display: flex; align-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, #ffffff) 0%, #ffffff 92%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line)); box-shadow: 0 6px 22px rgba(20, 24, 40, .06); transition: top .35s var(--ease), background .3s, box-shadow .3s, border-color .3s; } .header.scrolled { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, rgba(255,255,255,.95)) 0%, rgba(255,255,255,.95) 92%); box-shadow: 0 10px 30px rgba(20, 24, 40, .10); } body.scrolled .header { top: 0; } .nav { display: flex; align-items: center; justify-content: space-between; width: 100%; } .logo { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; letter-spacing: -.5px; display: flex; align-items: center; color: var(--ink); } .logo img { height: 56px; width: auto; display: block; filter: saturate(1.22) contrast(1.12) brightness(1.02) drop-shadow(0 4px 8px rgba(15, 20, 35, .30)) drop-shadow(0 1px 1px rgba(15, 20, 35, .35)) drop-shadow(0 0 10px rgba(224, 165, 65, .32)); animation: logoGlowLight 3.6s ease-in-out infinite; transition: transform .3s var(--ease); } .logo:hover img { transform: scale(1.05) translateY(-1px); animation-play-state: paused; filter: saturate(1.38) contrast(1.16) brightness(1.04) drop-shadow(0 7px 16px rgba(15, 20, 35, .36)) drop-shadow(0 1px 1px rgba(15, 20, 35, .4)) drop-shadow(0 0 22px rgba(224, 165, 65, .70)); } /* header sits on light — depth shadow + warm pulse for a richer metallic look */ @keyframes logoGlowLight { 0%, 100% { filter: saturate(1.20) contrast(1.11) brightness(1.02) drop-shadow(0 4px 8px rgba(15, 20, 35, .28)) drop-shadow(0 1px 1px rgba(15, 20, 35, .32)) drop-shadow(0 0 9px rgba(224, 165, 65, .30)); } 50% { filter: saturate(1.34) contrast(1.15) brightness(1.03) drop-shadow(0 5px 10px rgba(15, 20, 35, .32)) drop-shadow(0 1px 1px rgba(15, 20, 35, .36)) drop-shadow(0 0 18px rgba(224, 165, 65, .58)); } } /* footer sits on dark — stronger luminous pulse */ .footer .logo img { height: 66px; animation: logoGlow 3.6s ease-in-out infinite; } .footer .logo:hover img { animation-play-state: paused; transform: scale(1.04); } @keyframes logoGlow { 0%, 100% { filter: saturate(1.15) brightness(1.06) drop-shadow(0 0 10px rgba(226, 172, 80, .40)); } 50% { filter: saturate(1.28) brightness(1.14) drop-shadow(0 0 22px rgba(244, 194, 96, .72)); } } @media (prefers-reduced-motion: reduce) { .logo img { animation: none; filter: saturate(1.22) contrast(1.12) drop-shadow(0 4px 8px rgba(15,20,35,.3)) drop-shadow(0 0 10px rgba(224,165,65,.35)); } .footer .logo img { animation: none; filter: saturate(1.18) brightness(1.1) drop-shadow(0 0 16px rgba(232, 178, 86, .5)); } } .logo .mark { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 11px; border-radius: 10px; background: var(--grad-brand); color: #fff; font-size: .95rem; font-weight: 800; box-shadow: 0 6px 16px rgba(20, 24, 40, .22); transition: transform .3s var(--ease); } .logo:hover .mark { transform: rotate(-6deg) scale(1.05); } .nav-menu { display: flex; align-items: center; gap: 2px; } .nav-link { position: relative; isolation: isolate; padding: 10px 16px; font-size: .94rem; font-weight: 500; color: var(--ink-2); border-radius: 10px; transition: color .25s var(--ease); } /* subtle hover pill (sits behind text) */ .nav-link::before { content: ""; position: absolute; inset: 5px 6px; z-index: -1; border-radius: 9px; background: var(--primary-tint); opacity: 0; transform: scale(.85); transition: opacity .25s var(--ease), transform .25s var(--ease); } /* animated centre underline indicator */ .nav-link::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 0; height: 2px; border-radius: 2px; background: var(--grad-brand); transform: translateX(-50%); transition: width .3s var(--ease); } .nav-link:hover { color: var(--primary-600); } .nav-link:hover::before { opacity: 1; transform: scale(1); } .nav-link.active::after { width: 22px; } .nav-link.active { color: var(--primary-600); font-weight: 600; } .nav-cta { margin-left: 14px; } .nav-cta .btn { padding: 11px 22px; } .nav-cta .btn::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .74em; margin-left: 3px; transition: transform .25s var(--ease); } .nav-cta .btn:hover::after { transform: translateX(4px); } .nav-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; font-size: 1.2rem; color: var(--ink); border: 1px solid var(--line); background: #fff; transition: background .2s, color .2s, border-color .2s; } .nav-toggle:hover { color: var(--primary); border-color: var(--primary); } /* ===================================================== HERO ===================================================== */ .hero { position: relative; padding: calc(var(--header-h) + var(--topbar-h) + 66px) 0 90px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 78% 8%, var(--glow-2), transparent 60%), radial-gradient(55% 50% at 12% 4%, var(--glow-1), transparent 55%); } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; } .hero h1 { font-size: clamp(2.6rem, 5.2vw, 4rem); line-height: 1.06; letter-spacing: -1.8px; font-weight: 800; margin: 22px 0 20px; } .hero p.lead { font-size: 1.14rem; color: var(--muted); max-width: 520px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: var(--muted); font-size: .9rem; } .hero-trust .stars { color: #f59e0b; letter-spacing: 1px; } /* Hero visual — clean stacked cards */ .hero-visual { position: relative; height: 440px; } .hero-blob { position: absolute; inset: 0; margin: auto; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--glow-2), var(--glow-1) 60%, transparent 72%); filter: blur(10px); } .float-card { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 14px; min-width: 232px; animation: floaty 6s ease-in-out infinite; } .float-card .fc-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0; } .float-card h4 { font-size: .98rem; font-weight: 700; color: var(--ink); } .float-card p { font-size: .8rem; color: var(--muted); } .fc-1 { top: 6px; right: 0; z-index: 3; } .fc-1 .fc-icon { background: var(--t-indigo-bg); color: var(--t-indigo); } .fc-2 { top: 180px; left: 0; z-index: 4; animation-delay: .9s; } .fc-2 .fc-icon { background: var(--t-teal-bg); color: var(--t-teal); } .fc-3 { top: 324px; right: 8px; z-index: 2; animation-delay: 1.8s; } .fc-3 .fc-icon { background: var(--t-violet-bg); color: var(--t-violet); } .hero-badge-float { position: absolute; top: 120px; right: 46px; z-index: 5; background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-lg); animation: floaty 7s ease-in-out infinite; animation-delay: .4s; } .hero-badge-float .big { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; line-height: 1; } .hero-badge-float .small { font-size: .74rem; color: #cbd0da; margin-top: 4px; } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ===================================================== STATS ===================================================== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 72px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .stat { text-align: center; padding: 30px 20px; border-right: 1px solid var(--line); } .stat:last-child { border-right: none; } .stat .num { font-family: var(--font-head); font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; color: var(--ink); } .stat .num span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat .label { color: var(--muted); font-size: .88rem; margin-top: 6px; } /* stat used standalone (about page mini grid) */ .stat.boxed { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); } /* ===================================================== CARDS (generic) ===================================================== */ .card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; overflow: hidden; } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .card:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: var(--shadow-md); } .card:hover::before { transform: scaleX(1); } .card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; font-size: .9rem; color: var(--primary); } .card-link i { transition: transform .25s var(--ease); } .card:hover .card-link i { transform: translateX(5px); } .card-icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: var(--t-indigo-bg); color: var(--t-indigo); margin-bottom: 22px; } .card h3 { font-size: 1.22rem; font-weight: 700; margin-bottom: 10px; } .card p { color: var(--muted); font-size: .96rem; } /* rotate icon tints across grid children */ .grid-3 > .card:nth-child(6n+2) .card-icon, .grid-2 > .card:nth-child(4n+2) .card-icon { background: var(--t-violet-bg); color: var(--t-violet); } .grid-3 > .card:nth-child(6n+3) .card-icon { background: var(--t-teal-bg); color: var(--t-teal); } .grid-3 > .card:nth-child(6n+4) .card-icon, .grid-2 > .card:nth-child(4n+3) .card-icon { background: var(--t-amber-bg); color: var(--t-amber); } .grid-3 > .card:nth-child(6n+5) .card-icon { background: var(--t-rose-bg); color: var(--t-rose); } .grid-3 > .card:nth-child(6n+6) .card-icon, .grid-2 > .card:nth-child(4n+4) .card-icon { background: var(--t-blue-bg); color: var(--t-blue); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } /* Tag chips */ .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; } .tag { font-size: .76rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); } /* ===================================================== TIMELINE (Our Journey) ===================================================== */ .timeline { position: relative; max-width: 880px; margin: 0 auto; padding: 10px 0; } .timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line-2); transform: translateX(-50%); } .tl-item { position: relative; width: 50%; padding: 18px 40px; } .tl-item:nth-child(odd) { left: 0; text-align: right; } .tl-item:nth-child(even) { left: 50%; } .tl-item .tl-dot { position: absolute; top: 22px; width: 42px; height: 42px; border-radius: 50%; background: var(--grad-brand); border: 4px solid #fff; box-shadow: 0 6px 16px rgba(20, 24, 40, .18), 0 0 0 1px var(--line); display: grid; place-items: center; color: #fff; font-size: .95rem; } .tl-item:nth-child(odd) .tl-dot { right: -21px; } .tl-item:nth-child(even) .tl-dot { left: -21px; } .tl-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-xs); transition: transform .3s var(--ease), box-shadow .3s; } .tl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .tl-year { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--primary); } .tl-card h4 { font-size: 1.05rem; margin: 4px 0 8px; } .tl-card p { font-size: .92rem; color: var(--muted); } /* ===================================================== TECHNOLOGIES (skill bars) ===================================================== */ .tech-group { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-xs); transition: transform .3s var(--ease), box-shadow .3s; } .tech-group:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .tech-group h3 { font-size: 1.18rem; margin-bottom: 22px; display: flex; align-items: center; gap: 12px; } .tech-group h3 i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; background: var(--primary-tint); color: var(--primary); } .skill { margin-bottom: 18px; } .skill:last-child { margin-bottom: 0; } .skill-top { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 8px; color: var(--ink-2); } .skill-top span:last-child { color: var(--primary); font-weight: 700; } .skill-bar { height: 5px; border-radius: 999px; background: var(--bg-3); overflow: hidden; } .skill-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--violet)); transition: width 1.4s var(--ease); } /* ===================================================== PORTFOLIO ===================================================== */ .project { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-xs); transition: transform .35s var(--ease), box-shadow .35s; } .project:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .project-cover { height: 184px; display: grid; place-items: center; font-size: 2.8rem; color: #fff; position: relative; } .project-cover.c1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); } .project-cover.c2 { background: linear-gradient(135deg, #0ea5e9, #06b6d4); } .project-cover.c3 { background: linear-gradient(135deg, #f43f5e, #fb7185); } .project-cover i { opacity: .95; filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); } .project-cover .tag-abs { position: absolute; top: 14px; left: 14px; font-size: .68rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; background: rgba(255,255,255,.9); color: var(--ink); padding: 5px 12px; border-radius: 999px; } .project-body { padding: 24px; } .project-body h3 { font-size: 1.18rem; margin-bottom: 8px; } .project-body p { color: var(--muted); font-size: .93rem; margin-bottom: 16px; } .project-metric { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 700; color: #0d9488; background: var(--t-teal-bg); padding: 7px 13px; border-radius: 999px; } /* ===================================================== CONTACT ===================================================== */ .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: start; } .info-card { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 16px; box-shadow: var(--shadow-xs); transition: transform .3s var(--ease), box-shadow .3s; } .info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .info-card .ic { width: 52px; height: 52px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem; background: var(--primary-tint); color: var(--primary); } .info-card:nth-child(2) .ic { background: var(--t-teal-bg); color: var(--t-teal); } .info-card:nth-child(3) .ic { background: var(--t-violet-bg); color: var(--t-violet); } .info-card:nth-child(4) .ic { background: var(--t-amber-bg); color: var(--t-amber); } .info-card h4 { font-size: 1rem; margin-bottom: 2px; } .info-card p { color: var(--muted); font-size: .9rem; } .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); } .form-card h3 { font-size: 1.4rem; margin-bottom: 6px; } .form-card .muted { color: var(--muted); font-size: .92rem; margin-bottom: 26px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { margin-bottom: 18px; } .field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 8px; color: var(--ink-2); } .field input, .field textarea, .field select { width: 100%; padding: 13px 15px; border-radius: 11px; background: #fff; border: 1px solid var(--line-2); color: var(--ink); font-size: .95rem; transition: border-color .2s, box-shadow .2s; } .field input::placeholder, .field textarea::placeholder { color: var(--muted-2); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .field textarea { resize: vertical; min-height: 120px; } .form-note { margin-top: 14px; font-size: .88rem; text-align: center; min-height: 20px; } .form-note.ok { color: #0d9488; } .form-note.err { color: #e11d48; } /* Required marker + inline field errors */ .field label .req { color: #e11d48; margin-left: 2px; } .field-error { display: block; min-height: 0; font-size: .8rem; color: #e11d48; margin-top: 6px; opacity: 0; transform: translateY(-2px); transition: opacity .18s, transform .18s; } .field.invalid .field-error { opacity: 1; transform: none; } .field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225,29,72,.12); } .field-error::before { content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 5px; } /* Honeypot — visually hidden but present in the DOM for bots */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Trust cue near the form */ .form-trust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin: -14px 0 24px; } .form-trust .stars { color: #f59e0b; letter-spacing: 1px; font-size: .8rem; } /* Privacy reassurance under the form */ .form-privacy { margin-top: 14px; font-size: .78rem; color: var(--muted); text-align: center; } .form-privacy i { color: #0d9488; margin-right: 4px; } .form-privacy a { color: var(--primary); } /* "What happens next" steps */ .next-steps { margin-top: 22px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .next-steps h4 { font-size: 1.02rem; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .next-steps h4 i { color: var(--primary); } .ns-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .ns-list li { display: flex; gap: 14px; align-items: flex-start; } .ns-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff; background: var(--grad-brand); box-shadow: var(--shadow-sm); } .ns-list strong { display: block; font-size: .94rem; margin-bottom: 2px; } .ns-list p { color: var(--muted); font-size: .84rem; margin: 0; line-height: 1.5; } .ns-list li:not(:last-child) { position: relative; } .ns-list li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: -14px; width: 2px; background: var(--line-2); } /* WhatsApp button */ .btn-whatsapp { background: #25d366; color: #fff; } .btn-whatsapp:hover { background: #1ebe5b; transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; } /* ===================================================== CTA BANNER (dark focal block) ===================================================== */ .cta-banner { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 66px 50px; text-align: center; background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-lg); } .cta-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 60% at 85% 10%, rgba(255,255,255,.18), transparent 60%), radial-gradient(40% 60% at 10% 100%, rgba(255,255,255,.12), transparent 55%); } .cta-banner > * { position: relative; z-index: 1; } .cta-banner h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.8px; margin-bottom: 16px; } .cta-banner h2 .text-grad { background: linear-gradient(100deg,#fde68a,#fca5f1); -webkit-background-clip: text; background-clip: text; color: transparent; } .cta-banner p { color: rgba(255,255,255,.88); max-width: 560px; margin: 0 auto 30px; } /* ===================================================== PAGE HERO (inner pages) ===================================================== */ .page-hero { padding: calc(var(--header-h) + var(--topbar-h) + 54px) 0 56px; text-align: center; position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 60% at 50% 0%, var(--glow-1), transparent 60%); } /* highlighted hero variant (distinct tinted band) */ .page-hero.hl { background: radial-gradient(58% 72% at 50% -8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, #ffffff), color-mix(in srgb, var(--primary) 4%, #ffffff)); } .page-hero.hl::before { display: none; } .page-hero.hl .badge { background: #fff; box-shadow: var(--shadow-xs); } .page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.3rem); letter-spacing: -1.4px; font-weight: 800; margin: 18px 0 16px; } .page-hero p { color: var(--muted); max-width: 620px; margin: 0 auto; font-size: 1.1rem; } .breadcrumb { color: var(--muted-2); font-size: .88rem; margin-top: 20px; } .breadcrumb a:hover { color: var(--primary); } /* ===================================================== FOOTER (dark, refined) ===================================================== */ .footer { position: relative; overflow: hidden; background: linear-gradient(180deg, #12161f 0%, #0a0d13 100%); color: #aeb4c0; padding: 0 0 34px; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); } .footer-glow { position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 680px; height: 340px; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 34%, transparent), transparent 70%); opacity: .55; } .footer .container { position: relative; z-index: 1; } .footer .logo { margin-bottom: 18px; } /* newsletter strip */ .footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 46px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 50px; } .footer-cta h3 { color: #fff; font-size: 1.55rem; margin-bottom: 6px; letter-spacing: -.4px; } .footer-cta p { color: #8b93a2; font-size: .95rem; max-width: 440px; } .footer-sub { display: flex; gap: 10px; flex: 1; min-width: 290px; max-width: 460px; } .footer-sub input { flex: 1; padding: 13px 16px; border-radius: 12px; color: #fff; font-size: .94rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); transition: border-color .2s, box-shadow .2s; } .footer-sub input::placeholder { color: #7c8595; } .footer-sub input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 32%, transparent); } .footer-sub .btn { white-space: nowrap; } .sub-note { width: 100%; text-align: center; font-size: .86rem; margin-top: 6px; } .sub-note.ok { color: #6ee7b7; } .sub-note.err { color: #fca5a5; } /* main grid */ .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.3fr; gap: 44px; margin-bottom: 46px; } .footer-brand p { color: #8b93a2; font-size: .93rem; max-width: 330px; } .socials { display: flex; gap: 12px; margin-top: 24px; } .socials a { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; background: rgba(255, 255, 255, .06); color: #c3c9d4; border: 1px solid rgba(255, 255, 255, .09); transition: all .25s var(--ease); } .socials a:hover { color: #fff; transform: translateY(-4px); border-color: transparent; box-shadow: 0 10px 22px rgba(0, 0, 0, .35); } /* brand-coloured hovers */ .socials a[aria-label="X (Twitter)"]:hover { background: #ffffff; color: #000000; } .socials a[aria-label="LinkedIn"]:hover { background: #0a66c2; } .socials a[aria-label="Facebook"]:hover { background: #1877f2; } .socials a[aria-label="YouTube"]:hover { background: #ff0000; } .footer-col h5 { color: #fff; font-size: .98rem; margin-bottom: 20px; position: relative; padding-bottom: 12px; } .footer-col h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--grad-brand); } .footer-col ul li { margin-bottom: 12px; } .footer-col ul li a { display: inline-flex; align-items: center; gap: 8px; color: #8b93a2; font-size: .92rem; transition: color .2s, padding .2s; } .footer-col ul li a::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7rem; color: var(--primary); opacity: 0; margin-right: -14px; transition: opacity .2s, margin .2s; } .footer-col ul li a:hover { color: #fff; } .footer-col ul li a:hover::before { opacity: 1; margin-right: 0; } /* contact column */ .footer-contact ul li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; color: #8b93a2; font-size: .92rem; } .footer-contact ul li i { color: var(--primary); margin-top: 3px; width: 16px; text-align: center; } .footer-contact ul li a { color: #8b93a2; transition: color .2s; } .footer-contact ul li a:hover { color: #fff; } /* bottom bar */ .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #737b8a; font-size: .85rem; } .footer-legal { display: flex; gap: 22px; flex-wrap: wrap; } .footer-legal a { color: #737b8a; transition: color .2s; } .footer-legal a:hover { color: #fff; } /* ===================================================== SCROLL REVEAL & UTIL ===================================================== */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.visible { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } .reveal.d5 { transition-delay: .40s; } .to-top { position: fixed; bottom: 28px; right: 28px; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--primary); color: #fff; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(14px); transition: all .3s var(--ease); z-index: 900; } .to-top.show { opacity: 1; visibility: visible; transform: none; } .to-top:hover { transform: translateY(-3px); background: var(--primary-600); } /* hide floating controls when the footer is in view */ body.footer-visible .to-top, body.footer-visible .theme-switch { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); } /* ---------- Theme switcher ---------- */ .theme-switch { position: fixed; bottom: 28px; left: 28px; z-index: 950; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .theme-switch .ts-btn { width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--primary); font-size: 1.15rem; transition: transform .3s var(--ease), color .3s; } .theme-switch .ts-btn:hover { transform: translateY(-3px) rotate(-8deg); } .theme-switch .ts-panel { position: absolute; bottom: 58px; left: 0; width: 216px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 14px; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96); transform-origin: bottom left; transition: all .28s var(--ease); } .theme-switch.open .ts-panel { opacity: 1; visibility: visible; transform: none; } .ts-panel h6 { font-size: .68rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 10px; font-family: var(--font-head); font-weight: 700; } .ts-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; } .ts-mode { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2); font-size: .85rem; font-weight: 600; transition: all .2s var(--ease); } .ts-mode:hover { border-color: var(--primary); color: var(--primary); } .ts-mode.active { background: var(--primary-tint); color: var(--primary-600); border-color: transparent; } .ts-opt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: .88rem; color: var(--ink-2); text-align: left; transition: background .2s; } .ts-opt:hover { background: var(--bg-2); } .ts-opt.active { background: var(--primary-tint); color: var(--primary-600); font-weight: 600; } .ts-swatch { width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .ts-opt .ts-check { margin-left: auto; color: var(--primary); opacity: 0; font-size: .8rem; } .ts-opt.active .ts-check { opacity: 1; } @media (max-width: 768px) { .theme-switch { bottom: 84px; left: 20px; } } /* ===================================================== ABOUT PAGE ===================================================== */ /* hero stat chips */ .hero-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; } .stat-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 17px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); font-size: .9rem; font-weight: 500; color: var(--ink-2); } .stat-chip i { color: var(--primary); } .stat-chip b { color: var(--ink); font-family: var(--font-head); font-weight: 800; } /* story visual panel */ .about-visual { position: relative; } .about-panel { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 34px; background: var(--grad-brand); box-shadow: var(--shadow-lg); } .about-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 55% at 88% 12%, rgba(255,255,255,.20), transparent 60%), radial-gradient(40% 50% at 5% 100%, rgba(255,255,255,.12), transparent 55%); } .about-panel-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ap-stat { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; padding: 22px 16px; text-align: center; color: #fff; } .ap-stat .num { font-family: var(--font-head); font-size: 2rem; font-weight: 800; letter-spacing: -.5px; } .ap-stat .label { font-size: .8rem; color: rgba(255, 255, 255, .85); margin-top: 4px; } .ap-badge { position: absolute; bottom: -20px; right: -14px; z-index: 2; display: flex; align-items: center; gap: 12px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow-lg); } .ap-badge i { font-size: 1.5rem; color: var(--primary); } .ap-badge b { display: block; font-family: var(--font-head); font-size: 1.05rem; } .ap-badge span { font-size: .8rem; color: var(--muted); } /* checklist */ .feature-list { margin: 24px 0 28px; display: grid; gap: 13px; } .feature-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); font-size: .96rem; } .feature-list li i { margin-top: 3px; width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; font-size: .68rem; background: var(--primary-tint); color: var(--primary); } /* mission & vision */ .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .mv-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 38px; box-shadow: var(--shadow-xs); transition: transform .35s var(--ease), box-shadow .35s; } .mv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .mv-icon { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; background: var(--primary-tint); color: var(--primary); margin-bottom: 22px; } .mv-card h3 { font-size: 1.4rem; margin-bottom: 12px; } .mv-card p { color: var(--muted); } .mv-card.accent { background: var(--grad-brand); border-color: transparent; } .mv-card.accent::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 55% at 90% 10%, rgba(255,255,255,.18), transparent 60%); } .mv-card.accent > * { position: relative; z-index: 1; } .mv-card.accent h3 { color: #fff; } .mv-card.accent p { color: rgba(255, 255, 255, .9); } .mv-card.accent .mv-icon { background: rgba(255, 255, 255, .18); color: #fff; } /* why choose us — horizontal cards */ .hcard { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-xs); transition: transform .3s var(--ease), box-shadow .3s; } .hcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .hcard .hc-icon { width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.2rem; background: var(--primary-tint); color: var(--primary); } .hcard h4 { font-size: 1.1rem; margin-bottom: 6px; } .hcard p { color: var(--muted); font-size: .92rem; } /* ===================================================== SERVICES PAGE ===================================================== */ .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .service-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-xs); transition: transform .35s var(--ease), box-shadow .35s, border-color .3s; } .service-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-2); } .service-card:hover::after { transform: scaleX(1); } .svc-num { position: absolute; top: 26px; right: 30px; font-family: var(--font-head); font-size: 2.8rem; font-weight: 800; line-height: 1; letter-spacing: -1px; color: var(--bg-3); } .svc-icon { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; background: var(--primary-tint); color: var(--primary); margin-bottom: 22px; } .service-card h3 { font-size: 1.3rem; margin-bottom: 10px; } .service-card > p { color: var(--muted); font-size: .96rem; } .svc-foot { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; } .svc-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--primary); font-size: .92rem; } .svc-link i { transition: transform .25s var(--ease); } .service-card:hover .svc-link i { transform: translateX(5px); } /* rotate service icon tints */ .services-grid .service-card:nth-child(6n+1) .svc-icon { background: var(--t-indigo-bg); color: var(--t-indigo); } .services-grid .service-card:nth-child(6n+2) .svc-icon { background: var(--t-violet-bg); color: var(--t-violet); } .services-grid .service-card:nth-child(6n+3) .svc-icon { background: var(--t-teal-bg); color: var(--t-teal); } .services-grid .service-card:nth-child(6n+4) .svc-icon { background: var(--t-amber-bg); color: var(--t-amber); } .services-grid .service-card:nth-child(6n+5) .svc-icon { background: var(--t-rose-bg); color: var(--t-rose); } .services-grid .service-card:nth-child(6n+6) .svc-icon { background: var(--t-blue-bg); color: var(--t-blue); } /* process steps */ .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } .process-steps::before { content: ""; position: absolute; top: 32px; left: 13%; right: 13%; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px); z-index: 0; } .pstep { text-align: center; position: relative; z-index: 1; } .pstep-num { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; color: #fff; background: var(--grad-brand); box-shadow: 0 8px 20px rgba(20, 24, 40, .18); border: 4px solid #fff; } .pstep .pstep-ico { font-size: .95rem; color: var(--primary); margin-bottom: 8px; } .pstep h3 { font-size: 1.12rem; margin-bottom: 8px; } .pstep p { color: var(--muted); font-size: .92rem; } /* engagement models */ .model-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-xs); transition: transform .35s var(--ease), box-shadow .35s; } .model-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .model-card.featured { border-color: var(--primary); box-shadow: var(--shadow-md); } .model-card.featured .m-tag { position: absolute; top: -12px; left: 34px; background: var(--grad-brand); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 5px 13px; border-radius: 999px; } .m-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; background: var(--primary-tint); color: var(--primary); margin-bottom: 18px; } .model-card h3 { font-size: 1.25rem; margin-bottom: 8px; } .model-card .m-desc { color: var(--muted); font-size: .92rem; margin-bottom: 18px; } /* ===================================================== PARALLAX IMPACT BAND ===================================================== */ /* classic fixed-background parallax (image pinned, content scrolls over it) */ .parallax { position: relative; padding: 130px 0; color: #fff; background-color: #0b1020; background-image: linear-gradient(120deg, color-mix(in srgb, var(--primary) 34%, transparent) 0%, transparent 64%), linear-gradient(180deg, rgba(8, 12, 22, .52), rgba(8, 12, 22, .72)), url("../assets/impact-bg.png"); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } /* mobile browsers (esp. iOS) ignore fixed attachment — fall back to normal */ @media (max-width: 768px) { .parallax { background-attachment: scroll; } } .parallax .container { position: relative; z-index: 1; } .parallax .section-title { color: #fff; } .parallax .section-subtitle { color: rgba(255,255,255,.85); } .parallax .badge { background: rgba(255,255,255,.16); color: #fff; } .px-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; } .px-stats .ap-stat { padding: 26px 18px; } /* About page parallax variant (high-key B&W photo → darker overlay) */ .parallax.px-about { background-image: linear-gradient(120deg, color-mix(in srgb, var(--primary) 34%, transparent) 0%, transparent 60%), linear-gradient(180deg, rgba(8, 12, 22, .66), rgba(8, 12, 22, .82)), url("../assets/background_1.jpg"); } .px-quote { max-width: 880px; margin: 0 auto; text-align: center; } .px-quote-mark { display: inline-block; margin-bottom: 18px; font-size: 2.4rem; color: color-mix(in srgb, var(--primary) 55%, #ffffff); } .px-quote h2 { color: #fff; font-size: clamp(1.5rem, 3.1vw, 2.3rem); line-height: 1.34; letter-spacing: -.4px; font-weight: 700; } .px-quote-by { margin-top: 22px; color: rgba(255, 255, 255, .82); font-weight: 600; letter-spacing: .3px; } /* Services page parallax variant */ .parallax.px-services { background-image: linear-gradient(120deg, color-mix(in srgb, var(--primary) 34%, transparent) 0%, transparent 62%), linear-gradient(180deg, rgba(8, 12, 22, .58), rgba(8, 12, 22, .76)), url("../assets/background_2.jpg"); } /* Technologies page parallax variant (already-dark tech art → lighter overlay) */ .parallax.px-tech { background-image: linear-gradient(120deg, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 64%), linear-gradient(180deg, rgba(8, 12, 22, .46), rgba(8, 12, 22, .64)), url("../assets/background_3.png"); } /* Portfolio page parallax variant */ .parallax.px-portfolio { background-image: linear-gradient(120deg, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 64%), linear-gradient(180deg, rgba(8, 12, 22, .52), rgba(8, 12, 22, .68)), url("../assets/background_4.png"); } /* Contact page parallax variant */ .parallax.px-contact { background-image: linear-gradient(120deg, color-mix(in srgb, var(--primary) 32%, transparent) 0%, transparent 60%), linear-gradient(180deg, rgba(8, 12, 22, .56), rgba(8, 12, 22, .72)), url("../assets/background_4.jpg"); } /* ===================================================== TECHNOLOGIES PAGE ===================================================== */ /* stack cards: hover accent + per-category icon colour */ .tech-group { position: relative; overflow: hidden; } .tech-group::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .tech-group:hover::after { transform: scaleX(1); } .grid-3 > .tech-group:nth-child(6n+1) h3 i { background: var(--t-indigo-bg); color: var(--t-indigo); } .grid-3 > .tech-group:nth-child(6n+2) h3 i { background: var(--t-violet-bg); color: var(--t-violet); } .grid-3 > .tech-group:nth-child(6n+3) h3 i { background: var(--t-teal-bg); color: var(--t-teal); } .grid-3 > .tech-group:nth-child(6n+4) h3 i { background: var(--t-amber-bg); color: var(--t-amber); } .grid-3 > .tech-group:nth-child(6n+5) h3 i { background: var(--t-rose-bg); color: var(--t-rose); } .grid-3 > .tech-group:nth-child(6n+6) h3 i { background: var(--t-blue-bg); color: var(--t-blue); } /* scrolling tools marquee */ .tech-marquee { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 30s linear infinite; } .tech-marquee:hover .marquee-track { animation-play-state: paused; } .tech-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); font-weight: 600; font-size: .92rem; color: var(--ink); white-space: nowrap; } .tech-pill i { color: var(--primary); font-size: 1.1rem; } .integrations-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .integrations-row .tech-pill { transition: transform .2s var(--ease), border-color .2s, color .2s; } .integrations-row .tech-pill:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } } /* ===================================================== PORTFOLIO PAGE ===================================================== */ /* filter tabs */ .pf-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; } .pf-filter { padding: 9px 18px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 600; font-size: .88rem; transition: all .22s var(--ease); } .pf-filter:hover { border-color: var(--primary); color: var(--primary); } .pf-filter.active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); } /* card cover hover overlay + icon zoom */ .project-cover > i { transition: transform .45s var(--ease); } .project:hover .project-cover > i { transform: scale(1.12); } .pc-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(9, 13, 24, .55); opacity: 0; transition: opacity .3s var(--ease); } .project:hover .pc-overlay { opacity: 1; } .pc-overlay .pc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: .88rem; transform: translateY(10px); transition: transform .3s var(--ease); } .project:hover .pc-overlay .pc-btn { transform: none; } .pc-overlay .pc-btn i { color: var(--primary); } /* project card body extras */ .project-body .tags { margin: 0 0 16px; } .project-filtering .project { transition: opacity .3s var(--ease), transform .3s var(--ease); } .project.hide { display: none; } /* testimonials */ .tcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-xs); transition: transform .35s var(--ease), box-shadow .35s; } .tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .tcard .t-stars { color: #f59e0b; letter-spacing: 2px; margin-bottom: 14px; font-size: .9rem; } .tcard .t-quote { color: var(--ink-2); font-size: .98rem; line-height: 1.7; margin-bottom: 22px; } .tcard .t-author { display: flex; align-items: center; gap: 13px; } .t-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .95rem; background: var(--grad-brand); font-family: var(--font-head); } .t-author h5 { font-size: .98rem; margin-bottom: 1px; } .t-author span { font-size: .82rem; color: var(--muted); } /* ===================================================== LEGAL / POLICY PAGES ===================================================== */ /* two-column layout with sticky table of contents */ .legal-layout { display: grid; grid-template-columns: 260px 1fr; gap: 50px; align-items: start; max-width: 1080px; margin: 0 auto; } .legal-toc { position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 22px); background: linear-gradient(180deg, #ffffff, var(--bg-2)); border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; box-shadow: var(--shadow-sm); } .legal-toc h4 { display: flex; align-items: center; gap: 9px; font-size: .72rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .legal-toc h4 i { color: var(--primary); font-size: .9rem; } .legal-toc nav { position: relative; display: flex; flex-direction: column; gap: 1px; padding-left: 20px; max-height: 62vh; overflow-y: auto; /* thin, transparent scrollbar (faint on hover) */ scrollbar-width: thin; scrollbar-color: transparent transparent; } .legal-toc nav::-webkit-scrollbar { width: 4px; } .legal-toc nav::-webkit-scrollbar-track { background: transparent; } .legal-toc nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } .legal-toc nav:hover { scrollbar-color: color-mix(in srgb, var(--primary) 40%, transparent) transparent; } .legal-toc nav:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 38%, transparent); } /* vertical guide line */ .legal-toc nav::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line-2); } /* reading-progress fill along the guide */ .toc-progress { position: absolute; left: 5px; top: 8px; width: 2px; height: 0; border-radius: 2px; background: var(--grad-brand); z-index: 1; transition: height .12s linear; } .legal-toc a { position: relative; display: block; padding: 9px 12px; border-radius: 9px; font-size: .88rem; color: var(--ink-2); transition: background .2s, color .2s; } /* connector dot */ .legal-toc a::before { content: ""; position: absolute; left: -17px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); transition: all .25s var(--ease); z-index: 2; } .legal-toc a:hover { color: var(--ink); background: rgba(0, 0, 0, .035); } .legal-toc a:hover::before { border-color: var(--primary); transform: translateY(-50%) scale(1.15); } .legal-toc a.active { color: var(--primary-600); font-weight: 700; background: var(--primary-tint); } .legal-toc a.active::before { background: var(--primary); border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 32%, transparent); } /* toolbar (updated pill + print) */ .legal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; } .btn-print { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: .88rem; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); cursor: pointer; transition: border-color .2s, color .2s, transform .2s; } .btn-print:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); } .legal { max-width: 820px; margin: 0 auto; } .legal-layout .legal { max-width: none; margin: 0; } .legal h2 { scroll-margin-top: calc(var(--header-h) + var(--topbar-h) + 20px); } .legal-toolbar .updated { margin-bottom: 0; } @media (max-width: 992px) { .legal-layout { grid-template-columns: 1fr; gap: 26px; } .legal-toc { position: static; top: auto; } .legal-toc nav { flex-direction: row; flex-wrap: wrap; gap: 8px; padding-left: 0; max-height: none; } .legal-toc nav::before, .toc-progress { display: none; } .legal-toc a { background: #fff; border: 1px solid var(--line); } .legal-toc a::before { display: none; } } .legal .updated { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-tint); color: var(--primary-600); padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600; margin-bottom: 30px; } .legal .intro { font-size: 1.08rem; color: var(--ink-2); margin-bottom: 8px; } .legal h2 { font-size: 1.4rem; margin: 40px 0 14px; padding-top: 8px; display: flex; align-items: center; gap: 12px; } .legal h2 .n { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-size: .9rem; font-weight: 800; background: var(--primary-tint); color: var(--primary); font-family: var(--font-head); } .legal h3 { font-size: 1.08rem; margin: 22px 0 10px; } .legal p { color: var(--ink-2); margin-bottom: 16px; line-height: 1.8; } .legal ul { margin: 0 0 18px; padding-left: 22px; } .legal ul li { margin-bottom: 9px; color: var(--ink-2); line-height: 1.7; } .legal ul li::marker { color: var(--primary); } .legal a { color: var(--primary); font-weight: 600; } .legal a:hover { text-decoration: underline; } .legal .legal-note { margin-top: 40px; padding: 24px 26px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); font-size: .92rem; } /* TL;DR summary box */ .legal-tldr { margin: 4px 0 34px; padding: 22px 24px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary) 6%, var(--card)); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); box-shadow: var(--shadow-sm); } .legal-tldr h4 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 12px; } .legal-tldr h4 i { color: var(--primary); } .legal-tldr ul { margin: 0 0 4px; padding-left: 20px; } .legal-tldr li { margin-bottom: 7px; color: var(--ink-2); font-size: .92rem; } .btn-cookie-prefs { margin-top: 12px; padding: 9px 16px; font-size: .85rem; } /* Cookie / data table */ .table-scroll { overflow-x: auto; margin: 8px 0 4px; border-radius: var(--radius); border: 1px solid var(--line); } .legal-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 520px; } .legal-table th, .legal-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .legal-table thead th { background: var(--bg-2); font-weight: 700; color: var(--ink); } .legal-table tbody tr:last-child td { border-bottom: 0; } .legal-table code { font-size: .82em; background: var(--bg-2); padding: 1px 6px; border-radius: 5px; } /* Inline link-style button */ .linklike { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; cursor: pointer; text-decoration: underline; } .linklike:hover { opacity: .8; } /* Grievance Officer card */ .grievance-card { margin-top: 14px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: grid; gap: 14px; } .gr-row { display: flex; align-items: flex-start; gap: 13px; } .gr-row > i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: .9rem; } .gr-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; } .gr-row a { color: var(--primary); } /* ===================================================== CONTACT PAGE ===================================================== */ .contact-col-title { font-size: 1.3rem; margin-bottom: 6px; } .contact-col-sub { color: var(--muted); font-size: .92rem; margin-bottom: 24px; } /* map */ .map-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--bg-2); min-height: 400px; } /* fallback shown behind the map if the embed can't load */ .map-card .map-fallback { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--muted); } .map-card .map-fallback i { font-size: 2rem; color: var(--primary); margin-bottom: 10px; } .map-card iframe { position: relative; z-index: 1; width: 100%; height: 400px; border: 0; display: block; } /* FAQ accordion */ .faq { max-width: 840px; margin: 0 auto; } .faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; box-shadow: var(--shadow-xs); overflow: hidden; transition: box-shadow .25s, border-color .25s; } .faq-item[open] { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); box-shadow: var(--shadow-sm); } .faq-item summary { cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 600; font-size: 1rem; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: color .2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8rem; color: var(--primary); transition: transform .3s var(--ease); flex-shrink: 0; } .faq-item[open] summary { color: var(--primary-600); } .faq-item[open] summary::after { transform: rotate(180deg); } .faq-a { padding: 0 24px 20px; color: var(--muted); font-size: .95rem; line-height: 1.7; } /* ===================================================== ACCESSIBILITY ===================================================== */ .skip-link { position: absolute; left: 12px; top: -70px; z-index: 3000; background: var(--primary); color: #fff; padding: 11px 18px; border-radius: 10px; font-weight: 700; box-shadow: var(--shadow-md); transition: top .2s var(--ease); } .skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .float-card, .hero-badge-float, .marquee-track, .logo img { animation: none !important; } * { scroll-behavior: auto !important; } } /* ===================================================== COOKIE CONSENT ===================================================== */ .cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2500; max-width: 1000px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 18px 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; transform: translateY(20px); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease); } .cookie-bar.show { transform: none; opacity: 1; } .cookie-bar p { flex: 1; min-width: 240px; color: var(--ink-2); font-size: .9rem; margin: 0; } .cookie-bar a { color: var(--primary); font-weight: 600; } .cookie-bar a:hover { text-decoration: underline; } .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 480px) { .cookie-actions .btn { flex: 1; justify-content: center; } } /* ===================================================== HOME EXTRAS — trusted-by strip ===================================================== */ .trusted { padding: 46px 0; } .trusted-label { text-align: center; color: var(--muted); font-size: .82rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 24px; } .trusted-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; } .trusted-item { display: inline-flex; align-items: center; gap: 10px; color: var(--muted-2); font-weight: 700; font-size: 1.02rem; letter-spacing: .2px; transition: color .25s var(--ease), transform .25s var(--ease); } .trusted-item i { font-size: 1.2rem; } .trusted-item:hover { color: var(--primary); transform: translateY(-2px); } /* ---------- Team / Leadership ---------- */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .member { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 22px; text-align: center; box-shadow: var(--shadow-xs); transition: transform .35s var(--ease), box-shadow .35s; } .member:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .member-avatar { width: 90px; height: 90px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; color: #fff; background: var(--grad-brand); box-shadow: 0 8px 20px rgba(20, 24, 40, .20); } .member h4 { font-size: 1.12rem; margin-bottom: 2px; } .member .role { color: var(--primary); font-weight: 600; font-size: .88rem; margin-bottom: 12px; } .member p { color: var(--muted); font-size: .9rem; margin-bottom: 16px; } .member-socials { display: flex; gap: 8px; justify-content: center; } .member-socials a { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); transition: all .2s var(--ease); } .member-socials a:hover { background: var(--grad-brand); color: #fff; border-color: transparent; transform: translateY(-2px); } /* ---------- Awards / Recognition ---------- */ .awards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .award-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 20px; text-align: center; box-shadow: var(--shadow-xs); transition: transform .3s var(--ease), box-shadow .3s; } .award-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .aw-icon { width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 1.35rem; background: var(--primary-tint); color: var(--primary); } .award-item h4 { font-size: 1rem; margin-bottom: 4px; } .award-item p { color: var(--muted); font-size: .85rem; } /* ---------- Careers / Join us ---------- */ .join-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 44px 46px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .join-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 120% at 100% 0%, var(--glow-1), transparent 60%); } .join-card > * { position: relative; z-index: 1; } .join-icon { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; background: var(--primary-tint); color: var(--primary); flex-shrink: 0; } .join-body { flex: 1; min-width: 260px; } .join-body h3 { font-size: 1.5rem; margin-bottom: 6px; } .join-body p { color: var(--muted); max-width: 560px; } /* ===================================================== PORTFOLIO EXTRAS — filter counts, featured case, modal ===================================================== */ .project { cursor: pointer; } .pf-filter .cnt { margin-left: 5px; font-weight: 700; font-size: .85em; opacity: .6; } .pf-filter.active .cnt { opacity: 1; } /* featured case study */ .featured-case { display: grid; grid-template-columns: 1fr 1.15fr; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .fc-visual { position: relative; min-height: 320px; display: grid; place-items: center; font-size: 4.2rem; color: #fff; } .fc-visual.c1, .pf-modal-cover.c1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); } .fc-visual.c2, .pf-modal-cover.c2 { background: linear-gradient(135deg, #0ea5e9, #06b6d4); } .fc-visual.c3, .pf-modal-cover.c3 { background: linear-gradient(135deg, #f43f5e, #fb7185); } .fc-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; } .fc-visual .tag-abs { z-index: 2; } .fc-visual .tag-abs { position: absolute; top: 18px; left: 18px; font-size: .68rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; background: rgba(255,255,255,.9); color: var(--ink); padding: 5px 12px; border-radius: 999px; } .fc-content { padding: 40px 42px; } .fc-content h3 { font-size: 1.7rem; letter-spacing: -.5px; margin: 14px 0 12px; } .fc-content > p { color: var(--muted); margin-bottom: 8px; } .fc-cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; } /* detail modal */ .pf-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; } .pf-modal[hidden] { display: none; } .pf-modal-overlay { position: absolute; inset: 0; background: rgba(5, 8, 15, .72); backdrop-filter: blur(4px); } .pf-modal-card { position: relative; z-index: 1; width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: modalIn .3s var(--ease); } @keyframes modalIn { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } } .pf-modal-cover { height: 130px; display: grid; place-items: center; font-size: 2.8rem; color: #fff; position: relative; } .pf-modal-cat { position: absolute; top: 16px; left: 20px; font-size: .68rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; background: rgba(255,255,255,.9); color: var(--ink); padding: 5px 12px; border-radius: 999px; } .pf-modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 10px; background: rgba(0,0,0,.4); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; transition: background .2s; } .pf-modal-close:hover { background: rgba(0,0,0,.6); } .pf-modal-inner { padding: 24px 30px 30px; } .pf-modal-inner h3 { font-size: 1.5rem; letter-spacing: -.4px; margin-bottom: 6px; } .pf-modal-inner > p.lead { color: var(--muted); } .pd-block { margin-top: 20px; } .pd-block h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: 1.1px; color: var(--primary); margin-bottom: 8px; } .pd-block p { color: var(--muted); } .pd-block ul { margin: 0; padding-left: 20px; } .pd-block li { color: var(--ink-2); margin-bottom: 6px; } .pf-modal-foot { margin-top: 26px; } body.modal-open { overflow: hidden; } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width: 992px) { .mv-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } .px-stats { grid-template-columns: repeat(2, 1fr); } .team-grid, .awards-grid { grid-template-columns: repeat(2, 1fr); } .join-card { text-align: center; } .join-body { min-width: 100%; } .featured-case { grid-template-columns: 1fr; } .fc-visual { min-height: 200px; font-size: 3.2rem; } .process-steps { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; } .process-steps::before { display: none; } .hero-grid { grid-template-columns: 1fr; } .hero-visual { height: 380px; margin-top: 10px; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .tb-loc, .tb-right .tb-follow { display: none; } .tb-left, .tb-right { gap: 16px; } .topbar { font-size: .8rem; } } @media (max-width: 768px) { :root { --topbar-h: 0px; } .section { padding: 72px 0; } .process-steps { grid-template-columns: 1fr; gap: 28px; } /* hide utility bar on mobile, header sits at top */ .topbar { display: none; } .header { top: 0; } .nav-toggle { display: grid; place-items: center; } .nav-menu { position: fixed; top: var(--header-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; background: rgba(255,255,255,.98); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); border-radius: 0 0 20px 20px; box-shadow: var(--shadow-lg); padding: 16px 18px 24px; transform: translateY(-150%); transition: transform .45s var(--ease); max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav-menu.open { transform: translateY(0); } /* dark mode: elevated dark panel so it stays distinct and links stay readable */ [data-mode="dark"] .nav-menu { background: color-mix(in srgb, var(--primary) 8%, #10151f); border-color: var(--line); box-shadow: 0 22px 44px rgba(0, 0, 0, .55); } [data-mode="dark"] .nav-menu .nav-link { color: var(--ink); } [data-mode="dark"] .nav-menu li:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } /* staggered entrance */ .nav-menu li { opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .nav-menu.open li { opacity: 1; transform: none; } .nav-menu.open li:nth-child(1) { transition-delay: .06s; } .nav-menu.open li:nth-child(2) { transition-delay: .12s; } .nav-menu.open li:nth-child(3) { transition-delay: .18s; } .nav-menu.open li:nth-child(4) { transition-delay: .24s; } .nav-menu.open li:nth-child(5) { transition-delay: .30s; } .nav-menu.open li:nth-child(6) { transition-delay: .36s; } .nav-menu.open li:nth-child(7) { transition-delay: .42s; } /* mobile links: left accent bar instead of underline */ .nav-link { display: block; padding: 14px 16px; border-radius: 12px; font-weight: 500; } .nav-link::before { inset: 0; border-radius: 12px; } .nav-link::after { left: 0; top: 50%; bottom: auto; transform: translateY(-50%) scaleY(0); width: 3.5px; height: 56%; border-radius: 3px; transform-origin: center; transition: transform .25s var(--ease); } .nav-link:hover::before, .nav-link.active::before { opacity: 1; transform: scale(1); } .nav-link.active { background: transparent; } .nav-link:hover::after, .nav-link.active::after { transform: translateY(-50%) scaleY(1); width: 3.5px; } .nav-cta { margin: 10px 0 0; } .nav-cta .btn { width: 100%; justify-content: center; padding: 14px; } .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: none; } .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); } .grid-3, .grid-2 { grid-template-columns: 1fr; } .timeline::before { left: 20px; } .tl-item { width: 100%; left: 0 !important; text-align: left !important; padding: 12px 0 12px 64px; } .tl-item .tl-dot { left: -1px !important; right: auto !important; top: 18px; } .ap-badge { right: 10px; bottom: -18px; } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 34px; } .footer-cta { flex-direction: column; align-items: flex-start; gap: 18px; padding: 38px 0; margin-bottom: 40px; } .footer-sub { width: 100%; max-width: none; } .footer-bottom { flex-direction: column; text-align: center; } .cta-banner { padding: 46px 24px; } .hero-badge-float { right: 20px; } } @media (max-width: 560px) { /* comfortable side gutters + tighter vertical rhythm on phones */ .container { padding: 0 18px; } .team-grid { grid-template-columns: 1fr; } .join-card { padding: 32px 22px; } .section { padding: 60px 0; } .section-sm { padding: 46px 0; } .parallax { padding: 84px 0; } .section-head { margin-bottom: 40px; } /* trim card padding so content isn't cramped */ .card, .service-card, .mv-card, .form-card, .tech-group, .hcard, .info-card, .tcard, .model-card, .legal-toc { padding: 22px; } .cta-banner { padding: 42px 22px; } .about-panel { padding: 24px; } .legal-note { padding: 20px; } /* full-width primary actions */ .hero-actions .btn { width: 100%; justify-content: center; } .btn { padding: 12px 20px; } /* footer subscribe stacks */ .footer-sub { flex-direction: column; } .footer-sub .btn { width: 100%; justify-content: center; } /* map a touch shorter */ .map-card, .map-card iframe { min-height: 320px; height: 320px; } } @media (max-width: 460px) { .stats { grid-template-columns: 1fr; } .stat { border-right: none !important; border-bottom: 1px solid var(--line); } .stat:last-child { border-bottom: none; } .hero-actions .btn { width: 100%; justify-content: center; } .hero-visual { height: 400px; } .px-stats { grid-template-columns: 1fr; } .about-panel-grid { grid-template-columns: 1fr 1fr; } .hero h1 { letter-spacing: -1px; } }