/* ============================================================= Alissa Brontë — Bio · Cinematic scroll narrative Each act is a tall section with a sticky 100vh stage inside. JS reads scroll progress per act and drives transforms inline. No CSS transitions on animated props (avoids reduced-motion blocking). ============================================================= */ *{box-sizing:border-box;margin:0;padding:0} html,body{background:#070404;color:#f4ebe0;font-family:var(--font-body,'Cormorant Garamond',serif)} html{scroll-behavior:auto} /* IMPORTANT: do NOT set overflow-x on html/body — it breaks position:sticky */ img{max-width:100%;display:block} :root{ --ink:#f4ebe0; --amber:#d4a04c; --amber-soft:#f5b042; --rust:#a04830; --bg-deep:#070404; --bg-warm:#1a120c; } /* ---------- Scroll hint ---------- */ .scroll-init{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;opacity:0;transition:opacity .6s ease} .scroll-init.show{opacity:1}.scroll-init.hide{opacity:0} .scroll-init-mouse{width:26px;height:42px;border:1.5px solid rgba(212,160,76,0.85);border-radius:14px;position:relative;background:rgba(0,0,0,0.25)} .scroll-init-wheel{position:absolute;left:50%;top:7px;width:2px;height:7px;background:#d4a04c;border-radius:1px;transform:translateX(-50%);animation:wheelDrop 1.6s ease-in-out infinite;box-shadow:0 0 6px rgba(212,160,76,0.6)} @keyframes wheelDrop{0%{top:7px;opacity:0}25%{opacity:1}75%{opacity:1}100%{top:22px;opacity:0}} .scroll-init-label{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:rgba(212,160,76,0.75);text-shadow:0 0 8px rgba(0,0,0,.6);white-space:nowrap} .scroll-init-arrow{width:8px;height:8px;border-right:1.5px solid rgba(212,160,76,0.7);border-bottom:1.5px solid rgba(212,160,76,0.7);transform:rotate(45deg);animation:arrowPulse 1.6s ease-in-out infinite} @keyframes arrowPulse{0%,100%{opacity:.3}50%{opacity:1}} /* ---------- Progress rail ---------- */ .rail{position:fixed;top:0;left:0;right:0;height:2px;background:rgba(212,160,76,0.1);z-index:180;pointer-events:none} .rail-fill{position:absolute;left:0;top:0;height:100%;width:100%;background:linear-gradient(90deg,#d4a04c,#a04830);transform-origin:0 50%;transform:scaleX(0)} /* ---------- Acts indicator (left vertical) ---------- */ .acts-rail{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:170;display:flex;flex-direction:column;gap:14px;pointer-events:none} .acts-rail .act-pip{position:relative;width:3px;height:30px;background:rgba(212,160,76,0.18);border-radius:2px;transition:background .4s,height .4s} .acts-rail .act-pip.on{background:#d4a04c;height:46px;box-shadow:0 0 12px rgba(212,160,76,.5)} .acts-rail .act-pip::before{content:attr(data-label);position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:rgba(244,235,224,0);transition:color .4s;white-space:nowrap} .acts-rail .act-pip.on::before{color:rgba(212,160,76,0.9)} /* ---------- Nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:170;display:flex;align-items:center;justify-content:space-between;padding:18px 36px;transition:background .4s,backdrop-filter .4s} .nav.scrolled{background:rgba(7,4,4,0.92);border-bottom:1px solid rgba(212,160,76,0.12)} .nav-brand img{height:42px;width:auto;display:block;filter:brightness(1.2) drop-shadow(0 0 2px rgba(0,0,0,.95)) drop-shadow(0 0 6px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(212,160,76,.55)) drop-shadow(0 4px 14px rgba(0,0,0,.75))} .nav-links{display:flex;gap:28px;list-style:none} .nav-links a{color:rgba(244,235,224,0.78);text-decoration:none;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-family:'Space Mono',monospace;transition:color .25s} .nav-links a:hover,.nav-links a.active{color:#d4a04c} .nav-cta{padding:10px 18px;border:1px solid rgba(212,160,76,0.6);color:#d4a04c;text-decoration:none;font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-family:'Space Mono',monospace;transition:all .3s} .nav-cta:hover{background:#d4a04c;color:#070404} /* ---------- FOUC prevention: hide animated elements until JS marks body.js-ready ---------- */ body:not(.js-ready) .act1-words .word, body:not(.js-ready) .act1-words .eyebrow, body:not(.js-ready) .act1-words .sub, body:not(.js-ready) .act1-portrait, body:not(.js-ready) .act1-corners, body:not(.js-ready) .act1-meta, body:not(.js-ready) .act2-milestone, body:not(.js-ready) .act2-header, body:not(.js-ready) .act3-card, body:not(.js-ready) .act3-text, body:not(.js-ready) .act3-bottom-text { opacity: 0; } /* ---------- Reduced motion: no scrollbars/scroll snap, but JS still drives transforms ---------- */ @media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } } /* ---------- Film grain ---------- */ .grain{position:fixed;inset:0;pointer-events:none;z-index:190;opacity:.06;background-image:url("data:image/svg+xml;utf8,")} /* ---------- ACT 0 — INTRO portada (fixed overlay that fades on scroll) ---------- */ .bio-intro{position:relative;width:100%;height:100vh;background:#070404;overflow:hidden} .bio-intro-fixed{position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;z-index:50;pointer-events:auto} .bio-intro-bg{position:absolute;inset:0;background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(212,160,76,0.16), transparent 70%), radial-gradient(ellipse 100% 80% at 50% 100%, rgba(160,72,48,0.18), transparent 60%); pointer-events:none} .bio-intro-bg::before{display:none} .bio-intro-frame{position:relative;text-align:center;padding:0 6vw;max-width:900px;animation:bioIntroIn 1.4s cubic-bezier(.2,.8,.2,1) both} .bio-intro-eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.55em;text-transform:uppercase;color:#d4a04c;margin-bottom:48px;opacity:0;animation:bioIntroFade .9s .3s forwards} .bio-intro-title{font-family:var(--font-serif,'Cormorant Garamond',serif);font-weight:300;font-style:italic;color:#f4ebe0;font-size:clamp(72px,11vw,180px);line-height:0.92;letter-spacing:-0.02em;margin:0 0 40px;opacity:0;animation:bioIntroFade 1.1s .55s forwards} .bio-intro-title em{font-style:italic;color:#d4a04c;display:inline-block} .bio-intro-rule{width:60px;height:1px;background:#d4a04c;margin:0 auto 36px;opacity:0;transform-origin:center;animation:bioIntroRule .9s .9s forwards} .bio-intro-sub{font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-size:clamp(18px,1.7vw,24px);color:rgba(244,235,224,0.78);max-width:560px;margin:0 auto;line-height:1.55;opacity:0;animation:bioIntroFade 1.1s 1.1s forwards} @keyframes bioIntroIn{from{opacity:0}to{opacity:1}} @keyframes bioIntroFade{to{opacity:1}} @keyframes bioIntroRule{to{opacity:1;width:80px}} /* ============================================================= STAGE PATTERN — every act uses this .act = tall section (height set per-act) .stage = sticky 100vh inside, all visuals positioned absolutely ============================================================= */ .act{position:relative;width:100%} .stage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center} /* ============================================================= ACT I — APERTURA (revelado fotográfico) 4 viewports tall. Inside: dark room → words appear → portrait develops out of darkness → words drift apart → metrics fade in. ============================================================= */ .act-1{height:300vh;background:#070404} .act-1 .stage{background:#0a0805} .act1-darkwash{display:none} .act1-words{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:0 6vw;z-index:5} .act1-words .eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:#d4a04c;padding:6px 14px;border:1px solid rgba(212,160,76,0.5);margin-bottom:42px} .act1-words h1{font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-weight:300;font-size:clamp(56px,9vw,140px);line-height:0.98;color:#f4ebe0;letter-spacing:-0.02em;display:block;max-width:1200px} .act1-words h1 .word{display:inline-block;margin:0 0.08em} .act1-words h1 .word.punct{color:#d4a04c} .act1-words .sub{font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-size:clamp(18px,1.8vw,26px);color:rgba(212,160,76,0.85);margin-top:36px;letter-spacing:.02em} .act1-words .sub::before{content:'— '} .act1-portrait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(280px,32vw,440px);aspect-ratio:3/4;border-radius:6px;overflow:hidden;will-change:transform;z-index:4} .act1-portrait img{width:100%;height:100%;object-fit:cover;display:block} .act1-portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,4,4,0.55))} .act1-corners{position:absolute;left:50%;top:50%;width:clamp(280px,32vw,440px);height:calc(clamp(280px,32vw,440px) * 4 / 3);transform:translate(-50%,-50%);pointer-events:none;z-index:5} .act1-corner{position:absolute;width:30px;height:30px;border:1.5px solid #d4a04c} .act1-corner.tl{top:-12px;left:-12px;border-right:none;border-bottom:none} .act1-corner.tr{top:-12px;right:-12px;border-left:none;border-bottom:none} .act1-corner.bl{bottom:-12px;left:-12px;border-right:none;border-top:none} .act1-corner.br{bottom:-12px;right:-12px;border-left:none;border-top:none} .act1-meta{position:absolute;left:0;right:0;top:calc(50% + clamp(230px,25vw,350px));display:flex;justify-content:center;gap:14px;text-align:center;z-index:6;will-change:transform,opacity} .act1-meta .m{position:relative;padding:14px 26px;min-width:130px;background:rgba(7,4,4,0.72);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);border:1px solid rgba(212,160,76,0.22);border-radius:2px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(244,235,224,0.85);box-shadow:0 8px 24px rgba(0,0,0,0.45)} .act1-meta .m::before{content:'';position:absolute;left:50%;top:0;width:18px;height:1px;background:#d4a04c;transform:translateX(-50%)} .act1-meta .m strong{display:block;font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-weight:400;font-size:30px;color:#d4a04c;letter-spacing:.02em;text-transform:none;margin-top:6px;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.4)} /* Dust motes removed for performance */ .dust-layer{display:none} /* ============================================================= ACT II — TIMELINE (horizontal scroll-through) The user scrolls vertically; the timeline track moves horizontally. 5 milestones revealed one by one. ============================================================= */ .act-2{height:320vh;background:#0a0606} .act-2 .stage{background:#0a0606} .act2-header{position:absolute;top:80px;left:0;right:0;text-align:center;z-index:5} .act2-header .eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:#d4a04c;padding:6px 14px;border:1px solid rgba(212,160,76,0.4);display:inline-block;margin-bottom:18px} .act2-header h2{font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-weight:300;font-size:clamp(32px,4.5vw,60px);color:#f4ebe0;line-height:1.1} .act2-header h2 em{color:#d4a04c} .act2-track-wrap{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:60vh;overflow:visible} .act2-track{display:flex;align-items:center;gap:8vw;padding:0 50vw;will-change:transform;height:100%;width:max-content} .act2-milestone{flex:0 0 auto;width:min(540px,72vw);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center} .act2-milestone .year{font-family:'Space Mono',monospace;font-size:14px;letter-spacing:.32em;color:#070404;background:#d4a04c;padding:8px 22px;border-radius:2px;margin-bottom:24px;font-weight:600} .act2-milestone .ring{width:14px;height:14px;border-radius:50%;background:#d4a04c;margin-bottom:32px;box-shadow:0 0 0 6px rgba(10,6,6,1);position:relative} .act2-milestone .ring::before{content:'';position:absolute;left:50%;top:14px;width:1px;height:38px;background:linear-gradient(180deg,rgba(212,160,76,0.7),transparent);transform:translateX(-50%)} .act2-milestone h3{font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-weight:400;font-size:clamp(28px,3.6vw,48px);color:#f4ebe0;line-height:1.15;margin-bottom:18px} .act2-milestone p{font-family:var(--font-serif,'Cormorant Garamond',serif);font-size:clamp(16px,1.4vw,20px);line-height:1.6;color:rgba(244,235,224,0.78);max-width:440px;margin:0 auto} .act2-track::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,160,76,0.3) 10%,rgba(212,160,76,0.3) 90%,transparent);z-index:-1;pointer-events:none} /* Milestone counter (top right) */ .act2-counter{position:absolute;top:36px;right:48px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.3em;color:rgba(212,160,76,0.7);z-index:6} .act2-counter strong{color:#d4a04c;font-weight:400;font-size:14px} /* ============================================================= ACT III — UNIVERSO (deck → fan → grid) 3 stages: stack of cards in center → fan out → spread to grid ============================================================= */ .act-3{height:180vh;background:#070404} .act-3 .stage{background:radial-gradient(ellipse at 50% 50%,rgba(160,72,48,0.22),transparent 55%)} .act3-text{position:absolute;top:80px;left:0;right:0;text-align:center;z-index:6} .act3-text .eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:#d4a04c;padding:6px 14px;border:1px solid rgba(212,160,76,0.4);display:inline-block;margin-bottom:18px} .act3-text h2{font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-weight:300;font-size:clamp(32px,4.5vw,60px);color:#f4ebe0;line-height:1.1} .act3-text h2 em{color:#d4a04c} .act3-stage{position:absolute;left:50%;top:50%;width:90%;max-width:1400px;height:60vh;transform:translate(-50%,-50%);perspective:1600px;perspective-origin:center} .act3-card{position:absolute;left:50%;top:50%;width:clamp(180px,16vw,260px);aspect-ratio:2/3;border-radius:5px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.6);will-change:transform;transform-origin:center center;background:#1a120c;text-decoration:none;color:inherit} .act3-card img{width:100%;height:100%;object-fit:cover;display:block} .act3-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,4,4,0.92));pointer-events:none} .act3-card .lbl{position:absolute;left:14px;right:14px;bottom:14px;font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-size:18px;color:#f4ebe0;text-shadow:0 2px 8px rgba(0,0,0,.85);line-height:1.15;z-index:2} .act3-card .lbl small{display:block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:#d4a04c;margin-bottom:4px;font-style:normal} .act3-bottom-text{position:absolute;left:0;right:0;bottom:80px;text-align:center;z-index:6} .act3-bottom-text .quote{font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-weight:300;font-size:clamp(18px,2.2vw,28px);color:rgba(244,235,224,0.85);max-width:700px;margin:0 auto;line-height:1.4} /* ============================================================= ACT IV — VOZ AUTORAL (manifesto) Sticky: words light up sequentially as you scroll through. Ink stain grows behind. ============================================================= */ .act-4{height:240vh;background:linear-gradient(180deg,#070404,#1a120c 50%,#070404)} .act-4 .stage{background:transparent} .act4-content{position:relative;max-width:1200px;padding:0 8vw;text-align:center;z-index:5} .act4-content .eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:#d4a04c;padding:6px 14px;border:1px solid rgba(212,160,76,0.4);display:inline-block;margin-bottom:36px} .act4-mark{display:block;font-size:140px;line-height:0.4;color:rgba(212,160,76,0.45);font-family:Georgia,serif;height:60px;margin-bottom:30px} .manifesto{font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-weight:300;font-size:clamp(28px,4.6vw,68px);line-height:1.22;color:#f4ebe0;letter-spacing:-0.01em} .manifesto .word{display:inline-block;opacity:0.16;margin-right:0.18em} .manifesto .word.lit{opacity:1} .manifesto .word.amber.lit{color:#d4a04c} .manifesto-sig{display:block;text-align:center;margin-top:60px;font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-size:24px;color:rgba(212,160,76,0.85);letter-spacing:.04em} .manifesto-sig::before{content:'— '} .act4-stain{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(160,72,48,0.35),transparent 70%);transform:translate(-50%,-50%) translateZ(0);pointer-events:none;z-index:0} /* ============================================================= ACT V — LLAMADA (normal scroll) ============================================================= */ .act-5{position:relative;background:#070404;padding:18vh 0 12vh;text-align:center;overflow:hidden} .act-5-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(212,160,76,0.14),transparent 60%);pointer-events:none} .act-5-inner{max-width:900px;margin:0 auto;padding:0 8vw;position:relative} .act-5 .eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:#d4a04c;margin-bottom:28px;display:inline-block;padding:6px 14px;border:1px solid rgba(212,160,76,0.4)} .act-5 h2{font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-weight:300;font-size:clamp(36px,5vw,72px);line-height:1.1;color:#f4ebe0;margin-bottom:24px} .act-5 h2 em{color:#d4a04c} .act-5 p{font-family:var(--font-serif,'Cormorant Garamond',serif);font-size:19px;line-height:1.6;color:rgba(244,235,224,0.78);max-width:600px;margin:0 auto 48px} .cta-newsletter{display:inline-flex;align-items:center;border:1px solid rgba(212,160,76,0.45);background:rgba(232,220,196,0.04);border-radius:2px;overflow:hidden;max-width:500px;width:100%} .cta-newsletter input{flex:1;background:transparent;border:none;outline:none;padding:18px 22px;color:#f4ebe0;font-family:var(--font-serif,'Cormorant Garamond',serif);font-size:17px} .cta-newsletter input::placeholder{color:rgba(244,235,224,0.4)} .cta-newsletter button{padding:18px 30px;background:#d4a04c;color:#070404;border:none;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;cursor:pointer;transition:background .3s;font-weight:600} .cta-newsletter button:hover{background:#f5b042} .social-row{display:flex;justify-content:center;gap:16px;margin:48px 0 0;flex-wrap:wrap} .social-link{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid rgba(212,160,76,0.35);color:#f4ebe0;text-decoration:none;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;transition:all .3s;border-radius:2px;background:rgba(232,220,196,0.02)} .social-link:hover{background:#d4a04c;color:#070404;border-color:#d4a04c} .social-link svg{width:14px;height:14px} .signature-final{margin-top:80px;font-family:var(--font-serif,'Cormorant Garamond',serif);font-style:italic;font-size:36px;color:rgba(212,160,76,0.7);letter-spacing:.04em} /* ---------- MÓVIL — narrativa vertical legible (sin sticky cinemático) ---------- */ @media (max-width:780px){ .nav-links{display:none} .acts-rail{display:none} /* Act 0 intro: que scrollee en lugar de quedar fijo tapando el resto */ .bio-intro-fixed{position:absolute} /* Cada acto fluye en vertical; nada de stages sticky de 300vh */ .act,.act-1,.act-2,.act-4{height:auto} .act .stage{position:relative;height:auto;min-height:auto;overflow:visible;display:block;padding:88px 24px;text-align:center} /* Reveal de entrada (clase añadida por JS en móvil) */ .bio-reveal{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1)} .bio-reveal.in{opacity:1;transform:none} /* --- Act I: título + foto + métricas en columna --- */ .act-1 .stage{background:#0a0805} .act1-words{position:relative;inset:auto;padding:0;margin-bottom:34px} .act1-words h1{font-size:clamp(46px,12vw,76px)} .act1-words .word{opacity:1} .act1-portrait{position:relative;left:auto;top:auto;transform:none;opacity:1;margin:0 auto;width:min(76vw,330px)} .act1-corners{display:none} .act1-meta{position:relative;inset:auto;left:auto;right:auto;top:auto;opacity:1;margin:32px auto 0;flex-wrap:wrap;gap:12px;justify-content:center} /* --- Act II: timeline VERTICAL (hitos apilados) --- */ .act-2 .stage{padding:80px 24px} .act2-header{position:relative;top:auto;margin-bottom:44px;opacity:1} .act2-track-wrap{position:relative;top:auto;left:auto;right:auto;transform:none;height:auto;overflow:visible} .act2-track{flex-direction:column;width:auto;padding:0;gap:42px;transform:none;align-items:stretch;height:auto} .act2-track::after{display:none} .act2-milestone{position:relative;width:auto;opacity:1;transform:none;text-align:left;align-items:flex-start;border-left:2px solid rgba(212,160,76,.3);padding:0 0 0 26px} .act2-milestone .ring{display:none} .act2-milestone .year{margin:0 0 14px -26px} .act2-milestone p{max-width:none} /* --- Act IV: manifiesto legible --- */ .act-4 .stage{padding:92px 24px} .act4-content{max-width:none} .act4-mark{margin-bottom:16px} .manifesto{font-size:clamp(26px,7vw,40px)} .manifesto .word{opacity:1} .manifesto .word.amber{color:#d4a04c} .act4-stain{display:none} } /* ---------- CTA de contacto (sustituye a la newsletter) ---------- */ .cta-contact{display:inline-flex;align-items:center;gap:10px;padding:18px 30px;background:#d4a04c;color:#070404;text-decoration:none;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;border-radius:2px;transition:background .3s,transform .3s} .cta-contact:hover{background:#f5b042;transform:translateY(-2px)}