/* ==========================================================================
iWater prik
--------------------------------------------------------------------------
Ét system til den runde prik med hul, som visuelt designelement.
Alt styres med klasser. Kun finjustering i px kræver CSS-variabler.
BRUG
Kombinér klasser i feltet Advanced > Additional CSS class(es):
iw-prik Base. Skal altid med. Prikken er synlig som standard.
iw-prik1 .. iw-prik26 Farve. Uden: farve 1.
1-15 Kadence global palette 1-15
16 gennemsigtig (kun hullet ses)
17 hvid 22 lilla
18 sort 23 turkis
19 lysegrå 24 lyseblå
20 mørkegrå 25 lysegrøn
21 rød 26 sand
iw-prik-hul1 .. 26 Hullets farve, samme numre. 16 = gennemsigtigt hul (ring).
Uden: farvens standard-hul (lyst på mørke farver og omvendt).
iw-prik-[kant]-[pos] Placering. Uden: top-left.
top-left, top-center, top-right
bottom-left, bottom-center, bottom-right
left-top, left-center, left-bottom
right-top, right-center, right-bottom
Valgfrie modifiers:
iw-prik-hover Vises kun ved hover/fokus på elementet.
iw-prik-group Sættes på en omkringliggende blok. Prikker med
iw-prik-hover indeni vises når man holder over blokken.
iw-prik-str-8 .. 64 Størrelse i px, i spring af 4 (8, 12, 16 ... 64). Uden: 28.
iw-prik-afstand-0 .. 50 Afstand fra hjørnet i %, i spring af 5. Uden: 10.
Har ingen effekt på center-placeringer.
iw-prik-inde Overhæng 0%: prikken sidder helt inde i elementet
(til forældre med overflow: hidden).
iw-prik-haeng-25 Overhæng 25%.
iw-prik-haeng-75 Overhæng 75%.
iw-prik-ude Overhæng 100%: prikken sidder helt udenfor kanten.
Uden: 50%, halvt over kanten.
zoom Let zoom ved hover. Uafhængig af prikken.
Eksempler:
iw-prik iw-prik11 iw-prik-top-left
iw-prik iw-prik-hover iw-prik5 iw-prik-right-center iw-prik-str-20
iw-prik iw-prik17 iw-prik-hul1 iw-prik-bottom-right iw-prik-str-40 iw-prik-inde
iw-prik iw-prik1 iw-prik-hul16 iw-prik-top-center (ring)
zoom iw-prik iw-prik-hover iw-prik9 iw-prik-afstand-20
FINJUSTERING (CSS-variabler, kun når klasserne ikke rækker)
Sættes på elementet (Kadence: Advanced > Custom CSS, "selector { }"),
på en forælder, eller globalt.
--iw-prik-x forskyd vandret i px (0px)
--iw-prik-y forskyd lodret i px (0px)
--iw-prik-size fri størrelse (28px)
--iw-prik-offset fri afstand fra hjørnet (10%)
--iw-prik-hang frit overhæng 0-1 (0.5)
--iw-prik-hul hullets radius i % (38%)
--iw-prik-color fri farve, vinder over farveklasse
--iw-prik-hole fri hulfarve, vinder over hul-klasse
--iw-prik-farve-17 .. 26 de faste ekstrafarver, kan ændres globalt
BEMÆRK
Klasserne skal på et element der kan have ::before (div, section, h2, a,
figure). Ikke direkte på ![]()
eller ; brug wrapperen.
========================================================================== */
:root {
/* Ekstrafarver 17-26 */
--iw-prik-farve-17: #ffffff; /* hvid */
--iw-prik-farve-18: #000000; /* sort */
--iw-prik-farve-19: #d9dde1; /* lysegrå */
--iw-prik-farve-20: #4a5259; /* mørkegrå */
--iw-prik-farve-21: #c0392b; /* rød */
--iw-prik-farve-22: #6c4fb3; /* lilla */
--iw-prik-farve-23: #2aa7a1; /* turkis */
--iw-prik-farve-24: #9ecbe6; /* lyseblå */
--iw-prik-farve-25: #b7dba3; /* lysegrøn */
--iw-prik-farve-26: #e6d3b3; /* sand */
--iw-prik-size: 28px;
--iw-prik-offset: 10%;
--iw-prik-hang: 0.5;
--iw-prik-hul: 38%;
--iw-prik-x: 0px;
--iw-prik-y: 0px;
}
/* ---------- Base ---------- */
.iw-prik {
position: relative;
overflow: visible;
/* private variabler - placering (standard: top-left) og synlighed */
--_top: calc(var(--iw-prik-size) * var(--iw-prik-hang) * -1);
--_left: calc(var(--iw-prik-offset) - var(--iw-prik-size) / 2);
--_o: 1;
--_s: 1;
}
.iw-prik::before {
content: "";
position: absolute;
z-index: 2;
pointer-events: none;
width: var(--iw-prik-size);
height: var(--iw-prik-size);
top: var(--_top);
left: var(--_left);
border-radius: 50%;
background: radial-gradient(
circle,
var(--iw-prik-hole, var(--_hole, var(--global-palette9, #e8e4e1))) 0 var(--iw-prik-hul),
var(--iw-prik-color, var(--_color, var(--global-palette1, #061d2b))) calc(var(--iw-prik-hul) + 2%)
);
opacity: var(--_o);
transform: translate(var(--iw-prik-x), var(--iw-prik-y)) scale(var(--_s));
transition: opacity 0.2s ease, transform 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.iw-prik::before { transition: none; }
}
/* ---------- Synlighed ---------- */
.iw-prik-hover {
--_o: 0;
--_s: 0.8;
}
.iw-prik-hover:hover,
.iw-prik-hover:focus-visible,
.iw-prik-group:hover .iw-prik-hover,
.iw-prik-group:focus-within .iw-prik-hover {
--_o: 1;
--_s: 1;
}
/* ---------- Størrelse ---------- */
.iw-prik-str-8 { --iw-prik-size: 8px; }
.iw-prik-str-12 { --iw-prik-size: 12px; }
.iw-prik-str-16 { --iw-prik-size: 16px; }
.iw-prik-str-20 { --iw-prik-size: 20px; }
.iw-prik-str-24 { --iw-prik-size: 24px; }
.iw-prik-str-28 { --iw-prik-size: 28px; }
.iw-prik-str-32 { --iw-prik-size: 32px; }
.iw-prik-str-36 { --iw-prik-size: 36px; }
.iw-prik-str-40 { --iw-prik-size: 40px; }
.iw-prik-str-44 { --iw-prik-size: 44px; }
.iw-prik-str-48 { --iw-prik-size: 48px; }
.iw-prik-str-52 { --iw-prik-size: 52px; }
.iw-prik-str-56 { --iw-prik-size: 56px; }
.iw-prik-str-60 { --iw-prik-size: 60px; }
.iw-prik-str-64 { --iw-prik-size: 64px; }
/* ---------- Afstand fra hjørnet ---------- */
.iw-prik-afstand-0 { --iw-prik-offset: 0%; }
.iw-prik-afstand-5 { --iw-prik-offset: 5%; }
.iw-prik-afstand-10 { --iw-prik-offset: 10%; }
.iw-prik-afstand-15 { --iw-prik-offset: 15%; }
.iw-prik-afstand-20 { --iw-prik-offset: 20%; }
.iw-prik-afstand-25 { --iw-prik-offset: 25%; }
.iw-prik-afstand-30 { --iw-prik-offset: 30%; }
.iw-prik-afstand-35 { --iw-prik-offset: 35%; }
.iw-prik-afstand-40 { --iw-prik-offset: 40%; }
.iw-prik-afstand-45 { --iw-prik-offset: 45%; }
.iw-prik-afstand-50 { --iw-prik-offset: 50%; }
/* ---------- Overhæng ---------- */
.iw-prik-inde { --iw-prik-hang: 0; }
.iw-prik-haeng-25 { --iw-prik-hang: 0.25; }
.iw-prik-haeng-75 { --iw-prik-hang: 0.75; }
.iw-prik-ude { --iw-prik-hang: 1; }
/* ---------- Farver ----------
Klasserne sætter private variabler. --iw-prik-color og --iw-prik-hole
(egne farver) vinder derfor altid over en farveklasse, uanset CSS-rækkefølge. */
.iw-prik1 { --_color: var(--global-palette1); --_hole: var(--global-palette9); }
.iw-prik2 { --_color: var(--global-palette2); --_hole: var(--global-palette9); }
.iw-prik3 { --_color: var(--global-palette3); --_hole: var(--global-palette9); }
.iw-prik4 { --_color: var(--global-palette4); --_hole: var(--global-palette9); }
.iw-prik5 { --_color: var(--global-palette5); --_hole: var(--global-palette9); }
.iw-prik6 { --_color: var(--global-palette6); --_hole: var(--global-palette9); }
.iw-prik7 { --_color: var(--global-palette7); --_hole: var(--global-palette9); }
.iw-prik8 { --_color: var(--global-palette8); --_hole: var(--global-palette2); }
.iw-prik9 { --_color: var(--global-palette9); --_hole: var(--global-palette7); }
.iw-prik10 { --_color: var(--global-palette10); --_hole: var(--global-palette9); }
.iw-prik11 { --_color: var(--global-palette11); --_hole: var(--global-palette9); }
.iw-prik12 { --_color: var(--global-palette12); --_hole: var(--global-palette9); }
.iw-prik13 { --_color: var(--global-palette13); --_hole: var(--global-palette9); }
.iw-prik14 { --_color: var(--global-palette14); --_hole: var(--global-palette9); }
.iw-prik15 { --_color: var(--global-palette15); --_hole: var(--global-palette2); }
.iw-prik16 { --_color: transparent; --_hole: var(--global-palette1); }
.iw-prik17 { --_color: var(--iw-prik-farve-17); --_hole: var(--global-palette1); }
.iw-prik18 { --_color: var(--iw-prik-farve-18); --_hole: var(--global-palette9); }
.iw-prik19 { --_color: var(--iw-prik-farve-19); --_hole: var(--global-palette1); }
.iw-prik20 { --_color: var(--iw-prik-farve-20); --_hole: var(--global-palette9); }
.iw-prik21 { --_color: var(--iw-prik-farve-21); --_hole: var(--global-palette9); }
.iw-prik22 { --_color: var(--iw-prik-farve-22); --_hole: var(--global-palette9); }
.iw-prik23 { --_color: var(--iw-prik-farve-23); --_hole: var(--global-palette9); }
.iw-prik24 { --_color: var(--iw-prik-farve-24); --_hole: var(--global-palette1); }
.iw-prik25 { --_color: var(--iw-prik-farve-25); --_hole: var(--global-palette1); }
.iw-prik26 { --_color: var(--iw-prik-farve-26); --_hole: var(--global-palette1); }
/* ---------- Hullets farve ----------
Overstyrer farvens standard-hul. Skal stå efter farveklasserne. */
.iw-prik-hul1 { --_hole: var(--global-palette1); }
.iw-prik-hul2 { --_hole: var(--global-palette2); }
.iw-prik-hul3 { --_hole: var(--global-palette3); }
.iw-prik-hul4 { --_hole: var(--global-palette4); }
.iw-prik-hul5 { --_hole: var(--global-palette5); }
.iw-prik-hul6 { --_hole: var(--global-palette6); }
.iw-prik-hul7 { --_hole: var(--global-palette7); }
.iw-prik-hul8 { --_hole: var(--global-palette8); }
.iw-prik-hul9 { --_hole: var(--global-palette9); }
.iw-prik-hul10 { --_hole: var(--global-palette10); }
.iw-prik-hul11 { --_hole: var(--global-palette11); }
.iw-prik-hul12 { --_hole: var(--global-palette12); }
.iw-prik-hul13 { --_hole: var(--global-palette13); }
.iw-prik-hul14 { --_hole: var(--global-palette14); }
.iw-prik-hul15 { --_hole: var(--global-palette15); }
.iw-prik-hul16 { --_hole: transparent; }
.iw-prik-hul17 { --_hole: var(--iw-prik-farve-17); }
.iw-prik-hul18 { --_hole: var(--iw-prik-farve-18); }
.iw-prik-hul19 { --_hole: var(--iw-prik-farve-19); }
.iw-prik-hul20 { --_hole: var(--iw-prik-farve-20); }
.iw-prik-hul21 { --_hole: var(--iw-prik-farve-21); }
.iw-prik-hul22 { --_hole: var(--iw-prik-farve-22); }
.iw-prik-hul23 { --_hole: var(--iw-prik-farve-23); }
.iw-prik-hul24 { --_hole: var(--iw-prik-farve-24); }
.iw-prik-hul25 { --_hole: var(--iw-prik-farve-25); }
.iw-prik-hul26 { --_hole: var(--iw-prik-farve-26); }
/* ---------- Placering ----------
Første led = kant, andet led = position på kanten.
Overhænget styres af --iw-prik-hang, afstanden fra hjørnet af --iw-prik-offset. */
/* Top-kant */
.iw-prik-top-left {
--_top: calc(var(--iw-prik-size) * var(--iw-prik-hang) * -1);
--_left: calc(var(--iw-prik-offset) - var(--iw-prik-size) / 2);
}
.iw-prik-top-center {
--_top: calc(var(--iw-prik-size) * var(--iw-prik-hang) * -1);
--_left: calc(50% - var(--iw-prik-size) / 2);
}
.iw-prik-top-right {
--_top: calc(var(--iw-prik-size) * var(--iw-prik-hang) * -1);
--_left: calc(100% - var(--iw-prik-offset) - var(--iw-prik-size) / 2);
}
/* Bund-kant */
.iw-prik-bottom-left {
--_top: calc(100% - var(--iw-prik-size) * (1 - var(--iw-prik-hang)));
--_left: calc(var(--iw-prik-offset) - var(--iw-prik-size) / 2);
}
.iw-prik-bottom-center {
--_top: calc(100% - var(--iw-prik-size) * (1 - var(--iw-prik-hang)));
--_left: calc(50% - var(--iw-prik-size) / 2);
}
.iw-prik-bottom-right {
--_top: calc(100% - var(--iw-prik-size) * (1 - var(--iw-prik-hang)));
--_left: calc(100% - var(--iw-prik-offset) - var(--iw-prik-size) / 2);
}
/* Venstre kant */
.iw-prik-left-top {
--_top: calc(var(--iw-prik-offset) - var(--iw-prik-size) / 2);
--_left: calc(var(--iw-prik-size) * var(--iw-prik-hang) * -1);
}
.iw-prik-left-center {
--_top: calc(50% - var(--iw-prik-size) / 2);
--_left: calc(var(--iw-prik-size) * var(--iw-prik-hang) * -1);
}
.iw-prik-left-bottom {
--_top: calc(100% - var(--iw-prik-offset) - var(--iw-prik-size) / 2);
--_left: calc(var(--iw-prik-size) * var(--iw-prik-hang) * -1);
}
/* Højre kant */
.iw-prik-right-top {
--_top: calc(var(--iw-prik-offset) - var(--iw-prik-size) / 2);
--_left: calc(100% - var(--iw-prik-size) * (1 - var(--iw-prik-hang)));
}
.iw-prik-right-center {
--_top: calc(50% - var(--iw-prik-size) / 2);
--_left: calc(100% - var(--iw-prik-size) * (1 - var(--iw-prik-hang)));
}
.iw-prik-right-bottom {
--_top: calc(100% - var(--iw-prik-offset) - var(--iw-prik-size) / 2);
--_left: calc(100% - var(--iw-prik-size) * (1 - var(--iw-prik-hang)));
}
/* ==========================================================================
Zoom
========================================================================== */
.zoom {
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform: scale(1);
transform-origin: center;
}
.zoom:hover {
transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
.zoom { transition: none; }
}