/* 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} #picksix :focus-visible{outline-color:#fff} ::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-pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}} @keyframes vg-glow{0%{box-shadow:0 0 0 0 rgba(186,12,47,.7),0 10px 30px rgba(186,12,47,.3)}100%{box-shadow:0 0 0 14px rgba(186,12,47,0),0 10px 30px rgba(186,12,47,.3)}} @keyframes vg-tick{0%{transform:translateY(.6em);opacity:0}100%{transform:translateY(0);opacity:1}} @keyframes vg-spring{0%{transform:scale(.94)}55%{transform:scale(1.05)}100%{transform:scale(1)}} @keyframes vg-fade{from{opacity:.35}to{opacity:1}} @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;color:#fff!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} .btn-black:hover{background:#141416!important;box-shadow:0 14px 40px rgba(0,0,0,.5)!important} .plan-card:hover{transform:translateY(-6px)!important;border-color:#fff!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} /* 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(10px,2.8vw,13px);letter-spacing:.14em;color:#9EA2A2;transition:color .3s;white-space:nowrap} .navbtn[aria-current="true"]{color:#fff} /* Small labels */ .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} /* ---------- Build Our Semester: the event board ---------- */ .ev-grid{display:grid;grid-template-columns:1fr;gap:14px} @media (min-width:640px){.ev-grid{grid-template-columns:repeat(2,1fr);gap:16px}} @media (min-width:1024px){.ev-grid{grid-template-columns:repeat(3,1fr)}} .ev-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3vw,30px);background:#141416;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s} .ev-card.is-on{border-color:rgba(186,12,47,.7);box-shadow:0 0 0 1px rgba(186,12,47,.35),0 20px 50px rgba(186,12,47,.14)} .ev-num{position:relative;font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:clamp(34px,4vw,44px);line-height:1;color:#BA0C2F} .ev-name{position:relative;margin:0;font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,27px);line-height:1.05;letter-spacing:-.01em;color:#fff;text-wrap:balance} .ev-blurb{position:relative;margin:0;font-size:15px;line-height:1.5;color:#B9BCBC;flex:1;text-wrap:pretty} .ev-foot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:6px} .ev-count{font-size:13px;line-height:1.3;color:#9EA2A2;white-space:nowrap} .ev-count b{display:inline-block;min-width:1.2em;font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:20px;color:#fff;font-variant-numeric:tabular-nums;vertical-align:-1px} .ev-count b.is-tick{animation:vg-tick .45s cubic-bezier(.2,.8,.2,1)} .ev-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border:1px solid rgba(255,255,255,.35);border-radius:6px;background:transparent;color:#fff;font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;cursor:pointer;white-space:nowrap;transition:background .3s,border-color .3s,color .3s,box-shadow .3s;touch-action:manipulation} .ev-toggle:hover{border-color:#fff;background:rgba(255,255,255,.06)} .ev-toggle[aria-pressed="true"]{background:#BA0C2F;border-color:#BA0C2F;color:#fff;box-shadow:0 10px 30px rgba(186,12,47,.3)} .ev-toggle[aria-pressed="true"]:hover{background:#D01038;border-color:#D01038} .ev-toggle.is-pop{animation:vg-pop .45s cubic-bezier(.2,.8,.2,1),vg-glow .9s ease-out} .ev-card.ev-more{justify-content:center;align-items:flex-start;border-style:dashed;border-color:rgba(255,255,255,.22);background:rgba(20,20,22,.6)} .ev-more .ev-name{font-size:clamp(26px,3vw,34px)} /* ---------- Pick Six: giveaway steps, chips, share card ---------- */ .steps{list-style:none;margin:0;padding:0;display:grid;gap:14px} .steps li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:#E6E6E6} .steps li b{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#BA0C2F;color:#fff;font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:15px} .steps li strong{color:#fff;font-weight:600} .steps .steps-cta{display:block;margin-top:4px} .my-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .my-chip{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px 0 12px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(0,0,0,.28);color:#fff;font-family:Oswald,Impact,sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;line-height:1.2;cursor:pointer;text-align:left;transition:background .3s,border-color .3s,color .3s,opacity .3s;touch-action:manipulation} .my-chip:hover{border-color:#fff;background:rgba(0,0,0,.45)} .my-chip .my-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.5);font-size:12px;letter-spacing:0;color:rgba(255,255,255,.75);transition:background .3s,color .3s,border-color .3s} .my-chip[aria-checked="true"]{background:#fff;border-color:#fff;color:#BA0C2F;animation:vg-spring .4s cubic-bezier(.2,.8,.2,1)} .my-chip[aria-checked="true"] .my-n{background:#BA0C2F;border-color:#BA0C2F;color:#fff} .my-chip[aria-disabled="true"]{opacity:.4;cursor:not-allowed} .my-picks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;font-size:14px;line-height:1.4;color:#fff} .my-picks:empty{display:none} .my-picks li{display:flex;gap:10px;align-items:baseline} .my-picks b{font-family:Oswald,Impact,sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.75);min-width:1.4em} .my-preview{position:relative;max-width:420px;margin:0 auto;width:100%;padding:0 14px 14px 0} .my-preview::before{content:"";position:absolute;top:14px;left:14px;right:0;bottom:0;background:#000;opacity:.35} #my-card{position:relative;display:block;width:100%;height:auto;aspect-ratio:1080/1350;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.45)} #my-card.is-fresh{animation:vg-fade .5s ease-out} /* 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 (replace the text, then delete the class) */ .todo{color:#BA0C2F;border:1px dashed rgba(186,12,47,.6);padding:1px 6px;border-radius:3px}