/* ============================================================ OnlineMathBasics — Main CSS Design tokens · Reset · App shell · Home page · Responsive ============================================================ */ /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } button, input { font-family: inherit; } /* ── Design Tokens ───────────────────────────────────────── */ :root { /* Palette */ --orange: #FF6B35; --orange-d: #E55A24; --teal: #4ECDC4; --teal-d: #3ABDB4; --purple: #9B5DE5; --purple-d: #7B3DD5; --blue: #00BBF9; --blue-d: #009FD4; --green: #06D6A0; --red: #EF476F; --yellow: #FFE66D; /* Surface */ --bg: #FFF6ED; --surface: #FFFFFF; --dark: #1A1A2E; --dark2: #16213E; --text: #1A1A2E; --text2: #4A4A7A; --text3: #9090B0; --border: rgba(0,0,0,.08); /* Shadows */ --sh-xs: 0 2px 8px rgba(0,0,0,.07); --sh-sm: 0 4px 14px rgba(0,0,0,.09); --sh: 0 8px 24px rgba(0,0,0,.12); --sh-lg: 0 16px 48px rgba(0,0,0,.16); /* Radii */ --r: 24px; --rs: 16px; --rx: 12px; --pill: 999px; /* Animation */ --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --out: cubic-bezier(0.16, 1, 0.3, 1); /* App shell */ --hdr-h: 60px; --tab-h: 56px; } /* Operation theming — set data-op on , everything cascades */ [data-op="add"] { --op:#FF6B35; --op-d:#E55A24; --op-l:rgba(255,107,53,.14); --op-g:linear-gradient(135deg,#FF6B35,#FF9A5C); --op-sh:rgba(255,107,53,.38); } [data-op="sub"] { --op:#FF4D6D; --op-d:#E03358; --op-l:rgba(255,77,109,.14); --op-g:linear-gradient(135deg,#FF4D6D,#FF7E93); --op-sh:rgba(255,77,109,.38); } [data-op="mul"] { --op:#9B5DE5; --op-d:#7B3DD5; --op-l:rgba(155,93,229,.14); --op-g:linear-gradient(135deg,#9B5DE5,#B87EEA); --op-sh:rgba(155,93,229,.38); } [data-op="div"] { --op:#00BBF9; --op-d:#009FD4; --op-l:rgba(0,187,249,.14); --op-g:linear-gradient(135deg,#00BBF9,#4DD2FF); --op-sh:rgba(0,187,249,.38); } [data-op="tbl"] { --op:#06D6A0; --op-d:#04B589; --op-l:rgba(6,214,160,.14); --op-g:linear-gradient(135deg,#06D6A0,#4ECDC4); --op-sh:rgba(6,214,160,.38); } [data-op="home"],[data-op=""] { --op:#FF6B35; --op-d:#E55A24; --op-l:rgba(255,107,53,.14); --op-g:linear-gradient(135deg,#FF6B35,#9B5DE5); --op-sh:rgba(255,107,53,.38); } /* ── Base ────────────────────────────────────────────────── */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overscroll-behavior: none; } body { font-family: 'Nunito', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; } /* Animate .page, NOT body — animating body breaks position:fixed on header/tabbar */ .page { animation: pageIn .3s var(--out) both; } body.exiting { pointer-events: none; } body.exiting .page { animation: pageOut .22s ease forwards; } @keyframes pageIn { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } } @keyframes pageOut { to { opacity:0; transform:translateX(-20px); } } h1,h2,h3,h4 { font-weight: 800; line-height: 1.2; } /* ── Animations (shared) ─────────────────────────────────── */ @keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-13px) rotate(4deg)} 66%{transform:translateY(-6px) rotate(-3deg)} } @keyframes bounceIn { 0%{transform:scale(0) rotate(-10deg);opacity:0} 70%{transform:scale(1.1) rotate(2deg)} 100%{transform:scale(1);opacity:1} } @keyframes slideUp { from{transform:translateY(22px);opacity:0} to{transform:translateY(0);opacity:1} } @keyframes popScale { 0%{transform:scale(1)} 50%{transform:scale(1.28)} 100%{transform:scale(1)} } @keyframes shakeX { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-7px)} 80%{transform:translateX(7px)} } @keyframes twinkle { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.15;transform:scale(.65)} } @keyframes gradPan { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes countPop { from{transform:scale(1.5);opacity:0} to{transform:scale(1);opacity:1} } @keyframes starSpin { from{transform:rotate(0deg) scale(0);opacity:0} 65%{transform:rotate(390deg) scale(1.2);opacity:1} 100%{transform:rotate(360deg) scale(1);opacity:1} } @keyframes pulseRing{ 0%{box-shadow:0 0 0 0 var(--op-sh,rgba(255,107,53,.4))} 70%{box-shadow:0 0 0 14px transparent} 100%{box-shadow:0 0 0 0 transparent} } @keyframes ctaPulse { 0%,100%{box-shadow:0 6px 20px var(--op-sh,rgba(255,107,53,.38))} 50%{box-shadow:0 6px 32px var(--op-sh,rgba(255,107,53,.58)),0 0 0 8px var(--op-l,rgba(255,107,53,.1))} } /* ── App Header ──────────────────────────────────────────── */ .app-hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); background: rgba(255,246,237,.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1.5px solid rgba(255,107,53,.1); display: flex; align-items: flex-end; transition: box-shadow .3s; } .app-hdr.scrolled { box-shadow: var(--sh-sm); } .hdr-inner { width: 100%; max-width: 1100px; margin: 0 auto; height: var(--hdr-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } /* Logo */ .logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); flex-shrink:0; } .logo-mark { width:38px; height:38px; background: var(--op-g, linear-gradient(135deg,#FF6B35,#9B5DE5)); border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 3px 10px rgba(255,107,53,.3); transition: background .3s; } .logo-name { font-size:17px; font-weight:900; } .logo-name em { font-style:normal; color:var(--op,var(--orange)); } /* Desktop nav (hidden on mobile/tablet) */ .hdr-nav { display:none; align-items:center; gap:4px; } .hdr-nav a { display:flex; align-items:center; gap:5px; color:var(--text2); text-decoration:none; font-size:14px; font-weight:700; padding:7px 13px; border-radius:var(--pill); transition:all .2s; } .hdr-nav a:hover { color:var(--orange); background:rgba(255,107,53,.1); } .hdr-nav a.active { color:var(--op,var(--orange)); background:var(--op-l,rgba(255,107,53,.12)); } /* ── Bottom Tab Bar ──────────────────────────────────────── */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: rgba(255,255,255,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1.5px solid rgba(0,0,0,.07); box-shadow: 0 -4px 20px rgba(0,0,0,.08); display: flex; height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); align-items: flex-start; padding-top: 6px; } .tab { flex: 1; display:flex; flex-direction:column; align-items:center; gap: 2px; text-decoration:none; color: var(--text3); font-size:10px; font-weight:800; padding: 2px 4px; border-radius:var(--rx); transition: color .18s; position:relative; -webkit-tap-highlight-color: transparent; user-select: none; } .tab:active { transform: scale(.9); transition-duration: 60ms; } .tab-icon { font-size:22px; line-height:1.1; display:block; transition:transform .22s var(--spring); } .tab-label { line-height:1; } .tab.active { color: var(--op, var(--orange)); } .tab.active .tab-icon { transform: scale(1.2) translateY(-2px); } .tab.active::after { content:''; position:absolute; bottom:0; width:24px; height:3px; border-radius:3px 3px 0 0; background: var(--op, var(--orange)); } /* ── Page content wrapper ────────────────────────────────── */ .page { padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 12px); min-height: 100vh; } /* ── Utility ─────────────────────────────────────────────── */ .hidden { display:none !important; } .reveal { opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease; } .reveal.on{ opacity:1; transform:translateY(0); } .container{ max-width:1100px; margin:0 auto; padding:0 20px; } .sec { padding:72px 20px; } .sec-hdr { text-align:center; margin-bottom:52px; } .sec-tag { display:inline-block; background:var(--op-l,rgba(255,107,53,.12)); color:var(--op,var(--orange)); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; padding:5px 16px; border-radius:var(--pill); margin-bottom:12px; } .sec-title{ font-size:clamp(26px,4vw,42px); font-weight:900; margin-bottom:12px; } .sec-sub { font-size:16px; color:var(--text2); font-weight:600; max-width:520px; margin:0 auto; line-height:1.75; } /* Confetti canvas */ #cfx { position:fixed; inset:0; pointer-events:none; z-index:9999; width:100%; height:100%; } /* ── Dark Mode Variables ─────────────────────────────────── */ [data-theme="dark"] { --bg: #0D0D1A; --surface: #161628; --text: #F0F0FF; --text2: #9090B8; --text3: #505070; --border: rgba(255,255,255,.08); --sh-xs: 0 2px 8px rgba(0,0,0,.45); --sh-sm: 0 4px 14px rgba(0,0,0,.55); --sh: 0 8px 24px rgba(0,0,0,.65); --sh-lg: 0 16px 48px rgba(0,0,0,.75); } /* Header & Tab Bar */ [data-theme="dark"] .app-hdr { background:rgba(13,13,26,.97); border-color:rgba(255,255,255,.06); } [data-theme="dark"] .tab-bar { background:rgba(22,22,40,.98); border-color:rgba(255,255,255,.06); } [data-theme="dark"] .tab { color:rgba(255,255,255,.35); } /* Home page sections */ [data-theme="dark"] .hero-chip { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.7); } [data-theme="dark"] .feat-card { border-color:rgba(255,255,255,.07); } [data-theme="dark"] .step-desc { color:var(--text2); } [data-theme="dark"] .email-in { background:#1A1A2E; color:white; } [data-theme="dark"] .footer { background:#08080F; } [data-theme="dark"] .footer-badge { background:rgba(255,255,255,.05); } /* Logo & text */ [data-theme="dark"] .logo-name { color:var(--text); } /* ── Theme Toggle Button ─────────────────────────────────── */ .theme-toggle { width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.07); border:none; display:flex; align-items:center; justify-content:center; font-size:17px; cursor:pointer; flex-shrink:0; transition:all .25s var(--spring); -webkit-tap-highlight-color:transparent; margin-left:8px; } .theme-toggle:hover { background:var(--op-l,rgba(255,107,53,.12)); transform:scale(1.1) rotate(15deg); } .theme-toggle:active { transform:scale(.88); } [data-theme="dark"] .theme-toggle { background:rgba(255,255,255,.08); } [data-theme="dark"] .theme-toggle:hover { background:rgba(255,255,255,.15); } /* ── Hamburger Button ────────────────────────────────────── */ .menu-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 36px; height: 36px; background: rgba(0,0,0,.07); border: none; border-radius: 10px; cursor: pointer; flex-shrink: 0; transition: all .25s var(--spring); -webkit-tap-highlight-color: transparent; } .menu-btn span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: all .3s var(--spring); transform-origin: center; } .menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .menu-btn:hover { background: var(--op-l, rgba(255,107,53,.12)); } [data-theme="dark"] .menu-btn { background: rgba(255,255,255,.08); } [data-theme="dark"] .menu-btn:hover { background: rgba(255,255,255,.14); } [data-theme="dark"] .menu-btn span { background: var(--text); } @media (min-width: 1024px) { .menu-btn { display: none !important; } } /* ── Mobile Menu Panel ───────────────────────────────────── */ .mob-menu { position: fixed; top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 195; background: var(--surface); border-bottom: 2px solid var(--border); box-shadow: 0 16px 48px rgba(0,0,0,.2); padding: 8px 0 12px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .3s var(--spring), opacity .22s ease; } .mob-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; } [data-theme="dark"] .mob-menu { background: var(--surface); border-color: var(--border); box-shadow: 0 16px 48px rgba(0,0,0,.6); } @media (min-width: 1024px) { .mob-menu { display: none !important; } } .mob-link { display: flex; align-items: center; gap: 14px; padding: 13px 24px; color: var(--text2); text-decoration: none; font-size: 15px; font-weight: 700; border-left: 3px solid transparent; transition: background .15s, color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; } .mob-link:hover { background: var(--op-l, rgba(255,107,53,.09)); color: var(--op, var(--orange)); } .mob-link:active { background: var(--op-l, rgba(255,107,53,.15)); } .mob-link.active { color: var(--op, var(--orange)); background: var(--op-l, rgba(255,107,53,.09)); border-left-color: var(--op, var(--orange)); } .mob-link-icon { font-size: 22px; flex-shrink: 0; line-height: 1; } .mob-link-label { font-size: 15px; font-weight: 800; } /* ── Backdrop overlay ────────────────────────────────────── */ .mob-overlay { position: fixed; inset: 0; z-index: 185; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .28s ease; } .mob-overlay.open { opacity: 1; pointer-events: auto; } @media (min-width: 1024px) { .mob-overlay { display: none !important; } } /* ── Go To Top Button ────────────────────────────────────── */ .go-top { position:fixed; right:16px; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 14px); width:44px; height:44px; border-radius:50%; background:var(--op-g, linear-gradient(135deg,#FF6B35,#9B5DE5)); color:white; border:none; font-size:20px; font-weight:900; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:150; box-shadow:0 4px 16px var(--op-sh,rgba(255,107,53,.4)); transition:opacity .3s var(--spring), transform .3s var(--spring), box-shadow .25s; opacity:0; transform:translateY(14px) scale(.75); pointer-events:none; } .go-top.visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .go-top:hover { transform:translateY(-3px) scale(1.1); box-shadow:0 8px 24px var(--op-sh,rgba(255,107,53,.5)); } .go-top:active { transform:scale(.9); } @media (min-width:1024px) { .go-top { bottom:24px; right:24px; } } /* ── HOME PAGE ───────────────────────────────────────────── */ /* Hero banner */ .home-hero { background: linear-gradient(145deg, #1A1A2E 0%, #2D1869 50%, #0F3460 100%); background-size: 300% 300%; animation: gradPan 8s ease infinite; padding: 44px 20px 40px; text-align: center; position: relative; overflow: hidden; } .home-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 40%, rgba(255,107,53,.18) 0%, transparent 50%), radial-gradient(circle at 75% 70%, rgba(155,93,229,.18) 0%, transparent 50%); } .hero-inner { position:relative; z-index:1; max-width:600px; margin:0 auto; } .hero-owl { font-size:64px; display:block; margin-bottom:10px; animation:float 3s ease-in-out infinite; } .hero-title { font-size:clamp(28px,6vw,52px); font-weight:900; color:white; margin-bottom:10px; } .hero-title .hl { background:linear-gradient(135deg,#FFE66D,#FF9A5C); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-sub { font-size:15px; color:rgba(255,255,255,.7); font-weight:600; margin-bottom:20px; line-height:1.65; } .hero-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; } .hero-chip { background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.2); border-radius:var(--pill); padding:6px 14px; color:white; font-size:12px; font-weight:700; } /* Operation cards grid */ .ops-sec { padding:44px 20px; background:var(--surface); } .ops-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:600px; margin:0 auto; } .op-card { border-radius:var(--r); padding:28px 20px; text-align:center; text-decoration:none; color:white; background:var(--card-g); box-shadow:var(--sh); transition:all .28s var(--spring); position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; } .op-card::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .2s; } .op-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:var(--sh-lg); } .op-card:hover::after { background:rgba(255,255,255,.06); } .op-card:active { transform:scale(.96); transition-duration:80ms; } /* Per-operation card gradients */ .op-add { --card-g:linear-gradient(145deg,#FF6B35,#E55A24); } .op-sub { --card-g:linear-gradient(145deg,#FF4D6D,#E03358); } .op-mul { --card-g:linear-gradient(145deg,#9B5DE5,#7B3DD5); } .op-div { --card-g:linear-gradient(145deg,#00BBF9,#009FD4); } .op-tbl { --card-g:linear-gradient(145deg,#06D6A0,#04B589); } .op-symbol { font-size:54px; display:block; margin-bottom:10px; line-height:1; } .op-name { font-size:18px; font-weight:900; margin-bottom:4px; } .op-desc { font-size:12px; opacity:.8; font-weight:600; } .op-badge { display:inline-block; background:rgba(255,255,255,.18); border-radius:var(--pill); padding:4px 10px; font-size:11px; font-weight:800; margin-top:10px; } /* Features grid */ .feat-grid { display:grid; grid-template-columns:1fr; gap:20px; max-width:960px; margin:0 auto; } .feat-card { background:var(--surface); border-radius:var(--r); padding:28px 24px; box-shadow:var(--sh-sm); border:2px solid transparent; display:flex; gap:18px; align-items:flex-start; transition:all .3s; } .feat-card:hover { transform:translateY(-4px); box-shadow:var(--sh); border-color:rgba(255,107,53,.15); } .feat-icon { width:54px; height:54px; flex-shrink:0; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; } .feat-body {} .feat-title { font-size:17px; font-weight:900; margin-bottom:5px; } .feat-desc { font-size:14px; color:var(--text2); font-weight:600; line-height:1.65; } /* How it works */ .how-sec { background:var(--surface); } .steps-row { display:grid; grid-template-columns:1fr; gap:32px; max-width:840px; margin:0 auto; } .step { text-align:center; } .step-num { width:64px; height:64px; border-radius:50%; background:var(--op-g,linear-gradient(135deg,var(--orange),var(--purple))); color:white; font-size:26px; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:0 6px 20px var(--op-sh,rgba(255,107,53,.35)); } .step-title { font-size:17px; font-weight:900; margin-bottom:6px; } .step-desc { font-size:14px; color:var(--text2); font-weight:600; line-height:1.65; } /* CTA section */ .cta-sec { padding:72px 20px; text-align:center; background:linear-gradient(145deg,#FF6B35,#9B5DE5,#00BBF9); background-size:300% 300%; animation:gradPan 7s ease infinite; position:relative; overflow:hidden; } .cta-sec::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.12); } .cta-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; color:white; } .cta-inner .sec-tag { background:rgba(255,255,255,.18); color:white; display:inline-block; margin-bottom:16px; } .cta-inner h2 { font-size:clamp(28px,5vw,46px); font-weight:900; margin-bottom:12px; } .cta-inner p { font-size:16px; opacity:.9; font-weight:600; line-height:1.75; margin-bottom:32px; } .coming-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-bottom:36px; } .coming-chip { background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.25); border-radius:var(--pill); padding:8px 16px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; } .email-row { display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center; } .email-in { flex:1; min-width:220px; padding:14px 20px; border-radius:var(--pill); border:none; font-family:'Nunito',sans-serif; font-size:15px; font-weight:600; outline:none; box-shadow:0 4px 14px rgba(0,0,0,.15); } .email-btn { background:white; color:var(--orange); font-family:'Nunito',sans-serif; font-size:15px; font-weight:900; padding:14px 26px; border-radius:var(--pill); border:none; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.2); transition:all .2s; white-space:nowrap; } .email-btn:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.25); } .cta-note { margin-top:12px; font-size:12px; opacity:.55; } /* Footer */ footer { background:var(--dark); color:white; padding:44px 20px 24px; } .footer-inner { max-width:1100px; margin:0 auto; } .footer-top { display:flex; justify-content:space-between; align-items:flex-start; gap:28px; flex-wrap:wrap; margin-bottom:28px; } .footer-logo .logo-name { color:white; } .footer-logo .logo-name em { color:var(--orange); } .footer-tag { font-size:13px; color:rgba(255,255,255,.4); font-weight:600; margin-top:8px; max-width:240px; } .footer-cols { display:flex; gap:40px; flex-wrap:wrap; } .footer-col h4 { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.35); margin-bottom:12px; } .footer-col a { display:block; color:rgba(255,255,255,.6); text-decoration:none; font-size:13px; font-weight:600; margin-bottom:8px; transition:color .2s; } .footer-col a:hover { color:var(--orange); } .footer-btm { border-top:1px solid rgba(255,255,255,.09); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; } .footer-copy { font-size:12px; color:rgba(255,255,255,.3); font-weight:600; } .footer-badges { display:flex; gap:7px; } .footer-badge { background:rgba(255,255,255,.07); border-radius:7px; padding:4px 10px; font-size:11px; font-weight:700; color:rgba(255,255,255,.35); } /* ── Responsive ──────────────────────────────────────────── */ @media (min-width: 640px) { .ops-grid { grid-template-columns:repeat(3,1fr); max-width:960px; } .feat-grid { grid-template-columns:repeat(3,1fr); } .steps-row { grid-template-columns:repeat(3,1fr); } } @media (min-width: 900px) { .ops-grid { grid-template-columns:repeat(5,1fr); } } @media (min-width: 1024px) { .tab-bar { display:none; } .hdr-nav { display:flex; } .page { padding-bottom:40px; } :root { --hdr-h:68px; } } /* ============================================================ Tables Page ============================================================ */ /* Page shell — same dark gradient as game pages */ .tables-page { min-height: calc(100vh - var(--hdr-h) - env(safe-area-inset-top,0px)); background: linear-gradient(160deg, #1A1A2E 0%, #16213E 55%, #0F3460 100%); position: relative; overflow: hidden; } .tables-page .stars-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; } /* Content wrapper */ .tables-body { position: relative; z-index: 1; max-width: 960px; width: 100%; margin: 0 auto; padding: 20px 16px 40px; } /* ── Concept card ──────────────────────────────────────── */ .concept-card { background: rgba(255,255,255,.08); backdrop-filter: blur(18px); border: 2px solid rgba(255,255,255,.12); border-radius: var(--r); padding: 28px 22px; margin-bottom: 36px; color: white; } .concept-hdr { display:flex; align-items:center; gap:14px; margin-bottom:14px; } .concept-icon { font-size:30px; flex-shrink:0; } .concept-hdr h2 { font-size:clamp(17px,3.5vw,22px); font-weight:900; } .concept-text { font-size:15px; color:rgba(255,255,255,.8); line-height:1.78; font-weight:600; margin-bottom:22px; } .concept-text strong { color:var(--op,#06D6A0); } .concept-text em { color:rgba(255,255,255,.9); font-style:normal; font-weight:800; } /* 3-step explainer */ .concept-steps { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; } .concept-step { display:flex; align-items:flex-start; gap:14px; } .cstep-num { min-width:34px; height:34px; border-radius:50%; background:var(--op-g,linear-gradient(135deg,#06D6A0,#4ECDC4)); color:white; font-size:15px; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px var(--op-sh,rgba(6,214,160,.4)); flex-shrink:0; } .cstep-title { font-size:14px; font-weight:900; margin-bottom:3px; color:white; } .cstep-desc { font-size:13px; font-weight:600; color:rgba(255,255,255,.6); line-height:1.6; } .cstep-desc strong { color:var(--op,#06D6A0); } /* Example row */ .concept-example { background:rgba(255,255,255,.06); border-radius:var(--rs); padding:18px 20px; text-align:center; margin-bottom:20px; } .concept-ex-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.38); margin-bottom:14px; } .concept-ex-row { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; } .ex-num { font-size:clamp(38px,8vw,52px); font-weight:900; color:white; line-height:1; } .ex-op { font-size:clamp(28px,6vw,40px); font-weight:900; color:var(--op,#06D6A0); line-height:1; } .ex-eq { font-size:clamp(28px,6vw,40px); color:rgba(255,255,255,.35); line-height:1; } .ex-ans { font-size:clamp(38px,8vw,52px); font-weight:900; color:var(--yellow); line-height:1; } .concept-ex-caption { font-size:13px; color:rgba(255,255,255,.45); font-weight:600; margin-bottom:16px; } .concept-vis { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; } .cv-group { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; background:rgba(255,255,255,.07); border-radius:10px; padding:8px 10px; font-size:20px; } /* "How to write" demo mini-table */ .concept-write { margin-top:0; } .concept-write-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.38); margin-bottom:12px; text-align:center; } .concept-write-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; } .demo-row { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.06); border-radius:9px; padding:8px 14px; font-size:14px; font-weight:700; color:rgba(255,255,255,.8); } .demo-n { color:var(--op,#06D6A0); font-weight:900; } .demo-x, .demo-eq { color:rgba(255,255,255,.3); font-size:12px; } .demo-i { min-width:18px; text-align:center; } .demo-p { color:var(--yellow); font-weight:900; min-width:28px; text-align:right; } @media (min-width:540px) { .concept-write-grid { grid-template-columns:repeat(5,1fr); } .concept-steps { flex-direction:row; } .concept-step { flex-direction:column; align-items:center; text-align:center; flex:1; } } /* ── Tables 1–5 section ────────────────────────────────── */ .tbl-section-hdr { text-align:center; color:white; margin-bottom:20px; } .tbl-section-hdr h2 { font-size:clamp(20px,4vw,28px); font-weight:900; margin:6px 0 4px; } .tbl-section-hdr p { font-size:13px; color:rgba(255,255,255,.4); font-weight:600; } /* Table cards grid */ .tbl-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:36px; } @media (min-width:640px) { .tbl-grid { grid-template-columns:repeat(3,1fr); } } @media (min-width:1024px) { .tbl-grid { grid-template-columns:repeat(5,1fr); } } .tbl-card { background:rgba(255,255,255,.07); backdrop-filter:blur(12px); border:2px solid rgba(255,255,255,.1); border-radius:var(--r); overflow:hidden; transition:all .3s var(--spring); } .tbl-card:hover { transform:translateY(-6px); box-shadow:0 18px 42px rgba(0,0,0,.38); border-color:var(--tbl-color,rgba(255,255,255,.3)); } .tbl-card-hdr { background:var(--tbl-color,#06D6A0); padding:16px 12px; text-align:center; color:white; } .tbl-emoji { font-size:28px; display:block; margin-bottom:4px; } .tbl-title { font-size:13px; font-weight:900; letter-spacing:.3px; } .tbl-rows { padding:4px 0; } .tbl-row { display:flex; align-items:center; justify-content:space-between; padding:7px 13px; font-size:13px; font-weight:700; color:rgba(255,255,255,.82); cursor:pointer; transition:background .15s; -webkit-tap-highlight-color:transparent; } .tbl-row:hover { background:rgba(255,255,255,.09); } .tbl-row-alt { background:rgba(255,255,255,.035); } .tbl-row-active { background:rgba(6,214,160,.22) !important; color:white; } .tbl-sym, .tbl-eq { color:rgba(255,255,255,.3); font-size:11px; } .tbl-n { color:var(--tbl-color,#06D6A0); font-weight:900; min-width:14px; } .tbl-i { min-width:16px; text-align:center; } .tbl-p { font-weight:900; color:var(--yellow); min-width:28px; text-align:right; } /* ── Custom table generator ────────────────────────────── */ .gen-card { background:rgba(255,255,255,.08); backdrop-filter:blur(18px); border:2px solid rgba(255,255,255,.12); border-radius:var(--r); padding:28px 22px; color:white; } .gen-hdr { display:flex; align-items:flex-start; gap:16px; margin-bottom:22px; } .gen-icon { font-size:34px; flex-shrink:0; margin-top:2px; } .gen-hdr h2 { font-size:clamp(17px,3.5vw,21px); font-weight:900; margin-bottom:4px; } .gen-hdr p { font-size:13px; color:rgba(255,255,255,.5); font-weight:600; } .gen-hdr em { color:var(--op,#06D6A0); font-style:normal; } .gen-input-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; align-items:stretch; } .tbl-input { flex:1; min-width:100px; max-width:160px; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2); border-radius:var(--pill); color:white; font-family:'Nunito',sans-serif; font-size:24px; font-weight:900; padding:10px 20px; outline:none; text-align:center; transition:border-color .2s, background .2s; -webkit-appearance:none; -moz-appearance:textfield; } .tbl-input::-webkit-outer-spin-button, .tbl-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } .tbl-input::placeholder { color:rgba(255,255,255,.22); font-weight:600; font-size:16px; } .tbl-input:focus { border-color:var(--op,#06D6A0); background:rgba(255,255,255,.15); } .tbl-gen-btn { background:var(--op-g,linear-gradient(135deg,#06D6A0,#4ECDC4)); color:white; font-family:'Nunito',sans-serif; font-size:16px; font-weight:900; padding:12px 26px; border-radius:var(--pill); border:none; cursor:pointer; box-shadow:0 5px 18px var(--op-sh,rgba(6,214,160,.38)); transition:all .25s var(--spring); -webkit-tap-highlight-color:transparent; white-space:nowrap; } .tbl-gen-btn:hover { transform:translateY(-2px); box-shadow:0 9px 28px var(--op-sh,rgba(6,214,160,.52)); } .tbl-gen-btn:active { transform:scale(.94); transition-duration:70ms; } /* Result */ .gen-result { animation:slideUp .38s ease both; } .gen-result.hidden { display:none !important; } .gen-result.gen-error { color:var(--red); font-weight:700; font-size:14px; padding:12px 4px; display:block !important; } .gen-tbl-hdr { text-align:center; font-size:15px; font-weight:900; color:var(--op,#06D6A0); margin-bottom:12px; letter-spacing:.3px; } .gen-rows { display:grid; grid-template-columns:1fr 1fr; gap:6px; } .gen-row { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.07); border-radius:11px; padding:10px 14px; font-size:15px; font-weight:700; color:rgba(255,255,255,.85); transition:background .15s; } .gen-row:hover { background:rgba(255,255,255,.12); } .gr-n { color:var(--op,#06D6A0); font-weight:900; } .gr-x, .gr-eq { color:rgba(255,255,255,.3); font-size:12px; } .gr-p { font-weight:900; color:var(--yellow); } @media (min-width:520px) { .gen-rows { grid-template-columns:repeat(2,1fr); } } @media (min-width:760px) { .gen-rows { grid-template-columns:repeat(5,1fr); } }