/* Roadmap stylesheet (local to GradeLevelResources). Based on awheat.online/assets/css/site.css for visual parity. */ :root{ --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --font-fun: 'Comic Sans MS', 'Trebuchet MS', var(--font-sans); --bg: #0b1020; --surface: rgba(255,255,255,.10); --card: rgba(255,255,255,.14); --border: rgba(255,255,255,.18); --text: #eef2ff; --muted: rgba(238,242,255,.78); --accent: #77a6ff; --accent2: #f24fff; --good: #22c55e; --warn: #f59e0b; --bad: #ef4444; --shadow: 0 18px 55px rgba(0,0,0,.45); --radius: 16px; --radius-lg: 22px; --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 32px; } /* Opt-in wrapper: add class="site" to to apply */ body.site{ margin: 0; font-family: var(--font-sans); color: var(--text); background: radial-gradient(1200px 600px at 10% 10%, rgba(119,166,255,.22) 0%, transparent 55%), radial-gradient(900px 500px at 85% 15%, rgba(242,79,255,.18) 0%, transparent 60%), linear-gradient(160deg, #070918, #101a3a); min-height: 100vh; } body.site a{ color: inherit; text-decoration: none; } body.site a:hover{ text-decoration: underline; } .site-skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .site-skip:focus{ left: 12px; top: 12px; width: auto; height: auto; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.25); z-index: 999; } .site-container{ width: min(980px, calc(100% - 24px)); margin: 0 auto; padding: 18px 0 26px; } .site-frame{ border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(18,22,42,.94), rgba(10,12,26,.86)); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow); overflow: hidden; } .site-header{ padding: 20px 18px; background: linear-gradient(90deg, rgba(119,166,255,.22), rgba(242,79,255,.18)); border-bottom: 1px solid rgba(255,255,255,.12); } .site-header h1{ margin: 0; font-size: 28px; letter-spacing: .2px; } .site-header p{ margin: 8px 0 0; color: var(--muted); line-height: 1.5; font-weight: 600; } .site-content{ padding: 18px; } .site-row{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .site-spread{ display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .site-pill{ display: inline-flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--text); font-weight: 800; font-size: 13px; } .site-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 0; cursor: pointer; font-weight: 900; color: #081021; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 12px 26px rgba(119,166,255,.16); } .site-btn:hover{ filter: brightness(1.05); } .site-btn.secondary{ background: rgba(255,255,255,.10); color: var(--text); border: 1px solid rgba(255,255,255,.16); box-shadow: none; } .site-grid{ display: grid; grid-template-columns: 1.25fr .95fr; gap: 14px; } .site-card{ border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: 14px; } .site-card h2{ margin: 0; font-size: 18px; } .site-card p{ margin: 10px 0 0; color: var(--muted); line-height: 1.55; } .site-callout{ border-radius: var(--radius); padding: 12px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.26); } .site-callout strong{ color: #ffd59a; } .site-table{ width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.12); } .site-table th, .site-table td{ padding: 10px; border-bottom: 1px solid rgba(255,255,255,.10); vertical-align: top; text-align: left; } .site-table th{ background: rgba(255,255,255,.06); font-weight: 900; } .site-kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; padding: 2px 6px; border-radius: 8px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); } .site-footer{ padding: 16px 18px; border-top: 1px solid rgba(255,255,255,.12); color: var(--muted); font-size: 13px; } @media (max-width: 860px){ .site-grid{ grid-template-columns: 1fr; } } @media print{ body.site{ background: #fff; color: #000; } .site-frame{ box-shadow: none; border: 1px solid #ddd; } .site-btn, .site-pill{ border: 1px solid #ddd; background: #f5f5f5; color:#000; } a{ text-decoration: underline; } }