/* ========================================================================== MOBILE SHOWROOM MODE — 2D fallback styling Luxury black marble + champagne gold. No 3D, no heavy filters. Active only when (see js/mobile.js). ========================================================================== */ html.is-mobile, html.is-mobile body{ height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; background-color:#070605; -webkit-text-size-adjust:100%; } html.is-mobile.sheet-open, html.is-mobile.sheet-open body{ overflow:hidden; } .m-root{ position:relative; z-index:1; max-width:560px; margin:0 auto; padding:0 20px 0; color:var(--ink); font-family:var(--font-body); } /* soft ambient gold wash behind the hero (cheap, fixed) */ .m-aura{ position:fixed; top:-10%; left:50%; transform:translateX(-50%); width:120vw; height:60vh; z-index:0; pointer-events:none; background:radial-gradient(60% 60% at 50% 0%, rgba(244,220,160,.12), transparent 70%); } /* ============ HERO ============ */ .m-hero{ position:relative; z-index:1; text-align:center; padding:46px 0 30px; } .m-mode{ display:inline-block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-hi); padding:7px 15px; border:1px solid var(--gold-line); border-radius:30px; background:rgba(244,220,160,.05); margin-bottom:30px; } .m-mode::first-letter{ color:#7ee0a0; } .m-portrait{ position:relative; width:190px; height:240px; margin:0 auto 6px; } .m-portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 14%; border-radius:50% 50% 44% 44% / 32% 32% 8% 8%; -webkit-mask:linear-gradient(180deg, #000 70%, rgba(0,0,0,.3) 90%, transparent); mask:linear-gradient(180deg, #000 70%, rgba(0,0,0,.3) 90%, transparent); filter:contrast(1.04) brightness(1.04) saturate(1.12) drop-shadow(0 0 30px rgba(120,200,255,.45)); } .m-portrait-glow{ position:absolute; left:50%; top:30%; width:130%; height:80%; transform:translate(-50%,-50%); background:radial-gradient(50% 50% at 50% 50%, rgba(120,200,255,.3), transparent 70%); filter:blur(18px); z-index:-1; } .m-seal{ width:48px; height:48px; margin:0 auto 14px; border-radius:50%; border:1.5px solid var(--gold-line); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--gold-hi); box-shadow:0 0 22px rgba(244,220,160,.18), inset 0 0 12px rgba(244,220,160,.12); } .m-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(36px,12vw,54px); line-height:.98; letter-spacing:.06em; } .m-roles{ margin-top:16px; display:flex; flex-direction:column; gap:5px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); } /* action buttons */ .m-actions{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .m-actions.center{ justify-content:center; } .m-btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; padding:15px 26px; border-radius:44px; min-height:48px; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#120d08; border:1px solid var(--gold-hi); background:linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 22px rgba(244,220,160,.4); } .m-btn:active{ transform:translateY(1px); } .m-btn svg{ width:16px; height:16px; } .m-act{ display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:13px 18px; border-radius:44px; text-decoration:none; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--ink); border:1px solid var(--gold-line); background:rgba(10,8,6,.5); } .m-act:active{ background:rgba(244,220,160,.1); } /* ============ SECTION NAV (sticky) ============ */ .m-nav{ position:sticky; top:0; z-index:20; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:8px -20px 0; padding:12px 14px; background:rgba(7,6,5,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid rgba(216,178,117,.14); } .m-nav a{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:30px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); } .m-nav a:active{ color:var(--gold-hi); } .m-nav .d{ width:7px; height:7px; border-radius:50%; background:oklch(0.8 0.14 var(--rh,84)); box-shadow:0 0 8px oklch(0.8 0.16 var(--rh,84)); } /* ============ SECTIONS ============ */ .m-sec{ position:relative; z-index:1; padding:46px 0 12px; scroll-margin-top:62px; } .m-sec-head{ display:flex; align-items:center; gap:14px; margin-bottom:26px; } .m-glyph{ flex-shrink:0; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:24px; color:oklch(0.88 0.12 var(--rh)); border:1px solid oklch(0.7 0.12 var(--rh)/.4); background:oklch(0.5 0.14 var(--rh)/.12); box-shadow:0 0 22px oklch(0.7 0.16 var(--rh)/.25); } .m-eyebrow{ font-family:var(--font-mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:oklch(0.82 0.12 var(--rh)); } .m-title{ font-family:var(--font-display); font-weight:700; font-size:32px; letter-spacing:.03em; line-height:1; margin-top:5px; } /* card base */ .m-card{ border:1px solid rgba(216,178,117,.16); border-radius:14px; background:linear-gradient(180deg, rgba(20,15,11,.7), rgba(8,6,4,.85)); } /* ---- timeline ---- */ .m-timeline{ position:relative; padding-left:24px; } .m-timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:linear-gradient(180deg, transparent, oklch(0.7 0.12 var(--rh)/.5), transparent); } .m-tl{ position:relative; margin-bottom:22px; padding:18px 18px 20px; border:1px solid rgba(216,178,117,.16); border-radius:14px; background:linear-gradient(180deg, rgba(20,15,11,.6), rgba(8,6,4,.8)); } .m-tl-dot{ position:absolute; left:-22px; top:22px; width:11px; height:11px; border-radius:50%; background:#070605; border:2px solid oklch(0.82 0.14 var(--rh)); box-shadow:0 0 12px oklch(0.7 0.16 var(--rh)/.6); } .m-tl.now .m-tl-dot{ background:oklch(0.82 0.14 var(--rh)); } .m-tl-period{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:oklch(0.82 0.12 var(--rh)); } .m-tl-role{ font-family:var(--font-display); font-size:18px; letter-spacing:.01em; margin:6px 0 2px; line-height:1.2; } .m-tl-org{ font-size:12.5px; color:var(--ink-soft); margin-bottom:10px; } .m-tl-desc{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); } .m-tl-bullets{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; } .m-tl-bullets li{ font-size:12.5px; color:var(--ink-soft); position:relative; padding-left:14px; } .m-tl-bullets li::before{ content:"›"; position:absolute; left:0; color:oklch(0.82 0.14 var(--rh)); } .m-tl-clients{ margin-top:10px; font-size:12px; color:oklch(0.85 0.1 var(--rh)); } /* chips */ .m-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .m-chip{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; padding:5px 10px; border-radius:30px; border:1px solid rgba(216,178,117,.22); color:var(--ink-soft); } .m-chip.accent{ border-color:oklch(0.7 0.14 var(--rh)/.5); color:oklch(0.88 0.1 var(--rh)); background:oklch(0.5 0.16 var(--rh)/.08); } /* ---- projects ---- */ .m-projgrid{ display:flex; flex-direction:column; gap:16px; } .m-proj{ display:block; width:100%; text-align:left; cursor:pointer; color:var(--ink); border:1px solid rgba(216,178,117,.16); border-radius:16px; overflow:hidden; background:linear-gradient(180deg, rgba(20,15,11,.7), rgba(8,6,4,.85)); } .m-proj:active{ border-color:oklch(0.7 0.14 var(--rh)/.5); } .m-proj-shot{ position:relative; height:180px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(80% 70% at 50% 25%, oklch(0.45 0.16 var(--rh)/.4), transparent 60%), linear-gradient(180deg, oklch(0.3 0.12 var(--rh)/.4), #0a0807); } .m-proj-shot.has{ background:#0a0807; } .m-proj-shot img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; } .m-proj-mark{ font-family:var(--font-display); font-size:64px; color:oklch(0.88 0.1 var(--rh)); opacity:.5; } .m-proj.flagship .m-proj-shot{ height:210px; } .m-proj-body{ padding:18px; } .m-proj-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .m-proj-name{ font-family:var(--font-display); font-size:21px; letter-spacing:.02em; } .m-proj-kind{ font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:oklch(0.82 0.12 var(--rh)); text-align:right; flex-shrink:0; } .m-proj-desc{ font-size:13px; line-height:1.55; color:var(--ink-soft); margin:10px 0 0; } .m-proj-open{ display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:oklch(0.85 0.12 var(--rh)); } /* ---- arsenal ---- */ .m-arsenal{ display:flex; flex-direction:column; gap:14px; } .m-ars{ padding:18px; border:1px solid rgba(216,178,117,.16); border-radius:14px; background:linear-gradient(180deg, rgba(20,15,11,.6), rgba(8,6,4,.8)); } .m-ars-title{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:oklch(0.85 0.12 var(--rh)); margin-bottom:12px; } /* ---- impact ---- */ .m-impactgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .m-stat{ padding:20px 16px; border:1px solid rgba(216,178,117,.16); border-radius:14px; background:linear-gradient(180deg, rgba(20,15,11,.6), rgba(8,6,4,.8)); } .m-stat-metric{ font-family:var(--font-display); font-size:24px; color:oklch(0.9 0.1 var(--rh)); text-shadow:0 0 24px oklch(0.7 0.16 var(--rh)/.4); } .m-stat-label{ margin-top:8px; font-size:12px; line-height:1.5; color:var(--ink-soft); } .m-impactnote{ margin-top:22px; font-family:var(--font-display); font-size:19px; line-height:1.45; color:var(--ink); } /* ---- vision ---- */ .m-vintro{ font-family:var(--font-display); font-size:22px; line-height:1.4; } .m-vintro em{ font-style:normal; color:oklch(0.88 0.1 var(--rh)); } .m-block{ margin-top:24px; } .m-blabel{ font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; } .m-focusgrid{ display:flex; flex-direction:column; gap:10px; } .m-focus{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid rgba(216,178,117,.16); border-radius:12px; font-size:14px; background:rgba(255,255,255,.015); } .m-focus .fn{ font-family:var(--font-mono); font-size:11px; color:oklch(0.82 0.12 var(--rh)); } .m-finale{ margin-top:28px; padding:34px 24px; border:1px solid oklch(0.7 0.14 var(--rh)/.4); border-radius:16px; text-align:center; background:radial-gradient(90% 120% at 50% 0%, oklch(0.5 0.16 var(--rh)/.18), rgba(8,6,4,.8)); } .m-quote{ font-family:var(--font-display); font-size:21px; line-height:1.4; quotes:none; } .m-sign{ display:block; margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:oklch(0.85 0.12 var(--rh)); } /* ---- contact ---- */ .m-contact{ position:relative; z-index:1; text-align:center; padding:50px 0 56px; margin-top:30px; border-top:1px solid rgba(216,178,117,.14); } .m-cta-line{ font-family:var(--font-display); font-size:24px; line-height:1.3; } .m-cta-sub{ margin-top:8px; font-size:14px; color:var(--ink-soft); } .m-loc{ margin-top:20px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--ink-soft); } .m-foot{ margin-top:30px; font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); } .m-link{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:11px 16px; border-radius:30px; border:1px solid oklch(0.7 0.14 var(--rh)/.5); font-family:var(--font-mono); font-size:11px; color:oklch(0.88 0.1 var(--rh)); background:oklch(0.5 0.16 var(--rh)/.1); } /* ============ PROJECT SHEET (slide-up) ============ */ .m-sheet-wrap{ position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center; background:rgba(4,3,3,.7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:msfade .3s ease both; } @keyframes msfade{ from{ opacity:0; } to{ opacity:1; } } .m-sheet{ position:relative; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch; background:linear-gradient(180deg, #16100b, #090705); border:1px solid oklch(0.7 0.14 var(--rh,232)/.4); border-radius:20px 20px 0 0; animation:msrise .34s cubic-bezier(.4,0,.2,1) both; } @keyframes msrise{ from{ transform:translateY(40px); opacity:.5; } to{ transform:translateY(0); opacity:1; } } .m-sheet-close{ position:absolute; top:12px; right:12px; z-index:3; width:42px; height:42px; border-radius:50%; border:1px solid var(--gold-line); color:var(--ink); display:grid; place-items:center; background:rgba(10,8,6,.6); } .m-sheet-shot{ height:200px; display:grid; place-items:center; overflow:hidden; border-radius:20px 20px 0 0; background:radial-gradient(80% 70% at 50% 25%, oklch(0.45 0.16 var(--rh,232)/.4), transparent 60%), linear-gradient(180deg, oklch(0.3 0.12 var(--rh,232)/.4), #0a0807); } .m-sheet-shot.has{ background:#0a0807; } .m-sheet-shot img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; } .m-sheet-mark{ font-family:var(--font-display); font-size:72px; color:oklch(0.88 0.1 var(--rh,232)); opacity:.5; } .m-sheet-body{ padding:24px 22px 36px; } .m-kicker{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:oklch(0.82 0.12 var(--rh,232)); } .m-sheet-name{ font-family:var(--font-display); font-size:28px; letter-spacing:.02em; margin:10px 0 12px; } .m-sheet-desc{ font-size:14px; line-height:1.65; color:var(--ink-soft); } .m-featlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .m-featlist li{ position:relative; padding-left:18px; font-size:13.5px; color:var(--ink); } .m-featlist li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:oklch(0.82 0.14 var(--rh,232)); box-shadow:0 0 8px oklch(0.7 0.16 var(--rh,232)); } @media (min-width:480px){ .m-impactgrid{ grid-template-columns:1fr 1fr 1fr; } }