/* ============================================================================ Kodevix — modern app theme Design tokens, app-shell (sidebar + topbar), animated & responsive components. Overrides Bootstrap 5 (loaded before this file). ============================================================================ */ :root { /* ---- Brand — tuned to the Kodevix logo mark (violet → indigo → magenta) ---- */ --brand-400: #a78bfa; --brand-500: #7c5cf0; --brand-600: #6a4fd6; --brand-700: #593fbc; --brand-accent: #cf4fdb; /* magenta chevron from the mark */ --brand-grad: linear-gradient(135deg, #6a5ad6 0%, #8b5cf6 52%, #cf4fdb 100%); --brand-grad-2: linear-gradient(135deg, #7c5cf0, #a855f7); --brand-soft: #efeafe; --brand-glow: rgba(124,92,240,.34); /* ---- Neutral surfaces (light theme) ---- */ --ink: #1b1836; --muted: #6b7090; --line: #eceef3; --bg: #f5f4fb; --card: #ffffff; --surface: #ffffff; /* raised cards / inputs */ --surface-2: #f6f5fc; /* subtle section band */ --surface-3: #fafbfe; /* table head, insets */ --glass: rgba(255,255,255,.82); /* sticky topbars */ --ring: rgba(124,92,240,.16); --ok: #16a34a; --ok-soft:#e7f6ee; --warn: #d97706; --warn-soft:#fdf1e0; --danger: #e5484d; --danger-soft:#fdecec; --info: #0ea5e9; --radius: 16px; --radius-sm: 11px; --shadow-sm: 0 1px 2px rgba(18,22,45,.06), 0 1px 3px rgba(18,22,45,.05); --shadow: 0 4px 20px rgba(24,27,53,.07); --shadow-lg: 0 18px 50px rgba(24,27,53,.14); --sidebar-w: 256px; --topbar-h: 62px; --ease: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.22, 1, .36, 1); /* overshoot-y "pro" easing for reveals */ } /* ---- Dark theme — set by the no-flash script on ---- */ :root[data-theme="dark"] { --ink: #f1efff; --muted: #9fa1c4; --line: rgba(255,255,255,.10); --bg: #0b0d18; --card: #16162b; --surface: #191932; --surface-2: #101020; --surface-3: #1d1d38; --glass: rgba(14,15,28,.78); --brand-soft: rgba(124,92,240,.18); --ring: rgba(167,139,250,.28); --ok-soft: rgba(22,163,74,.18); --warn-soft: rgba(217,119,6,.18); --danger-soft: rgba(229,72,77,.18); --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 6px 24px rgba(0,0,0,.5); --shadow-lg: 0 24px 60px rgba(0,0,0,.62); color-scheme: dark; } * { box-sizing: border-box; } html { position: relative; min-height: 100%; } body { font-family: var(--app-font, 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; letter-spacing: -.01em; margin: 0; } a { color: var(--brand-600); text-decoration: none; } a:hover { color: var(--brand-700); } h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -.02em; } /* ---- App shell ---------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: linear-gradient(185deg, #211d43 0%, #16132e 100%); color: #cdd0e4; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 1040; transition: transform .32s var(--ease); } .sidebar-brand { display: flex; align-items: center; gap: .6rem; height: var(--topbar-h); padding: 0 1.4rem; font-weight: 800; font-size: 1.3rem; color: #fff; letter-spacing: -.03em; } .sidebar-brand .logo-dot { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-grad); display: grid; place-items: center; color: #fff; font-size: .95rem; box-shadow: 0 6px 16px rgba(109,94,252,.5); } .sidebar-brand .brand-logo-wrap { height: 34px; display: inline-flex; align-items: center; } .sidebar-brand .brand-logo { max-height: 34px; max-width: 150px; border-radius: 8px; display: block; } .sidebar-brand .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; } .sidebar-nav { flex: 1; overflow-y: auto; padding: .8rem .8rem 1.5rem; } .sidebar-heading { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #6f739a; font-weight: 700; padding: 1rem .8rem .4rem; } .sidebar-nav a { display: flex; align-items: center; gap: .75rem; padding: .62rem .8rem; margin-bottom: 2px; border-radius: 11px; color: #c4c7de; font-weight: 500; font-size: .93rem; transition: background .18s, color .18s, transform .18s; } .sidebar-nav a i { width: 20px; text-align: center; font-size: .95rem; opacity: .85; } .sidebar-nav a:hover { background: rgba(255,255,255,.06); color: #fff; } .sidebar-nav a.active { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 20px rgba(109,94,252,.35); } .sidebar-nav a.active i { opacity: 1; } .sidebar-foot { padding: 1rem; border-top: 1px solid rgba(255,255,255,.07); } .sidebar-user { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: none; } .sidebar-user .u-name { color: #fff; font-weight: 600; font-size: .88rem; line-height: 1.1; } .sidebar-user .u-role { color: #8a8eb5; font-size: .74rem; } .main-area { flex: 1; min-width: 0; margin-inline-start: var(--sidebar-w); display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); position: sticky; top: 0; z-index: 1020; background: var(--glass); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; padding: 0 1.6rem; } .topbar-title { font-weight: 700; font-size: 1.05rem; } .topbar-toggle { display: none; border: 0; background: transparent; font-size: 1.4rem; color: var(--ink); cursor: pointer; line-height: 1; } .topbar-right { margin-inline-start: auto; display: flex; align-items: center; gap: .8rem; } /* fill-mode `backwards` (not `both`): the fadeUp transform must NOT persist after the animation ends, or `.content` stays a stacking context and traps Bootstrap modals / their backdrop (dark overlay you can't click through). */ .content { padding: 1.9rem 1.6rem; max-width: 1180px; width: 100%; animation: fadeUp .45s var(--ease) backwards; } .app-footer { padding: 1rem 1.6rem; color: var(--muted); font-size: .82rem; border-top: 1px solid var(--line); } /* mobile drawer */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(20,22,40,.5); opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 1035; } @media (max-width: 992px) { .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); } body.sb-open .sidebar { transform: translateX(0); } body.sb-open .sidebar-overlay { opacity: 1; visibility: visible; } .main-area { margin-inline-start: 0; } .topbar-toggle { display: block; } .content { padding: 1.2rem 1rem; } } /* ---- Marketing (anonymous) shell --------------------------------------- */ .site-topbar { height: var(--topbar-h); display: flex; align-items: center; gap: 1rem; padding: 0 clamp(1rem, 5vw, 3rem); position: sticky; top: 0; z-index: 20; background: var(--glass); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .site-topbar .brand { font-weight: 800; font-size: 1.35rem; display: flex; align-items: center; gap: .55rem; color: var(--ink); } .marketing-main { max-width: 1120px; margin: 0 auto; padding: 0 1.2rem; animation: fadeUp .5s var(--ease) both; } /* ---- Buttons ------------------------------------------------------------ */ .btn { border-radius: 11px; font-weight: 600; padding: .5rem 1.05rem; transition: transform .12s var(--ease), box-shadow .2s, filter .2s; border: 1px solid transparent; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand-grad); border: 0; box-shadow: 0 8px 18px rgba(109,94,252,.32); } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); box-shadow: 0 10px 24px rgba(109,94,252,.42); } .btn-lg { padding: .72rem 1.5rem; font-size: 1.02rem; border-radius: 13px; } .btn-sm { padding: .32rem .7rem; border-radius: 9px; font-size: .82rem; } .btn-outline-primary { border-color: #d9d5fb; color: var(--brand-600); background: var(--surface); } .btn-outline-primary:hover { background: var(--brand-soft); color: var(--brand-700); border-color: #c8c2f8; } .btn-outline-secondary { border-color: var(--line); color: var(--muted); background: var(--surface); } .btn-outline-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); } .btn-outline-danger { border-color: #f4c9cb; color: var(--danger); background: var(--surface); } .btn-outline-danger:hover { background: var(--danger-soft); color: #c0353a; } .btn-success { background: var(--ok); border: 0; } .btn-link { color: var(--muted); font-weight: 500; } /* ---- Cards -------------------------------------------------------------- */ .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); transition: box-shadow .25s var(--ease), transform .25s var(--ease); overflow: hidden; } .card:hover { box-shadow: var(--shadow); } .card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 700; padding: .95rem 1.15rem; } .card-body { padding: 1.15rem; } .card-title { font-weight: 700; } /* lift-on-hover for interactive feature/stat cards */ .lift { transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* stat tile */ .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .stat .stat-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.05rem; margin-bottom: .7rem; background: var(--brand-grad); } .stat .stat-num { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; } .stat .stat-lbl { color: var(--muted); font-size: .82rem; margin-top: .25rem; } .stat.g1 .stat-ico { background: linear-gradient(135deg,#6d5efc,#9b5cf6); } .stat.g2 .stat-ico { background: linear-gradient(135deg,#0ea5e9,#22d3ee); } .stat.g3 .stat-ico { background: linear-gradient(135deg,#16a34a,#4ade80); } .stat.g4 .stat-ico { background: linear-gradient(135deg,#f59e0b,#fbbf24); } .stat.g5 .stat-ico { background: linear-gradient(135deg,#ef4444,#fb7185); } .stat.g6 .stat-ico { background: linear-gradient(135deg,#8b5cf6,#c084fc); } /* ---- Page header -------------------------------------------------------- */ .page-head { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; } .page-head h1 { font-size: 1.55rem; margin: 0; } .page-head .sub { color: var(--muted); font-size: .9rem; margin: .1rem 0 0; } .page-head .spacer { margin-inline-start: auto; } /* ---- Tables ------------------------------------------------------------- */ .table-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .table { margin: 0; } .table thead th { background: var(--surface-3); border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; padding: .8rem 1rem; } .table tbody td { padding: .82rem 1rem; border-color: var(--line); vertical-align: middle; color: var(--ink); } .table tbody tr { transition: background .15s; } .table-hover tbody tr:hover { background: var(--surface-3); } /* ---- Forms -------------------------------------------------------------- */ .form-label { font-weight: 600; font-size: .86rem; color: var(--ink); margin-bottom: .35rem; } .form-control, .form-select { border-radius: 11px; border: 1px solid var(--line); padding: .6rem .85rem; transition: border-color .18s, box-shadow .18s; background: var(--surface); color: var(--ink); } .form-control::placeholder { color: var(--muted); opacity: .7; } .form-control:focus, .form-select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px var(--ring); } .form-control-lg { padding: .8rem 1rem; border-radius: 13px; } .form-check-input:checked { background-color: var(--brand-500); border-color: var(--brand-500); } .form-check-input:focus { box-shadow: 0 0 0 4px var(--ring); border-color: var(--brand-500); } .input-group .btn { border-radius: 0 11px 11px 0; } .input-group .form-control:first-child { border-radius: 11px 0 0 11px; } /* auth card */ .auth-wrap { min-height: calc(100vh - var(--topbar-h)); display: grid; place-items: center; padding: 2rem 1rem; } .auth-card { width: 100%; max-width: 430px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 2.2rem; border: 1px solid var(--line); animation: pop .4s var(--ease) both; } .auth-card.wide { max-width: 540px; } /* ---- Badges & alerts ---------------------------------------------------- */ .badge { font-weight: 600; padding: .4em .7em; border-radius: 8px; letter-spacing: 0; } .badge.bg-success { background: var(--ok-soft) !important; color: #128a3e !important; } .badge.bg-secondary { background: #eef0f5 !important; color: #5b6376 !important; } .badge.bg-warning { background: var(--warn-soft) !important; color: #b45c09 !important; } .badge.bg-info { background: #e2f5fd !important; color: #0b7fb0 !important; } .badge.bg-primary { background: var(--brand-soft) !important; color: var(--brand-700) !important; } .badge.bg-light { background: #f3f4f8 !important; color: #5b6376 !important; border: 1px solid var(--line); } .alert { border: 0; border-radius: 13px; padding: .85rem 1.1rem; font-weight: 500; box-shadow: var(--shadow-sm); animation: slideIn .35s var(--ease) both; } .alert-success { background: var(--ok-soft); color: #12703a; } .alert-danger { background: var(--danger-soft); color: #b3373b; } .alert-warning { background: var(--warn-soft); color: #9a5008; } /* pill signout in topbar */ .user-chip { display: flex; align-items: center; gap: .55rem; padding: .3rem .3rem .3rem .3rem; } .user-chip .u-name { font-weight: 600; font-size: .86rem; } .user-chip .avatar { width: 34px; height: 34px; font-size: .82rem; } /* ---- Hero (landing) ----------------------------------------------------- */ .hero { position: relative; text-align: center; padding: 4.5rem 1rem 3.5rem; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -40% 10% auto; height: 460px; background: radial-gradient(closest-side, rgba(155,92,246,.22), transparent 70%), radial-gradient(closest-side, rgba(109,94,252,.20), transparent 70%); background-position: 20% 0, 80% 10%; background-repeat: no-repeat; z-index: 0; filter: blur(8px); } .hero > * { position: relative; z-index: 1; } .hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -.035em; } .hero .grad-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lead { color: var(--muted); font-size: 1.12rem; max-width: 640px; margin: 1.1rem auto 1.8rem; } .eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--brand-700); background: var(--brand-soft); padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1.2rem; } .feature-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 1.2rem; margin-bottom: .9rem; background: var(--brand-grad); } /* ---- Animations --------------------------------------------------------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes pop { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } } @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } /* stagger children of a grid/row for a subtle cascade */ .stagger > * { animation: fadeUp .5s var(--ease) both; } .stagger > *:nth-child(1){animation-delay:.02s} .stagger > *:nth-child(2){animation-delay:.07s} .stagger > *:nth-child(3){animation-delay:.12s} .stagger > *:nth-child(4){animation-delay:.17s} .stagger > *:nth-child(5){animation-delay:.22s} .stagger > *:nth-child(6){animation-delay:.27s} @media (prefers-reduced-motion: reduce) { *, .content, .auth-card, .stagger > * { animation: none !important; transition: none !important; } .js .reveal { opacity: 1 !important; transform: none !important; } } /* pill选择 (easy-tap single-select for registration) */ .pill-group { display: flex; flex-wrap: wrap; gap: .5rem; } .pill-group input { position: absolute; opacity: 0; width: 0; height: 0; } .pill-group label { cursor: pointer; padding: .6rem 1.05rem; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .92rem; color: #475066; background: var(--surface); transition: all .15s var(--ease); margin: 0; } .pill-group label:hover { border-color: #cfc9f6; } .pill-group input:checked + label { background: var(--brand-soft); border-color: var(--brand-500); color: var(--brand-700); box-shadow: 0 0 0 3px var(--ring); } .field-label { font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: .45rem; display: block; } /* ============================================================================ Marketing / company homepage ============================================================================ */ .marketing-main { max-width: none; margin: 0; padding: 0; } .mkt-container { max-width: 1160px; margin: 0 auto; padding: 0 1.3rem; } .mkt-section { padding: 5rem 0; } .mkt-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: var(--brand-700); background: var(--brand-soft); padding: .4rem .9rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; } .mkt-h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin: .8rem 0 0; letter-spacing: -.03em; } .mkt-center { text-align: center; } .mkt-sub { color: var(--muted); font-size: 1.08rem; max-width: 640px; margin: .9rem auto 0; line-height: 1.6; } .grad-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* nav links in the marketing topbar */ .site-topbar .mkt-nav { display: none; gap: .3rem; margin: 0 auto; } .site-topbar .mkt-nav a { color: var(--muted); font-weight: 600; font-size: .92rem; padding: .5rem .8rem; border-radius: 9px; transition: color .18s, background .18s; } .site-topbar .mkt-nav a:hover { color: var(--brand-700); background: var(--brand-soft); } @media (min-width: 860px) { .site-topbar .mkt-nav { display: flex; } } /* Hero */ .mkt-hero { position: relative; overflow: hidden; padding: 5rem 0 4.5rem; } .mkt-hero::before { content: ""; position: absolute; inset: -30% -10% auto; height: 620px; z-index: 0; filter: blur(6px); background: radial-gradient(closest-side, rgba(155,92,246,.20), transparent 70%), radial-gradient(closest-side, rgba(14,165,233,.16), transparent 72%), radial-gradient(closest-side, rgba(109,94,252,.20), transparent 70%); background-position: 12% 0, 88% 6%, 60% 18%; background-repeat: no-repeat; } .mkt-hero .mkt-container { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 940px) { .mkt-hero .mkt-container { grid-template-columns: 1.05fr .95fr; } } .mkt-hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.08; letter-spacing: -.035em; margin: 1.1rem 0 0; } .mkt-hero p.lead { color: var(--muted); font-size: 1.15rem; line-height: 1.6; margin: 1.1rem 0 1.8rem; max-width: 540px; } .mkt-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; } .mkt-hero-badges { display: flex; gap: 1.4rem; margin-top: 2rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; font-weight: 500; } .mkt-hero-badges i { color: var(--ok); margin-inline-end: .35rem; } /* Hero visual — stylized dashboard mockup */ .mkt-mock { position: relative; } .mkt-mock .win { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); animation: floaty 6s ease-in-out infinite; } .mkt-mock .bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface-3); } .mkt-mock .bar span { width: 11px; height: 11px; border-radius: 50%; background: #e4e7ef; } .mkt-mock .bar span:nth-child(1) { background: #ff6058; } .mkt-mock .bar span:nth-child(2) { background: #ffbd2e; } .mkt-mock .bar span:nth-child(3) { background: #28c840; } .mkt-mock .body { padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; } .mkt-mock .tile { border-radius: 12px; padding: .8rem; color: #fff; } .mkt-mock .tile .n { font-size: 1.5rem; font-weight: 800; } .mkt-mock .tile .l { font-size: .68rem; opacity: .9; } .mkt-mock .rows { grid-column: 1/-1; display: flex; flex-direction: column; gap: .5rem; margin-top: .3rem; } .mkt-mock .rows .r { height: 34px; border-radius: 9px; background: var(--surface-2); position: relative; overflow: hidden; } .mkt-mock .rows .r::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; background: var(--brand-grad); } .mkt-mock .rows .r:nth-child(1)::after { width: 78%; } .mkt-mock .rows .r:nth-child(2)::after { width: 54%; background: linear-gradient(135deg,#0ea5e9,#22d3ee); } .mkt-mock .rows .r:nth-child(3)::after { width: 33%; background: linear-gradient(135deg,#16a34a,#4ade80); } .mkt-mock .floaty-chip { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: .7rem .9rem; font-weight: 700; font-size: .82rem; display: flex; align-items: center; gap: .5rem; } .mkt-mock .chip1 { top: -18px; right: 8%; animation: floaty 5s ease-in-out infinite; } .mkt-mock .chip2 { bottom: -16px; left: 4%; animation: floaty 7s ease-in-out .5s infinite; } .mkt-mock .chip i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--brand-grad); } @keyframes floaty { 0%,100% { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) translateY(0); } 50% { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg) translateY(-12px); } } /* Services / feature grid */ .mkt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1.4rem; } .mkt-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.7rem; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; } .mkt-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-400); } .mkt-card .ico { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; color: #fff; font-size: 1.35rem; margin-bottom: 1rem; } .mkt-card h3 { font-size: 1.2rem; margin: 0 0 .5rem; } .mkt-card p { color: var(--muted); line-height: 1.55; margin: 0 0 1rem; font-size: .96rem; } .mkt-card .more { font-weight: 700; color: var(--brand-600); font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem; } .mkt-card:hover .more { gap: .6rem; } .g-a { background: linear-gradient(135deg,#6d5efc,#9b5cf6); } .g-b { background: linear-gradient(135deg,#0ea5e9,#22d3ee); } .g-c { background: linear-gradient(135deg,#16a34a,#4ade80); } .g-d { background: linear-gradient(135deg,#ef4444,#fb7185); } .g-e { background: linear-gradient(135deg,#f59e0b,#fbbf24); } .g-f { background: linear-gradient(135deg,#8b5cf6,#c084fc); } /* Stats band (dark) */ .mkt-band-dark { background: linear-gradient(160deg,#211d43,#16132e); color: #fff; } .mkt-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; text-align: center; } @media (min-width: 720px) { .mkt-stats { grid-template-columns: repeat(4, 1fr); } } .mkt-stats .n { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em; background: linear-gradient(135deg,#a78bfa,#22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; } .mkt-stats .l { color: #b7bad6; margin-top: .3rem; font-weight: 500; } /* About / values */ .mkt-two { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } @media (min-width: 900px) { .mkt-two { grid-template-columns: 1fr 1fr; } } .mkt-two p { color: var(--muted); line-height: 1.7; } .mkt-founder { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); } .mkt-founder .av { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: grid; place-items: center; font-weight: 800; } .mkt-value { display: flex; gap: 1rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: 1rem; transition: transform .2s var(--ease), box-shadow .2s; } .mkt-value:hover { transform: translateX(4px); box-shadow: var(--shadow); } .mkt-value .vi { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 1.1rem; } .mkt-value h4 { margin: 0 0 .2rem; font-size: 1.05rem; } .mkt-value p { margin: 0; font-size: .92rem; } /* Tagline band */ .mkt-tagline { background: var(--brand-grad); color: #fff; text-align: center; position: relative; overflow: hidden; } .mkt-tagline::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 20% 0, rgba(255,255,255,.18), transparent), radial-gradient(600px 200px at 90% 100%, rgba(255,255,255,.14), transparent); } .mkt-tagline h2 { font-size: clamp(1.8rem, 4.5vw, 3rem); margin: 0; position: relative; } .mkt-tagline p { opacity: .95; font-size: 1.15rem; margin: .8rem 0 0; position: relative; } /* Testimonials */ .mkt-quote { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.6rem; box-shadow: var(--shadow-sm); } .mkt-quote .stars { color: #f59e0b; margin-bottom: .6rem; } .mkt-quote p { font-style: italic; color: var(--ink); line-height: 1.6; } .mkt-quote .who { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; } .mkt-quote .who .av { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: grid; place-items: center; font-weight: 700; } .mkt-quote .who .nm { font-weight: 700; font-size: .92rem; } .mkt-quote .who .rl { color: var(--muted); font-size: .8rem; } /* Contact */ .mkt-contact { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 880px) { .mkt-contact { grid-template-columns: .9fr 1.1fr; } } .mkt-cinfo { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 0; } .mkt-cinfo .ci { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 1.05rem; background: var(--brand-grad); } .mkt-cinfo .lbl { font-size: .8rem; color: var(--muted); } .mkt-cinfo .val { font-weight: 700; } .mkt-form { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.8rem; box-shadow: var(--shadow); } /* Footer */ .mkt-footer { background: #14122a; color: #b7bad6; padding: 3.5rem 0 1.5rem; } .mkt-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; } @media (max-width: 720px) { .mkt-footer .cols { grid-template-columns: 1fr 1fr; } } .mkt-footer .brand { color: #fff; font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; } .mkt-footer h5 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .8rem; } .mkt-footer a { color: #b7bad6; display: block; padding: .28rem 0; font-size: .93rem; } .mkt-footer a:hover { color: #fff; } .mkt-footer .bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.3rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; font-size: .85rem; } /* misc */ .text-muted { color: var(--muted) !important; } .shadow-soft { box-shadow: var(--shadow); } .fw-semibold { font-weight: 600; } hr { border-color: var(--line); opacity: 1; } ::selection { background: rgba(124,92,240,.24); } /* ============================================================================ Theme toggle · scroll-reveal · solutions · mobile nav (added redesign) ============================================================================ */ /* ---- Theme (dark/light) toggle button ---- */ .theme-toggle { width: 40px; height: 40px; flex: none; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 1rem; transition: background .2s var(--ease), color .2s, transform .15s, border-color .2s; } .theme-toggle:hover { background: var(--surface-2); transform: translateY(-1px); border-color: var(--brand-400); color: var(--brand-500); } .theme-toggle .fa-sun { display: none; } .theme-toggle .fa-moon { display: block; } :root[data-theme="dark"] .theme-toggle .fa-sun { display: block; } :root[data-theme="dark"] .theme-toggle .fa-moon { display: none; } /* ---- Scroll reveal — one restrained, consistent fade-up (staggered). Professional motion: small distance, smooth ease-out, no directional/3D gimmicks. ---- */ .reveal { transition: opacity .55s var(--ease), transform .55s var(--ease); } .js .reveal { opacity: 0; transform: translateY(16px); } .reveal.d1 { transition-delay: .04s; } .reveal.d2 { transition-delay: .09s; } .reveal.d3 { transition-delay: .14s; } .reveal.d4 { transition-delay: .19s; } .reveal.d5 { transition-delay: .24s; } .reveal.d6 { transition-delay: .29s; } .js .reveal.is-in { opacity: 1; transform: none; } /* Off-screen entrance transforms must never spawn a horizontal scrollbar */ .marketing-body { overflow-x: clip; } .mkt-section { overflow-x: clip; } /* ---- Card hover — clean, restrained lift (no tilt / spotlight / shine) ---- */ .sol-card .sico, .mkt-card .ico { transition: transform .3s var(--ease); } .sol-card:hover .sico, .mkt-card:hover .ico { transform: scale(1.06); } /* ---- Soft section band (theme-aware; replaces inline #f7f7fd) ---- */ .mkt-band-soft { background: var(--surface-2); } .mkt-band-grad { background: radial-gradient(1000px 400px at 12% -10%, rgba(124,92,240,.12), transparent 60%), radial-gradient(900px 380px at 92% 110%, rgba(207,79,219,.10), transparent 60%), var(--surface-2); } /* Make marketing headings/text follow the theme ink */ .mkt-h2, .mkt-hero h1, .mkt-card h3, .mkt-value h4, .mkt-two h2 { color: var(--ink); } /* ---- Solutions showcase (management systems) ---- */ .sol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; margin-top: 3rem; } .sol-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s; } .sol-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad, var(--brand-grad)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .sol-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand-400); } .sol-card:hover::before { transform: scaleX(1); } .sol-card .sico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; font-size: 1.3rem; margin-bottom: 1rem; background: var(--grad, var(--brand-grad)); box-shadow: 0 10px 22px -8px var(--brand-glow); } .sol-card h3 { font-size: 1.12rem; margin: 0 0 .4rem; color: var(--ink); } .sol-card p { color: var(--muted); line-height: 1.5; margin: 0; font-size: .9rem; } .sol-card .sol-tag { position: absolute; top: 1rem; right: 1rem; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-600); background: var(--brand-soft); padding: .2rem .5rem; border-radius: 6px; } /* ---- Mobile marketing nav (hamburger drawer) ---- */ .mkt-burger { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1.1rem; } @media (min-width: 860px) { .mkt-burger { display: none; } } .mkt-drawer { position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); z-index: 60; background: var(--card); border-inline-start: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; padding: 1.2rem; gap: .3rem; } body.mkt-nav-open .mkt-drawer { transform: none; } .mkt-drawer a { padding: .8rem .9rem; border-radius: 11px; color: var(--ink); font-weight: 600; } .mkt-drawer a:hover { background: var(--surface-2); color: var(--brand-600); } .mkt-drawer .dh { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: .4rem .9rem; margin-top: .5rem; } .mkt-scrim { position: fixed; inset: 0; background: rgba(6,7,15,.5); opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 55; } body.mkt-nav-open .mkt-scrim { opacity: 1; visibility: visible; } /* Marketing topbar right cluster keeps the toggle tidy on mobile */ .site-topbar .tb-actions { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; } /* ---- RTL overrides (logical properties cover most; transforms are physical) -- */ [dir="rtl"] .sidebar { inset: 0 0 0 auto; } @media (max-width: 992px) { [dir="rtl"] .sidebar { transform: translateX(100%); } [dir="rtl"] body.sb-open .sidebar { transform: translateX(0); } } [dir="rtl"] .mkt-drawer { inset: 0 auto 0 0; transform: translateX(-100%); } [dir="rtl"] body.mkt-nav-open .mkt-drawer { transform: none; } [dir="rtl"] .mkt-value:hover { transform: translateX(-4px); }