/* ═══════════════════════════════════════════════════════════
soltero.css — Soltero Dev | Shared Design System
v3.0 — Bootstrap 5 integration + Deep Luxury Gold palette
═══════════════════════════════════════════════════════════ */
/* Fonts are loaded via in each page's (with preconnect) —
loading them again here via @import would block rendering twice. */
/* ── Variables ────────────────────────────────────────────── */
:root {
/* ── DEEP LUXURY GOLD PALETTE (v3) ── */
--gold: #C9A84C; /* primary — rich antique gold */
--gold-light: #E8C96A; /* hover / highlight */
--gold-dim: #9E7A28; /* muted / disabled state */
--gold-pale: #F5E6B8; /* pale shimmer accent */
--gold-rich: #B8860B; /* darkgoldenrod — deep press */
--gold-glow: rgba(201,168,76,0.35); /* glow base */
--bg: #080705;
--bg2: #0d0c08;
--bg3: #111009;
--border: rgba(201,168,76,0.18);
--border-mid: rgba(201,168,76,0.30);
--border-hi: rgba(201,168,76,0.50);
--text: rgba(255,255,255,0.88);
--text-dim: rgba(255,255,255,0.45);
--text-faint: rgba(255,255,255,0.22);
--nav-h: 60px;
--sidebar-w: 80px;
/* ── SPACING SYSTEM (8px grid) ── */
--sp-1: 8px;
--sp-2: 16px;
--sp-3: 24px;
--sp-4: 32px;
--sp-5: 40px;
--sp-6: 48px;
--radius: 18px;
--radius-sm: 12px;
--radius-xs: 8px;
--shadow: 0 8px 32px rgba(0,0,0,.55), 0 1px 0 rgba(201,168,76,.12) inset;
--glow-gold: 0 0 28px rgba(201,168,76,.35), 0 0 60px rgba(201,168,76,.12);
--transition: 0.3s cubic-bezier(.34,1.56,.64,1);
/* ── TYPOGRAPHY SYSTEM ── */
/* Display: Cinzel (headings, brand) */
/* Body: Inter (body text, UI labels) */
--font-display: 'Cinzel', serif;
--font-body: 'Inter', sans-serif;
--font-legacy: 'Inter', sans-serif; /* Raleway removed — was unused, cut for perf */
/* category colors */
--c-web: #2aabee; --c-web-bg: rgba(42,171,238,.1);
--c-ai: #a78bfa; --c-ai-bg: rgba(167,139,250,.1);
--c-mob: #3DD28A; --c-mob-bg: rgba(61,210,138,.1);
--c-auto: #fbbf24; --c-auto-bg: rgba(251,191,36,.1);
}
/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Remove default browser tap highlight (blue flash) ────── */
* { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
font-family: "Inter", sans-serif;
background: var(--bg);
color: var(--text);
/* Inter as primary body font — clean, highly legible on mobile */
font-family: var(--font-body), 'Raleway', sans-serif;
overflow-x: hidden;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
img { display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
/* Typography hierarchy */
h1, h2, h3, .heading { font-family: var(--font-display); }
p, label, span, .body-text { font-family: var(--font-body); }
/* ── Background ambient ───────────────────────────────────── */
/* FIX: was two flat radial gradients only — added a faint grid mesh,
a subtle noise texture and a slow-drifting blurred orb so the page
never reads as an empty flat black background. All decorative,
pointer-events:none, and the drifting orb is disabled under
prefers-reduced-motion. */
.bg-ambient {
position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
background:
radial-gradient(ellipse 60% 50% at 15% 10%, rgba(201,168,76,.10) 0%, transparent 55%),
radial-gradient(ellipse 50% 60% at 85% 85%, rgba(201,168,76,.07) 0%, transparent 55%),
repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 64px),
repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 64px);
}
.bg-ambient::before {
content: ""; position: absolute; inset: 0; opacity: .03; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.bg-ambient::after {
content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
top: 15%; left: 55%;
background: radial-gradient(circle, rgba(201,168,76,.10), transparent 70%);
filter: blur(50px);
animation: bgOrbFloat 20s ease-in-out infinite;
}
@keyframes bgOrbFloat {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-70px, 50px); }
}
@media (prefers-reduced-motion: reduce) {
.bg-ambient::after { animation: none; }
}
/* ── Header ───────────────────────────────────────────────── */
.header {
position: fixed; top: 0; left: 0; right: 0;
height: var(--nav-h);
background: rgba(8,7,4,.92);
backdrop-filter: blur(24px);
border-bottom: 1px solid var(--border);
display: flex; align-items: center;
padding: 0 var(--sp-2); gap: var(--sp-1);
z-index: 100;
box-shadow: 0 1px 0 rgba(201,168,76,.13), 0 4px 20px rgba(0,0,0,.5);
}
.header-logo {
display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.header-logo-icon {
position: relative; width: 38px; height: 38px;
border-radius: var(--radius-sm);
background: rgba(201,168,76,.13);
border: 1px solid var(--border-mid);
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(10px);
box-shadow: 0 0 18px rgba(201,168,76,.38), 0 1px 0 rgba(201,168,76,.25) inset;
}
.header-logo-icon img {
width: 26px; height: 26px; object-fit: contain;
filter: drop-shadow(0 0 6px rgba(201,168,76,.80));
}
.header-logo-text { line-height: 1; }
.header-brand {
font-family: var(--font-display); font-weight: 800; font-size: 15px;
background: linear-gradient(135deg,#C9A84C,#E8C96A,#C9A84C);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
letter-spacing: 3px;
}
.header-sub {
font-size: 8px; color: rgba(201,168,76,.62); font-family: var(--font-body);
letter-spacing: 4px; text-transform: uppercase; margin-top: 3px;
}
.header-spacer { flex: 1; }
/* lang button */
.lang-btn-trigger {
display: flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.04);
border: 1px solid var(--border);
border-radius: 10px; padding: 7px 11px;
transition: .2s;
/* min tap target */
min-height: 44px;
}
.lang-btn-trigger:hover { border-color: var(--border-mid); }
.lang-btn-trigger:active {
transform: scale(0.94);
background: rgba(201,168,76,.10);
transition: transform 0.08s ease;
}
.lang-flag { font-size: 15px; }
.lang-code {
font-size: 10px; font-weight: 700; color: var(--gold);
font-family: var(--font-body);
letter-spacing: 1px;
}
.lang-chevron {
width: 11px; height: 11px;
stroke: var(--gold); transition: transform .2s;
}
/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
width: var(--sidebar-w);
position: fixed; left: 0; top: var(--nav-h); bottom: 0;
background: rgba(8,7,4,.9);
backdrop-filter: blur(20px);
border-right: 1px solid rgba(201,168,76,.18);
display: flex; flex-direction: column;
align-items: center; padding: var(--sp-2) 0; gap: 4px;
z-index: 90;
}
@media (max-width: 639px) { .sidebar { display: none; } }
.nav-item {
width: 56px; border-radius: 14px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 5px; padding: 10px 0;
border: 1px solid transparent;
transition: var(--transition);
position: relative;
}
.nav-item:hover { background: rgba(212,175,55,.05); border-color: var(--border); }
.nav-item:active {
transform: scale(0.92);
transition: transform 0.08s ease;
}
.nav-item.active {
background: rgba(201,168,76,.13);
border-color: rgba(201,168,76,.32);
}
.nav-item.active::before {
content: '';
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 28px;
background: linear-gradient(var(--gold), rgba(201,168,76,.45));
border-radius: 0 4px 4px 0;
}
.nav-icon {
width: 36px; height: 36px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
transition: .2s;
}
.nav-item.active .nav-icon {
background: rgba(201,168,76,.22);
border-color: var(--border-mid);
box-shadow: 0 0 14px rgba(201,168,76,.50);
}
.nav-icon svg { width: 17px; height: 17px; stroke: rgba(255,255,255,.3); transition: .2s; }
.nav-item.active .nav-icon svg { stroke: var(--gold); }
.nav-label {
font-size: 8px; letter-spacing: .6px; font-weight: 600;
font-family: var(--font-body);
color: rgba(255,255,255,.3); text-transform: uppercase; transition: .2s;
}
.nav-item.active .nav-label { color: var(--gold); }
/* ── Bottom Nav (mobile) ──────────────────────────────────── */
.bottom-nav {
position: fixed; bottom: 0; left: 0; right: 0;
background: rgba(8,7,4,.95);
border-top: 1px solid var(--border);
z-index: 90;
/* FIX: safe-area-inset-bottom — iOS home bar */
padding: 8px 0 max(12px, env(safe-area-inset-bottom));
backdrop-filter: blur(24px);
box-shadow: 0 -4px 20px rgba(0,0,0,.5), 0 -1px 0 rgba(201,168,76,.13);
display: flex; justify-content: space-around; align-items: center;
}
@media (min-width: 640px) { .bottom-nav { display: none; } }
.bnav-item {
display: flex; flex-direction: column;
align-items: center; gap: 4px;
padding: 4px 8px;
/* FIX: minimum tap target 44x44px (iOS HIG) */
min-width: 56px;
min-height: 44px;
justify-content: center;
position: relative;
transition: transform 0.12s cubic-bezier(.34,1.56,.64,1);
}
.bnav-item:active {
transform: scale(0.88);
transition: transform 0.07s ease;
}
.bnav-item.active::before {
content: '';
position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
width: 32px; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
border-radius: 1px;
}
.bnav-icon {
width: 40px; height: 40px; border-radius: 13px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
transition: .25s;
}
.bnav-item.active .bnav-icon {
background: linear-gradient(135deg, rgba(201,168,76,.27), rgba(212,175,55,.063));
border-color: rgba(201,168,76,.45);
box-shadow: 0 4px 18px rgba(201,168,76,.50), 0 1px 0 rgba(201,168,76,.22) inset;
}
.bnav-icon svg { width: 19px; height: 19px; stroke: rgba(255,255,255,.35); stroke-width: 1.5; transition: .25s; }
.bnav-item.active .bnav-icon svg { stroke: var(--gold); stroke-width: 2; }
.bnav-label {
font-size: 8px; font-weight: 500; letter-spacing: .3px;
font-family: var(--font-body);
color: rgba(255,255,255,.28); text-transform: none; transition: .25s;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px;
}
.bnav-item.active .bnav-label { color: var(--gold); font-weight: 700; }
/* ── Main layout ──────────────────────────────────────────── */
.main-wrap {
display: flex; padding-top: var(--nav-h);
position: relative; z-index: 1;
}
.page-content {
flex: 1;
margin-left: 0;
/* FIX: pb accounts for bottom nav + safe area */
padding: var(--sp-3) var(--sp-2) calc(80px + env(safe-area-inset-bottom) + 16px);
max-width: 100%; box-sizing: border-box;
}
@media (min-width: 640px) {
.page-content { margin-left: var(--sidebar-w); padding: var(--sp-3) var(--sp-3) var(--sp-3); }
}
.page-inner { max-width: 820px; margin: 0 auto; }
/* ── Gold shimmer text ─────────────────────────────────────── */
.gold-shimmer {
background: linear-gradient(90deg, #C9A84C 0%, #E8C96A 25%, #F5E6B8 50%, #C9A84C 75%, #7A5510 100%);
background-size: 200% auto;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 3s linear infinite;
}
@keyframes shimmer { from { background-position: 0% center; } to { background-position: 200% center; } }
/* ── Card base ─────────────────────────────────────────────── */
.card {
position: relative;
background: linear-gradient(145deg, #0e0d08, #0b0a06, #080705);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 24px rgba(201,168,76,.20); }
.card:active {
transform: translateY(-1px) scale(0.985);
transition: transform 0.09s ease;
}
.card-glow-line {
position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,168,76,.80), rgba(255,215,0,.4), transparent);
pointer-events: none;
}
.corner { position: absolute; width: 16px; height: 16px; pointer-events: none; }
.corner-tl { top: 12px; left: 12px; border-top: 2px solid rgba(201,168,76,.72); border-left: 2px solid rgba(201,168,76,.72); border-radius: 5px 0 0 0; }
.corner-tr { top: 12px; right: 12px; border-top: 2px solid rgba(201,168,76,.72); border-right: 2px solid rgba(201,168,76,.72); border-radius: 0 5px 0 0; }
.corner-bl { bottom: 12px; left: 12px; border-bottom: 2px solid rgba(201,168,76,.72); border-left: 2px solid rgba(201,168,76,.72); border-radius: 0 0 0 5px; }
.corner-br { bottom: 12px; right: 12px; border-bottom: 2px solid rgba(201,168,76,.72); border-right: 2px solid rgba(201,168,76,.72); border-radius: 0 0 5px 0; }
/* ── Section divider ──────────────────────────────────────── */
.section-divider {
display: flex; align-items: center; gap: var(--sp-1);
margin: var(--sp-5) 0 var(--sp-4);
}
.divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-hi)); }
.divider-line.right { background: linear-gradient(90deg, var(--border-hi), transparent); }
.divider-icon {
display: flex; align-items: center; gap: 6px;
}
.divider-diamond {
width: 4px; height: 4px; background: var(--gold);
transform: rotate(45deg); box-shadow: 0 0 8px var(--gold);
}
/* ── Badge pill ───────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(201,168,76,.13);
border: 1px solid rgba(201,168,76,.50);
border-radius: 20px; padding: 5px 12px;
font-size: 9px; font-weight: 700; color: var(--gold);
letter-spacing: 1.5px; text-transform: none;
font-family: var(--font-display);
}
/* ── Availability badge: pulsing dot animation ─────────────── */
.badge-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #3DD28A;
box-shadow: 0 0 0 0 rgba(61,210,138,.7);
animation: pulse-available 2s ease-in-out infinite;
}
@keyframes pulse-available {
0% { box-shadow: 0 0 0 0 rgba(61,210,138,.7); background: #3DD28A; }
50% { box-shadow: 0 0 0 5px rgba(61,210,138,.0); background: #4EE89A; }
100% { box-shadow: 0 0 0 0 rgba(61,210,138,.0); background: #3DD28A; }
}
/* ── Buttons ──────────────────────────────────────────────── */
/* FIX: Primary CTA — solid gold fill, dark text = maximum contrast */
.btn-primary {
display: inline-flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, #C9A84C, #A8841A, #B8941F);
border-radius: 40px; padding: 14px 28px;
font-weight: 800; font-size: 12px; color: #080808;
letter-spacing: .5px; text-transform: none;
font-family: var(--font-display);
box-shadow: 0 6px 28px rgba(201,168,76,.68), 0 1px 0 rgba(255,255,255,.2) inset;
border: 1px solid rgba(201,168,76,.80);
transition: .2s; cursor: pointer;
/* min tap target */
min-height: 48px;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 36px rgba(201,168,76,.80);
background: linear-gradient(135deg, #D4A83A, #C9A84C, #A8841A);
}
.btn-primary:active { transform: translateY(0); }
/* FIX: secondary btn press */
.btn-secondary:active {
transform: scale(.95);
background: rgba(212,175,55,.18);
transition: transform 0.08s ease, background 0.08s ease;
}
/* FIX: Secondary CTA — visible outline with hover fill */
.btn-secondary {
display: inline-flex; align-items: center; gap: 8px;
border: 1.5px solid rgba(201,168,76,.68);
border-radius: 40px; padding: 13px 24px;
font-weight: 700; font-size: 12px; color: var(--gold);
letter-spacing: .5px; text-transform: none;
font-family: var(--font-display);
background: rgba(201,168,76,.10);
transition: .2s; cursor: pointer;
min-height: 48px;
}
.btn-secondary:hover {
border-color: var(--gold);
background: rgba(212,175,55,.14);
color: #E8C96A;
box-shadow: 0 0 16px rgba(201,168,76,.38);
}
.btn-secondary:active { transform: scale(.98); }
/* ── Stats row ────────────────────────────────────────────── */
.stats-row {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: var(--sp-1); margin-bottom: var(--sp-4);
}
.stat-cell {
background: rgba(10,10,10,.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(201,168,76,.18);
border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-1);
text-align: center;
}
.stat-num {
font-family: var(--font-display); font-weight: 900;
font-size: 20px; color: var(--gold); line-height: 1;
}
.stat-lbl {
font-size: 10px; color: var(--text-faint); margin-top: 6px;
letter-spacing: .5px; text-transform: uppercase;
font-family: var(--font-body);
}
/* ── Trust row ────────────────────────────────────────────── */
.trust-row {
display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
margin: 4px 0 var(--sp-4);
}
.trust-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 20px;
background: rgba(61,210,138,.08); border: 1px solid rgba(61,210,138,.28);
font-size: 11px; font-weight: 600; color: #8fe0b8;
font-family: var(--font-body);
}
.trust-pill svg { stroke: #3DD28A; flex-shrink: 0; }
/* ── Featured project ─────────────────────────────────────── */
.featured-project {
display: flex; flex-direction: column;
border-radius: var(--radius); overflow: hidden;
background: linear-gradient(145deg, rgba(201,168,76,.05), rgba(10,10,10,.85));
border: 1px solid var(--cat-border, rgba(201,168,76,.35));
box-shadow: 0 12px 40px rgba(0,0,0,.4);
opacity: 0; margin-bottom: 8px;
transition: box-shadow .3s, border-color .3s;
}
.featured-project.reveal { animation: cardReveal .6s ease both; opacity: 1; }
.featured-project:hover { box-shadow: 0 16px 50px rgba(0,0,0,.55), 0 0 30px var(--cat-glow, rgba(201,168,76,.25)); }
.featured-img-wrap {
position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;
border-bottom: 1px solid var(--cat-border, rgba(201,168,76,.3));
}
.featured-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.featured-project:hover .featured-img { transform: scale(1.06); }
.featured-img-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,.5) 100%); }
.featured-body { padding: 22px 20px 26px; }
.featured-tag {
display: inline-flex; align-items: center; gap: 6px;
color: var(--gold); font-size: 10px; font-weight: 800;
letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px;
font-family: var(--font-body);
}
.featured-tag svg { fill: var(--gold); }
.featured-title {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(18px, 4vw, 24px); color: #fff; margin-bottom: 10px;
}
.featured-desc {
font-size: 13px; color: var(--text-dim); line-height: 1.8;
margin-bottom: 6px; max-width: 520px;
}
.featured-btn { width: auto; padding: 12px 26px; }
@media (min-width: 640px) {
.featured-project { flex-direction: row; align-items: stretch; }
.featured-img-wrap { width: 46%; aspect-ratio: auto; border-bottom: none; border-right: 1px solid var(--cat-border, rgba(201,168,76,.3)); }
.featured-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}
/* ── Footer CTA ───────────────────────────────────────────── */
.footer-cta {
position: relative; text-align: center; overflow: hidden;
border-radius: var(--radius); padding: 40px 24px; margin: 8px 0 32px;
background:
radial-gradient(ellipse at 50% 0%, rgba(201,168,76,.14), transparent 70%),
linear-gradient(145deg, #0e0d08, #0b0a06, #080705);
border: 1px solid rgba(201,168,76,.3);
}
.footer-cta::before {
content: ""; position: absolute; inset: -40% -20% auto -20%; height: 200%;
background: radial-gradient(circle, rgba(201,168,76,.18), transparent 65%);
filter: blur(30px); pointer-events: none;
}
.footer-cta-title {
position: relative; font-family: var(--font-display); font-weight: 900;
font-size: clamp(20px, 5vw, 30px); color: #fff; margin-bottom: 12px;
}
.footer-cta-desc {
position: relative; font-size: 13px; color: var(--text-dim);
max-width: 420px; margin: 0 auto 24px; line-height: 1.8;
}
.footer-cta .btn-primary { position: relative; }
/* ── Float 3D animation ───────────────────────────────────── */
.float-3d {
animation: float3d 4s ease-in-out infinite;
}
@keyframes float3d {
0%, 100% { transform: translateY(0px) perspective(800px) rotateY(-3deg); }
50% { transform: translateY(-12px) perspective(800px) rotateY(3deg); }
}
@keyframes rotateGlow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes splashFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes splashSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes splashBlink {
0%, 100% { opacity: 1; } 50% { opacity: .2; }
}
@keyframes splashProgress {
0% { width: 0%; } 60% { width: 75%; } 100% { width: 100%; }
}
@keyframes splashDotPulse {
0%, 100% { background: rgba(201,168,76,.42); transform: scale(.8); }
50% { background: #C9A84C; transform: scale(1.3); box-shadow: 0 0 8px rgba(212,175,55,.8); }
}
@keyframes cardReveal {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: cardReveal .5s ease both; }
/* ── Scroll progress bar ──────────────────────────────────── */
#scroll-progress {
position: fixed; top: var(--nav-h); left: 0; right: 0;
height: 2px; z-index: 99; pointer-events: none;
background: transparent;
}
#scroll-progress-bar {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-light));
box-shadow: 0 0 8px rgba(201,168,76,.80);
transition: width .1s linear;
}
/* ── PWA Splash ───────────────────────────────────────────── */
#pwa-splash {
position: fixed; inset: 0; z-index: 9999;
background: var(--bg);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-family: var(--font-display);
overflow: hidden;
transition: opacity .6s ease, visibility .6s ease;
}
#pwa-splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 30%, rgba(201,168,76,.13) 0%, transparent 60%),
radial-gradient(ellipse 40% 40% at 80% 80%, rgba(201,168,76,.07) 0%, transparent 55%);
pointer-events: none;
}
.splash-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(201,168,76,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,76,.07) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
.splash-logo-wrap {
position: relative; margin-bottom: var(--sp-5);
animation: splashFloat 3s ease-in-out infinite;
}
.splash-ring {
position: absolute; inset: -12px; border-radius: 36px;
background: conic-gradient(from 0deg, #C9A84C, transparent 30%, #E8C96A 50%, transparent 80%, #C9A84C);
opacity: .5; animation: splashSpin 3s linear infinite;
}
.splash-ring-mask {
position: absolute; inset: -11px; border-radius: 35px;
background: var(--bg);
}
.splash-logo {
width: 100px; height: 100px; border-radius: 24px; overflow: hidden;
border: 2px solid rgba(201,168,76,.72);
box-shadow: 0 0 60px rgba(201,168,76,.42), 0 20px 60px rgba(0,0,0,.6);
position: relative; z-index: 1;
}
.splash-logo img { width: 100%; height: 100%; object-fit: cover; }
.splash-badge {
position: absolute; bottom: -14px; right: -14px;
background: linear-gradient(135deg, #C9A84C, #9E7A28);
border-radius: 10px; padding: 5px 10px; z-index: 2;
box-shadow: 0 4px 16px rgba(201,168,76,.62);
display: flex; align-items: center; gap: 4px;
}
.splash-badge-dot {
width: 6px; height: 6px; border-radius: 50%; background: #080705;
animation: splashBlink 1.2s ease-in-out infinite;
}
.splash-badge-text {
font-size: 9px; font-weight: 800; color: #080705;
letter-spacing: 1.5px; text-transform: uppercase;
}
.splash-title {
font-size: 36px; font-weight: 900; letter-spacing: 6px;
text-transform: uppercase;
background: linear-gradient(90deg,#C9A84C 0%,#E8C96A 25%,#F5E6B8 50%,#C9A84C 75%,#7A5510 100%);
background-size: 200% auto;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
animation: shimmer 3s linear infinite;
margin-bottom: 6px; line-height: 1;
}
.splash-subtitle {
font-size: 10px; font-weight: 500; color: rgba(255,255,255,.3);
letter-spacing: 5px; text-transform: uppercase;
font-family: var(--font-body); margin-bottom: var(--sp-6);
}
.splash-loader { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.splash-progress-track {
width: 180px; height: 2px; background: rgba(201,168,76,.20);
border-radius: 2px; overflow: hidden;
}
.splash-progress-bar {
height: 100%;
background: linear-gradient(90deg, #C9A84C, #E8C96A);
border-radius: 2px; box-shadow: 0 0 10px rgba(201,168,76,.80);
animation: splashProgress 1.8s cubic-bezier(.4,0,.2,1) forwards;
}
.splash-dots { display: flex; gap: 6px; }
.splash-dot {
width: 5px; height: 5px; border-radius: 50%;
background: rgba(201,168,76,.62);
animation: splashDotPulse 1.2s ease-in-out infinite;
}
.splash-dot:nth-child(2) { animation-delay: .2s; }
.splash-dot:nth-child(3) { animation-delay: .4s; }
.splash-corner {
position: absolute; width: 40px; height: 40px;
}
.splash-corner-tl { top: 24px; left: 24px; border-top: 2px solid rgba(201,168,76,.55); border-left: 2px solid rgba(201,168,76,.55); border-radius: 8px 0 0 0; }
.splash-corner-tr { top: 24px; right: 24px; border-top: 2px solid rgba(201,168,76,.55); border-right: 2px solid rgba(201,168,76,.55); border-radius: 0 8px 0 0; }
.splash-corner-bl { bottom: 24px; left: 24px; border-bottom: 2px solid rgba(201,168,76,.55); border-left: 2px solid rgba(201,168,76,.55); border-radius: 0 0 0 8px; }
.splash-corner-br { bottom: 24px; right: 24px; border-bottom: 2px solid rgba(201,168,76,.55); border-right: 2px solid rgba(201,168,76,.55); border-radius: 0 0 8px 0; }
/* ── Lang overlay ─────────────────────────────────────────── */
#lang-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.7);
backdrop-filter: blur(12px); z-index: 200;
display: none; align-items: center; justify-content: center;
}
#lang-overlay.open { display: flex; }
.lang-modal {
background: #0d0c08; border: 1px solid var(--border-mid);
border-radius: 20px; padding: var(--sp-4); min-width: 260px;
box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 40px rgba(201,168,76,.25);
animation: cardReveal .3s ease;
}
.lang-modal-title {
font-family: var(--font-display); font-size: 11px; font-weight: 700;
color: var(--gold); letter-spacing: 3px; text-transform: uppercase;
text-align: center; margin-bottom: var(--sp-3);
}
.lang-options { display: flex; flex-direction: column; gap: var(--sp-1); }
.lang-option {
display: flex; align-items: center; gap: 14px;
padding: 14px var(--sp-2); border-radius: var(--radius-sm);
border: 1px solid rgba(255,255,255,.06);
background: rgba(255,255,255,.02);
cursor: pointer; transition: .2s;
font-size: 14px; color: var(--text-dim);
font-family: var(--font-body);
/* tap target */
min-height: 52px;
}
.lang-option:hover { border-color: var(--border-mid); color: var(--text); }
.lang-option:active {
transform: scale(0.97);
background: rgba(201,168,76,.18);
transition: transform 0.08s ease;
}
.lang-option.active {
border-color: var(--border-mid);
background: rgba(201,168,76,.13);
color: var(--gold);
}
.lang-option-flag { font-size: 22px; }
.lang-option-name { font-weight: 600; }
.lang-option-check { margin-left: auto; color: var(--gold); opacity: 0; }
.lang-option.active .lang-option-check { opacity: 1; }
/* ── Project cards ────────────────────────────────────────── */
#projectsGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.proj-card {
border-radius: var(--radius);
background: rgba(10,10,10,.8);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.06);
padding: var(--sp-2) var(--sp-2) var(--sp-3);
cursor: pointer; transition: .3s;
box-shadow: 0 4px 20px rgba(0,0,0,.3);
opacity: 0;
}
.proj-card.reveal {
animation: cardReveal .5s ease both;
opacity: 1;
}
.proj-card:hover {
transform: translateY(-6px);
border-color: var(--cat-border, rgba(201,168,76,.42));
box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 24px var(--cat-glow, rgba(201,168,76,.25));
}
.proj-card:active {
transform: translateY(-2px) scale(0.985);
transition: transform 0.1s ease;
}
.proj-img-wrap {
width: 100%; aspect-ratio: 16/9;
border-radius: var(--radius-sm); overflow: hidden;
position: relative; margin-bottom: var(--sp-2);
border: 1px solid var(--cat-border, rgba(201,168,76,.42));
}
.proj-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.proj-card:hover .proj-img { transform: scale(1.08); }
.proj-card:hover .proj-btn:not(.proj-btn-dim) { border-color: var(--cat-text); box-shadow: 0 0 16px var(--cat-glow); }
.proj-img-overlay {
position: absolute; inset: 0;
background: linear-gradient(transparent 60%, rgba(0,0,0,.4) 100%);
}
.proj-cat-badge {
position: absolute; top: 10px; left: 10px;
border-radius: 6px; padding: 4px 10px;
font-size: 10px; font-weight: 700; letter-spacing: .5px;
font-family: var(--font-body);
border: 1px solid;
background: var(--cat-bg); color: var(--cat-text); border-color: var(--cat-border);
}
.proj-year {
position: absolute; top: 10px; right: 10px;
background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.1);
border-radius: 6px; padding: 3px 9px;
font-size: 10px; color: rgba(255,255,255,.5);
font-family: var(--font-body);
}
.proj-title {
font-family: var(--font-display); font-weight: 800; font-size: 14px;
color: #fff; margin-bottom: var(--sp-1); letter-spacing: .5px;
}
.proj-desc {
font-size: 12px; font-family: var(--font-body);
color: var(--text-dim); line-height: 1.7;
margin-bottom: var(--sp-2);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.proj-tech { margin-bottom: var(--sp-2); }
.proj-tech-label {
font-size: 9px; font-weight: 700; color: rgba(255,255,255,.25);
font-family: var(--font-body);
letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; display: block;
}
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tech-tag {
/* FIX: larger tap target for tags */
padding: 5px 10px; border-radius: 6px;
background: rgba(212,175,55,.063);
border: 1px solid rgba(201,168,76,.22);
font-size: 10px; font-weight: 700;
font-family: var(--font-body);
color: var(--cat-text, var(--gold));
letter-spacing: .3px;
min-height: 28px; display: inline-flex; align-items: center;
}
.proj-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; padding: 12px 0; border-radius: 10px;
border: 1px solid var(--cat-border);
background: transparent; color: var(--cat-text);
font-family: var(--font-body); font-weight: 700;
font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
cursor: pointer; transition: .2s;
/* min tap target */
min-height: 44px;
}
.proj-btn:hover { background: rgba(255,255,255,.06); }
.proj-btn:active {
transform: scale(0.96);
background: rgba(255,255,255,.1);
transition: transform 0.08s ease;
}
.proj-btn-dim { opacity: .5; cursor: default; }
.proj-glow-line {
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
pointer-events: none;
}
/* filter buttons */
#filterBtns { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.filter-btn {
/* FIX: tap target min 44px */
padding: 10px var(--sp-2); border-radius: 20px;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.03);
font-size: 12px; font-weight: 600;
font-family: var(--font-body);
color: var(--text-dim);
letter-spacing: .3px; cursor: pointer; transition: .2s;
min-height: 40px;
}
.filter-btn:hover { border-color: var(--cat-border, var(--border-mid)); color: var(--cat-text, var(--gold)); }
.filter-btn:active {
transform: scale(0.94);
background: var(--cat-bg, rgba(201,168,76,.20));
transition: transform 0.08s ease;
}
.filter-btn.active {
border-color: var(--cat-border, var(--border-mid));
background: var(--cat-bg, rgba(201,168,76,.18));
color: var(--cat-text, var(--gold));
}
/* ── Services page ────────────────────────────────────────── */
.service-card {
padding: var(--sp-4) var(--sp-3); cursor: pointer;
transition: var(--transition);
display: flex; flex-direction: column; align-items: center; text-align: center;
min-height: 260px;
}
/* FIX: icon container 56px (was 48px) + colored border per service */
.service-icon {
width: 56px; height: 56px; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--sp-2);
box-shadow: 0 0 18px rgba(201,168,76,.22);
flex-shrink: 0;
}
/* FIX: icon svg 26px (was 22px) */
.service-icon svg { width: 26px; height: 26px; }
.service-name {
font-family: var(--font-display); font-weight: 800; font-size: 11px;
color: var(--text); letter-spacing: 1px; text-transform: uppercase;
margin-bottom: var(--sp-1);
}
/* FIX: service desc uses Inter at readable 12px */
.service-desc {
font-size: 12px; font-family: var(--font-body);
color: var(--text-dim); line-height: 1.75;
flex-grow: 1;
}
.service-bottom-line {
position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
}
/* Price badge — centered, sits below desc at the bottom of the card */
.service-price {
display: inline-flex; align-items: baseline; gap: 5px;
margin-top: var(--sp-3); padding: 4px 12px;
border-radius: 999px; background: rgba(212,175,55,.1);
border: 1px solid rgba(212,175,55,.3);
white-space: nowrap;
}
.service-price-label {
font-size: 9px; font-family: var(--font-body); font-weight: 600;
color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .5px;
}
.service-price-val {
font-size: 13px; font-family: var(--font-display); font-weight: 800;
color: var(--gold); letter-spacing: .3px;
}
/* ── About/Profile page ───────────────────────────────────── */
/* ── Hero FX: gradient orb + light beam + particles ─────────── */
/* Decorative only — sits behind .hero-inner, never intercepts clicks. */
.hero-fx { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.hero-orb {
position: absolute; width: 280px; height: 280px; border-radius: 50%;
top: -70px; right: -60px;
background: radial-gradient(circle, rgba(212,175,55,.35), transparent 70%);
filter: blur(34px);
animation: heroOrbFloat 10s ease-in-out infinite;
}
@keyframes heroOrbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-18px, 22px) scale(1.08); }
}
.hero-beam {
position: absolute; width: 2px; height: 160%; top: -30%; left: 62%;
background: linear-gradient(180deg, transparent, rgba(212,175,55,.55), transparent);
transform: rotate(16deg);
animation: heroBeamPulse 6s ease-in-out infinite;
}
@keyframes heroBeamPulse {
0%, 100% { opacity: .2; }
50% { opacity: .65; }
}
.hero-particle {
position: absolute; width: 3px; height: 3px; border-radius: 50%;
background: var(--gold); box-shadow: 0 0 6px var(--gold);
animation: heroParticleTwinkle 3.4s ease-in-out infinite;
}
@keyframes heroParticleTwinkle {
0%, 100% { opacity: .15; transform: scale(1); }
50% { opacity: .9; transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
.hero-orb, .hero-beam, .hero-particle { animation: none; }
}
/* Keep hero content above the fx layer */
.hero-inner, .tech-bar { position: relative; z-index: 1; }
/* ── Mobile: lighter type, less glow, no continuous animation ──
Phones have less GPU/battery headroom than desktop. Scroll-linked
transforms and layered glow are the first things to cost frame
rate, so on ≤639px we: cap hero type so it doesn't dominate a
small screen, dim/flatten glow, and freeze decorative animations
(orb float / beam pulse / bg drift) to a single static frame —
the shapes stay for atmosphere, the constant repaint doesn't. */
@media (max-width: 639px) {
.hero-inner h1 span { font-size: clamp(24px, 8vw, 34px) !important; letter-spacing: 2px !important; }
.card-glow-line { opacity: .6; }
.avatar-ring-mask { box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 18px rgba(201,168,76,.20); }
.header-logo-icon { box-shadow: 0 0 10px rgba(201,168,76,.24), 0 1px 0 rgba(201,168,76,.18) inset; }
.hero-orb { width: 170px; height: 170px; opacity: .5; filter: blur(22px); animation: none; }
.hero-beam { opacity: .16; animation: none; }
.hero-particle { box-shadow: 0 0 3px var(--gold); animation-duration: 5s; }
.bg-ambient::after { width: 240px; height: 240px; filter: blur(34px); opacity: .55; animation: none; }
.bg-ambient::before { opacity: .015; }
.featured-project:hover .featured-img,
.proj-card:hover .proj-img { transform: none; } /* hover states don't apply on touch anyway */
.footer-cta::before { filter: blur(16px); }
}
/* ── Touch ripple (mobile hero) ───────────────────────────────
Mouse-driven effects don't exist on a phone, so touching the hero
card spawns a small gold ripple at the touch point instead — see
initHeroTouchRipple() in app.js. Single element per tap, removed
automatically when its animation ends. */
.hero-ripple {
position: absolute; width: 10px; height: 10px; border-radius: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(212,175,55,.55), transparent 70%);
animation: heroRippleExpand .7s ease-out forwards;
pointer-events: none;
}
@keyframes heroRippleExpand {
0% { width: 10px; height: 10px; opacity: .8; }
100% { width: 220px; height: 220px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-ripple { animation: none; opacity: 0; }
}
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-ring {
position: absolute; inset: -8px; border-radius: 32px;
background: conic-gradient(#C9A84C, transparent, #E8C96A, transparent, #C9A84C);
opacity: .4; animation: rotateGlow 4s linear infinite; z-index: 0;
}
.avatar-ring-mask {
position: absolute; inset: -7px; border-radius: 31px;
background: #080808; z-index: 0;
}
.avatar-img {
border-radius: 24px; overflow: hidden; position: relative; z-index: 1;
border: 2px solid rgba(201,168,76,.72);
box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(201,168,76,.38);
}
.avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.avatar-stat {
position: absolute; z-index: 2;
background: linear-gradient(135deg, #111008, #0d0b06);
border: 1px solid rgba(201,168,76,.62);
border-radius: 12px; padding: var(--sp-1) var(--sp-2);
box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 16px rgba(201,168,76,.25);
}
.avatar-stat-num {
font-family: var(--font-display); font-weight: 900; font-size: 16px;
color: var(--gold); line-height: 1;
text-shadow: 0 0 16px rgba(201,168,76,.80);
}
.avatar-stat-lbl {
font-size: 9px; color: var(--text-faint); font-family: var(--font-body);
letter-spacing: .5px; margin-top: 3px; text-transform: uppercase;
}
/* ── Contact page ─────────────────────────────────────────── */
.contact-link {
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-3) var(--sp-3); border-radius: var(--radius);
border: 1px solid var(--border);
background: rgba(255,255,255,.02);
cursor: pointer; transition: .2s;
text-decoration: none; color: inherit;
min-height: 72px;
}
.contact-link:hover { border-color: var(--border-mid); background: rgba(201,168,76,.07); transform: translateX(4px); }
.contact-link:active {
transform: translateX(2px) scale(0.98);
background: rgba(212,175,55,.07);
transition: transform 0.08s ease;
}
.contact-link-icon {
width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(201,168,76,.13); border: 1px solid var(--border-mid);
}
.contact-link-icon svg { width: 22px; height: 22px; stroke: var(--gold); }
.contact-link-body { flex: 1; min-width: 0; }
.contact-link-label {
font-size: 10px; font-weight: 700; color: var(--text-dim);
font-family: var(--font-body);
letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px;
}
.contact-link-value {
font-size: 14px; font-weight: 600; color: var(--text);
font-family: var(--font-body);
}
.contact-link-arrow { stroke: var(--text-dim); width: 16px; height: 16px; }
/* ── Tech bar ─────────────────────────────────────────────── */
.tech-bar {
display: flex; gap: 0;
background: rgba(201,168,76,.07);
border: 1px solid rgba(201,168,76,.20);
border-radius: 14px; overflow: hidden;
position: relative;
}
.tech-bar::before {
content: '';
position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,168,76,.50), transparent);
}
.tech-item {
flex: 1; text-align: center; padding: 13px 4px;
border-right: 1px solid rgba(201,168,76,.13);
font-size: 11px; font-weight: 700; letter-spacing: .3px;
font-family: var(--font-body);
text-transform: none;
}
.tech-item:last-child { border-right: none; }
/* ── Skill card buttons ───────────────────────────────────── */
.skill-btn {
background: rgba(255,255,255,.02);
border: 1px solid rgba(201,168,76,.18);
border-radius: 18px; padding: var(--sp-2) var(--sp-1) 14px;
cursor: pointer; display: flex; flex-direction: column;
align-items: center; gap: var(--sp-1); width: 88px; min-height: 100px;
position: relative; overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,.3);
transform: translateY(0) scale(1);
transition: var(--transition); outline: none; flex-shrink: 0;
}
.skill-btn.active {
background: linear-gradient(145deg, #111008, #0d0b06);
border-color: rgba(201,168,76,.58);
box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 0 24px rgba(201,168,76,.32);
transform: translateY(-6px) scale(1.07);
}
/* ── Press (tap) states — no blue flash, satisfying scale ─── */
.skill-btn:active:not(.active) {
transform: translateY(2px) scale(0.93);
background: rgba(212,175,55,.07);
border-color: rgba(201,168,76,.50);
box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 0 12px rgba(201,168,76,.25);
transition: transform 0.08s ease, background 0.08s ease;
}
.skill-btn.active:active {
transform: translateY(-4px) scale(1.03);
transition: transform 0.08s ease;
}
.skill-btn.active::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.skill-btn-icon {
width: 48px; height: 48px; border-radius: 14px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(201,168,76,.18);
display: flex; align-items: center; justify-content: center;
transition: .3s;
}
.skill-btn.active .skill-btn-icon {
background: linear-gradient(135deg, rgba(201,168,76,.22), rgba(212,175,55,.03));
border-color: rgba(201,168,76,.45);
box-shadow: 0 0 24px rgba(201,168,76,.42), 0 1px 0 rgba(201,168,76,.32) inset;
}
.skill-btn-icon svg { width: 22px; height: 22px; stroke: rgba(201,168,76,.50); transition: .3s; }
.skill-btn.active .skill-btn-icon svg { stroke: var(--gold); filter: drop-shadow(0 0 6px rgba(201,168,76,.72)); }
.skill-btn-label {
font-size: 9px; font-weight: 800; color: rgba(201,168,76,.50);
letter-spacing: 1px; text-transform: uppercase;
font-family: var(--font-display);
}
.skill-btn.active .skill-btn-label { color: var(--gold); }
/* ── Avatar stats outside hero card — overflow visible ────── */
.hero-card-outer {
position: relative;
overflow: visible !important;
}
/* ── Skill button category colors ─────────────────────────── */
.skill-btn[data-skill="ai"].active .skill-btn-icon { background: linear-gradient(135deg,rgba(167,139,250,.2),rgba(167,139,250,.05)); border-color: rgba(167,139,250,.4); box-shadow: 0 0 24px rgba(167,139,250,.3); }
.skill-btn[data-skill="ai"].active .skill-btn-icon svg { stroke: #a78bfa; filter: drop-shadow(0 0 6px rgba(167,139,250,.6)); }
.skill-btn[data-skill="ai"].active .skill-btn-label { color: #a78bfa; }
.skill-btn[data-skill="ai"].active { border-color: rgba(167,139,250,.35); box-shadow: 0 12px 36px rgba(0,0,0,.5),0 0 24px rgba(167,139,250,.2); }
.skill-btn[data-skill="web"].active .skill-btn-icon { background: linear-gradient(135deg,rgba(42,171,238,.2),rgba(42,171,238,.05)); border-color: rgba(42,171,238,.4); box-shadow: 0 0 24px rgba(42,171,238,.3); }
.skill-btn[data-skill="web"].active .skill-btn-icon svg { stroke: #2aabee; filter: drop-shadow(0 0 6px rgba(42,171,238,.6)); }
.skill-btn[data-skill="web"].active .skill-btn-label { color: #2aabee; }
.skill-btn[data-skill="web"].active { border-color: rgba(42,171,238,.35); box-shadow: 0 12px 36px rgba(0,0,0,.5),0 0 24px rgba(42,171,238,.2); }
.skill-btn[data-skill="design"].active .skill-btn-icon { background: linear-gradient(135deg,rgba(244,114,182,.2),rgba(244,114,182,.05)); border-color: rgba(244,114,182,.4); box-shadow: 0 0 24px rgba(244,114,182,.3); }
.skill-btn[data-skill="design"].active .skill-btn-icon svg { stroke: #f472b6; filter: drop-shadow(0 0 6px rgba(244,114,182,.6)); }
.skill-btn[data-skill="design"].active .skill-btn-label { color: #f472b6; }
.skill-btn[data-skill="design"].active { border-color: rgba(244,114,182,.35); box-shadow: 0 12px 36px rgba(0,0,0,.5),0 0 24px rgba(244,114,182,.2); }
.skill-btn[data-skill="automation"].active .skill-btn-icon { background: linear-gradient(135deg,rgba(251,191,36,.2),rgba(251,191,36,.05)); border-color: rgba(251,191,36,.4); box-shadow: 0 0 24px rgba(251,191,36,.3); }
.skill-btn[data-skill="automation"].active .skill-btn-icon svg { stroke: #fbbf24; filter: drop-shadow(0 0 6px rgba(251,191,36,.6)); }
.skill-btn[data-skill="automation"].active .skill-btn-label { color: #fbbf24; }
.skill-btn[data-skill="automation"].active { border-color: rgba(251,191,36,.35); box-shadow: 0 12px 36px rgba(0,0,0,.5),0 0 24px rgba(251,191,36,.2); }
.skill-btn[data-skill="mobile"].active .skill-btn-icon { background: linear-gradient(135deg,rgba(61,210,138,.2),rgba(61,210,138,.05)); border-color: rgba(61,210,138,.4); box-shadow: 0 0 24px rgba(61,210,138,.3); }
.skill-btn[data-skill="mobile"].active .skill-btn-icon svg { stroke: #3DD28A; filter: drop-shadow(0 0 6px rgba(61,210,138,.6)); }
.skill-btn[data-skill="mobile"].active .skill-btn-label { color: #3DD28A; }
.skill-btn[data-skill="mobile"].active { border-color: rgba(61,210,138,.35); box-shadow: 0 12px 36px rgba(0,0,0,.5),0 0 24px rgba(61,210,138,.2); }
/* ── Project image lightbox modal ─────────────────────────── */
#proj-lightbox {
position: fixed; inset: 0; z-index: 500;
background: rgba(0,0,0,.85); backdrop-filter: blur(20px);
display: none; align-items: center; justify-content: center;
padding: 20px;
}
#proj-lightbox.open { display: flex; }
.lightbox-inner {
position: relative; max-width: 680px; width: 100%;
background: #0d0c08; border: 1px solid var(--border-mid);
border-radius: 20px; overflow: hidden;
animation: cardReveal .28s ease;
box-shadow: 0 40px 100px rgba(0,0,0,.8), 0 0 40px rgba(201,168,76,.18);
}
.lightbox-img {
width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
}
.lightbox-body { padding: 20px 22px 22px; }
.lightbox-close {
position: absolute; top: 12px; right: 12px;
width: 36px; height: 36px; border-radius: 50%;
background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.15);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: .2s; color: #fff; font-size: 16px;
z-index: 2;
}
.lightbox-close:hover { background: rgba(201,168,76,.38); border-color: var(--border-mid); }
/* ── Newsletter / subscription strip ─────────────────────── */
.subscribe-strip {
display: flex; flex-direction: column; align-items: center;
gap: 14px; padding: 28px 20px; text-align: center;
background: linear-gradient(145deg,rgba(201,168,76,.10),rgba(212,175,55,.02));
border: 1px solid var(--border);
border-radius: var(--radius); margin-top: 28px;
position: relative; overflow: hidden;
}
.subscribe-strip::before {
content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
background: linear-gradient(90deg,transparent,rgba(201,168,76,.72),transparent);
}
.subscribe-title {
font-family: var(--font-display); font-weight: 800; font-size: 14px;
color: #fff; letter-spacing: .5px;
}
.subscribe-desc {
font-size: 12px; font-family: var(--font-body);
color: var(--text-dim); line-height: 1.7; max-width: 320px;
}
.subscribe-row {
display: flex; gap: 8px; width: 100%; max-width: 380px; flex-wrap: wrap; justify-content: center;
}
.subscribe-input {
flex: 1; min-width: 180px; padding: 11px 16px; border-radius: 30px;
background: rgba(255,255,255,.04); border: 1px solid var(--border-mid);
color: var(--text); font-family: var(--font-body); font-size: 13px;
outline: none; transition: .2s;
}
.subscribe-input:focus { border-color: var(--gold); box-shadow: 0 0 12px rgba(201,168,76,.25); }
.subscribe-btn {
padding: 11px 22px; border-radius: 30px;
background: linear-gradient(135deg,#C9A84C,#A8841A);
border: none; color: #080808; font-family: var(--font-display);
font-weight: 800; font-size: 12px; cursor: pointer; transition: .2s;
white-space: nowrap;
}
.subscribe-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,168,76,.62); }
.subscribe-success {
display: none; color: #3DD28A; font-family: var(--font-body);
font-size: 12px; font-weight: 600;
}
.featured-service {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-3);
}
.featured-service-icon {
width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.stars { display: flex; gap: 3px; }
.star { width: 11px; height: 11px; }
/* ── Shared page header (services / about / contact / projects) ──
FIX: identical inline style="" block was duplicated across every
inner page. Centralized here so a single edit updates them all. */
.page-header { text-align: center; margin-bottom: 32px; }
.page-header .badge { margin-bottom: 14px; display: inline-flex; }
.page-header-title {
font-family: 'Cinzel', serif; font-weight: 900;
font-size: clamp(22px, 5vw, 36px); color: #fff; margin: 0 0 12px;
}
.page-header-title-accent { color: rgba(255,255,255,.8); }
.page-header-desc {
font-size: 12px; color: rgba(255,255,255,.35);
max-width: 400px; margin: 0 auto; line-height: 1.7;
}
.page-header-desc--wide { max-width: 420px; } /* about.html bio is slightly longer */
/* ── Shared section title row (about.html stacked cards, etc.) ── */
.section-title-row {
font-size: 13px; font-weight: 700; color: #fff;
margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.section-title-row--flush { margin-bottom: 0; } /* used beside inline controls */
.section-title-bar {
width: 3px; height: 16px; border-radius: 2px; display: block; flex-shrink: 0;
background: linear-gradient(var(--gold), rgba(201,168,76,.3));
}
/* ── Small shared utilities ───────────────────────────────────── */
.link-plain { text-decoration: none; }
.is-clickable { cursor: pointer; }
@media (max-width: 480px) {
.stats-row { grid-template-columns: repeat(2, 1fr); }
#projectsGrid { grid-template-columns: 1fr; }
/* Hero stays side-by-side (text left, avatar right) at all widths —
matches the reference design. Only the button width below is
adjusted so CTAs don't overflow on very narrow phones. */
.hero-inner .btn-primary,
.hero-inner .btn-secondary {
justify-content: center;
}
}
/* FIX: this @media block was nested inside the 480px block above with
no closing brace of its own — every rule after it (639/380/360px)
was silently swallowed into the 480px condition, so it only ever
applied below 380/360px instead of its intended 639px threshold.
Pulled out to the top level and closed properly. */
/* Services grid: 3-up on desktop (auto-fill), clean 2-up everywhere
below the sidebar breakpoint — matches .sidebar/.bottom-nav switch
at 639px so there's no dead zone where neither rule fits. */
@media (max-width: 639px) {
.services-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.services-grid .service-card {
padding: var(--sp-2) var(--sp-1) !important;
}
.services-grid .service-icon {
width: 44px; height: 44px; border-radius: 13px;
}
.services-grid .service-icon svg { width: 20px; height: 20px; }
.services-grid .service-name { font-size: 10px; }
.services-grid .service-desc { font-size: 11px; line-height: 1.6; }
}
@media (max-width: 380px) {
.services-grid { gap: 8px !important; }
}
@media (max-width: 360px) {
.hero-inner h1 { font-size: 28px !important; }
.stat-num { font-size: 16px; }
}
/* NEW: tablet range — was previously undefined; the site jumped
straight from the fixed 640px sidebar layout to full desktop
width with no adjustment for tablets (768–1024px). Slightly
narrows the content column so it doesn't stretch too wide. */
@media (min-width: 640px) and (max-width: 1024px) {
.page-inner { max-width: 680px; }
.services-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Large desktop (1200px+) ──────────────────────────────────
FIX: there was no breakpoint above 1024px at all. Above that,
.page-inner stayed capped at 820px forever, so a 1200–1920px
monitor just showed a narrow centered column with huge empty
gutters on both sides, and the sidebar stayed the same tiny
80px icon rail as on a tablet. This widens the content column,
turns the sidebar into a proper labeled nav (icon + text side
by side instead of stacked), and gives cards/grids more room
to breathe / more columns where the layout is auto-fill based.
Only widths/spacing/layout are touched — colors, fonts, radii,
shadows, animations, and every rule below 1024px are untouched. */
@media (min-width: 1200px) {
:root { --sidebar-w: 232px; }
/* Sidebar: stacked icon-only rail -> horizontal icon+label rows,
like a real desktop nav instead of a mobile-style dock. */
.sidebar {
align-items: stretch;
padding: var(--sp-3) var(--sp-2);
gap: 6px;
}
.nav-item {
width: 100%;
flex-direction: row;
justify-content: flex-start;
gap: 12px;
padding: 10px 14px;
}
.nav-item.active::before { display: none; } /* left accent bar reads oddly on a full-width row */
.nav-label {
font-size: 11px;
letter-spacing: .4px;
text-align: left;
}
/* Content column: was capped at 820px on every screen >=1024px.
Let it use the extra space instead of leaving it empty. */
.page-content { padding: var(--sp-5) var(--sp-5); }
.page-inner { max-width: 1080px; }
/* Grids: more/bigger cards instead of the same tablet sizing
stretched across a wider row. */
.stats-row { gap: var(--sp-2); }
#projectsGrid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
}
@media (min-width: 1440px) {
.page-inner { max-width: 1240px; }
#projectsGrid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}