/* ================================================================= Design tokens — Arhiva medijskih praksi Dizajn inspirisan: The Creative Independent (thecreativeindependent.com) ================================================================= */ :root { /* Boje po CPT-u (identično TCI paleti) */ --color-autori: #48699B; /* focuses-color */ --color-radovi: #c66026; /* approaches-color */ --color-manifestacije: #09099b; /* questions-color */ --color-institucije: #cdddbb; /* tips-color */ --color-publikacije: #f8f8ea; /* guides-color */ --color-predavanja: #def4ff; /* transmissions-color */ --color-resursi: #ffff80; /* series-color */ /* Sistem boja — --custom-background-color se setuje inline na po CPT-u */ --background-color: var(--custom-background-color, white); --color: black; --border-color: black; /* Tipografija */ --font: Courier, "Courier New", monospace; --font-size: 16px; --line-height: 1.3rem; /* Spacing */ --gap: 0.625rem; --pad: 1rem; --nav-gap: 0.5rem; --nav-pad: 0.75rem; --card-size: 270px; --radius-btn: 1.25rem; } /* Dark mode */ html.dark { --color: white; --border-color: white; } /* ================================================================= Reset ================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--font-size); background-color: var(--background-color); } body { font-family: var(--font); font-size: var(--font-size); line-height: var(--line-height); background-color: var(--background-color); color: var(--color); padding: var(--pad); margin: 0; } /* Naslovi — kao u TCI: inherituju veličinu i težinu */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; line-height: var(--line-height); } p { margin-top: 0; margin-bottom: 1rem; } ul, ol { padding-left: 1.5rem; } img { max-width: 100%; height: auto; display: block; } /* Linkovi — dotted underline → solid on hover */ a { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 0.05rem; text-decoration-skip-ink: none; text-underline-offset: 4px; } a:hover, a.active { text-decoration-style: solid; } /* Utility */ .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; } /* Dugmad */ .button { color: var(--color); background: var(--background-color); border: 1px dotted var(--border-color); padding: 0.6875rem; text-decoration: none; cursor: pointer; user-select: none; font-family: var(--font); font-size: inherit; display: inline-block; } .button:hover { border-style: solid; text-decoration: none; } .rounded-button { color: var(--color); background: var(--background-color); border: 1px dotted var(--border-color); padding: 0.6875rem; border-radius: var(--radius-btn); text-decoration: none; cursor: pointer; user-select: none; font-family: var(--font); font-size: inherit; display: inline-block; } .rounded-button:hover { border-style: solid; text-decoration: none; }