/* ================================================================= Madrasati — Design System (design tokens + components) Brand: violet-indigo → bright-blue gradient + pink-violet glow. Light theme by default, .dark on switches tokens. ================================================================= */ :root{ --brand-rgb: 61 43 224; /* #3D2BE0 violet-indigo (brand) */ --brand2-rgb: 67 166 246; /* #43A6F6 bright blue (grad end) */ --accent-rgb: 216 95 240; /* #D85FF0 pink-violet glow */ --ai-rgb: 109 75 240; /* #6D4BF0 indigo (AI) */ --ink-rgb: 14 17 40; /* #0E1128 deep navy ink */ --muted-rgb: 100 110 140; /* cool slate-500 */ --surface-rgb: 255 255 255; /* cards / panels */ --canvas-rgb: 246 247 253; /* cool violet-tinted off-white */ --line-rgb: 226 230 244; /* cool slate-200 */ --shadow: 14 17 40; } .dark{ --brand-rgb: 122 110 250; /* lifted violet for dark */ --brand2-rgb: 96 178 250; /* light blue */ --accent-rgb: 233 134 245; /* brighter pink glow on dark */ --ai-rgb: 150 128 250; --ink-rgb: 228 231 246; --muted-rgb: 150 160 190; --surface-rgb: 18 22 48; /* deep navy card */ --canvas-rgb: 10 14 42; /* #0A0E2A brand navy canvas */ --line-rgb: 36 42 78; --shadow: 0 0 0; } /* ---------- base ---------- */ *{ -webkit-tap-highlight-color: transparent; } html{ scroll-behavior:smooth; } body{ line-height:1.85; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ line-height:1.35; font-family:Cairo,system-ui,sans-serif; font-weight:800; letter-spacing:-0.01em; } ::selection{ background: rgb(var(--brand2-rgb)/.25); } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background: rgb(var(--line-rgb)); border-radius:10px; border:2px solid rgb(var(--canvas-rgb)); } ::-webkit-scrollbar-thumb:hover{ background: rgb(var(--muted-rgb)/.5); } .no-scrollbar::-webkit-scrollbar{ display:none; } .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; } /* ---------- gradients & surfaces ---------- */ .grad-text{ background:linear-gradient(105deg, rgb(var(--brand-rgb)), rgb(var(--brand2-rgb))); -webkit-background-clip:text; background-clip:text; color:transparent; } .grad-text-ai{ background:linear-gradient(105deg, rgb(var(--ai-rgb)), rgb(var(--brand2-rgb))); -webkit-background-clip:text; background-clip:text; color:transparent; } .grad-brand{ background:linear-gradient(120deg, rgb(var(--brand-rgb)), rgb(var(--brand2-rgb))); } .grad-ai{ background:linear-gradient(120deg, rgb(var(--ai-rgb)), rgb(var(--brand2-rgb))); } .bg-mesh{ background: radial-gradient(800px 460px at 88% -8%, rgb(var(--brand2-rgb)/.20), transparent 60%), radial-gradient(680px 460px at 2% 4%, rgb(var(--ai-rgb)/.12), transparent 55%), radial-gradient(560px 380px at 60% 110%, rgb(var(--accent-rgb)/.10), transparent 60%); } .glass{ background: rgb(var(--surface-rgb)/.72); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; border-radius:.9rem; padding:.72rem 1.15rem; transition:.18s ease; cursor:pointer; border:1px solid transparent; font-size:.95rem; line-height:1; white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn-primary{ color:#fff; background:linear-gradient(120deg, rgb(var(--brand-rgb)), rgb(var(--brand2-rgb))); box-shadow:0 12px 26px -12px rgb(var(--brand-rgb)/.8); } .btn-primary:hover{ filter:brightness(1.06); box-shadow:0 16px 34px -12px rgb(var(--brand-rgb)/.9); } .btn-accent{ color:#fff; background:linear-gradient(120deg, rgb(var(--accent-rgb)), #f4a6ff); box-shadow:0 12px 26px -12px rgb(var(--accent-rgb)/.8); } .btn-accent:hover{ filter:brightness(1.04); } .btn-ai{ color:#fff; background:linear-gradient(120deg, rgb(var(--ai-rgb)), rgb(var(--brand2-rgb))); box-shadow:0 12px 26px -12px rgb(var(--ai-rgb)/.8); } .btn-ai:hover{ filter:brightness(1.06); } .btn-outline{ border-color:rgb(var(--line-rgb)); color:rgb(var(--ink-rgb)); background:rgb(var(--surface-rgb)); } .btn-outline:hover{ border-color:rgb(var(--brand2-rgb)); color:rgb(var(--brand-rgb)); } .btn-ghost{ color:rgb(var(--ink-rgb)); background:transparent; } .btn-ghost:hover{ background:rgb(var(--ink-rgb)/.06); } .btn-lg{ padding:.95rem 1.6rem; font-size:1.02rem; border-radius:1.05rem; } .btn-sm{ padding:.5rem .85rem; font-size:.85rem; border-radius:.7rem; } .btn-icon{ padding:.6rem; border-radius:.8rem; } /* ---------- cards ---------- */ .card{ background:rgb(var(--surface-rgb)); border:1px solid rgb(var(--line-rgb)); border-radius:1.25rem; box-shadow:0 1px 2px rgb(var(--shadow)/.04), 0 16px 32px -26px rgb(var(--shadow)/.30); } .card-hover{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .card-hover:hover{ transform:translateY(-5px); box-shadow:0 24px 56px -22px rgb(var(--shadow)/.34); border-color:rgb(var(--brand2-rgb)/.45); } /* ---- Article cards (rich, elegant layout) ---- */ .post-card{ display:flex; flex-direction:column; height:100%; } .post-cover{ position:relative; overflow:hidden; } .post-cover img, .post-cover .ph{ transition:transform .5s ease; } .post-card:hover .post-cover img, .post-card:hover .post-cover .ph{ transform:scale(1.06); } .post-cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgb(8 9 30/.55), transparent 55%); } .post-cover .post-cat{ position:absolute; inset-inline-start:.9rem; top:.9rem; z-index:2; backdrop-filter:blur(8px); background:rgb(255 255 255/.85); color:rgb(var(--brand-rgb)); box-shadow:0 4px 14px rgb(8 9 30/.16); } .dark .post-cover .post-cat{ background:rgb(20 22 40/.78); color:rgb(var(--brand2-rgb)); } .post-body{ display:flex; flex-direction:column; flex:1; } .post-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .post-excerpt{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .post-foot{ margin-top:auto; } .post-arrow{ transition:transform .25s ease, opacity .25s ease; opacity:.55; } .post-card:hover .post-arrow{ transform:translateX(-4px); opacity:1; } .post-featured .post-cover::after{ background:linear-gradient(to top, rgb(8 9 30/.45), transparent 60%); } /* ---- Article page: hero cover + content styling ---- */ .post-hero{ position:relative; height:18rem; box-shadow:0 30px 60px -30px rgb(var(--brand-rgb)/.45); } @media (min-width:768px){ .post-hero{ height:24rem; } } .post-hero img{ width:100%; height:100%; object-fit:cover; } /* Standard reading measure worldwide: ~66–75 characters/line ≈ 68ch. Apply measure to the text itself so it does not stretch beyond a comfortable width. */ .article-body{ color:rgb(var(--ink-rgb)/.92); font-size:1.125rem; } .article-body > *{ max-width:68ch; margin-inline:auto; } .article-body > * + *{ margin-top:1.4rem; } .article-body h2{ font-size:1.7rem; font-weight:800; line-height:1.35; margin-top:2.6rem; } .article-body h3{ font-size:1.35rem; font-weight:700; line-height:1.4; margin-top:2rem; } .article-body h2, .article-body h3{ color:rgb(var(--ink-rgb)); scroll-margin-top:6rem; } .article-body p{ line-height:1.9; } /* Images and blockquotes breathe slightly wider than body text (modern editorial style) */ .article-body > img, .article-body > figure, .article-body > blockquote{ max-width:80ch; } @media (max-width:640px){ .article-body{ font-size:1.05rem; } } .article-body a{ color:rgb(var(--brand-rgb)); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .article-body a:hover{ color:rgb(var(--brand2-rgb)); } .article-body ul, .article-body ol{ padding-inline-start:1.4rem; display:flex; flex-direction:column; gap:.55rem; } .article-body ul{ list-style:none; } .article-body ul > li{ position:relative; padding-inline-start:1.4rem; } .article-body ul > li::before{ content:''; position:absolute; inset-inline-start:0; top:.7rem; width:.5rem; height:.5rem; border-radius:999px; background:linear-gradient(120deg, rgb(var(--brand-rgb)), rgb(var(--brand2-rgb))); } .article-body ol{ list-style:decimal; } .article-body ol > li::marker{ color:rgb(var(--brand-rgb)); font-weight:700; } .article-body img{ border-radius:1rem; width:100%; box-shadow:0 18px 40px -24px rgb(var(--shadow)/.4); } .article-body blockquote{ border-inline-start:3px solid rgb(var(--brand-rgb)); background:rgb(var(--brand-rgb)/.05); padding:1rem 1.25rem; border-radius:0 1rem 1rem 0; color:rgb(var(--ink-rgb)); font-weight:500; } .article-body code{ background:rgb(var(--ink-rgb)/.06); padding:.12rem .4rem; border-radius:.4rem; font-size:.9em; } .article-body hr{ border:0; height:1px; background:rgb(var(--line-rgb)); margin:2rem 0; } /* shimmer skeleton (loading placeholder during AJAX filtering) */ .skeleton{ position:relative; overflow:hidden; background:rgb(var(--line-rgb)/.85); } .skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgb(255 255 255/.9), transparent); animation:shimmer 1.15s infinite; } [dir="rtl"] .skeleton::after{ animation-name:shimmerRtl; } @keyframes shimmer{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } } @keyframes shimmerRtl{ 0%{ transform:translateX(100%); } 100%{ transform:translateX(-100%); } } /* Favorite button (heart) — solid white background and dark icon so it shows on any light image */ .fav-btn{ background:#fff; color:rgb(var(--ink-rgb)); box-shadow:0 2px 8px rgb(var(--shadow)/.18); transition:color .18s ease, background .18s ease, transform .18s ease; cursor:pointer; } .fav-btn:hover{ transform:scale(1.08); color:#ef4444; } .fav-btn.is-fav{ color:#ef4444; } .fav-btn.is-fav i{ fill:#ef4444; } /* Detail-page heart button uses btn/btn-outline — apply red color on is-fav too */ [data-fav].is-fav{ color:#ef4444; border-color:#ef4444; } [data-fav].is-fav svg, [data-fav].is-fav i{ fill:#ef4444; } /* Compare toggle — when a school is in the compare set, fill the button with brand */ .compare-btn.is-active{ background:rgb(var(--brand-rgb)); color:#fff; border-color:transparent; } .compare-btn.is-active:hover{ background:rgb(var(--brand-rgb)/.9); color:#fff; } /* ---------- chips / pills ---------- */ .chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .85rem; border-radius:999px; font-size:.85rem; font-weight:500; border:1px solid rgb(var(--line-rgb)); color:rgb(var(--muted-rgb)); background:rgb(var(--surface-rgb)); cursor:pointer; transition:.15s; } .chip:hover{ border-color:rgb(var(--brand2-rgb)); color:rgb(var(--brand-rgb)); } .chip.is-active{ background:rgb(var(--brand-rgb)/.10); border-color:rgb(var(--brand2-rgb)); color:rgb(var(--brand-rgb)); font-weight:600; } /* ---------- form fields ---------- */ .field{ width:100%; background:rgb(var(--surface-rgb)); border:1px solid rgb(var(--line-rgb)); border-radius:.85rem; padding:.72rem .95rem; color:rgb(var(--ink-rgb)); font-size:.95rem; transition:.15s; font-family:inherit; } .field::placeholder{ color:rgb(var(--muted-rgb)/.85); } .field:focus{ outline:none; border-color:rgb(var(--brand2-rgb)); box-shadow:0 0 0 4px rgb(var(--brand2-rgb)/.16); } .label{ font-size:.85rem; font-weight:600; color:rgb(var(--ink-rgb)); margin-bottom:.45rem; display:block; } /* ===== Custom dropdown (.pretty-select) — replaces default