/* Useful functions
color-mix() CSS function - MDN Web Docs - Mozilla
*/
/* Google fonts */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(latin-ext.woff2) format('woff2');
/* unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
*/}
/* Define basic colors and lengths */
:root {
--clrBackground0: #ffffff;
--clrBackground1: #f4f7ff;/* Modified by ON from #e8f0ff;*/
--clrBackground2: #dce8ff;/* Modified by ON from #d0e0ff;*/
--clrBackground3: #80a0ff;
--clrAccent: #2563eb;/* Added by ON */
--clrNavBg: #0f172a;/* Added by ON */
--clrNavFg: rgba(200, 225, 255, 0.9); /* #a1d0df; /*color-mix(in srgb, var(--clrBackground3) 33%, var(--clrBackground2) 67%);*/
/*#aec4ff;/* Added by HN */
--clrHotBackground2: #ffd0e0;
--clrHotBackground3: #ffa080;
--clrHotForeground: #800000;
--clrTextStd: #000000; /* #111827 suggested by ON */
--stdMaxWidth: 24cm; /* original = 27cm; 900px suggested by ON */
line-height: 1.4; /* 1.55 suggested by ON */
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; /* Modified from Calibri, Arial, sans-serif by ON */
font-size: 11pt; /* 16px suggested by ON */
background-color: var(--clrBackground1);
color: var(--clrTextStd);
text-align: justify;/* 'left' suggested by ON */
}
@media print {
:root {
font-size: 10pt;
}
}
/* Box-sizing */ /* Added by ON */ /* !!!!!!!! Crucial element !!!!!!!!!!!! AI: In CSS, box-sizing: border-box forces an element's width and height to include its content, padding, and borders. This prevents elements from expanding uncontrollably when you add spacing, making layout calculations much more intuitive and predictable. */
*, *::before, *::after {
box-sizing: border-box;
}
/* Prevent horizontal scroll: The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows.
In turn, 100vw == visible width */ /* Added by ON */
html {
scrollbar-gutter: stable;
}
/* Default styles of basic HTML elements */
body {
background-color: var(--clrBackground1);
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
padding-left: 0.5em; /* clamp(0.75rem, 4vw, 1.5rem); suggested by ON */
padding-right: 0.5em; /* clamp(0.75rem, 4vw, 1.5rem); suggested by ON */
max-width: var(--stdMaxWidth);
min-width: 300px;
}
body > p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, body > form {
max-width: var(--stdMaxWidth); /* We cannot set max-width for , since tables and other elements then cannot expand beyond the body width */
min-width: 300px;
margin-left: auto; /* Setting margin-left and margin-right to auto centers the elements by default */
margin-right: auto;
}
a:link, a:visited, a:active {
color: color-mix(in srgb, var(--clrTextStd) 25%, var(--clrAccent) 75%); /* Modified by ON from #0010e0; */
text-decoration: underline;
text-decoration-style: dotted;
}
a:link.inline, a:visited.inline, a:active.inline {
text-decoration: none;
}
h1 {
text-align: center;
font-weight: bold;
font-size: 1.5rem; /* Modified by ON from 150%; */
letter-spacing: -0.01em; /* Added by ON */
margin-top: 4ex;
border-top: 2px solid var(--clrAccent); /* Modified by ON from 1px solid var(--clrBackground3); */
border-bottom: 2px solid var(--clrAccent); /* Modified by ON from 1px solid var(--clrBackground3); */
background-color: var(--clrBackground2);
padding: 0.6rem 0;
}
h1.hot {
background-color: var(--clrHotBackground2);
border-color: var(--clrHotBackground3);
color: var(--clrHotForeground);
}
h2 {
font-size: 130%;
text-align: left;
padding-top: 2ex;
}
h3 {
font-size: 115%;
text-align: left;
padding-top: 2ex;
}
h4 {
font-size: 100%;
text-align: left;
padding-top: 2ex;
}
td,th { /* Border-less tables need additional horizontal spacing to maintain readability (contact.php) */
padding-right: 2ex;
}
a.external {
background: transparent url('img/externallink.svg') no-repeat right center;
background-size: 1em;
padding-right: 1.25em;
}
a.stdtext {
color: var(--clrTextStd);
}
img, iframe {
border: none;
}
iframe.c { /* centered and scaled on responsive webs - DO NOT FORGET TO SET aspect-ratio ON THE APPROPRIATE iframe ELEMENT!!! */
display:block;
margin: 0 auto;
/* aspect-ratio must be set to enable the following construction for resizing the content */
max-width: 100%;
height: 100%;
}
table.address {
max-width: 100%;
border-collapse: collapse;
margin-left: 0;
margin-top: 1ex;
margin-bottom: 1ex;
}
table.address td {
vertical-align: top;
text-align: left;
padding: 0;
margin: 0;
}
table.address td:nth-child(1) {
text-align: center;
padding-right: 0.2em;
width: 0.2em;
}
/* Hero header - by Ondra Novotny */
.site-header {
max-width: var(--stdMaxWidth); /* Added by HN */
position: relative;
/* Full-bleed: escape body max-width + padding */
/* width: 100vw; Removed by HN */
/* margin-left: calc(50% - 50vw); Removed by HN */
margin-top: 0;
margin-bottom: 0;
background: var(--clrNavBg);
overflow: hidden;
}
#hero-canvas {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
display: block;
}
.hero-overlay {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
}
/* Seems to be unused...
.hero-cta {
background: var(--clrAccent);
color: white;
text-align: center;
font-style: italic;
padding: 0.35em 1.5em;
font-size: 0.88em;
letter-spacing: 0.015em;
}
*/
.hero-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 1.1em;
padding: 0.8em 1.5em;
}
.hero-logo-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.hero-logo-img {
width: 100px;
height: auto;
filter: drop-shadow(0 0 14px rgba(80,140,255,0.8)); /* Blure around the galooping horse */
}
/* Revision by HN */
.hero-text {
min-width: 0;
text-align: left;
flex: 1;
}
.hero-text a {
color: var(--clrNavFg);
transition: color 0.2s;
}
.hero-text a:hover {
color: var(--clrBackground2);
}
.hero-name {
font-size: 2rem;
font-weight: bold;
line-height: 1.1;
}
/*.hero-name a {
display: inline-block;
} */
.hero-sub {
display: block;
margin-top: 0.25em;
}
.hero-links {
display: flex;
flex-direction: column;
gap: 0.3em;
align-items: flex-start;
justify-content: center;
margin-top: 0;
flex-shrink: 0;
}
.hero-links a {
display: flex;
align-items: center;
gap: 0.35em;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 20px;
padding: 0.3em 0.9em;
color: var(--clrNavFg); /* Modified by HN from color: rgba(200, 225, 255, 0.9); */
font-size: 0.85rem;
transition: background 0.2s, border-color 0.2s;
white-space: nowrap;
text-decoration: none;
}
.hero-links a:hover, .hero-links a:focus {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.4);
color: var(--clrBackground2); /* Modified by HN from color: #fff; */
}
.hero-links a img {
filter: brightness(0) invert(1);
opacity: 0.8;
flex-shrink: 0;
}
/* Tablet: hide link labels */
/*@media (max-width: 780px) { */
@media (max-width: 640px) {
.hero-links span {
display: none;
}
.hero-links a {
padding: 0.35em 0.5em;
}
}
/* Mobile hero */
@media (max-width: 500px) {
/* .hero-body {
flex-direction: column;
align-items: center;
text-align: center;
padding: 0.8em 1em 1em;
}
.hero-text { text-align: center; } */
.hero-links {
flex-direction: row;
justify-content: center;
gap: 0.3em;
margin-top: 0.4em;
}
.hero-logo-img {
width: 56px;
}
.hero-name {
font-size: 1.3em;
}
.hero-sub {
display: none;
}
}
/* !!! To be revised/checked for being obsolete !!! */
/*.header-ad {
background: var(--clrBackground3);
color: white;
text-align: center;
font-style: italic;
padding-top: 0.25ex;
padding-bottom: 0.25ex;
margin-bottom: 2ex;
}
@media print {
.header-ad {
font-size: 10pt;
}
}
*/
.header-ad { /* container */
background: var(--clrNavBg);
color: white;
font-style: italic;
max-width: var(--stdMaxWidth);
text-align: right;
overflow: clip;
}
.header-ad > div { /* scrolling element */
display: flex;
align-items: center;
justify-content: space-around;
width: fit-content;
white-space: nowrap;
animation: slideleft 65s infinite linear;
}
.header-ad > div > div { /* individual components */
width: 100vw;
}
@keyframes slideleft {
0% {transform:translate(20%)}
100% {transform:translate(-100%)}
}
@media print {
.header-ad {
display: none;
}
}
/*
.header {
width: 100%;
border: none;
border-collapse: collapse;
text-align: left;
margin-bottom: 3ex;
}
.header td {
padding: 0;
}
.header td:nth-child(1) > img {
padding-right: 1em;
}
.header td:nth-child(2) {
width: 100%;
}
.header td:nth-child(2) > div:nth-child(1) {
font-weight: bold;
font-size: 250%;
line-height: 1.0;
}
.header td:nth-child(2) > div:nth-child(2) {
padding-top: 0.5ex;
}
.header td:nth-child(3) {
padding-left: 1em;
line-height: 1.8;
white-space: nowrap;
}
@media print {
.header td:nth-child(3) {
visibility: hidden;
}
}
.header td:nth-child(3) div img {
vertical-align: middle;
padding-right: 0.5em;
}
*/
/*.funding {
margin-top: 4ex;
margin-bottom: 4ex;
text-align: center;
border: none;
border-top: 4px solid var(--clrBackground3);
}
.funding legend {
margin: auto;
font-size: larger;
font-weight: bold;
background: var(--clrBackground2);
border: 2px solid var(--clrBackground3);
padding: 1ex 1em;
}
.funding img {
padding-left: 12px;
padding-right: 12px;
padding-top: 2ex;
}
.footer {
background-color: var(--clrBackground2);
font-size: 70%;
padding: 1ex 1em;
border-top: 1px solid var(--clrBackground3);
width: 100%;
font-weight: normal;
}
.footer td:nth-child(1) {
width: 40%;
text-align: left;
}
.footer td:nth-child(2) {
width: 20%;
text-align: center;
}
.footer td:nth-child(3) {
width: 40%;
text-align: right;
}
*/
/* Partners + footer (Ondra Novotny) */
footer {
margin-top: 0;
/* Removed by HN width: 100vw;
margin-left: calc(50% - 50vw); */
}
footer::before {
content: '';
display: block;
height: 3.5em;
background: linear-gradient(to bottom, var(--clrBackground1), #162032);
}
/* When a dark submenu bar sits directly above the footer, hide the gradient
(the submenu already provides the dark colour – no light→dark→light valley) */
.menugridcontainer + .site-footer-wrap::before {
display: none;
}
.site-partners {
background: #162032;
padding: 1.6em 1.5em 1.4em;
text-align: center;
}
.site-partners__label {
display: inline-block;
font-size: 1em;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: white;
border: 1px solid rgba(100, 160, 255, 0.5);
padding: 0.3em 1.4em;
margin-bottom: 1.3em;
border-radius: 4px;
}
.site-partners__logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1em 2em;
}
.site-partners__logos a {
display: inline-flex;
align-items: center;
opacity: 1;
/* Removed by HN: filter: brightness(1.8) saturate(0.7); */
text-decoration: none; /* Added by HN */
}
.site-partners__logos a:hover {
filter: brightness(1.8) saturate(0.7);
filter: drop-shadow(0 0 14px rgba(255,255,255,0.9)); /* Blure around the logo. Modified by HN from the original value filter: brightness(2.2) saturate(1); */
}
/*
Removed by HN: dimensions are specified in the code
.site-partners__logos img {
height: 40px;
width: auto;
}*/
.site-footer-bar {
background-color: var(--clrNavBg);
border-top: 2px solid rgba(37,99,235,0.4);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0.7em 1.5em;
font-size: 0.75em;
/* Removed by HN: color: rgba(180,210,255,0.55); */
gap: 0.5em;
}
.site-footer-bar, .site-footer-bar a { /* Added by HN */
color: white;
}
.site-footer-bar__left {
text-align: left;
}
.site-footer-bar__center {
text-align: center;
/* Removed by HN: color: rgba(180,210,255,0.4); */
/* Removed by HN: font-size: 0.95em; */
}
.site-footer-bar__right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1em;
}
.site-footer-bar a {
/* Removed by HN: color: rgba(180,210,255,0.65);*/
text-decoration: none;
}
.site-footer-bar a:hover {
color: #fff;
}
.site-footer-bar img {
opacity: 0.5;
vertical-align: middle;
}
.site-footer-bar img:hover {
opacity: 1;
}
@media (max-width: 560px) {
.site-footer-bar {
grid-template-columns: 1fr;
grid-template-areas: "center" "left" "right";
text-align: center;
gap: 0.3em;
}
.site-footer-bar__left { grid-area: left; text-align: center; }
.site-footer-bar__center { grid-area: center; }
.site-footer-bar__right { grid-area: right; justify-content: center; }
}
/* Menu-like table in the ARCHIVE.PHP file */
.archivetbl {
border-collapse: collapse;
margin: auto;
}
.archivetbl tr:nth-child(odd) {
background-color:var(--clrBackground2);
}
.archivetbl tr:nth-child(even) {
background-color:var(--clrBackground3);
}
.archivetbl th {
background-color:var(--clrBackground3);
}
.archivetbl td, .archivetbl th {
text-align: center;
padding: 1ex 1em;
}
.archivetbl td.disabled {
color: #808080;
background-color: #c0c0c0;
}
/* Style applied for the 17 IYPT tasks in the TASKS.PHP file */
.task-title {
text-align: left;
padding-top: 2ex;
font-weight: bold;
font-size: larger;
}
.task-text {
margin-top: 1ex;
}
.task-text img {
float: right;
margin-left: 1em;
margin-top: 1ex;
margin-bottom: 1ex;
}
.task-advisor {
font-weight: normal;
font-size: small;
font-style: italic;
color: #808080;
}
.task-links, .task-links a {
font-weight: normal;
font-size: small;
font-style: italic;
/* color: #808080; */
margin-top: 1ex;
}
.task-links > ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 3ex;
}
.task-links > ul > li {
text-align: left;
}
/*.task-ad {
background-color: var(--clrBackground3);
text-align: center;
color: #ffffff;
padding: 1ex 1em;
margin-left: 4em;
margin-right: 4em;
}
Modified by Ondra Novotny
*/
/*.task-ad {
background: #fff;
border: 1px solid rgba(59,130,246,0.25);
border-radius: 12px;
text-align: center;
color: #0f172a;
padding: 1.5em 2em;
margin: 3em auto 2em;
max-width: var(--stdMaxWidth);
box-shadow: 0 4px 15px rgba(0, 30, 100, 0.05);
}
2nd modification by Ondra Novotny
*/
.task-ad {
background: #fff;
border: none;
border-top: 4px solid var(--clrAccent);
border-radius: 12px;
text-align: center;
color: #0f172a;
padding: 2em 2.5em;
margin: 3em auto 2em;
max-width: var(--stdMaxWidth);
box-shadow: 0 8px 25px rgba(0, 30, 100, 0.06);
/* font-size: 1.05em; Removed by HN */
font-weight: 500;
}
/* Style applied for the 17 IYPT tasks in the TASKS.PHP file when 'both' mode is on */
.taskgridcontainer {
display: grid;
column-gap: 1.5em;
row-gap: 0;
grid-template-columns: repeat(auto-fill, minmax(10cm, 1fr) ) ; /* Overridden for print ... */
padding-top: 1em;
padding-bottom: 1em;
}
@media print {
.taskgridcontainer {
grid-template-columns: repeat(auto-fill, minmax(8cm, 1fr) ) ;
}
}
.taskgriditem {
}
.itemize li {
margin-top: 1.5ex;
margin-bottom: 1.5ex;
margin-right: 3em;
}
.tt {
font-family: courier;
}
.todo {
color: #b0b0b0;
background-color: #ffffb0;
}
.float_l {
float: left;
margin-right: 1em;
margin-bottom: 1ex;
}
.float_r {
float: right;
margin-left: 1em;
margin-bottom: 1ex;
}
.float_r .caption {
background: right;
font-size: 85%;
}
.stdgridcontainer {
display: grid;
gap: 1em; /* Modified by ON from grid-gap: 0; */
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr) ) ;
padding-top: 1em;
padding-bottom: 1em;
}
.stdgriditem {
padding: 1em;
border-radius: 8px; /* Added by ON */
background: var(--clrBackground0); /* Added by ON */
box-shadow: 0 2px 8px rgba(0, 30, 100, 0.08); /* Added by ON */
transition: background-color 0.2s; /* Added by ON */
}
.stdgriditem img {
display: block;
/* margin: auto;
margin: 0;*/
border-radius: 5px; /* Added by ON */
}
.stdgriditem img.inline_l { /* Used namely in contacts_whoiswho.php */
float: left;
padding-top: 1em; /* Must be same as .stdgriditem */
padding-right: 0.5em;
}
.stdgriditem a {
color: var(--clrTextStd);
}
.stdgriditem:hover {
background-color: var(--clrBackground2);
}
.stdgriditem p:nth-child(1) { /* Title of the grid item */
text-align: center;
font-weight: bold;
font-size: 125%;
margin: 0;
padding-bottom: 1ex;
}
/* Menu bar
.menugridcontainer {
display: grid;
grid-template-columns: repeat(auto-fill, 7em) ;
grid-gap: 0;
justify-content: center;
align-content: center;
background-color: var(--clrBackground2);
border-bottom: 2px solid var(--clrBackground3);
}
@media print {
.menugridcontainer {
font-size: 8pt;
}
}
.menugridcontainer.first { /* First menu line --> draw the top border
border-top: 2px solid var(--clrBackground3);
}
.menugridcontainer.volumes { /* Other volumes in index.php and results.php --> narrower width of items
grid-template-columns: repeat(auto-fill, 5.5em);
row-gap: 0.5ex;
}
.menugridcontainer>div { /* Items inside the menugridcontainer
vertical-align: middle;
height: 3.5ex;
padding: 0.5em;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: normal;
}
.menugridcontainer>div.selected, .menugridcontainer>div.selectedparent {
font-weight: bold;
background-color: var(--clrBackground0);
}
.menugridcontainer>div.selectedparent {
background-color: #e8f0ff;
}
.menugridcontainer>div a:hover {
color: #ff0000;
} */
/* Submenu rows --> list of volumes, typically on the bottom of the page */
.menugridcontainer {
/* Full-bleed, matches sticky nav */
/* Removed hy HN: width: 100vw;
margin-left: calc(50% - 50vw); */
display: flex;
flex-wrap: wrap;
justify-content: center;
background: linear-gradient(180deg, rgba(10,22,60,0.99) 0%, rgba(8,16,45,0.99) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(59,130,246,0.25);
box-shadow: 0 4px 16px rgba(0,10,50,0.4);
}
@media print {
.menugridcontainer {
font-size: 8pt;
width: auto;
margin-left: 0;
background: transparent;
border-bottom: 1px solid var(--clrBackground3);
}
}
.menugridcontainer.volumes {
gap: 0;
}
.menugridcontainer>div {
flex: 1;
padding: 0.5em 0.8em;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.82em;
color: rgba(130, 175, 240, 0.75);
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.menugridcontainer>div a {
color: inherit;
text-decoration: none;
}
.menugridcontainer>div:hover {
color: #fff;
background: rgba(59,130,246,0.12);
border-bottom-color: rgba(96,165,250,0.4);
}
.menugridcontainer>div.selected, .menugridcontainer>div.selectedparent {
font-weight: 700;
color: #bfdbfe;
background: rgba(59,130,246,0.18);
border-bottom: 3px solid #3b82f6;
padding-bottom: calc(0.45em - 1px);
box-shadow: inset 0 -3px 10px rgba(59,130,246,0.25);
}
/* Primary menu bar */
.menubar {
/* Full-bleed nav – sticky, hides on scroll down once stuck */
/* Removed by HN:
width: 100vw;
margin-left: calc(50% - 50vw); */
position: sticky;
top: 0;
z-index: 200;
overflow: visible;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
min-height: 3em;
background: linear-gradient(180deg, rgba(15,30,70,0.97) 0%, rgba(10,20,55,0.97) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(96,165,250,0.5);
border-bottom: 1px solid rgba(59,130,246,0.2);
box-shadow: 0 4px 20px rgba(0,10,40,0.45), 0 1px 0 rgba(96,165,250,0.15) inset;
transition: transform 0.3s ease, box-shadow 0.3s;
}
.menubar.nav-hidden {
transform: translateY(-100%);
box-shadow: none;
}
/* sliding indicator – moves to hovered/active item via JS */
.nav-slider {
position: absolute;
bottom: -1px;
left: 0;
height: 2px;
width: 60px;
z-index: 10;
background: linear-gradient(90deg, rgba(59,130,246,0), #3b82f6, rgba(59,130,246,0));
border-radius: 1px;
opacity: 0;
pointer-events: none;
transition: left 0.2s ease, width 0.2s ease, opacity 0.2s;
}
.menuprimary {
display: flex;
align-items: stretch;
}
.menuprimary--left {
justify-content: flex-end;
}
.menuprimary--right {
justify-content: flex-start;
}
.menuprimary > div {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
padding: 0 0.25em;
font-weight: 500;
font-size: 0.88em;
letter-spacing: 0.02em;
color: rgba(160, 200, 255, 0.85);
background-color: transparent;
text-align: center;
white-space: nowrap;
transition: color 0.15s, background 0.15s;
}
.menuprimary > div:last-child {
border-right: none;
}
.menuprimary > div + div {
border-left: none;
}
.menuprimary > div a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0.55em 1.25em;
border-radius: 0;
color: inherit;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.menuprimary > div:hover {
color: #fff;
background: rgba(59,130,246,0.15);
}
.menuprimary > div a:hover {
background: none;
color: inherit;
}
.menuprimary > div.selected,
.menuprimary > div.selectedparent {
color: #fff;
background: rgba(59, 130, 246, 0.25);
box-shadow: inset 0 -3px 0 #60a5fa;
}
.menuprimary > div.selected a,
.menuprimary > div.selectedparent a {
color: #dbeafe;
background: none;
box-shadow: none;
}
/* Hamburger button */
.hamburger-btn {
background: none;
border: none;
cursor: pointer;
padding: 0 1em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 3.2em;
flex-shrink: 0;
align-self: stretch;
}
.hamburger-btn span {
display: block;
width: 18px;
height: 1.5px;
background-color: rgba(180, 210, 255, 0.6);
border-radius: 2px;
transition: transform 0.2s, opacity 0.2s;
transform-origin: center;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.hamburger-btn:hover { opacity: 1; }
.hamburger-btn:hover span { background-color: rgba(220, 235, 255, 0.9); }
/* Hamburger dropdown */
.hamburger-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 13em;
background: rgba(13, 20, 38, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(37, 99, 235, 0.3);
z-index: 300;
box-shadow: 0 12px 36px rgba(0,0,0,0.5);
border-radius: 10px;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s ease, visibility 0s 0.2s;
}
.hamburger-dropdown.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity 0.2s, transform 0.2s ease, visibility 0s;
}
.hamburger-dropdown > div {
padding: 0;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.06);
transition: background-color 0.14s;
font-size: 0.92em;
font-weight: 600;
letter-spacing: 0.03em;
}
.hamburger-dropdown > div:last-child { border-bottom: none; }
.hamburger-dropdown > div:hover { background-color: rgba(37, 99, 235, 0.22); }
.hamburger-dropdown > div a {
display: block;
width: 100%;
padding: 0.7em 1.2em;
color: rgba(200, 225, 255, 0.85);
text-decoration: none;
}
.hamburger-dropdown > div:hover a { color: #fff; }
.hamburger-dropdown > div.selected a,
.hamburger-dropdown > div.selectedparent a {
font-weight: bold;
color: #fff;
}
@media print {
.menubar {
position: static;
transform: none;
width: auto;
margin-left: 0;
background: transparent;
border-bottom: 1px solid var(--clrBackground3);
box-shadow: none;
}
.hamburger-btn, .hamburger-dropdown { display: none !important; }
.menuprimary > div {
color: var(--clrTextStd);
font-size: 8pt;
border: none;
background: transparent;
}
.menuprimary > div a { color: var(--clrTextStd); }
}
/* Mobile primary nav */
@media (max-width: 600px) {
.menuprimary > div {
font-size: 0.82em;
}
.menuprimary > div a {
padding: 0.9em 0.2em;
white-space: normal;
line-height: 1.2;
}
}
/* Intended for a button at the end of the page displaying a link to the parent menu item */
/* Added by HN based on ON */
div.navig_parent {
text-align: center;
margin-bottom: 2em;
}
div.navig_parent > a {
display: inline-flex;
align-items: center;
gap: 0.5em;
background: var(--clrAccent);
color: #fff;
font-weight: bold;
/* font-size: 0.9em; */
padding: 0.65em 1.6em;
border-radius: 8px;
text-decoration: none;
}
div.navig_parent > a:hover {
background: color-mix(in srgb, var(--clrAccent) 75%, white 25%);
transition: background 0.2s, transform 0.2s;
}
/* Aktuality cards (index.php), developed by Ondra Novotny */
.aktgrid {
display: grid;
gap: 1em; /* Original value 1.15em modified by HN */
xxgrid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-template-columns: repeat(3, 1fr);
padding-top: 1em;
padding-bottom: 1em;
max-width: var(--stdMaxWidth); /* Added by HN */
align-self: center;
/* align-items: stretch (default) – same height per row */
}
.aktcard {
border-radius: 10px;
background: var(--clrBackground0);
box-shadow: 0 2px 8px rgba(0,30,100,0.08);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s, box-shadow 0.2s;
text-align: left; /* Added by HN */
}
.aktcard--link:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,30,100,0.15);
}
/* Removed by HN .aktcard-a, .aktcard > a {
display: flex;
flex-direction: column;
flex: 1;
text-decoration: none;
color: inherit;
} */
/* Added by HN */
.aktcard > a{
display: flex;
flex-direction: column;
flex: 1;
}
.aktcard-img {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--clrBackground0); /* Original value #1a2540; modified by HN */
flex-shrink: 0;
}
.aktcard-img img {
width: 100%;
height: 100%;
/* object-fit: cover; Removed by HN */
display: block;
transition: transform 0.35s ease;
}
.aktcard--link:hover .aktcard-img img {
transform: scale(1.04);
}
.aktcard-noimg {
height: 3em;
background: linear-gradient(120deg, #0f172a 0%, #1e3a8a 100%);
display: flex;
align-items: flex-end;
padding: 0.6em 0.85em;
flex-shrink: 0;
}
/* HN: .aktcard-date introduced and exchanged with .aktcard-badge */
.aktcard-badge, .aktcard-date {
position: absolute;
color: #fff;
font-size: 0.75em;
/* font-weight: 600; Removed by HN */
padding: 0.2em 0.6em;
border-radius: 3px;
}
.aktcard-badge {
bottom: 0;
right: 0;
/* background: rgba(37,99,235,0.85); */
background: rgba(64,64,64,0.25);
}
.aktcard-date {
left: 0;
bottom: 0;
background: rgba(37,99,235,1);
background: rgba(0.5,0.5,0.5,0.25);
background: rgba(64,64,64,0.25);
}
.aktcard-badge--noimg {
position: static;
margin-left: auto;
}
.aktcard-body {
padding: 0.75em;/* Original value padding: 0.85em 1em 1em; modified by HN*/
display: flex;
flex-direction: column;
flex: 1;
gap: 0.3em;
}
.aktcard-title {
/* font-size: 0.97em; Removed by HN*/
font-weight: bold;
color: #0f172a;
line-height: 1.25;
margin: 0;
text-align: left; /* Added by HN */
letter-spacing: -0.03em; /* Added by HN */
}
.aktcard-title.external {
background: transparent url('img/externallink.svg') no-repeat right center;
background-size: 1em;
padding-right: 1.25em;
}
.aktcard-text, .aktcard-fulltext { /* Added by HN: .aktcard--fulltext */
/* font-size: 0.86em; Removed by HN*/
color: #475569;
line-height: 1.5;
margin: 0;
/* display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;*/
letter-spacing: -0.03em; /* Added by HN */
}
.aktcard-text {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aktcard-fulltext > div {
padding-bottom: 0.5em;
}
/* Removed by HN
.aktcard-cta {
font-size: 0.82em;
color: var(--clrAccent);
font-weight: 600;
margin-top: auto;
padding-top: 0.45em;
display: block;
}*/
@media (min-width: 1150px) {
.aktgrid {
/* Break out of 900px body → 4 equal columns at natural card size */
/* Removed by HN
width: 100vw;
margin-left: calc(50% - 50vw);
padding-left: clamp(0.75rem, 4vw, 1.5rem);
padding-right: clamp(0.75rem, 4vw, 1.5rem);
grid-template-columns: repeat(4, 1fr);*/
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 560px) {
.aktgrid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5em;
}
.aktcard-img {
aspect-ratio: 4 / 3;
}
.aktcard-body {
padding: 0.55em 0.65em 0.65em;
gap: 0.2em;
}
.aktcard-title {
font-size: 0.82em;
}
.aktcard-text {
font-size: 0.78em;
-webkit-line-clamp: 2;
}
.aktcard-cta {
font-size: 0.75em;
padding-top: 0.3em;
}
}
@media print {
.aktgrid {
grid-template-columns: repeat(2, 1fr);
}
.aktcard--link:hover {
transform: none;
box-shadow: none;
}
}
/* Added by ON */
/* Sekční hlavičky – náhrada h1 v rámci obsahu */
.sekce-hlavicka {
display: flex;
align-items: center;
gap: 0.7em;
max-width: var(--stdMaxWidth);
margin-left: auto;
margin-right: auto;
padding: 0.5em 0 0.5em 0;
border-bottom: 2px solid rgba(59,130,246,0.25);
margin-top: 2.4em;
margin-bottom: 1.1em;
}
.sekce-hlavicka__icon {
flex-shrink: 0;
color: var(--clrAccent);
display: flex;
align-items: center;
opacity: 0.7;
}
.sekce-hlavicka__icon svg {
width: 1.2em;
height: 1.2em;
}
.sekce-hlavicka__text {
font-size: 1.25em;
font-weight: 700;
color: var(--clrTextStd);
letter-spacing: -0.01em;
}
.sekce-hlavicka__sub {
display: inline-block;
font-size: 0.6em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #1e3a8a;
background: #bfdbfe;
padding: 0.25em 0.8em;
border-radius: 20px;
vertical-align: middle;
margin-left: 0.6em;
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 30, 100, 0.1);
}
@media print {
.sekce-hlavicka {
border-bottom: 1px solid var(--clrBackground3);
}
.sekce-hlavicka__icon { opacity: 1; }
}
/* Added by ON */
/* Tipy / praktické rady */
.tipy-grid {
display: grid;
gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
max-width: var(--stdMaxWidth);
margin-left: auto;
margin-right: auto;
padding-top: 0.5em;
padding-bottom: 1.2em;
}
.tip-box {
background: var(--clrBackground1);
border: 1px solid var(--clrBackground2);
border-radius: 8px;
padding: 1em 1.1em;
border-left: 3px solid var(--clrAccent);
transition: background 0.2s, box-shadow 0.2s;
}
.tip-box:hover {
background: var(--clrBackground2);
box-shadow: 0 2px 8px rgba(0,30,100,0.08);
}
.tip-box__q {
font-size: 0.9em;
font-weight: 700;
color: #0f172a;
margin-bottom: 0.35em;
}
.tip-box__a {
font-size: 0.86em;
color: #475569;
line-height: 1.5;
margin: 0;
}
@media print {
.tip-box {
border: 1px solid var(--clrBackground3);
break-inside: avoid;
}
}
@media (max-width: 600px) {
.tipy-grid {
grid-template-columns: 1fr;
}
}
/* Added by ON */
.content-card {
background: #fff;
border: 1px solid rgba(59,130,246,0.12);
border-radius: 12px;
padding: 1.4em 1.6em;
box-shadow: 0 2px 10px rgba(0,30,100,0.05);
margin-bottom: 1.5em;
}
.content-card h3 {
margin-top: 0;
padding-top: 0;
color: #0f172a;
font-size: 1.15em;
margin-bottom: 0.6em;
}
.content-card h4 {
color: #1e3a8a;
font-size: 0.97em;
margin-bottom: 0.4em;
padding-top: 0.6em;
}
.content-card h4:first-of-type {
padding-top: 0;
}
.content-card ul {
margin: 0 0 1em 0;
padding-left: 1.3em;
}
.content-card ul:last-child {
margin-bottom: 0;
}
.content-card p:last-child {
margin-bottom: 0;
}
/* Tables cells and paragraphs with explicit alignment */
td.c,th.c,p.c {
text-align: center;
}
td.l,th.l,p.l {
text-align: left;
}
td.r,th.r,p.r {
text-align: right;
}
/* Photogallery */
.gallery {
text-align: center;
}
.gallery img {
margin: 4px;
border-radius: 6px;
}
/* Gallery grid added by ON */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
gap: 1em;
margin-top: 1.5em;
}
.gallery-grid div {
background: #fff;
padding: 0.5em;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.gallery-grid img {
width: 100%;
height: auto;
border-radius: 4px;
display: block;
}
.gallery-grid p {
font-size: 0.8em;
color: #475569;
text-align: center;
margin: 0.5em 0 0 0;
}
/* Tables with YPT results */
.resultstbl {
max-width: unset;
border-collapse: collapse;
}
.resultstbl tr:nth-child(even) {
background-color: var(--clrBackground2);
}
.resultstbl td,th {
padding-top: 0.7ex;
padding-bottom: 0.7ex;
padding-left: 0.5em;
padding-right: 0.5em;
}
.resultstbl th {
font-weight: bold;
background-color: var(--clrBackground3);
}
.resultstbl td.section {
background-color: var(--clrBackground3);
font-weight: bold;
font-size: 100%;
}
/* Timeline in dates.php */
.timeline {
display: block;
background-color: var(--clrBackground2);
border: 2px solid var(--clrBackground3);
padding: 1ex 1em;
margin-top: 2ex;
color: black;
}
.timeline table {
font-size: larger;
font-weight: bold;
/* border: 1px solid black; */
width: 100%;
}
.timeline td {
width: 50%;
text-align: left;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.timeline td:nth-child(2) {
text-align: right;
}
.timeline.hot td:nth-child(2) {
color: red;
}
.timeline.past td:nth-child(2) {
font-style: italic;
font-weight: normal;
}
.timeline.nonypt {
background-color: #e0ffd0;
border: 2px solid #a0ff80;
}
.timeline.past {
background-color: #d0d0d0;
border: 2px solid #b0b0b0;
color: #404040;
}
.timeline.hot {
background-color: var(--clrHotBackground2);
border-color: var(--clrHotBackground3);
color: var(--clrHotForeground);
}
.tournament_inset {
float: right;
margin-left: 2em;
margin-bottom: 1ex;
}
.tournament_inset div {
font-size: 85%;
}
@media (max-width:540px) {
.tournament_inset {
float: none;
text-align: justify;
}
}
/* Page press.php */
.press_continue {
font-style: italic;
color: blue;
}
.codelike404 {
font-size: 200%;
}
.errmsg {
display: inline-block;
background-color: lightyellow;
width: 100%;
color: red;
font-style: italic;
padding: 1ex 1em;
}
.ywawy {
display: none;
/*visibility: hidden; */
}
/*
Simple selectors
* = universal selector
p = type selector
.class = class selector
.cls1.cls2 = class selector (element must match both classes)
#myId = Id selector (id="myId")
p.myClass#myId = compound selector (must be in this order)
Attribute selectors
a[title] = elements with a title attribute
a[href="https://example.org"] = elements with an href matching "https://example.org"
a[href*="example"] = elements with an href containing "example"
a[href$=".org" i] = elements with an href ending ".org", case-insensitive
a[class~="logo"] = elements whose class attribute contains the word "logo"
elements whose class attribute contains the word "logo"
[attr]
Represents elements with an attribute name of attr.
[attr=value]
Represents elements with an attribute name of attr whose value is exactly value.
[attr~=value]
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
[attr|=value]
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
[attr^=value]
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
[attr$=value]
Represents elements with an attribute name of attr whose value is suffixed (followed) by value.
[attr*=value]
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
[attr operator value i]
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
[attr operator value s]
Adding an s (or S) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).
Nesting selector
parentRule {
& childRule {
}
}
selector1 selector2 = descendant combinator
selector1>selector2 = child combinator (direct descendant combinator)
selector1~selector2 = subsequent-sibling combinator = all elements matching selector2 will be selected if they are preceded by selector1, provided both selector1 and selector2 share the same parent
selector1+selector2 = next-sibling combinator = only matches selector2 which is directly preceded by the selector1, provided both selector1 and selector2 share the same parent
selector1||selector2 = column combinator. When supported, selects nodes that belong to a column. For example, col || td will match all | elements that belong to the scope of the .
selector1|selector2 = namespace separator...
*/ |