/* ================================================================= PHINSKUL — THEME SYSTEM Three themes toggled via [data-theme] on : "day" (default), "night", and "colored". Every component reads CSS variables only — never a hardcoded color — so adding a theme later means editing this one block, not hunting through every section. ================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap'); :root, [data-theme="day"]{ --bg:#ffffff; --bg-alt:#f7fafd; --bg-deep:#050a15; --surface:#ffffff; --surface-deep:rgba(255,255,255,.05); --text:#0f172a; --text-dim:#5c6b80; --text-on-dark:#ffffff; --text-on-dark-dim:rgba(255,255,255,.72); --primary:#0d6efd; --primary-dark:#0b5ed7; --accent:#ffab00; --tertiary:#ec3f8f; --line:rgba(15,23,42,.09); --line-on-dark:rgba(255,255,255,.1); --glow-a:rgba(13,110,253,.10); --glow-b:rgba(255,171,0,.14); } [data-theme="night"]{ --bg:#0a0e18; --bg-alt:#0e1422; --bg-deep:#04060d; --surface:#131a2c; --surface-deep:rgba(255,255,255,.04); --text:#f1f5fb; --text-dim:#9aa5bd; --text-on-dark:#ffffff; --text-on-dark-dim:rgba(255,255,255,.72); --primary:#5b93ff; --primary-dark:#3d78f2; --accent:#ffc233; --tertiary:#ff6bad; --line:rgba(255,255,255,.09); --line-on-dark:rgba(255,255,255,.1); --glow-a:rgba(91,147,255,.14); --glow-b:rgba(255,194,51,.10); } [data-theme="colored"]{ --bg:#fdf7ff; --bg-alt:#eef2ff; --bg-deep:#1c1140; --surface:#ffffff; --surface-deep:rgba(255,255,255,.07); --text:#1c1633; --text-dim:#615a7d; --text-on-dark:#ffffff; --text-on-dark-dim:rgba(255,255,255,.78); --primary:#3b82f6; --primary-dark:#2563eb; --accent:#f7b62e; --tertiary:#ec3f8f; --line:rgba(40,20,80,.1); --line-on-dark:rgba(255,255,255,.14); --glow-a:rgba(124,58,237,.20); --glow-b:rgba(236,63,143,.18); } /* ----------------------------------------------------------------- BASE ----------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:var(--text); transition:background .3s ease, color .3s ease; } a{transition:color .2s ease;} h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:800;} .mono{font-family:'JetBrains Mono', ui-monospace, monospace;} .text-dim-theme{color:var(--text-dim);} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } /* ----------------------------------------------------------------- BANDS — alternating section backgrounds, theme-aware ----------------------------------------------------------------- */ .band-light{background:var(--bg-alt);color:var(--text);position:relative;overflow:hidden;} .band-white{background:var(--bg);color:var(--text);position:relative;overflow:hidden;} .band-dark{background:var(--bg-deep);color:var(--text-on-dark);position:relative;overflow:hidden;} .band-dark .text-dim-theme{color:var(--text-on-dark-dim);} [data-theme="colored"] .band-light{background:linear-gradient(180deg, var(--bg-alt), var(--bg));} [data-theme="colored"] .band-dark{background:linear-gradient(160deg, var(--bg-deep), #120a2b);} .glow-blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;} .glow-blob--a{width:480px;height:480px;background:var(--glow-a);top:-160px;right:-140px;} .glow-blob--b{width:420px;height:420px;background:var(--glow-b);bottom:-140px;left:-120px;} .band-content{position:relative;z-index:1;} /* ----------------------------------------------------------------- NAVBAR ----------------------------------------------------------------- */ .navbar{ backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); background:var(--bg) !important; background:color-mix(in srgb, var(--bg) 78%, transparent) !important; border-bottom:1px solid var(--line); padding:.9rem 0;transition:background .3s ease; } .navbar-brand{font-weight:800;font-size:1.4rem;letter-spacing:-.5px;color:var(--text) !important;display:flex;align-items:center;gap:8px;} .logo-badge{ display:inline-flex; align-items:center; justify-content:center;width:44px; height:44px; border-radius:50%; background: none; box-shadow:0 4px 14px rgba(0,0,0,.15); padding:6px; flex-shrink:0;} .logo-badge img{ width:100%; height:100%; object-fit:contain; border-radius:0;} .logo-img{height:38px;width:38px;border-radius:10px;object-fit:cover;} .nav-link{color:var(--text-dim) !important;font-weight:600;font-size:.94rem;margin:0 4px;position:relative;} .nav-link:hover, .nav-link.active{color:var(--primary) !important;} .nav-link::after{content:"";position:absolute;left:0;bottom:-6px;width:0%;height:2px;background:linear-gradient(to right, var(--primary), var(--accent));transition:width .25s ease;} .nav-link:hover::after, .nav-link.active::after{width:100%;} .btn-login{border-radius:999px;padding:.45rem 1.3rem;font-weight:700;border:1.5px solid var(--primary);color:var(--primary);background:transparent;display:inline-flex;align-items:center;gap:6px;} .btn-login:hover{background:var(--primary);color:#fff;transform:translateY(-1px);} .btn-register{position:relative;overflow:hidden;border-radius:999px;padding:.55rem 1.6rem;font-weight:700;border:none;color:#111; background:linear-gradient(to right, var(--accent) 50%, var(--primary) 50%);background-size:200% 100%;background-position:left; box-shadow:0 6px 16px rgba(0,0,0,.1);transition:all .35s ease;} .btn-register:hover{background-position:right;color:#fff;transform:translateY(-2px);} /* theme toggle: three-way pill switch */ .theme-switch{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--surface);} .theme-switch button{ width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--text-dim); display:flex;align-items:center;justify-content:center;font-size:.95rem;cursor:pointer;transition:all .2s ease; } .theme-switch button.is-active{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;} @media (max-width:991px){ .btn-login,.btn-register{width:100%;margin-top:10px;justify-content:center;} .theme-switch{margin-top:12px;justify-content:center;} } /* ----------------------------------------------------------------- BUTTONS (generic) ----------------------------------------------------------------- */ .btn-demo{background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:#fff;font-weight:700;padding:14px 28px;border-radius:50px;border:1px solid rgba(255,255,255,.3);} .btn-demo:hover{background:#fff;color:#111;} .btn-free{background:var(--primary);color:#fff;border-radius:50px;padding:14px;font-weight:700;display:block;text-align:center;} .btn-free:hover{background:var(--primary-dark);color:#fff;box-shadow:0 10px 25px rgba(13,110,253,.35);} .btn-pro{background:linear-gradient(to right, var(--accent) 50%, var(--primary) 50%);background-size:200% 100%;background-position:left;color:#111;border-radius:50px;padding:14px;font-weight:700;display:block;text-align:center;transition:.3s;} .btn-pro:hover{background-position:right;color:#fff;} .btn-cta{border-radius:999px;padding:14px 28px;font-weight:700;border:none;background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;} .btn-cta:hover{opacity:.95;transform:translateY(-2px);color:#fff;} .btn-clean{display:inline-flex;align-items:center;justify-content:center;padding:14px 34px;border-radius:50px;font-weight:700;text-decoration:none;background:var(--surface);color:var(--primary);border:1.5px solid var(--line);transition:.25s;} .btn-clean:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-2px);} /* ----------------------------------------------------------------- HERO ----------------------------------------------------------------- */ .hero{position:relative;min-height:92vh;padding:150px 0 100px;overflow:hidden;display:flex;align-items:center;} .hero-bg-image{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transform:scale(1.05);} .hero-overlay{position:absolute;inset:0;background:linear-gradient(75deg, rgba(4,8,18,.82), rgba(4,8,18,.35));z-index:1;} [data-theme="colored"] .hero-overlay{background:linear-gradient(75deg, rgba(28,17,64,.82), rgba(59,20,90,.35));} .hero .container{position:relative;z-index:2;} .hero h1{letter-spacing:-1.5px;line-height:1.1;color:#fff;} .hero-highlight{position:relative;color:var(--accent);} .hero-highlight::after{content:"";position:absolute;bottom:6px;left:0;width:100%;height:10px;background:rgba(255,171,0,.3);z-index:-1;border-radius:4px;} .trust-badge{background:rgba(255,255,255,.12);padding:6px 14px;border-radius:50px;font-size:.8rem;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);color:#fff;} .glass-card{background:rgba(255,255,255,.12);backdrop-filter:blur(15px);border-radius:20px;padding:25px;color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:0 25px 50px rgba(0,0,0,.3);animation:floaty 6s ease-in-out infinite;} @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}} .progress{background:rgba(255,255,255,.16);height:6px;} @media (max-width:768px){.hero{padding:120px 0 70px;text-align:center;}} /* ----------------------------------------------------------------- FLIP CARDS (feature modules) ----------------------------------------------------------------- */ .flip-card{height:230px;perspective:1200px;} .flip-card-inner{position:relative;width:100%;height:100%;transition:transform .6s ease;transform-style:preserve-3d;} .flip-card:hover .flip-card-inner{transform:rotateY(180deg);} .flip-card-front,.flip-card-back{position:absolute;width:100%;height:100%;border-radius:20px;padding:26px;backface-visibility:hidden;} .flip-card-front{background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.05);} .flip-card-back{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;text-align:center;} .icon-circle{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(13,110,253,.1);color:var(--primary);margin-bottom:14px;} .feature-title{font-weight:700;font-size:1.05rem;color:var(--text);} /* ----------------------------------------------------------------- BADGES / LABELS ----------------------------------------------------------------- */ .badge-soft{background:rgba(255,171,0,.15);color:#a06800;border-radius:50px;padding:6px 14px;font-size:.75rem;font-weight:700;} [data-theme="night"] .badge-soft, [data-theme="colored"] .badge-soft{color:var(--accent);background:rgba(255,171,0,.15);} .section-eyebrow{font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--primary);font-weight:700;} /* ----------------------------------------------------------------- PRICING ----------------------------------------------------------------- */ .pricing-card{position:relative;background:var(--surface-deep);border-radius:24px;padding:44px;border:1px solid var(--line-on-dark);backdrop-filter:blur(10px);transition:.3s;} .pricing-card:hover{transform:translateY(-8px);border-color:var(--primary);} .price-tag{font-size:2.6rem;font-weight:800;letter-spacing:-1px;} .feature-list{padding:0;margin:0;} .feature-list li{list-style:none;display:flex;align-items:center;font-size:.94rem;margin-bottom:12px;color:var(--text-on-dark-dim);} .feature-list i{color:var(--accent);margin-right:10px;font-size:17px;} /* ----------------------------------------------------------------- STEP CARDS (how it works) ----------------------------------------------------------------- */ .step-card{background:var(--surface);border-radius:22px;padding:36px 26px;border:1px solid var(--line);height:100%;transition:.3s;} .step-card:hover{transform:translateY(-8px);box-shadow:0 20px 45px rgba(0,0,0,.08);border-color:var(--primary);} .step-node{width:60px;height:60px;border-radius:18px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;background:rgba(13,110,253,.08);color:var(--primary);} .step-node-earn{background:rgba(255,171,0,.15);color:var(--accent);} /* ----------------------------------------------------------------- AUDIENCE / SEGMENT CARDS ----------------------------------------------------------------- */ .segment-card{background:var(--surface-deep);border-radius:24px;padding:36px;border:1px solid var(--line-on-dark);backdrop-filter:blur(10px);transition:.3s;} .segment-card:hover{transform:translateY(-8px);border-color:var(--primary);} .segment-icon-box{width:58px;height:58px;background:rgba(13,110,253,.15);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#9dbfff;margin:0 auto 18px;} .use-case-list{text-align:left;display:inline-block;padding:0;margin-top:16px;} .use-case-list li{list-style:none;font-size:.92rem;margin-bottom:9px;display:flex;align-items:center;gap:9px;color:var(--text-on-dark-dim);} .use-case-list i{color:var(--accent);font-size:14px;} /* ----------------------------------------------------------------- FAQ (Bootstrap accordion, restyled) ----------------------------------------------------------------- */ .faq-accordion .accordion-item{background:var(--surface);border:1px solid var(--line) !important;border-radius:16px !important;margin-bottom:12px;overflow:hidden;} .faq-accordion .accordion-button{font-weight:700;padding:1.3rem;color:var(--text);background:var(--surface);} .faq-accordion .accordion-button:focus{box-shadow:none;} .faq-accordion .accordion-button:not(.collapsed){color:var(--primary);background:var(--bg-alt);} .faq-accordion .accordion-body{color:var(--text-dim);padding:0 1.3rem 1.3rem;} /* ----------------------------------------------------------------- TESTIMONIAL TICKER ----------------------------------------------------------------- */ .ticker-wrapper{overflow:hidden;cursor:grab;} .ticker-wrapper:active{cursor:grabbing;} .ticker-track{display:flex;gap:1.6rem;width:max-content;animation:tickerSlide 45s linear infinite;} .ticker-wrapper:hover .ticker-track{animation-play-state:paused;} @keyframes tickerSlide{0%{transform:translateX(0);}100%{transform:translateX(calc(-50% - .8rem));}} .testimonial-card{width:320px;background:var(--surface-deep);border-radius:20px;padding:26px;border:1px solid var(--line-on-dark);} .verified-badge{font-size:11px;background:rgba(16,185,129,.15);color:#34d399;padding:5px 10px;border-radius:50px;display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;} .stars{color:var(--accent);font-size:14px;margin-bottom:8px;} .avatar-fallback{width:40px;height:40px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;} .user-name{font-weight:700;font-size:.92rem;color:var(--text-on-dark);} .user-school{font-size:.8rem;color:var(--text-on-dark-dim);} /* ----------------------------------------------------------------- PARTNER MARQUEE ----------------------------------------------------------------- */ .partner-marquee{overflow:hidden;margin-top:50px;} .partner-track{display:flex;gap:22px;width:max-content;animation:scrollX 32s linear infinite;} .partner-marquee:hover .partner-track{animation-play-state:paused;} @keyframes scrollX{0%{transform:translateX(0);}100%{transform:translateX(-50%);}} .partner-card{min-width:150px;height:80px;background:var(--surface);border-radius:16px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:14px;transition:.3s;} .partner-card:hover{transform:translateY(-5px);border-color:var(--primary);} .partner-card span{font-weight:700;color:var(--text-dim);font-size:.9rem;} /* ----------------------------------------------------------------- FORMS (contact page) ----------------------------------------------------------------- */ .form-control-theme{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 14px;color:var(--text);width:100%;font-family:inherit;font-size:.95rem;} .form-control-theme:focus{outline:none;border-color:var(--primary);} .field-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);font-weight:700;display:block;margin-bottom:6px;} /* ----------------------------------------------------------------- FOOTER ----------------------------------------------------------------- */ .site-footer{padding-top:80px;padding-bottom:34px;} .footer-title{font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-on-dark-dim);margin-bottom:16px;} .footer-link{color:var(--text-on-dark-dim);font-size:.9rem;text-decoration:none !important;display:inline-flex;align-items:center;position:relative;transition:all .25s ease;} .footer-link:hover{color:var(--accent) !important;transform:translateX(6px);} .footer-brand-text{font-size:.9rem;line-height:1.7;color:var(--text-on-dark-dim);} .footer-logo{height:36px;margin-bottom:14px;} .contact-item{display:flex;align-items:center;margin-bottom:12px;} .contact-item i{width:32px;height:32px;background:rgba(13,110,253,.15);border-radius:9px;display:flex;align-items:center;justify-content:center;margin-right:10px;color:#9dbfff;flex-shrink:0;} .footer-cta{background:var(--surface-deep);border:1px solid var(--line-on-dark);border-radius:18px;padding:22px;margin-top:20px;} .footer-social a{width:38px;height:38px;border-radius:11px;background:var(--surface-deep);display:inline-flex;align-items:center;justify-content:center;color:var(--text-on-dark-dim);text-decoration:none !important;transition:.3s;} .footer-social a:hover{background:var(--accent);color:#111;transform:translateY(-4px);} .footer-bottom{border-top:1px solid var(--line-on-dark);margin-top:50px;padding-top:22px;} /* ----------------------------------------------------------------- PAGE HEAD (inner pages) ----------------------------------------------------------------- */ .page-head{padding:150px 0 70px;position:relative;overflow:hidden;} .page-head h1{color:#fff;} /* ----------------------------------------------------------------- REVEAL ----------------------------------------------------------------- */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;} .reveal.is-visible{opacity:1;transform:translateY(0);}