/* ========================================================================== PART I — PORTABLE COMPONENT SYSTEM 01–17 Layout, sadržaj, komponente, obrasci i utilities PART II — SITE CHROME & LEGACY BRIDGES 18 Reading Chassis / legacy bridge 19 Header, branding i navigation 20 Footer PART III — HOME HERO SYSTEM 21.1 Header overlay 21.2 Base and atmosphere 21.3 Identity composition 21.4 Medium background and title flow 21.5 Mid-screen ornament width 21.6 Mobile atmosphere 21.7 Mobile balanced composition 21.8 Open mobile menu 21.9 Ornament line brightness 21.10 Unified gold treatment 21.11 Enter threshold 21.11.1 Mid-screen Enter 21.12 Large-screen micro-tuning ========================================================================== */ /* ========================================================================== THE SOUL PHYSICS DESIGN SYSTEM 04 — COMPONENTS (v3.1 — CANONICAL RELEASE) -------------------------------------------------------------------------- PURPOSE This file implements the physical and interactive behaviour of the ecosystem's building blocks. It describes the structural geometry of objects. THE 4-LAYER HIERARCHY 01 — Foundation → Global rules, resets, scale and semantic typography voices. 02 — Tokens → Raw color family DNA, constants, inks and structural tokens. 03 — System → Active page-world orchestration preset layer. 04 — Components → Consumes resolved system roles and structural tokens directly. STRICT ARCHITECTURAL ISOLATION This file contains zero intermediate color aliases, zero hard-coded HEX values, and zero site identity routing. Every layout primitive and object consumes finalized, component-friendly variables supplied directly by prior layers. ========================================================================== */ /* ========================================================================== COMPONENT PHILOSOPHY -------------------------------------------------------------------------- Components never decide page identity. Components never choose palettes. Components never choose surfaces. Those decisions belong entirely to 03-system.css. Components consume only the resolved semantic page context provided by 03-system.css. This keeps every component portable across all Sites, Palettes and Surfaces. ========================================================================== */ /* ========================================================================== 01 — COMPONENT FOUNDATIONS (Context Bindings) -------------------------------------------------------------------------- Purpose: Binds component-level structural behavior to the active tokens from layer 03. By binding variables directly to the global body hook, the component layer achieves absolute independence from site preset expansions. ========================================================================== */ body { --focus-ring: var(--anchor-core); --elevated-surface: var(--reading-air-surface); } /* ========================================================================== 02 — LAYOUT PRIMITIVES (The Semantic Layout Engine) -------------------------------------------------------------------------- Purpose: Shared layout primitives that handle structure, containment, bounds, and alignment. Completely agnostic of color or identity. ========================================================================== */ /* Universal Container Constraints */ .tsp-container, .tsp-inner { width: min(100% - (var(--s-3) * 2), 72rem); margin-inline: auto; } /* Narrow Long-Form Text Containment */ .tsp-narrow { width: min(100% - (var(--s-3) * 2), 48rem); margin-inline: auto; } /* Semantički tok — Vertical spacing stacking */ .tsp-stack > * + * { margin-top: var(--s-2); } .tsp-flow > * + * { margin-top: var(--s-3); } /* Klaster — Flex wrap grouping for tags, buttons, actions */ .tsp-cluster { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; } /* Grid Matrix */ .tsp-grid { display: grid; gap: var(--s-3); } /* Switcher — Automatic sidebar layout adaptation */ .tsp-switcher { display: flex; flex-wrap: wrap; gap: var(--s-3); } .tsp-switcher > * { flex-grow: 1; flex-basis: calc((40rem - 100%) * 999); } @media (min-width: 760px) { .tsp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tsp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================================== 03 — GATEWAY OBJECTS -------------------------------------------------------------------------- Purpose: The primary entry thresholds of the ecosystem. Focuses orientation, bridges domains, and acts as major navigational arrivals. Gateway != Card. It is an entrance, an architectural portal. ========================================================================== */ .tsp-gateway { padding: var(--s-4); color: var(--reading-main-ink); background: var(--reading-main-surface); border: var(--token-border-width) solid var(--divider); border-left: 4px solid var(--accent-soft); border-radius: var(--token-radius-md); box-shadow: var(--token-shadow-soft); transition: transform var(--token-transition), box-shadow var(--token-transition); } .tsp-gateway:hover { transform: translateY(-3px); box-shadow: var(--token-shadow-lift); } .tsp-gateway__target { font-family: var(--voice-law); color: var(--accent-hover); margin-bottom: var(--s-1); } /* ========================================================================== 04 — CONTENT OBJECTS -------------------------------------------------------------------------- Purpose: The ultimate long-form narrative containment vessels. Protects font rhythm, line-height, and density to guarantee maximum reading comfort. ========================================================================== */ .tsp-content-object { max-width: 48rem; margin-inline: auto; line-height: 1.75; } .tsp-content-object p { margin-bottom: var(--s-2); } .tsp-content-object h2, .tsp-content-object h3 { margin-top: var(--s-4); margin-bottom: var(--s-2); } /* ========================================================================== 05 — HERO -------------------------------------------------------------------------- Purpose: Main welcome threshold components. Simplified to let Phase 4 page binding natively drive contrast, with an optional stark inversion class. ========================================================================== */ .tsp-hero { padding: var(--s-5) var(--s-3); border-bottom: var(--token-border-width) solid var(--divider); } .tsp-hero--contrast { color: var(--anchor-deep-ink); background: var(--anchor-deep-surface); } .tsp-hero__inner { max-width: 72rem; margin-inline: auto; } .tsp-hero__eyebrow { margin-bottom: var(--s-1); font-family: var(--voice-ui); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.86; } .tsp-hero__title { max-width: 12ch; margin-bottom: var(--s-2); } .tsp-hero__text { max-width: 42rem; opacity: 0.92; } .tsp-hero__actions { margin-top: var(--s-3); } /* ========================================================================== 06 — SECTION -------------------------------------------------------------------------- Purpose: Major macro structural page increments. Sets up global rhythm. Renamed to mirror the exact semantic vocabulary from layer 03. ========================================================================== */ .tsp-section { padding: var(--s-5) var(--s-3); } .tsp-section--main { color: var(--reading-main-ink); background: var(--reading-main-surface); } .tsp-section--soft { color: var(--reading-soft-ink); background: var(--reading-soft-surface); } .tsp-section--reading { color: var(--reading-air-ink); background: var(--reading-air-surface); } .tsp-section--rich { color: var(--reading-rich-ink); background: var(--reading-rich-surface); } .tsp-section__inner { max-width: 72rem; margin-inline: auto; } /* ========================================================================== 07 — HEADING GROUP -------------------------------------------------------------------------- Purpose: Orientation cluster containing subtitle metadata and section anchors. ========================================================================== */ .tsp-heading-group { max-width: 52rem; margin-bottom: var(--s-3); } .tsp-heading-group__eyebrow { margin-bottom: var(--s-1); color: var(--accent); font-family: var(--voice-ui); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .tsp-heading-group__title { margin-bottom: var(--s-1); } /* ========================================================================== 08 — CARDS -------------------------------------------------------------------------- Purpose: Discrete content grouping. Enforces localized structural focus. ========================================================================== */ .tsp-card { padding: var(--s-3); color: var(--reading-air-ink); background: var(--reading-air-surface); border: var(--token-border-width) solid var(--divider); border-radius: var(--token-radius-md); box-shadow: var(--token-shadow-soft); } .tsp-card__meta { margin-bottom: var(--s-2); color: var(--accent); font-family: var(--voice-ui); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .tsp-card--quiet { color: var(--reading-soft-ink); background: var(--reading-soft-surface); box-shadow: none; } .tsp-card--identity { color: var(--reading-main-ink); background: var(--reading-main-surface); } .tsp-card--rich { color: var(--reading-rich-ink); background: var(--reading-rich-surface); } /* ========================================================================== 09 — BUTTONS -------------------------------------------------------------------------- Purpose: Decision action points. Implements strict keyboard and pointer feedback. ========================================================================== */ .tsp-button, .wp-block-button__link, .kb-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.75rem 1.25rem; color: var(--interactive-ink) !important; background: var(--interactive-surface); border: var(--token-border-width) solid var(--interactive-surface); border-radius: var(--token-radius-sm); font-family: var(--voice-ui); font-size: 1rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: all var(--token-transition); } .tsp-button:hover, .wp-block-button__link:hover, .kb-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); } .tsp-button:focus-visible, .wp-block-button__link:focus-visible, .kb-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .tsp-button--secondary { color: var(--accent) !important; background: transparent; border-color: var(--accent); } .tsp-button--secondary:hover { color: var(--ink-inverse) !important; } .tsp-button--ghost { color: inherit !important; background: transparent; border-color: currentColor; } .tsp-button--ghost:hover { color: var(--ink-inverse) !important; } /* ========================================================================== 10 — CTA -------------------------------------------------------------------------- Purpose: Abundant, focused activation banners. Employs crisp standalone radius. ========================================================================== */ .tsp-cta { padding: var(--s-4); color: var(--interactive-ink); background: var(--interactive-surface); border-radius: var(--token-radius-lg); box-shadow: var(--token-shadow-lift); } .tsp-cta__title { margin-bottom: var(--s-2); } .tsp-cta__text { max-width: 42rem; opacity: 0.94; } .tsp-cta__actions { margin-top: var(--s-3); } .tsp-cta--quiet { color: var(--ink-primary); background: var(--surface-soft); box-shadow: none; } /* ========================================================================== 11 — QUOTES -------------------------------------------------------------------------- Purpose: Marks reflective, poetical, or canonical density shifts. ========================================================================== */ .tsp-quote { padding: var(--s-3); color: var(--reading-air-ink); background: var(--reading-air-surface); border-left: 0.35rem solid var(--accent); border-radius: var(--token-radius-sm); } .tsp-quote blockquote { margin: 0; font-family: var(--voice-inner); font-size: 1.25rem; line-height: 1.6; } .tsp-quote cite { display: block; margin-top: var(--s-2); color: var(--accent); font-family: var(--voice-ui); font-size: 0.875rem; font-style: normal; font-weight: 700; } .tsp-quote--soft { color: var(--reading-soft-ink); background: var(--reading-soft-surface); } /* ========================================================================== 12 — TIMELINE ========================================================================== */ .tsp-timeline { position: relative; display: grid; gap: var(--s-3); padding-left: var(--s-3); } .tsp-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0.45rem; width: var(--token-border-width); background: var(--divider); } .tsp-timeline__item { position: relative; padding: var(--s-2); color: var(--reading-air-ink); background: var(--reading-air-surface); border: var(--token-border-width) solid var(--divider); border-radius: var(--token-radius-md); } .tsp-timeline__item::before { content: ""; position: absolute; top: var(--s-2); left: calc(-1 * var(--s-3)); width: 0.9rem; height: 0.9rem; background: var(--accent-soft); border-radius: var(--token-radius-pill); } /* ========================================================================== 13 — MEDIA ========================================================================== */ .tsp-media { overflow: hidden; color: var(--reading-air-ink); background: var(--reading-air-surface); border: var(--token-border-width) solid var(--divider); border-radius: var(--token-radius-md); } .tsp-media img, .tsp-media video, .tsp-media iframe { display: block; width: 100%; height: auto; } .tsp-media iframe { aspect-ratio: 16 / 9; } .tsp-media__caption { padding: var(--s-1) var(--s-2); font-family: var(--voice-ui); font-size: 0.875rem; } /* ========================================================================== 14 — KNOWLEDGE HELPERS -------------------------------------------------------------------------- Purpose: Applied inside editorial educational spreads (.realm-* contexts). Consumes --realm-* properties dynamically without rigid overrides. ========================================================================== */ .tsp-realm-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 1.75rem; padding: 0.25rem 0.75rem; color: var(--ink-primary); background: var(--realm-air, var(--surface-soft)); border: var(--token-border-width) solid var(--realm-main, var(--accent)); border-radius: var(--token-radius-pill); font-family: var(--voice-ui); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .tsp-knowledge-card { padding: var(--s-3); color: var(--ink-primary); background: var(--realm-air, var(--surface-air)); border: var(--token-border-width) solid var(--realm-bridge, var(--divider)); border-radius: var(--token-radius-md); } .tsp-knowledge-card__label { margin-bottom: var(--s-1); color: var(--realm-main, var(--accent)); font-family: var(--voice-ui); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .tsp-reflection-box { padding: var(--s-3); color: var(--ink-primary); background: var(--realm-soft, var(--surface-soft)); border-left: 0.35rem solid var(--realm-main, var(--accent)); border-radius: var(--token-radius-sm); } .tsp-reflection-box__prompt { margin: 0; font-family: var(--voice-inner); font-size: 1.15rem; line-height: 1.6; } .tsp-canonical-statement { padding: var(--s-3); color: var(--threshold-ink); background: var(--threshold-surface); border-radius: var(--token-radius-md); } .tsp-canonical-statement__text { margin: 0; font-family: var(--voice-law); font-size: 1.2rem; line-height: 1.55; } /* ========================================================================== 15 — EDITORIAL BLOCK PATTERNS -------------------------------------------------------------------------- Purpose: Complex editorial compositions and macro patterns. This is where components and primitives combine into specialized page patterns. Every pattern relies strictly on native layout bounds and inherits active system roles from layer 03 without injecting chromatic dependencies. ========================================================================== */ /* --- 1. PILLARS (Three Pillars Matrix Composition) --- */ .tsp-pattern-pillars { display: grid; gap: var(--s-3); } @media (min-width: 760px) { .tsp-pattern-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } } /* --- 2. FEATURE (High-contrast asymmetry split) --- */ .tsp-pattern-feature { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .tsp-pattern-feature > * { flex-grow: 1; flex-basis: calc((35rem - 100%) * 999); } .tsp-pattern-feature__graphic { border-radius: var(--token-radius-lg); overflow: hidden; } /* --- 3. COMPARISON (Side-by-side analytical structure) --- */ .tsp-pattern-comparison { display: grid; gap: var(--s-3); } @media (min-width: 760px) { .tsp-pattern-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } } /* --- 4. JOURNEY / ROADMAP (Linear sequence tracking) --- */ .tsp-pattern-journey { display: flex; flex-direction: column; gap: var(--s-3); position: relative; } .tsp-pattern-journey__step { display: flex; gap: var(--s-2); align-items: flex-start; } .tsp-pattern-journey__counter { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; border-radius: var(--token-radius-pill); background: var(--threshold-surface); color: var(--threshold-ink); font-family: var(--voice-ui); font-weight: 700; font-size: 0.875rem; } /* --- 5. ACCORDION (Progressive meaning disclosure) --- */ .tsp-pattern-accordion { border-top: var(--token-border-width) solid var(--divider); border-bottom: var(--token-border-width) solid var(--divider); } .tsp-pattern-accordion__trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-block: var(--s-2); background: transparent; border: none; color: inherit; font-family: var(--voice-law); font-size: 1.15rem; text-align: left; cursor: pointer; } .tsp-pattern-accordion__panel { padding-bottom: var(--s-2); display: block; } /* --- 6. PROCESS (Cyclic rhythm or iterative phases) --- */ .tsp-pattern-process { display: grid; gap: var(--s-2); } @media (min-width: 640px) { .tsp-pattern-process { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3); } } /* ========================================================================== 16 — UTILITIES & STATE MESSAGES ========================================================================== */ .tsp-alert, .tsp-info, .tsp-success, .tsp-warning { padding: var(--s-2); color: var(--ink-primary); background: var(--surface-soft); border: var(--token-border-width) solid var(--divider); border-left-width: 0.35rem; border-left-color: var(--accent-soft); border-radius: var(--token-radius-sm); } /* ========================================================================== 17 — RESPONZIVNI FINI TUNING ========================================================================== */ @media (max-width: 640px) { .tsp-hero, .tsp-section { padding: var(--s-4) var(--s-2); } .tsp-card, .tsp-quote, .tsp-cta, .tsp-knowledge-card, .tsp-reflection-box, .tsp-canonical-statement, .tsp-gateway { padding: var(--s-2); } .tsp-cta__actions, .tsp-hero__actions { flex-direction: column; } .tsp-button, .wp-block-button__link, .kb-button { width: 100%; } .tsp-container, .tsp-inner, .tsp-narrow { width: min(100% - (var(--s-2) * 2), 100%); } } /* ========================================================================== 18 — THE READING CHASSIS PLATFORM (IZM Legacy Bridge) ========================================================================== */ .site-main.py-5 { padding-top: var(--s-4) !important; padding-bottom: var(--s-4) !important; } .col-lg-10, .col-md-8 { font-family: inherit; color: inherit; } .izm-info-predloska { margin-bottom: var(--s-3) !important; } /* ========================================================================== 19 — SITE HEADER / BRANDING / NAVIGATION -------------------------------------------------------------------------- Header always uses inverse ink supplied by 03-system.css. Interaction shifts to pure white with a subtle underline and soft glow. ========================================================================== */ .site-navbar { position: relative; z-index: 10; width: 100%; } .site-navbar__inner { display: flex; align-items: center; width: 100%; border-bottom: 1px solid var(--header-divider); } /* ========================================================================== BRAND ========================================================================== */ .site-brand, .site-brand:link, .site-brand:visited { display: flex; align-items: center; flex: 0 0 auto; color: var(--header-ink) !important; text-decoration: none; } .site-brand__logo { display: block; width: auto; height: 90px; flex-shrink: 0; transform: translateY(3px); } .site-brand__text { display: inline-block; margin-left: 15px; color: inherit; font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap; transform: translateY(-2px); transition: color var(--token-transition), text-shadow var(--token-transition); } /* Home already presents the full identity in the hero */ body.home .site-brand__text { display: none; } .site-brand:hover, .site-brand:focus-visible { color: var(--header-ink-hover) !important; } .site-brand:hover .site-brand__text, .site-brand:focus-visible .site-brand__text { text-shadow: 0 0 0.5rem rgb(255 255 255 / 0.18); } /* ========================================================================== NAVIGATION ========================================================================== */ .site-navbar__toggle { color: var(--header-ink) !important; } .site-menu { margin: 0; padding: 0; list-style: none; } .site-menu > li { margin: 0; padding: 0; } .site-menu > li > a { position: relative; display: block; padding: 0.5rem 0; color: var(--header-ink) !important; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: color var(--token-transition), text-shadow var(--token-transition); } /* Underline interaction marker */ .site-menu > li > a::after { content: ""; position: absolute; left: 50%; bottom: 0.3rem; width: 0; height: 1px; background: var(--header-ink-hover); opacity: 0.9; transform: translateX(-50%); transition: width var(--token-transition); } /* Hover, keyboard focus and current page */ .site-menu > li > a:hover, .site-menu > li > a:focus-visible, .site-menu > .current-menu-item > a, .site-menu > .current_page_item > a, .site-menu > .current-menu-ancestor > a { color: var(--header-ink-hover) !important; text-shadow: 0 0 0.45rem rgb(255 255 255 / 0.22); } .site-menu > li > a:hover::after, .site-menu > li > a:focus-visible::after, .site-menu > .current-menu-item > a::after, .site-menu > .current_page_item > a::after, .site-menu > .current-menu-ancestor > a::after { width: 70%; } /* ========================================================================== DESKTOP NAVIGATION ========================================================================== */ @media (min-width: 992px) { .site-navbar__toggle { display: none; } .site-navbar__collapse { display: flex !important; flex: 1 1 auto; justify-content: flex-end; margin-left: 2rem; } .site-menu.navbar-nav { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; margin: 0 0 0 auto !important; padding: 0; gap: 1.5rem; } } /* ========================================================================== MOBILE NAVIGATION ========================================================================== */ @media (max-width: 991.98px) { .site-navbar__inner { flex-wrap: wrap; } .site-brand__text { display: none; } .site-navbar__toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-left: auto; padding: 0.5rem; color: var(--header-ink) !important; background: transparent; border: 1px solid var(--header-divider); border-radius: var(--token-radius-sm); } .site-navbar__toggle:focus-visible { outline: 2px solid var(--pure-white); outline-offset: 3px; } .site-navbar__toggle .navbar-toggler-icon { position: relative; display: block; width: 1.4rem; height: 1rem; background-image: none; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } .site-navbar__toggle .navbar-toggler-icon::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: currentColor; transform: translateY(-50%); } .site-navbar__collapse { flex-basis: 100%; width: 100%; } /* -------------------------------------------------------------------------- MOBILE OPEN MENU PANEL -------------------------------------------------------------------------- The collapse area remains full-width for Bootstrap behaviour, but the visible dark panel is limited to the menu width. Applies both during .collapsing and .show states to prevent a flash of the unstyled mobile menu. -------------------------------------------------------------------------- */ .site-navbar__collapse.show, .site-navbar__collapse.collapsing { margin-top: var(--s-1); } .site-navbar__collapse.collapsing { overflow: hidden; } .site-navbar__collapse.show .site-menu.navbar-nav, .site-navbar__collapse.collapsing .site-menu.navbar-nav { width: min(50vw, 18rem); /* ----- width: min(50vw - ozmačava 50% širine ekrana za meni a može se ovdje mijenjati u 45% ili sl -------- */ margin-left: auto; padding: var(--s-2); background: color-mix( in srgb, var(--anchor-core, #13293D) 94%, transparent ); border: 1px solid color-mix( in srgb, var(--header-divider) 70%, transparent ); border-radius: var(--token-radius-sm); backdrop-filter: blur(10px); } .site-menu.navbar-nav { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding-block: var(--s-2); gap: 0.35rem; } .site-menu > li { width: 100%; } .site-menu > li > a { width: 100%; padding: 0.75rem 0; } .site-menu > li > a::after { left: 0; transform: none; } .site-menu > li > a:hover::after, .site-menu > li > a:focus-visible::after, .site-menu > .current-menu-item > a::after, .site-menu > .current_page_item > a::after, .site-menu > .current-menu-ancestor > a::after { width: 2.5rem; } } /* ========================================================================== 20 — SITE FOOTER -------------------------------------------------------------------------- Divider colour is resolved by 03-system.css: darker on Reading, Landing and Expression surfaces; lighter on Home and Anchor surfaces. ========================================================================== */ .site-footer { position: relative; width: 100%; } .site-footer__inner { border-top: 1px solid var(--footer-divider); } .site-footer .footer-credit { color: inherit; } .site-footer .footer-socials { display: flex; align-items: center; justify-content: center; gap: var(--s-2); } .site-footer .footer-socials a { display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; opacity: 0.78; transition: color var(--token-transition), opacity var(--token-transition), transform var(--token-transition); } .site-footer .footer-socials i { font-size: 1.1rem; } .site-footer .footer-socials a:hover, .site-footer .footer-socials a:focus-visible { color: var(--accent); opacity: 1; transform: translateY(-1px); } .site-footer .footer-socials a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } @media (min-width: 768px) { .site-footer .footer-socials { justify-content: flex-end; } } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .site-brand__text, .site-menu > li > a, .site-menu > li > a::after, .site-footer .footer-socials a { transition: none; } } /* ========================================================================== 21 — HOME HERO -------------------------------------------------------------------------- Home hero is a full-width responsive background composition. Image variants are supplied by front-page.php through: --home-hero-large --home-hero-medium --home-hero-small The header overlays the hero only on Home. ========================================================================== */ /* ========================================================================== 21.1 — HOME HERO / HEADER OVERLAY ========================================================================== */ body.home .site-header { position: absolute; top: 0; left: 0; z-index: 20; width: 100%; background: transparent; } /* WordPress admin bar compensation */ body.admin-bar.home .site-header { top: 32px; } @media (max-width: 782px) { body.admin-bar.home .site-header { top: 46px; } } /* ========================================================================== 21.2 — HOME HERO / BASE & ATMOSPHERE ========================================================================== */ .home-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 90vh; padding-top: 104px; color: var(--ink-inverse); background-image: var(--home-hero-large); background-repeat: no-repeat; background-position: center right; background-size: cover; } /* Top protection for header + left protection for text */ .home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 180deg, rgb(2 20 31 / 0.58) 0%, rgb(2 20 31 / 0.22) 18%, transparent 38% ), linear-gradient( 90deg, rgb(2 20 31 / 0.82) 0%, rgb(2 20 31 / 0.58) 38%, rgb(2 20 31 / 0.16) 69%, transparent 100% ); } /* Bottom patina into the Home anchor background */ .home-hero::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; z-index: -1; height: 18vh; background: linear-gradient( 180deg, transparent 0%, color-mix( in srgb, var(--anchor-threshold) 38%, transparent ) 42%, var(--anchor-threshold) 100% ); pointer-events: none; } .home-hero__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-start; width: 100%; } /* ========================================================================== 21.3 — HOME HERO / IDENTITY COMPOSITION ========================================================================== */ .home-hero__identity { width: min(100%, 56rem); max-width: 56rem; margin-right: auto; padding-block: var(--s-6); text-align: center; } .home-hero__brand { margin: 0; color: var(--brand-gold); font-family: var(--voice-law); font-size: clamp(2.8rem, 4.3vw, 5rem); font-weight: 700; line-height: 0.96; letter-spacing: 0.025em; text-transform: uppercase; white-space: nowrap; background-image: var(--brand-gold-gradient-hero); background-repeat: repeat-y; background-position: center top; background-size: 100% 0.96em; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.25px var(--brand-gold-shadow); text-shadow: 0 2px 2px rgb(0 0 0 / 0.42), 0 0 1.25rem rgb(216 168 78 / 0.12); } .home-hero__portal { margin: var(--s-3) 0 0; color: var(--pure-white); font-family: var(--voice-inner); font-size: clamp(1.8rem, 3vw, 3.25rem); font-weight: 400; line-height: 1.12; text-shadow: 0 2px 3px rgb(0 0 0 / 0.48), 0 0 1rem rgb(0 0 0 / 0.18); } .home-hero__portal span, .home-hero__promise span { display: block; } .home-hero__ornament { display: grid; grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr); align-items: center; gap: 0.85rem; width: min(100%, 36rem); margin: var(--s-3) auto; } .home-hero__ornament-line { height: 1px; background: linear-gradient( 90deg, transparent 0%, var(--brand-gold) 25%, var(--brand-gold) 100% ); opacity: 0.95; } .home-hero__ornament-line:last-child { background: linear-gradient( 90deg, var(--brand-gold) 0%, var(--brand-gold) 75%, transparent 100% ); } .home-hero__ornament-star { color: var(--brand-gold); font-size: clamp(1.5rem, 2vw, 2.15rem); line-height: 1; background-image: var(--brand-gold-gradient-soft); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.15px var(--brand-gold-shadow); text-shadow: 0 0 0.7rem rgb(216 168 78 / 0.36); } .home-hero__promise { margin: 0; color: var(--brand-gold); font-family: var(--voice-inner); font-size: clamp(1.3rem, 2vw, 2.15rem); font-weight: 400; line-height: 1.35; background-image: var(--brand-gold-gradient-soft); background-repeat: repeat-y; background-position: center top; background-size: 100% 1.35em; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.1px var(--brand-gold-shadow); text-shadow: 0 2px 3px rgb(0 0 0 / 0.52), 0 0 1rem rgb(0 0 0 / 0.2); } /* ========================================================================== 21.4 — HOME HERO / MEDIUM BACKGROUND & TITLE FLOW ========================================================================== */ @media (max-width: 1199.98px) { .home-hero { background-image: var(--home-hero-medium); background-position: 62% center; } .home-hero__identity { width: min(100%, 48rem); max-width: 48rem; } .home-hero__brand { font-size: clamp(2.6rem, 5vw, 4.4rem); white-space: normal; } } /* ========================================================================== 21.5 — HOME HERO / MID-SCREEN ORNAMENT WIDTH -------------------------------------------------------------------------- Prevents the ornament from jumping abruptly from the compact mobile width to the full desktop width at 768px. The ornament grows progressively through the medium-screen range. ========================================================================== */ @media (min-width: 768px) and (max-width: 1399.98px) { body.home .home-hero__ornament { width: clamp(21rem, 38vw, 31rem); } } /* ========================================================================== 21.6 — HOME HERO / MOBILE ATMOSPHERE -------------------------------------------------------------------------- Mobile-specific image protection and bottom transition. Structural composition is handled by 21.7. ========================================================================== */ @media (max-width: 767.98px) { .home-hero::before { background: linear-gradient( 180deg, rgb(2 20 31 / 0.5) 0%, rgb(2 20 31 / 0.12) 30%, rgb(2 20 31 / 0.38) 58%, rgb(2 20 31 / 0.84) 100% ); } .home-hero::after { height: 14vh; } } /* ========================================================================== 21.7 — HOME HERO / MOBILE BALANCED COMPOSITION ========================================================================== */ @media (max-width: 767.98px) { /* ======================================================================== MOBILE HERO — CONTROL PANEL ------------------------------------------------------------------------ OVDJE NAMJEŠTAŠ KOMPOZICIJU. --mobile-hero-top-space Veći broj = sadržaj počinje niže. Manji broj = sadržaj počinje više. --mobile-hero-bottom-space Donji slobodni prostor unutar hero područja. --mobile-hero-width Širina cijelog tekstualnog bloka. --mobile-hero-max-width Maksimalna širina tekstualnog bloka. --mobile-hero-gap Jednaka vertikalna udaljenost između: naslova, bijelog teksta, ornamenta i donjeg teksta. --mobile-hero-shift-x Negativno = ulijevo. Pozitivno = udesno. --mobile-hero-shift-y Negativno = prema gore. Pozitivno = prema dolje. ======================================================================== */ .home-hero { --mobile-hero-top-space: 230px; --mobile-hero-bottom-space: 2rem; --mobile-hero-width: 86%; --mobile-hero-max-width: 22rem; --mobile-hero-gap: clamp(2rem, 4.5vh, 3rem); --mobile-hero-shift-x: -0.5rem; --mobile-hero-shift-y: -3rem; display: flex; align-items: center; min-height: 100svh; padding-top: var(--mobile-hero-top-space); padding-bottom: var(--mobile-hero-bottom-space); background-image: var(--home-hero-small); background-position: center top; } /* ========================================================================= VERTICAL CENTERING AREA ========================================================================= */ .home-hero__inner { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: calc( 100svh - var(--mobile-hero-top-space) - var(--mobile-hero-bottom-space) ); } /* ========================================================================= ENTIRE TEXT COMPOSITION ========================================================================= */ body.home .home-hero__identity { display: grid; grid-template-columns: 1fr; align-content: center; justify-items: center; row-gap: var(--mobile-hero-gap); width: var(--mobile-hero-width); max-width: var(--mobile-hero-max-width); margin: 0 auto 0 0; padding: 0; text-align: center; transform: translate( var(--mobile-hero-shift-x), var(--mobile-hero-shift-y) ) !important; } /* ========================================================================= REMOVE OLD INDIVIDUAL MARGINS ========================================================================= */ .home-hero__brand, .home-hero__portal, .home-hero__ornament, .home-hero__promise { margin: 0; } /* ========================================================================= CONSISTENT CENTER ALIGNMENT ========================================================================= */ .home-hero__brand, .home-hero__portal, .home-hero__promise { width: 100%; text-align: center; } /* ========================================================================= BRAND TITLE ========================================================================= */ .home-hero__brand { font-size: clamp(2.4rem, 10vw, 3.35rem); line-height: 0.96; white-space: normal; } /* ========================================================================= WHITE PORTAL STATEMENT ========================================================================= */ .home-hero__portal { font-size: clamp(1.35rem, 5.7vw, 1.85rem); line-height: 1.18; } /* ========================================================================= ORNAMENT ========================================================================= */ .home-hero__ornament { width: min(88%, 18rem); } /* ========================================================================= LOWER PROMISE ========================================================================= */ .home-hero__promise { max-width: 21rem; font-size: clamp(1rem, 4.25vw, 1.25rem); line-height: 1.42; } } /* ========================================================================== 21.8 — HOME HERO / OPEN MOBILE MENU - NOW ERASED ========================================================================== */ /* ========================================================================== 21.9 — HOME HERO / ORNAMENT LINE BRIGHTNESS ========================================================================== */ @media (min-width: 768px) { .home-hero__ornament-line { background: linear-gradient( 90deg, transparent 0%, var(--brand-gold-light) 28%, var(--brand-gold-highlight) 72%, var(--brand-gold-light) 100% ); opacity: 1; } .home-hero__ornament-line:last-child { background: linear-gradient( 90deg, var(--brand-gold-light) 0%, var(--brand-gold-highlight) 28%, var(--brand-gold-light) 72%, transparent 100% ); } } /* ========================================================================== 21.10 — HOME HERO / UNIFIED GOLD TREATMENT -------------------------------------------------------------------------- Uses the same gold profile on every line of the title. The gradient repeats vertically, so a two-line mobile title does not produce one bright line and one dark line. The title is also explicitly centred within the same composition axis as the text beneath it. ========================================================================== */ /* ========================================================================== BRAND TITLE — GEOMETRY AND ALIGNMENT ========================================================================== */ body.home h1.home-hero__brand { display: block; width: 100%; max-width: 100%; margin-inline: auto; justify-self: center; text-align: center; text-wrap: balance; background-image: var(--brand-gold-gradient-hero-desktop) !important; /* Repeat the complete gold profile for every text line. This prevents the second line from becoming darker. */ background-repeat: repeat-y !important; background-position: center top !important; background-size: 100% 0.96em !important; background-clip: text !important; -webkit-background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; /* Very soft definition: enough depth to avoid a flat appearance, but without the previous heavy mobile 3D effect. */ -webkit-text-stroke: 0.06px color-mix( in srgb, var(--brand-gold-deep) 42%, transparent ) !important; text-shadow: 0 1px 1px rgb(0 0 0 / 0.14), 0 0 0.42rem color-mix( in srgb, var(--brand-gold-light) 12%, transparent ) !important; } /* ========================================================================== LOWER PROMISE ========================================================================== */ body.home .home-hero__promise { background-image: var(--brand-gold-gradient-soft-desktop) !important; background-repeat: repeat-y !important; background-position: center top !important; background-size: 100% 1.35em !important; background-clip: text !important; -webkit-background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 0 !important; text-shadow: 0 1px 1px rgb(0 0 0 / 0.13), 0 0 0.36rem color-mix( in srgb, var(--brand-gold-light) 9%, transparent ) !important; } /* ========================================================================== ORNAMENT STAR ========================================================================== */ body.home .home-hero__ornament-star { background-image: var(--brand-gold-gradient-hero-desktop) !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: 100% 100% !important; background-clip: text !important; -webkit-background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; -webkit-text-stroke: 0 !important; text-shadow: 0 0 0.42rem color-mix( in srgb, var(--brand-gold-light) 16%, transparent ) !important; } /* ========================================================================== 21.11 — HOME HERO / ENTER THRESHOLD -------------------------------------------------------------------------- Responsive sizing: large and calm on wide screens, progressively smaller on narrower screens, restrained on mobile. ========================================================================== */ .home-hero__enter { position: absolute; left: 50%; bottom: clamp(2.2rem, 4.5vh, 4.2rem); z-index: 4; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(0.55rem, 1vw, 1.05rem); min-width: clamp(8rem, 14vw, 15.2rem); padding: clamp(0.7rem, 1.1vw, 1.05rem) clamp(1.35rem, 2.4vw, 2.8rem); color: var(--brand-gold-light); background: color-mix( in srgb, var(--anchor-deep) 30%, transparent ); border: 1px solid color-mix( in srgb, var(--brand-gold-light) 46%, transparent ); border-radius: var(--token-radius-pill); font-family: var(--voice-ui); text-decoration: none; backdrop-filter: blur(4px); opacity: 0.82; transform: translateX(-50%); transition: color var(--token-transition), background var(--token-transition), border-color var(--token-transition), opacity var(--token-transition); } .home-hero__enter-label { font-size: clamp(1rem, 1.55vw, 1.7rem); font-weight: 700; line-height: 1; letter-spacing: clamp(0.025em, 0.25vw, 0.06em); text-transform: none; } .home-hero__enter-arrow { display: block; margin-left: clamp(0.05rem, 0.3vw, 0.2rem); font-size: clamp(1.15rem, 1.8vw, 2rem); line-height: 1; animation: none; transform: none; opacity: 0.9; } .home-hero__enter:hover, .home-hero__enter:focus-visible { color: var(--brand-gold-highlight); background: color-mix( in srgb, var(--anchor-deep) 46%, transparent ); border-color: color-mix( in srgb, var(--brand-gold-light) 72%, transparent ); opacity: 1; } .home-hero__enter:focus-visible { outline: 1px solid var(--brand-gold-highlight); outline-offset: 4px; } /* ========================================================================== 21.11.1 — HOME HERO / ENTER MID-SCREEN -------------------------------------------------------------------------- Medium-sized Enter control: around one third of the way between mobile and large desktop. ========================================================================== */ @media (min-width: 768px) and (max-width: 1199.98px) { body.home .home-hero__enter { bottom: clamp(2rem, 3.8vh, 3rem); min-width: 10.25rem; padding: 0.78rem 1.55rem; gap: 0.7rem; } body.home .home-hero__enter-label { font-size: 1.1rem; letter-spacing: 0.04em; } body.home .home-hero__enter-arrow { margin-left: 0.06rem; font-size: 1.22rem; } } /* ========================================================================== 21.12 — HOME HERO / LARGE-SCREEN MICRO-TUNING -------------------------------------------------------------------------- Large-screen composition and Enter sizing. ========================================================================== */ @media (min-width: 1200px) { body.home .home-hero__identity { transform: translateY(-1.15rem); } body.home .home-hero__enter { bottom: clamp(2.7rem, 5vh, 4.2rem); min-width: 15.2rem; padding: 1.05rem 2.8rem; gap: 1.05rem; } body.home .home-hero__enter-label { font-size: 1.7rem; } body.home .home-hero__enter-arrow { margin-left: 0.2rem; font-size: 2rem; } }