/* * HRR Portfolio — Light Mode layer (v2.1.0) * ------------------------------------------------------------------ * Dark mode = DEFAULT. Ei file-er kono rule apply hoy na jotokkhon na * tag-e `hrr-light` class thake (header-er toggle button add kore). * * Strategy: Tailwind build (main.css) ekdom untouched ache. Ekhane shudhu * oi build-er dark-palette utility class gulo `html.hrr-light` scope-e * re-map kora hoyeche — tai dark mode pixel-identical thake. * * Warm ivory palette: * canvas #faf7f4 surface #ffffff * ink #241c1f muted #6b5c60 * line rgba(36,28,31,.12) * brand #f79421 (unchanged — dui mode-ei ek) */ html.hrr-light { --hrr-canvas: #faf7f4; --hrr-canvas-2: #f3ede7; --hrr-surface: #fff; --hrr-ink: #241c1f; --hrr-muted: #6b5c60; --hrr-line: #241c1f1f; color-scheme: light; } /* ---------- Smooth cross-fade between modes ---------- */ html.hrr-theme-ready body, html.hrr-theme-ready .bg-\[\#110e10\], html.hrr-theme-ready .bg-\[\#0c0a0b\], html.hrr-theme-ready .glass-panel, html.hrr-theme-ready .glass-panel-heavy { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } /* ---------- Base canvas ---------- */ html.hrr-light body { background-color: var(--hrr-canvas); color: var(--hrr-ink); } /* ---------- Solid backgrounds ---------- */ html.hrr-light .bg-\[\#110e10\] { background-color: var(--hrr-canvas); } html.hrr-light .bg-\[\#0c0a0b\] { background-color: var(--hrr-canvas-2); } html.hrr-light .bg-\[\#141012\] { background-color: #efe8e2; } html.hrr-light .bg-\[\#161214\]\/30 { background-color: #ffffffb3; } html.hrr-light .bg-\[\#161214\]\/40 { background-color: #ffffffcc; } html.hrr-light .bg-\[\#544348\] { background-color: #6b5c60; } html.hrr-light .bg-\[\#544348\]\/10 { background-color: #5443480d; } html.hrr-light .bg-\[\#544348\]\/15 { background-color: #54434814; } html.hrr-light .bg-\[\#544348\]\/20 { background-color: #5443481f; } html.hrr-light .bg-\[\#544348\]\/40 { background-color: #54434833; } html.hrr-light .bg-black\/40 { background-color: #241c1f59; } /* white-tint fills (dark mode-e halka alo) -> light mode-e halka chaya */ html.hrr-light .bg-white\/2 { background-color: #241c1f08; } html.hrr-light .bg-white\/5 { background-color: #241c1f0a; } html.hrr-light .bg-white\/10 { background-color: #241c1f14; } html.hrr-light .bg-white\/\[0\.04\] { background-color: #241c1f0a; } html.hrr-light .hover\:bg-white\/5:hover { background-color: #241c1f12; } html.hrr-light .hover\:bg-\[\#544348\]\/20:hover { background-color: #5443481f; } html.hrr-light .bg-white { background-color: #fff; } /* ---------- Borders ---------- */ html.hrr-light .border-white\/5 { border-color: #241c1f0f; } html.hrr-light .border-white\/10 { border-color: #241c1f1f; } html.hrr-light .border-white\/15 { border-color: #241c1f2b; } /* ---------- Text ---------- */ html.hrr-light .text-white { color: var(--hrr-ink); } html.hrr-light .text-white\/85 { color: #241c1fd9; } html.hrr-light .text-white\/80 { color: #241c1fcc; } html.hrr-light .text-white\/70 { color: #241c1fb3; } html.hrr-light .text-white\/60 { color: #241c1f99; } html.hrr-light .text-white\/50 { color: #241c1f8c; } html.hrr-light .text-white\/40 { color: #241c1f80; } html.hrr-light .text-white\/30 { color: #241c1f6b; } html.hrr-light .text-white\/5 { color: #241c1f14; } html.hrr-light .hover\:text-white:hover { color: #0f0b0d; } html.hrr-light .text-\[\#fbf7f8\] { color: var(--hrr-ink); } html.hrr-light .text-\[\#fbf7f8\]\/90 { color: #241c1fe6; } html.hrr-light .text-\[\#fbf7f8\]\/85 { color: #241c1fd9; } html.hrr-light .text-\[\#fbf7f8\]\/80 { color: #241c1fcc; } html.hrr-light .text-\[\#fbf7f8\]\/75 { color: #241c1fbf; } html.hrr-light .text-\[\#fbf7f8\]\/70 { color: #241c1fb3; } html.hrr-light .text-\[\#fbf7f8\]\/60 { color: #3a2f33; } html.hrr-light .text-\[\#fbf7f8\]\/50 { color: #55474b; } html.hrr-light .text-\[\#fbf7f8\]\/40 { color: #6b5c60; } html.hrr-light .text-\[\#110e10\] { color: #fff; } html.hrr-light .placeholder-white\/30::placeholder { color: #241c1f61; } /* Bright-on-dark neutrals jegulo light-e pore jay */ html.hrr-light .text-neutral-400 { color: #6b5c60; } html.hrr-light .text-neutral-500 { color: #55474b; } /* ---------- Selection ---------- */ html.hrr-light .selection\:text-white ::selection, html.hrr-light .selection\:text-white::selection { color: #fff; } html.hrr-light .selection\:text-\[\#110e10\] ::selection, html.hrr-light .selection\:text-\[\#110e10\]::selection { color: #110e10; } /* ---------- Glass panels ---------- */ html.hrr-light .glass-panel { background: #ffffffa6; border: 1px solid #241c1f14; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } html.hrr-light .glass-panel-heavy { background: #fffffff2; border: 1px solid #f7942133; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* ---------- Cards / shadows (dark mode-e kalo, light-e narom) ---------- */ html.hrr-light .card-3d:hover { border-color: #f794214d; box-shadow: 0 20px 30px -10px #241c1f1f, 0 0 40px -5px #f7942126; } html.hrr-light .shadow-2xl { --tw-shadow-color: #241c1f1f; } html.hrr-light .shadow-xl { --tw-shadow-color: #241c1f14; } html.hrr-light .shadow-lg { --tw-shadow-color: #241c1f14; } html.hrr-light .shadow-\[0_15px_40px_rgba\(0\,0\,0\,0\.92\)\] { --tw-shadow-color: #241c1f26; } html.hrr-light .shadow-\[0_25px_60px_rgba\(12\,10\,11\,0\.95\)\] { --tw-shadow-color: #241c1f26; } html.hrr-light .shadow-\[0_30px_60px_-15px_rgba\(17\,14\,16\,0\.9\)\] { --tw-shadow-color: #241c1f26; } /* ---------- Gradients ---------- */ html.hrr-light .from-\[\#110e10\] { --tw-gradient-from: var(--hrr-canvas); } html.hrr-light .from-\[\#fbf7f8\] { --tw-gradient-from: #241c1f; } html.hrr-light .to-\[\#fbf7f8\] { --tw-gradient-to: #241c1f; } html.hrr-light .to-\[\#544348\] { --tw-gradient-to: #6b5c60; } html.hrr-light .from-black\/70 { --tw-gradient-from: #241c1f8c; } html.hrr-light .from-white\/20 { --tw-gradient-from: #ffffff59; } html.hrr-light .text-gradient-secondary { background: linear-gradient(135deg, #241c1f 40%, #f79421); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.hrr-light .bg-gradient-plum { background: linear-gradient(135deg, #6b5c60, #8d7a80); } /* ---------- Scrollbar ---------- */ html.hrr-light ::-webkit-scrollbar-track { background: #efe8e2; } html.hrr-light ::-webkit-scrollbar-thumb { background: #b9a9ad; } /* ---------- Decorative light rays: light mode-e onek narom ---------- */ html.hrr-light .light-ray-up { opacity: .35; } /* ---------- Theme toggle button icon swap ---------- * Convention: je mode-e jabe sei icon dekhay. * Dark mode (default) -> sun icon (click korle light hobe) * Light mode -> moon icon (click korle dark hobe) */ .hrr-theme-toggle .hrr-icon-sun { display: inline-block; } .hrr-theme-toggle .hrr-icon-moon { display: none; } html.hrr-light .hrr-theme-toggle .hrr-icon-sun { display: none; } html.hrr-light .hrr-theme-toggle .hrr-icon-moon { display: inline-block; } .hrr-theme-toggle i { transition: transform .35s ease; } .hrr-theme-toggle:hover i { transform: rotate(25deg); } /* ---------- Credit badge in light mode ---------- */ html.hrr-light .hrr-credit-badge { background-color: #241c1f0a; } html.hrr-light .hrr-credit-name { color: #241c1fd9; } /* ---------- Blog toolbar / view counter (v2.1.0) ---------- */ html.hrr-light .hrr-select { background-color: #fff; border-color: #241c1f1f; color: var(--hrr-ink); } html.hrr-light .hrr-select option { background-color: #fff; color: var(--hrr-ink); } html.hrr-light .hrr-views { color: #6b5c60; } /* ------------------------------------------------------------------------- * v2.1.1 — Theme toggle button: PERFECT CIRCLE * ------------------------------------------------------------------------- * Age button-ta `display:block` + `p-2` chilo, tai height = 8 + line-height(24) * + 8 = 42px kintu width = 8 + icon(16) + 8 = 34px → khada (oval) shape. * Ekhon inline-flex + fixed 36x36 (pasher share button-er hubohu same size), * icon center-e — shob dik-er spacing ekdom shoman. * ---------------------------------------------------------------------- */ .hrr-theme-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0 !important; line-height: 1; box-sizing: border-box; flex: 0 0 auto; aspect-ratio: 1 / 1; border-radius: 9999px; overflow: hidden; } .hrr-theme-toggle i { display: block; width: 16px; height: 16px; font-size: 16px; line-height: 16px; text-align: center; } /* ------------------------------------------------------------------------- * v2.1.2 — Comments section (light mode) * ---------------------------------------------------------------------- */ html.hrr-light #hrr-comments .hrr-comment-item { background: #ffffff; border-color: var(--hrr-line, #241c1f1f); } html.hrr-light #hrr-comments .hrr-comment-author { color: var(--hrr-ink, #241c1f); } html.hrr-light #hrr-comments .hrr-comment-body { color: #4a3d41; } html.hrr-light #hrr-comments .hrr-cm-input { background: #ffffff; border-color: var(--hrr-line, #241c1f1f); color: var(--hrr-ink, #241c1f); } html.hrr-light #hrr-comments .hrr-cm-input::placeholder { color: #9a8b8f; } html.hrr-light #hrr-comments .hrr-cm-input:focus { border-color: #f79421; } html.hrr-light #hrr-comments label { color: #6b5c60; } /* ---------- v2.1.3: Sticky header (light mode) ---------- * Light mode-e purota kalo korle lekha ulta osposhto hoto. Tai ekhane bar-ta * safed theke ektu GAAR warm tone-e jay + shadow bare — depth boJha jay, * ar ink (#241c1f) lekha 100% porishkar thake. */ html.hrr-light.hrr-scroll-shade header.glass-panel { background-color: rgba(233, 224, 214, calc(.62 + .36 * var(--hrr-sp, 0))); -webkit-backdrop-filter: blur(calc(14px + 8px * var(--hrr-sp, 0))) saturate(130%); backdrop-filter: blur(calc(14px + 8px * var(--hrr-sp, 0))) saturate(130%); border-bottom-color: rgba(36, 28, 31, calc(.06 + .10 * var(--hrr-sp, 0))); box-shadow: 0 calc(4px * var(--hrr-sp, 0)) calc(18px * var(--hrr-sp, 0)) rgba(36, 28, 31, calc(.14 * var(--hrr-sp, 0))); text-shadow: none; } html.hrr-light.hrr-scroll-shade #desktop-navbar a:not(.text-\[\#f79421\]), html.hrr-light.hrr-scroll-shade header #logo-container span:first-child { color: var(--hrr-ink); } html.hrr-light.hrr-scroll-shade header #logo-container span:last-child { color: var(--hrr-muted); } /* ---------- v2.1.3: Home page latest-3 blog cards (light mode) ---------- */ html.hrr-light .hrr-hl-card { border-color: var(--hrr-line); background: var(--hrr-surface); } html.hrr-light .hrr-hl-card:hover { border-color: rgba(247, 148, 33, .40); box-shadow: 0 20px 30px -10px rgba(36, 28, 31, .14), 0 0 40px -5px rgba(247, 148, 33, .14); } html.hrr-light .hrr-hl-thumb { background: var(--hrr-canvas-2); border-bottom-color: var(--hrr-line); } html.hrr-light .hrr-hl-title { color: var(--hrr-ink); } html.hrr-light .hrr-hl-card:hover .hrr-hl-title { color: #c9740f; } html.hrr-light .hrr-hl-desc { color: var(--hrr-muted); } html.hrr-light .hrr-hl-date { color: var(--hrr-muted); } html.hrr-light .hrr-hl-more { border-top-color: var(--hrr-line); color: #c9740f; } html.hrr-light .hrr-hl-all { color: #c9740f; border-color: rgba(247, 148, 33, .45); } html.hrr-light .hrr-hl-all:hover { color: #fff; background: #e0870f; border-color: #e0870f; }