/* Citiz — interface styles. Design rules that come from the design document: mobile first, large targets, adjustable text, high contrast, nothing conveyed by colour alone, right-to-left ready (logical properties throughout), reduced motion respected. Tokens first; components below. */ :root { color-scheme: light dark; --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --bg: #f4f6fb; --surface: #ffffff; --surface-2: #eef2f9; --text: #0f172a; --text-muted: #526074; --border: #d8dfea; --brand: #1e3a8a; --brand-strong: #172d6e; --brand-soft: #e3e9f8; --accent: #b45309; --accent-soft: #fdf1e0; --ok: #166534; --ok-soft: #dcfce7; --warn: #92400e; --warn-soft: #fef3c7; --bad: #991b1b; --bad-soft: #fee2e2; --focus: #f59e0b; --shadow: 0 1px 2px rgb(15 23 42 / .06), 0 8px 24px rgb(15 23 42 / .06); --radius: 14px; --radius-sm: 10px; --radius-lg: 22px; --space: 1rem; --content-width: 68rem; --tap: 44px; --sidebar-width: 17rem; --bottom-nav-height: 64px; } /* Dark tokens apply either when the system prefers dark and Settings > Apariencia hasn't forced light (the default, "Automático"), or when it explicitly forced dark — see BrowserStorage. ApplyThemeAsync / citiz.setTheme, which set data-theme on , and the inline script in index.html that applies a saved choice before first paint so there is no flash of the wrong theme while Blazor boots. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b1220; --surface: #111a2e; --surface-2: #17223a; --text: #e6ebf5; --text-muted: #a3aec4; --border: #2a3650; --brand: #93b4ff; --brand-strong: #b7cbff; --brand-soft: #1b2a4d; --accent: #fbbf24; --accent-soft: #3b2a0f; --ok: #86efac; --ok-soft: #14351f; --warn: #fcd34d; --warn-soft: #3b2f0f; --bad: #fca5a5; --bad-soft: #3d1414; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0b1220; --surface: #111a2e; --surface-2: #17223a; --text: #e6ebf5; --text-muted: #a3aec4; --border: #2a3650; --brand: #93b4ff; --brand-strong: #b7cbff; --brand-soft: #1b2a4d; --accent: #fbbf24; --accent-soft: #3b2a0f; --ok: #86efac; --ok-soft: #14351f; --warn: #fcd34d; --warn-soft: #3b2f0f; --bad: #fca5a5; --bad-soft: #3d1414; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35); } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } html { font-family: var(--font); font-size: 100%; line-height: 1.55; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; } h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); } h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); } h3 { font-size: 1.1rem; } p { margin: 0 0 .75em; } a { color: var(--brand); } ul { padding-inline-start: 1.25rem; } button, input, select { font: inherit; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 1rem; background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-sm); z-index: 100; } .skip-link:focus { inset-block-start: 1rem; } /* Shell ------------------------------------------------------------------------------------ */ .shell { min-height: 100vh; display: flex; align-items: flex-start; } /* Sidebar (desktop primary nav) ------------------------------------------------------------- */ .sidebar { width: var(--sidebar-width); flex-shrink: 0; min-height: 100vh; position: sticky; inset-block-start: 0; display: flex; flex-direction: column; gap: 1.75rem; padding: 1.25rem; background: var(--surface); border-inline-end: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--text); min-height: var(--tap); } .brand-mark { width: 28px; height: 28px; color: var(--brand); flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; } .brand-name { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; } .brand-tagline { color: var(--text-muted); font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .brand-mobile { display: none; align-items: center; gap: .5rem; } .brand-mobile .brand-name { font-size: 1.05rem; } .side-nav { display: flex; flex-direction: column; gap: .3rem; } .nav-item { display: flex; align-items: center; gap: .75rem; min-height: var(--tap); padding: .55rem .9rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-muted); font-weight: 700; font-size: .94rem; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--brand); color: #fff; } .nav-icon { display: flex; flex-shrink: 0; color: currentColor; } .badge.nav-new { margin-inline-start: auto; background: var(--accent-soft); color: var(--accent); } .nav-item.active .badge.nav-new { background: rgb(255 255 255 / .2); color: #fff; } .passport-card { margin-block-start: auto; padding: 1.1rem; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(150deg, #172d6e, #0b1220); } .passport-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .8rem; background: rgb(255 255 255 / .14); color: #fbbf24; margin-block-end: .7rem; } .passport-title { font-weight: 800; font-size: .92rem; } .passport-summary { margin-block-start: .3rem; font-size: .8rem; line-height: 1.5; color: rgb(255 255 255 / .78); } .passport-bar { margin-block-start: .8rem; accent-color: #93b4ff; } /* Top bar (language + settings only; primary nav lives in the sidebar / bottom nav) ---------- */ .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; inset-block-start: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; min-height: 64px; padding: .5rem clamp(.75rem, 3vw, 2rem); background: color-mix(in srgb, var(--surface) 96%, transparent); /* nearly opaque: the blur is a nicety, not what keeps text from showing through */ -webkit-backdrop-filter: blur(10px); /* iOS 15–17 Safari and WKWebView only honour the prefixed form */ backdrop-filter: blur(10px); border-block-end: 1px solid var(--border); } .topbar-tools { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; } .icon-link { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: 999px; color: var(--text-muted); } .icon-link:hover, .icon-link.active { background: var(--surface-2); color: var(--text); } .language-select select { min-height: var(--tap); padding: .35rem .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); } .content { flex: 1; width: 100%; max-width: var(--content-width); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) clamp(.75rem, 3vw, 2rem) 3rem; } .content:focus { outline: none; } .footer { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: center; padding: 1.25rem; color: var(--text-muted); font-size: .85rem; border-block-start: 1px solid var(--border); } .privacy-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 600; } /* Bottom tab bar (mobile primary nav) ---------------------------------------------------------- */ .bottom-nav { display: none; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; align-items: stretch; height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); padding-block-end: env(safe-area-inset-bottom, 0px); background: var(--surface); border-block-start: 1px solid var(--border); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: var(--tap); text-decoration: none; color: var(--text-muted); } .tab.active { color: var(--brand); } .tab-label { font-size: .64rem; font-weight: 700; } @media (max-width: 899px) { .sidebar { display: none; } .bottom-nav { display: flex; } .brand-mobile { display: flex; } .content { padding-block-end: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 1.5rem); } } /* Page furniture ---------------------------------------------------------------------------- */ .page-header { margin-block-end: 1.5rem; } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; color: var(--accent); margin-block-end: .35rem; } .lead { font-size: 1.1rem; color: var(--text-muted); max-width: 60ch; } .muted { color: var(--text-muted); } .small { font-size: .9rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.5rem); box-shadow: var(--shadow); } .card + .card { margin-block-start: 1rem; } .card h2:first-child, .card h3:first-child { margin-block-start: 0; } .grid { display: grid; gap: 1rem; } .grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .grid.four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .stack { display: flex; flex-direction: column; gap: 1rem; } .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .between { justify-content: space-between; } /* Buttons ----------------------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: var(--tap); padding: .55rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--surface-2); color: var(--text); font-weight: 700; text-decoration: none; cursor: pointer; transition: background .15s, transform .05s; } .button:hover { background: var(--border); } .button:active { transform: translateY(1px); } .button:disabled { opacity: .5; cursor: not-allowed; transform: none; } .button.primary { background: var(--brand); color: #fff; } .button.primary:hover { background: var(--brand-strong); } .button.ghost { background: transparent; border-color: var(--border); } .button.ghost:hover { background: var(--surface-2); } .button.small { min-height: 36px; padding: .3rem .75rem; font-size: .9rem; } .button.block { width: 100%; } .segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; background: var(--surface-2); border-radius: var(--radius-sm); } .segmented button { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .35rem .85rem; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-weight: 700; cursor: pointer; } .segmented button svg { flex-shrink: 0; } .segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } /* Forms ------------------------------------------------------------------------------------- */ .field { display: grid; gap: .35rem; align-content: start; margin-block-end: 1rem; } .field > span { font-weight: 700; } .field .hint { color: var(--text-muted); font-size: .9rem; font-weight: 400; } .field input[type="text"], .field input[type="date"], .field select, .text-input { min-height: var(--tap); padding: .5rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); width: 100%; } .field input[type="checkbox"] { width: 1.3rem; height: 1.3rem; } .check { display: flex; align-items: center; gap: .6rem; } /* Badges and status ------------------------------------------------------------------------- */ .badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .review-approved { background: var(--ok-soft); color: var(--ok); } .review-needs-review { background: var(--warn-soft); color: var(--warn); } .review-draft { background: var(--surface-2); color: var(--text-muted); border: 1px dashed var(--border); } .review-outdated { background: var(--bad-soft); color: var(--bad); } .notice { padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); } .notice.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .notice.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .notice.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; } .source-line { font-size: .85rem; color: var(--text-muted); margin-block-start: .75rem; } .source-line a { color: inherit; } /* Home -------------------------------------------------------------------------------------- */ .hero { /* Fixed brand colors, not tokens: this card always carries white text, and --brand/--ok/--accent turn into pale dark-mode tints that would break that contrast. */ background: linear-gradient(135deg, #1e3a8a 0%, #3b3f9a 60%, #6d28d9 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(1.5rem, 5vw, 2.25rem); box-shadow: var(--shadow); } .hero .eyebrow { color: #fde68a; } .hero h1, .hero h2 { color: #fff; max-width: 18ch; } .hero p { color: rgb(255 255 255 / .85); max-width: 60ch; font-size: 1.05rem; } .hero .button.primary { background: #fff; color: var(--brand-strong); } .hero .button.ghost { border-color: rgb(255 255 255 / .5); color: #fff; } .hero .chips span { background: rgb(255 255 255 / .16); color: #fff; } .greeting-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .home-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 800px) { .home-grid { grid-template-columns: 1fr; } } .streak-pill { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; } .streak-pill .stat-icon { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; } .pillar { display: block; text-decoration: none; color: inherit; } .pillar .card { height: 100%; display: flex; align-items: center; gap: .9rem; transition: transform .15s, border-color .15s; } .pillar:hover .card { transform: translateY(-2px); border-color: var(--brand); } .pillar-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: .85rem; color: #fff; } .pillar-icon.prepare { background: #1e3a8a; } .pillar-icon.communicate { background: #166534; } .pillar-icon.discover { background: #b45309; } .pillar-icon.participate { background: #6d28d9; } .pillar h3 { margin-block-end: .15rem; } .stat { display: grid; gap: .15rem; } .stat b { font-size: 2rem; font-weight: 800; color: var(--brand); line-height: 1; } .stat span { color: var(--text-muted); font-size: .9rem; } .chips { display: flex; flex-wrap: wrap; gap: .4rem; } .chips span, .chips button { padding: .3rem .7rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong); font-size: .9rem; font-weight: 600; border: 0; } .chips button { cursor: pointer; } .chips button:hover { background: var(--border); } .weekly-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; margin-block-start: 1rem; } .day-cell { text-align: center; } .day-mark { width: 2rem; height: 2rem; margin: 0 auto; border-radius: .6rem; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; background: var(--surface-2); color: var(--text-muted); } .day-mark.done { background: var(--ok-soft); color: var(--ok); } .day-mark.today { background: var(--brand-soft); color: var(--brand-strong); border: 2px solid var(--brand); } .day-cell .day-label { margin-block-start: .3rem; font-size: .65rem; color: var(--text-muted); } /* Prepare ----------------------------------------------------------------------------------- */ .question-card { border-inline-start: 5px solid var(--brand); } .question-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-block-end: .5rem; } .question-prompt { font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 700; margin-block-end: .75rem; } .answer-list { margin-block-start: 1rem; padding: .9rem 1rem; background: var(--surface-2); border-radius: var(--radius-sm); } .answer-label { font-weight: 700; margin-block-end: .35rem; } .answer-list ul { margin: 0; } /* Audio: recordings and the source badge ------------------------------------------------------ */ .listen-row { align-items: center; gap: .6rem; flex-wrap: wrap; } .badge.audio-official { display: inline-flex; align-items: center; gap: .3rem; background: var(--brand-soft); color: var(--brand-strong); } .badge.audio-synthetic { background: var(--surface-2); color: var(--text-muted); border: 1px dashed var(--border); } .audio-panel { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-block-start: .9rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .audio-panel .audio-note { flex-basis: 100%; } .play-mini { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-inline-end: .4rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--brand); cursor: pointer; vertical-align: middle; } .play-mini:hover { background: var(--brand-soft); } .audio-offer { display: flex; gap: 1rem; align-items: flex-start; margin-block-start: 1rem; background: var(--brand-soft); color: var(--brand-strong); border-color: transparent; } .audio-offer > svg { flex-shrink: 0; margin-block-start: .15rem; } .audio-offer p { margin: 0 0 .6rem; } .audio-offer-title { font-weight: 700; font-size: 1.1rem; } .progress { flex-grow: 1; min-width: 8rem; height: .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .progress > div { height: 100%; background: var(--brand); transition: width .2s; } .pack-list { display: flex; flex-direction: column; margin-block-start: .5rem; } .pack-row { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; border-block-start: 1px solid var(--border); } .pack-row:last-child { border-block-end: 1px solid var(--border); } .pack-info { flex-grow: 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .pack-ready { display: inline-flex; align-items: center; gap: .35rem; color: var(--brand-strong); font-weight: 700; white-space: nowrap; } .option { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: start; min-height: var(--tap); margin-block: .45rem; padding: .7rem .9rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; } .option:hover:not(:disabled) { border-color: var(--brand); } .option .key { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); font-size: .85rem; } .option.correct { border-color: var(--ok); background: var(--ok-soft); } .option.wrong { border-color: var(--bad); background: var(--bad-soft); } .option:disabled { cursor: default; } .feedback { margin-block-start: 1rem; padding: .9rem 1rem; border-radius: var(--radius-sm); font-weight: 600; } .feedback.ok { background: var(--ok-soft); color: var(--ok); } .feedback.close { background: var(--warn-soft); color: var(--warn); } .feedback.bad { background: var(--bad-soft); color: var(--bad); } .scoreboard { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: baseline; } .scoreboard b { font-size: 1.4rem; } .question-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .question-list details { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .question-list summary { padding: .75rem 1rem; cursor: pointer; font-weight: 600; display: flex; gap: .6rem; align-items: baseline; } .question-list summary .num { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 2.4rem; } .question-list details > div { padding: 0 1rem 1rem; } progress { width: 100%; height: 10px; border-radius: 999px; overflow: hidden; accent-color: var(--brand); } /* Communicate ------------------------------------------------------------------------------- */ .word-grid { display: flex; flex-wrap: wrap; gap: .4rem; } .word-grid button { min-height: 40px; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; } .word-grid button:hover { border-color: var(--brand); } .word-grid button.done { background: var(--ok-soft); border-color: transparent; color: var(--ok); } /* Discover ---------------------------------------------------------------------------------- */ .topic-card { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit; height: 100%; } .topic-card:hover { border-color: var(--brand); } .topic-category { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--accent); } .topic-card h3 { margin: 0; } .topic-card .muted { margin-block-start: auto; } /* Games ------------------------------------------------------------------------------------- */ .game-card { display: flex; flex-direction: column; gap: .5rem; } .game-card .button { margin-block-start: auto; align-self: flex-start; } /* Tables ------------------------------------------------------------------------------------ */ .table { width: 100%; border-collapse: collapse; font-size: .95rem; } .table th, .table td { text-align: start; padding: .6rem .5rem; border-block-end: 1px solid var(--border); vertical-align: top; } .table th { color: var(--text-muted); font-weight: 700; } .table-wrap { overflow-x: auto; } /* Loading ----------------------------------------------------------------------------------- */ .loading { display: flex; align-items: center; gap: .75rem; padding: 3rem 0; color: var(--text-muted); justify-content: center; } .spinner { width: 22px; height: 22px; border-radius: 999px; border: 3px solid var(--border); border-block-start-color: var(--brand); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .boot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; color: var(--text-muted); gap: 1rem; } .boot-mark { width: 48px; height: 48px; border-radius: 14px; background: var(--brand); animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .5; } } #blazor-error-ui { display: none; position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 1000; padding: .8rem 1.2rem; background: var(--warn-soft); color: var(--warn); border-block-start: 1px solid var(--border); } #blazor-error-ui .reload { margin-inline-start: .5rem; } #blazor-error-ui .dismiss { float: inline-end; border: 0; background: none; cursor: pointer; font-size: 1rem; color: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } @media (prefers-contrast: more) { :root { --border: #64748b; } .card { border-width: 2px; } } @media print { .topbar, .footer, .button, .segmented { display: none !important; } .card { box-shadow: none; } }