/*
Theme Name: Harmony
Theme URI: https://portfolio.alexioudev.com/
Template: hello-elementor
Author: Fotios Alexiou
Author URI: https://portfolio.alexioudev.com/
Description: Harmony is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.9.1784999399
Updated: 2026-07-25 17:09:59

*/

/* =========================================================
   HARMONY — ELEMENTOR GLOBAL DESIGN SYSTEM
   Font: Syne Variable
   Palette: Charcoal / Ivory / Stone / Gold
========================================================= */


/* =========================================================
   1. FONT
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');

/* =========================================================
   2. GLOBAL DESIGN TOKENS
========================================================= */

:root {

    /* Brand colors */
    --harmony-gold: #b08d57;
    --harmony-gold-soft: rgba(176, 141, 87, 0.18);

    --harmony-charcoal: #1e1e1e;
    --harmony-ivory: #f7f4ef;

    --harmony-stone: #d9d4cb;
    --harmony-stone-soft: #ebe8e2;

    --harmony-white: #ffffff;
    --harmony-muted-text: #6f6d69;

    --harmony-error: #b6382e;


    /* Semantic colors */
    --color-background: var(--harmony-ivory);
    --color-foreground: var(--harmony-charcoal);

    --color-surface: var(--harmony-white);
    --color-surface-foreground: var(--harmony-charcoal);

    --color-primary: var(--harmony-charcoal);
    --color-primary-foreground: var(--harmony-ivory);

    --color-secondary: var(--harmony-stone-soft);
    --color-secondary-foreground: var(--harmony-charcoal);

    --color-accent: var(--harmony-gold);
    --color-accent-foreground: var(--harmony-ivory);

    --color-muted: var(--harmony-stone-soft);
    --color-muted-foreground: var(--harmony-muted-text);

    --color-border: var(--harmony-stone);
    --color-input: var(--harmony-stone);
    --color-ring: var(--harmony-gold);


    /* Typography */
    --font-primary: "Syne", Arial, Helvetica, sans-serif;
    --font-secondary: "Syne", Arial, Helvetica, sans-serif;


    /* Fluid typography */
    --font-display: clamp(3.25rem, 6.8vw, 7.5rem);
    --font-h1: clamp(2.75rem, 5.2vw, 6rem);
    --font-h2: clamp(2.25rem, 4.2vw, 4.75rem);
    --font-h3: clamp(1.75rem, 2.8vw, 3rem);
    --font-h4: clamp(1.375rem, 1.9vw, 2rem);
    --font-h5: clamp(1.125rem, 1.4vw, 1.5rem);
    --font-h6: clamp(1rem, 1.1vw, 1.25rem);

    --font-body-large: clamp(1.0625rem, 1.2vw, 1.25rem);
    --font-body: clamp(0.9375rem, 0.45vw + 0.82rem, 1.125rem);
    --font-body-small: clamp(0.8125rem, 0.3vw + 0.73rem, 0.9375rem);
	--font-lead: clamp(1.375rem, 1.2rem + 1vw, 1.875rem);

    --font-button: clamp(0.75rem, 0.25vw + 0.7rem, 0.875rem);
    --font-eyebrow: clamp(0.6875rem, 0.2vw + 0.64rem, 0.75rem);


    /* Fluid spacing */
    --space-2xs: clamp(0.25rem, 0.2vw, 0.375rem);
    --space-xs: clamp(0.5rem, 0.4vw, 0.75rem);
    --space-sm: clamp(0.75rem, 0.7vw, 1rem);
    --space-md: clamp(1rem, 1.2vw, 1.5rem);
    --space-lg: clamp(1.5rem, 2vw, 2.5rem);
    --space-xl: clamp(2.5rem, 3.5vw, 4.5rem);
    --space-2xl: clamp(4rem, 6vw, 7rem);
    --space-3xl: clamp(5rem, 8vw, 10rem);


    /* Layout */
    --site-width: 1280px;
    --site-wide-width: 1440px;

    --site-gutter: clamp(1.25rem, 4vw, 4rem);
    --section-padding: clamp(4rem, 8vw, 7.5rem);
    --section-padding-small: clamp(2.75rem, 5vw, 5rem);


    /* Radius */
    --radius-xs: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;


    /* Shadows */
    --shadow-soft:
        0 10px 30px rgba(30, 30, 30, 0.06);

    --shadow-medium:
        0 18px 50px rgba(30, 30, 30, 0.1);


    /* Motion */
    --transition-fast: 180ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   3. RESET / BASE
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    overflow-x: hidden;

    background-color: var(--color-background);
    color: var(--color-foreground);

    font-family: var(--font-primary);
    font-size: var(--font-body);
    font-weight: 400;
    line-height: 1.7;
}

body,
button,
input,
textarea,
select {
    font-family: var(--font-primary);
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition:
        color var(--transition-normal),
        opacity var(--transition-normal);
}

p {
    margin-top: 0;
    margin-bottom: 1.25em;
}

p:last-child {
    margin-bottom: 0;
}

::selection {
    background-color: var(--harmony-gold);
    color: var(--harmony-ivory);
}


/* =========================================================
   4. GLOBAL HEADINGS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
    margin-top: 0;

    color: var(--color-foreground);

    font-family: var(--font-secondary);
    font-weight: 500;

    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}

h1 {
    margin-bottom: 0.35em;
    font-size: var(--font-h1);
    line-height: 1.02;
}

h2 {
    margin-bottom: 0.4em;
    font-size: var(--font-h2);
    line-height: 1.06;
}

h3 {
    margin-bottom: 0.5em;
    font-size: var(--font-h3);
    line-height: 1.12;
}

h4 {
    margin-bottom: 0.55em;
    font-size: var(--font-h4);
    line-height: 1.18;
}

h5 {
    margin-bottom: 0.6em;
    font-size: var(--font-h5);
    line-height: 1.25;
}

h6 {
    margin-bottom: 0.65em;
    font-size: var(--font-h6);
    line-height: 1.3;
}


/* Elementor heading tag-specific sizes */

.elementor-heading-title.elementor-size-xxl {
    font-size: var(--font-display);
    line-height: 0.98;
}

.elementor-heading-title.elementor-size-xl {
    font-size: var(--font-h1);
    line-height: 1.02;
}

.elementor-heading-title.elementor-size-large {
    font-size: var(--font-h2);
    line-height: 1.06;
}

.elementor-heading-title.elementor-size-medium {
    font-size: var(--font-h3);
    line-height: 1.12;
}

.elementor-heading-title.elementor-size-small {
    font-size: var(--font-h4);
    line-height: 1.18;
}


/* =========================================================
   5. TYPOGRAPHY UTILITIES
========================================================= */

.display,
.harmony-display {
    font-family: var(--font-secondary);
    font-size: var(--font-display);
    font-weight: 500;
    line-height: 0.98;

    letter-spacing: 0.005em;
    text-transform: uppercase;
    text-wrap: balance;
}

.harmony-h1 {
    font-size: var(--font-h1);
    line-height: 1.02;
}

.harmony-h2 {
    font-size: var(--font-h2);
    line-height: 1.06;
}

.harmony-h3 {
    font-size: var(--font-h3);
    line-height: 1.12;
}

.harmony-h4 {
    font-size: var(--font-h4);
    line-height: 1.18;
}

.body-large,
.harmony-body-large {
    font-size: var(--font-body-large);
    line-height: 1.65;
}

.body-small,
.harmony-body-small {
    font-size: var(--font-body-small);
    line-height: 1.6;
}

.harmony-lead {
    font-size: var(--font-lead);
    line-height: 1.45;
    font-weight: 400;
}

.eyebrow,
.harmony-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;

    margin-bottom: var(--space-sm);

    color: var(--harmony-gold);

    font-family: var(--font-primary);
    font-size: var(--font-eyebrow);
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.text-muted,
.harmony-text-muted {
    color: var(--color-muted-foreground);
}

.text-gold,
.harmony-text-gold {
    color: var(--harmony-gold);
}

.text-ivory,
.harmony-text-ivory {
    color: var(--harmony-ivory);
}

.text-charcoal,
.harmony-text-charcoal {
    color: var(--harmony-charcoal);
}


/* =========================================================
   6. HAIRLINE / DIVIDERS
========================================================= */

.hairline,
.harmony-hairline {
    display: inline-block;

    width: 2.5rem;
    height: 1px;

    flex: 0 0 auto;

    background-color: var(--harmony-gold);
    vertical-align: middle;
}

.harmony-divider {
    width: 100%;
    height: 1px;
    border: 0;
    background-color: var(--color-border);
}


/* =========================================================
   7. LAYOUT UTILITIES
========================================================= */

.harmony-container {
    width: min(
        calc(100% - (var(--site-gutter) * 2)),
        var(--site-width)
    );

    margin-inline: auto;
}

.harmony-container-wide {
    width: min(
        calc(100% - (var(--site-gutter) * 2)),
        var(--site-wide-width)
    );

    margin-inline: auto;
}

.harmony-section {
    padding-block: var(--section-padding);
}

.harmony-section-small {
    padding-block: var(--section-padding-small);
}

.harmony-section-top {
    padding-top: var(--section-padding);
}

.harmony-section-bottom {
    padding-bottom: var(--section-padding);
}

.harmony-bg-ivory {
    background-color: var(--harmony-ivory);
}

.harmony-bg-charcoal {
    background-color: var(--harmony-charcoal);
    color: var(--harmony-ivory);
}

.harmony-bg-stone {
    background-color: var(--harmony-stone-soft);
}

.harmony-bg-white {
    background-color: var(--harmony-white);
}


/* =========================================================
   8. BUTTONS
========================================================= */

.elementor-button,
.harmony-button,
button.harmony-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

/*     min-height: 3.25rem; */
    padding: 0.95rem clamp(1.5rem, 2.3vw, 2.25rem);

    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);

    background-color: var(--color-primary);
    color: var(--color-primary-foreground);

    font-family: var(--font-primary);
    font-size: var(--font-button);
    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        color var(--transition-normal),
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal),
        opacity var(--transition-normal);
}

.elementor-button:hover,
.elementor-button:focus-visible,
.harmony-button:hover,
.harmony-button:focus-visible {
    border-color: var(--harmony-gold);
    background-color: var(--harmony-gold);
    color: var(--harmony-ivory);

/*     transform: translateY(-2px); */
}

.elementor-button:active,
.harmony-button:active {
/*     transform: translateY(0); */
}


.icon-button .elementor-button .elementor-button-icon {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.icon-button .elementor-button:hover .elementor-button-icon {
    transform: translateX(2px);
}

/* Secondary / outline button */

.harmony-button-outline,
.elementor-button.harmony-button-outline {
    border-color: var(--harmony-charcoal);
    background-color: transparent;
    color: var(--harmony-charcoal);
}

.harmony-button-outline:hover,
.harmony-button-outline:focus-visible,
.elementor-button.harmony-button-outline:hover,
.elementor-button.harmony-button-outline:focus-visible {
    border-color: var(--harmony-charcoal);
    background-color: var(--harmony-charcoal);
    color: var(--harmony-ivory);
}


/* Gold button */

.harmony-button-gold,
.elementor-button.harmony-button-gold {
    border-color: var(--harmony-gold);
    background-color: var(--harmony-gold);
    color: var(--harmony-ivory);
}

.harmony-button-gold:hover,
.harmony-button-gold:focus-visible,
.elementor-button.harmony-button-gold:hover,
.elementor-button.harmony-button-gold:focus-visible {
    border-color: var(--harmony-charcoal);
    background-color: var(--harmony-charcoal);
}


/* Button on dark backgrounds */

.harmony-bg-charcoal .elementor-button,
.harmony-bg-charcoal .harmony-button {
    border-color: var(--harmony-ivory);
    background-color: var(--harmony-ivory);
    color: var(--harmony-charcoal);
}

.harmony-bg-charcoal .elementor-button:hover,
.harmony-bg-charcoal .harmony-button:hover {
    border-color: var(--harmony-gold);
    background-color: var(--harmony-gold);
    color: var(--harmony-charcoal);
}


/* =========================================================
   9. LINKS
========================================================= */

.harmony-link {
    position: relative;
    display: inline-block;

    color: var(--color-foreground);

    font-size: var(--font-button);
    font-weight: 500;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.harmony-link::after {
    position: absolute;
    right: 0;
    bottom: -0.35rem;
    left: 0;

    height: 1px;

    background-color: var(--harmony-gold);

    content: "";
    transform: scaleX(0);
    transform-origin: right center;

    transition: transform var(--transition-normal)
        var(--ease-editorial);
}

.harmony-link:hover::after,
.harmony-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* =========================================================
   10. CARDS
========================================================= */

.harmony-card {
    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background-color: var(--color-surface);
    color: var(--color-surface-foreground);

    transition:
        transform var(--transition-slow)
            var(--ease-editorial),
        border-color var(--transition-normal),
        box-shadow var(--transition-slow)
            var(--ease-editorial);
}

.harmony-card:hover {
    border-color: var(--harmony-gold);
    box-shadow: var(--shadow-soft);
    transform: translateY(-6px);
}

.harmony-card-content {
    padding: clamp(1.25rem, 2.5vw, 2.25rem);
}


/* =========================================================
   11. FORM FIELDS
========================================================= */

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.elementor-field {
    width: 100%;

    border: 1px solid var(--color-input);
    border-radius: var(--radius-md);

    background-color: transparent;
    color: var(--color-foreground);

    font-family: var(--font-primary);
    font-size: var(--font-body);
    font-weight: 400;

    outline: none;

    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        background-color var(--transition-normal);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
.elementor-field:not(textarea) {
    min-height: 3.5rem;
    padding: 0.8rem 1rem;
}

textarea,
textarea.elementor-field {
    min-height: 9rem;
    padding: 1rem;
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus,
.elementor-field:focus {
    border-color: var(--color-ring);
    box-shadow: 0 0 0 3px var(--harmony-gold-soft);
}

input::placeholder,
textarea::placeholder,
.elementor-field::placeholder {
    color: var(--color-muted-foreground);
    opacity: 0.8;
}

label,
.elementor-field-label {
    color: var(--color-foreground);

    font-family: var(--font-primary);
    font-size: var(--font-body-small);
    font-weight: 500;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   12. DARK THEME
   Add class "dark" to body or a parent container.
========================================================= */

.dark {
    --color-background: var(--harmony-charcoal);
    --color-foreground: var(--harmony-ivory);

    --color-surface: #2a2a2a;
    --color-surface-foreground: var(--harmony-ivory);

    --color-primary: var(--harmony-ivory);
    --color-primary-foreground: var(--harmony-charcoal);

    --color-secondary: #303030;
    --color-secondary-foreground: var(--harmony-ivory);

    --color-muted: #303030;
    --color-muted-foreground: #b7b3ac;

    --color-accent: var(--harmony-gold);
    --color-accent-foreground: var(--harmony-charcoal);

    --color-border: rgba(255, 255, 255, 0.12);
    --color-input: rgba(255, 255, 255, 0.15);
    --color-ring: var(--harmony-gold);
}

.dark,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark .elementor-heading-title {
    color: var(--color-foreground);
}


/* =========================================================
   13. ACCESSIBILITY
========================================================= */

:focus-visible {
    outline: 2px solid var(--harmony-gold);
    outline-offset: 4px;
}

.screen-reader-text {
    position: absolute !important;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}


/* =========================================================
   14. RESPONSIVE ADJUSTMENTS
========================================================= */

@media (max-width: 1024px) {

    :root {
        --site-gutter: clamp(1.5rem, 4vw, 2.5rem);
    }

    .elementor-button,
    .harmony-button {
        min-height: 3.125rem;
    }
}

@media (max-width: 767px) {

    :root {
        --site-gutter: 1.25rem;
    }

    body {
        line-height: 1.65;
    }

    .display,
    .harmony-display {
        line-height: 1;
    }

    .eyebrow,
    .harmony-eyebrow {
        letter-spacing: 0.18em;
    }

    .elementor-button,
    .harmony-button {
        min-height: 3rem;
        padding-inline: 1.4rem;
        letter-spacing: 0.12em;
    }
}


/* =========================================================
   15. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}