/*
Theme Name: PDK
Theme URI: https://pdk.info/
Description: Custom Classic theme
Author: user
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: pdk
*/
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* GLOBALS */
/*----- Fonts -----*/
/* Self-hosted (decision A): Montserrat = nav/UI, Nunito Sans = headings.
Variable fonts: one file covers all weights (100-900). Split per Unicode
subset (latin + latin-ext) so Albanian glyphs (ç, ë) are covered. */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("assets/fonts/montserrat-latin.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;
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("assets/fonts/montserrat-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Nunito Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("assets/fonts/nunito-sans-latin.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;
}
@font-face {
font-family: "Nunito Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("assets/fonts/nunito-sans-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/*----- Variables -----*/
:root {
/* Colors (verified from live) */
--pdk-blue: #2596d5;
--pdk-header-bg: #dceaf2;
--pdk-text: #212529;
--pdk-white: #ffffff;
/* Fonts */
--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
--font-nav: "Montserrat", sans-serif;
--font-heading: "Nunito Sans", sans-serif;
/* Section spacing (refined per section during build) */
--section-margin: 0;
--section-padding: 0;
}
/*----- Reset -----*/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-base);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: var(--pdk-text);
}
img {
max-width: 100%;
height: auto;
}
a {
color: var(--pdk-blue);
text-decoration: none;
}
/* Protected rule — do not modify these properties. */
section {
margin-block: var(--section-margin);
padding-block: var(--section-padding);
}
/*----- Typography -----*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
color: var(--pdk-text);
margin: 0;
}
/*----- Layout container -----*/
.pdk-container {
width: 100%;
max-width: 1140px;
margin-inline: auto;
padding-inline: 15px;
}
/*----- Header -----*/
.pdk-header {
background-color: var(--pdk-header-bg);
min-height: 126px;
}
/* Header spans 90% of the viewport, like live. */
.pdk-header .pdk-container {
max-width: 90%;
}
/* Below 1530px the header container goes full width. */
@media (max-width: 1530px) {
.pdk-header .pdk-container {
max-width: 100%;
}
}
.pdk-header__inner {
display: flex;
align-items: center;
gap: 24px;
min-height: 126px;
}
.pdk-header__logo {
flex-shrink: 0;
}
.pdk-header__logo img {
display: block;
height: 66px;
width: auto;
}
/* Nav holds the primary menu + social, pushed to the right; logo stays left. */
.pdk-nav {
display: flex;
align-items: center;
gap: 24px;
margin-left: auto;
}
/* Hamburger / close buttons — hidden on desktop, shown below xl (1200px). */
.pdk-nav-toggle,
.pdk-nav-close {
display: none;
background: none;
border: 0;
padding: 0;
color: var(--pdk-text);
cursor: pointer;
}
.pdk-nav > ul {
list-style: none;
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
}
.pdk-nav li {
position: relative;
}
.pdk-nav a {
font-family: var(--font-nav);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--pdk-blue);
padding: 8px 8px 0;
}
/* Keep the dropdown parent label and its caret on one line. */
.pdk-nav .menu-item-has-children > a {
white-space: nowrap;
}
/* PARTIA dropdown caret — Bootstrap-style triangle (border), like live. */
.pdk-nav .menu-item-has-children > a::after {
content: "";
display: inline-block;
margin-left: 0.306em;
vertical-align: 0.306em;
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
/* Dropdown submenu (PARTIA) — hidden by default, shown on hover. */
.pdk-nav .sub-menu {
list-style: none;
margin: 0;
padding: 8px 24px;
position: absolute;
top: 100%;
left: 0;
min-width: 230px;
background: var(--pdk-header-bg);
display: none;
z-index: 1001;
}
.pdk-nav .menu-item-has-children.is-expanded > .sub-menu {
display: block;
}
.pdk-nav .sub-menu a {
display: block;
padding: 4px 4px 0;
font-size: 14px;
line-height: 1.5;
text-transform: capitalize;
color: #707070;
}
.pdk-header__social {
display: flex;
align-items: center;
gap: 12px;
}
.pdk-header__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
color: #707070;
font-size: 25px;
}
/* Header social icons sit flush, like live (30px boxes, no gap); wrap to 2x2 when tight. */
.pdk-header__social .pdk-social {
flex-wrap: wrap;
gap: 0;
}
/* Social menu list (header + footer) */
.pdk-social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 12px;
}
/* 1200–1369px: keep the whole nav on one row (tighter spacing than live, which wraps here). */
@media (min-width: 1200px) and (max-width: 1369px) {
.pdk-nav {
gap: 12px;
}
.pdk-nav > ul {
gap: 0;
flex-wrap: nowrap;
}
.pdk-nav a {
letter-spacing: 0.3px;
padding: 8px 4px 0;
white-space: nowrap;
}
}
/* Header — below xl (1200px): hamburger left, logo right, full-screen overlay menu (like live). */
@media (max-width: 1199px) {
.pdk-header,
.pdk-header__inner {
min-height: 99px;
}
.pdk-nav-toggle {
display: inline-flex;
align-items: center;
order: -1;
padding: 4px 12px;
font-size: 20px;
color: #000000;
}
.pdk-header__logo {
margin-left: auto;
position: relative;
z-index: 40;
}
.pdk-header__logo img {
max-width: 175px;
height: auto;
}
.pdk-nav {
position: fixed;
inset: 0;
z-index: 30;
margin: 0;
display: none;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 100px 24px 32px;
background: var(--pdk-white);
overflow-y: auto;
}
.pdk-nav.is-open {
display: flex;
}
/* The fixed overlay isn't offset by the admin bar (which pushes the header down);
offset it so the items still clear the logo when logged in. */
.admin-bar .pdk-nav {
top: 46px;
}
body.pdk-nav-open {
overflow: hidden;
}
/* Hide the floating supporter tab while the overlay menu is open. */
body.pdk-nav-open .pdk-supporter-tab {
display: none;
}
/* When the overlay is open, hide the hamburger (the × inside the overlay replaces it). */
body.pdk-nav-open .pdk-nav-toggle {
display: none;
}
/* Center the logo at the top while the overlay is open. */
body.pdk-nav-open .pdk-header__logo {
margin-inline: auto;
}
.pdk-nav-close {
display: block;
position: absolute;
top: 16px;
left: 16px;
font-size: 24px;
}
.pdk-nav > ul {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0;
border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.pdk-nav > ul > li {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.pdk-nav > ul > li > a {
display: block;
font-size: 4vw;
line-height: 1.5;
padding: 8px 0;
}
/* Submenu collapses inline; expands when its parent item is tapped. */
.pdk-nav .menu-item-has-children > .sub-menu {
position: static;
min-width: 0;
padding: 8px 24px;
background: transparent;
display: none;
}
.pdk-nav .menu-item-has-children.is-expanded > .sub-menu {
display: block;
}
.pdk-nav .sub-menu a {
font-size: 16px;
}
.pdk-header__social {
margin-top: 32px;
align-self: center;
}
/* Reset the desktop 30px box / flush layout; center the row, flush like live. */
.pdk-header__social .pdk-social {
gap: 0;
justify-content: center;
}
.pdk-header__social a {
width: auto;
margin: 0;
font-size: 8vw;
}
}
/* Mobile menu item font scales with viewport (like live): 5vw <520, 3vw landscape. */
@media (max-width: 519px) {
.pdk-nav > ul > li > a {
font-size: 5vw;
}
}
@media (min-width: 520px) and (max-width: 1199px) and (orientation: landscape) {
.pdk-nav > ul > li > a {
font-size: 3vw;
}
}
/*----- Footer -----*/
.pdk-footer {
background-color: var(--pdk-blue);
padding-top: 50px;
padding-bottom: 15px;
}
.pdk-footer__container {
width: 90%;
margin-inline: auto;
}
/* Row 1: social icons (left) + data-protection text (right), like live. */
.pdk-footer__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.pdk-footer__social a {
color: var(--pdk-white);
font-size: 25px;
}
.pdk-footer__social .pdk-social {
gap: 12px;
}
.pdk-footer__text {
margin: 0;
max-width: 70%;
color: #ffd9c5;
font-size: 16px;
line-height: 24px;
text-align: right;
}
/* Row 2: copyright, centered, small, like live. */
.pdk-footer__copyright {
margin: 50px 0 0;
color: var(--pdk-white);
font-size: 10px;
text-align: center;
}
/* Footer — below 1200px: stack everything centered (social, text, copyright), like live. */
@media (max-width: 1199px) {
.pdk-footer__top {
flex-direction: column;
align-items: center;
gap: 36px;
}
.pdk-footer__text {
max-width: 100%;
text-align: center;
}
}
/*----- Floating supporter tab -----*/
.pdk-supporter-tab {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: var(--pdk-blue);
color: var(--pdk-white);
writing-mode: vertical-rl;
padding: 18px 10px;
font-family: var(--font-nav);
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 1000;
}
/*----- 404 -----*/
/* 404 error page (also where the RDK menu item lands — that page 404s on live). */
.pdk-404 {
padding-block: 100px;
}
/* System font, like live (not the heading font); link in Bootstrap blue. */
.pdk-404__text {
margin: 0 0 8px;
font-family: var(--font-base);
font-size: 28px;
font-weight: 500;
line-height: 1.2;
color: var(--pdk-text);
}
.pdk-404__text a {
color: #007bff;
text-decoration: none;
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* SHARED (sub-page components) */
/*----- Page title bar (blue skewed button that links to self) -----*/
/* Used by every PARTIA sub-page (Kryesia, Grupi Parlamentar, ...). Like live
(an a.btn-success styled full-width): a link styled as a full-width skewed
-10deg bar; the inner label counter-skews +10deg so the text stays upright.
Same skew pattern as the Home Lajme button. The 15px side margins are the
live container gutter and also keep the skewed corners inside the viewport. */
.pdk-page-titlebar {
display: block;
margin: 24px 15px 35px;
padding: 16px 24px;
background: var(--pdk-blue);
border: 1px solid var(--pdk-blue);
color: var(--pdk-white);
font-family: var(--font-base);
font-size: 19.2px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
text-decoration: none;
transform: skewX(-10deg);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
/* Hover — grey, exactly like live (.button-widget .btn-success:hover wins with
!important over Bootstrap's default green). */
.pdk-page-titlebar:hover {
color: var(--pdk-white);
background-color: #868686;
border-color: #868686;
}
.pdk-page-titlebar__txt {
display: inline-block;
transform: skewX(10deg);
}
/*----- Share widget ([pdk_share]) -----*/
/* Like live's .share-page-section: a thin divider, a blue "Shpërndaje:" label and
three outlined round-square buttons (grey icon → filled grey on hover). */
.pdk-share__hr {
margin: 0;
border: 0;
border-top: 1px solid #808080;
}
.pdk-share {
padding: 50px 0;
}
.pdk-share__label {
margin-right: 10px;
font-family: var(--font-nav);
font-weight: 500;
font-size: 20px;
color: var(--pdk-blue);
text-decoration: underline;
vertical-align: middle;
}
.pdk-share__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-right: 10px;
border: 2px solid #707070;
border-radius: 30%;
color: #707070;
vertical-align: middle;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.pdk-share__btn i {
font-size: 18px;
}
.pdk-share__btn:hover,
.pdk-share__btn:focus {
background-color: #707070;
color: var(--pdk-white);
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* HOME */
/*----- Hero (core blocks: Query Loop) -----*/
.home-hero__container {
width: 90%;
margin-inline: auto;
}
/* Query Loop / Post Template wrappers — strip list styling. */
.home-hero--blocks .wp-block-query,
.home-hero--blocks .wp-block-post-template {
margin: 0;
padding: 0;
list-style: none;
}
.home-hero--blocks .wp-block-post {
margin: 0;
}
/* Two columns: image | text. */
.home-hero--blocks .wp-block-columns {
align-items: stretch;
gap: 0;
margin: 0;
}
.home-hero--blocks .wp-block-column {
flex-basis: 50%;
}
/* Featured image — crop like live. */
.home-hero--blocks .wp-block-post-featured-image {
margin: 0;
height: 100%;
}
.home-hero--blocks .wp-block-post-featured-image a,
.home-hero--blocks .wp-block-post-featured-image img {
display: block;
width: 100%;
height: 100%;
}
.home-hero--blocks .wp-block-post-featured-image img {
aspect-ratio: 623 / 467;
object-fit: cover;
}
/* Text column. */
.home-hero--blocks .wp-block-column:last-child {
padding: 40px 15px 0 15px;
}
/* Date — grey, with a calendar icon like live. */
.home-hero--blocks .wp-block-post-date {
margin: 0;
color: #b6b6b6;
font-size: 16px;
}
.home-hero--blocks .wp-block-post-date::before {
margin-right: 6px;
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f073";
}
/* Title. */
.home-hero--blocks .wp-block-post-title {
margin: 16px 0 0;
font-size: 22px;
font-weight: 500;
line-height: 32px;
}
.home-hero--blocks .wp-block-post-title a {
color: #000000;
text-decoration: none;
}
/* Excerpt. */
.home-hero--blocks .wp-block-post-excerpt {
margin: 16px 0;
}
.home-hero--blocks .wp-block-post-excerpt p {
margin: 0;
color: #b6b6b6;
font-size: 16px;
line-height: 24px;
}
.home-hero--blocks .wp-block-post-excerpt__more-link {
color: #ea5455;
font-size: 16px;
text-decoration: underline;
}
/* Side-by-side from 768px (live breakpoint), not core's default 782px. */
@media (min-width: 768px) {
.home-hero--blocks .wp-block-columns {
flex-wrap: nowrap;
}
}
/* Hero — below 768px (Bootstrap md): stack image over text, like live. */
@media (max-width: 767px) {
.home-hero--blocks .wp-block-columns {
flex-direction: column;
gap: 24px;
}
.home-hero--blocks .wp-block-column {
flex-basis: auto;
width: 100%;
}
.home-hero--blocks .wp-block-column:last-child {
padding: 0 15px;
}
}
/*----- Lajme -----*/
.home-lajme {
padding-block: 60px;
--swiper-navigation-color: var(--pdk-blue);
--swiper-navigation-size: 64px;
}
.home-lajme__container {
width: 90%;
margin-inline: auto;
}
.home-lajme__heading {
margin: 0 0 40px;
font-family: var(--font-heading);
font-size: 55px;
font-weight: 600;
color: var(--pdk-blue);
text-align: center;
}
/* Arrows sit outside the carousel (not over the cards); blue, orange on hover, like live. */
.home-lajme__carousel {
position: relative;
}
.home-lajme__carousel .home-lajme__prev,
.home-lajme__carousel .home-lajme__next {
width: 37px;
height: 64px;
margin-top: -32px;
}
.home-lajme__carousel .home-lajme__prev {
left: -50px;
}
.home-lajme__carousel .home-lajme__next {
right: -50px;
}
.home-lajme__prev:hover,
.home-lajme__next:hover {
--swiper-navigation-color: #ff7500;
}
/* Below 991px the arrows move inside the carousel edges (so they stay on screen), like live. */
@media (max-width: 991px) {
.home-lajme__carousel .home-lajme__prev {
left: 10px;
}
.home-lajme__carousel .home-lajme__next {
right: 10px;
}
}
/* On mobile (single card), anchor the card image to the top so faces stay visible. */
@media (max-width: 767px) {
.home-lajme .home-lajme__img {
height: 300px;
background-position: 50% 25%;
}
}
.home-lajme__img {
display: block;
height: 200px;
background-size: cover;
background-position: 50% 50%;
}
.home-lajme__title {
display: -webkit-box;
margin-top: 16px;
color: #707070;
font-size: 18px;
font-weight: 500;
line-height: 1.4;
overflow: hidden;
}
.home-lajme__more {
display: inline-block;
margin-top: 12px;
color: var(--pdk-blue);
font-size: 19px;
text-decoration: underline;
}
.home-lajme__btnwrap {
margin-top: 40px;
text-align: center;
}
.home-lajme__btn {
display: inline-block;
padding: 16px 24px;
background: var(--pdk-blue);
border: 1px solid var(--pdk-blue);
color: var(--pdk-white);
font-family: var(--font-base);
font-size: 19px;
font-weight: 500;
text-transform: uppercase;
transform: skewX(-10deg);
}
/* Counter-skew the label so the text stays upright inside the skewed button. */
.home-lajme__btn span {
display: inline-block;
transform: skewX(10deg);
}
/*----- Banner -----*/
.home-banner {
margin: 0 0 85px;
background-color: var(--pdk-white);
}
/* Like live (.mx-auto + .w-fit-content): shrink-wrap the image and center it,
capped at the image's natural width; scale down only when narrower. */
.home-banner a {
display: block;
width: fit-content;
max-width: 100%;
margin-inline: auto;
}
.home-banner img {
display: block;
max-width: 100%;
height: auto;
}
/*----- Vizioni -----*/
/* Full-width blue band, pulled up 50px to overlap the banner above (exactly like
live: .row-wrapper.section-cover-discover has inline background + margin-top:-50px).
The class beats the protected `section { margin-block }` rule, which stays untouched. */
.home-vizioni {
margin-top: -50px;
padding-block: 0;
background-color: var(--pdk-blue);
}
/* Text column — 90% wide and centered (live: .vision max-width:90%; margin:1rem auto 3.5rem;
the bottom spacing is kept as padding-bottom so it sits inside the blue band). */
.home-vizioni__inner {
max-width: 90%;
margin: 1rem auto 0;
padding-bottom: 3.5rem;
}
/* Giant faded watermark title (live: .vision h1 = font-size:10vw;line-height:1, and its
inner span = color #dceaf2 at opacity 0.15). Reproduced on the heading itself. */
.home-vizioni__title {
margin: 0;
padding: 35px 0 20px;
font-family: var(--font-heading);
font-size: 10vw;
font-weight: 600;
line-height: 1;
text-align: center;
color: var(--pdk-header-bg);
opacity: 0.15;
}
/* Body copy — white, justified (live: .vision p = Montserrat 500, 20px, line-height:1.75). */
.home-vizioni__text {
margin: 0;
font-family: var(--font-nav);
font-size: 20px;
font-weight: 500;
line-height: 1.75;
text-align: justify;
color: var(--pdk-white);
}
/*----- Kontakt -----*/
/* Live: .section-contact padding 80px 0 0; heading centered blue; map (col-md-7) + form (col-md-5). */
.home-kontakt {
padding-block: 80px 0;
}
.home-kontakt__title {
margin: 0 0 40px;
font-family: var(--font-heading);
font-size: 4vw;
font-weight: 600;
color: var(--pdk-blue);
}
/* Map (left, ~58%) + form (right, ~42%). The row is full width (border-box) but its content
sits inside a 5% side gutter on each edge — same inset as the blue Vizioni band (max-width:90%).
This gives both the map (left) and the form panel (right) the blue band's 5% outer gutter. */
.home-kontakt__cols {
width: 100%;
gap: 0;
align-items: stretch;
}
/* Horizontal padding on the map column — matches the form column's 5% left/right. */
.home-kontakt__mapcol {
padding-inline: 5%;
}
/* Map clipped to a 700px circle, centered in its column. aspect-ratio keeps it a perfect
circle even when a narrow column caps the width (avoids an ellipse at intermediate sizes). */
.home-kontakt__map {
width: 85%;
max-width: 100%;
aspect-ratio: 1 / 1;
margin: 0 auto 30px;
border-radius: 50%;
overflow: hidden;
}
.home-kontakt__map iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Address line under the map. */
.home-kontakt__address {
margin: 20px 0 0;
font-size: 20px;
font-weight: 700;
text-align: center;
color: var(--pdk-blue);
}
/* Form panel — light blue-grey background (live: .form-map bg #dceaf2; padding 64px 96px 48px). */
.home-kontakt__formcol {
padding: 64px 5% 48px;
background-color: var(--pdk-header-bg);
}
/* CF7 auto-wraps each field in
; normalise the spacing. */
.pdk-form p {
margin: 0 0 20px;
}
.pdk-form p.pdk-form__field {
margin-bottom: 20px;
}
/* Submit — skewed blue parallelogram with upright text, like the Lajme "Shiko të gjitha
lajmet" button. CF7 renders a bare (no inner element), so the parallelogram lives
on the wrapper
and the input counter-skews its text back upright. Exact 201x62. */
.pdk-form__submit {
display: inline-block;
width: 201px;
height: 62px;
margin-bottom: 0;
background: var(--pdk-blue);
border: 1px solid var(--pdk-blue);
transform: skewX(-10deg);
}
/* Borderless white inputs on the panel, like live. */
.pdk-form input[type="text"],
.pdk-form input[type="email"],
.pdk-form input[type="tel"],
.pdk-form textarea {
width: 100%;
padding: 5px 15px;
border: 0;
border-radius: 0;
background: var(--pdk-white);
color: #495057;
font-family: var(--font-base);
font-size: 16px;
}
.pdk-form input[type="text"],
.pdk-form input[type="email"],
.pdk-form input[type="tel"] {
height: 44px;
}
.pdk-form textarea {
height: 150px;
resize: vertical;
}
/* Consent checkboxes (marketing + privacy acceptance). */
.pdk-form__check {
font-size: 16px;
line-height: 1.4;
color: #707070;
}
.pdk-form__check .wpcf7-list-item {
margin: 0;
}
/* Center the checkbox vertically with its label. */
.pdk-form__check label {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
/* Custom checkbox box: appearance:none drops the native black border; white box that
turns blue with a white tick when checked. */
.pdk-form__check input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
margin: 0;
border: 0;
border-radius: 0;
background-color: var(--pdk-white);
cursor: pointer;
}
.pdk-form__check input[type="checkbox"]:checked {
background-color: var(--pdk-blue);
}
.pdk-form__check input[type="checkbox"]:checked::after {
content: "";
width: 7px;
height: 13px;
margin-top: -3px;
border: solid var(--pdk-white);
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
/* The input fills the skewed wrapper; counter-skew keeps the "Dërgo" text upright. */
.pdk-form__submit input[type="submit"] {
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: var(--pdk-white);
font-family: var(--font-base);
font-size: 19px;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
transform: skewX(10deg);
cursor: pointer;
}
/* Below 1024px: map drops to its own full-width row and loses the circle (plain rectangle). */
@media (max-width: 1024px) {
.home-kontakt__cols {
flex-direction: column;
}
.home-kontakt__cols > .wp-block-column {
flex-basis: auto !important;
}
.home-kontakt__map {
width: 100%;
max-width: none;
aspect-ratio: auto;
height: 400px;
margin-inline: 0;
border-radius: 0;
}
/* Space below the address before the form when stacked. */
.home-kontakt__address {
margin-bottom: 30px;
}
.home-kontakt__formcol {
padding: 40px 5%;
}
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* KRYESIA */
/*----- Content (members list + photo) -----*/
/* Full-width fluid row with 15px gutters, like live. Columns: list 1/3, photo 2/3,
top-aligned with no inter-column gap (live uses per-column padding instead). */
.kryesia-content {
margin: 0;
padding: 0 15px;
gap: 0;
align-items: flex-start;
}
.kryesia-content__list {
padding: 32px 47px 16px;
}
.kryesia-content__img {
padding: 0 15px;
}
/* Numbered list of members; names are bold (live wraps each in ). */
.kryesia-list {
margin: 0;
padding-left: 40px;
}
.kryesia-list li {
font-size: 16px;
line-height: 1.5;
}
.kryesia-list strong {
font-weight: 700;
}
/* The single trailing bullet item (executive director), like live. */
.kryesia-list--bullet {
margin-bottom: 16px;
list-style: disc;
}
/* Below 1024px (wider than live's 768px) the columns stack and both
the list and the photo go full width. */
@media (max-width: 1024px) {
.kryesia-content {
flex-direction: column;
padding-inline: 0;
}
/* Override the inline flex-basis on the core columns so they fill the row. */
.kryesia-content__list,
.kryesia-content__img {
flex-basis: auto !important;
width: 100%;
}
/* The photo stretches edge-to-edge: drop the column's side padding too. */
.kryesia-content__img {
padding-inline: 0;
}
.kryesia-content__img img {
width: 100%;
}
/* Wider left/right padding on the names list when stacked. */
.kryesia-content__list {
padding: 24px 40px 16px;
}
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* GRUPI PARLAMENTAR */
/* Unlike Home/Kryesia (full-width), this page sits in a centered 1140px container
(Bootstrap .container), like live. The 15px padding is the container gutter. */
.grupi-container {
max-width: 1140px;
margin-inline: auto;
padding-inline: 15px;
}
/*----- Member grid (CPT "deputet" pulled in via [pdk_grupi_parlamentar]) -----*/
/* Like live: 6 cards per row (Bootstrap col-md-2); each card is a portrait photo
with the name (links out to Kuvendi) and an optional role. */
.grupi-grid {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
}
.grupi-card {
width: 16.6667%;
/* 190px col holds the 182px photo with an 8px gutter between cards (4px/side),
like live (where the photo is wider than the col's text padding). */
padding: 0 4px;
margin-bottom: 40px;
text-align: center;
}
/* Fixed portrait box like live (182x244, cover-cropped); shrinks on narrow cols. */
.grupi-card__photo img {
display: block;
width: 182px;
height: 244px;
max-width: 100%;
margin: 0 auto;
object-fit: cover;
}
.grupi-card__name {
display: block;
margin-top: 15px;
color: #007bff;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
}
.grupi-card__role {
display: block;
margin-top: 4px;
font-size: 10px;
font-style: italic;
}
/* Responsive: fewer cards per row as the viewport narrows (live uses
col-md-2 which would drop to 1/row below 768). */
@media (max-width: 1024px) {
.grupi-card {
width: 25%;
}
}
@media (max-width: 768px) {
.grupi-card {
width: 33.3333%;
}
}
@media (max-width: 520px) {
.grupi-card {
width: 50%;
}
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* KËSHILLI DREJTUES */
/*----- Hero (heading + subtitle | image) -----*/
.keshilli-hero {
margin: 0;
}
/* Vertically center the text against the image. !important overrides WP block-
library's generated layout rule for .wp-block-columns (align-items: normal). */
.keshilli-hero .keshilli-hero__row {
align-items: center !important;
gap: 0;
margin: 0;
}
/* Heading column: bigger left inset; right gutter to the image like live. */
.keshilli-hero__textcol {
padding: 32px 56px 16px 110px;
}
/* "Këshilli" (600) + "Drejtues" (bold) — both PDK blue, like live. */
.keshilli-hero__title {
margin: 0;
font-family: var(--font-heading);
font-size: 75px;
font-weight: 600;
line-height: 0.85;
color: var(--pdk-blue);
}
.keshilli-hero__title strong {
padding-left: 3vw;
font-weight: 700;
}
/* Big faint watermark-style subtitle + date, in the header light blue. */
.keshilli-hero__subtitle {
margin: 24px 0 0;
font-family: var(--font-heading);
font-size: 37.6px;
font-weight: 900;
line-height: 1.1;
color: var(--pdk-header-bg);
}
.keshilli-hero__date {
margin: 8px 0 0;
font-family: var(--font-heading);
font-size: 32.9px;
font-weight: 900;
color: var(--pdk-header-bg);
}
.keshilli-hero__imgcol img {
display: block;
width: 100%;
height: auto;
}
/*----- Members list (full-width light-blue band; tall narrow single column) -----*/
.keshilli-members {
margin: 0;
padding: 50px 0;
background-color: rgba(220, 234, 242, 0.56);
}
/* The names sit in a centered 1140px container (like live), not full width. */
.keshilli-members__inner {
max-width: 1140px;
margin-inline: auto;
}
/* Plain names (no bullets), one narrow column like live's col-md-3 (25% = 285px). */
.keshilli-list {
width: 25%;
margin: 0;
padding: 0 15px;
list-style: none;
}
.keshilli-list li {
margin-bottom: 15px;
font-family: var(--font-nav);
font-size: 20px;
font-weight: 400;
line-height: 1.5;
color: var(--pdk-text);
text-align: justify;
}
/* Below 1024px: hero stacks (image under the heading) and the list widens. */
@media (max-width: 1024px) {
.keshilli-hero__row {
flex-direction: column;
}
.keshilli-hero__textcol,
.keshilli-hero__imgcol {
flex-basis: auto !important;
width: 100%;
}
.keshilli-hero__textcol {
padding: 32px 15px 16px;
}
.keshilli-hero__imgcol {
margin-top: 24px;
}
.keshilli-list {
width: 50%;
}
}
@media (max-width: 600px) {
.keshilli-hero__title {
font-size: 56px;
}
.keshilli-list {
width: 100%;
}
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* GDK */
/*----- Hero only (no body content on live; same hero pattern as Këshilli) -----*/
.gdk-hero {
margin: 0;
}
/* Vertically center the text against the image (!important beats WP's
generated .wp-block-columns layout rule, align-items: normal). */
.gdk-hero .gdk-hero__row {
align-items: center !important;
gap: 0;
margin: 0;
}
.gdk-hero__textcol {
padding: 32px 56px 16px 110px;
}
.gdk-hero__title {
margin: 0;
font-family: var(--font-heading);
font-size: 75px;
font-weight: 700;
line-height: 0.85;
color: var(--pdk-blue);
}
/* Big faint watermark-style subtitle, in the header light blue (uppercase like live). */
.gdk-hero__subtitle {
margin: 24px 0 0;
font-family: var(--font-heading);
font-size: 37.6px;
font-weight: 900;
line-height: 1.1;
text-transform: uppercase;
color: var(--pdk-header-bg);
}
.gdk-hero__imgcol img {
display: block;
width: 100%;
height: auto;
}
/* Below 1024px: hero stacks (image under the heading). */
@media (max-width: 1024px) {
.gdk-hero__row {
flex-direction: column;
}
.gdk-hero__textcol,
.gdk-hero__imgcol {
flex-basis: auto !important;
width: 100%;
}
.gdk-hero__textcol {
padding: 32px 65px 16px;
}
.gdk-hero__imgcol {
margin-top: 24px;
}
/* Smaller heading + subtitle on mobile. */
.gdk-hero__title {
font-size: 56px;
}
.gdk-hero__subtitle {
font-size: 28px;
}
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* STATUTI */
/*----- Hero (heading only + image; same pattern as GDK) -----*/
.statuti-hero {
margin: 0;
}
.statuti-hero .statuti-hero__row {
align-items: center !important;
gap: 0;
margin: 0;
}
.statuti-hero__textcol {
padding: 32px 56px 16px 110px;
}
.statuti-hero__title {
margin: 0;
font-family: var(--font-heading);
font-size: 62.72px;
font-weight: 600;
line-height: 0.85;
color: var(--pdk-blue);
}
.statuti-hero__imgcol img {
display: block;
width: 100%;
height: auto;
}
/*----- Body: full-width light-blue band, 1140 centered container -----*/
.statuti-body {
margin: 0;
padding: 50px 0;
background-color: rgba(220, 234, 242, 0.56);
}
.statuti-body__inner {
max-width: 1140px;
margin-inline: auto;
padding-inline: 15px;
}
/*----- Table of contents (Përmbajtja) — anchor links to each chapter -----*/
.statuti-toc__title {
margin: 0 0 16px;
font-family: var(--font-heading);
font-size: 32px;
font-weight: 500;
color: var(--pdk-text);
}
.statuti-toc {
margin: 0 0 40px;
padding-left: 20px;
}
.statuti-toc li {
margin-bottom: 6px;
}
.statuti-toc a {
color: #007bff;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
.statuti-toc a:hover {
text-decoration: underline;
}
/*----- Statute text: chapters, articles, points -----*/
.statuti-chapter {
margin: 40px 0 8px;
font-family: var(--font-heading);
font-size: 28px;
font-weight: 900;
line-height: 1.2;
color: var(--pdk-text);
/* offset for the fixed-ish header when jumping via TOC anchors */
scroll-margin-top: 140px;
}
.statuti-body p {
margin: 0 0 15px;
font-family: var(--font-nav);
font-size: 20px;
font-weight: 400;
line-height: 1.5;
color: var(--pdk-text);
text-align: justify;
}
.statuti-neni {
margin-top: 24px;
}
.statuti-neni strong {
font-weight: 700;
}
/* Article subtitles (e.g. "Themelimi dhe Emri"). */
.statuti-subtitle {
margin: 8px 0;
font-family: var(--font-nav);
font-size: 24px;
font-weight: 900;
line-height: 1.2;
color: var(--pdk-text);
}
/* Final signature line ("Prishtinë Kryetari") — extra space above it. */
.statuti-body p.statuti-signature {
margin-top: 50px;
}
/* Below 1024px: hero stacks. */
@media (max-width: 1024px) {
.statuti-hero__row {
flex-direction: column;
}
.statuti-hero__textcol,
.statuti-hero__imgcol {
flex-basis: auto !important;
width: 100%;
}
.statuti-hero__textcol {
padding: 32px 15px 16px;
}
.statuti-hero__imgcol {
margin-top: 24px;
}
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* RAPORTET FINANCIARE */
/* Centered 1140px container, like live (title bar + intro + report list). */
.raporte-page {
max-width: 1140px;
margin-inline: auto;
padding-inline: 15px;
}
.raporte-intro {
margin: 24px 0;
font-family: var(--font-nav);
font-size: 20px;
font-weight: 400;
color: var(--pdk-text);
}
/* Section heading (e.g. "Raportet vjetore:"). */
.raporte__section {
margin: 28px 0 8px;
font-family: var(--font-nav);
font-size: 20px;
color: var(--pdk-text);
}
.raporte__section strong {
font-weight: 700;
}
/* Report links — bold blue, with list bullets (live has none). */
.raporte__list {
margin: 0 0 8px;
padding-left: 20px;
list-style: disc;
}
.raporte__list li {
margin-bottom: 6px;
}
.raporte__list a {
color: #007bff;
font-size: 16px;
font-weight: 700;
text-decoration: none;
}
.raporte__list a:hover {
text-decoration: underline;
}
/* More space below the last section (before the share section). */
.raporte .raporte__list:last-child {
margin-bottom: 50px;
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* KONTAKTI */
/* Simple contact page: title bar + 2 columns (address / comms office) + share.
Centered 1140 container, like the other sub-pages. */
.kontakti-page {
max-width: 1140px;
margin-inline: auto;
padding-inline: 15px;
}
/* Make the contact page fill at least the full viewport (pushes footer down). */
.page-id-2036 .pdk-page {
min-height: 100vh;
}
.kontakti-cols {
margin-top: 35px;
margin-bottom: 35px;
}
/* Left column — address, italic, base font. */
.kontakti-address p {
margin: 0 0 22px;
font-family: var(--font-base);
font-style: italic;
font-size: 16px;
line-height: 1.5;
color: var(--pdk-text);
}
/* Right column — comms office, right-aligned. */
.kontakti-comms {
text-align: right;
}
.kontakti-comms__title {
margin: 0 0 22px;
font-family: var(--font-base);
font-size: 20px;
font-weight: 400;
color: var(--pdk-text);
}
.kontakti-comms__email {
margin: 0;
font-family: var(--font-base);
font-style: italic;
font-size: 16px;
color: var(--pdk-text);
}
@media (max-width: 781px) {
.kontakti-comms {
text-align: left;
}
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* BËHU PJESË E PDK-SË */
/*----- Hero (full-width cover, title bottom-left + subtitle) -----*/
.behu-hero.wp-block-cover {
min-height: 640px;
}
/* Align the hero text with the centered form section: pad the full-width cover
content in to the 1140 container's left/right edge (+15px gutter). */
.behu-hero .wp-block-cover__inner-container {
width: 100%;
max-width: none;
margin-inline: 0;
padding-left: max(15px, calc((100% - 1140px) / 2 + 15px));
padding-right: max(15px, calc((100% - 1140px) / 2 + 15px));
}
.behu-hero__title {
margin: 0 0 4px;
font-family: var(--font-heading);
font-size: 76.8px;
font-weight: 600;
line-height: 1.1;
color: var(--pdk-white);
}
.behu-hero__subtitle {
margin: 0;
font-family: var(--font-nav);
font-size: 25px;
font-weight: 500;
color: var(--pdk-white);
}
/*----- Membership form panel (green, centered 1140) -----*/
.behu-form-section {
max-width: 1140px;
margin: 0 auto 50px;
padding: 24px 15px 40px;
background-color: #90c0a8;
}
.behu-form__title {
margin: 0 0 24px;
font-family: var(--font-nav);
font-size: 20px;
font-weight: 500;
text-align: center;
color: var(--pdk-white);
}
/* Submit "Dërgo" pushed to the right (like live). */
.behu-form-section .pdk-form__submit {
display: block;
width: 201px;
margin-left: auto;
}
/* Share section at the bottom — aligned with the page content (1140 centered). */
.behu-share {
max-width: 1140px;
margin-inline: auto;
padding-inline: 15px;
}
@media (max-width: 768px) {
.behu-hero__title { font-size: 44px; }
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* LAJME */
/*----- Hero (full-width cover image, 500px, centered "Lajme" title) -----*/
.lajme-hero.wp-block-cover {
min-height: 500px;
align-items: center;
justify-content: center;
}
/* Subtle dark gradient at the very top, fading out (like live). */
.lajme-hero.wp-block-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(20, 20, 20, 0.57) 6%, rgba(0, 0, 0, 0) 14%);
pointer-events: none;
}
.lajme-hero__title {
margin: 0 0 8px;
font-family: var(--font-heading);
font-size: 96px;
font-weight: 500;
line-height: 1.1;
color: var(--pdk-white);
text-align: center;
}
/*----- Article grid (full-width, 4 per row) -----*/
.lajme-list {
padding: 50px 60px;
}
.lajme-grid {
display: flex;
flex-wrap: wrap;
margin-inline: -15px;
}
.lajme-card {
width: 25%;
padding: 0 15px;
margin-bottom: 30px;
}
.lajme-card__imgwrap {
position: relative;
height: 260px;
}
.lajme-card__img {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
/* "Lajme" category badge — light-blue, bottom-left over the image. */
.lajme-card__badge {
position: absolute;
bottom: 0;
left: 0;
padding: 6px 12px;
background: #bee0f4;
color: var(--pdk-blue);
font-family: var(--font-base);
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
}
.lajme-card__desc {
padding-top: 12px;
}
.lajme-card__title {
display: block;
margin-bottom: 5px;
font-family: var(--font-nav);
font-size: 18px;
font-weight: 500;
line-height: 27px;
color: #707070;
text-decoration: none;
}
.lajme-card__more {
display: inline-block;
font-size: 19px;
font-weight: 500;
color: var(--pdk-blue);
text-decoration: underline;
}
/* Cards beyond the first batch are hidden until "Më shumë" reveals them. */
.lajme-card--hidden {
display: none;
}
/* "Më shumë" load-more button (centered, blue, uppercase — like live). */
.lajme-more__wrap {
text-align: center;
}
.lajme-more {
display: inline-block;
margin: 30px 0;
padding: 7px 20px;
font-family: var(--font-nav);
font-size: 20px;
font-weight: 500;
line-height: 1.5;
color: var(--pdk-blue);
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
border-radius: 4px;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.lajme-more:hover {
background-color: var(--pdk-blue);
color: var(--pdk-white);
}
/* Responsive: 4 → 3 → 2 → 1 per row. */
@media (max-width: 1024px) {
.lajme-card { width: 33.3333%; }
.lajme-hero__title { font-size: 64px; }
.lajme-list { padding: 40px 30px; }
}
@media (max-width: 768px) {
.lajme-card { width: 50%; }
}
@media (max-width: 520px) {
.lajme-card { width: 100%; }
.lajme-hero__title { font-size: 48px; }
}
/*----- Single article (/article/) -----*/
.article-page-content__inner {
max-width: 1140px;
margin-inline: auto;
padding: 40px 15px 60px;
}
/* Title — dark Montserrat (live's .page-title has no color → inherits #212529;
it is NOT blue). Size reduced from live's 48px. */
.article-title {
margin: 0 0 24px;
font-family: var(--font-nav);
font-size: 32px;
font-weight: 600;
line-height: 1.2;
color: var(--pdk-text);
}
/* Subtitle — repeated title; Montserrat (live uses a serif here; kept
Montserrat for consistency). */
.article-subtitle {
margin: 0 0 24px;
font-family: var(--font-nav);
font-size: 26px;
font-weight: 700;
line-height: 1.3;
color: var(--pdk-text);
}
/* Body — square featured image floated left, text flowing beside it. */
.article-body::after {
content: "";
display: table;
clear: both;
}
.article-share-image {
float: left;
width: 555px;
max-width: 48%;
aspect-ratio: 1;
height: auto;
object-fit: cover;
margin: 0 30px 20px 0;
}
.article-text {
font-family: var(--font-nav);
font-size: 16px;
line-height: 1.6;
color: var(--pdk-text);
}
.article-text p {
margin: 0 0 1rem;
}
@media (max-width: 768px) {
.article-title { font-size: 34px; }
.article-share-image {
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 20px;
}
}
/* ============================================================ */
/* ============================================================ */
/* ============================================================ */
/* NJOFTIME */
/* Centered 1140px Bootstrap-style container (live uses .container here). The
page title spans the full width; the announcement sits in a half-width column
(live's .col-md-6); the share section spans the full width again. The whole
block uses Arial (live renders the announcement as a small Arial document). */
.njoftime-page {
max-width: 1140px;
margin-inline: auto;
padding-inline: 15px;
font-family: Arial, sans-serif;
}
/* Page title — h2, centered, Arial (live:
). Sits full width above the column. */
.njoftime__pagetitle {
margin: 24px 0 20px;
font-family: Arial, sans-serif;
font-size: 32px;
font-weight: 500;
line-height: 1.2;
text-align: center;
color: var(--pdk-text);
}
/* The announcement occupies the left half (live: .col-md-6). */
.njoftime__item {
width: 50%;
margin-bottom: 50px;
}
/* live: .pdf-details { font-family: Arial; margin-bottom: 12px } */
.njoftime__details {
margin-bottom: 12px;
font-family: Arial, sans-serif;
}
/* Announcement title — h4 Arial (live markup is an
inside .pdf-details). */
.njoftime__title {
margin: 0 0 10px;
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 1.2;
color: var(--pdk-text);
}
/* Date — plain Arial paragraph under the title (live: