/* Vote for Gleb — base styles. Most layout is inline in index.html (ported from the design). */ *{box-sizing:border-box} html{background:#000} body{margin:0;background:#000;color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased} a{color:#fff}a:hover{color:#BA0C2F} button{font:inherit;color:inherit} :focus-visible{outline:2px solid #BA0C2F;outline-offset:3px} ::selection{background:#BA0C2F;color:#fff} [hidden]{display:none!important} @keyframes vg-pulse{0%,100%{box-shadow:0 0 0 0 rgba(186,12,47,.75)}70%{box-shadow:0 0 0 7px rgba(186,12,47,0)}} @keyframes vg-blink{50%{opacity:0}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} /* Hover states (inline styles win over plain class rules, hence !important) */ .btn-red:hover{background:#D01038!important;box-shadow:0 14px 40px rgba(186,12,47,.5)!important} .btn-red-xl:hover{background:#D01038!important;box-shadow:0 20px 60px rgba(186,12,47,.65)!important} .btn-ghost:hover{border-color:#fff!important;background:rgba(255,255,255,.06)!important;color:#fff!important} .btn-onred:hover{background:#fff!important;color:#BA0C2F!important;border-color:#fff!important} .plan-card:hover{transform:translateY(-6px)!important;border-color:#fff!important} .stamp:hover{transform:rotate(6deg) scale(1.07)!important} .close-btn:hover{background:#BA0C2F!important;color:#fff!important;border-color:#BA0C2F!important} /* Image slots: drop a file into /assets and it fills the slot; otherwise the placeholder label shows. */ .slot{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;color:#9EA2A2;background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px)} .slot::before{content:attr(data-label)} .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#141416} .slot--contain img{object-fit:contain;background:#FBF7EE} .slot--light{color:#8A7C6A;background:repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 12px,transparent 12px 24px)} /* Portrait style: set data-portrait="duotone" on for the red duotone treatment. */ .duotone-only{display:none} body[data-portrait="duotone"] .duotone-only{display:block} body[data-portrait="duotone"] .portrait-media{filter:grayscale(1) contrast(1.15)} /* Nav: the blurred bar is fully hidden (not just translated) while the hero is on screen, so its backdrop-filter costs nothing there */ [data-nav].is-off{visibility:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s linear .5s!important} .navbtn{background:none;border:0;padding:0 2px;cursor:pointer;font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:clamp(11px,3vw,13px);letter-spacing:.16em;color:#9EA2A2;transition:color .3s} .navbtn[aria-current="true"]{color:#fff} /* Tabs */ .tab{position:relative;background:none;border:0;padding:20px 12px 18px;cursor:pointer;font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;color:#9EA2A2;transition:color .3s;white-space:nowrap} .tab[aria-selected="true"]{color:#fff} .tab-ind{position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:#BA0C2F;box-shadow:0 0 10px rgba(186,12,47,.8);opacity:0;transition:opacity .3s} .tab[aria-selected="true"] .tab-ind{opacity:1} /* Posting chips */ .chip{text-align:left;background:#141416;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:14px 16px;cursor:pointer;color:#fff;transition:border-color .3s,background .3s,box-shadow .3s;box-shadow:none} .chip[aria-checked="true"]{border-color:#BA0C2F;background:rgba(186,12,47,.12);box-shadow:0 0 0 1px #BA0C2F,0 10px 30px rgba(186,12,47,.25)} .chip-title{display:block;font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.05em;line-height:1.25} .chip-desc{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:#9EA2A2} /* Pipeline nodes */ .node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px} .node-ring{width:28px;height:28px;border-radius:50%;border:2px solid #3A3A3C;background:#0B0B0C;box-shadow:none;transition:all .7s cubic-bezier(.2,.8,.2,1);display:grid;place-items:center} .node-dot{width:8px;height:8px;border-radius:50%;background:#3A3A3C;transition:background .3s} .node-name{font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:clamp(9px,2.4vw,11px);letter-spacing:.1em;color:#9EA2A2;line-height:1.25;transition:color .3s} .node-micro{font-size:11px;line-height:1.3;color:#9EA2A2;min-height:14px;opacity:0;transition:opacity .6s} .node.is-active .node-ring,.node.is-done .node-ring{border-color:#BA0C2F} .node.is-done .node-ring{background:#BA0C2F} .node.is-active .node-ring{box-shadow:0 0 0 6px rgba(186,12,47,.16),0 0 26px rgba(186,12,47,.7)} .node.is-active .node-dot,.node.is-done .node-dot{background:#fff} .node.is-active .node-name,.node.is-done .node-name{color:#fff} .node.is-done .node-micro{opacity:1} /* Small labels used throughout the demo */ .eyebrow{font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:11px;letter-spacing:.22em;color:#9EA2A2} .panel{background:#141416;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:16px 18px} .pill{display:inline-block;padding:6px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:12.5px;line-height:1.3;color:#E6E6E6;background:#0B0B0C} .req{display:inline-block;padding:6px 10px;border:1px solid rgba(186,12,47,.5);border-radius:6px;font-size:12.5px;line-height:1.3;color:#E6E6E6;background:rgba(186,12,47,.08)} .fact{background:#0B0B0C;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.45;color:#E6E6E6;transform-origin:top;display:flex;gap:10px;align-items:flex-start} .fact::before{content:"";flex:none;width:6px;height:6px;margin-top:6px;border-radius:50%;background:#BA0C2F} .map-r{display:block;width:fit-content;max-width:100%;padding:6px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:12px;line-height:1.3;color:#9EA2A2;background:#0B0B0C;transition:border-color .5s,color .5s} .map-q{display:block;width:fit-content;max-width:100%;padding:6px 10px;border:1px solid rgba(186,12,47,.35);border-radius:6px;font-size:12px;line-height:1.3;color:#9EA2A2;background:rgba(186,12,47,.05);text-align:right;transition:border-color .5s,color .5s,background .5s} .letter-src{background:rgba(186,12,47,.12);border-bottom:2px solid #BA0C2F;border-radius:2px;padding:0 1px;cursor:help;transition:background .2s} .letter-src.is-tip{background:rgba(186,12,47,.3)} .caret{display:inline-block;width:2px;height:1em;background:#BA0C2F;vertical-align:-.15em;margin-left:1px;animation:vg-blink 1s steps(1) infinite} /* Resume tailor bullets */ .bullet{border:1px solid rgba(255,255,255,.09);background:#0B0B0C;border-radius:8px;opacity:1;transition:opacity .8s,border-color .5s,background .5s} .bullet.is-demoted{opacity:.5} .bullet.is-open{border-color:#BA0C2F;background:rgba(186,12,47,.07)} .bullet-btn{width:100%;text-align:left;background:none;border:0;padding:12px 14px;color:#fff;cursor:default;display:flex;gap:10px;align-items:flex-start} .bullet.is-moved .bullet-btn{cursor:pointer} .bullet-dot{flex:none;width:6px;height:6px;margin-top:7px;background:#3A3A3C;transition:background .3s} .bullet.is-moved .bullet-dot{background:#BA0C2F} .bullet-text{flex:1;font-size:13.5px;line-height:1.45;color:#E6E6E6} .bullet-cut{flex:none;font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:10px;letter-spacing:.14em;color:#fff;background:#BA0C2F;padding:3px 7px;border-radius:3px} .bullet-tag{flex:none;font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:10px;letter-spacing:.14em;color:#BA0C2F;padding-top:3px} .bullet-detail{padding:0 14px 14px 30px;display:grid;gap:8px} .bullet-before{font-size:12.5px;line-height:1.5;color:#9EA2A2;text-decoration:line-through;text-decoration-color:#BA0C2F} .bullet-after{display:flex;gap:10px;align-items:flex-start} .bullet-after b{flex:none;font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:10px;letter-spacing:.14em;color:#BA0C2F;margin-top:3px} .bullet-after span{font-size:13px;line-height:1.55;color:#fff} .gap{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:#E6E6E6} .vcard{position:absolute;left:0;top:0;width:calc(100% - 14px);max-width:360px;background:#0B0B0C;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:12px 14px;display:flex;gap:12px;align-items:center;box-shadow:0 14px 30px rgba(0,0,0,.5)} .vcard-name{font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vcard-sub{font-size:12px;color:#9EA2A2;margin-top:2px} /* Modals + toast */ .modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:110;max-width:calc(100vw - 32px);background:#141416;border:1px solid #3A3A3C;color:#fff;padding:12px 16px;border-radius:8px;display:flex;gap:10px;align-items:center;box-shadow:0 20px 60px rgba(0,0,0,.6);font-size:14px;line-height:1.4} /* Fill-in placeholders from the design (replace the text, then delete the class) */ .todo{color:#BA0C2F;border:1px dashed rgba(186,12,47,.6);padding:1px 6px;border-radius:3px}