/* ===== Tokens ===== */ :root { --bg: #05070f; --surface: #0b1430; --accent: #22d3ee; --text: #dfe9ff; --text-dim: #8b9bbf; --panel-w: clamp(200px, 28vw, 340px); --ring-r: calc(var(--panel-w) * 1.21); --font-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; } /* ===== Reset / base ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; } h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; } h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 700; } h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: 1.5rem; } h3 { font-size: 1.15rem; margin-bottom: .6rem; color: var(--accent); } section, header.hero { position: relative; z-index: 1; padding: 14vh 6vw; } a { color: var(--accent); text-decoration: none; } .eyebrow { font-family: var(--font-head); font-size: .75rem; letter-spacing: .35em; color: var(--accent); margin-bottom: 1rem; } /* ===== Starfield canvas ===== */ #stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* ===== Nav ===== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 6vw; transition: background .4s, backdrop-filter .4s, box-shadow .4s; } .nav.scrolled { background: rgba(5, 7, 15, .65); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(34, 211, 238, .15); } .wordmark { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: .25em; color: var(--text); } .nav-links { display: flex; gap: 2rem; } .nav-links a { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); transition: color .25s; } .nav-links a:hover { color: var(--accent); } /* ===== Hero ===== */ .hero { min-height: 92vh; /* lets the work section peek above the fold to pull the visitor down */ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.4rem; background: radial-gradient(90% 70% at 50% 0%, rgba(11, 20, 48, .9) 0%, transparent 70%); } .glow-text { color: var(--accent); text-shadow: 0 0 24px rgba(34, 211, 238, .45); } .tagline { max-width: 34rem; color: var(--text-dim); font-size: 1.05rem; } .cta { display: inline-block; padding: .9rem 2.2rem; border: 1px solid var(--accent); border-radius: 999px; font-family: var(--font-head); font-size: .9rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); box-shadow: 0 0 18px rgba(34, 211, 238, .25), inset 0 0 12px rgba(34, 211, 238, .08); animation: breathe 4s ease-in-out infinite; transition: background .3s, color .3s; } .cta:hover { background: var(--accent); color: var(--bg); } .cta-lg { font-size: 1rem; text-transform: none; letter-spacing: .05em; } @keyframes breathe { 0%, 100% { box-shadow: 0 0 14px rgba(34, 211, 238, .2), inset 0 0 10px rgba(34, 211, 238, .06); } 50% { box-shadow: 0 0 30px rgba(34, 211, 238, .45), inset 0 0 16px rgba(34, 211, 238, .12); } } .scroll-cue { position: absolute; bottom: 3vh; left: 50%; width: 22px; height: 38px; border: 1px solid var(--text-dim); border-radius: 12px; transform: translateX(-50%); } .scroll-cue span { position: absolute; top: 7px; left: 50%; width: 3px; height: 8px; background: var(--accent); border-radius: 2px; transform: translateX(-50%); animation: cue 1.8s ease-in-out infinite; } @keyframes cue { 0% { opacity: 1; top: 7px; } 70% { opacity: 0; top: 20px; } 100% { opacity: 0; top: 7px; } } /* ===== Section reveal ===== Gated behind the .js class (set by an inline script in ) so the page stays fully visible when JavaScript is disabled. */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; } .js .reveal.in { opacity: 1; transform: none; } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cta, .scroll-cue span { animation: none; } .js .reveal { opacity: 1; transform: none; transition: none; } } /* ===== Ring carousel ===== */ .work { text-align: center; } .ring-scene { perspective: 1400px; height: min(58vh, 520px); display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: pan-y; user-select: none; } .ring-scene.dragging { cursor: grabbing; } .ring-viewport { transform-style: preserve-3d; transform: rotateX(-6deg); } .ring { position: relative; width: var(--panel-w); height: calc(var(--panel-w) * 9 / 16); transform-style: preserve-3d; } .panel { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(34, 211, 238, .18); background: linear-gradient(160deg, rgba(11, 20, 48, .95), rgba(5, 7, 15, .95)); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); transition: border-color .3s, box-shadow .3s; } .panel:nth-child(1) { transform: rotateY(0deg) translateZ(var(--ring-r)); } .panel:nth-child(2) { transform: rotateY(45deg) translateZ(var(--ring-r)); } .panel:nth-child(3) { transform: rotateY(90deg) translateZ(var(--ring-r)); } .panel:nth-child(4) { transform: rotateY(135deg) translateZ(var(--ring-r)); } .panel:nth-child(5) { transform: rotateY(180deg) translateZ(var(--ring-r)); } .panel:nth-child(6) { transform: rotateY(225deg) translateZ(var(--ring-r)); } .panel:nth-child(7) { transform: rotateY(270deg) translateZ(var(--ring-r)); } .panel:nth-child(8) { transform: rotateY(315deg) translateZ(var(--ring-r)); } .panel.is-front { border-color: var(--accent); box-shadow: 0 0 34px rgba(34, 211, 238, .35), 0 18px 50px rgba(0, 0, 0, .55); } .panel figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .panel-media { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; background-image: linear-gradient(rgba(34, 211, 238, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, .06) 1px, transparent 1px); background-size: 22px 22px; } .slot-num { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: rgba(34, 211, 238, .5); } .slot-label { font-family: var(--font-head); font-size: .65rem; letter-spacing: .4em; color: var(--text-dim); } .ring-arrows { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; } .ring-arrows button, .ring-detail button { background: transparent; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 1rem; padding: .5rem 1.2rem; cursor: pointer; } .ring-detail { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.5rem; color: var(--text-dim); } .ring-detail[hidden] { display: none; } /* ===== Services ===== */ .services { text-align: center; } .card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; max-width: 1000px; margin: 0 auto; text-align: left; } .tilt-card { padding: 1.8rem; border-radius: 14px; border: 1px solid rgba(34, 211, 238, .14); background: linear-gradient(160deg, rgba(11, 20, 48, .7), rgba(5, 7, 15, .7)); transition: transform .35s, border-color .35s, box-shadow .35s; } .tilt-card:hover { transform: perspective(700px) rotateX(4deg) rotateY(-4deg) translateY(-6px); border-color: var(--accent); box-shadow: 0 20px 40px rgba(0, 0, 0, .45), 0 0 24px rgba(34, 211, 238, .18); } .tilt-card p { color: var(--text-dim); font-size: .95rem; } /* ===== Why ===== */ .why { text-align: center; } .why-copy { max-width: 38rem; margin: 0 auto 3rem; color: var(--text-dim); } .stats { display: flex; justify-content: center; gap: clamp(2rem, 8vw, 6rem); flex-wrap: wrap; } .stat { display: flex; flex-direction: column; align-items: center; } .stat-num { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; color: var(--accent); text-shadow: 0 0 20px rgba(34, 211, 238, .35); } .stat-label { font-size: .85rem; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; } /* ===== Contact / footer ===== */ .contact { text-align: center; } .contact .cta-lg { margin-top: 1rem; } .socials { display: flex; justify-content: center; gap: 1.2rem; margin-top: 2.5rem; } .socials a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(34, 211, 238, .3); border-radius: 50%; font-family: var(--font-head); font-size: .8rem; color: var(--text-dim); transition: color .3s, border-color .3s, box-shadow .3s; } .socials a:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 16px rgba(34, 211, 238, .3); } footer { position: relative; z-index: 1; text-align: center; padding: 3rem 6vw; color: var(--text-dim); font-size: .85rem; border-top: 1px solid rgba(34, 211, 238, .1); } footer .wordmark { display: block; margin-bottom: .5rem; } /* ===== Focus visibility ===== */ .cta:focus-visible, .socials a:focus-visible, .ring-arrows button:focus-visible, .ring-detail button:focus-visible, .panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ===== Mobile ===== */ @media (max-width: 640px) { :root { --panel-w: 64vw; } .nav { padding: 1rem 5vw; } .wordmark { font-size: 1.05rem; letter-spacing: .18em; } .nav-links { gap: 1.1rem; } .nav-links a { font-size: .72rem; letter-spacing: .06em; } section, header.hero { padding: 10vh 7vw; } }