Triston Ward

font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } /* ===== BACKGROUND ===== */ #bgCanvas{ position:fixed; inset:0; z-index:0; } body::before{ content:""; position:fixed; inset:0; background: radial-gradient(circle at 20% 30%, rgba(184,132,83,.12), transparent 35%), radial-gradient(circle at 80% 70%, rgba(184,132,83,.08), transparent 30%), radial-gradient(circle at center, rgba(255,255,255,.02), transparent 60%); pointer-events:none; z-index:1; } /* ===== HERO ===== */ .hero{ position:relative; z-index:2; width:100%; height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; } .glass-panel{ position:relative; min-width:min(92vw,900px); text-align:center; padding:70px 50px; border-radius:32px; background:var(--glass); border:1px solid var(--glass-border); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow:var(--shadow); transition: transform .5s var(--transition), border-color .5s ease, box-shadow .5s ease; } .glass-panel:hover{ border-color:rgba(184,132,83,.18); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 40px rgba(184,132,83,.08); } .name{ font-size:clamp(2.8rem,8vw,6.5rem); font-weight:700; letter-spacing:.08em; text-shadow: 0 0 18px rgba(255,255,255,.08); margin-bottom:24px; } /* ===== FIXED-WIDTH SEQUENTIAL FLAP ROW ===== */ .role-wrapper { display: flex; justify-content: center; align-items: center; height: 64px; } .split-flap-row { display: flex; gap: 2px; justify-content: center; } .flap-tick { position: relative; /* Explicit width based on longest title to prevent text-crowding and layout collapse */ width: clamp(11px, 1.7vw, 20px); height: clamp(24px, 3.8vw, 36px); background: #090c10; border-radius: 4px; perspective: 150px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); } .card-segment { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: #0d1117; color: var(--accent); font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace; font-size: clamp(0.8rem, 2vw, 1.25rem); font-weight: 700; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .card-top { top: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; line-height: clamp(24px, 3.8vw, 36px); border-bottom: 1px solid rgba(0,0,0,0.65); } .card-bottom { bottom: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; line-height: 0px; } .flap-hinge { position: absolute; left: 0; width: 100%; height: 50%; transform-style: preserve-3d; z-index: 3; } .flap-hinge.top { top: 0; transform-origin: bottom; } .flap-hinge.animate { animation: flipTopCard 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes flipTopCard { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-180deg); } } /* Accent line */ .accent-line{ width:140px; height:1px; margin:32px auto 0; background: linear-gradient(90deg, transparent, rgba(184,132,83,.8), transparent); position:relative; overflow:hidden; } .accent-line::after{ content:""; position:absolute; top:0; left:-30%; width:30%; height:100%; background:rgba(255,255,255,.8); filter:blur(3px); animation:sweep 5s infinite linear; } @keyframes sweep{ to { left:130%; } } @media (max-width:700px){ .glass-panel{ padding:50px 24px; border-radius:16px; } .flap-tick { gap: 1px; } }

Triston Ward

font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } /* ===== BACKGROUND ===== */ #bgCanvas{ position:fixed; inset:0; z-index:0; } body::before{ content:""; position:fixed; inset:0; background: radial-gradient(circle at 20% 30%, rgba(184,132,83,.12), transparent 35%), radial-gradient(circle at 80% 70%, rgba(184,132,83,.08), transparent 30%), radial-gradient(circle at center, rgba(255,255,255,.02), transparent 60%); pointer-events:none; z-index:1; } /* ===== HERO ===== */ .hero{ position:relative; z-index:2; width:100%; height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; } .glass-panel{ position:relative; min-width:min(92vw,900px); text-align:center; padding:70px 50px; border-radius:32px; background:var(--glass); border:1px solid var(--glass-border); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow:var(--shadow); transition: transform .5s var(--transition), border-color .5s ease, box-shadow .5s ease; } .glass-panel:hover{ border-color:rgba(184,132,83,.18); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 40px rgba(184,132,83,.08); } .name{ font-size:clamp(2.8rem,8vw,6.5rem); font-weight:700; letter-spacing:.08em; text-shadow: 0 0 18px rgba(255,255,255,.08); margin-bottom:24px; } /* ===== TRUE SPLIT-FLAP ROW SYSTEM ===== */ .role-wrapper { display: flex; justify-content: center; align-items: center; height: 64px; } .split-flap-row { display: flex; gap: 2px; justify-content: center; } .flap-tick { position: relative; width: clamp(14px, 2.2vw, 24px); height: clamp(28px, 4.5vw, 42px); background: #090c10; border-radius: 4px; perspective: 150px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: opacity 0.2s ease; } .card-segment { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: #0d1117; color: var(--accent); /* Clean system monospace font stack prevents sizing shifts */ font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; font-size: clamp(0.9rem, 2.5vw, 1.4rem); font-weight: 700; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .card-top { top: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; line-height: clamp(28px, 4.5vw, 42px); border-bottom: 1px solid rgba(0,0,0,0.6); } .card-bottom { bottom: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; line-height: 0px; } .flap-hinge { position: absolute; left: 0; width: 100%; height: 50%; transform-style: preserve-3d; z-index: 3; } .flap-hinge.top { top: 0; transform-origin: bottom; } .flap-hinge.animate { animation: flipTopCard 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes flipTopCard { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-180deg); } } /* Accent line */ .accent-line{ width:140px; height:1px; margin:32px auto 0; background: linear-gradient(90deg, transparent, rgba(184,132,83,.8), transparent); position:relative; overflow:hidden; } .accent-line::after{ content:""; position:absolute; top:0; left:-30%; width:30%; height:100%; background:rgba(255,255,255,.8); filter:blur(3px); animation:sweep 5s infinite linear; } @keyframes sweep{ to { left:130%; } } @media (max-width:700px){ .glass-panel{ padding:50px 24px; border-radius:16px; } }

Triston Ward

font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } /* ===== BACKGROUND ===== */ #bgCanvas{ position:fixed; inset:0; z-index:0; } body::before{ content:""; position:fixed; inset:0; background: radial-gradient(circle at 20% 30%, rgba(184,132,83,.12), transparent 35%), radial-gradient(circle at 80% 70%, rgba(184,132,83,.08), transparent 30%), radial-gradient(circle at center, rgba(255,255,255,.02), transparent 60%); pointer-events:none; z-index:1; } /* ===== HERO ===== */ .hero{ position:relative; z-index:2; width:100%; height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; } .glass-panel{ position:relative; min-width:min(92vw,900px); text-align:center; padding:70px 50px; border-radius:32px; background:var(--glass); border:1px solid var(--glass-border); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow:var(--shadow); transition: transform .5s var(--transition), border-color .5s ease, box-shadow .5s ease; } .glass-panel:hover{ border-color:rgba(184,132,83,.18); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 40px rgba(184,132,83,.08); } .name{ font-size:clamp(2.8rem,8vw,6.5rem); font-weight:700; letter-spacing:.08em; text-shadow: 0 0 18px rgba(255,255,255,.08); margin-bottom:24px; } /* ===== TRUE SPLIT-FLAP ROW SYSTEM ===== */ .role-wrapper { display: flex; justify-content: center; align-items: center; height: 64px; } .split-flap-row { display: flex; gap: 2px; /* Spaces out physical character cards */ justify-content: center; } .flap-tick { position: relative; width: clamp(14px, 2.2vw, 24px); height: clamp(28px, 4.5vw, 42px); background: #090c10; border-radius: 4px; perspective: 150px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); } /* Single character display properties */ .card-segment { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: #0d1117; color: var(--accent); font-family: 'Courier New', Courier, monospace; /* Monospace keeps cells perfectly uniform */ font-size: clamp(0.9rem, 2.5vw, 1.4rem); font-weight: 700; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .card-top { top: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; line-height: clamp(28px, 4.5vw, 42px); border-bottom: 1px solid rgba(0,0,0,0.6); } .card-bottom { bottom: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; line-height: 0px; } /* Flapping Animation Elements */ .flap-hinge { position: absolute; left: 0; width: 100%; height: 50%; transform-style: preserve-3d; z-index: 3; } .flap-hinge.top { top: 0; transform-origin: bottom; } .flap-hinge.animate { animation: flipTopCard 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes flipTopCard { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-180deg); } } /* Invisible spacer for empty spaces */ .flap-space { width: clamp(8px, 1.5vw, 14px); } /* Accent line */ .accent-line{ width:140px; height:1px; margin:32px auto 0; background: linear-gradient(90deg, transparent, rgba(184,132,83,.8), transparent); position:relative; overflow:hidden; } .accent-line::after{ content:""; position:absolute; top:0; left:-30%; width:30%; height:100%; background:rgba(255,255,255,.8); filter:blur(3px); animation:sweep 5s infinite linear; } @keyframes sweep{ to { left:130%; } } @media (max-width:700px){ .glass-panel{ padding:50px 24px; border-radius:16px; } }