/*
Theme Name: Newsky
Theme URI: https://hedlajner.sk
Author: Hedlajner
Description: Vlastná bloková (FSE) téma pre spravodajský web Hedlajner. Postavená na firemných farbách loga a prehľadnom rozložení zameranom na čítanie článkov a titulkov.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: newsky
*/
.newsky-card-meta .taxonomy-category a {
text-decoration: none;
}
/* Jemny tien okolo videa a vsetkych obrazkov (karty, hlavny obrazok clanku,
obrazky v texte clanku). */
.newsky-intro-video,
.wp-block-post-featured-image img,
.wp-block-post-content img {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
/* Jemna svetlomodra ziara za nadpismi clankov (karty aj samotny clanok). */
.wp-block-post-title,
.wp-block-post-title a {
text-shadow: 0 0 10px rgba(120, 180, 255, 0.45);
}
/* Logo v hlavnom paneli jemne "dycha" (pomaly pulzuje) a ma jemnu svetlomodru
ziaru (drop-shadow sleduje tvar loga, nie hranaty box). Filter a animovany
transform su zamerne na dvoch roznych elementoch (rodic / dieta): predtym
boli oba na tom istom ![]()
, co Firefox rendruje zle - pri kazdom frame
animacie musel prepocitat masku tiena na hlavnom vlakne namiesto GPU
vrstvy (sekanie; v Chrome to vidno nebolo). Ked je filter na needitovanom
rodicovi a animuje sa len transform na diecati, filter sa prepocita raz
(nie 60x za sekundu) a animacia zostava lacny GPU transform - hladke vo
vsetkych prehliadacoch, vizualne identicke s povodnym vzhladom. */
.wp-block-site-logo {
filter: drop-shadow(0 0 8px rgba(120, 180, 255, 0.55));
}
.wp-block-site-logo img {
animation: newsky-logo-breathe 4s ease-in-out infinite;
will-change: transform;
backface-visibility: hidden;
}
@keyframes newsky-logo-breathe {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@media (prefers-reduced-motion: reduce) {
.wp-block-site-logo img {
animation: none;
}
}
/* Vo Firefoxe su vsetky animacie na stranke (logo, ikonky, plavajuce pozadie,
patickovy text...) vypnute rovno globalne, nech uz nezalezi na tom, ako
presne Gecko kompozituje jednotlive kombinacie filter/transform/pozadie.
-moz-appearance je vlastnost, ktoru pozna len Gecko (Firefox) - ostatne
prehliadace o nej nevedia, takze tento @supports blok sa aplikuje
spolahlivo len tam. Nejde o UA sniffing, len o bezne pouzivany
feature-query trik. Univerzalny selektor pokryje aj buduce animacie,
netreba ich sem prideravat jednu po druhej. */
@supports (-moz-appearance: none) {
*,
*::before,
*::after {
animation: none !important;
}
}
/* Core's own .wp-block-social-link{display:block} (and, more specifically,
".wp-block-social-links .wp-block-social-link.wp-social-link{display:
inline-block}") centers its by text-metrics (line-height +
vertical-align), which never quite lines up with the search/theme-toggle
icons' flex-centered boxes next to it in the header - flex +
align-items:center centers it exactly instead, matching them pixel for
pixel regardless of font metrics. !important: that inline-block rule above
has 3 classes (0,3,0), more specific than this rule's 2 (0,2,0). */
.newsky-social-links .wp-social-link {
display: flex !important;
align-items: center;
}
/* YouTube a Facebook ikonky sa striedavo "nadychuju" - ked jedna pulzuje,
druha je v pokoji, a naopak (posunute o polovicu cyklu). */
.newsky-social-links li:nth-child(1) a {
display: inline-flex;
animation: newsky-icon-breathe 3s ease-in-out infinite;
}
.newsky-social-links li:nth-child(2) a {
display: inline-flex;
animation: newsky-icon-breathe 3s ease-in-out infinite;
animation-delay: 1.5s;
}
@keyframes newsky-icon-breathe {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.18);
}
}
@media (prefers-reduced-motion: reduce) {
.newsky-social-links li a {
animation: none;
}
}
/* Decent, plynulo animovane pozadie: priesvitne stupajuce bubliny + jemne
"dychajuci" gradient, bez JS. Gradient je vo fixed vrstve #dynamic-bg, ktora
presne prekryva cely viewport (spravne aj na tablete/velkych obrazovkach -
na "body" by sa velkost gradientu pocitala z celej vysky stranky a
opakovala by sa po useekoch). "Dychanie" je animovane cez transform
(GPU/compositor), nie cez background-position (to vynucovalo prekreslenie
celej vrstvy kazdy frame a sposobovalo sekane scrollovanie na mobile). */
body {
background: transparent !important;
overflow-x: hidden;
}
.wp-site-blocks {
position: relative;
z-index: 1;
}
#dynamic-bg {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
background: transparent;
}
#dynamic-bg::before {
content: "";
position: absolute;
inset: -15%;
background: linear-gradient(165deg, #ffffff 0%, #f4f8fc 38%, #e8eef6 72%, #f7fafc 100%);
animation: newsky-bg-shift 28s ease-in-out infinite alternate;
will-change: transform;
}
#dynamic-bg::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 18% 12%, rgba(149, 12, 22, 0.035), transparent 42%),
radial-gradient(ellipse at 88% 78%, rgba(149, 12, 22, 0.025), transparent 46%);
pointer-events: none;
}
@keyframes newsky-bg-shift {
0% {
transform: translate3d(-2%, -1%, 0) scale(1.1);
}
100% {
transform: translate3d(2%, 3%, 0) scale(1.1);
}
}
#dynamic-bg span {
position: absolute;
bottom: -140px;
border-radius: 50%;
background: radial-gradient(
circle at 32% 28%,
rgba(255, 255, 255, 0.92),
rgba(150, 190, 228, 0.34) 58%,
rgba(130, 175, 220, 0.1)
);
box-shadow: 0 0 32px rgba(120, 170, 220, 0.22);
animation: newsky-bg-rise linear infinite, newsky-bg-sway ease-in-out infinite;
will-change: transform, opacity;
/* #dynamic-bg itself stays pointer-events:none (see above) so the empty
space between bubbles keeps clicking straight through to real page
content - only the circle itself (clip-path, not the invisible square
bounding box around it) becomes an actual click target. */
pointer-events: auto;
cursor: pointer;
clip-path: circle(50%);
}
/* One-shot "pop" on click (see newsky_bubble_pop_js in functions.php),
overriding the ambient rise/sway animation - !important is deliberate
here: it's the only way to beat the #dynamic-bg span:nth-child(N) rules'
equal-specificity animation-duration/-delay overrides below, so the pop
actually plays instead of instantly finishing in 0s (see the dark-mode
version of this exact trap, documented further down). Removing the class
afterwards lets rise/sway restart clean from the bottom - a "new" bubble. */
#dynamic-bg span.is-popping {
animation: newsky-bubble-pop 0.35s ease-out forwards !important;
pointer-events: none;
}
@keyframes newsky-bubble-pop {
0% {
transform: scale(1);
opacity: 1;
}
35% {
transform: scale(1.3);
opacity: 1;
}
100% {
transform: scale(0.05);
opacity: 0;
}
}
/* Expanding ring + flying droplets, spawned as short-lived siblings inside
#dynamic-bg (same fixed/viewport coordinate space as the bubbles) at the
clicked bubble's on-screen position, then removed on animationend. */
.newsky-bubble-ring {
position: absolute;
/* Darker on the light background (default) so it actually shows up -
white-on-white was invisible; dark mode restores the white version
below, since white-on-dark already looked right. */
border: 2px solid rgba(55, 105, 155, 0.75);
border-radius: 50%;
pointer-events: none;
animation: newsky-bubble-ring 0.4s ease-out forwards;
}
.is-dark-mode .newsky-bubble-ring {
border-color: rgba(255, 255, 255, 0.85);
}
@keyframes newsky-bubble-ring {
0% {
transform: scale(0.7);
opacity: 0.9;
}
100% {
transform: scale(2.4);
opacity: 0;
}
}
.newsky-bubble-droplet {
position: absolute;
width: 7px;
height: 7px;
margin: -3.5px 0 0 -3.5px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(90, 145, 190, 0.95), rgba(45, 90, 135, 0.55));
pointer-events: none;
animation: newsky-bubble-droplet 0.45s ease-out forwards;
}
.is-dark-mode .newsky-bubble-droplet {
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(170, 200, 228, 0.35));
}
@keyframes newsky-bubble-droplet {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate(var(--dx), var(--dy)) scale(0.15);
opacity: 0;
}
}
@keyframes newsky-bg-rise {
0% {
transform: translateY(0) scale(1);
opacity: 0;
}
10% {
opacity: 0.65;
}
90% {
opacity: 0.4;
}
100% {
transform: translateY(-115vh) scale(1.12);
opacity: 0;
}
}
@keyframes newsky-bg-sway {
0%, 100% {
margin-left: 0;
}
50% {
margin-left: 40px;
}
}
#dynamic-bg span:nth-child(1) { left: 4%; width: 22px; height: 22px; animation-duration: 26s, 11s; animation-delay: -3s, -1s; }
#dynamic-bg span:nth-child(2) { left: 12%; width: 54px; height: 54px; animation-duration: 34s, 14s; animation-delay: -12s, -4s; }
#dynamic-bg span:nth-child(3) { left: 19%; width: 16px; height: 16px; animation-duration: 21s, 9s; animation-delay: -7s, -2s; }
#dynamic-bg span:nth-child(4) { left: 27%; width: 78px; height: 78px; animation-duration: 41s, 16s; animation-delay: -18s, -6s; }
#dynamic-bg span:nth-child(5) { left: 36%; width: 28px; height: 28px; animation-duration: 24s, 10s; animation-delay: -5s, -3s; }
#dynamic-bg span:nth-child(6) { left: 44%; width: 96px; height: 96px; animation-duration: 46s, 18s; animation-delay: -22s, -8s; }
#dynamic-bg span:nth-child(7) { left: 53%; width: 18px; height: 18px; animation-duration: 19s, 8s; animation-delay: -9s, -1s; }
#dynamic-bg span:nth-child(8) { left: 61%; width: 42px; height: 42px; animation-duration: 29s, 13s; animation-delay: -14s, -5s; }
#dynamic-bg span:nth-child(9) { left: 68%; width: 64px; height: 64px; animation-duration: 37s, 15s; animation-delay: -11s, -7s; }
#dynamic-bg span:nth-child(10) { left: 74%; width: 24px; height: 24px; animation-duration: 23s, 10s; animation-delay: -16s, -2s; }
#dynamic-bg span:nth-child(11) { left: 81%; width: 88px; height: 88px; animation-duration: 44s, 17s; animation-delay: -25s, -9s; }
#dynamic-bg span:nth-child(12) { left: 88%; width: 20px; height: 20px; animation-duration: 20s, 9s; animation-delay: -4s, -3s; }
#dynamic-bg span:nth-child(13) { left: 8%; width: 36px; height: 36px; animation-duration: 31s, 12s; animation-delay: -20s, -6s; }
#dynamic-bg span:nth-child(14) { left: 48%; width: 14px; height: 14px; animation-duration: 17s, 7s; animation-delay: -8s, -2s; }
#dynamic-bg span:nth-child(15) { left: 92%; width: 50px; height: 50px; animation-duration: 33s, 14s; animation-delay: -13s, -4s; }
#dynamic-bg span:nth-child(16) { left: 31%; width: 70px; height: 70px; animation-duration: 39s, 16s; animation-delay: -27s, -10s; }
@media (prefers-reduced-motion: reduce) {
#dynamic-bg::before,
#dynamic-bg span {
animation: none !important;
}
/* Popping a bubble should still work with reduced motion - it just
disappears instantly instead of animating, and no ring/droplets spawn
(the click handler itself checks the same media query before creating
them at all). */
#dynamic-bg span.is-popping {
opacity: 0 !important;
}
.newsky-bubble-ring,
.newsky-bubble-droplet {
display: none !important;
}
}
/* Dark-mode analog of the animated background above: same shift/rise/sway
animations (untouched), just dark tones instead of the light gradient -
body's own background is transparent!important either way, so this is
what actually needs to change for the page to read as "dark". */
.is-dark-mode #dynamic-bg::before {
background: linear-gradient(165deg, #16181d 0%, #1b1e24 38%, #202329 72%, #17191e 100%);
}
.is-dark-mode #dynamic-bg::after {
background: radial-gradient(ellipse at 18% 12%, rgba(255, 138, 138, 0.05), transparent 42%),
radial-gradient(ellipse at 88% 78%, rgba(255, 138, 138, 0.035), transparent 46%);
}
.is-dark-mode #dynamic-bg span {
background: radial-gradient(
circle at 32% 28%,
rgba(255, 255, 255, 0.18),
rgba(145, 165, 195, 0.09) 58%,
rgba(125, 145, 175, 0.028)
);
box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
/* animation-name only (not the "animation" shorthand): the shorthand
would reset animation-duration/-delay to their 0s defaults, clobbering
the per-bubble timing set by the #dynamic-bg span:nth-child(N) rules
below (same specificity, but those come first in the file) - which is
exactly what made every bubble instantly invisible in dark mode. */
animation-name: newsky-bg-rise-dark, newsky-bg-sway-dark;
}
@keyframes newsky-bg-rise-dark {
0% {
transform: translateY(0) scale(1);
opacity: 0;
}
10% {
opacity: 0.48;
}
90% {
opacity: 0.27;
}
100% {
transform: translateY(-115vh) scale(1.12);
opacity: 0;
}
}
@keyframes newsky-bg-sway-dark {
0%, 100% {
margin-left: 0;
}
50% {
margin-left: 22px;
}
}
/* Small side padding on the page content in portrait/mobile, so text and
cards don't sit flush against the screen edges. */
@media (max-width: 600px) {
.wp-site-blocks > main {
padding-left: 4px;
padding-right: 4px;
}
}
/* Article card excerpt: up to 4 lines on narrow/portrait screens (single
column, more room to breathe), tightened to 3 lines on wider grid
layouts. The JS clamp script adds a real "..." only when text is
actually cut off, based on whichever max-height applies here. */
.newsky-card .wp-block-post-excerpt {
max-height: 6.6em;
line-height: 1.65;
overflow: hidden;
}
/* Article cards (homepage + category grids): keep title/excerpt/category
aligned across a row regardless of how long each one's text is.
Only applied from 601px up - on narrow/portrait screens the grid is a
single column anyway, so the full title can just show. */
@media (min-width: 601px) {
.newsky-card {
display: flex;
flex-direction: column;
height: 100%;
}
.newsky-card .wp-block-post-title {
max-height: 2.4em;
line-height: 1.2;
overflow: hidden;
}
.newsky-card .wp-block-post-excerpt {
max-height: 4.95em;
}
.newsky-card-meta {
width: 100%;
align-items: center;
}
}
/* "Ilustračný obrázok" caption under the article's featured image - only
makes sense when there actually is a featured image to caption. */
.newsky-image-caption {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
main:not(:has(.wp-block-post-featured-image)) .newsky-image-caption {
display: none;
}
/* Site tagline shown above the homepage intro video, in a script/cursive font */
.newsky-tagline {
font-family: "Dancing Script", cursive;
font-weight: 700;
margin: 0.5rem 0;
}
/* Red scrollbar (Firefox + WebKit browsers) */
html {
scrollbar-color: var(--wp--preset--color--primary-red) #f0f0f0;
}
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-track {
background: #f0f0f0;
}
::-webkit-scrollbar-thumb {
background-color: var(--wp--preset--color--primary-red);
border-radius: 7px;
border: 3px solid #f0f0f0;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--wp--preset--color--navy);
}
.wp-block-post-content h1 {
font-size: var(--wp--preset--font-size--xx-large);
}
.wp-block-post-content h2 {
font-size: var(--wp--preset--font-size--x-large);
}
.wp-block-post-content h3 {
font-size: var(--wp--preset--font-size--large);
}
.wp-block-post-content h4 {
font-size: var(--wp--preset--font-size--medium);
color: var(--wp--preset--color--primary-red);
}
.wp-block-post-content h5,
.wp-block-post-content h6 {
font-size: var(--wp--preset--font-size--medium);
}
/* Embedded videos in article content (YouTube etc.) + self-hosted