/* ========================================================================== AHMAD FAIZ ASSIFUDDIN (MADDAZXD) — PORTFOLIO Quiet executive palette. Playfair Display (display) + Inter (body/UI), loaded async from Google Fonts so a slow connection can't block render. ========================================================================== */ /* No external fonts are loaded at all — system font stacks only (see --f-display / --f-body below). This removes any network dependency that could stall page loads or navigation on a poor/unstable connection. */ :root{ /* ---- palette -------------------------------------------------------- */ --bg: #F5F3EE; --bg-raised: #FFFFFF; --ink: #33312D; /* soft charcoal */ --ink-soft: #75726A; /* warm taupe grey */ --line: #E4E0D6; --gold: #8B7A63; /* muted clay / bronze */ --gold-soft: #A79879; --navy: #3E4046; /* soft graphite slate */ --navy-soft: #63666D; --navy-fixed: #3E4046; /* always-dark panel accent — does NOT invert in dark mode (used for preloader, toast, contact hero, portrait bg) */ --bg-rgb: 245,243,238; --ink-rgb: 51,49,45; --gold-rgb: 139,122,99; --navy-rgb: 62,64,70; /* ---- type ------------------------------------------------------------ */ /* Loaded async from Google Fonts (non-blocking preload — see of each page), so a slow/broken connection never stalls page rendering or navigation. Falls back to local system fonts until they arrive. */ --f-display: 'Playfair Display', Georgia, 'Noto Serif', serif; --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ---- rhythm ------------------------------------------------------------ */ --edge: clamp(24px, 6vw, 96px); --radius: 2px; --ease: cubic-bezier(.16,.84,.24,1); --ease-soft: cubic-bezier(.22,.61,.36,1); color-scheme: light; } html.dark{ --bg: #14151A; --bg-raised: #1B1C22; --ink: #EDEAE2; --ink-soft: #A3A099; --line: #2B2C33; --gold: #B7A483; --gold-soft: #CBBCA0; --navy: #C9CDD6; --navy-soft: #9A9EA8; --bg-rgb: 20,21,26; --ink-rgb: 237,234,226; color-scheme: dark; } /* ---- reset ---------------------------------------------------------------- */ *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: auto; } body{ margin:0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-weight: 400; line-height: 1.6; overflow-x: hidden; transition: background .6s var(--ease), color .6s var(--ease); -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } ul,ol{ margin:0; padding:0; list-style:none; } button{ font-family: inherit; background:none; border:none; color:inherit; cursor:pointer; } input,textarea{ font-family: inherit; } h1,h2,h3,h4,p{ margin:0; } svg{ display:block; } ::selection{ background: var(--gold); color: var(--bg-raised); } :focus-visible{ outline: 2px solid var(--gold); outline-offset: 4px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- fluid type scale ------------------------------------------------------ */ .t-hero{ font-family: var(--f-display); font-weight: 600; font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: 1.04; letter-spacing: -0.01em; } .t-h1{ font-family: var(--f-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.08; letter-spacing: -0.01em; } .t-h2{ font-family: var(--f-display); font-weight: 600; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; } .t-h3{ font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; } .t-lead{ font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--ink-soft); font-weight: 300; line-height: 1.65; } .t-eyebrow{ font-family: var(--f-body); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .t-body{ font-size: 1rem; color: var(--ink-soft); } .t-mono{ font-family: var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: .04em; } /* ---- layout ---------------------------------------------------------------- */ .wrap{ max-width: 1360px; margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); } .section{ position: relative; padding-top: clamp(72px, 10vw, 160px); padding-bottom: clamp(72px, 10vw, 160px); } .section-tight{ position: relative; z-index: 1; background: var(--bg); padding-top: clamp(40px,6vw,80px); padding-bottom: clamp(40px,6vw,80px); } .divider{ height:1px; width:100%; background: var(--line); border:none; margin: 0; } .grain{ position:fixed; inset:0; pointer-events:none; z-index: 2; opacity:.035; mix-blend-mode: multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html.dark .grain{ opacity:.05; mix-blend-mode: overlay; } /* ========================================================================== BACKGROUND CANVAS (slow fluid gradient) ========================================================================== */ #bg-canvas{ position: fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.55; pointer-events:none; } html.dark #bg-canvas{ opacity:.75; } /* ========================================================================== CURSOR ========================================================================== */ .cursor-dot, .cursor-ring{ position: fixed; top:0; left:0; pointer-events:none; z-index: 9999; border-radius:50%; transform: translate(-50%,-50%); will-change: transform, width, height, opacity; } .cursor-dot{ width:6px; height:6px; background: var(--gold); } .cursor-ring{ width:36px; height:36px; border:1px solid rgba(var(--ink-rgb),.55); transition: width .28s var(--ease-soft), height .28s var(--ease-soft), border-color .28s var(--ease-soft), background .28s var(--ease-soft), opacity .28s; mix-blend-mode: difference; } .cursor-ring.is-text{ width:84px; height:84px; background: var(--gold); border-color: transparent; } .cursor-ring.is-link{ width:64px; height:64px; background: rgba(var(--ink-rgb), 1); border-color: transparent; } @media (hover:none), (pointer:coarse){ .cursor-dot, .cursor-ring{ display:none; } } /* ========================================================================== INITIAL PRELOADER — shown once, only on the entry page (index.html), while the site's fonts/canvas/assets settle in. Regular internal navigation is instant and never shows this. ========================================================================== */ .preloader{ position: fixed; inset:0; z-index: 10000; background: var(--navy-fixed); display:flex; align-items:center; justify-content:center; transition: opacity .7s var(--ease), visibility .7s var(--ease); } .preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; } .preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:8px; } .preloader-logo{ font-family: var(--f-display); font-weight:600; font-size: clamp(1.3rem,2.6vw,1.8rem); color:#F2EFE7; letter-spacing:.005em; } .preloader-tag{ font-family: var(--f-body); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color: var(--gold-soft); margin-bottom:14px; } .preloader-bar{ width: clamp(160px,22vw,220px); height:1px; background: rgba(242,239,231,.16); overflow:hidden; } .preloader-bar span{ display:block; height:100%; width:0%; background: var(--gold-soft); transition: width .15s linear; } .preloader-pct{ font-family: var(--f-body); font-size:.72rem; letter-spacing:.14em; color:#9B988E; } /* ========================================================================== NAVIGATION ========================================================================== */ .site-nav{ position: fixed; top:0; left:0; right:0; z-index: 500; display:flex; align-items:center; justify-content:space-between; padding: 22px var(--edge); transition: background .5s var(--ease), border-color .5s var(--ease), padding .4s var(--ease); border-bottom: 1px solid transparent; } .site-nav.is-scrolled, .site-nav.force-glass{ background: rgba(var(--bg-rgb), .82); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); padding-top: 14px; padding-bottom: 14px; } .nav-brand{ font-family: var(--f-display); font-weight:600; font-size: 1.12rem; letter-spacing: .003em; display:inline-flex; align-items:baseline; gap:9px; flex-wrap:wrap; } .nav-brand-sub{ font-family: var(--f-body); font-weight:600; font-size:.6rem; letter-spacing:.16em; text-transform: uppercase; color: var(--ink-soft); white-space:nowrap; } .nav-links{ display:flex; gap: clamp(18px,3vw,42px); align-items:center; } .nav-links a{ position: relative; font-size:.86rem; font-weight:500; letter-spacing:.03em; padding: 4px 0; color: var(--ink-soft); } .nav-links a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--gold); transition: width .35s var(--ease); } .nav-links a:hover, .nav-links a.is-active{ color: var(--ink); } .nav-links a:hover::after, .nav-links a.is-active::after{ width:100%; } .nav-tools{ display:flex; align-items:center; gap:14px; } .icon-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition: border-color .3s, background .3s, transform .3s var(--ease); } .icon-btn:hover{ border-color: var(--gold); transform: translateY(-2px); } .icon-btn svg{ width:16px; height:16px; stroke: var(--ink); fill:none; } .lang-btn{ font-size:.72rem; font-weight:700; letter-spacing:.05em; } .nav-burger{ display:none; } .mobile-nav{ position: fixed; inset:0; z-index:400; background: rgba(12, 22, 41, .62); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; transform: translateY(-100%); opacity:0; transition: transform .55s var(--ease), opacity .5s var(--ease); } .mobile-nav.is-open{ transform: translateY(0); opacity:1; } .mobile-nav a{ font-family: var(--f-display); font-size:2rem; color:#F2EFE7; opacity:0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .mobile-nav.is-open a{ opacity:1; transform: translateY(0); } .mobile-nav.is-open a:nth-child(1){ transition-delay: .08s; } .mobile-nav.is-open a:nth-child(2){ transition-delay: .14s; } .mobile-nav.is-open a:nth-child(3){ transition-delay: .20s; } .mobile-nav.is-open a:nth-child(4){ transition-delay: .26s; } .mobile-nav.is-open a:nth-child(5){ transition-delay: .32s; } .mobile-nav.is-open a:nth-child(6){ transition-delay: .38s; } .mobile-nav a:hover{ color: var(--gold-soft); } /* Keep the top bar (brand + icon buttons) legible over the dark, blurred full-screen menu: switch it to light-on-glass while the menu is open. */ .site-nav.menu-open{ background: rgba(12, 22, 41, .5); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom-color: transparent; } .site-nav.menu-open .nav-brand{ color:#F2EFE7; } .site-nav.menu-open .nav-brand-sub{ color: rgba(242,239,231,.62); } .site-nav.menu-open .icon-btn{ border-color: rgba(247,245,238,.35); } .site-nav.menu-open .icon-btn:hover{ border-color: var(--gold-soft); } .site-nav.menu-open .icon-btn svg{ stroke:#F7F5EE; } .site-nav.menu-open .lang-btn{ color:#F2EFE7; } .site-nav.menu-open .nav-burger{ position:relative; } .site-nav.menu-open .nav-burger svg{ display:none; } .site-nav.menu-open .nav-burger::before, .site-nav.menu-open .nav-burger::after{ content:''; position:absolute; left:10px; width:16px; height:1.4px; background:#F2EFE7; transition: transform .3s var(--ease); } .site-nav.menu-open .nav-burger::before{ transform: rotate(45deg); } .site-nav.menu-open .nav-burger::after{ transform: rotate(-45deg); } @media (max-width: 860px){ .nav-links{ display:none; } .nav-burger{ display:flex; } } /* ========================================================================== BUTTONS ========================================================================== */ .btn{ display:inline-flex; align-items:center; gap:10px; font-size:.86rem; font-weight:600; letter-spacing:.04em; padding: 15px 30px; border-radius: 999px; border:1px solid var(--ink); position: relative; overflow:hidden; z-index:1; } .btn-primary{ background: var(--ink); color: var(--bg); } .btn-primary::before{ content:''; position:absolute; inset:0; background: var(--gold); z-index:-1; transform: translateX(-101%); transition: transform .45s var(--ease); } .btn-primary:hover::before{ transform: translateX(0); } .btn-primary:hover{ border-color: var(--gold); color: var(--navy); } .btn-ghost{ border-color: var(--line); color: var(--ink); } .btn-ghost:hover{ border-color: var(--gold); color: var(--gold); } .btn svg{ width:14px; height:14px; transition: transform .35s var(--ease); } .btn:hover svg{ transform: translate(3px,-3px); } /* ========================================================================== REVEAL / MASK ANIMATIONS ========================================================================== */ .reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.is-visible{ opacity:1; transform: translateY(0); } .mask{ overflow:hidden; display:block; } .mask > *{ display:block; transform: translateY(110%); transition: transform .95s var(--ease); } .mask.is-visible > *{ transform: translateY(0); } .stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); } /* ========================================================================== HERO (index) ========================================================================== */ .hero{ min-height: 100svh; display:flex; flex-direction:column; justify-content:center; position:relative; padding-top: 110px; padding-bottom: 80px; } .hero-centered{ align-items:center; text-align:center; } .hero-centered .hero-eyebrow{ justify-content:center; } .hero-centered .hero-type{ margin-left:auto; margin-right:auto; } .hero-centered .hero-meta{ justify-content:center; } .hero-eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom: 26px; } .hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--gold); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.3);} } .hero-name{ position:relative; } .hero-name .t-hero{ display:block; } .hero-name .t-hero i{ font-style: italic; color: var(--gold); } .hero-alias{ margin-top: 22px; font-size:.95rem; letter-spacing:.02em; color: var(--ink-soft); } .hero-alias strong{ font-family: var(--f-display); font-style: italic; font-weight:600; color: var(--gold); margin-left:7px; } .hero-type{ margin-top: 30px; font-family: var(--f-body); font-weight:300; font-size: clamp(1.05rem, 2vw, 1.5rem); color: var(--ink-soft); max-width: 640px; min-height: 1.6em; } .hero-type .cursor-bar{ display:inline-block; width:2px; height:1em; background: var(--gold); margin-left:2px; vertical-align:-2px; animation: blink 1s steps(1) infinite; } @keyframes blink{ 50%{ opacity:0; } } .hero-meta{ margin-top: 64px; display:flex; gap: clamp(30px,5vw,80px); flex-wrap:wrap; } .hero-meta div span{ display:block; } .hero-meta .n{ font-family: var(--f-display); font-size: 1.6rem; color: var(--gold); } .hero-meta .l{ font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color: var(--ink-soft); margin-top:4px; } .hero-actions{ margin-top:56px; display:flex; gap:18px; flex-wrap:wrap; justify-content:center; } /* ========================================================================== MARQUEE ========================================================================== */ .marquee{ position: relative; z-index: 1; background: var(--bg); overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 22px 0; } .marquee-track{ display:flex; gap: 3rem; white-space:nowrap; width:max-content; animation: marquee 34s linear infinite; } .marquee:hover .marquee-track{ animation-play-state: paused; } .marquee-track span{ font-family: var(--f-display); font-style:italic; font-size: clamp(1.2rem,3vw,2.1rem); color: var(--ink-soft); display:flex; align-items:center; gap: 3rem; } .marquee-track span em{ font-style:normal; color: var(--gold); margin-right:3rem; } @keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} } /* ========================================================================== CARDS / TILT ========================================================================== */ .tilt{ transform-style: preserve-3d; transition: transform .25s var(--ease-soft); will-change: transform; } .tilt-inner{ transform: translateZ(28px); } .card{ background: var(--bg-raised); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(24px,3vw,40px); position:relative; overflow:hidden; } .bento-item[data-project]:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; } .project-modal{ position: fixed; inset:0; z-index: 7200; background: rgba(12,15,20,.6); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); display:flex; align-items:center; justify-content:center; padding: 24px; opacity:0; pointer-events:none; transition: opacity .35s var(--ease); } .project-modal.is-open{ opacity:1; pointer-events:auto; } .project-modal-card{ position: relative; width: min(640px, 100%); max-height: min(80vh, 720px); background: var(--bg-raised); border:1px solid var(--line); border-radius: var(--radius); transform: translateY(18px) scale(.98); transition: transform .4s var(--ease); display:flex; flex-direction:column; overflow:hidden; } .project-modal.is-open .project-modal-card{ transform: translateY(0) scale(1); } .project-modal-close{ position:absolute; top:18px; right:18px; z-index:2; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background: var(--bg-raised); font-size:.95rem; color: var(--ink-soft); transition: border-color .3s, color .3s, transform .3s var(--ease); } .project-modal-close:hover{ border-color: var(--gold); color: var(--gold); transform: rotate(90deg); } .project-modal-body{ padding: clamp(30px,5vw,52px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; } .project-modal-body::-webkit-scrollbar{ width:6px; } .project-modal-body::-webkit-scrollbar-thumb{ background: var(--gold-soft); border-radius:99px; } .project-modal-body .b-tag{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); } .project-modal-body h3{ font-family: var(--f-display); font-size: clamp(1.4rem,3vw,1.9rem); margin-top:12px; } .project-modal-body p{ margin-top:18px; color: var(--ink-soft); line-height:1.75; } .project-modal-body .proj-tags{ margin-top:24px; } /* ========================================================================== FOOTER ========================================================================== */ .site-footer{ position: relative; z-index: 1; background: var(--bg); padding: 60px var(--edge) 40px; border-top:1px solid var(--line); } .footer-row{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; } .footer-links{ display:flex; gap: 28px; flex-wrap:wrap; } .footer-links a{ font-size:.85rem; color: var(--ink-soft); } .footer-links a:hover{ color: var(--gold); } .footer-fine{ margin-top: 34px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.75rem; color: var(--ink-soft); } /* ========================================================================== TOAST ========================================================================== */ .toast-stack{ position: fixed; top: 20px; left:50%; transform: translateX(-50%); z-index: 8000; display:flex; flex-direction:column; gap:10px; align-items:center; } .toast{ background: var(--navy-fixed); color:#F3F1EA; padding: 14px 24px; border-radius: 999px; font-size:.85rem; font-weight:500; display:flex; align-items:center; gap:10px; box-shadow: 0 12px 34px rgba(0,0,0,.22); opacity:0; transform: translateY(-16px) scale(.94); animation: toastIn .5s var(--ease) forwards; } .toast.out{ animation: toastOut .4s var(--ease) forwards; } .toast .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold-soft); } @keyframes toastIn{ to{ opacity:1; transform: translateY(0) scale(1);} } @keyframes toastOut{ to{ opacity:0; transform: translateY(-10px) scale(.96);} } /* ========================================================================== FORMS ========================================================================== */ .field{ position:relative; margin-bottom: 30px; } .field input, .field textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); padding: 12px 2px; font-size:1rem; color: var(--ink); resize:vertical; } .field input:focus, .field textarea:focus{ outline:none; } .field label{ position:absolute; left:2px; top:12px; color: var(--ink-soft); font-size:1rem; pointer-events:none; transition: transform .3s var(--ease), font-size .3s var(--ease), color .3s var(--ease); transform-origin: left top; } .field .bar{ position:absolute; left:0; bottom:0; height:1px; width:0; background: var(--gold); transition: width .4s var(--ease); } .field.is-active .bar, .field.has-value .bar{ width:100%; } .field.is-active label, .field.has-value label{ transform: translateY(-22px) scale(.78); color: var(--gold); } .field .err{ font-size:.75rem; color:#A8503F; margin-top:6px; min-height: 1em; } /* ========================================================================== TIMELINE (about.html) ========================================================================== */ .timeline{ position:relative; margin-top: 60px; padding-left: 40px; } .timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background: var(--line); } .timeline .tl-progress{ position:absolute; left:6px; top:6px; width:1px; height:0; background: var(--gold); transition: height .3s linear; } .tl-item{ position:relative; padding-bottom: 56px; } .tl-item:last-child{ padding-bottom:0; } .tl-dot{ position:absolute; left:-40px; top:4px; width:13px; height:13px; border-radius:50%; background: var(--bg); border:1px solid var(--ink-soft); transition: border-color .4s, background .4s; } .tl-item.is-visible .tl-dot{ border-color: var(--gold); background: var(--gold); } .tl-year{ font-family: var(--f-body); font-size:.78rem; letter-spacing:.1em; color: var(--gold); font-weight:700; } .tl-title{ font-family: var(--f-display); font-size: clamp(1.15rem,2vw,1.5rem); margin-top:6px; } .tl-desc{ margin-top:8px; max-width: 620px; color: var(--ink-soft); font-size:.95rem; } /* ========================================================================== BENTO (portfolio.html) ========================================================================== */ .bento{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 56px; } .bento-item{ grid-column: span 3; min-height: 340px; } .bento-item.wide{ grid-column: span 4; } .bento-item.narrow{ grid-column: span 2; } .bento-item.tall{ min-height: 460px; } @media (max-width: 900px){ .bento-item, .bento-item.wide, .bento-item.narrow{ grid-column: span 6; min-height: 300px; } } .bento-item{ position:relative; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background: linear-gradient(155deg, var(--bg-raised), var(--bg)); display:flex; flex-direction:column; justify-content:flex-end; padding: 28px; } .bento-item .b-tag{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); margin-bottom:10px; } .bento-item h3{ font-family: var(--f-display); font-size: clamp(1.2rem, 2vw, 1.7rem); } .bento-item p{ margin-top:10px; color: var(--ink-soft); font-size:.9rem; max-width: 46ch; } .bento-item .b-glyph{ position:absolute; top:24px; right:28px; font-family: var(--f-display); font-style:italic; font-size:3.4rem; color: rgba(var(--gold-rgb), .16); pointer-events:none; } .bento-item::after{ content:''; position:absolute; inset:0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(var(--gold-rgb),.10), transparent 55%); opacity:0; transition: opacity .4s; } .bento-item:hover::after{ opacity:1; } /* ========================================================================== PROJECTS (projects.html) ========================================================================== */ .proj-list{ margin-top: 40px; } .proj-row{ display:grid; grid-template-columns: 56px 1fr; gap: 32px; padding: 44px 0; border-top:1px solid var(--line); align-items:start; } .proj-list .proj-row:last-child{ border-bottom:1px solid var(--line); } .proj-num{ font-family: var(--f-display); font-style:italic; font-size:1.1rem; color: var(--gold); } .proj-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:14px; flex-wrap:wrap; } .proj-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; } .proj-tags span{ font-size:.72rem; letter-spacing:.05em; border:1px solid var(--line); border-radius:999px; padding: 5px 13px; color: var(--ink-soft); } @media (max-width: 760px){ .proj-row{ grid-template-columns: 1fr; gap:14px; } } /* ========================================================================== GALLERY (masonry + lightbox) ========================================================================== */ .masonry{ column-count: 3; column-gap: 20px; margin-top: 50px; } .masonry figure{ break-inside: avoid; margin: 0 0 20px; border-radius: var(--radius); overflow:hidden; position:relative; cursor: pointer; background: var(--line); } .masonry img{ width:100%; display:block; transition: transform .7s var(--ease); } .masonry figure:hover img{ transform: scale(1.06); } .masonry figcaption{ position:absolute; left:0; right:0; bottom:0; padding: 16px; background: linear-gradient(to top, rgba(18,33,61,.82), transparent); color:#F3F1EA; font-size:.78rem; letter-spacing:.03em; opacity:0; transform: translateY(8px); transition: opacity .35s, transform .35s; } .masonry figure:hover figcaption{ opacity:1; transform: translateY(0); } @media (max-width: 900px){ .masonry{ column-count:2; } } @media (max-width: 560px){ .masonry{ column-count:1; } } .lightbox{ position: fixed; inset:0; z-index: 7000; background: rgba(15,18,24,.94); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition: opacity .4s var(--ease); } .lightbox.is-open{ opacity:1; pointer-events:auto; } .lightbox img{ max-width: 84vw; max-height: 80vh; border-radius: var(--radius); transform: scale(.94); transition: transform .4s var(--ease); } .lightbox.is-open img{ transform: scale(1); } .lightbox-close{ position:absolute; top:28px; right:var(--edge); color:#F3F1EA; font-size:.8rem; letter-spacing:.1em; } .lightbox-cap{ position:absolute; bottom: 34px; left:0; right:0; text-align:center; color:#B7B4AC; font-size:.82rem; } /* ========================================================================== CONTACT ========================================================================== */ .contact-split{ display:grid; grid-template-columns: 1fr 1fr; min-height: 100svh; } .contact-left{ background: var(--navy-fixed); color:#F3F1EA; display:flex; flex-direction:column; justify-content:space-between; padding: clamp(90px,8vw,120px) var(--edge) 60px; position:relative; overflow:hidden; } .contact-left .t-h1{ color:#F2EFE7; } .contact-left .t-lead{ color:#B7BED4; } .contact-right{ display:flex; align-items:center; padding: clamp(90px,8vw,120px) var(--edge) 60px; } .contact-right form{ width:100%; max-width: 520px; } .time-widget{ display:flex; align-items:baseline; gap:14px; } .social-links{ display:flex; gap:12px; margin-top:32px; } .social-links a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(242,239,231,.22); display:flex; align-items:center; justify-content:center; transition: border-color .3s, transform .3s var(--ease), background .3s var(--ease); } .social-links a:hover{ border-color: var(--gold-soft); background: rgba(242,239,231,.06); transform: translateY(-3px); } .social-links svg{ width:16px; height:16px; stroke:#F2EFE7; fill:none; } .time-widget .clock{ font-family: var(--f-display); font-size: clamp(2rem,4vw,3rem); color: var(--gold-soft); } .time-widget .tz{ font-size:.78rem; letter-spacing:.08em; color:#9B988E; text-transform:uppercase; } @media (max-width: 900px){ .contact-split{ grid-template-columns: 1fr; } } /* ========================================================================== ABOUT ========================================================================== */ .about-hero{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:end; } .about-portrait{ aspect-ratio: 4/5; border-radius: var(--radius); background: linear-gradient(160deg, var(--navy-fixed), #202124); position:relative; overflow:hidden; } .about-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center top; } .about-portrait::after{ content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(185deg, rgba(18,33,61,0) 55%, rgba(18,33,61,.38) 100%); } .about-portrait .initials{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--f-display); font-style:italic; font-size: clamp(4rem,9vw,7rem); color: rgba(255,255,255,.14); } .duality-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin-top: 60px; border:1px solid var(--line); } .duality-col{ background: var(--bg); padding: clamp(28px,4vw,48px); } .duality-col h3{ font-family: var(--f-display); font-size: 1.4rem; margin-bottom: 16px; } @media (max-width: 800px){ .about-hero, .duality-grid{ grid-template-columns: 1fr; } } /* ---- language visibility ---- */ [data-lang]{ display: none; } [data-lang].is-active{ display: revert; } span[data-lang].is-active{ display:inline; } label[data-lang].is-active{ display:block; } /* ---- misc utility ---- */ .mt-0{ margin-top:0 !important; } .center{ text-align:center; } .muted{ color: var(--ink-soft); } .gold{ color: var(--gold); }