.theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="default"]::before{background:linear-gradient(90deg,#0b63ff,#36a2ff);} :root{ /* Palette */ --primary: #0b63ff; /* main brand blue */ --primary-strong: #084dcc; --primary-light: #36a2ff; --primary-16: rgba(11,99,255,0.16); --primary-08: rgba(11,99,255,0.08); --primary-04: rgba(11,99,255,0.04); --primary-02: rgba(11,99,255,0.02); --bg: #ffffff; --card-bg: #fafafa; --text: #0b0b0b; --muted: #575757; --muted-2: #9aa3b2; --accent: #ff8a00; --danger: #ff3b30; --danger-95: rgba(255,59,48,0.95); --withdrawal: rgba(255,99,71,0.92); /* shadows and overlays (themeable) */ --shadow-1: rgba(11,22,68,0.04); --shadow-2: rgba(11,22,68,0.06); --shadow-strong: rgba(3,12,35,0.45); --overlay: rgba(0,0,0,0.45); --muted-bg: rgba(0,0,0,0.06); --muted-bg-2: rgba(0,0,0,0.02); --placeholder: rgba(0,0,0,0.6); } /* Theme variants - override CSS variables via [data-theme] on */ [data-theme="sunset"]{ --primary: #ff6b6b; --primary-strong: #e14b4b; --primary-light: #ff9a8b; --primary-16: rgba(241,75,75,0.16); --primary-08: rgba(241,75,75,0.08); --primary-04: rgba(241,75,75,0.04); --primary-02: rgba(241,75,75,0.02); --bg: #fff8f6; --card-bg: #fff6f5; --text: #2b2b2b; --muted: #6b6b6b; --accent: #ff8a00; --danger: #ff3b30; --danger-95: rgba(255,59,48,0.95); --withdrawal: rgba(255,120,74,0.92); } [data-theme="forest"]{ --primary: #1b8a3e; --primary-strong: #157032; --primary-light: #5cd17d; --primary-16: rgba(27,138,62,0.16); --primary-08: rgba(27,138,62,0.08); --primary-04: rgba(27,138,62,0.04); --primary-02: rgba(27,138,62,0.02); --bg: #f6fbf6; --card-bg: #f8faf8; --text: #09210a; --muted: #4f6b56; --accent: #ffb86b; --danger: #d9534f; --danger-95: rgba(217,83,79,0.95); --withdrawal: rgba(255,180,110,0.92); } [data-theme="midnight"]{ --primary: #5cc0ff; --primary-strong: #39a9ff; --primary-light: #9be6ff; --primary-16: rgba(92,192,255,0.20); --primary-08: rgba(92,192,255,0.12); --primary-04: rgba(92,192,255,0.08); --primary-02: rgba(92,192,255,0.04); --bg: #071024; --card-bg: #0f3356; /* slightly lighter card surface for better contrast */ --text: #eaf8ff; /* brighten body text a touch */ --muted: #9fc6e8; /* slightly lighter muted text */ --accent: #ffd166; --danger: #ff6b6b; --danger-95: rgba(255,107,107,0.95); --withdrawal: rgba(255,160,120,0.92); --placeholder: rgba(234,248,255,0.6); --overlay: rgba(0,0,0,0.6); } /* Better input/select contrast for midnight (dark) theme */ [data-theme="midnight"] .inline-input, [data-theme="midnight"] .lang-select select, [data-theme="midnight"] select { color: var(--text); background: transparent; caret-color: var(--primary-light); } [data-theme="midnight"] .lang-select select { background: var(--card-bg); border-color: var(--primary-08); } [data-theme="midnight"] .inline-input::placeholder{ color: var(--placeholder); } *{box-sizing:border-box} body{ margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; } .skip-link{position:absolute;left:12px;top:8px;background:var(--card-bg);padding:8px 12px;border-radius:6px;border:1px solid var(--primary-04);z-index:200;transform:translateY(-8px);opacity:0;transition:opacity 180ms,transform 160ms} .skip-link:focus{opacity:1;transform:translateY(0);outline:none;box-shadow:0 6px 18px var(--primary-08)} .page{ max-width:1100px; margin:60px auto; padding:70px 56px; } /* Article page container (override page padding for reading) Removed: post pages now inherit the `.page` container so they match the homepage layout. */ /* Post title/meta use the generic `.post-title` and `.post-meta` rules below. */ /* Top navbar for switching major calculation modes */ .top-nav{display:flex;gap:12px;margin:18px 0 0 0} .main-tab{background:transparent;border:1px solid var(--primary-16);padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:800;color:var(--muted)} .main-tab.active{background:linear-gradient(90deg,var(--primary),var(--primary-light));color:white;border-color:transparent} .lang-select{position:absolute;right:56px;top:20px;display:flex;gap:10px;align-items:center} .lang-select select{padding:8px 10px;border-radius:8px;border:1px solid var(--primary-04);background:var(--bg);font-weight:700} .lang-select label{font-weight:700} .header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:10px} /* Header/top bar styles */ .site-brand .logo{font-weight:800;color:var(--text);text-decoration:none;font-size:18px} .site-brand .logo{font-size:20px} .site-brand .logo{display:inline-block; font-size:16px; opacity:0.95; white-space:nowrap; flex-shrink:0} .theme-picker{display:flex;gap:8px;align-items:center;margin-left:6px} .theme-picker.compact{gap:8px;margin-left:10px;position:relative;display:inline-flex;align-items:center} .theme-swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--primary-04);cursor:pointer;padding:0;box-shadow:0 2px 8px var(--shadow-2);display:inline-block} .theme-picker.compact .theme-swatch{width:18px;height:18px;border-width:1px;box-shadow:none} /* Compact picker: by default show only the active small swatch. When opened, show a vertical dropdown panel below. */ .theme-picker.compact{position:relative} .theme-picker.compact .theme-swatch{display:none} .theme-picker.compact .theme-swatch.visible{display:inline-block} /* when open, dropdown swatches are shown via .theme-dropdown rules; keep .active available for styling only */ .theme-picker.compact .theme-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;padding:2px 0;background:transparent;border:none;border-radius:0;box-shadow:none;z-index:1200;min-width:auto;} .theme-picker.compact.open .theme-dropdown{display:flex} .theme-picker.compact.open .theme-dropdown .theme-swatch{ display:flex; align-items:center; gap:8px; width:auto; height:28px; border-width:2px; box-shadow:0 6px 14px var(--shadow-2); margin:0; padding:0 8px; background:transparent; } .theme-picker.compact.open .theme-dropdown .theme-swatch::before{ content: ''; display:inline-block; width:18px; height:18px; border-radius:50%; margin-right:6px; background:inherit; border:1.5px solid var(--primary-04); } .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="system"]::before{background:linear-gradient(90deg,var(--muted-bg),var(--bg));border-style:dashed;} .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="default"]::before{background:linear-gradient(90deg,var(--primary),var(--primary-light));} .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="sunset"]::before{background:linear-gradient(90deg,#ff6b6b,#ff9a8b);} .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="forest"]::before{background:linear-gradient(90deg,#1b8a3e,#5cd17d);} .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="midnight"]::before{background:linear-gradient(90deg,#5cc0ff,#9be6ff);} /* Theme picker dropdown swatch design improvements */ .theme-picker.compact.open .theme-dropdown { gap: 12px; background: var(--card-bg); /* Ensure dropdown text uses the dropdown container's --text value rather than any --text values that may be defined on child .theme-swatch elements (which carry their own [data-theme] and can locally override variables). This keeps labels readable regardless of the swatch's theme. */ --dropdown-text: var(--text); box-shadow: 0 6px 20px rgba(2,6,23,0.18); border-radius: 14px; padding: 12px 8px; min-width: 160px; border: 1px solid rgba(0,0,0,0.06); } .theme-picker.compact.open .theme-dropdown .theme-swatch { display: flex; align-items: center; gap: 12px; width: auto; height: 32px; border: none; background: transparent; margin: 0; padding: 0 10px; cursor: pointer; transition: background 0.18s; border-radius: 8px; box-shadow: none; } /* Ensure the dropdown buttons themselves do not keep any background gradients defined on the generic .theme-swatch[data-theme] selectors. The color circle is implemented with ::before; labels should be plain text with theme-aware color for proper contrast. */ .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme] { background: transparent !important; background-image: none !important; color: var(--text) !important; } .theme-picker.compact.open .theme-dropdown .theme-swatch:hover, .theme-picker.compact.open .theme-dropdown .theme-swatch:focus { background: rgba(0,0,0,0.04); } .theme-picker.compact.open .theme-dropdown .theme-swatch::before { content: ''; display: inline-block; width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; background: inherit; border: 2px solid var(--primary-04); box-shadow: 0 1px 4px var(--shadow-2); } .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="system"]::before { background: linear-gradient(90deg,var(--muted-bg),var(--bg)); border-style: dashed; } .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="default"]::before { background: linear-gradient(90deg,#0b63ff,#36a2ff); } .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="sunset"]::before { background: linear-gradient(90deg,#ff6b6b,#ff9a8b); } .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="forest"]::before { background: linear-gradient(90deg,#1b8a3e,#5cd17d); } .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="midnight"]::before { background: linear-gradient(90deg,#5cc0ff,#9be6ff); } .theme-picker.compact.open .theme-dropdown .swatch-label { font-size: 16px; font-weight: 700; color: var(--dropdown-text) !important; margin-left: 0; letter-spacing: 0.01em; line-height: 1; text-shadow: none; } /* make sure label color is enforced for accessibility */ .theme-picker.compact.open .theme-dropdown .theme-swatch .swatch-label{ color: var(--dropdown-text) !important; } /* Slightly tweak label color in dark theme for improved contrast */ [data-theme="midnight"] .theme-picker.compact.open .theme-dropdown .swatch-label{ color: var(--text); } /* Make the 'Karanlık' (midnight) option label use a blackish color when the page is NOT in midnight theme (so it reads as a 'dark' choice on light backgrounds). When the page itself is in [data-theme="midnight"] the dropdown's --dropdown-text will be light and this rule will not apply. */ :not([data-theme="midnight"]) .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="midnight"] .swatch-label { color: #0b0b0b !important; } /* Ensure the 'Karanlık' swatch label is readable when the page itself is in midnight (dark) theme — override any previous rules forcing a dark label. */ [data-theme="midnight"] .theme-picker.compact.open .theme-dropdown .theme-swatch[data-theme="midnight"] .swatch-label { color: var(--text) !important; } /* Visible compact swatch: show a small color circle that matches the currently applied theme. Update ThemeSwatches JS adds `.theme-` to the visible swatch button so these rules take effect. */ .theme-picker.compact .theme-swatch.visible{ position: relative; width: 22px; height: 22px; padding: 0; border: none; background: transparent; } .theme-picker.compact .theme-swatch.visible::before{ content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%; margin: 0; vertical-align: middle; border: 1.5px solid var(--primary-04); box-shadow: 0 1px 4px var(--shadow-2); background: linear-gradient(90deg,var(--primary),var(--primary-light)); } .theme-picker.compact .theme-swatch.visible.theme-default::before{ background: linear-gradient(90deg,var(--primary),var(--primary-light)); } .theme-picker.compact .theme-swatch.visible.theme-sunset::before{ background: linear-gradient(90deg,#ff6b6b,#ff9a8b); } .theme-picker.compact .theme-swatch.visible.theme-forest::before{ background: linear-gradient(90deg,#1b8a3e,#5cd17d); } .theme-picker.compact .theme-swatch.visible.theme-midnight::before{ background: linear-gradient(90deg,#5cc0ff,#9be6ff); } .theme-picker.compact .theme-swatch.visible.theme-system::before{ background: linear-gradient(90deg,var(--muted-bg),var(--bg)); border-style: dashed; } /* Constrain header-top to page width so controls align with content */ .header-top{max-width:1100px;margin:0 auto;padding:12px 20px;align-items:center} /* group for left side items (brand + nav) */ .header-left{display:flex;gap:18px;align-items:center} /* Simple main nav for header */ .main-nav{display:flex;gap:18px;align-items:center} .main-nav a{color:var(--muted);font-weight:700;text-decoration:none} .main-nav a:hover{color:var(--primary)} /* active nav link */ .main-nav a.active{color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary);padding-bottom:6px} /* Nav toggle (hamburger) for small screens */ .nav-toggle{display:none;background:transparent;border:1px solid var(--primary-04);padding:8px;border-radius:8px;cursor:pointer} .nav-toggle .hamburger{display:inline-block;width:18px;height:2px;background:var(--text);position:relative} .nav-toggle .hamburger::before,.nav-toggle .hamburger::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--text)} .nav-toggle .hamburger::before{top:-6px} .nav-toggle .hamburger::after{top:6px} /* When nav is opened on small screens, show stacked nav */ body.nav-open .main-nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:64px;background:var(--card-bg);padding:12px 18px;border-top:1px solid var(--primary-04);z-index:999;box-shadow:0 12px 36px var(--shadow-strong)} body.nav-open .main-nav a{padding:8px 6px;border-radius:6px} @media(max-width:720px){ .nav-toggle{display:inline-flex;align-items:center;justify-content:center} .header-top{position:relative} /* ensure nav-hidden by default on small screens (will be shown when body.nav-open) */ .main-nav{display:none} } @media(max-width:720px){ .main-nav{display:none} } /* Make lang-select position static now that it's inside header-top */ .lang-select{position:static} /* Fix: ensure header nav links don't render a pill/filled background on pages where the header layout differs (e.g. `blog.html`). Keep overlay/mobile behavior (body.nav-open) intact. */ body:not(.nav-open) .main-nav a{ background: transparent !important; box-shadow: none !important; padding: 0 6px !important; border-radius: 0 !important; color: var(--muted) !important; } /* Re-apply active underline for active link when not nav-open */ body:not(.nav-open) .main-nav a.active{ color: var(--primary) !important; box-shadow: inset 0 -2px 0 var(--primary) !important; padding-bottom: 6px !important; } /* Remove unexpected white borders/outlines that can appear on some pages (e.g. blog pages where header layout differs). Ensure nav links are visually flat and only show an underline for the active link. */ .header-top .main-nav a, .header-top .main-nav a:link, .header-top .main-nav a:visited{ background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; padding: 0 6px !important; color: var(--muted) !important; } .header-top .main-nav a:focus{ box-shadow: none !important; outline: none !important; } .header-top .main-nav a.active{ background: transparent !important; box-shadow: inset 0 -2px 0 var(--primary) !important; padding-bottom:6px !important; } .sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .hero h1{ font-size:56px; font-weight:900; margin:6px 0 12px 0; letter-spacing:-0.6px; } .lead{ max-width:920px; color:var(--muted); font-size:18px; line-height:2.2; margin:0 0 40px 0; } .hero{padding-bottom:8px;margin-bottom:8px} .story h2{ font-size:48px; font-weight:900; margin:40px 0 30px 0; } /* Keep section title and inline currency select on the same row */ .story h2{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; white-space:nowrap; } .story-form .line{ font-size:20px; line-height:2.2; margin:8px 0; } .inline-input{ display:inline-block; border:0; border-bottom:3px solid var(--primary); background:transparent; font-weight:700; font-size:20px; padding:6px 8px; margin:0 6px; outline:none; text-align:center; color:inherit; } .inline-input.small{width:72px} .inline-input.med{width:160px} /* Inline select styling - make compound-frequency feel like the inline inputs */ select.inline-input{ -webkit-appearance:none; -moz-appearance:none; appearance:none; /* match inline inputs: underline style, but let width size to content */ padding:6px 34px 6px 8px; border:0; border-bottom:3px solid var(--primary); background:transparent; box-shadow:none; text-align:center; min-width:0; width:auto; white-space:nowrap; /* prevent option text wrapping */ line-height:1.2; margin:0 8px; border-radius:4px; padding-right:40px; /* reserve space for the custom arrow */ vertical-align:middle; } select.inline-input:focus{outline:none;box-shadow:0 6px 20px var(--primary-04);border-bottom-color:var(--primary-strong)} select.inline-input::-ms-expand{display:none} /* Theme-aware select arrow: use `currentColor` inside SVG so arrow follows `color`. `--select-arrow-color` controls arrow (and select text) color; override per-theme if desired. */ select.inline-input{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;background-size:10px;color:var(--select-arrow-color, var(--primary));} /* Make sure select uses readable colors in midnight theme */ [data-theme="midnight"] select.inline-input{ background:var(--card-bg); color:var(--text); border-bottom:3px solid var(--primary); --select-arrow-color: var(--text); } /* override small preset width for selects so long labels fit */ select.inline-input.small{ width:auto; min-width:72px; } .inline-input:focus{box-shadow:none} .inline-input:focus-visible, select.inline-input:focus-visible{outline:none;box-shadow:0 8px 24px var(--primary-08);border-bottom-color:var(--primary-strong);border-radius:6px} /* Underline wrapper used for phrases like "her ay / her yıl" */ .underline-term{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--primary); display: inline-flex; align-items: center; gap: 6px; } /* Call-to-action button */ .cta-btn{display:inline-block;background:linear-gradient(90deg,var(--primary),var(--primary-light));color:white;padding:12px 18px;border-radius:10px;border:0;font-weight:800;cursor:pointer;box-shadow:0 8px 24px var(--primary-08);transition:transform 160ms ease,box-shadow 160ms ease} .cta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--primary-16)} .cta-btn:focus{outline:none;box-shadow:0 0 0 4px var(--primary-08)} /* animate numerical values gently */ .value{transition:color 220ms ease,transform 420ms cubic-bezier(.2,.9,.25,1)} .progress-fill{transition:width 800ms cubic-bezier(.2,.9,.25,1)} /* Accessible focus for interactive elements */ a:focus, button:focus, .post-card:focus{outline:none;box-shadow:0 0 0 4px var(--primary-04);border-radius:8px} /* (mobile nav override removed) */ .post-link{display:block;color:inherit} .post-link:focus .post-card, .post-card:focus{box-shadow:0 12px 30px var(--primary-04);transform:translateY(-3px)} /* Increase touch targets slightly for mobile */ @media (max-width:480px){ .inline-input{padding:8px 10px} .main-tab{padding:12px 14px} } /* On small screens reduce select padding and font-size so it fits beside the title */ @media (max-width:480px){ .story h2{font-size:28px;margin:18px 0 14px 0} .currency-inline{font-size:14px;padding:4px 8px;min-width:64px} } /* Mobile select fixes: use native appearance and avoid clipping/overflow issues */ @media (max-width:480px){ .story h2{overflow:visible} .currency-inline{position:relative;z-index:1201; -webkit-appearance:menulist-button; appearance:menulist-button; background-image:none;padding-right:10px} } /* (mobile modal picker removed to preserve native select styling) */ .info{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; border:2px solid var(--muted); font-size:12px; line-height:1; margin-left:8px; margin-right:0; background:transparent; color:var(--muted); box-sizing:border-box; } /* Ensure the info circle blends with tab buttons */ .tab-btn .info{ border-color: rgba(0,0,0,0.08); color: var(--muted); } .tab-btn.active .info{ border-color: rgba(255,255,255,0.28); color: white; background: rgba(255,255,255,0.06); } /* Gold price chips (theme aware) */ .gold-price-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:13px; background:var(--primary-16); color:var(--text); border:1px solid var(--primary-08); margin:0; transition:background 180ms ease,color 180ms ease,transform 120ms ease,border-color 180ms ease; } .gold-price-chip:hover{ background:var(--primary-08); transform:translateY(-2px); } .gold-price-chip:active{ transform:translateY(0); } .underline-blue{ color:var(--primary); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; font-weight:700; } /* Inline currency select shown next to section titles */ .currency-inline-wrap{display:inline-block;margin-left:12px;vertical-align:middle} .currency-inline{padding:6px 10px;border-bottom:3px solid var(--primary);background:transparent;font-weight:700;font-size:18px;min-width:80px;vertical-align:middle} .currency-inline:focus{box-shadow:0 6px 20px var(--primary-04);border-bottom-color:var(--primary-strong)} .results{margin-top:36px} .results-card{ border-radius:10px; padding:20px 22px; background:var(--card-bg); box-shadow:0 2px 12px var(--shadow-1); } .results-row{display:flex;gap:24px;align-items:center;margin-bottom:18px} .results-col{flex:1} .label{color:var(--muted);font-size:14px} .value{font-size:20px;font-weight:800;margin-top:6px} .value small{font-size:13px;font-weight:700} .gap-positive{color:var(--primary-strong)} .gap-negative{color:var(--danger)} .progress-wrap{margin-top:6px} .progress-bar{height:18px;background:linear-gradient(180deg, var(--primary-02), var(--primary-02));border-radius:12px;overflow:hidden} .progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));width:0%;transition:width 600ms cubic-bezier(.2,.9,.25,1)} .progress-meta{margin-top:8px;font-weight:700;color:var(--muted)} .tabs{display:flex;gap:8px;margin-bottom:12px} .tab-btn{background:transparent;border:1px solid var(--primary-04);padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:700;color:var(--muted)} .tab-btn.active{background:linear-gradient(90deg,var(--primary),var(--primary-light));color:white;border-color:transparent} /* frequency button style (used in Investment recurring frequency) */ .freq-btn{background:transparent;border:1px solid var(--primary-04);padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:700;color:var(--muted);margin-right:12px} .freq-btn.active{background:linear-gradient(90deg,var(--primary),var(--primary-light));color:white;border-color:transparent} .tab-contents{margin-top:12px} .tab-content{padding:8px 0} /* Life controls - make them blend with results card */ .life-controls{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px 14px; margin:12px 0 0 0; border-radius:8px; background:linear-gradient(180deg, var(--primary-02), transparent); border:1px solid var(--primary-04); } .life-controls .label{margin-right:8px;font-weight:700} .life-controls input.inline-input{margin-right:12px} /* Tooltip */ .tooltip{ position:fixed; background:var(--card-bg); color:var(--text); padding:10px 12px; border-radius:8px; font-size:13px; max-width:320px; box-shadow:0 6px 18px var(--shadow-strong); border:1px solid var(--primary-04); z-index:1200; line-height:1.3; pointer-events:none; opacity:0; transform:translateY(6px); transition:opacity 180ms ease, transform 180ms ease; } .tooltip.show{opacity:1;transform:translateY(0);pointer-events:auto} .info{cursor:help} .charts{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px} .chart-item{background:var(--card-bg);border-radius:8px;padding:12px;border:1px solid var(--primary-04)} .chart-title{margin:0 0 8px 0;font-size:16px;font-weight:800} /* Ensure canvases are responsive and match page look */ .chart-item{box-shadow:0 6px 18px var(--shadow-1)} .chart-item canvas{width:100% !important; height:320px !important; display:block} .chart-item .chart-title{color:var(--muted); font-size:14px; font-weight:800} /* Blog post list styles (refined) */ .blog-list{ display:grid; /* row-by-row listing: single column so posts render one per row */ grid-template-columns:1fr; gap:18px; } .post-card{ display:flex; gap:16px; align-items:flex-start; padding:18px; border-radius:12px; background:var(--card-bg); border:1px solid rgba(0,0,0,0.06); box-shadow:0 8px 20px var(--shadow-1); cursor:pointer; transition:transform 180ms ease,box-shadow 180ms ease; } .post-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(2,6,23,0.12)} .post-card .thumb{ width:120px; height:76px; border-radius:10px; flex:0 0 120px; background:var(--muted-bg); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.9); font-weight:800; background-size:cover; background-position:center; } .post-card .thumb > div{pointer-events:none} .post-card .thumb[role="img"] > div{display:none} .post-card .post-body{flex:1;min-width:0} .post-title{font-weight:800;font-size:20px;margin:0 0 6px 0;color:var(--text)} .post-meta{font-size:13px;color:rgba(11,11,11,0.55);margin-bottom:8px;display:flex;gap:10px;align-items:center} .post-excerpt{color:rgba(11,11,11,0.75);line-height:1.6;margin:6px 0 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-clamp:3} .reading-time{background:var(--muted-bg);padding:4px 8px;border-radius:999px;font-size:12px;color:var(--muted)} /* Desktop layout: use multi-column grid and larger thumbnails */ @media (min-width:900px) { /* Keep a single-column flow on larger screens, but scale card visuals */ .blog-list{grid-template-columns:1fr} .post-card{padding:20px} .post-card .thumb{ width:140px; height:88px; flex:0 0 140px; border-radius:12px; } .post-title{font-size:20px} } @media (min-width:1400px){ /* Still single column; increase thumbnail for very large viewports */ .blog-list{grid-template-columns:1fr} .post-card .thumb{width:160px;height:96px;flex:0 0 160px} .post-card{padding:22px} } /* make blog cards stack on small screens and reduce thumb size */ @media(max-width:720px){ .post-card{flex-direction:row;gap:12px} .post-card .thumb{width:72px;height:52px;flex:0 0 72px} } @media(max-width:480px){ .post-card{flex-direction:column} .post-card .thumb{width:100%;height:140px;flex:0 0 auto} } /* Modal for full post */ .post-modal{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:1400;padding:20px} .post-modal .modal-card{max-width:900px;width:100%;max-height:90vh;overflow:auto;background:var(--bg);padding:20px;border-radius:10px;border:1px solid var(--primary-04)} .post-modal .modal-close{position:absolute;right:22px;top:18px;background:transparent;border:0;font-weight:800;font-size:18px;cursor:pointer} .post-modal .modal-title{font-size:22px;margin:0 0 8px 0} .post-modal .modal-meta{font-size:13px;color:var(--muted);margin-bottom:12px} .post-modal .modal-body{line-height:1.8;color:var(--text)} /* Callout block used inside blog posts */ .callout{padding:12px;border-left:4px solid var(--primary);background:var(--primary-04);border-radius:6px;margin:12px 0} /* Post content formatting */ .post-content p{margin:0 0 12px 0} .post-content h3{margin:14px 0 8px 0} .post-content ul{margin:8px 0 12px 20px} .post-content blockquote{margin:10px 0;padding:10px 12px;border-left:4px solid var(--muted);background:var(--muted-bg-2);color:var(--muted)} /* Article / Post reader improvements */ /* `.post-page` layout removed so posts inherit `.page` container rules. */ .post-hero{display:block;margin:14px 0 20px 0;border-radius:10px;overflow:hidden;border:0;box-shadow:0 6px 18px var(--shadow-1);} .post-hero img.post-hero-img{width:100%;height:320px;display:block;object-fit:cover} .post-title{font-size:36px;line-height:1.05;margin:12px 0} .post-meta{font-size:14px;color:var(--muted);margin-bottom:18px} .post-content{font-size:18px;line-height:1.9;color:var(--text);margin-top:6px} .post-content h2, .post-content h3{color:var(--text);margin-top:20px} .post-content figure img{max-width:100%;height:auto;border-radius:8px} .post-content pre{background:var(--card-bg);padding:12px;border-radius:8px;overflow:auto;border:1px solid var(--primary-04)} .post-content code{background:var(--muted-bg-2);padding:2px 6px;border-radius:4px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace} @media (max-width:720px){ .post-title{font-size:28px} .post-content{font-size:17px} } /* back link styling for posts */ .post-back{display:inline-block;color:var(--primary);margin-bottom:12px;font-weight:700} .post-back:focus{outline:none;box-shadow:0 6px 16px var(--primary-08);border-radius:6px} /* Reusable centered container for page sub-sections */ .container{max-width:1100px;margin:0 auto;padding:0 24px;box-sizing:border-box} /* Blog listing header and search styling (use shared .container) */ .blog-header{margin:8px 0} .blog-search{margin:24px 0} .blog-search-input{width:100%;padding:12px 16px;border:1px solid var(--muted);border-radius:8px;box-sizing:border-box;margin-bottom:18px;font-size:16px} /* Make the blog search area span the full viewport width (keeping padding) so the search input can stretch beyond the content max-width. This only applies to the blog listing search; other uses of `.container` remain constrained. */ .container.blog-search{max-width:none;width:100%;margin:24px 0;padding:0 24px} /* subtle card header */ .chart-item::before{content:'';display:block;height:4px;border-top-left-radius:8px;border-top-right-radius:8px;background:linear-gradient(90deg,var(--primary),var(--primary-light));margin:-12px -12px 8px -12px} /* small responsive tweak: two columns on wider screens */ @media(min-width:1100px){ .charts{grid-template-columns:1fr 1fr} } @media(min-width:900px){ .charts{grid-template-columns:1fr} } @media (max-width:720px){ .page{padding:36px} .hero h1{font-size:40px} .story h2{font-size:30px} .inline-input{font-size:17px} /* Slightly more breathing room for mobile cards and controls */ .results-card{padding:24px 20px} .chart-item{padding:14px} .life-controls{padding:10px} /* Improve readability by increasing line-height on medium-small screens */ .lead{line-height:2.3} .story-form .line{line-height:2.3} } /* Additional small-screen tweaks for better mobile UX */ @media (max-width:480px){ .page{padding:24px; margin:28px auto;} .hero h1{font-size:32px; margin-bottom:16px} .lead{font-size:16px; line-height:2.3} .story h2{font-size:24px} .story-form .line{font-size:17px; line-height:2.3} /* Add extra padding to cards and charts on very small screens */ .results-card{padding:22px 18px} .chart-item{padding:14px} .life-controls{padding:10px} /* Inputs smaller and tighter */ .inline-input{font-size:15px;padding:4px 6px;border-bottom-width:2px} .inline-input.small{width:56px} .inline-input.med{width:120px} select.inline-input{padding-right:34px} /* Make result columns stack vertically for small screens */ .results-row{flex-direction:column;align-items:stretch} .results-col{width:100%;margin-bottom:12px} /* Tabs and nav compact */ .top-nav{gap:8px} .main-tab{padding:8px 10px;font-size:14px} .tabs{gap:6px} .tab-btn{padding:6px 8px;font-size:14px} /* Charts: reduce heights to avoid excessive scrolling */ .chart-item canvas{height:220px !important} .chart-item .chart-title{font-size:13px} /* Life controls & story spacing */ .life-controls{padding:8px} .story-form .line{margin:6px 0} } /* Post reading styles */ .post-content{font-size:18px;line-height:1.9;color:var(--text);max-width:calc(1100px - 112px);margin-top:6px;margin-left:auto;margin-right:auto} .post-content img{max-width:100%;height:auto;border-radius:8px} /* Align hero image and callouts with the header/content column by constraining them to the page inner width (page max-width minus horizontal padding) and centering. This keeps paragraph text constrained while the hero and callouts visually line up with the header content. */ .post-hero, .post-content .callout{ max-width: calc(1100px - 112px); /* page max-width (1100) minus 2*56px horizontal padding */ margin-left: auto; margin-right: auto; border-radius: 10px; } .post-content .callout{padding:12px 20px} @media (max-width:720px){ .post-content{max-width:calc(100% - 72px)} .post-hero, .post-content .callout{ max-width: calc(100% - 72px); /* match reduced page padding at this breakpoint */ } } /* Ensure listing titles stay compact and links don't add heavy underlines The global `.post-title` rule (used for full post pages) is larger and appears later in this file; use a scoped selector with higher specificity to override it for the blog listing cards. */ .blog-list .post-link, .blog-list .post-link:focus, .blog-list .post-link:hover{ text-decoration: none; color: inherit; } .blog-list .post-title{ font-size:18px !important; /* enforce compact title for cards */ font-weight:700 !important; line-height:1.05 !important; margin:0 0 8px 0; text-decoration: none; word-break:break-word; overflow-wrap:break-word; } /* Reduce the number of visible lines for very wide screens so cards stay tidy */ @media (min-width:1100px){ .blog-list .post-excerpt{ -webkit-line-clamp:2; line-clamp:2 } } @media (max-width:480px){ .post-content{max-width:calc(100% - 48px)} .post-hero, .post-content .callout{ max-width: calc(100% - 48px); border-radius:8px; } .post-content .callout{padding:10px} } .callout strong{font-weight:800} /* Search input for blog listing */ .blog-search{max-width:900px;margin:12px auto;padding:0 24px} #blogSearch{ width:100%; padding:12px 16px; border-radius:10px; border:1px solid var(--primary-04); background:var(--card-bg); color:var(--text); font-size:16px; box-shadow:0 6px 18px var(--shadow-1); transition:box-shadow 160ms ease, border-color 160ms ease, transform 120ms ease; } #blogSearch::placeholder{color:var(--muted-2)} #blogSearch:focus{outline:none;border-color:var(--primary-strong);box-shadow:0 12px 36px var(--primary-08);transform:translateY(-1px)} @media (max-width:720px){ #blogSearch{padding:10px 12px;font-size:15px} } /* Disclaimer block shown at the bottom of every post */ .post-disclaimer{ max-width: calc(1100px - 112px); margin: 28px auto 0 auto; padding: 14px 18px; border-left: 4px solid var(--primary-04); background: var(--muted-bg-2); color: var(--muted); font-size: 14px; line-height: 1.6; border-radius: 8px; } @media (max-width:720px){ .post-disclaimer{ max-width: calc(100% - 72px); font-size:13px } }