/* ==========================================================================
WPDesign Theme — Main Stylesheet
다크 히어로 + 흰색 본문 / Noto Sans KR
========================================================================== */
/* ---------- Tokens ---------- */
:root {
--c-bg: #ffffff;
--c-bg-alt: #f7f8fa;
--c-bg-dark: #0a0a0f;
--c-bg-dark-2: #11131a;
--c-text: #1a1d24;
--c-text-muted: #5b6370;
--c-text-light: #8a92a0;
--c-text-on-dark: #f5f6f8;
--c-border: #e5e7eb;
--c-border-dark: rgba(255, 255, 255, 0.08);
--c-primary: #0F172A; /* Deep slate / navy black */
--c-primary-dark: #1E293B; /* Hover — one tone lighter (standard for dark buttons) */
--c-primary-soft: #F1F5F9; /* Slate 100 — page-bg tint */
--c-accent: #d4af37;
--c-success: #10b981;
--c-danger: #ef4444;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 22px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
--shadow: 0 8px 24px rgba(15, 23, 42, .08);
--shadow-lg: 0 20px 50px rgba(15, 23, 42, .12);
--container: 1200px;
--gutter: 24px;
--t: 0.25s cubic-bezier(.4, 0, .2, 1);
--font-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
--font-display: 'Barlow Condensed', 'Noto Sans KR', sans-serif;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 90px; /* compensate for sticky header so anchors land below it */
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.65;
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t); }
a:hover { color: var(--c-primary); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
.screen-reader-text {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
width: 1px; height: 1px; overflow: hidden;
}
.skip-link {
position: absolute; top: -40px; left: 8px;
background: #000; color: #fff; padding: 8px 12px;
border-radius: var(--radius-sm); z-index: 999;
}
.skip-link:focus { top: 8px; }
/* ---------- Layout ---------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.section { padding: 100px 0; }
.section--sm { padding: 60px 0; }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-bg-dark); color: var(--c-text-on-dark); }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head__eyebrow {
display: inline-block;
font-size: 13px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--c-primary);
padding: 6px 14px;
background: var(--c-primary-soft);
border-radius: 999px;
margin-bottom: 16px;
}
.section-head__title { font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.section-head__lead { font-size: 17px; color: var(--c-text-muted); max-width: 640px; margin: 0 auto; }
.muted { color: var(--c-text-muted); }
.lucide { width: 18px; height: 18px; flex-shrink: 0; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 26px;
font-size: 15px;
font-weight: 600;
border-radius: 999px;
transition: all var(--t);
cursor: pointer;
white-space: nowrap;
}
.btn .lucide { width: 18px; height: 18px; }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--lg { padding: 16px 32px; font-size: 16px; }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--dark { background: #fff; color: var(--c-bg-dark); }
.btn--dark:hover { background: var(--c-accent); color: #fff; }
.btn--ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); }
.btn--ghost:hover { border-color: var(--c-text); color: var(--c-text); }
.btn--ghost-light {
background: rgba(10, 12, 20, .55);
color: #fff;
border: 1px solid rgba(255,255,255,.22);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
.btn--ghost-light:hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.6);
color: #fff;
}
.btn--accent { background: var(--c-accent); color: #fff; }
.btn--accent:hover { background: #b8941f; color: #fff; }
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(255, 255, 255, .92);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color var(--t), background var(--t);
}
.site-header.is-scrolled { border-bottom-color: var(--c-border); }
.site-header__inner {
display: flex;
align-items: center;
gap: 32px;
height: 76px;
}
.site-header__brand { flex: 0 0 auto; }
/* ---------- Brand block: icon + animated wordmark ---------- */
.site-branding {
display: inline-flex;
align-items: center;
gap: 12px;
}
.site-logo-img,
.site-logo-img a,
.site-logo-img .custom-logo-link {
display: inline-flex;
align-items: center;
line-height: 0;
}
.site-logo-img img:not(.site-logo-stack__base):not(.site-logo-stack__float),
.site-logo-img .custom-logo {
height: 40px;
object-fit: cover;
will-change: transform, filter;
filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0));
transition: transform 0.7s cubic-bezier(.34, 1.4, .5, 1), filter 0.4s ease;
}
/* Stacked PNG logo — base (static) + float (animated up/down) */
.site-logo-stack {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
line-height: 0;
}
.site-logo-stack__base,
.site-logo-stack__float {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
display: block;
object-fit: contain;
pointer-events: none;
}
.site-logo-stack__float {
will-change: transform;
animation: logoFloatUpDown 3.6s ease-in-out infinite;
}
@keyframes logoFloatUpDown {
0%, 100% { transform: translateY(4px); }
50% { transform: translateY(-4px); }
}
/* Hover — gentle scale on the whole stack, 0.8s slow ease */
.site-logo-stack {
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-logo-img a:hover .site-logo-stack {
transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
.site-logo-stack__float { animation: none; }
.site-logo-stack,
.site-logo-img a:hover .site-logo-stack { transition: none; transform: none; }
}
.site-title {
display: inline-flex;
}
.site-title a {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
font-weight: 500;
font-size: 30px;
letter-spacing: 0;
line-height: 1.23em;
color: var(--c-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Per-character animation — entrance + continuous pop-up (every 5s) + hover wave */
.site-title a span {
display: inline-block;
transform-origin: 50% 100%;
/* Two stacked animations: entrance once, then continuous pop-up every 5s */
animation:
brandIntro 0.7s cubic-bezier(.34, 1.56, .64, 1) both,
brandPopUp 5s ease infinite;
animation-delay:
calc(var(--i, 0) * 0.05s),
calc(1.5s + var(--i, 0) * 0.12s);
}
@keyframes brandIntro {
0% { opacity: 0; transform: translateY(-14px) rotate(-12deg) scale(0.85); }
60% { opacity: 1; transform: translateY(2px) rotate(2deg) scale(1.02); }
100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
/* Continuous pop-up — pops up briefly at the start of each 5s cycle, rests for the rest */
@keyframes brandPopUp {
0% { transform: translateY(0) scale(1); }
5% { transform: translateY(-3px) scale(1.15); color: var(--c-accent); }
10% { transform: translateY(0) scale(1); }
100% { transform: translateY(0) scale(1); }
}
/* (Hover bounce removed — text stays calm on hover) */
/* Footer (light-on-dark) variant */
.site-title--light a { color: #fff; }
@media (prefers-reduced-motion: reduce) {
.site-title a span,
.site-title a:hover span { animation: none; }
}
.site-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.site-nav .nav-list, .site-nav ul {
display: flex; align-items: center; gap: 28px;
}
.site-nav a {
font-size: 15px; font-weight: 500; color: var(--c-text);
padding: 8px 0; position: relative;
}
.site-nav a:hover { color: var(--c-primary); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { color: var(--c-primary); }
.site-header__cta {
display: flex; align-items: center; gap: 10px;
flex: 0 0 auto;
}
/* ---------- Hamburger toggle ---------- */
.nav-toggle {
display: none;
position: relative;
width: 44px; height: 44px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0;
background: transparent;
border: none;
cursor: pointer;
z-index: 200;
}
.nav-toggle span {
position: absolute;
left: 50%;
width: 24px; height: 2px;
background: var(--c-text);
border-radius: 2px;
transform-origin: center;
transition: transform 0.32s cubic-bezier(.22, 1, .36, 1),
opacity 0.2s ease,
background-color var(--t);
margin-left: -12px;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.is-open span { background: var(--c-text); }
.nav-toggle.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-toggle.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ---------- Mobile Nav (Slide-in Drawer) ---------- */
.site-mobile-nav {
position: fixed;
inset: 0;
z-index: 150;
visibility: hidden;
pointer-events: none;
}
.site-mobile-nav.is-open {
visibility: visible;
pointer-events: auto;
}
.site-mobile-nav__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 10, 15, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.32s ease;
}
.site-mobile-nav.is-open .site-mobile-nav__backdrop { opacity: 1; }
.site-mobile-nav__panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(420px, 88vw);
background: linear-gradient(180deg, #0A0A0F 0%, #14141C 100%);
color: #fff;
transform: translateX(100%);
transition: transform 0.42s cubic-bezier(.22, 1, .36, 1);
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
}
.site-mobile-nav.is-open .site-mobile-nav__panel {
transform: translateX(0);
}
/* Decorative orbs + grid */
.site-mobile-nav__orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(60px);
opacity: 0;
transition: opacity 0.6s ease 0.15s;
}
.site-mobile-nav__orb--1 {
top: -80px; right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(212, 175, 55, .22), transparent 70%);
}
.site-mobile-nav__orb--2 {
bottom: -100px; left: -80px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(212,175,55,.18), transparent 70%);
}
.site-mobile-nav.is-open .site-mobile-nav__orb { opacity: 1; }
.site-mobile-nav__grid {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 28px 28px;
opacity: 0;
transition: opacity 0.6s ease 0.2s;
}
.site-mobile-nav.is-open .site-mobile-nav__grid { opacity: 1; }
/* Head */
.site-mobile-nav__head {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-mobile-nav__brand {
display: inline-flex;
align-items: baseline;
gap: 2px;
font-family: var(--font-display);
font-weight: 600;
font-size: 26px;
color: #fff;
text-decoration: none;
letter-spacing: 0.5px;
}
.site-mobile-nav__brand-mark {
color: var(--c-accent);
font-weight: 700;
}
.site-mobile-nav__close {
width: 40px; height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
color: #fff;
cursor: pointer;
transition: background var(--t), transform var(--t);
}
.site-mobile-nav__close:hover {
background: rgba(255,255,255,.12);
transform: rotate(90deg);
}
.site-mobile-nav__close svg {
width: 20px; height: 20px;
}
/* Body — menu list */
.site-mobile-nav__body {
position: relative;
z-index: 2;
flex: 1;
padding: 28px 22px 20px;
}
.site-mobile-nav__label {
display: block;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.24em;
color: var(--c-accent);
margin-bottom: 18px;
opacity: 0.85;
}
.site-mobile-nav__label--sm {
margin-bottom: 10px;
font-size: 10px;
color: rgba(255,255,255,.45);
}
.site-mobile-nav__menu-wrap {
counter-reset: navcount;
}
.site-mobile-nav .mobile-nav-list,
.site-mobile-nav__menu-wrap > ul {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
}
.site-mobile-nav .mobile-nav-list li,
.site-mobile-nav__menu-wrap > ul > li {
counter-increment: navcount;
opacity: 0;
transform: translateX(20px);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22, 1, .36, 1);
}
.site-mobile-nav.is-open .mobile-nav-list li,
.site-mobile-nav.is-open .site-mobile-nav__menu-wrap > ul > li {
opacity: 1;
transform: translateX(0);
}
.site-mobile-nav.is-open .mobile-nav-list li:nth-child(1),
.site-mobile-nav.is-open .site-mobile-nav__menu-wrap > ul > li:nth-child(1) { transition-delay: 0.12s; }
.site-mobile-nav.is-open .mobile-nav-list li:nth-child(2),
.site-mobile-nav.is-open .site-mobile-nav__menu-wrap > ul > li:nth-child(2) { transition-delay: 0.17s; }
.site-mobile-nav.is-open .mobile-nav-list li:nth-child(3),
.site-mobile-nav.is-open .site-mobile-nav__menu-wrap > ul > li:nth-child(3) { transition-delay: 0.22s; }
.site-mobile-nav.is-open .mobile-nav-list li:nth-child(4),
.site-mobile-nav.is-open .site-mobile-nav__menu-wrap > ul > li:nth-child(4) { transition-delay: 0.27s; }
.site-mobile-nav.is-open .mobile-nav-list li:nth-child(5),
.site-mobile-nav.is-open .site-mobile-nav__menu-wrap > ul > li:nth-child(5) { transition-delay: 0.32s; }
.site-mobile-nav.is-open .mobile-nav-list li:nth-child(6),
.site-mobile-nav.is-open .site-mobile-nav__menu-wrap > ul > li:nth-child(6) { transition-delay: 0.37s; }
.site-mobile-nav.is-open .mobile-nav-list li:nth-child(7),
.site-mobile-nav.is-open .site-mobile-nav__menu-wrap > ul > li:nth-child(7) { transition-delay: 0.42s; }
.site-mobile-nav.is-open .mobile-nav-list li:nth-child(n+8),
.site-mobile-nav.is-open .site-mobile-nav__menu-wrap > ul > li:nth-child(n+8) { transition-delay: 0.47s; }
.site-mobile-nav .mobile-nav-list a,
.site-mobile-nav__menu-wrap > ul > li > a {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 8px;
font-family: var(--font-sans);
font-size: 20px;
font-weight: 600;
color: rgba(255,255,255,.92);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.06);
transition: color var(--t), padding-left var(--t);
}
.site-mobile-nav .mobile-nav-list a::before,
.site-mobile-nav__menu-wrap > ul > li > a::before {
content: counter(navcount, decimal-leading-zero);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--c-accent);
opacity: 0.6;
min-width: 26px;
transition: opacity var(--t), transform var(--t);
}
.site-mobile-nav .mobile-nav-list a::after,
.site-mobile-nav__menu-wrap > ul > li > a::after {
content: '';
margin-left: auto;
width: 18px; height: 10px;
background-color: currentColor;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
opacity: 0.35;
transition: opacity var(--t), transform var(--t);
}
.site-mobile-nav .mobile-nav-list a:hover,
.site-mobile-nav .mobile-nav-list a:focus-visible,
.site-mobile-nav__menu-wrap > ul > li > a:hover,
.site-mobile-nav__menu-wrap > ul > li > a:focus-visible {
color: var(--c-accent);
padding-left: 14px;
}
.site-mobile-nav .mobile-nav-list a:hover::before,
.site-mobile-nav__menu-wrap > ul > li > a:hover::before {
opacity: 1;
transform: translateX(-2px);
}
.site-mobile-nav .mobile-nav-list a:hover::after,
.site-mobile-nav__menu-wrap > ul > li > a:hover::after {
opacity: 1;
transform: translateX(4px);
}
.site-mobile-nav .mobile-nav-list .current-menu-item > a,
.site-mobile-nav .mobile-nav-list .current_page_item > a {
color: var(--c-accent);
}
/* Foot */
.site-mobile-nav__foot {
position: relative;
z-index: 2;
padding: 22px;
border-top: 1px solid rgba(255,255,255,.08);
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.2) 100%);
}
.site-mobile-nav__lang {
margin-bottom: 18px;
}
.site-mobile-nav__lang .lang-switcher--inline {
list-style: none;
margin: 0; padding: 0;
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.site-mobile-nav__lang .lang-switcher--inline a {
display: inline-block;
padding: 6px 14px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
color: rgba(255,255,255,.7);
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: all var(--t);
}
.site-mobile-nav__lang .lang-switcher--inline a:hover,
.site-mobile-nav__lang .lang-switcher--inline a.is-current {
background: var(--c-accent);
color: #0A0A0F;
border-color: var(--c-accent);
}
.site-mobile-nav__cta {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.site-mobile-nav__cta .btn {
flex: 1;
justify-content: center;
gap: 6px;
padding: 12px 14px;
font-size: 14px;
font-weight: 600;
}
.site-mobile-nav__cta .btn svg {
width: 16px; height: 16px;
}
.btn.btn--ghost-light {
background: rgba(255,255,255,.05);
color: #fff;
border: 1px solid rgba(255,255,255,.16);
}
.btn.btn--ghost-light:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.28);
}
.site-mobile-nav__kakao {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 14px;
background: #FEE500;
color: #181600;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
margin-bottom: 16px;
transition: transform var(--t), box-shadow var(--t);
}
.site-mobile-nav__kakao svg {
width: 16px; height: 16px;
}
.site-mobile-nav__kakao:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(254, 229, 0, 0.25);
}
.site-mobile-nav__addr {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 11px;
color: rgba(255,255,255,.4);
line-height: 1.4;
}
.site-mobile-nav__addr svg {
width: 12px; height: 12px;
flex-shrink: 0;
}
/* Lock body scroll when open */
body.is-nav-open {
overflow: hidden;
}
@media (max-width: 1023px) {
.site-nav, .site-header__cta { display: none; }
.nav-toggle { display: inline-flex; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
.site-mobile-nav__panel,
.site-mobile-nav__backdrop,
.site-mobile-nav .mobile-nav-list li,
.site-mobile-nav__menu-wrap > ul > li,
.site-mobile-nav__orb,
.site-mobile-nav__grid {
transition: none;
}
}
/* ---------- Hero (Dark) ---------- */
.hero {
position: relative;
background: var(--c-bg-dark);
color: var(--c-text-on-dark);
overflow: hidden;
padding: 100px 0 120px;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(800px 400px at 80% 0%, rgba(255, 255, 255, .05), transparent),
radial-gradient(600px 300px at 10% 30%, rgba(212, 175, 55, .16), transparent);
pointer-events: none;
}
.hero::after {
/* Subtle dark-to-dark vignette only — compact, no white transition inside hero */
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 180px;
background:
linear-gradient(to bottom,
rgba(10, 10, 15, 0) 0%,
rgba(10, 10, 15, 0.7) 60%,
rgba(10, 10, 15, 0.95) 100%);
pointer-events: none;
z-index: 2;
}
/* Defined finish line — slim accent at the gradient terminus */
.hero__finish {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(to right,
transparent 0%,
rgba(212, 175, 55, 0.0) 12%,
rgba(212, 175, 55, 0.6) 50%,
rgba(212, 175, 55, 0.0) 88%,
transparent 100%);
z-index: 3;
pointer-events: none;
}
/* Tick marks on the finish line for HUD-style closure */
.hero__finish::before,
.hero__finish::after {
content: '';
position: absolute;
bottom: 0;
width: 1px;
height: 14px;
background: rgba(212, 175, 55, .45);
}
.hero__finish::before { left: 28%; }
.hero__finish::after { right: 28%; }
@media (max-width: 900px) {
.hero__finish::before { left: 12%; }
.hero__finish::after { right: 12%; }
}
/* ---------- Hero Scroll Cue (clickable → #services) ---------- */
.hero__scroll {
position: absolute;
bottom: 140px;
left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
z-index: 10; /* above hero__inner (z:3) and trust-bar (z:5) */
opacity: 0;
animation: hudFadeIn 1s ease 1.2s forwards;
cursor: pointer;
padding: 16px 32px; /* generous hit area */
min-width: 120px;
color: inherit;
text-decoration: none;
transition: transform 0.25s ease;
pointer-events: auto; /* explicit — guard against parent overrides */
}
.hero__scroll * { pointer-events: none; } /* clicks always land on the itself */
.hero__scroll:hover {
transform: translate(-50%, 4px);
}
.hero__scroll:hover .hero__scroll-label {
color: var(--c-accent);
}
.hero__scroll-label {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
color: rgba(255,255,255,.55);
transition: color 0.25s ease;
}
.hero__scroll-line {
width: 1px;
height: 56px;
background: linear-gradient(to bottom, rgba(212,175,55,.7) 0%, rgba(212,175,55,0) 100%);
position: relative;
overflow: hidden;
}
.hero__scroll-line::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 30%;
background: linear-gradient(to bottom, #ffd24a, transparent);
animation: scrollDrip 2.4s ease-in-out infinite;
}
@keyframes scrollDrip {
0% { transform: translateY(-100%); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(300%); opacity: 0; }
}
@media (max-width: 900px) {
.hero__scroll { display: none; }
}
.hero__inner {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
}
.hero__badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px;
background: rgba(212, 175, 55, .15);
color: var(--c-accent);
border: 1px solid rgba(212, 175, 55, .3);
border-radius: 999px;
font-size: 13px; font-weight: 600;
margin-bottom: 24px;
}
.hero__badge .lucide { width: 16px; height: 16px; }
.hero__title {
font-size: clamp(34px, 5vw, 56px);
font-weight: 900;
line-height: 1.2;
margin-bottom: 24px;
}
.hero__title strong { color: var(--c-accent); }
.hero__title em {
font-style: normal;
background: linear-gradient(120deg, #fff 0%, var(--c-accent) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero__lead {
font-size: 18px;
color: rgba(255, 255, 255, .75);
max-width: 560px;
margin-bottom: 36px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.hero__trust {
display: flex; flex-wrap: wrap; gap: 24px 32px;
padding-top: 28px;
border-top: 1px solid var(--c-border-dark);
}
.hero__trust-item {
display: flex; align-items: center; gap: 10px;
font-size: 14px; color: rgba(255,255,255,.7);
}
.hero__trust-item strong { color: #fff; font-weight: 700; font-size: 16px; display: block; }
.hero__trust-item .lucide { color: var(--c-accent); width: 22px; height: 22px; }
.hero__cards {
display: grid; gap: 14px;
}
.hero-card {
padding: 22px 24px;
background: rgba(255,255,255,.04);
border: 1px solid var(--c-border-dark);
border-radius: var(--radius);
backdrop-filter: blur(8px);
transition: all var(--t);
}
.hero-card:hover { background: rgba(255,255,255,.07); transform: translateY(-2px); }
.hero-card__top {
display: flex; align-items: center; gap: 10px;
margin-bottom: 8px;
color: var(--c-accent);
font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-card__title { font-size: 18px; font-weight: 700; margin-bottom: 4px; color: #fff; }
.hero-card__desc { font-size: 14px; color: rgba(255,255,255,.65); margin: 0; }
@media (max-width: 1023px) {
.hero { padding: 64px 0 160px; }
.hero__inner { grid-template-columns: 1fr; gap: 40px; }
}
/* ---------- Hero Corner Frame Markers ---------- */
.hero__corner {
position: absolute;
width: 28px; height: 28px;
z-index: 4;
pointer-events: none;
opacity: 0;
animation: hudFadeIn 0.8s ease 0.6s forwards;
}
.hero__corner::before,
.hero__corner::after {
content: '';
position: absolute;
background: rgba(212,175,55,.45);
}
.hero__corner--tl { top: 24px; left: 24px; }
.hero__corner--tl::before { top: 0; left: 0; width: 100%; height: 1px; }
.hero__corner--tl::after { top: 0; left: 0; width: 1px; height: 100%; }
.hero__corner--tr { top: 24px; right: 24px; }
.hero__corner--tr::before { top: 0; right: 0; width: 100%; height: 1px; }
.hero__corner--tr::after { top: 0; right: 0; width: 1px; height: 100%; }
/* ---------- Hero HUD (top-left monitoring graphic) ---------- */
.hero__hud {
position: absolute;
top: 56px;
left: 56px;
width: 46%;
height: 50%;
max-width: 560px;
max-height: 560px;
min-width: 260px;
min-height: 260px;
pointer-events: none;
z-index: 1;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 40px 40px;
border: 1px solid rgba(255,255,255,.07);
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
overflow: hidden;
opacity: 0;
animation: hudFadeIn 1.2s ease 0.3s forwards;
}
/* Subtle vignette inside HUD for depth */
.hero__hud::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 35%, rgba(10,10,15,.45) 85%);
pointer-events: none;
}
@keyframes hudFadeIn { to { opacity: 1; } }
.hero__hud-label {
position: absolute;
font-size: 10px;
font-weight: 600;
color: rgba(255,255,255,.5);
letter-spacing: 0.16em;
padding: 4px 8px;
background: rgba(10,10,15,.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.hero__hud-label--tl { top: 10px; left: 10px; }
.hero__hud-label--tr { top: 10px; right: 10px; color: rgba(212,175,55,.7); }
.hero__hud-label--bl { bottom: 10px; left: 10px; color: rgba(212,175,55,.7); }
.hero__hud-label--br { bottom: 10px; right: 10px; }
/* Static rings + axes (no rotation, clean) */
.hero__hud-rings {
position: absolute;
top: 50%; left: 50%;
width: 78%;
height: 78%;
max-width: 360px; max-height: 360px;
transform: translate(-50%, -50%);
fill: none;
stroke-width: 0.8;
}
.hero__hud-ring--1 { stroke: rgba(212,175,55,.55); }
.hero__hud-ring--2 { stroke: rgba(212,175,55,.25); }
.hero__hud-ring--3 { stroke: rgba(255,255,255,.12); }
.hero__hud-ring--dash { stroke: rgba(255,255,255,.18); }
.hero__hud-axis { stroke: rgba(255,255,255,.1); stroke-width: 0.6; }
.hero__hud-mark { fill: rgba(212,175,55,.7); }
.hero__hud-pulse {
fill: rgba(212,175,55,.9);
transform-origin: 100px 100px;
animation: hudPulse 1.8s ease-in-out infinite;
}
@keyframes hudPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(1.8); }
}
/* Counter-rotating outer dotted ring */
.hero__hud-outer {
position: absolute;
top: 50%; left: 50%;
width: 78%; height: 78%;
max-width: 360px; max-height: 360px;
transform: translate(-50%, -50%);
animation: hudRotate 80s linear infinite;
}
@keyframes hudRotate {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Radar sweep — rotating conic-gradient beam */
.hero__hud-sweep {
position: absolute;
top: 50%; left: 50%;
width: 78%; height: 78%;
max-width: 360px; max-height: 360px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: conic-gradient(
from 0deg,
rgba(212,175,55,.28) 0deg,
rgba(212,175,55,.10) 25deg,
rgba(212,175,55,0) 60deg,
rgba(212,175,55,0) 360deg
);
-webkit-mask: radial-gradient(circle at center, transparent 0%, transparent 18%, black 19%, black 100%);
mask: radial-gradient(circle at center, transparent 0%, transparent 18%, black 19%, black 100%);
animation: hudSweep 6s linear infinite;
opacity: 0.85;
}
@keyframes hudSweep {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.hero__hud-tick {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
white-space: nowrap;
z-index: 2;
}
.hero__hud-tick--id {
top: 50%;
transform: translate(-50%, -50%);
color: rgba(255,255,255,.65);
}
.hero__hud-tick--data {
bottom: 38%;
color: rgba(212,175,55,.85);
animation: hudBlink 2.4s ease-in-out infinite;
}
@keyframes hudBlink {
0%, 70%, 100% { opacity: 1; }
80%, 90% { opacity: 0.35; }
}
@media (max-width: 1199px) {
.hero__hud {
width: 35%;
height: 35%;
top: 40px;
left: 24px;
min-width: 180px;
min-height: 180px;
}
.hero__hud-tick { font-size: 9px; letter-spacing: 0.14em; }
}
@media (max-width: 900px) {
.hero__hud {
opacity: 0.4;
width: 280px;
height: 280px;
top: auto;
bottom: 200px;
left: 50%;
transform: translateX(-50%);
}
}
@media (max-width: 768px) { .hero__hud { display: none; } }
/* ---------- Cursor Ring (mouse follower) ---------- */
.cursor-glow {
position: fixed;
top: 0; left: 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid #ffffff;
background: transparent;
pointer-events: none;
z-index: 9999;
transform: translate3d(-9999px, -9999px, 0);
will-change: transform;
opacity: 0;
transition: opacity 0.3s ease, width 0.22s cubic-bezier(.2,.8,.2,1), height 0.22s cubic-bezier(.2,.8,.2,1), border-color 0.22s ease, background 0.22s ease;
mix-blend-mode: difference;
}
.cursor-glow.is-visible { opacity: 1; }
.cursor-glow.is-hover {
width: 64px;
height: 64px;
border-color: #ffd24a;
background: rgba(212, 175, 55, 0.08);
}
@media (pointer: coarse), (max-width: 768px) {
.cursor-glow { display: none; }
}
/* ---------- Page Hero (Sub Pages) ---------- */
.page-hero {
position: relative;
color: var(--c-text-on-dark);
padding: 120px 0 140px;
text-align: center;
overflow: hidden;
min-height: 480px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--c-bg-dark);
background-image:
linear-gradient(135deg, rgba(10, 10, 15, 0.88) 0%, rgba(10, 10, 15, 0.94) 100%),
url('../images/heros/hero-bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Decorative overlay (gradient orbs + dot grid with subtle drift) */
.page-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(900px 480px at 50% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
radial-gradient(700px 360px at 90% 100%, rgba(212, 175, 55, 0.22), transparent 60%),
radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: auto, auto, 28px 28px;
pointer-events: none;
z-index: 1;
animation: pageHeroDrift 18s ease-in-out infinite alternate;
}
@keyframes pageHeroDrift {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: -80px -40px, 60px 40px, 28px 28px; }
}
/* Radar sweep — rotating beam on the left side (the "searching" line) */
.page-hero::after {
content: '';
position: absolute;
top: 50%;
left: 28%;
width: 420px;
height: 420px;
margin: -210px 0 0 -210px;
border-radius: 50%;
pointer-events: none;
z-index: 1;
background: conic-gradient(
from 0deg,
rgba(212, 175, 55, 0.28) 0deg,
rgba(212, 175, 55, 0.08) 24deg,
transparent 55deg,
transparent 360deg
);
-webkit-mask: radial-gradient(circle at center, transparent 36%, black 38%, black 100%);
mask: radial-gradient(circle at center, transparent 36%, black 38%, black 100%);
border: 1px solid rgba(212, 175, 55, 0.14);
opacity: 0.45;
animation: pageHeroRadar 6s linear infinite;
}
@keyframes pageHeroRadar {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Expanding pulse ring — concentric ping from the same origin */
.page-hero__pulse {
position: absolute;
top: 50%;
left: 28%;
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
border: 1px solid rgba(212, 175, 55, 0.55);
border-radius: 50%;
pointer-events: none;
z-index: 1;
opacity: 0;
animation: pageHeroPulse 5.4s ease-out infinite;
}
.page-hero__pulse--2 { animation-delay: 1.8s; }
.page-hero__pulse--3 { animation-delay: 3.6s; }
@keyframes pageHeroPulse {
0% { transform: scale(0.4); opacity: 0; border-width: 2px; }
15% { opacity: 0.45; }
100% { transform: scale(11); opacity: 0; border-width: 0.5px; }
}
/* Radar tokens — web keywords that briefly flash when the sweep passes */
.page-hero__token {
position: absolute;
transform: translate(-50%, -50%);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
color: rgba(212, 175, 55, 0.85);
text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
pointer-events: none;
z-index: 1;
opacity: 0;
white-space: nowrap;
animation: pageHeroToken 12s linear infinite;
}
@keyframes pageHeroToken {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
3% { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
8% { opacity: 0.7; }
16% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; }
}
@media (max-width: 768px) {
.page-hero__token { font-size: 9px; letter-spacing: 0.14em; }
}
/* Pause heavy animations when page is in background tab — saves CPU */
@media (prefers-reduced-motion: reduce) {
.page-hero::before { animation: none; }
.page-hero::after { animation: none; opacity: 0.25; }
.page-hero__pulse { animation: none; opacity: 0.2; transform: scale(4); }
.page-hero__token { animation: none; }
.marquee__track { animation: none; }
}
@media (max-width: 768px) {
.page-hero::after {
width: 280px;
height: 280px;
margin: -140px 0 0 -140px;
left: 20%;
}
.page-hero__pulse { left: 20%; }
}
/* Hero corner markers (HUD frame for sub pages) */
.page-hero > .container::before,
.page-hero > .container::after {
content: '';
position: absolute;
width: 24px; height: 24px;
pointer-events: none;
border-color: rgba(212, 175, 55, 0.45);
}
.page-hero > .container::before {
top: -48px; left: 24px;
border-top: 1px solid currentColor;
border-left: 1px solid currentColor;
}
.page-hero > .container::after {
top: -48px; right: 24px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
}
.page-hero > .container {
position: relative;
z-index: 3;
}
.page-hero--sm {
/* unified with .page-hero — no shorter variant */
min-height: 480px;
padding: 120px 0 140px;
}
.page-hero__title {
font-size: clamp(30px, 4vw, 48px);
margin-bottom: 14px;
}
.page-hero__lead {
font-size: 17px;
color: rgba(255,255,255,.78);
max-width: 700px;
margin: 0 auto;
}
@media (max-width: 768px) {
.page-hero {
min-height: 360px;
padding: 80px 0 100px;
}
.page-hero--sm {
min-height: 360px;
padding: 80px 0 100px;
}
.page-hero > .container::before,
.page-hero > .container::after {
top: -32px;
width: 18px; height: 18px;
}
}
/* ---------- Trust Bar (50% overlap on hero edge) ---------- */
.trust-bar {
position: relative;
margin-top: -40px;
padding: 0px;
z-index: 5;
}
.trust-bar__inner {
position: relative;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, .06);
border-radius: var(--radius-lg);
padding: 24px 36px;
box-shadow:
0 1px 0 rgba(255,255,255,.9) inset,
0 24px 60px -20px rgba(15, 23, 42, .18),
0 8px 20px -12px rgba(15, 23, 42, .08);
display: flex; justify-content: space-between; align-items: center;
gap: 24px; flex-wrap: wrap;
}
/* Decorative top accent line on the floating card */
.trust-bar__label {
font-size: 11px; font-weight: 700; color: var(--c-text-muted);
letter-spacing: 0.18em; text-transform: uppercase;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
display: inline-flex; align-items: center; gap: 10px;
}
.trust-bar__label::before {
content: '';
display: inline-block;
width: 24px; height: 1px;
background: var(--c-accent);
}
.trust-bar__list {
display: flex; flex-wrap: wrap; gap: 28px;
align-items: center;
}
.trust-bar__item {
display: flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 14px;
color: var(--c-text);
}
.trust-bar__item .lucide {
color: var(--c-primary);
width: 18px; height: 18px;
}
@media (max-width: 900px) {
.trust-bar { margin-top: -90px; padding: 100px 0 32px; }
.trust-bar__inner {
flex-direction: column; align-items: flex-start; gap: 16px;
padding: 22px 24px;
}
.trust-bar__list { gap: 14px 22px; }
.trust-bar__item { font-size: 13px; }
}
@media (max-width: 600px) {
.trust-bar { margin-top: -60px; padding: 70px 0 24px; }
.trust-bar__inner { padding: 20px 20px 22px; }
}
/* ---------- Brand Marquee (scrolling ticker) ---------- */
.marquee {
overflow: hidden;
padding: 28px 0;
background: var(--c-bg-dark);
color: var(--c-text-on-dark);
border-top: 1px solid var(--c-border-dark);
border-bottom: 1px solid var(--c-border-dark);
position: relative;
}
.marquee::before,
.marquee::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.marquee::before {
left: 0;
background: linear-gradient(to right, var(--c-bg-dark), transparent);
}
.marquee::after {
right: 0;
background: linear-gradient(to left, var(--c-bg-dark), transparent);
}
.marquee__track {
display: flex;
width: max-content;
animation: marqueeScroll 50s linear infinite;
will-change: transform;
}
.marquee:hover .marquee__track {
animation-play-state: paused;
}
.marquee__group {
display: flex;
align-items: center;
gap: 36px;
margin: 0; padding: 0 18px;
list-style: none;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
}
.marquee__group li {
color: rgba(255,255,255,.78);
transition: color 0.25s ease;
}
.marquee__group li:not(.marquee__sep):hover {
color: var(--c-accent);
}
.marquee__sep {
color: var(--c-accent);
font-size: 8px;
opacity: 0.7;
}
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; }
}
/* ---------- Service Cards ---------- */
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.service-card {
padding: 36px 28px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
transition: all var(--t);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute; left: 0; top: 0;
width: 100%; height: 4px;
background: var(--c-primary);
transform: scaleX(0); transform-origin: left;
transition: transform var(--t);
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
background: var(--c-primary-soft);
border-radius: var(--radius);
color: var(--c-primary);
margin-bottom: 20px;
}
.service-card__icon .lucide { width: 26px; height: 26px; }
.service-card__title { font-size: 20px; margin-bottom: 10px; }
.service-card__desc { font-size: 15px; color: var(--c-text-muted); margin-bottom: 16px; }
.service-card__more {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600; color: var(--c-primary);
}
.service-card__more:hover { gap: 10px; }
/* ---------- Portfolio Grid ---------- */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.portfolio-item {
position: relative;
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--c-bg-alt);
cursor: pointer;
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: border-color var(--t), box-shadow var(--t);
}
.portfolio-item:hover {
border-color: rgba(15, 23, 42, 0.28);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}
.portfolio-item__media {
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.portfolio-item:hover .portfolio-item__media { transform: scale(1.06); }
.portfolio-item__overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,10,15,.85) 0%, rgba(10,10,15,.1) 60%, transparent 100%);
display: flex; align-items: flex-end;
padding: 24px;
opacity: 0;
transition: opacity var(--t);
}
.portfolio-item:hover .portfolio-item__overlay { opacity: 1; }
.portfolio-item__title {
color: #fff; font-size: 18px; font-weight: 700;
margin: 0;
}
.portfolio-item__cat {
color: var(--c-accent);
font-size: 12px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
margin-bottom: 4px;
}
.portfolio-filter {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center;
margin-bottom: 40px;
}
.portfolio-filter button {
padding: 8px 18px;
border-radius: 999px;
font-size: 14px; font-weight: 500;
background: transparent;
color: var(--c-text-muted);
border: 1px solid rgba(15, 23, 42, 0.18);
transition: all var(--t);
}
.portfolio-filter button:hover {
border-color: rgba(15, 23, 42, 0.4);
color: var(--c-text);
}
.portfolio-filter button:hover { color: var(--c-text); border-color: var(--c-text); }
.portfolio-filter button.is-active {
background: var(--c-bg-dark); color: #fff; border-color: var(--c-bg-dark);
}
/* ---------- Stats ---------- */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.stat {
text-align: center;
padding: 36px 20px;
background: rgba(255,255,255,.04);
border: 1px solid var(--c-border-dark);
border-radius: var(--radius-lg);
}
.stat__value {
font-size: clamp(36px, 5vw, 56px);
font-weight: 900;
color: var(--c-accent);
line-height: 1;
margin-bottom: 10px;
letter-spacing: -0.03em;
}
.stat__label { font-size: 14px; color: rgba(255,255,255,.7); }
/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item {
border-bottom: 1px solid var(--c-border);
}
.faq__q {
width: 100%;
padding: 24px 0;
text-align: left;
display: flex; align-items: center; justify-content: space-between;
gap: 20px;
font-size: 17px; font-weight: 600; color: var(--c-text);
}
.faq__q .lucide { transition: transform var(--t); color: var(--c-primary); }
.faq__item.is-open .faq__q .lucide { transform: rotate(45deg); }
.faq__a {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
color: var(--c-text-muted);
line-height: 1.75;
}
.faq__item.is-open .faq__a { max-height: 600px; padding: 0 0 24px; }
/* ---------- CTA Block ---------- */
.cta-block {
text-align: center;
padding: 80px 40px;
background: linear-gradient(135deg, #0a0a0f 0%, #1a1d2e 100%);
border-radius: var(--radius-lg);
color: #fff;
position: relative;
overflow: hidden;
}
.cta-block::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(600px 300px at 50% 0%, rgba(212,175,55,.15), transparent);
}
.cta-block > * { position: relative; z-index: 2; }
.cta-block__title { font-size: clamp(26px, 3.5vw, 38px); margin-bottom: 14px; }
.cta-block__lead { color: rgba(255,255,255,.7); margin-bottom: 28px; max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-block__buttons { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* ---------- Footer ---------- */
.site-footer {
background: var(--c-bg-dark);
color: rgba(255,255,255,.7);
padding: 80px 0 0;
}
.site-footer__inner {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
gap: 48px;
padding-bottom: 60px;
}
.site-footer__col h4 { font-size: 14px; color: #fff; margin-bottom: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
.site-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer__col a { color: rgba(255,255,255,.65); font-size: 14px; }
.site-footer__col a:hover { color: #fff; }
.site-footer__desc { font-size: 14px; line-height: 1.75; margin: 16px 0 20px; color: rgba(255,255,255,.6); }
.site-footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: rgba(255,255,255,.6); }
.site-footer__contact li { display: flex; align-items: flex-start; gap: 8px; }
.site-footer__contact .lucide { color: var(--c-accent); margin-top: 2px; flex-shrink: 0; }
.badges { display: flex; flex-direction: column; gap: 8px; }
.badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 12px;
background: rgba(255,255,255,.04);
border: 1px solid var(--c-border-dark);
border-radius: var(--radius-sm);
font-size: 12px;
color: rgba(255,255,255,.8);
}
.badge--gold { background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.3); color: var(--c-accent); font-weight: 600; }
.badge .lucide { width: 14px; height: 14px; }
.site-footer__bottom {
border-top: 1px solid var(--c-border-dark);
padding: 24px 0;
}
.site-footer__bottom > .container {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
flex-wrap: wrap;
}
.site-footer__bottom p { margin: 0; font-size: 13px; color: rgba(255,255,255,.5); }
.site-footer__lang a { color: rgba(255,255,255,.7); font-size: 13px; }
.site-footer__lang a:hover { color: #fff; }
.site-footer__lang span { margin: 0 8px; color: rgba(255,255,255,.3); }
@media (max-width: 1023px) {
.site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
.site-footer__inner { grid-template-columns: 1fr; }
}
/* ---------- Floating Actions Stack (bottom-right) ---------- */
.floating-actions {
position: fixed;
right: 22px;
bottom: 22px;
display: flex;
flex-direction: column-reverse; /* kakao at the bottom, others stack up */
align-items: flex-end;
gap: 10px;
z-index: 90;
}
.floating-actions__lang {
background: rgba(15, 23, 42, .85);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-radius: 50%;
border: 1px solid rgba(255,255,255,.15);
box-shadow: 0 8px 20px -8px rgba(15, 23, 42, .4);
align-self: flex-end;
}
.floating-actions__lang .lang-switcher__toggle {
color: rgba(255,255,255,.85);
}
.floating-actions__lang .lang-switcher__toggle:hover {
background: rgba(255,255,255,.08);
color: #fff;
}
.floating-action {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 18px;
min-width: 150px;
background: rgba(15, 23, 42, .85);
color: #fff;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
font-weight: 600; font-size: 13px;
letter-spacing: 0.02em;
box-shadow: 0 8px 20px -8px rgba(15, 23, 42, .35);
transition: transform var(--t), background var(--t), border-color var(--t);
white-space: nowrap;
box-sizing: border-box;
}
.floating-action:hover {
transform: translateY(-2px);
background: rgba(15, 23, 42, .95);
border-color: rgba(212, 175, 55, .5);
color: #fff;
}
.floating-action .lucide { width: 16px; height: 16px; }
.floating-action--accent {
background: var(--c-accent);
color: #fff;
border-color: transparent;
}
.floating-action--accent:hover {
background: #b8941f;
border-color: transparent;
color: #fff;
}
.floating-kakao {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 18px;
min-width: 150px;
background: #FAE100; color: #3C1E1E;
border-radius: 999px;
font-weight: 700; font-size: 14px;
box-shadow: var(--shadow-lg);
transition: transform var(--t);
box-sizing: border-box;
}
.floating-kakao:hover { transform: translateY(-2px); color: #3C1E1E; }
.floating-kakao .lucide { width: 18px; height: 18px; }
.floating-top {
position: fixed; right: 22px; bottom: 22px;
width: 44px; height: 44px;
display: none; align-items: center; justify-content: center;
background: var(--c-bg-dark); color: #fff;
border-radius: 50%;
box-shadow: var(--shadow);
z-index: 89;
opacity: 0;
transition: opacity var(--t), transform var(--t);
}
.floating-top.is-visible { display: flex; opacity: 1; transform: translateX(-275px); }
.floating-top:hover { transform: translateX(-275px) translateY(-2px); }
.floating-top .lucide { width: 18px; height: 18px; }
@media (max-width: 768px) {
.floating-actions { right: 14px; bottom: 14px; gap: 8px; }
.floating-action,
.floating-kakao {
min-width: 48px;
padding: 12px;
font-size: 12px;
}
.floating-action span,
.floating-kakao span { display: none; } /* mobile: icon-only */
.floating-action .lucide,
.floating-kakao .lucide { width: 18px; height: 18px; }
.floating-actions__lang { padding: 6px 10px; font-size: 11px; }
.floating-top.is-visible { transform: translateX(-60px); }
.floating-top:hover { transform: translateX(-60px) translateY(-2px); }
}
/* ---------- Language Switcher ---------- */
.lang-switcher { display: inline-flex; align-items: center; }
.lang-switcher--compact {
gap: 6px;
padding: 6px 12px;
background: var(--c-bg-alt);
border-radius: 999px;
font-size: 12px; font-weight: 700;
letter-spacing: 0.04em;
}
.lang-switcher--compact a {
color: var(--c-text-muted);
transition: color var(--t);
padding: 2px 4px;
}
.lang-switcher--compact a:hover { color: var(--c-text); }
.lang-switcher--compact a.is-current { color: var(--c-primary); }
.lang-switcher__sep { color: var(--c-border); }
.lang-switcher--inline {
display: flex; flex-wrap: wrap; gap: 6px;
}
.lang-switcher--inline li {
display: inline-block;
}
.lang-switcher--inline a {
display: inline-block;
padding: 6px 14px;
border: 1px solid var(--c-border);
border-radius: 999px;
font-size: 13px; font-weight: 600;
color: var(--c-text-muted);
}
.lang-switcher--inline a.is-current {
background: var(--c-bg-dark); color: #fff; border-color: var(--c-bg-dark);
}
.site-footer__lang .lang-switcher--inline a {
border-color: var(--c-border-dark);
color: rgba(255,255,255,.7);
background: transparent;
}
.site-footer__lang .lang-switcher--inline a:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.site-footer__lang .lang-switcher--inline a.is-current { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
.lang-switcher--dropdown { position: relative; }
.lang-switcher__toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: transparent;
border-radius: 50%;
color: var(--c-text);
transition: background var(--t), color var(--t), transform var(--t);
cursor: pointer;
}
.lang-switcher__toggle:hover {
background: var(--c-bg-alt);
color: var(--c-text);
}
.lang-switcher__toggle .lucide {
width: 20px; height: 20px;
transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}
/* Open state — toggle visual */
.lang-switcher__toggle[aria-expanded="true"] {
background: var(--c-bg-dark);
color: #fff;
}
.lang-switcher__toggle[aria-expanded="true"] .lucide {
transform: rotate(180deg);
}
.lang-switcher__menu {
position: absolute;
top: calc(100% + 10px); /* default — opens downward (header) */
left: 50%; /* center relative to toggle */
transform: translateX(-50%);
min-width: 56px;
background: #fff;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 14px;
box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .25);
padding: 8px;
z-index: 100;
display: flex; flex-direction: column;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
/* entrance animation when opened */
transform-origin: top center;
animation: langMenuOpen 0.22s cubic-bezier(.34, 1.3, .64, 1) both;
}
/* hidden attribute must override flex display */
.lang-switcher__menu[hidden] { display: none !important; }
@keyframes langMenuOpen {
0% { opacity: 0; transform: translateX(-50%) scale(0.85) translateY(-6px); }
100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}
/* When menu opens upward (floating-actions context), origin from bottom-center */
.floating-actions .lang-switcher__menu {
transform-origin: bottom center;
}
.floating-actions .lang-switcher__menu[hidden] { display: none !important; }
/* When dropdown is inside floating-actions (bottom of viewport), open upward */
.floating-actions .lang-switcher__menu {
top: auto;
bottom: calc(100% + 10px);
}
.lang-switcher__menu li { margin: 0; padding: 0; }
.lang-switcher__menu a {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 8px;
transition: background var(--t), transform var(--t);
overflow: hidden;
}
.lang-switcher__menu a:hover {
background: var(--c-bg-alt);
transform: scale(1.08);
}
.lang-switcher__menu a.is-current {
box-shadow: inset 0 0 0 2px #e7e7e7;
}
.lang-switcher__flag-emoji {
font-size: 24px;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
}
.lang-switcher__flag-img {
width: 28px; height: 20px;
object-fit: cover;
border-radius: 3px;
display: block;
}
@media (max-width: 1199px) {
.site-header__cta .lang-switcher--compact { display: none; }
}
/* ---------- Pricing Tables ---------- */
.pricing-tabs {
display: inline-flex;
padding: 6px;
background: var(--c-bg-alt);
border-radius: 999px;
margin: 0 auto 40px;
}
.pricing-tabs button {
padding: 12px 24px;
border-radius: 999px;
font-weight: 600; font-size: 15px;
color: var(--c-text-muted);
transition: all var(--t);
}
.pricing-tabs button.is-active {
background: #fff;
color: var(--c-text);
box-shadow: var(--shadow-sm);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
align-items: stretch;
}
.price-card {
display: flex; flex-direction: column;
padding: 36px 32px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
transition: all var(--t);
position: relative;
}
.price-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.price-card--featured {
border-color: var(--c-bg-dark);
background: var(--c-bg-dark);
color: var(--c-text-on-dark);
}
.price-card--featured .price-card__name,
.price-card--featured .price-card__amount { color: #fff; }
.price-card--featured .price-card__includes li { color: rgba(255,255,255,.85); }
.price-card--featured .price-card__includes .lucide { color: var(--c-accent); }
.price-card--featured .price-card__hint { color: rgba(255,255,255,.6); }
.price-card__ribbon {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
padding: 6px 14px;
background: var(--c-accent);
color: #fff;
font-size: 12px; font-weight: 700;
letter-spacing: 0.06em;
border-radius: 999px;
}
.price-card__name {
font-size: 14px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--c-primary);
margin-bottom: 12px;
}
.price-card__amount {
font-size: 36px; font-weight: 900;
color: var(--c-text);
margin-bottom: 4px;
letter-spacing: -0.02em;
}
.price-card__amount span { font-size: 16px; font-weight: 600; color: var(--c-text-muted); margin-left: 6px; }
.price-card__hint {
font-size: 13px; color: var(--c-text-muted);
margin-bottom: 24px;
}
.price-card__includes {
display: flex; flex-direction: column; gap: 10px;
margin: 0 0 28px;
flex-grow: 1;
}
.price-card__includes li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; line-height: 1.55;
color: var(--c-text);
}
.price-card__includes .lucide { color: var(--c-success); margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }
.price-card .btn { width: 100%; justify-content: center; }
/* ---------- Pricing Compare Table ---------- */
.compare-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.compare-table th, .compare-table td {
padding: 16px 20px;
text-align: left;
border-bottom: 1px solid var(--c-border);
font-size: 14px;
}
.compare-table th { background: var(--c-bg-alt); font-weight: 700; }
.compare-table td:not(:first-child) { text-align: center; }
.compare-table .lucide { width: 18px; height: 18px; color: var(--c-success); margin: 0 auto; }
/* ---------- Post Grid ---------- */
.post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
.post-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
overflow: hidden;
transition: all var(--t);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.post-card__thumb { display: block; aspect-ratio: 16/10; overflow: hidden; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t); }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__body { padding: 24px; }
.post-card__cat {
display: inline-block;
font-size: 12px; font-weight: 600;
color: var(--c-primary);
letter-spacing: 0.04em; text-transform: uppercase;
margin-bottom: 8px;
}
.post-card__title { font-size: 18px; line-height: 1.4; margin-bottom: 10px; }
.post-card__excerpt { font-size: 14px; color: var(--c-text-muted); margin-bottom: 14px; }
.post-card__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--c-primary); }
/* ---------- Forms ---------- */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-grid__full { grid-column: 1 / -1; }
.field label {
display: block;
font-size: 14px; font-weight: 600;
margin-bottom: 8px;
color: var(--c-text);
}
.field input, .field textarea, .field select {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 15px;
transition: border-color var(--t), box-shadow var(--t);
background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, .12);
}
.field textarea { min-height: 160px; resize: vertical; }
.field--required label::after { content: ' *'; color: var(--c-danger); }
@media (max-width: 700px) {
.form-grid { grid-template-columns: 1fr; }
}
/* ---------- Contact Form 7 integration ---------- */
.wpcf7 .form-grid { margin: 0; }
.wpcf7 .field { margin-bottom: 0; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 15px;
background: #fff;
transition: border-color var(--t), box-shadow var(--t);
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px rgba(15, 23, 42, .12);
}
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 .wpcf7-list-item { margin: 0; display: block; }
.wpcf7 .wpcf7-list-item-label {
color: var(--c-text-muted);
font-size: 13px;
line-height: 1.6;
flex: 1;
}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
display: block;
}
.wpcf7 .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-weight: 400;
margin: 0;
}
.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
flex-shrink: 0;
margin: 4px 0 0 0; /* 첫 줄 텍스트와 수직 정렬 */
width: 16px;
height: 16px;
cursor: pointer;
}
.wpcf7 input[type="submit"].btn,
.wpcf7 input[type="submit"] {
display: inline-block;
padding: 16px 32px;
font-size: 16px; font-weight: 600;
background: var(--c-primary);
color: #fff;
border-radius: 999px;
border: 0; cursor: pointer;
transition: all var(--t);
}
.wpcf7 input[type="submit"]:hover {
background: var(--c-primary-dark);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.wpcf7-spinner { vertical-align: middle; }
.wpcf7-response-output {
margin: 24px 0 0 !important;
padding: 14px 18px !important;
border-radius: var(--radius-sm);
font-size: 14px;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: var(--c-success);
color: var(--c-success);
background: rgba(16, 185, 129, .08);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
border-color: var(--c-danger);
color: var(--c-danger);
background: rgba(239, 68, 68, .06);
}
.wpcf7-not-valid-tip {
font-size: 12px !important;
color: var(--c-danger) !important;
margin-top: 4px;
}
.wpcf7 .wpcf7-not-valid {
border-color: var(--c-danger) !important;
}
/* ---------- Animations ---------- */
@media (prefers-reduced-motion: no-preference) {
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-in { opacity: 1; transform: none; }
}
/* ==========================================================================
Single Article (single.php)
========================================================================== */
.article-hero {
position: relative;
background: var(--c-bg-dark);
color: var(--c-text-on-dark);
padding: 80px 0 60px;
overflow: hidden;
}
.article-hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(800px 400px at 30% 0%, rgba(212, 175, 55, .18), transparent);
pointer-events: none;
}
.article-hero > .container {
position: relative; z-index: 2;
max-width: 900px;
}
.article-hero__crumbs {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 24px;
font-size: 13px;
color: rgba(255,255,255,.55);
}
.article-hero__crumbs a { color: rgba(255,255,255,.65); }
.article-hero__crumbs a:hover { color: #fff; }
.article-hero__crumbs span[aria-hidden] { color: rgba(255,255,255,.3); }
.article-hero__meta-top {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
}
.article-hero__badge {
display: inline-flex; align-items: center;
padding: 6px 14px;
border: 1px solid var(--c-accent);
color: var(--c-accent);
border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.article-hero__date {
font-size: 13px; color: rgba(255,255,255,.65);
letter-spacing: 0.04em;
font-feature-settings: 'tnum';
font-variant-numeric: tabular-nums;
}
.article-hero__title {
font-size: clamp(28px, 4.2vw, 44px);
font-weight: 900;
line-height: 1.3;
margin-bottom: 28px;
letter-spacing: -0.02em;
}
.article-hero__meta {
display: flex; flex-wrap: wrap; gap: 20px;
color: rgba(255,255,255,.6);
font-size: 14px;
}
.article-hero__meta span,
.article-hero__author {
display: inline-flex; align-items: center; gap: 6px;
}
.article-hero__meta .lucide { width: 16px; height: 16px; color: rgba(255,255,255,.5); }
.article-cover-wrap {
background: linear-gradient(to bottom, var(--c-bg-dark) 0%, var(--c-bg-dark) 50%, transparent 50%);
}
/* Animatable gradient angle for the rotating ring */
@property --cover-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.article-cover {
margin: 0 auto;
width: 340px;
height: 340px;
aspect-ratio: 1 / 1;
border-radius: 50%;
padding: 5px; /* thinner ring */
border: none;
/* Radar sweep: bright narrow head + saturated gold trail + dark bronze base */
background:
conic-gradient(
from var(--cover-angle),
#FFF1AE 0deg, /* sweep head — bright highlight */
#D4AF37 15deg, /* full accent gold */
#E8D27A 45deg, /* warm cream */
#F5EDD2 90deg, /* very light cream */
#B38A01 270deg, /* deep gold */
#B59600 320deg, /* warming up */
#735F00 350deg, /* dark amber */
#4B3E00 360deg /* deep bronze tail */
);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
overflow: hidden;
cursor: pointer;
animation: coverBorderSpin 3s linear infinite;
}
@keyframes coverBorderSpin {
to { --cover-angle: 360deg; }
}
.article-cover__img {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
object-fit: cover;
background: #fff;
transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.article-cover:hover .article-cover__img {
transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
.article-cover { animation: none; }
}
.article-cover figcaption {
padding: 14px 20px;
font-size: 13px;
color: var(--c-text-muted);
text-align: center;
background: var(--c-bg-alt);
}
.article-body-wrap { padding: 80px 0 40px; }
.article-body { max-width: 760px; margin: 0 auto; }
.article-content { font-size: 17px; line-height: 1.85; color: var(--c-text); }
.article-content > * + * { margin-top: 1.2em; }
.article-content p { margin: 0 0 1.2em; }
.article-content h2 {
font-size: clamp(22px, 2.6vw, 28px);
margin: 2.2em 0 0.8em;
padding-bottom: 0.4em;
border-bottom: 1px solid var(--c-border);
}
.article-content h3 { font-size: clamp(19px, 2.2vw, 22px); margin: 1.8em 0 0.6em; }
.article-content h4 { font-size: 17px; margin: 1.4em 0 0.4em; }
.article-content ul, .article-content ol {
margin: 1em 0 1.4em; padding-left: 1.8em; list-style: revert;
}
.article-content li { margin-bottom: 0.5em; }
.article-content li::marker { color: var(--c-text-muted); }
.article-content a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: var(--c-primary-dark); }
.article-content strong { font-weight: 700; }
.article-content em { font-style: italic; }
.article-content blockquote {
margin: 2em 0; padding: 18px 24px;
border-left: 4px solid var(--c-accent);
background: var(--c-bg-alt);
color: var(--c-text); font-style: italic;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article-content blockquote p:last-child { margin-bottom: 0; }
.article-content code {
padding: 2px 8px; background: var(--c-bg-alt);
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.92em; color: var(--c-text);
}
.article-content pre {
padding: 20px 24px; margin: 1.5em 0;
background: var(--c-bg-dark); color: var(--c-text-on-dark);
border-radius: var(--radius);
overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.article-content pre code { padding: 0; background: transparent; color: inherit; }
.article-content hr { border: 0; border-top: 1px solid var(--c-border); margin: 2.5em 0; }
.article-content table {
width: 100%; border-collapse: collapse;
margin: 1.5em 0; font-size: 14px;
}
.article-content th, .article-content td {
padding: 12px 16px; border-bottom: 1px solid var(--c-border); text-align: left;
}
.article-content th { background: var(--c-bg-alt); font-weight: 700; }
/* ===== Article Images — breathing room ===== */
.article-content img {
max-width: 100%; height: auto;
border-radius: var(--radius);
display: block;
margin: 2.8em auto;
}
.article-content figure { margin: 2.8em 0; }
.article-content figure img { margin: 0 auto; }
.article-content figcaption {
margin-top: 14px; padding: 0 14px;
font-size: 13px; color: var(--c-text-muted);
text-align: center; line-height: 1.6;
font-style: italic;
}
.article-content .alignwide,
.article-content figure.alignwide {
margin-left: -80px; margin-right: -80px;
margin-top: 3.2em; margin-bottom: 3.2em;
}
.article-content .alignwide img,
.article-content figure.alignwide img { width: 100%; }
.article-content .alignfull,
.article-content figure.alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw; max-width: 100vw;
margin-top: 3.6em; margin-bottom: 3.6em;
}
.article-content .alignfull img,
.article-content figure.alignfull img { width: 100%; border-radius: 0; }
.article-content .alignleft {
float: left;
margin: 0.8em 1.8em 1.5em 0;
max-width: 50%;
}
.article-content .alignright {
float: right;
margin: 0.8em 0 1.5em 1.8em;
max-width: 50%;
}
.article-content .aligncenter { margin-left: auto; margin-right: auto; }
.article-content .wp-caption {
max-width: 100%; margin: 2.8em auto;
background: var(--c-bg-alt);
padding: 14px;
border-radius: var(--radius);
}
.article-content .wp-caption img {
margin: 0 0 12px;
border-radius: var(--radius-sm);
}
.article-content .wp-caption .wp-caption-text {
margin: 0; padding: 0 6px;
font-size: 13px; color: var(--c-text-muted);
text-align: center;
}
.article-tags {
margin-top: 48px; padding-top: 28px;
border-top: 1px solid var(--c-border);
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
color: var(--c-text-muted); font-size: 14px;
}
.article-tags .lucide { width: 16px; height: 16px; }
.article-tags a {
padding: 4px 12px; background: var(--c-bg-alt);
border-radius: 999px;
color: var(--c-text-muted); font-size: 13px;
transition: all var(--t);
}
.article-tags a:hover { background: var(--c-bg-dark); color: #fff; }
.article-share {
margin-top: 32px; padding: 24px;
background: var(--c-bg-alt); border-radius: var(--radius);
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
}
.article-share__label { font-size: 14px; font-weight: 600; color: var(--c-text); }
.article-share__buttons { display: flex; gap: 8px; }
.article-share__btn {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid var(--c-border);
border-radius: 50%;
color: var(--c-text); /* darker so icon is clearly visible */
cursor: pointer; transition: all var(--t);
padding: 0; /* button reset */
}
.article-share__btn:hover {
background: var(--c-bg-dark); color: #fff;
border-color: var(--c-bg-dark); transform: translateY(-2px);
}
.article-share__btn .lucide,
.article-share__btn svg {
width: 20px; height: 20px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
display: block;
}
/* Brand icons (filled SVG, not stroked) — override the above */
.article-share__btn .brand-icon {
width: 20px; height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.article-share__btn .brand-icon svg {
width: 100%; height: 100%;
stroke: none;
fill: currentColor;
display: block;
}
/* Fallback before Lucide JS replaces with