/* ============================================================ pixaRacer — stylesheet Follows pixaRacer Brand Guidelines v1.0 ------------------------------------------------------------ HOW THIS FILE IS ORGANISED (read me first) 1. TOKENS → all brand colours + type scale live here. 2. TYPOGRAPHY → the ONLY place text styling is defined: .h1 .h2 .h3 .display (headings) .p1 .p1-lead (body / intro text) .p2 (mono "terminal" text) inline emphasis: .accent .muted / strong / em 3. COMPONENTS → layout only. They do NOT set font-size/weight; text always uses a typography class from §2. TO RESTYLE TEXT GLOBALLY, edit §1 tokens or §2 classes — never the components. e.g. change every blue highlight → edit `.accent`; change every body paragraph → edit the `--p1-*` tokens. ============================================================ */ /* =========================================================== 1. TOKENS =========================================================== */ :root{ /* -- brand colours (Brand Guidelines §02) -- */ --bg:#262525; /* canonical near-black canvas */ --bg-2:#1c1b1b; /* deeper panel */ --bg-3:#2f2e2e; /* raised surface */ --cyan:#00e1ff; /* brand cyan (primary) */ --cyan-2:#29abe2; /* alternate cyan (light bg) */ --orange:#ff4200; /* brand orange */ --gray:#3a3a3a; /* dark gray */ --lightgray:#cccccc; /* light gray */ --offwhite:#f2f2f2; /* off-white */ /* -- type families (Brand Guidelines §03) -- */ --sans:"Titillium Web",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --mono:"Cascadia Code",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* -- H1 : hero headline -- */ --h1-size:clamp(2.4rem,7vw,4.6rem); --h1-weight:900; --h1-lh:1.05; --h1-ls:-.02em; --h1-color:var(--offwhite); /* -- DISPLAY : oversized statement line -- */ --display-size:clamp(2.6rem,8vw,5.2rem); --display-weight:900; --display-lh:1; --display-ls:-.02em; /* -- H2 : every section title -- */ --h2-size:clamp(1.8rem,4vw,2.8rem); --h2-weight:700; --h2-lh:1.1; --h2-ls:-.01em; --h2-color:var(--offwhite); /* -- H3 : card / feature titles -- */ --h3-size:1.25rem; --h3-weight:700; --h3-lh:1.2; --h3-color:var(--offwhite); --h3-lg-size:1.5rem; /* larger H3 variant (.h3-lg) for feature cards */ /* -- P1 : all descriptive body text (one size everywhere) -- */ --p1-size:1.05rem; --p1-weight:300; --p1-lh:1.65; --p1-color:var(--lightgray); --p1-strong-weight:600; --p1-strong-color:var(--offwhite); /* inside body */ --p1-lead-size:clamp(1.05rem,2.2vw,1.3rem); /* larger intro paragraphs */ /* -- P2 : mono "terminal" text (eyebrows, tags, captions) -- */ --p2-size:.85rem; --p2-weight:400; --p2-lh:1.5; --p2-ls:.04em; --p2-color:var(--cyan); /* -- section glow colours (alternated per section) -- */ --glow-cyan:rgba(0,225,255,.10); --glow-orange:rgba(255,66,0,.13); /* -- layout -- */ --maxw:1160px; --radius:14px; --ease:cubic-bezier(.2,.7,.2,1); } /* =========================================================== 2. TYPOGRAPHY (single source of truth for all text) =========================================================== */ /* headings */ .h1{font-family:var(--sans);font-size:var(--h1-size);font-weight:var(--h1-weight); line-height:var(--h1-lh);letter-spacing:var(--h1-ls);color:var(--h1-color);margin:0} .display{font-family:var(--sans);font-size:var(--display-size);font-weight:var(--display-weight); line-height:var(--display-lh);letter-spacing:var(--display-ls);color:var(--offwhite);margin:0} .h2{font-family:var(--sans);font-size:var(--h2-size);font-weight:var(--h2-weight); line-height:var(--h2-lh);letter-spacing:var(--h2-ls);color:var(--h2-color);margin:0} .h3{font-family:var(--sans);font-size:var(--h3-size);font-weight:var(--h3-weight); line-height:var(--h3-lh);color:var(--h3-color);margin:0} .h3-lg{font-size:var(--h3-lg-size)} /* modifier: bigger H3 */ /* body text */ .p1{font-family:var(--sans);font-size:var(--p1-size);font-weight:var(--p1-weight); line-height:var(--p1-lh);color:var(--p1-color);margin:0 0 1rem} .p1-lead{font-size:var(--p1-lead-size)} /* modifier: larger intro paragraph */ /* mono / terminal text */ .p2{font-family:var(--mono);font-size:var(--p2-size);font-weight:var(--p2-weight); line-height:var(--p2-lh);letter-spacing:var(--p2-ls);color:var(--p2-color);margin:0} /* inline emphasis — edit here to change it everywhere */ .accent{color:var(--cyan)} /* blue highlight word */ .muted{color:var(--gray)} /* dimmed word */ .p1 strong,.p1-lead strong{font-weight:var(--p1-strong-weight);color:var(--p1-strong-color)} .p1 em,.p1-lead em{font-style:italic;color:var(--offwhite)} /* remove trailing margin on the last text element inside a box */ .card :last-child,.pathway :last-child,.split-copy :last-child,.contact-copy :last-child{margin-bottom:0} /* =========================================================== 3. BASE RESET =========================================================== */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--offwhite);font-family:var(--sans); font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip} /* note: overflow-x:clip (not hidden) so position:sticky keeps working for the stacking-sections effect defined in §18 */ img{max-width:100%;display:block} a{color:var(--cyan);text-decoration:none} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)} section{padding:clamp(3.5rem,8vw,6.5rem) 0} /* eyebrow & terminal tag = P2 with a "> " prefix (add class "p2 eyebrow") */ .eyebrow{display:inline-block;margin-bottom:1rem} .eyebrow::before{content:"> ";color:var(--orange)} /* =========================================================== 4. BUTTONS =========================================================== */ .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans); font-weight:600;font-size:1rem;padding:.85rem 1.5rem;border-radius:999px; border:1.5px solid transparent;cursor:pointer; transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s} .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 30px -8px rgba(255,66,0,.6)} .btn-primary:hover{box-shadow:0 12px 40px -8px rgba(255,66,0,.8)} .btn-ghost{background:transparent;color:var(--offwhite);border-color:rgba(242,242,242,.25)} .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)} /* =========================================================== 5. HEADER / NAV =========================================================== */ .site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center; justify-content:space-between;padding:.9rem clamp(1.1rem,4vw,2rem); transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent} .site-header.scrolled{background:rgba(28,27,27,.82);backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.06)} .site-header .logo{height:30px;width:auto} .nav{display:flex;align-items:center;gap:1.6rem} .nav a.navlink{color:var(--lightgray);font-weight:600;font-size:.95rem;transition:color .2s} .nav a.navlink:hover{color:var(--cyan)} .nav-toggle{display:none;background:none;border:0;color:var(--offwhite);cursor:pointer;padding:.3rem} @media(max-width:820px){.nav .navlink{display:none}.nav-cta{display:none}} /* =========================================================== 6. HERO =========================================================== */ /* -- shared section background treatment (used by hero + every section) -- 4 layers, back → front: dim photo · glow · grey gradient · grid. The glow colour comes from --glow, alternated cyan/orange per section. */ main > section{position:relative;overflow:hidden;background:var(--bg);--glow:var(--glow-cyan)} main > section:nth-of-type(even){--glow:var(--glow-orange)} /* 2,4,6,8 → orange */ main > section > .container{position:relative;z-index:2} /* content above the bg */ .sec-bg{position:absolute;inset:0;z-index:0} .sec-bg img{width:100%;height:100%;object-fit:cover;opacity:.28;filter:saturate(1.05)} .sec-bg::after{content:"";position:absolute;inset:0; background:radial-gradient(1200px 600px at 70% 30%,var(--glow),transparent 60%), linear-gradient(180deg,rgba(38,37,37,.55) 0%,rgba(38,37,37,.85) 55%,var(--bg) 100%)} .sec-grid{position:absolute;inset:0;z-index:0;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:52px 52px;mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 78%)} .hero{min-height:100svh;display:flex;align-items:center;padding-top:6rem} .hero-inner{max-width:820px} .hero .xmark{width:clamp(66px,10vw,104px);margin-bottom:1.6rem} .hero .h1{margin-bottom:1.1rem} .hero .lead{max-width:620px;margin-bottom:2rem} .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem} .terminal-tag{margin-bottom:1.4rem;display:inline-flex;align-items:center;gap:.4rem} .terminal-tag .cursor{width:9px;height:1.05em;background:var(--orange);display:inline-block; animation:blink 1.1s steps(1) infinite} @keyframes blink{50%{opacity:0}} /* =========================================================== 7. ANIMATED X MARK =========================================================== */ .xmark .x-cyan,.xmark .x-orange{transform-box:fill-box;transform-origin:center;opacity:0} .xmark .x-cyan{animation:xIn .7s var(--ease) .15s forwards} .xmark .x-orange{animation:xIn .7s var(--ease) .32s forwards} @keyframes xIn{0%{opacity:0;transform:translateY(14px) scale(.82) rotate(-6deg)} 60%{opacity:1}100%{opacity:1;transform:none}} .xmark{filter:drop-shadow(0 0 0 rgba(0,225,255,0));animation:xGlow 4.5s ease-in-out 1.2s infinite} @keyframes xGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(0,225,255,0))} 50%{filter:drop-shadow(0 0 16px rgba(0,225,255,.35))}} /* =========================================================== 8. SCROLL REVEAL =========================================================== */ .reveal{opacity:0;transform:translateY(26px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} /* =========================================================== 9. LAYOUT: sections, grids, cards =========================================================== */ .section-head{max-width:640px;margin-bottom:2.6rem} .grid{display:grid;gap:1.1rem} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .card{background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:1.5rem; transition:transform .3s var(--ease),border-color .3s,box-shadow .3s} .card:hover{transform:translateY(-4px);border-color:rgba(0,225,255,.4); box-shadow:0 18px 50px -20px rgba(0,225,255,.25)} .card .ico{width:44px;height:44px;border-radius:10px;display:grid;place-items:center; background:rgba(0,225,255,.1);color:var(--cyan);margin-bottom:1rem} .card.orange .ico{background:rgba(255,66,0,.12);color:var(--orange)} .card .h3{margin-bottom:.5rem} /* subtle separators between sections (all sections now share the bg treatment) */ .events{border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)} /* cards stay opaque so their text is readable over the section imagery */ /* =========================================================== 10. STATEMENT ("the difference") =========================================================== */ .statement{position:relative;overflow:hidden} .statement::before{content:"";position:absolute;right:-10%;top:-30%;width:60vw;height:60vw; max-width:720px;max-height:720px; background:radial-gradient(circle,rgba(0,225,255,.08),transparent 62%);pointer-events:none} .statement .h2{max-width:16ch} .statement .display{margin:.1em 0 .5em} .statement .statement-lead{max-width:640px} /* =========================================================== 11. SPLIT ("what it is") =========================================================== */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center} .split .h2{margin-bottom:1rem} .split .media{border-radius:var(--radius);overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.08)} .split .media img{width:100%;aspect-ratio:16/11;object-fit:cover} .split ul{list-style:none;padding:0;margin:1.2rem 0 0} /* list items reuse the P1 tokens so they match all body text */ .split li{position:relative;padding-left:1.7rem;margin-bottom:.7rem; font-family:var(--sans);font-size:var(--p1-size);font-weight:var(--p1-weight); line-height:var(--p1-lh);color:var(--p1-color)} .split li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px; background:var(--orange);border-radius:2px;transform:rotate(45deg)} /* =========================================================== 12. PATHWAY CARDS =========================================================== */ .pathway{display:flex;flex-direction:column;align-items:flex-start;padding:2rem} .pathway .tag{margin-bottom:.8rem} .pathway .tag::before{content:"> ";color:var(--orange)} .pathway .h3{margin-bottom:.6rem} .pathway .p1{flex:1;margin-bottom:1.4rem} /* =========================================================== 13. PARTNERS =========================================================== */ .partners .partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1.6rem} .partner{background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.75rem} .partner .plogo{height:40px;width:auto;margin-bottom:1rem;opacity:.95} .partner .flag{margin-bottom:.7rem} .partner .h3{margin-bottom:.7rem} /* visually hidden but readable by screen readers + search engines */ .sr-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .creds{display:flex;flex-wrap:wrap;gap:.6rem} .cred{font-family:var(--mono);font-size:.8rem;color:var(--lightgray); border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.45rem .9rem} .cred strong{color:var(--cyan);font-weight:600} /* =========================================================== 14. GALLERY =========================================================== */ .gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;grid-auto-flow:dense} .gallery figure{margin:0;overflow:hidden;border-radius:12px;position:relative;border:1px solid rgba(255,255,255,.06)} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);aspect-ratio:4/3} .gallery figure:hover img{transform:scale(1.06)} .gallery .g-wide{grid-column:span 4} .gallery .g-tall{grid-column:span 2} .gallery .g-sq{grid-column:span 2} .gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem .7rem; font-family:var(--mono);font-size:.78rem;color:var(--offwhite); background:linear-gradient(0deg,rgba(28,27,27,.85),transparent);opacity:0;transition:opacity .3s} .gallery figure:hover figcaption{opacity:1} /* =========================================================== 15. CONTACT =========================================================== */ .contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start} .contact-copy .h2{margin-bottom:1rem} .contact-copy .mailto-line{margin-top:1.4rem;color:var(--cyan)} form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} label{display:block;font-size:.85rem;color:var(--lightgray);margin:0 0 .35rem;font-weight:600} input,textarea,select{width:100%;background:var(--bg-2);border:1px solid rgba(255,255,255,.12); color:var(--offwhite);border-radius:10px;padding:.8rem .9rem;font-family:var(--sans); font-size:1rem;transition:border-color .2s,box-shadow .2s;margin-bottom:1rem} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,225,255,.15)} textarea{resize:vertical;min-height:120px} .form-note{font-size:.82rem;color:var(--lightgray);margin-top:.4rem} .form-status{font-family:var(--mono);font-size:.9rem;margin-top:.8rem;min-height:1.2em} .form-status.ok{color:var(--cyan)} .form-status.err{color:var(--orange)} /* =========================================================== 16. FOOTER =========================================================== */ .site-footer{padding:3rem 0 2.5rem;border-top:1px solid rgba(255,255,255,.06);color:var(--lightgray)} .footer-inner{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center} .site-footer img{height:26px} .site-footer .small{color:var(--lightgray)} .footer-links{display:flex;gap:1.3rem} .footer-links a{color:var(--lightgray)} .footer-links a:hover{color:var(--cyan)} /* =========================================================== 17. RESPONSIVE =========================================================== */ @media(max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr} .split{grid-template-columns:1fr} .split .media{order:-1} .partners .partner-grid{grid-template-columns:1fr} .contact-wrap{grid-template-columns:1fr} .gallery{grid-template-columns:repeat(2,1fr)} .gallery .g-wide,.gallery .g-tall,.gallery .g-sq{grid-column:span 1} } @media(max-width:520px){ .grid-4{grid-template-columns:1fr} form .row{grid-template-columns:1fr} .hero{min-height:92svh} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} .reveal{opacity:1;transform:none} } /* =========================================================== 18. STACKING-SECTIONS SCROLL EFFECT Each section pins to the top; the next one scrolls up and covers it. Requires every section to have a SOLID background. Enabled only on wider screens with motion allowed — on mobile / reduced-motion it falls back to normal stacked scrolling. To disable entirely: remove class "stacked" from
. =========================================================== */ @media(min-width:821px) and (prefers-reduced-motion:no-preference){ main.stacked > section{ position:sticky;top:0;min-height:100vh; display:flex;flex-direction:column;justify-content:center; /* soft shadow on the top edge = visual cue it's covering the one below */ box-shadow:0 -24px 60px -18px rgba(0,0,0,.65); } /* trim vertical padding a touch so tall sections still fit one screen */ main.stacked > section{padding-top:5.5rem;padding-bottom:4rem} /* footer sits above the last pinned section and covers it too */ .site-footer{position:relative;z-index:1;background:var(--bg)} }