inkluence 인클루언스 - Inkluence 인클루언스

/* * INK MGMT - Custom CSS * Glassmorphism Design System * Add to: Appearance > Customize > Additional CSS * Or: Elementor > Site Settings > Custom CSS */ /* ============================================ ROOT VARIABLES ============================================ */ :root { --ink-primary: #1A1A1A; --ink-secondary: #8B7355; --ink-accent: #D4A574; --ink-background: #F5F0E8; --ink-background-alt: #E8E4DC; --ink-white: #FFFFFF; --ink-text-muted: rgba(26, 26, 26, 0.6); --ink-border: rgba(26, 26, 26, 0.1); --ink-glass-bg: rgba(255, 255, 255, 0.65); --ink-glass-border: rgba(255, 255, 255, 0.5); --ink-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); --ink-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --ink-radius: 24px; --ink-radius-sm: 16px; --ink-radius-pill: 50px; } /* ============================================ GLASSMORPHISM CARD UTILITY ============================================ */ .ink-glass-card { background: var(--ink-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--ink-radius); border: 1px solid var(--ink-glass-border); box-shadow: var(--ink-glass-shadow); padding: 32px; } .ink-glass-card-dark { background: rgba(26, 26, 26, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--ink-radius); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ink-white); } /* ============================================ HEADER STYLES ============================================ */ .elementor-header { transition: var(--ink-transition); } .elementor-header.scrolled { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05); } /* Header Navigation Hover Effect */ .elementor-nav-menu--main .elementor-item { position: relative; } .elementor-nav-menu--main .elementor-item::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--ink-accent); transition: var(--ink-transition); } .elementor-nav-menu--main .elementor-item:hover::after { width: 100%; } /* ============================================ BUTTON STYLES ============================================ */ .ink-btn-primary { background: var(--ink-accent); color: var(--ink-primary); border-radius: var(--ink-radius-pill); padding: 16px 32px; font-weight: 600; font-size: 16px; transition: var(--ink-transition); border: none; cursor: pointer; display: inline-block; text-decoration: none; } .ink-btn-primary:hover { background: #C49464; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3); } .ink-btn-secondary { background: transparent; color: var(--ink-primary); border: 1px solid var(--ink-primary); border-radius: var(--ink-radius-pill); padding: 16px 32px; font-weight: 500; font-size: 16px; transition: var(--ink-transition); cursor: pointer; display: inline-block; text-decoration: none; } .ink-btn-secondary:hover { background: var(--ink-primary); color: var(--ink-white); } .ink-btn-white { background: var(--ink-white); color: var(--ink-primary); border-radius: var(--ink-radius-pill); padding: 16px 32px; font-weight: 600; transition: var(--ink-transition); border: none; cursor: pointer; display: inline-block; text-decoration: none; } .ink-btn-white:hover { background: var(--ink-background); transform: translateY(-2px); } /* ============================================ MODEL CARD STYLES ============================================ */ .ink-model-card { position: relative; border-radius: var(--ink-radius-sm); overflow: hidden; transition: var(--ink-transition); } .ink-model-card img { transition: var(--ink-transition); width: 100%; aspect-ratio: 3/4; object-fit: cover; } .ink-model-card:hover img { transform: scale(1.03); } .ink-model-card .ink-overlay { position: absolute; inset: 0; background: rgba(26, 26, 26, 0.7); opacity: 0; transition: var(--ink-transition); display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--ink-white); padding: 24px; } .ink-model-card:hover .ink-overlay { opacity: 1; } .ink-model-card .ink-status-badge { position: absolute; top: 16px; right: 16px; background: var(--ink-accent); color: var(--ink-primary); padding: 4px 12px; border-radius: var(--ink-radius-pill); font-size: 12px; font-weight: 600; z-index: 2; } /* ============================================ STATS BAR STYLES ============================================ */ .ink-stats-bar { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--ink-border); } .ink-stat-item { text-align: center; flex: 1; position: relative; } .ink-stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 40px; background: var(--ink-border); } .ink-stat-label { font-size: 14px; color: var(--ink-secondary); margin-bottom: 4px; } .ink-stat-value { font-size: 24px; font-weight: 600; color: var(--ink-primary); } /* ============================================ GALLERY STYLES ============================================ */ .ink-gallery-item { border-radius: var(--ink-radius-sm); overflow: hidden; transition: var(--ink-transition); } .ink-gallery-item:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1); } /* ============================================ FORM STYLES ============================================ */ .ink-form input, .ink-form textarea, .ink-form select { background: var(--ink-glass-bg); border: 1px solid var(--ink-glass-border); border-radius: 12px; padding: 16px; font-size: 16px; transition: var(--ink-transition); width: 100%; font-family: 'Noto Sans KR', sans-serif; } .ink-form input:focus, .ink-form textarea:focus, .ink-form select:focus { outline: none; border-color: var(--ink-accent); box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1); } .ink-form label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--ink-secondary); font-weight: 500; } /* ============================================ POPUP STYLES ============================================ */ .ink-popup-content { background: var(--ink-white); border-radius: var(--ink-radius); padding: 48px; max-width: 600px; width: 90%; margin: 0 auto; position: relative; } .ink-popup-close { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; border-radius: 50%; background: var(--ink-background); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--ink-transition); } .ink-popup-close:hover { background: var(--ink-background-alt); } /* ============================================ TYPOGRAPHY ENHANCEMENTS ============================================ */ .ink-eyebrow { font-size: 14px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-secondary); margin-bottom: 16px; } .ink-display-1 { font-size: clamp(48px, 8vw, 72px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .ink-display-2 { font-size: clamp(36px, 6vw, 48px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } /* ============================================ SCROLL ANIMATIONS ============================================ */ .ink-fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .ink-fade-in.visible { opacity: 1; transform: translateY(0); } /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 1024px) { .ink-stats-bar { flex-wrap: wrap; gap: 24px; } .ink-stat-item { flex: 0 0 calc(33.333% - 16px); } .ink-stat-item:not(:last-child)::after { display: none; } .ink-glass-card { padding: 24px; } } @media (max-width: 768px) { :root { --ink-radius: 20px; } .ink-stat-item { flex: 0 0 calc(50% - 12px); } .ink-glass-card { padding: 20px; } .ink-popup-content { padding: 32px 24px; } } @media (max-width: 480px) { .ink-stat-item { flex: 0 0 100%; } .ink-stat-item::after { display: none !important; } } /* ============================================ UTILITY CLASSES ============================================ */ .ink-text-center { text-align: center; } .ink-text-left { text-align: left; } .ink-text-right { text-align: right; } .ink-mt-0 { margin-top: 0; } .ink-mt-1 { margin-top: 8px; } .ink-mt-2 { margin-top: 16px; } .ink-mt-3 { margin-top: 24px; } .ink-mt-4 { margin-top: 32px; } .ink-mt-5 { margin-top: 48px; } .ink-mb-0 { margin-bottom: 0; } .ink-mb-1 { margin-bottom: 8px; } .ink-mb-2 { margin-bottom: 16px; } .ink-mb-3 { margin-bottom: 24px; } .ink-mb-4 { margin-bottom: 32px; } .ink-mb-5 { margin-bottom: 48px; } .ink-hidden { display: none; } .ink-visible { display: block; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Selection color */ ::selection { background: rgba(212, 165, 116, 0.3); color: var(--ink-primary); } /* Focus visible for accessibility */ :focus-visible { outline: 2px solid var(--ink-accent); outline-offset: 2px; }

ink mgmt

clients.

INK MGMT is part of and affiliated to ©Inkluence Ltd. For more information check out our about or contact us directly.

spread like ink.

2026-03-15

(주) 인클루언스│ 대표 홍성재│ 사업자등록번호: 810-81-02855

clients.

Inquire

전화문의 (+82) 031-422-1231 모델섭의 [email protected]