/* NOS Dourados — theme. Every colour of the site and of the flyers lives here. Two layers: 1. The palette: the raw colours (kept from the Calendário de Luta; same names as the variables of design.pen). 2. The roles: what each colour is for. css/style.css and css/flyers.css only use roles, never palette values or colour literals (`transparent` and `currentColor` aside). To try another theme, copy the ":root[data-theme='exemplo']" block at the end, give it a name and change the palette (and, if needed, a role). Then either set data-theme="" on the tag of index.html, or try it without editing anything by adding ?tema= to the address. The in index.html (browser bar on phones) can't read variables: update it by hand to the theme's --role-header. */ @font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url(../fonts/barlow-500.woff2) format('woff2'); } @font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(../fonts/barlow-600.woff2) format('woff2'); } @font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url(../fonts/barlow-700.woff2) format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600.woff2) format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700.woff2) format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-800.woff2) format('woff2'); } :root { /* ---------- 1. Palette ---------- */ --color-brand: #E4002B; /* red: the header card, Sundays, primary actions */ --color-brand-hover: #C70026; --color-brand-tint: #FDEBEE; --color-brand-ring: #F2B8C3; --color-next: #FFC20E; /* yellow: the next activity */ --color-ink: #1C1C1E; /* graphite */ --color-ground: #EFEFEC; /* the wall */ --color-surface: #FFFFFF; /* paper */ --color-surface-hover: #F7F7F5; --color-seam: #D9D9D4; --color-muted: #5C5C61; --color-faded: #BDBDB8; --color-on-ink: #FFFFFF; --color-on-ink-muted: #B4B4B9; /* not used by the site yet; mirrors the design.pen palette */ --color-series-1: #0455A1; /* azul */ --color-series-2: #00875A; /* verde */ --color-series-3: #9B3894; /* lilás */ --color-series-4: #00808A; /* turquesa */ --color-series-5: #C25700; /* laranja */ --color-series-6: #5E6A71; /* prata */ --color-series-7: #7A4E2D; /* marrom */ --color-series-8: #C2185B; /* magenta */ /* ---------- 2. Roles ---------- */ --role-wall: var(--color-ground); /* page background */ --role-paper: var(--color-surface); /* sheets, panels, chips */ --role-paper-hover: var(--color-surface-hover); --role-ink: var(--color-ink); /* text */ --role-ink-soft: var(--color-muted); /* secondary text, icons */ --role-ink-faded: var(--color-faded); /* perforation holes, the scrollbar */ /* Day numbers of past or other-month days: lighter, but still 3:1 on paper. */ --role-ink-past: color-mix(in srgb, var(--color-muted) 55%, var(--color-faded)); --role-line: var(--color-seam); /* 1px seams, perforation */ --role-header: var(--color-brand); /* the calendar's printed header card */ --role-on-header: var(--color-on-ink); --role-binding: var(--color-brand); /* strip on top of each sheet */ --role-mark-binding: var(--color-ink); /* strip on top of the NOS mark */ --role-red-letter: var(--color-brand); /* Sundays and holidays */ --role-red-letter-past: color-mix(in srgb, var(--color-brand) 75%, var(--color-surface)); --role-red-letter-soft: var(--color-brand-ring); --role-accent: var(--color-brand); /* primary actions */ --role-accent-hover: var(--color-brand-hover); --role-on-accent: var(--color-on-ink); --role-selected: var(--color-brand-tint); /* the activity open in the panel */ --role-alert: var(--color-brand); /* errors, the big Cancelada stamp on flyers */ --role-alert-text: var(--color-brand-hover); /* small red text: reasons, the line stamp */ --role-alert-soft: var(--color-brand-tint); --role-alert-ring: var(--color-brand-ring); --role-next: var(--color-next); /* the next activity, nothing else */ --role-on-next: var(--color-ink); --role-strong: var(--color-ink); /* active chips, Hoje badge, segmented control */ --role-on-strong: var(--color-on-ink); --role-on-series: var(--color-on-ink); /* titles on sector-coloured bars */ --role-focus: var(--color-ink); --role-focus-on-color: var(--color-on-ink); /* focus ring on the red header and on ink */ --role-scrim: color-mix(in srgb, var(--color-ink) 55%, transparent); --role-shadow: color-mix(in srgb, var(--color-ink) 14%, transparent); --role-wash: color-mix(in srgb, var(--color-ink) 6%, transparent); /* hover wash on quiet controls */ --role-scrollbar: var(--color-faded); --role-chat: var(--color-ground); /* WhatsApp preview background */ --role-bubble: var(--color-surface); /* Sector colours: js/colors.js picks one per sector and sets it as --sector on the node. */ --role-series-1: var(--color-series-1); --role-series-2: var(--color-series-2); --role-series-3: var(--color-series-3); --role-series-4: var(--color-series-4); --role-series-5: var(--color-series-5); --role-series-6: var(--color-series-6); --role-series-7: var(--color-series-7); --role-series-8: var(--color-series-8); --role-no-sector: var(--color-muted); /* ---------- Type and shape ---------- */ --font-ui: 'Barlow', system-ui, sans-serif; --font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-sheet: 14px; --radius-pill: 999px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* Example theme, kept as a template: a graphite header instead of the red one. Try it with ?tema=exemplo, or set data-theme="exemplo" on in index.html. */ :root[data-theme='exemplo'] { --role-header: var(--color-ink); --role-binding: var(--color-ink); --role-mark-binding: var(--color-brand); }