/* ========================================================================== PATHSHALA — Study. Sarcasm. Success. Design tokens ========================================================================== */ /* Fonts are loaded via tags in each page's , not @import — @import inside CSS is render-blocking and gets silently stripped or delayed by some hosts' security proxies, which can make a page look half-styled even when this stylesheet loaded fine. */ :root{ --bg: #0b0b0d; --bg-panel: #16161a; --bg-panel-2: #1e1e24; --board-green: #0f2318; --chalk: #f2ede1; --muted: #9a9aa3; --gold: #f0b429; --gold-bright: #ffd166; --chrome: #cfe3e8; --rose: #ff5d5d; --tape: #ffcc00; --line: rgba(242,237,225,0.12); --radius: 14px; --shadow: 0 20px 50px rgba(0,0,0,0.45); --maxw: 1180px; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--bg); color: var(--chalk); font-family:'Space Grotesk', sans-serif; line-height:1.6; -webkit-font-smoothing: antialiased; background-image: radial-gradient(circle at 15% 0%, rgba(240,180,41,0.08), transparent 40%), radial-gradient(circle at 85% 20%, rgba(255,93,93,0.06), transparent 35%); } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } ::selection{ background: var(--gold); color:#0b0b0d; } h1,h2,h3,.marker{ font-family:'Permanent Marker', cursive; font-weight:400; line-height:1.15; letter-spacing:0.5px; color: var(--chalk); } h1{ font-size: clamp(2.4rem, 6vw, 4.6rem); } h2{ font-size: clamp(1.8rem, 4vw, 2.7rem); } h3{ font-size: 1.3rem; } .eyebrow{ font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:2px; font-size:0.72rem; color: var(--gold); } .lede{ color: var(--muted); font-size:1.05rem; max-width:640px; } .section{ padding: 90px 0; position:relative; } .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 24px; } /* Focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 3px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } /* ---------------- Hazard tape divider ---------------- */ .tape{ background: repeating-linear-gradient(45deg, var(--tape), var(--tape) 18px, #111 18px, #111 36px); color:#111; font-family:'JetBrains Mono', monospace; font-weight:700; text-transform:uppercase; letter-spacing:3px; font-size:0.78rem; padding:10px 0; overflow:hidden; white-space:nowrap; transform: rotate(-1deg); box-shadow: var(--shadow); } .tape span{ display:inline-block; padding: 0 28px; } .tape-track{ display:flex; width:200%; animation: scrollTape 28s linear infinite; } @keyframes scrollTape{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* ---------------- Navbar ---------------- */ .hallpass{ position: sticky; top:0; z-index:100; background: rgba(11,11,13,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .hallpass-inner{ max-width: var(--maxw); margin:0 auto; padding: 14px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand{ display:flex; align-items:center; gap:10px; } .brand img{ width:40px; height:40px; border-radius:50%; } .brand-text{ font-family:'Permanent Marker', cursive; font-size:1.35rem; } .brand-text small{ display:block; font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:var(--gold); letter-spacing:2px; } .navlinks{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .navlinks a{ font-family:'JetBrains Mono', monospace; font-size:0.8rem; text-transform:uppercase; letter-spacing:1px; padding:8px 12px; border-radius:8px; color: var(--muted); transition: color .15s, background .15s; } .navlinks a:hover{ color: var(--chalk); background: var(--bg-panel-2); } .navlinks a.active{ color: var(--gold); background: rgba(240,180,41,0.1); } .nav-cta{ background: var(--gold); color:#111 !important; font-weight:700; padding:9px 16px !important; border-radius:8px !important; } .nav-cta:hover{ background: var(--gold-bright) !important; color:#111 !important; } .burger{ display:none; background:none; border:1px solid var(--line); color:var(--chalk); padding:8px 10px; border-radius:8px; font-family:'JetBrains Mono',monospace; } @media (max-width: 900px){ .navlinks{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background: var(--bg-panel); padding:14px; border-bottom:1px solid var(--line); } .navlinks.open{ display:flex; } .navlinks a{ width:100%; } .burger{ display:inline-block; } } /* ---------------- Buttons ---------------- */ .btn{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-weight:600; font-size:0.82rem; text-transform:uppercase; letter-spacing:1px; padding:14px 24px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s; } .btn:hover{ transform: translateY(-2px); } .btn-gold{ background: var(--gold); color:#111; box-shadow: 0 8px 0 #a97c12; } .btn-gold:hover{ background: var(--gold-bright); box-shadow: 0 6px 0 #a97c12; } .btn-gold:active{ transform: translateY(2px); box-shadow: 0 2px 0 #a97c12; } .btn-ghost{ background: transparent; border-color: var(--line); color: var(--chalk); } .btn-ghost:hover{ border-color: var(--gold); color: var(--gold); } .btn-rose{ background: var(--rose); color:#1a0505; box-shadow: 0 8px 0 #9c2626; } /* ---------------- Hero ---------------- */ .hero{ padding: 70px 0 60px; background: linear-gradient(180deg, rgba(15,35,24,0.4), transparent 60%), var(--bg); border-bottom: 1px solid var(--line); position:relative; overflow:hidden; } .hero::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 22px 22px; pointer-events:none; } .hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:50px; align-items:center; position:relative; } @media (max-width: 880px){ .hero-grid{ grid-template-columns:1fr; } } .hero h1{ margin: 14px 0 18px; } .hero h1 .hi{ color: var(--gold); } .hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; } .hero-art{ background: var(--bg-panel); border:1px solid var(--line); border-radius: 20px; padding: 26px; transform: rotate(2deg); box-shadow: var(--shadow); } .hero-art img{ border-radius:12px; } /* Sticky notes */ .note{ font-family:'Kalam', cursive; background: var(--gold-bright); color:#241b03; padding: 14px 16px; border-radius: 3px 12px 3px 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.35); font-size:0.95rem; position:relative; } .note.rose{ background: #ffd6d6; color:#4a0e0e; } .note.chrome{ background: var(--chrome); color:#0c2226; } .note-pin{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #ff8080, #a30f0f); box-shadow: 0 3px 4px rgba(0,0,0,0.4); } /* ---------------- Stats ---------------- */ .stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top: 60px; } @media (max-width: 760px){ .stats{ grid-template-columns: repeat(2,1fr); } } .stat{ background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); padding: 22px; text-align:center; } .stat b{ display:block; font-family:'Permanent Marker',cursive; font-size:2.1rem; color: var(--gold); } .stat span{ font-size:0.78rem; color: var(--muted); text-transform:uppercase; letter-spacing:1px; } /* ---------------- Cards / grid ---------------- */ .grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; } @media (max-width: 920px){ .grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px){ .grid{ grid-template-columns: 1fr; } } .card{ background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform .18s ease, border-color .18s ease; position:relative; } .card:hover{ transform: translateY(-5px); border-color: rgba(240,180,41,0.4); } .card .num{ font-family:'JetBrains Mono',monospace; color: var(--gold); font-size:0.78rem; letter-spacing:2px; } .card h3{ margin: 10px 0 8px; } .card p{ color: var(--muted); font-size:0.94rem; margin:0; } .card .emoji{ font-size:1.8rem; } /* Chalkboard panel */ .chalkboard{ background: var(--board-green); border: 10px solid #4a3524; border-radius: 10px; padding: 40px; box-shadow: inset 0 0 60px rgba(0,0,0,0.5), var(--shadow); position:relative; } .chalkboard h2, .chalkboard h3{ color:#f4f0e6; } .chalkboard p{ color:#cfe3d0; } .chalk-list{ list-style:none; padding:0; margin:0; } .chalk-list li{ font-family:'Kalam',cursive; padding: 10px 0 10px 30px; border-bottom: 1px dashed rgba(255,255,255,0.15); position:relative; } .chalk-list li::before{ content:"✓"; position:absolute; left:0; color: var(--gold-bright); font-weight:700; } /* ---------------- Footer ---------------- */ footer{ border-top:1px solid var(--line); padding: 50px 0 26px; background: var(--bg-panel); margin-top: 60px; } .foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; } @media (max-width:760px){ .foot-grid{ grid-template-columns: 1fr 1fr; } } .foot-grid h4{ font-family:'JetBrains Mono',monospace; color:var(--gold); text-transform:uppercase; font-size:0.75rem; letter-spacing:2px; margin-bottom:12px; } .foot-grid a{ display:block; color: var(--muted); font-size:0.9rem; padding: 5px 0; } .foot-grid a:hover{ color: var(--chalk); } .foot-bottom{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color: var(--muted); font-size:0.8rem; } /* ---------------- Page header (interior pages) ---------------- */ .pagehead{ padding: 60px 0 40px; border-bottom:1px solid var(--line); background: linear-gradient(180deg, rgba(240,180,41,0.06), transparent); } /* Team */ .team-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:26px; } @media (max-width:760px){ .team-grid{ grid-template-columns:1fr; } } .team-card{ background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; } .team-photo{ aspect-ratio: 4/3; overflow:hidden; } .team-photo img{ width:100%; height:100%; object-fit:cover; } .team-body{ padding: 22px; } .team-role{ display:inline-block; background: rgba(240,180,41,0.12); color:var(--gold); font-family:'JetBrains Mono',monospace; font-size:0.72rem; padding:5px 10px; border-radius:6px; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; } .team-body p{ color: var(--muted); font-size:0.92rem; } .team-body .mail{ font-family:'JetBrains Mono',monospace; font-size:0.82rem; color: var(--chrome); } /* Roles table-ish */ .role-row{ display:grid; grid-template-columns: 60px 1fr 2fr; gap:18px; align-items:flex-start; padding: 20px 0; border-bottom:1px solid var(--line); } .role-row .badge{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; background: var(--bg-panel-2); border:1px solid var(--line); } .role-row h3{ margin:0 0 4px; font-size:1.1rem; } .role-row .tag{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; color: var(--gold); text-transform:uppercase; letter-spacing:1px; } .role-row p{ margin:0; color: var(--muted); font-size:0.92rem; } /* Rules */ .rule{ display:grid; grid-template-columns: 54px 1fr; gap:18px; background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom:14px; } .rule .rnum{ font-family:'Permanent Marker',cursive; font-size:1.7rem; color: var(--gold); } .rule h3{ margin: 0 0 6px; font-size:1.05rem; } .rule p{ margin:0; color: var(--muted); font-size:0.92rem; } .warn-flow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-family:'JetBrains Mono',monospace; font-size:0.85rem; } .warn-flow .step{ background: var(--bg-panel-2); border:1px solid var(--line); padding:8px 14px; border-radius:8px; } .warn-flow .arrow{ color: var(--gold); } /* Career */ .job{ background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom:16px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; } .job-info h3{ margin:0 0 6px; } .job-info p{ margin:0; color: var(--muted); font-size:0.92rem; max-width:520px; } .job-tag{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; color: var(--rose); text-transform:uppercase; letter-spacing:1px; } /* Support */ .form-wrap{ background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); padding: 20px; } .form-wrap iframe{ width:100%; border:0; border-radius:10px; background:#fff; min-height: 900px; } .support-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom:40px; } @media (max-width:820px){ .support-cards{ grid-template-columns:1fr; } } /* Meme-strip (original illustrations, not lifted internet images) */ .meme-strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; } @media (max-width:820px){ .meme-strip{ grid-template-columns:1fr; } } .meme-card{ background:#fff; border-radius:10px; overflow:hidden; box-shadow: var(--shadow); } .meme-card .cap{ font-family:'Impact','Arial Black',sans-serif; text-transform:uppercase; color:#fff; -webkit-text-stroke:1px #000; text-shadow: 2px 2px 0 #000; text-align:center; padding:10px; font-size:1.05rem; background:#111; } .meme-card svg{ display:block; width:100%; height:auto; } /* Utility */ .center{ text-align:center; } .mt-lg{ margin-top: 60px; } .pill{ display:inline-block; background: var(--bg-panel-2); border:1px solid var(--line); padding:6px 12px; border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; color: var(--muted); } .skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:#111; padding:10px; z-index:1000; } .skip-link:focus{ left:10px; top:10px; }