:root { --red:#ba0021; --red-2:#F44336; --white:#FFFFFF; --light:#F5F5F5; --dark:#212121; --mid:green; --accent:#146382; --surface: var(--white); --card-shadow: 0 18px 36px rgba(0,0,0,.12); --card-content-bg: rgba(255,255,255,0.98); --radius:28px; } /* Dark theme (system) */ @media (prefers-color-scheme: dark){ :root{--light:#121212;--white:#1E1E1E;--dark:#FAFAFA;--mid:#BDBDBD;--surface:var(--white);--card-shadow:0 18px 36px rgba(0,0,0,.6); --card-content-bg: rgb(255, 255, 255); } } /* Manual override via data-theme on */ html[data-theme="light"]{--light:#F5F5F5;--white:#FFFFFF;--dark:#212121;--mid:#757575} html[data-theme="dark"]{--light:#121212;--white:#1E1E1E;--dark:#FAFAFA;--mid:#BDBDBD;--surface:var(--white);--card-shadow:0 18px 36px rgba(0,0,0,.6); --card-content-bg: rgb(20, 20, 20); } /* Always use light palette on the login page */ body.login-page{--light:#F5F5F5;--white:#FFFFFF;--dark:#212121;--mid:#757575} *{box-sizing:border-box} #app{min-height:100vh} body{margin:0;background:var(--light);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--dark);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} #app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden} .deck{position:relative;width:100vw;height:100vh;max-height:none;overflow:hidden;touch-action:none;overscroll-behavior:none;padding-bottom:calc(80px + env(safe-area-inset-bottom));} .card{ position:absolute; left: 0; right: 0; top: 52px; bottom:calc(-40px + 80px); background: var(--surface); border-radius:18px; overflow:hidden; touch-action:none; display:flex; flex-direction:column; will-change:transform; transform:translateZ(0); backface-visibility:hidden } .card-img{width:100%;height:34vh;object-fit:cover;background-color:var(--light);display:block} .card-content{ display:flex; flex-direction:column; gap:10px; padding:25px 25px 25px; flex:1; background: var(--card-content-bg); border-top-left-radius: 25px; border-top-right-radius: 25px; /* Subtle top border to separate image from content in both themes */ border-top: 1px solid rgba(0,0,0,0.04); margin-top: -25px; } .card .headline{font-size:clamp(18px,4.4vw,26px);font-weight:800} .card .summary{color:var(--mid);font-size:15px} .headline{font-size:clamp(20px,4.8vw,28px);line-height:1.15;margin:0;color:var(--dark);font-weight:800} .summary{margin:0;color:var(--dark);line-height:1.5;max-height:18em;overflow:hidden} .date{color:var(--mid);font-size:13px;margin-top:2px} .meta{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap} .chip{background:rgba(0,0,0,0.06);color:var(--mid);padding:6px 10px;border-radius:999px;font-size:13px} .source{ background: var(--red); color:var(--light); padding: 10px 14px; border-radius:999px; font-size:13px; font-weight:700; text-decoration:none; border:1px solid rgba(186,0,33,0.08); } .author{ background: var(--red); color:var(--light); padding: 10px 14px; border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; } /* .progress removed */ /* Card motion states */ .card{transform:translateY(110%);opacity:0;transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .3s ease} .card.active{transform:translateY(0%);opacity:1} .card.above{transform:translateY(-110%);opacity:.4} .card.below{transform:translateY(110%);opacity:.4} .card.dragging{transition:none} /* (Swipe hint removed) */ @media(min-width:720px){.card-img{height:36vh}} /* Sponsor card */ .sponsor-card{position:absolute;inset:0;display:flex;flex-direction:column;background:#000} .sponsor-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05)} .sponsor-content{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom, 0px) + 96px);padding:20px;color:#fff} .sponsor-title{margin:0 0 8px 0;font-size:clamp(20px,5.4vw,30px);font-weight:800} .sponsor-text{margin:0 0 14px 0;line-height:1.45;color:#e9e9e9} .sponsor-btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;padding:10px 16px;border-radius:999px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.25)} .sponsor-btn:hover{filter:brightness(.95)} /* Login page styles */ body.login-page { background: var(--white, #fff); color: var(--dark, #111); min-height: 100dvh; height: 100dvh; display: block; position: relative; padding: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .pin-wrap { width: 100%; max-width: 420px; } .pin-card { border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 8px 24px rgba(0,0,0,0.06); padding: 24px; } .pin-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; } .pin-sub { color: var(--mid, #666); margin: 0 0 16px; } .pin-input { width: 100%; font-size: 28px; letter-spacing: 6px; text-align: center; padding: 14px 16px; border: 2px solid #eee; border-radius: 12px; outline: none; } .pin-input:focus { border-color: var(--red, #ba0021); box-shadow: 0 0 0 4px rgba(186, 0, 33, 0.12); } .pin-btn { margin-top: 14px; width: 100%; padding: 12px 16px; background: var(--red, #ba0021); color: #fff; border: none; border-radius: 12px; font-weight: 700; } .pin-error { color: #b00020; margin-top: 10px; } .pin-help { margin-top: 16px; color: var(--mid, #666); font-size: 13px; text-align: center; } /* Login redesign */ .login-hero { background: var(--red, #ba0021); height: 80vh; display: grid; place-items: center; } .login-panel { background: #fff; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; border-top-left-radius: 36px; border-top-right-radius: 36px; min-height: calc(20vh + env(safe-area-inset-bottom)); padding: 20px 20px calc(15px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow-x: hidden; } /* Use themed surface color for login panel */ .login-panel{background:var(--white)} .brand-mark svg { display: block; } .brand-mark img{display:block;width:88px;height:88px;border-radius:20px;object-fit:contain;image-rendering:auto} .brand-mark{display:flex;flex-direction:column;align-items:center;gap:10px} .brand-name{color:#fff;font-weight:800;letter-spacing:1px} .login-title { font-size: 28px; font-weight: 800; letter-spacing: 1px; margin: 10px 0 10px; color: var(--dark, #111); } .login-sub { margin: 0 0 24px; color: #555; font-weight: 700; letter-spacing: 0.4px; } .pin-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; padding: 0 6px; } .pin-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 3vw, 14px); width: 100%; max-width: 100%; } .pin-box { height: 58px; border-radius: 12px; border: 2px solid #d8d8d8; text-align: center; font-size: 24px; font-weight: 700; width: 100%; min-width: 0; } .pin-box:focus { outline: none; border-color: var(--red, #ba0021); box-shadow: 0 0 0 4px rgba(186,0,33,.12); } .pin-box::placeholder { color: #bbb; } .pin-cta:hover { filter: brightness(.95); } .pin-error { color: #b00020; margin: 14px 0 0; min-height: 20px; } .pin-cta { margin-top: 10px; padding: 10px 14px; border: none; border-radius: 24px; background: var(--red, #ba0021); color: #fff; font-weight: 800; } .theme-toggle{ position:fixed; right:12px; top: 70px; z-index:50; background:var(--white); color:var(--dark); border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:8px 10px; box-shadow:0 8px 24px rgba(0,0,0,.12); } .theme-toggle:hover{filter:brightness(.97)} .theme-toggle svg{width:20px;height:20px;display:block} .theme-toggle .icon-moon{display:none} html[data-theme="dark"] .theme-toggle .icon-sun{display:none} html[data-theme="dark"] .theme-toggle .icon-moon{display:block} /* Top category bar (horizontal) */ .category-bar{ position:fixed; top: 0px; left:0px; right:0px; z-index:45; display:flex; align-items:center; justify-content:center; padding:6px 8px; gap: 6px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; background: var(--light); color: var(--dark); } html[data-theme="dark"] .category-bar{ background: var(--light); color: var(--dark); } .category-bar .cat-inner{ display:flex; gap:8px; overflow:auto; padding:4px 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .category-bar .cat-inner::-webkit-scrollbar{ display:none; } .cat-btn{ flex:0 0 auto; padding:8px 12px; border-radius:20px; background:transparent; border:none; color:var(--dark); font-weight:700; font-size:13px; cursor:pointer; } .cat-btn:hover{ filter:brightness(.97); transform:translateY(-1px); } .cat-btn.active, .cat-btn[aria-selected="true"]{ background:var(--red); color:#fff; } html[data-theme="dark"] .cat-btn{ color:var(--dark) } html[data-theme="dark"] .cat-btn.active, html[data-theme="dark"] .cat-btn[aria-selected="true"] { box-shadow: 0 6px 24px rgba(0,0,0,.36); } /* category hit-layer removed */ /* Small add-favorite button under the theme toggle */ .add-fav-btn{ position:fixed; right:12px; top: 120px; z-index:50; background:var(--white); color:var(--dark); border:1px solid rgba(0,0,0,.06); border-radius:25px; padding:10px; box-shadow:0 6px 18px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; } .add-fav-btn svg{display:block} .add-fav-btn:hover{filter:brightness(.98)} .admin-link{position:fixed;right:12px;top:60px;z-index:50;background:var(--white);color:var(--dark);border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.12);text-decoration:none;display:flex;align-items:center;justify-content:center;transition:all .2s} .admin-link:hover{filter:brightness(.97);transform:scale(1.05)} .admin-link svg{width:20px;height:20px;display:block;stroke:var(--dark)} @media (max-width: 360px) { .login-hero { height: 70vh; } .login-panel { margin-top: -42px; padding: 24px 16px 20px; } .pin-cells { gap: 8px; } .pin-box { height: 48px; font-size: 20px; border-width: 1.5px; } } /* Bottom navigation bar */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(56px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; padding:8px 12px; background: var(--white); box-shadow:0 -8px 24px rgba(0,0,0,0.08); z-index:60; border-top-left-radius: 25px; border-top-right-radius: 25px; } .nav-inner{width:100%;max-width:780px;background:var(--white);border-radius:999px;padding:8px 12px;display:flex;gap:10px;align-items:center;justify-content:space-around;box-shadow:0 6px 18px rgba(0,0,0,0.06)} .nav-btn{background:transparent;border:none;padding:10px 14px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--mid);cursor:pointer} .nav-btn.active{ background: rgba(0,0,0,0.04); color: inherit; box-shadow:0 8px 20px rgba(0, 0, 0, 0.08); } .nav-btn svg{width:22px;height:22px} /* SVG-tinted nav icons */ .nav-btn{color:var(--mid);transition:color .12s ease} .nav-btn svg{width:22px;height:22px;display:block} .nav-btn svg *{stroke:currentColor;fill:currentColor} .nav-btn svg {opacity:.85;transition:opacity .12s ease, transform .12s ease} .nav-btn.active svg{opacity:1} /* Active color: let CSS variables control tinting */ .nav-btn.active{color:var(--accent)} /* When in dark theme, adjust default color for better contrast */ html[data-theme='dark'] .nav-btn{color:rgba(255,255,255,0.85)} /* Keep a sensible system-preference fallback */ @media (prefers-color-scheme: dark) { .nav-btn{color:rgba(255,255,255,0.85)} } /* Per-button inactive colors (visible in light mode) */ .nav-btn.fav{ color: #575757 } /* Favorites */ .nav-btn.home{ color: #575757 } /* Home (keeps accent when inactive) */ .nav-btn.profile{ color: #575757 } /* Profile */ @media (min-width: 720px){ .bottom-nav { height: calc(72px + env(safe-area-inset-bottom)); } .nav-inner{padding:10px 18px} } /* Favorites page: show cards in a vertical, scrollable list (non-stacked) */ /* Allow the whole body to scroll on mobile as a fallback */ body.favorites-page{ overflow:auto; -webkit-overflow-scrolling: touch; } body.favorites-page #app{ display:block; height:auto; min-height:100vh; } body.favorites-page #deck{ position:relative; width:100%; height:auto; max-height:none; overflow:visible; touch-action:auto !important; -ms-touch-action: auto !important; display:flex; flex-direction:column; gap:20px; padding:20px 12px 96px; box-sizing:border-box; pointer-events:auto } body.favorites-page .card{ pointer-events:auto } /* Allow vertical touch gestures on the cards themselves so users can scroll by dragging cards */ body.favorites-page .card, body.favorites-page .card-img, body.favorites-page .card-content { touch-action: pan-y !important; -ms-touch-action: pan-y !important; } body.favorites-page .card{ position:relative !important; left:auto; right:auto; top:auto; bottom:auto; transform:none !important; opacity:1 !important; width:100%; max-width:780px; margin:0 auto; border-radius:18px; box-shadow: none; } body.favorites-page .card-img{ height:220px; border-top-left-radius:18px; border-top-right-radius:18px } body.favorites-page .card-content{ margin-top:0; border-top:1px solid rgba(0,0,0,0.04); border-top-left-radius:0; border-top-right-radius:0 } html[data-theme="dark"] body.favorites-page .card-content{ border-top:1px solid rgba(255,255,255,0.04) } body.favorites-page .card.above, body.favorites-page .card.below, body.favorites-page .card.active { transform:none !important; opacity:1 !important } /* Remove (unfavorite) button on favorites cards */ .fav-remove{ position:absolute; left:12px; top:12px; width:36px; height:36px; border-radius:25px; border:none; background: rgba(0,0,0,0.8); color: #ffffff; display:inline-grid; place-items:center; font-size:16px; cursor:pointer; z-index:40; } .fav-remove:hover{ background:#111 } .fav-remove:active{ transform:scale(.98); } /* Ensure SVG inherits the button color and is sized nicely */ .fav-remove svg{ width:18px; height:18px; display:block } .fav-remove svg *{ fill:currentColor !important; stroke:currentColor !important } /* Dark theme tweaks for favorites page controls */ html[data-theme="dark"] .fav-remove{ background: rgba(255,255,255,0.08); color: #000000; } /* (Favorites page uses the same card layout as the home page — no special overrides) */ @media (min-width: 768px) { .login-hero { height: 45vh; } .login-panel { min-height: 55vh; } } /* Profile page styles (redesign) */ .profile-page, .profile-container { min-height:100vh; display:flex; flex-direction:column; } .profile-header{ display:flex; gap:16px; align-items:center; padding:28px 12px 0 12px } .profile-avatar{ width:140px; height:140px; border-radius:999px; background:var(--mid); display:grid; place-items:center; color:var(--white); font-weight:800; font-size:72px; flex-shrink:0; overflow:hidden; } .profile-avatar img{ width:100%; height:100%; object-fit:cover; display:block } .profile-meta{ display:flex; flex-direction:column; gap:6px } .profile-name{ font-size:28px; font-weight:800; color:var(--dark); line-height:1.05 } .profile-email{ color:var(--mid); margin: 3px; } .profile-legal{ padding:6px 12px; padding-left: 0; display:flex; gap:12px; justify-content:center; align-items:center; } /* When profile-legal is inside profile-actions, make it left-aligned and tighter */ .profile-actions .profile-legal{ padding:0 0 6px 0; justify-content:flex-start; gap:10px } .profile-actions .profile-legal .btn-pill{ padding:6px 10px; border-radius:14px; font-weight:700 } .btn-pill{ padding:8px 14px; border-radius:16px; text-decoration:none; display:inline-block; background: rgba(0,0,0,0.18); color:var(--white); font-weight:700; box-shadow: none; font-size:13px; } .profile-spacer{ flex:1 } .profile-actions{ display:flex; flex-direction:column; gap: 6px; padding:0 12px 64px 18px; align-items:flex-start; margin-bottom: 80px; } .profile-actions .btn{ width:auto; max-width:none; padding:12px 14px; border-radius:26px; font-weight:700; border:none; cursor:pointer; box-shadow:none } .profile-actions .action-row{ display:flex; gap:12px; width:auto } .profile-actions .action-row .btn{ border-radius:24px; flex:initial } .profile-actions .btn-secondary{ background: rgba(255,255,255,0.06); color:#ffffff } .profile-actions .btn-primary{ background: rgba(255,255,255,0.06); color:#ffffff; border: none } .profile-actions .btn-danger{ background: var(--red); color: #fff } .profile-actions .btn.large{ border-radius:30px; padding: 10px 16px; } .center{ display:flex; align-items:center; justify-content:center } .center-text{ text-align:center } .profile-top{ display:flex; align-items:center; gap:12px; padding:24px 12px 14px 35px; justify-content:flex-start; width: 100%; } .back-btn{ background:transparent;border:none;color:var(--mid);font-size:18px;padding:8px } .profile-title{ font-size: 12px; font-weight:800; color:var(--mid); } .fav-count{ margin-top:8px;color:var(--mid); font-size:13px; display:inline-flex; align-items:center; gap:6px } /* Refined visuals to match mock */ .profile-top .back-btn{ width:40px; height:40px; border-radius:20px; display:grid; place-items:center; background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.85); box-shadow: 0 6px 18px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.02); align-self:flex-start } /* Left-aligned profile layout */ .profile-header.center{ flex-direction:column; gap:10px; padding:14px 12px 14px 35px; align-items:flex-start; width: 100%; } .profile-avatar{ width: 250px; height: 250px; border-radius:999px; background: rgba(255,255,255,0.03); display:grid; place-items:center; color:rgba(255,255,255,0.7); font-weight:800; font-size:72px; position:relative; align-self:flex-start; margin:0; } .profile-avatar::after{ content:""; position:absolute; inset:0; border-radius:50%; } .profile-meta.center-text{ margin-top:8px; text-align:left; align-self:flex-start } .profile-email{ font-size: 18px; color:rgba(255,255,255,0.55); text-transform:none; } .profile-name{ font-size: 40px; font-weight:800; color:rgba(255,255,255,0.75); line-height:1.04; } .fav-count{ margin-top:8px; display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,0.02); padding: 8px 12px; border-radius: 25px; color:rgba(255,255,255,0.75); font-size: 25px; } .fav-count svg{ opacity:0.9; } .btn-pill{ background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.85); } /* Make sure favorite pill sizes to its content instead of stretching full width */ .profile-meta .fav-count, .profile-header .fav-count{ display:inline-flex !important; width:auto !important; max-width:none !important; align-self:flex-start !important; white-space:nowrap; box-sizing:border-box; } .profile-actions .action-row{ gap:12px; justify-content:flex-start } .profile-actions .btn-secondary, .profile-actions .btn-primary{ background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.9); padding: 10px 14px; border-radius:22px; } .profile-actions .btn-danger{ background:#ba0021; color:#000; font-weight:800; padding:10px 6px; border-radius:28px; box-shadow:none; } /* Slightly lift the bottom area so delete button sits above nav */ .profile-actions{ margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px); padding:24px 12px 14px 35px; width: 100%; } /* Theme adjustments: when dark theme is active, make the page dark like the mockup */ html[data-theme='dark'] .profile-container, html[data-theme='dark'] .profile-page{ background: var(--light); } html[data-theme='dark'] .profile-name{ color:var(--white) } html[data-theme='dark'] .profile-email{ color:rgba(255,255,255,0.6) } html[data-theme='dark'] .btn-pill{ background: rgba(255,255,255,0.06); color:var(--white) } html[data-theme='dark'] .profile-actions .btn-secondary{ background: rgba(255,255,255,0.06); color:var(--white) } html[data-theme='dark'] .profile-actions .btn-primary{ background: rgba(255,255,255,0.06); color:var(--white); border: none } /* Make the delete button left-aligned and nearly full-width within padded area */ .profile-actions #btn-delete{ align-self:flex-start; width:calc(100% - 180px); }