/* ========================================================================== IDEAL ONLINE LEARNING (IOL) — Design System theme.css · v1 -------------------------------------------------------------------------- Drop-in stylesheet for the platform. Replaces the previous CSS design system. FONTS — add this ONE line to the of every page (before this file): USAGE - Class prefix: .iol-* (components) - Bangla text: add class .bn (switches to the Bangla face) - Dark section: wrap in .iol-dark (hero, footer) — components auto-adapt ========================================================================== */ /* ============================ 1. DESIGN TOKENS ============================ */ :root{ /* ---- Brand colors (raw) ---- */ --c-ink: #1E1A47; /* primary / deep indigo */ --c-ink-2: #2A2468; --c-ink-3: #191540; --c-royal: #4B3BD6; /* interactive / links */ --c-royal-soft: #6E5FE8; --c-royal-deep: #3E31BE; --c-marigold: #F59E0B; /* signature accent / CTA */ --c-marigold-deep:#E07B00; --c-marigold-hi: #FFD166; --c-paper: #F4F4FB; /* app background */ --c-cloud: #EBEBF7; /* tinted background / tracks */ --c-card: #FFFFFF; --c-muted: #615C82; /* secondary text */ --c-line: #E4E3F0; /* borders */ --c-grow: #16A36B; /* success / progress / pass */ --c-warn: #E0A800; --c-danger: #E5484D; /* ---- Semantic layer (components read THESE) ---- */ --bg: var(--c-paper); --surface: var(--c-card); --surface-2: var(--c-paper); --surface-sunken: var(--c-cloud); --text: var(--c-ink); --text-muted: var(--c-muted); --border: var(--c-line); --primary: var(--c-marigold); /* main action */ --primary-strong: var(--c-marigold-deep); --accent: var(--c-royal); /* secondary action / links */ --accent-strong: var(--c-royal-deep); --success: var(--c-grow); --warning: var(--c-warn); --danger: var(--c-danger); --focus-ring: var(--c-marigold); /* ---- Typography ---- */ --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'Manrope', sans-serif; --font-bangla: 'Hind Siliguri', sans-serif; --fs-xs: .75rem; /* 12 */ --fs-sm: .8125rem; /* 13 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.25rem; /* 20 */ --fs-xl: 1.5rem; /* 24 */ --fs-2xl: 2rem; /* 32 */ --fs-3xl: 2.5rem; /* 40 */ --fs-4xl: clamp(2.4rem, 6vw, 4rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-extra: 800; --lh-tight: 1.08; --lh-snug: 1.3; --lh-normal: 1.55; --ls-tight: -.02em; /* ---- Spacing (4px base) ---- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.75rem; --space-8: 3.5rem; --space-9: 4.75rem; /* ---- Radii ---- */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; /* ---- Shadows ---- */ --shadow-sm: 0 4px 12px -6px rgba(30,26,71,.18); --shadow-md: 0 12px 28px -14px rgba(30,26,71,.30); --shadow-lg: 0 18px 40px -22px rgba(30,26,71,.45); --shadow-cta:0 12px 24px -10px rgba(245,158,11,.7); /* ---- Motion ---- */ --dur-fast: .15s; --dur: .25s; --ease: cubic-bezier(.4,0,.2,1); /* ---- Layout ---- */ --container: 1080px; --z-header: 100; --z-modal: 1000; } /* Dark surface: remap the semantic layer, components follow automatically */ .iol-dark{ --bg: var(--c-ink); --surface: var(--c-ink-2); --surface-2: var(--c-ink-3); --surface-sunken: rgba(255,255,255,.06); --text: #FFFFFF; --text-muted: rgba(255,255,255,.72); --border: rgba(255,255,255,.14); background: var(--bg); color: var(--text); } /* ============================ 2. BASE / RESET ============================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-normal); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{display:block;max-width:100%} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-strong)} ::selection{background:var(--c-marigold-hi);color:var(--c-ink)} /* Keyboard focus — visible everywhere */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:6px; } /* ============================ 3. TYPOGRAPHY ============================ */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--text)} h1{font-size:var(--fs-4xl)} h2{font-size:var(--fs-3xl)} h3{font-size:var(--fs-xl)} h4{font-size:var(--fs-lg)} p{color:var(--text)} .bn{font-family:var(--font-bangla)} .iol-display{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)} .iol-muted{color:var(--text-muted)} .iol-eyebrow{ font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.18em; text-transform:uppercase;color:var(--accent); display:inline-flex;align-items:center;gap:9px; } .iol-eyebrow::before{content:"";width:26px;height:2px;background:var(--primary);border-radius:2px} /* ============================ 4. LAYOUT ============================ */ .iol-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5)} .iol-section{padding-block:var(--space-9)} .iol-stack{display:flex;flex-direction:column;gap:var(--space-4)} .iol-row{display:flex;align-items:center;gap:var(--space-4)} /* ============================ 5. BUTTONS ============================ */ .iol-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-sm); padding:14px 24px;border:none;border-radius:13px;cursor:pointer; transition:transform var(--dur-fast) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur) var(--ease); white-space:nowrap;text-decoration:none; } .iol-btn:hover{transform:translateY(-2px)} .iol-btn:active{transform:translateY(0)} .iol-btn--primary{background:var(--primary);color:#3A2600;box-shadow:var(--shadow-cta)} .iol-btn--primary:hover{background:var(--primary-strong);color:#fff} .iol-btn--accent{background:var(--accent);color:#fff;box-shadow:0 12px 24px -12px rgba(75,59,214,.7)} .iol-btn--accent:hover{background:var(--accent-strong);color:#fff} .iol-btn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)} .iol-btn--ghost:hover{background:var(--surface-sunken)} .iol-btn--quiet{background:var(--surface-2);color:var(--text);border:1px solid var(--border)} .iol-btn--quiet:hover{background:var(--surface-sunken)} .iol-btn--sm{padding:9px 16px;font-size:var(--fs-xs);border-radius:10px} .iol-btn--lg{padding:16px 30px;font-size:var(--fs-base)} .iol-btn--block{width:100%} .iol-btn[disabled]{opacity:.5;pointer-events:none} /* ============================ 6. CARDS / PANELS ============================ */ .iol-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);padding:var(--space-5); } .iol-panel{ background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden; } .iol-card--hover{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .iol-card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} /* ============================ 7. FORM FIELDS ============================ */ .iol-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)} .iol-label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted)} .iol-input,.iol-select,.iol-textarea{ font-family:var(--font-body);font-size:var(--fs-sm);color:var(--text); height:44px;padding:0 14px;border:1px solid var(--border);border-radius:11px; background:var(--surface-2);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease); width:100%; } .iol-textarea{height:auto;padding:12px 14px;min-height:110px;resize:vertical} .iol-input::placeholder,.iol-textarea::placeholder{color:var(--text-muted);opacity:.7} .iol-input:focus,.iol-select:focus,.iol-textarea:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(75,59,214,.15); } /* Segmented control (e.g. medium switch: Bangla / English) */ .iol-seg{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:4px} .iol-seg__opt{ flex:1;text-align:center;font-size:var(--fs-sm);font-weight:var(--fw-semibold); padding:9px;border-radius:8px;color:var(--text-muted);cursor:pointer;border:none;background:none; transition:background var(--dur) var(--ease),color var(--dur) var(--ease); } .iol-seg__opt.is-active{background:var(--c-ink);color:#fff} /* ============================ 8. BADGES / PILLS ============================ */ .iol-pill{ display:inline-flex;align-items:center;gap:6px; font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.03em; padding:5px 12px;border-radius:var(--radius-pill); background:var(--primary);color:#3A2600; } .iol-pill--accent{background:rgba(75,59,214,.12);color:var(--accent)} .iol-pill--success{background:rgba(22,163,107,.12);color:var(--success)} .iol-pill--muted{background:var(--surface-sunken);color:var(--text-muted)} /* ============================ 9. METRIC / STAT ============================ */ .iol-metric{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px} .iol-metric__n{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xl);line-height:1;color:var(--text)} .iol-metric__n--success{color:var(--success)} .iol-metric__n--accent{color:var(--primary-strong)} .iol-metric__k{font-family:var(--font-bangla);font-size:var(--fs-xs);color:var(--text-muted);margin-top:5px} /* ============================ 10. PROGRESS ============================ */ .iol-progress{height:8px;border-radius:6px;background:var(--surface-sunken);overflow:hidden} .iol-progress__fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--primary));transition:width var(--dur) var(--ease)} /* ============================ 11. LOGO / MONOGRAM ============================ */ /* Reusable IOL mark — put inside a link/header. Size via font-size on .iol-mark */ .iol-mark{display:inline-flex;align-items:center;gap:10px} .iol-mark__tile{ width:2.4em;height:2.4em;border-radius:.7em; background:linear-gradient(160deg,var(--c-royal),var(--c-ink)); display:flex;align-items:center;justify-content:center;flex:none; } .iol-mark__o{ width:1.1em;height:1.1em;border:.28em solid var(--primary);border-radius:50%;position:relative; } .iol-mark__o::after{content:"";position:absolute;top:-.16em;left:50%;transform:translateX(-50%); width:.42em;height:.42em;border-radius:50%;background:var(--c-marigold-hi)} .iol-mark__word{line-height:1} .iol-mark__word b{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.15em;letter-spacing:var(--ls-tight);color:var(--text)} .iol-mark__word span{display:block;font-size:.62em;letter-spacing:.16em;text-transform:uppercase;font-weight:var(--fw-semibold);color:var(--accent);margin-top:2px} /* ============================ 12. UTILITIES ============================ */ .iol-text-center{text-align:center} .iol-mt-2{margin-top:var(--space-2)} .iol-mt-4{margin-top:var(--space-4)} .iol-mt-6{margin-top:var(--space-6)} .iol-hidden{display:none !important} /* ============================ 13. RESPONSIVE ============================ */ @media (max-width:768px){ :root{--fs-3xl:2rem;--fs-2xl:1.6rem} .iol-section{padding-block:var(--space-7)} } /* ============================ 14. MOTION SAFETY ============================ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important} .iol-btn:hover,.iol-card--hover:hover{transform:none} } /* ============================ 15. APP SHELL (mobile dashboard pages) ============================ */ .iol-shell{max-width:480px;margin-inline:auto;padding:20px 18px 96px;min-height:100vh} .iol-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px} .iol-bottomnav{ position:fixed;bottom:0;left:0;right:0;max-width:480px;margin-inline:auto; display:flex;background:var(--surface);border-top:1px solid var(--border); box-shadow:var(--shadow-lg);z-index:var(--z-header); } .iol-bottomnav a{ flex:1;display:flex;flex-direction:column;align-items:center;gap:4px; padding:10px 0 12px;font-size:.66rem;font-weight:var(--fw-semibold);color:var(--text-muted); text-decoration:none; } .iol-bottomnav a i{font-size:19px} .iol-bottomnav a.is-active{color:var(--primary-strong)} /* ============================ 16. SITE NAV (public/marketing pages) ============================ */ .iol-nav{position:sticky;top:0;z-index:var(--z-header);background:var(--surface);border-bottom:1px solid var(--border)} .iol-nav__inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-5);height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)} .iol-nav__links{display:flex;align-items:center;gap:var(--space-6)} .iol-nav__links a{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text);text-decoration:none} .iol-nav__links a:hover{color:var(--accent)} .iol-nav__actions{display:flex;align-items:center;gap:var(--space-3)} @media (max-width:768px){ .iol-nav__links{display:none} } /* ============================ 17. GRID HELPERS ============================ */ .iol-grid{display:grid;gap:var(--space-5)} .iol-grid--2{grid-template-columns:repeat(2,1fr)} .iol-grid--3{grid-template-columns:repeat(3,1fr)} .iol-grid--4{grid-template-columns:repeat(4,1fr)} @media (max-width:900px){ .iol-grid--3,.iol-grid--4{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .iol-grid--2,.iol-grid--3,.iol-grid--4{grid-template-columns:1fr} } /* ============================ 18. FOOTER ============================ */ .iol-footer{background:var(--c-ink);color:#fff;padding-block:var(--space-8) var(--space-6)} .iol-footer a{color:rgba(255,255,255,.78);text-decoration:none} .iol-footer a:hover{color:#fff} .iol-footer h4{color:#fff;font-size:var(--fs-sm);margin-bottom:var(--space-3)}