/* ============================================================ OptiEntry — Quiet Premium UI A calm, content-first system. Translucency is reserved for the floating controls (search + theme toggle); all content rests on solid, grounded surfaces. Class names & IDs are unchanged from the markup so app.js keeps working untouched. ============================================================ */ :root{ /* one confident accent (system blue, echoing the mark's cool side) + functional signal colours. Nothing else is allowed to be saturated. */ --accent:#0a84ff; --accent2:#5e5ce6; --accent3:#7C5CFF; --green:#16a34a; --red:#e11d48; --amber:#d97706; --mono:'JetBrains Mono','Courier New',monospace; /* surfaces / text (light) */ --bg:#f4f5f7; --fg:#0c1322; --fg2:#48526a; --fg3:#8a93a8; --surface:rgba(255,255,255,.5); --line:rgba(13,18,32,.09); /* solid content surfaces — cards rest on these, not on glass */ --card:#ffffff; --card-2:#f5f6f8; /* translucent chrome — reserved for floating controls only */ --glass:rgba(255,255,255,.62); --brd:rgba(255,255,255,.7); --hi:rgba(255,255,255,.9); --shadow:0 1px 2px rgba(16,24,40,.05),0 14px 34px -16px rgba(16,24,40,.16); --blur:saturate(180%) blur(20px); --card-accent:var(--accent); color-scheme:light dark; } /* ---- dark palette (system + explicit) ---- */ @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#0a0b0f; --fg:#eef1f8; --fg2:#9aa3b8; --fg3:#838daa; --surface:rgba(255,255,255,.05); --line:rgba(255,255,255,.10); --card:#16181f; --card-2:#1e212a; --glass:rgba(28,32,46,.55); --brd:rgba(255,255,255,.12); --hi:rgba(255,255,255,.14); --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -18px rgba(0,0,0,.6); --green:#34d399; --red:#fb7185; --amber:#fbbf24; --accent:#0a84ff; }} :root[data-theme="dark"]{ --bg:#0a0b0f; --fg:#eef1f8; --fg2:#9aa3b8; --fg3:#838daa; --surface:rgba(255,255,255,.05); --line:rgba(255,255,255,.10); --card:#16181f; --card-2:#1e212a; --glass:rgba(28,32,46,.55); --brd:rgba(255,255,255,.12); --hi:rgba(255,255,255,.14); --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -18px rgba(0,0,0,.6); --green:#34d399; --red:#fb7185; --amber:#fbbf24; --accent:#0a84ff; } :root[data-theme="light"]{ --bg:#f4f5f7; --fg:#0c1322; --fg2:#48526a; --fg3:#8a93a8; --surface:rgba(255,255,255,.5); --line:rgba(13,18,32,.09); --card:#ffffff; --card-2:#f5f6f8; --glass:rgba(255,255,255,.62); --brd:rgba(255,255,255,.7); --hi:rgba(255,255,255,.9); --shadow:0 1px 2px rgba(16,24,40,.05),0 14px 34px -16px rgba(16,24,40,.16); --green:#16a34a; --red:#e11d48; --amber:#d97706; --accent:#0a84ff; } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} /* translucent chrome — the only elements that float as glass */ #inp,.dd,.theme-btn{ background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--brd); box-shadow:var(--shadow), inset 0 1px 0 var(--hi); } /* solid content surfaces — grounded, calm, the page's substance */ .s-err,.bsh-block,.hc-card,.plan,.bt,.ch-wrap{ background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); } /* While the theme is switching we drop backdrop-filter for one frame so WebKit discards stale frosted layers and re-rasterises them against the new theme (see repaintGlass() in app.js). Only the glass-chrome elements use backdrop-filter now, so only they need this. */ :root.theme-switching #inp, :root.theme-switching .dd, :root.theme-switching .theme-btn{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } /* ---- base + a single, quiet, static ground ---- */ /* Paint the root canvas with the theme background. Without this the canvas is transparent, so the browser falls back to its UA canvas colour — which, under `color-scheme:light dark`, is BLACK when the OS is in dark mode even though the site is forced light. Any sliver the body doesn't cover (iOS rubber-band scroll, sub-pixel rounding) then flashes as a black strip down the edge. Painting html + clipping its overflow removes that for good. */ html{background:var(--bg); overflow-x:hidden} body{ font-family:'Inter',sans-serif; background:var(--bg); color:var(--fg); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; min-height:100dvh; width:100%; position:relative; overflow-x:hidden; } /* One faint, motionless wash of the accent at the very top — a whisper of brand warmth, not a lava lamp. No animation, no competing hues. */ body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(130vmax 72vmax at 50% -14%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 62%); opacity:.7; } button{font-family:inherit;cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent} input{font-family:inherit;-webkit-tap-highlight-color:transparent} /* LAYOUT */ /* Padding folds the notch/home-indicator safe-area insets into the gutters via max(), so content never slides under a notch in landscape or the iOS home bar — while still using the comfortable fluid gutters on every other device. */ .wrap{max-width:680px;margin:0 auto; padding-top:max(clamp(28px,6vw,72px),env(safe-area-inset-top)); padding-right:max(clamp(16px,4vw,32px),env(safe-area-inset-right)); padding-bottom:max(clamp(48px,8vw,96px),env(safe-area-inset-bottom)); padding-left:max(clamp(16px,4vw,32px),env(safe-area-inset-left))} /* HEADER / LOGO */ header{margin-bottom:clamp(28px,6vw,52px)} .logo-row{display:flex;align-items:center;gap:12px;margin-bottom:8px} .logo-icon{width:clamp(40px,6vw,46px);height:clamp(40px,6vw,46px);flex-shrink:0;filter:drop-shadow(0 6px 16px rgba(8,12,26,.28))} /* one colour, one weight — the mark carries the cool/warm duality, not the type */ .logo-text{font-size:clamp(19px,3.8vw,27px);font-weight:800;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;color:var(--fg)} .logo-opti,.logo-entry{color:var(--fg)} .logo-tagline{font-size:clamp(9px,1.8vw,11px);color:var(--fg3);letter-spacing:.1em;text-transform:uppercase;font-weight:600;font-family:var(--mono);margin-bottom:6px} .sub{font-size:clamp(12.5px,2vw,14px);color:var(--fg2);line-height:1.6;max-width:46ch} /* SEARCH */ .search-zone{position:relative;margin-bottom:clamp(28px,6vw,52px)} .search-row{display:flex;gap:10px} #inp{flex:1;height:52px;padding:0 18px;border-radius:14px;color:var(--fg);font-size:clamp(13px,2.5vw,14.5px);outline:none;transition:border-color .2s,box-shadow .2s;min-width:0} #inp::placeholder{color:var(--fg3)} #inp:focus{border-color:color-mix(in srgb,var(--accent) 65%,transparent);box-shadow:var(--shadow),inset 0 1px 0 var(--hi),0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)} .btn{height:52px;padding:0 clamp(18px,3.5vw,26px);border-radius:14px;color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;flex-shrink:0;touch-action:manipulation; background:var(--accent); box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent); transition:transform .18s,filter .18s,box-shadow .18s} .btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 26px -10px color-mix(in srgb,var(--accent) 75%,transparent)} .btn:active{transform:translateY(0);filter:brightness(.97)} .search-note{font-size:11px;color:var(--fg3);margin-top:10px;letter-spacing:.01em} /* DROPDOWN */ .dd{position:absolute;top:60px;left:0;right:0;border-radius:14px;z-index:100;display:none;max-height:320px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:5px} .dd-item{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border-radius:10px;cursor:pointer;font-size:13px;min-height:48px;touch-action:manipulation;transition:background .15s} .dd-item:hover,.dd-item:focus{background:color-mix(in srgb,var(--accent) 12%,transparent);outline:none} .dd-left{display:flex;align-items:center;gap:8px;flex-shrink:0} .dd-sym{font-weight:700;font-family:var(--mono);font-size:12px;letter-spacing:.04em} .dd-exch{font-size:9px;color:var(--fg3);padding:2px 6px;border:1px solid var(--line);border-radius:5px} .dd-name{color:var(--fg3);font-size:12px;text-align:right;flex:1;padding-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* STATES */ .s-load{display:none;font-size:13px;color:var(--fg2);margin-bottom:32px;line-height:2.2} .s-load-detail{font-size:11px;color:var(--fg3);opacity:.7;display:block;margin-top:2px} .s-err{display:none;font-size:13px;color:var(--red);padding:16px 18px;border-radius:14px;border-color:color-mix(in srgb,var(--red) 30%,var(--line));background:color-mix(in srgb,var(--red) 6%,var(--card));margin-bottom:24px;line-height:1.7} .pulse::after{content:'...';animation:pls 1.2s steps(4,end) infinite} @keyframes pls{0%,20%{content:'.'}40%{content:'..'}60%,100%{content:'...'}} /* RESULT */ #result{display:none} /* STOCK TOP */ .top{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:clamp(14px,3vw,20px);border-bottom:1px solid var(--line);margin-bottom:clamp(20px,4vw,30px);gap:12px;flex-wrap:wrap} .t-sym{font-size:11px;font-weight:700;font-family:var(--mono);letter-spacing:.07em;color:var(--fg3);margin-bottom:4px} .t-name{font-size:clamp(14px,3.5vw,19px);font-weight:600;color:var(--fg);max-width:clamp(160px,50vw,400px);line-height:1.3} .t-right{text-align:right;flex-shrink:0} .t-price{font-size:clamp(26px,6vw,38px);font-weight:300;font-family:var(--mono);letter-spacing:-.03em} .t-chg{font-size:12px;font-family:var(--mono);margin-top:3px} .up{color:var(--green)}.dn{color:var(--red)} /* BIG BUY / SELL / HOLD — the page's hero, grounded on a solid card */ .bsh-block{border-radius:24px;padding:clamp(30px,5.5vw,48px) clamp(20px,4vw,38px);margin-bottom:clamp(22px,4vw,34px);text-align:center;position:relative;overflow:hidden;transition:box-shadow .4s,border-color .4s} .bsh-block.buy{--bsh-col:var(--green);border-color:color-mix(in srgb,var(--green) 38%,var(--line));background:color-mix(in srgb,var(--green) 5%,var(--card));box-shadow:var(--shadow),0 0 56px -30px var(--green)} .bsh-block.hold{--bsh-col:var(--amber);border-color:color-mix(in srgb,var(--amber) 38%,var(--line));background:color-mix(in srgb,var(--amber) 5%,var(--card));box-shadow:var(--shadow),0 0 56px -30px var(--amber)} .bsh-block.sell{--bsh-col:var(--red);border-color:color-mix(in srgb,var(--red) 38%,var(--line));background:color-mix(in srgb,var(--red) 5%,var(--card));box-shadow:var(--shadow),0 0 56px -30px var(--red)} /* The verdict lands as one confident word (spring-scale + fade, driven by flipVerdict() in app.js) — a decision, not a slot-machine spin. */ .bsh-word{font-size:clamp(72px,17vw,112px);font-weight:900;letter-spacing:-.05em;line-height:1;margin-bottom:10px;min-height:1em; color:var(--bsh-col,var(--fg)); text-shadow:0 0 .55em color-mix(in srgb,var(--bsh-col,var(--fg)) 20%,transparent); will-change:transform,opacity} .bsh-count{font-size:clamp(11px,2vw,13px);font-weight:600;letter-spacing:.05em;opacity:.7;margin-bottom:12px;font-family:var(--mono)} .bsh-reason{font-size:clamp(13px,2.5vw,14.5px);color:var(--fg2);line-height:1.78;max-width:480px;margin:0 auto} /* SCORE BAR */ .sc-row{display:flex;align-items:center;gap:12px;margin-bottom:10px} .sc-track{flex:1;height:7px;background:var(--line);border-radius:99px;overflow:hidden;position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)} .sc-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;transition:width .9s cubic-bezier(.4,0,.2,1);box-shadow:0 0 16px -2px currentColor} .sc-num{font-size:12px;color:var(--fg3);font-family:var(--mono);white-space:nowrap} .sc-breakdown{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(26px,4vw,38px)} .sc-pill{font-size:10px;font-weight:700;font-family:var(--mono);padding:4px 10px;border-radius:99px;border:1px solid transparent} .sc-pill.pos{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green);border-color:color-mix(in srgb,var(--green) 28%,transparent)} .sc-pill.neg{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);border-color:color-mix(in srgb,var(--red) 28%,transparent)} .sc-pill.neu{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 28%,transparent)} /* SECTION TITLE — quiet, neutral, deferential */ .sec-title{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);margin-bottom:16px;font-family:var(--mono)} /* HEALTH CARDS — calm reference field, no rainbow chrome */ .hc-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:clamp(28px,4vw,40px)} .hc-card{border-radius:16px;padding:clamp(13px,2.5vw,17px);position:relative;overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;-webkit-tap-highlight-color:transparent} .hc-card:hover,.hc-card:focus-within{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fg) 14%,var(--line));box-shadow:var(--shadow),0 12px 28px -18px rgba(0,0,0,.3);outline:none} .hc-wide{grid-column:1/-1} .hc-head{display:flex;align-items:center;gap:8px;margin-bottom:6px} /* monochrome line icons — consistent weight, one neutral colour */ .hc-ic{width:17px;height:17px;flex-shrink:0;color:var(--fg3);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:color .25s} .hc-card:hover .hc-ic,.hc-card.open .hc-ic,.hc-card:focus-within .hc-ic{color:var(--fg2)} .hc-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg3);flex:1} .hc-toggle{font-size:12px;color:var(--fg3);transition:transform .25s;flex-shrink:0;user-select:none} .hc-card.open .hc-toggle{transform:rotate(180deg)} .hc-value{font-size:clamp(12px,2.2vw,14px);font-weight:600;color:var(--fg);font-family:var(--mono);display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:3px;line-height:1.45} .hc-bar-track{height:5px;background:var(--line);border-radius:99px;margin-top:7px;overflow:hidden} .hc-bar-fill{height:100%;border-radius:99px;background:var(--card-accent,var(--fg3));transition:width .8s cubic-bezier(.4,0,.2,1)} .hc-detail{display:none;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)} .hc-card.open .hc-detail{display:block} @media(hover:hover){.hc-card:hover .hc-detail{display:block}} .hc-desc{font-size:clamp(11px,2vw,12.5px);color:var(--fg2);line-height:1.68;margin-bottom:8px} .hc-action{font-size:11px;font-weight:600;padding:6px 10px;background:color-mix(in srgb,var(--card-accent,var(--fg)) 10%,transparent);border-radius:8px;line-height:1.5;color:var(--fg)} /* CHIPS */ .chip{display:inline-block;font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;margin-left:4px;font-family:'Inter',sans-serif;vertical-align:middle;letter-spacing:.03em} .c-g{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)} .c-r{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)} .c-a{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)} /* RETURNS */ .returns-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px} .ret-cell{text-align:center;padding:9px 4px;background:var(--card-2);border-radius:10px;border:1px solid var(--line)} .ret-period{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);margin-bottom:4px} .ret-val{font-size:clamp(12px,2.2vw,13px);font-weight:700;font-family:var(--mono)} /* VOLUME SPARK */ .vol-spark{height:30px;display:flex;align-items:flex-end;gap:1.5px;margin-top:8px} .vol-bar{flex:1;border-radius:2px 2px 0 0;min-width:2px;opacity:.5} .vol-bar.spike{opacity:1} /* ACTION PLAN */ .plan{display:grid;grid-template-columns:1fr 1fr;gap:1px;border-radius:16px;overflow:hidden;margin-bottom:clamp(22px,4vw,34px);background:var(--line)} .plan-cell{background:var(--card);padding:clamp(15px,3vw,19px)} .plan-full{grid-column:1/-1} .pc-lbl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);margin-bottom:7px;font-family:var(--mono)} .pc-main{font-size:clamp(12px,2.2vw,13.5px);font-weight:600;margin-bottom:4px} .pc-sub{font-size:clamp(11px,2vw,12px);color:var(--fg2);line-height:1.66} .buy-txt{color:var(--green)}.sell-txt{color:var(--red)}.rr-txt{color:var(--accent)} /* BEST TRADE */ .bt{display:none;margin-bottom:clamp(22px,4vw,34px);padding:clamp(14px,2.5vw,18px);border-radius:16px} .bt-lbl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);margin-bottom:9px;font-family:var(--mono)} .bt-body{font-size:clamp(12px,2.2vw,13px);color:var(--fg2);line-height:1.9} .bt-profit{color:var(--green);font-weight:700} /* CHART */ .ch-wrap{margin-bottom:clamp(22px,4vw,34px);border-radius:16px;padding:clamp(14px,3vw,20px)} .ch-wrap .sec-title{margin-bottom:12px} .ch-canvas-wrap{position:relative;height:clamp(170px,32vw,250px)} canvas{position:absolute;inset:0;width:100%!important;height:100%!important} /* THEME TOGGLE — a floating glass control, same material as the search field. One finish language for all floating chrome; sits clear of the notch via safe-area insets. */ .theme-btn{ position:fixed; top:max(14px,calc(env(safe-area-inset-top,0px) + 12px)); right:max(14px,calc(env(safe-area-inset-right,0px) + 12px)); width:42px;height:42px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:var(--fg2);z-index:200; transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s,color .22s} .theme-btn:hover{transform:scale(1.06);color:var(--fg)} .theme-btn:active{transform:scale(.93)} .theme-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:3px} .theme-btn svg{width:18px;height:18px} /* FOOTER */ footer{font-size:11px;color:var(--fg3);padding-top:22px;margin-top:8px;border-top:1px solid var(--line);line-height:2} /* ── RESPONSIVE ── The base layout is fluid (clamp() everywhere) and reads as one centred column capped at 680px, so it already scales from small phones to large desktops. These breakpoints just reflow the multi-column grids and right-size the big verdict per device class & orientation. None of them re-set .wrap padding, so the safe-area insets above always survive. */ /* very small phones */ @media(max-width:360px){ .bsh-word{font-size:clamp(58px,18vw,72px)} .returns-row{gap:5px} } /* phones (portrait) — stack the 2-up grids into a single column */ @media(max-width:479px){ .hc-grid{grid-template-columns:1fr} .hc-wide{grid-column:1} .plan{grid-template-columns:1fr} .plan-full{grid-column:1} .returns-row{grid-template-columns:repeat(2,1fr)} .bsh-word{font-size:clamp(64px,17vw,84px)} .dd-exch{display:none} .t-name{max-width:55vw} } /* large phones / small tablets (portrait) */ @media(min-width:480px) and (max-width:767px){ .bsh-word{font-size:clamp(84px,14vw,96px)} .ch-canvas-wrap{height:clamp(170px,30vw,200px)} } /* tablets — keep the readable centred column, give the chart more room */ @media(min-width:768px) and (max-width:1023px){ .ch-canvas-wrap{height:220px} } /* laptops & desktops */ @media(min-width:1024px){ .ch-canvas-wrap{height:250px} } /* short landscape (phones turned sideways) — compress the vertical rhythm */ @media(max-height:560px) and (orientation:landscape){ header{margin-bottom:14px} .search-zone{margin-bottom:18px} .bsh-block{padding:clamp(16px,3vh,22px) clamp(18px,4vw,30px)} .bsh-word{font-size:clamp(48px,9vw,62px)} .ch-canvas-wrap{height:clamp(120px,26vh,150px)} .plan-cell{padding:11px 15px} } @media(hover:none){ .hc-card:hover .hc-detail{display:none} .hc-card.open .hc-detail{display:block} .hc-card:hover{transform:none} } /* respect reduced-motion */ @media(prefers-reduced-motion:reduce){ *{transition-duration:.01ms!important} }