/* Space Grotesk — doplnění latin-ext (české znaky č ž š ř ě ů…). GP Font Library stáhl jen latin subset → diakritika padala do náhradního fontu. Doplňkový subset (jen unicode-range latin-ext), self-hosted, doplňuje GP latin font. */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url( '../fonts/space-grotesk-latinext.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: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url( '../fonts/space-grotesk-latinext.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: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/space-grotesk-latinext.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: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/space-grotesk-latinext.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; } /* Poppins — doplneni latin-ext (ceske znaky c z s r e u...). Telo webu pouziva Poppins; GP Font Library stahl jen latin subset -> diakritika v beznem textu padala do nahradniho fontu. Doplnkovy latin-ext subset per vaha, self-hosted. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url( '../fonts/poppins-latinext-300.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: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url( '../fonts/poppins-latinext-400.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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url( '../fonts/poppins-latinext-500.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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/poppins-latinext-600.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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/poppins-latinext-700.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; } /* Zabránit horizontálnímu posouvání kvůli dekorativním orbům, které úmyslně přesahují přes okraj viewportu. */ body { overflow-x: hidden; } /* ───────────────────────────────────────────────────────────────── BRAND BAREVNOST — JEDNO MÍSTO PRO ZMĚNU ───────────────────────────────────────────────────────────────── Pro výměnu celé brand barvy webu změňte níže 3 RGB hodnoty (space-separated, BEZ čárek — moderní CSS rgb() syntax). Aktuálně: cyan (#65d0eb) Příklady jiných barev: • Zelená: 76 222 128 / 34 197 94 / 134 239 172 • Modrá: 59 130 246 / 37 99 235 / 147 197 253 • Fialová: 168 85 247 / 126 34 206 / 216 180 254 • Oranžová: 251 146 60 / 234 88 12 / 254 215 170 Po změně CSS variables se update PROPÍŠE na všech místech kde ::before / ::after / box-shadow / background / border používají brand barvu. ───────────────────────────────────────────────────────────────── */ :root { /* Hlavní brand barva (RGB triplet, space-separated) */ --evb-accent-rgb: 101 208 235; /* default = #65d0eb cyan */ --evb-accent-dark-rgb: 46 172 200; /* default = #2eacc8 tmavší cyan (pro button gradient end) */ --evb-accent-light-rgb: 76 200 241; /* #4cc8f1 světlejší cyan (pro accent-cyan gradient) */ /* Odvozené gradient overrides — propíšou se přes theme.json defaults */ --wp--preset--gradient--button-glow: linear-gradient( 135deg, rgb( var( --evb-accent-dark-rgb ) ) 0%, rgb( var( --evb-accent-rgb ) ) 100% ); --wp--preset--gradient--accent-cyan: linear-gradient( 90deg, rgb( var( --evb-accent-light-rgb ) ), rgb( var( --evb-accent-rgb ) ) ); } /* ────────────────────────────────────────────────────────────── GP Evorkshop Child — minimal CSS layer. Only what theme.json cannot express: – @keyframes (CSS animations) – backdrop-filter (still no JSON binding in WP 7.0 styles) – background-clip:text (gradient text effect) – pseudo-elements for decorative chrome Everything else goes through theme.json palette / gradients / typography / spacing / shadow presets and is applied via block attributes in patterns (pattern-attributes-first method). ────────────────────────────────────────────────────────────── */ /* ─── Gradient text. Two variants: - .gradient-text — inline span inside paragraph/headline (legacy) - .evb-headline-gradient — block-level class on a Heading block, applied via the block's Advanced → Additional CSS class field. Used to split a multi-color hero headline into 3 separate Heading blocks (no nested → no Gutenberg RichText click issue). ─── */ .gradient-text, .evb-headline-gradient { background: var( --wp--preset--gradient--accent-cyan ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* color: transparent makes caret-color: auto invisible inside the span — explicit caret restores the blinking cursor in the editor. */ caret-color: var( --wp--preset--color--accent ); } /* ─── Glass surface (decorative; applies to elements with class "glass") ─── */ .glass { background: rgba( 255, 255, 255, 0.12 ); backdrop-filter: blur( 20px ) saturate( 180% ); -webkit-backdrop-filter: blur( 20px ) saturate( 180% ); border: 1px solid rgba( 255, 255, 255, 0.2 ); border-radius: 24px; } /* ─── Orbs decorative background (rendered by GP Element hook on wp_body_open) ─── */ .evb-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .evb-orb { position: absolute; border-radius: 50%; animation: evb-drift linear infinite; will-change: transform; } .evb-orb-1 { width: 600px; height: 600px; top: -200px; left: -100px; background: var( --wp--preset--gradient--orb-blue ); animation-duration: 20s; } .evb-orb-2 { width: 500px; height: 500px; top: 20%; right: -150px; background: var( --wp--preset--gradient--orb-blue ); animation-duration: 25s; animation-direction: reverse; } .evb-orb-3 { width: 350px; height: 350px; bottom: 10%; left: 20%; background: var( --wp--preset--gradient--orb-teal ); animation-duration: 18s; animation-delay: -9s; } .evb-orb-4 { width: 300px; height: 300px; bottom: 30%; right: 20%; background: var( --wp--preset--gradient--orb-cyan ); animation-duration: 22s; animation-delay: -5s; } @keyframes evb-drift { 0% { transform: translate( 0, 0 ) rotate( 0deg ); } 33% { transform: translate( 60px, -40px ) rotate( 120deg ); } 66% { transform: translate( -40px, 60px ) rotate( 240deg ); } 100% { transform: translate( 0, 0 ) rotate( 360deg ); } } /* Respect user motion preferences */ @media ( prefers-reduced-motion: reduce ) { .evb-orb { animation: none; } } /* ─── Page content sits above the fixed orbs layer ─── */ .site-content, .site-header, .site-footer { position: relative; z-index: 1; } /* ─── Let body gradient show through GP .site wrap (parent style.css ships a default .site background-color that hides the theme.json gradient). Plain rule, no override marker — pattern attributes own component-level colors; this is theme-level scaffolding only. ─── */ .site { background: transparent; background-color: transparent; } /* ─── Default heading color on dark theme (parent GP style sets dark ink color). White text inherits from body via theme.json styles.color.text in theory, but parent theme heading rules win specificity; restore here. ─── */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .wp-block-heading { color: inherit; } /* ─── Typography baseline. GP `main.min.css` sets `body{font-family:-apple-system,…}` and `h1,h2,…{font-family:inherit}` later in the cascade than theme.json's global-styles-inline-css. Source order makes GP win, so the theme.json fontFamily slots never reach the heading. Restoring the project's fonts here, in the LAST stylesheet, is the platform-aligned path (GP Premium Dynamic Typography internals are version-fragile). ─── */ body, button, input, select, textarea { font-family: 'Poppins', system-ui, sans-serif; font-weight: 300; line-height: 1.6; } h1, h2, h3, h4, h5, h6, .wp-block-heading, .evb-hero-line { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; } .evb-hero-line { line-height: 1.05; letter-spacing: -0.02em; } h1.wp-block-heading, .entry-content h1 { line-height: 1.05; letter-spacing: -0.02em; } h2.wp-block-heading, .entry-content h2 { font-size: clamp( 2rem, 3.5vw, 2.8rem ); line-height: 1.1; letter-spacing: -0.01em; } h3.wp-block-heading, .entry-content h3 { line-height: 1.3; } /* ─── Hero photo break-out (extends beyond its column boundary, matches original design's width:117.6% + margin-left:-5%). Applied via class on the figure so it does not trigger Gutenberg's "invalid content" warning. ─── */ .evb-hero-photo { width: 117.6%; max-width: none; margin-left: -5%; } .evb-hero-photo img { width: 100%; height: auto; max-width: none; display: block; } /* ─── Hero badge (pill above headline). Inline-block + fit-content so it wraps the text only, not the full column. Applied as CSS class instead of inline style so Gutenberg's iframed editor honors width:fit-content. ─── */ .evb-hero-badge { display: inline-block; width: -moz-fit-content; width: fit-content; /* rgba below uses the accent RGB via --evb-accent-rgb at custom opacity. If brand color changes in theme.json palette, update these two rgba values to match the new accent. */ background: rgb( var( --evb-accent-rgb ) / 0.12 ); border: 1px solid rgb( var( --evb-accent-rgb ) / 0.3 ); color: var( --accent, rgb( var( --evb-accent-rgb ) ) ); padding: 0.4rem 1rem; border-radius: 30px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; margin-bottom: var( --wp--preset--spacing--60 ); } /* ─── Site header glass pill. Replaces GP default header via a gp_elements post (type=site-header, condition=general:site). Decorative chrome only; colors and typography come from pattern attributes. Selectors prefixed with `body` win specificity against GP parent rules. ─── */ body .evb-nav-pill { position: fixed; top: 16px; left: 50%; transform: translateX( -50% ); width: calc( 100% - 4rem ); max-width: 1160px; height: 60px; padding: 0 1.5rem; z-index: 100; background: rgba( 255, 255, 255, 0.08 ); backdrop-filter: blur( 24px ) saturate( 180% ); -webkit-backdrop-filter: blur( 24px ) saturate( 180% ); border: 1px solid rgba( 255, 255, 255, 0.2 ); border-radius: 60px; gap: 2rem; transition: background 0.3s ease, border-color 0.3s ease; } /* Logo. Design spec: height 34px, width auto. Core/site-logo emits width/height attributes from the configured width setting; CSS reset preserves the actual PNG aspect ratio. */ body .evb-nav-pill .wp-block-site-logo { flex-shrink: 0; } body .evb-nav-pill .wp-block-site-logo a.custom-logo-link { display: block; line-height: 0; } body .evb-nav-pill .wp-block-site-logo img.custom-logo { height: 34px; width: auto; max-width: none; display: block; } /* Nav menu — gap 2.8rem, gradient text on hover. */ body .evb-nav-pill .evb-nav-menu .wp-block-navigation__container { gap: 2.8rem; } body .evb-nav-pill .evb-nav-menu .wp-block-navigation-item__content { text-decoration: none; transition: color 0.2s ease; } body .evb-nav-pill .evb-nav-menu .wp-block-navigation-item__content:hover, body .evb-nav-pill .evb-nav-menu .wp-block-navigation-item__content:focus-visible { background: var( --wp--preset--gradient--accent-cyan ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Kontakt CTA — gradient button, hover scale + glow ring. */ body .evb-nav-pill .evb-nav-cta-wrap { flex-shrink: 0; margin: 0; } body .evb-nav-pill .evb-nav-cta .wp-block-button__link { background: var( --wp--preset--gradient--button-glow ); border: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } body .evb-nav-pill .evb-nav-cta .wp-block-button__link:hover, body .evb-nav-pill .evb-nav-cta .wp-block-button__link:focus-visible { transform: scale( 1.04 ); /* Hover glow ring — accent RGB (101,208,235) at 50% opacity. Update if brand color changes in theme.json palette. */ box-shadow: 0 0 0 2px rgb( var( --evb-accent-rgb ) / 0.5 ); } /* ─── Section header (eyebrow + h2 centered). Used by Proces and any further section that opens with a small label + title pair. ─── */ .evb-sec-head { text-align: center; } .evb-sec-head .wp-block-heading { text-align: center; } /* ─── Eyebrow label (small uppercase gradient text above section h2, flanked by two short gradient lines via ::before/::after). ─── */ .evb-eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; background: var( --wp--preset--gradient--accent-cyan ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; caret-color: var( --wp--preset--color--accent ); } .evb-eyebrow::before, .evb-eyebrow::after { content: ''; display: block; width: 20px; height: 1px; background: var( --wp--preset--gradient--accent-cyan ); } /* ─── Proces timeline strip ─── */ .evb-process-row { max-width: 1160px; margin: 0 auto; align-items: flex-start; justify-content: space-between; /* pixel-perfect match na originál — distribute 5 steps across row width */ } .evb-process-step { display: flex; flex-direction: column; align-items: center; width: 85px; position: relative; /* positioning context for ::before connector */ flex-shrink: 0; } .evb-process-step > * { margin: 0; } .evb-process-badge { width: 36px; height: 36px; border-radius: 50%; background: var( --wp--preset--gradient--button-glow ); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.95rem; font-weight: 800; color: var( --wp--preset--color--ink-900 ); line-height: 1; /* Glow ring — accent RGB (101,208,235) at 45% opacity. Update if brand color changes in theme.json palette. */ box-shadow: 0 0 0 3px rgb( var( --evb-accent-rgb ) / 0.45 ); flex-shrink: 0; } .evb-process-label { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.88rem; font-weight: 700; color: var( --wp--preset--color--text-80 ); line-height: 1.25; margin-top: 0.5rem; text-align: center; max-width: 85px; } /* Proces step connector — CSS pseudo na :not(:first-child), nahrazuje empty wp:group bloky které dělaly editor placeholdery. Gradient line — accent RGB (101,208,235) at 40 to 70 percent opacity. Update if brand color changes in theme.json palette. */ .evb-process-step:not(:first-child)::before { content: ''; position: absolute; top: 16px; right: calc( 100% - 24px ); width: 184px; height: 4px; background: linear-gradient( 90deg, rgb( var( --evb-accent-rgb ) / 0.4 ), rgb( var( --evb-accent-rgb ) / 0.7 ) ); } /* ─── Sub paragraph (centered description under section h2). ─── */ .evb-sec-head .evb-sub { font-size: 0.95rem; color: var( --wp--preset--color--text-60 ); line-height: 1.75; font-weight: 300; max-width: 600px; margin: 1rem auto 0; text-align: center; } /* ─── Sluzby grid (3 columns, internal borders, hover state) ─── */ .evb-sluzby-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 0; margin-top: 3.5rem; border-top: 1px solid rgba( 255, 255, 255, 0.1 ); } .evb-sluzby-card { padding: 2.5rem 2rem 2.5rem 1.75rem; border-bottom: 1px solid rgba( 255, 255, 255, 0.1 ); border-right: 1px solid rgba( 255, 255, 255, 0.1 ); position: relative; transition: background 0.3s; } .evb-sluzby-grid > .evb-sluzby-card { /* Neutralizace WP default block-gap margin-top na 2.-6. sibling. */ margin-block-start: 0; } .evb-sluzby-card:nth-child( 3n ) { border-right: none; } .evb-sluzby-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; /* Vertical bar — accent gradient (top→bottom). Update if brand color changes in theme.json palette. */ background: linear-gradient( 180deg, rgb( var( --evb-accent-rgb ) ), rgb( var( --evb-accent-dark-rgb ) ) ); transition: height 0.3s; } .evb-sluzby-card:hover::before { height: 100%; } .evb-sluzby-card:hover { /* Hover bg — accent RGB (101,208,235) at 4% opacity. */ background: rgb( var( --evb-accent-rgb ) / 0.04 ); } .evb-sluzby-head { margin-bottom: 1rem; } .evb-sluzby-icon { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; /* Glass icon bg — accent gradient at 30% opacity. Update if brand color changes in theme.json palette. */ background: linear-gradient( 135deg, rgb( var( --evb-accent-dark-rgb ) / 0.3 ), rgb( var( --evb-accent-rgb ) / 0.3 ) ); border: 1px solid rgb( var( --evb-accent-rgb ) / 0.35 ); display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s; } .evb-sluzby-card:hover .evb-sluzby-icon { /* Glow on hover — accent RGB (101,208,235) at 35% opacity. */ box-shadow: 0 4px 24px rgb( var( --evb-accent-rgb ) / 0.35 ); } .evb-sluzby-card h3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1.05rem; font-weight: 700; color: var( --wp--preset--color--contrast ); line-height: 1.3; } .evb-sluzby-desc { font-size: 0.87rem; color: var( --wp--preset--color--text-60 ); line-height: 1.75; font-weight: 300; margin: 0; } /* Section Upgrade (D-22..D-25): glass panel, progress bars, benefit list, tags. Brand barva pres rgb( var( --evb-accent-rgb ) / opacity ) - zadny hardcoded RGB. Zadny important. */ .evb-glass-panel { background: rgb( 255 255 255 / 0.06 ); backdrop-filter: blur( 20px ); border: 1px solid rgb( 255 255 255 / 0.12 ); border-radius: 20px; padding: 2rem; } /* Override pomlček + text-align uvnitř glass panelu (originál: text-align left bez ::before/::after pomlček) */ .evb-glass-panel .evb-eyebrow { display: block; text-align: left; } .evb-glass-panel .evb-eyebrow::before, .evb-glass-panel .evb-eyebrow::after { display: none; } .evb-upgrade-bars { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; } .evb-ub-item { width: 100%; } .evb-ub-item { display: flex; flex-direction: column; } .evb-ub-head { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 0.4rem; } /* Neutralizace WP block-gap margin-top na siblings uvnitř .evb-ub-item */ .evb-ub-item > * { margin-block-start: 0; } .evb-ub-label { font-size: 0.8rem; color: rgb( 255 255 255 / 0.6 ); font-weight: 500; margin: 0; } .evb-ub-val { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 700; background: linear-gradient( 90deg, rgb( var( --evb-accent-light-rgb ) ), rgb( var( --evb-accent-rgb ) ) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; caret-color: rgb( var( --evb-accent-rgb ) ); margin: 0; } .evb-ub-bar { width: 100%; height: 8px; background: rgb( 255 255 255 / 0.1 ); border-radius: 4px; overflow: hidden; position: relative; } /* Override WP is-layout-constrained injection (auto margin centering) — fill musí být zarovnaný zleva */ .evb-ub-bar > .evb-ub-fill { margin-left: 0; margin-right: auto; max-width: none; } .evb-ub-fill { height: 100%; border-radius: 4px; } .evb-ub-fill-before { background: linear-gradient( 90deg, #c0392b, #e8622a ); } .evb-ub-fill-after { background: linear-gradient( 90deg, rgb( var( --evb-accent-dark-rgb ) ), rgb( var( --evb-accent-rgb ) ) ); box-shadow: 0 0 12px rgb( var( --evb-accent-rgb ) / 0.4 ); } .evb-upgrade-divider { display: none; } .evb-up-points { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; padding-left: 0; margin: 0; } .evb-up-points li { display: flex; gap: 0.875rem; align-items: flex-start; font-size: 0.9rem; color: rgb( 255 255 255 / 0.7 ); line-height: 1.65; font-weight: 300; } .evb-up-points li::before { content: '\2713'; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 0.1rem; border: 1.5px solid rgb( var( --evb-accent-rgb ) ); display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 900; background: linear-gradient( 90deg, rgb( var( --evb-accent-light-rgb ) ), rgb( var( --evb-accent-rgb ) ) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .evb-upgrade-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; } .evb-tag { display: inline; padding: 0; border: none; background: none; color: rgb( 255 255 255 / 0.6 ); font-size: 0.8rem; font-weight: 500; font-family: 'Inter', system-ui, sans-serif; margin: 0; } .evb-upgrade-tags { justify-content: flex-start; gap: 0.5rem; margin-top: 1rem; } /* ─── Hamburger placeholder for ≤900px nav (full mobile menu řešený přes GP Premium Slideout nakonec). Visible only on small viewports. ─── */ .evb-nav-hamburger { display: none; width: 36px; height: 36px; background: none; border: 0; padding: 4px; cursor: pointer; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .evb-nav-hamburger span { display: block; width: 22px; height: 2px; background: var( --wp--preset--color--contrast ); border-radius: 2px; } /* ─── EVBOOST DALSI SLUZBY (Phase 4) ─── */ .evb-extra-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 0; margin-top: 3.5rem; border-top: 1px solid rgb( 255 255 255 / 0.08 ); } .evb-extra-card { padding: 2.75rem 2.5rem 2.75rem 0; position: relative; transition: all 0.3s; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto auto; column-gap: 1.1rem; align-items: center; } .evb-extra-card + .evb-extra-card { padding-left: 2.5rem; border-left: 1px solid rgb( 255 255 255 / 0.08 ); } .evb-extra-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: rgb( 255 255 255 / 0.08 ); } .evb-extra-card .wp-block-evb-icon { grid-column: 1; grid-row: 1; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient( 135deg, rgb( var( --evb-accent-dark-rgb ) / 0.18 ), rgb( var( --evb-accent-rgb ) / 0.18 ) ); border: 1px solid rgb( var( --evb-accent-rgb ) / 0.25 ); display: flex; align-items: center; justify-content: center; transition: box-shadow 0.35s, background 0.35s; flex-shrink: 0; } .evb-extra-card:hover .wp-block-evb-icon { background: linear-gradient( 135deg, rgb( var( --evb-accent-dark-rgb ) / 0.35 ), rgb( var( --evb-accent-rgb ) / 0.35 ) ); box-shadow: 0 0 28px rgb( var( --evb-accent-rgb ) / 0.3 ); } .evb-extra-card h3 { grid-column: 2; grid-row: 1; font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700; color: rgb( 255 255 255 ); margin-bottom: 0; margin-top: 0; line-height: 1.25; transition: color 0.25s; caret-color: rgb( var( --evb-accent-rgb ) ); } .evb-extra-card .evb-extra-desc { grid-column: 1 / -1; grid-row: 2; font-size: 0.875rem; color: rgb( 255 255 255 / 0.6 ); line-height: 1.75; font-weight: 300; margin-bottom: 1.5rem; margin-top: 1rem; } .evb-extra-card .evb-extra-list { grid-column: 1 / -1; grid-row: 3; list-style: none; display: flex; flex-direction: column; gap: 0.625rem; padding: 0; margin: 0; } .evb-extra-list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.82rem; color: rgb( 255 255 255 / 0.55 ); line-height: 1.5; font-weight: 300; } .evb-extra-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgb( var( --evb-accent-rgb ) ); flex-shrink: 0; margin-top: 0.44rem; box-shadow: 0 0 5px rgb( var( --evb-accent-rgb ) / 0.55 ); } .evb-extra-card:hover h3 { background: linear-gradient( 90deg, rgb( var( --evb-accent-light-rgb ) ), rgb( var( --evb-accent-rgb ) ) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ─── EVBOOST FOTO BREAK ─── */ .evb-foto-break { width: 100%; height: 480px; position: relative; overflow: hidden; margin: 0; } .evb-foto-break .wp-block-image { width: 100%; height: 100%; margin: 0; } .evb-foto-break .wp-block-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: brightness( 0.72 ) saturate( 1.1 ); transition: transform 8s ease; display: block; } .evb-foto-break:hover .wp-block-image img { transform: scale( 1.04 ); } .evb-foto-break::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgb( 11 22 40 / 0.55 ) 0%, rgb( 11 22 40 / 0.1 ) 45%, rgb( 11 22 40 / 0.1 ) 55%, rgb( 11 22 40 / 0.65 ) 100% ); pointer-events: none; z-index: 1; } .evb-foto-break-label { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX( -50% ); display: flex; align-items: center; gap: 0.75rem; font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb( 255 255 255 / 0.55 ); white-space: nowrap; z-index: 2; margin: 0; } .evb-foto-break-label::before, .evb-foto-break-label::after { content: ''; width: 32px; height: 1px; background: rgb( var( --evb-accent-rgb ) / 0.5 ); display: inline-block; } /* ─── EVBOOST AUDIENCE (Phase 6) — 2-col + 2×2 audience grid ─── */ .evb-pro-koho { padding: 120px 0; } /* Audience icons: inline 30×30 SVG bez glass tile pozadí (na rozdíl od evb-sluzby-icon). Override musí byt before .evb-ag-card .wp-block-evb-icon kvůli specificity. */ .wp-block-evb-icon.evb-audience-icon { width: 30px; height: 30px; background: none; border: 0; border-radius: 0; padding: 0; display: inline-flex; align-items: center; justify-content: flex-start; } .evb-audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } /* Gutenberg core injectne :root :where(.is-layout-flow) > * { margin-block: 24px 0 } na vsechny deti audience-gridu (= karty 2-4). Tahle marze zabiji align stretch v jedne row a generuje +24px track row 1 oproti orig HTML. Precedent fix viz .evb-sluzby-grid > .evb-sluzby-card. */ .evb-audience-grid > .evb-ag-card { margin-block-start: 0; } .evb-ag-card { background: rgb( 255 255 255 / 0.06 ); backdrop-filter: blur( 16px ); border: 1px solid rgb( 255 255 255 / 0.1 ); border-radius: 20px; padding: 1.75rem; transition: all 0.25s; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; /* Reset line-height: GP/WP body defaultně dědí 1.6 (27.2px) co rozšiřuje grid rows nad rámec content. Orig HTML má line-height: normal (cca 19px). Tady normalizujeme, ať grid row sizing odpovídá originálu (karty 1+2 stejně vysoké přes row1 max-content). */ } .evb-ag-card:hover { background: rgb( 255 255 255 / 0.1 ); border-color: rgb( 255 255 255 / 0.25 ); transform: scale( 1.02 ); } .evb-ag-card .wp-block-evb-icon { grid-column: 1; grid-row: 1; display: flex; align-items: center; } .evb-ag-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 700; color: var( --white, rgb( 255 255 255 ) ); margin-bottom: 0; grid-column: 2; grid-row: 1; line-height: 1.3; } .evb-ag-card p { font-size: 0.8rem; color: rgb( 255 255 255 / 0.5 ); line-height: 1.6; font-weight: 300; grid-column: 1 / -1; grid-row: 2; margin-top: 0.75rem; margin-bottom: 0; } /* Pro koho — section-scoped typography overrides (Phase 6 polish). Důvod: parent body / GP Dynamic Typography defaultně tlačí 17px na všechen text; tady drží orig design 15.2px H2 sub / 12.8px card p / 15.2px H4 přes section selektor. */ .evb-pro-koho h2.wp-block-heading { font-size: clamp( 2rem, 3.5vw, 2.8rem ); line-height: 1.1; letter-spacing: -0.01em; font-weight: 700; } .evb-pro-koho .evb-sub { font-size: 0.95rem; line-height: 1.75; color: rgb( 255 255 255 / 0.6 ); font-weight: 300; max-width: 480px; margin-top: 0; margin-bottom: 3rem; } /* Eyebrow: odstranit pravou pomlčku + left-align (orig má jen ::before). */ .evb-pro-koho .evb-eyebrow { justify-content: flex-start; } .evb-pro-koho .evb-eyebrow::after { display: none; } /* Card text — boost specificity (orig design: H4 0.95rem, p 0.8rem). */ .evb-pro-koho .evb-ag-card { line-height: normal; grid-template-rows: min-content min-content; min-height: 0; } .evb-pro-koho .evb-ag-card h3 { font-size: 0.95rem; font-weight: 700; line-height: normal; color: rgb( 255 255 255 ); margin-bottom: 0; } .evb-pro-koho .evb-ag-card p { font-size: 0.8rem; color: rgb( 255 255 255 / 0.5 ); line-height: 1.6; font-weight: 300; margin-top: 0.75rem; margin-bottom: 0; } /* Fix #2 — outer columns gap 5rem desktop (flex gap, ne grid). */ .evb-pro-koho .wp-block-columns { gap: 5rem; } /* ─── Ceník služeb (Phase 7) — top-border list 6 řádků + gradient/muted cena ─── */ .evb-cenik { padding: 84px 2rem; } @media ( max-width: 900px ) { .evb-cenik { padding: 56px 2rem; } } @media ( max-width: 640px ) { .evb-cenik { padding: 42px 2rem; } } /* H2 v Cenik: orig clamp(2rem, 3.5vw, 2.8rem) — na 390 viewport = 2rem (32px), ne pevných 2.8rem (44.8px) z theme.json. Specificity 0,2,2 přebije :where(). */ section.evb-cenik h2.wp-block-heading { font-size: clamp( 2rem, 3.5vw, 2.8rem ); } .evb-cenik-list { margin-top: 3rem; border-top: 1px solid rgb( 255 255 255 / 0.1 ); } /* WP :where(.is-layout-flow) > * { margin-block-start: 24px } přidává neviditelný odsazení na každém potomku řádku, který v gridu vyhrazuje row track o 24px navíc. Stejný precedent jako .evb-audience-grid > .evb-ag-card v Phase 6. Reset zajistí, že každý řádek bude pevně přilepený k předchozímu (border-bottom). */ .evb-cenik-list > .evb-cenik-row { margin-block-start: 0; } .evb-cenik-row > * { margin-block-start: 0; } .evb-cenik-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; padding: 1.5rem 1.25rem; border-bottom: 1px solid rgb( 255 255 255 / 0.07 ); position: relative; transition: background 0.25s; border-radius: 12px; } /* Hover accent overlay (orig design § .cenik-row::after). */ .evb-cenik-row::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: rgb( var( --evb-accent-rgb ) / 0.04 ); opacity: 0; transition: opacity 0.25s; pointer-events: none; } .evb-cenik-row:hover::after { opacity: 1; } /* Cena 1 (Zdarma) ma plnou opacitu na price (orig § .cenik-row-free .cenik-price). */ .evb-cenik-row-free .evb-cenik-price { opacity: 1; } .evb-cenik-info { display: flex; flex-direction: column; gap: 0.25rem; } .evb-cenik-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 600; color: rgb( 255 255 255 ); line-height: normal; margin: 0; } .evb-cenik-note { font-size: 0.8rem; color: rgb( 255 255 255 / 0.4 ); font-weight: 300; line-height: normal; margin: 0; } /* Cena (1-4) — gradient text přes background-clip:text (jediný způsob, theme.json neumí). */ .evb-cenik-price { font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 700; background: var( --wp--preset--gradient--accent-cyan ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1.2; text-align: right; white-space: nowrap; margin: 0; /* color: transparent skryje caret v editoru — explicit caret restore. */ caret-color: var( --wp--preset--color--accent ); } /* Cena 5-6 (Dle dohody / Dle stavu) — muted, žádný gradient. */ .evb-cenik-price-muted { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 500; color: rgb( 255 255 255 / 0.6 ); line-height: 1.3; text-align: right; margin: 0; } /* Footer poznámka pod ceníkem (orig § .cenik-footer). */ .evb-cenik-footer-note { margin-top: 2.5rem; padding: 0.5rem 0; text-align: center; font-size: 0.875rem; color: rgb( 255 255 255 / 0.6 ); line-height: 1.65; } .evb-cenik-footer-note a { color: rgb( var( --evb-accent-rgb ) ); text-decoration: none; font-weight: 500; } /* ─── Responsive breakpoints. Mirrors original design CSS at 900px and 640px. ─── */ @media ( max-width: 900px ) { /* Proces: vertikální timeline na mobile/tablet — UX-friendly, žádný horizontální scroll. Kroky pod sebou: badge vlevo, popisek vpravo, gradient konektor mezi kroky jako vertikální čára vedle badge. Compound selector .wp-block-group.evb-process-row (specificity 0,2,0) přebíjí WP-injected .wp-container-XYZ gap rule (also 0,2,0, later source order). */ .wp-block-group.evb-process-row { flex-direction: column; align-items: flex-start; gap: 1.25rem; max-width: 480px; margin-inline: auto; /* Větší levý padding posouvá celý timeline doprava od levého okraje. */ padding: 0 1.5rem 0 6.75rem; justify-content: flex-start; } .evb-process-step { /* Badge vlevo, label vpravo — vedle sebe. */ flex-direction: row; align-items: center; width: auto; text-align: left; gap: 1rem; } .evb-process-badge { width: 36px; height: 36px; font-size: 0.95rem; flex-shrink: 0; } .evb-process-label { font-size: 0.95rem; max-width: none; text-align: left; line-height: 1.3; flex: 1; } /* Vertikální gradient konektor mezi kroky (top→bottom). Pozice: nad každým krokem od 2. dále, zarovnán se středem badge (left: 16px = badge_width/2 - connector_width/2). */ .evb-process-step:not(:first-child)::before { top: -1.25rem; left: 16px; right: auto; transform: none; width: 4px; height: 1.25rem; background: linear-gradient( 180deg, rgb( var( --evb-accent-rgb ) / 0.4 ), rgb( var( --evb-accent-rgb ) / 0.7 ) ); } /* Sluzby: grid 2-column, drop right-border na 2n+1 */ .evb-sluzby-grid { grid-template-columns: 1fr 1fr; } .evb-sluzby-card:nth-child( 3n ) { border-right: 1px solid rgba( 255, 255, 255, 0.1 ); } .evb-sluzby-card:nth-child( 2n ) { border-right: none; } /* Upgrade glass panel: zmenseny padding na mobile/tablet */ .evb-glass-panel { padding: 1.5rem; } /* Dalsi sluzby: stack vertically on mobile (Phase 4) */ .evb-extra-grid { grid-template-columns: 1fr; } .evb-extra-card { padding: 2rem 0; grid-template-columns: 44px 1fr; column-gap: 1rem; } .evb-extra-card + .evb-extra-card { padding-left: 0; border-left: none; } .evb-extra-card .wp-block-evb-icon { width: 44px; height: 44px; } .evb-extra-card::after { display: none; } /* Audience grid: stack 2x2 i na <=900 viewport (per orig audience-grid 1fr 1fr). */ .evb-audience-grid { grid-template-columns: 1fr 1fr; } /* Pro koho (Phase 6): zmenseny vertical padding na mobile */ .evb-pro-koho { padding: 56px 0; } /* Pro koho: outer columns stack vertical + center text col */ .evb-pro-koho .wp-block-columns { flex-direction: column; gap: 3rem; } .evb-pro-koho .wp-block-columns > .wp-block-column { flex-basis: 100%; } .evb-pro-koho .wp-block-columns > .wp-block-column:first-child { text-align: center; display: flex; flex-direction: column; align-items: center; } .evb-pro-koho .wp-block-columns > .wp-block-column:first-child .evb-eyebrow { justify-content: center; } } @media ( max-width: 640px ) { /* Pro koho na úzkém mobilu: stack do 1 sloupce (orig drží 2×2, ale s českými dlouhými slovy se text rozbíjí — UX přednost). */ .evb-audience-grid { grid-template-columns: 1fr; } /* Ceník — řádek na mobilu: cena vpravo per originál (NE stack). Orig CSS @media 640: grid-template-columns: 1fr auto; gap: 1rem; padding: 1.25rem .75rem. */ .evb-cenik-row { gap: 1rem; padding: 1.25rem 0.75rem; } .evb-cenik-price { font-size: 1.1rem; } } @media ( max-width: 480px ) { .evb-pro-koho { padding: 42px 0; } /* Sluzby: 1-column */ .evb-sluzby-grid { grid-template-columns: 1fr; } .evb-sluzby-card:nth-child( n ) { border-right: none; } /* Sluzby card: menší padding */ .evb-sluzby-card { padding: 2rem 1.25rem; } /* Upgrade tagy: zmenseny gap */ .evb-upgrade-tags { gap: 0.375rem; } /* Foto break: zmenšená výška + menší label */ .evb-foto-break { height: 260px; } .evb-foto-break-label { font-size: 0.72rem; } } /* ─── Hero section (CSS-controlled horizontal padding to enable mobile responsive override) ─── */ .evb-hero-section { padding-left: var( --wp--preset--spacing--60 ); padding-right: var( --wp--preset--spacing--60 ); } /* ─── Hero CTA: ghost button ↗ jako menší pseudo-element (per original design § .btn-ghost::after) ─── */ .evb-hero-actions .wp-block-button.is-style-evb-ghost > .wp-block-button__link::after { content: '↗'; font-size: 0.75em; margin-left: 0.4em; } /* ─── Hero CTA buttons: default horizontal padding (was inline, moved to CSS for mobile override) ─── */ .evb-hero-actions .wp-block-button > .wp-block-button__link { padding-left: 2rem; padding-right: 2rem; } .evb-hero-actions .wp-block-button.is-style-evb-ghost > .wp-block-button__link { padding-left: 1.25rem; padding-right: 1.25rem; } /* ─── Mobile (≤ 480px): hero CTA side-by-side fit + zmenšený padding ─── */ @media ( max-width: 480px ) { .evb-hero-section { padding-left: 1rem; padding-right: 1rem; } .wp-block-buttons.evb-hero-actions { gap: 0.75rem; } .evb-hero-actions .wp-block-button > .wp-block-button__link { padding-left: 1.25rem; padding-right: 1.25rem; } .evb-hero-actions .wp-block-button.is-style-evb-ghost > .wp-block-button__link { padding-left: 0.75rem; padding-right: 0.75rem; } } /* ─── Upgrade section typography — match originál measurements (44.8px h2, 15.2px sub, 14.4px CTA) ─── */ .evb-hero-section ~ * h2.wp-block-heading:has(.gradient-text), section:has(.evb-glass-panel) h2.wp-block-heading { font-size: clamp( 2rem, 3.5vw, 2.8rem ); /* clamp jako orig: 2rem mobil → 2.8rem desktop */ line-height: 1.1; letter-spacing: -0.01em; font-weight: 700; } section:has(.evb-glass-panel) .evb-sub { font-size: 0.95rem; /* = 15.2px (originál) */ line-height: 1.75; color: rgb( 255 255 255 / 0.6 ); /* originál opacity */ font-weight: 300; } section:has(.evb-glass-panel) .wp-block-button__link { font-size: 0.9rem; /* = 14.4px (originál CTA) */ line-height: normal; } /* Mobile h2 (originál 32px) */ @media ( max-width: 768px ) { html body section:has(.evb-glass-panel) h2.wp-block-heading.wp-block-heading { font-size: 2rem; /* = 32px */ line-height: 1.1; letter-spacing: -0.01em; } } /* CTA gradient override — match originál btn-glow: linear-gradient(135deg, #2eacc8, #65d0eb). Aplikuje se na všechna tlačítka s cyan brand barvou (WP injektuje has-cyan-background-color při backgroundColor:cyan v pattern attributu). Výjimka: nav .evb-nav-cta (přechod má rozdílný design — solid). */ .wp-block-button > .wp-block-button__link.has-cyan-background-color:not(.evb-nav-cta-link) { background: var( --wp--preset--gradient--button-glow ); background-color: transparent; } /* Site wrapper transparent — GeneratePress default je teal #073344 který překrývá modrý body gradient. */ body .site.grid-container { background-color: transparent; } /* Progress fill widths (per-block CSS class místo inline style — block validator OK) */ .evb-ub-fill-w-62 { width: 62%; } .evb-ub-fill-w-100 { width: 100%; } .evb-ub-fill-w-38 { width: 38%; } /* === Phase 8 — Section Kontakt (statická info, žádný formulář per klient). Originál CSS reference: ~/Desktop/evboost-deploy/index.html řádky 605-690. Lekce z Phase 7: side padding 2rem z CSS (NE inline), vertical padding mobile 42px / tablet 56px / desktop 84px sjednoceno, žádné force-pravidlo. === */ .evb-kontakt { padding: 84px 2rem 84px; position: relative; } .evb-kontakt-heading { text-align: center; margin-bottom: 2.8rem; } .evb-kontakt-heading h2 { color: rgb( 255 255 255 ); margin-bottom: 0; } .evb-kontakt-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; max-width: 1160px; margin: 0 auto; } .evb-kontakt-inner > * { margin-block-start: 0; } .evb-kontakt-block, .evb-kontakt-items { background: rgb( 255 255 255 / 0.06 ); backdrop-filter: blur( 20px ); border: 1px solid rgb( 255 255 255 / 0.12 ); border-radius: 20px; padding: 2rem 2rem; } .evb-kontakt-icon { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; background: linear-gradient( 135deg, rgb( 46 172 200 / 0.2 ), rgb( 101 208 235 / 0.2 ) ); border: 1px solid rgb( 101 208 235 / 0.25 ); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgb( 101 208 235 / 0.1 ); } .evb-kontakt-icon svg { display: block; } .evb-kontakt-icon-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; } .evb-kontakt-firm { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; color: rgb( 255 255 255 ); letter-spacing: -0.01em; margin: 0; } .evb-kontakt-adresy { display: grid; grid-template-columns: 1fr; gap: 0.25rem; } .evb-kontakt-adr-group { display: flex; flex-direction: column; gap: 0.2rem; } .evb-kontakt-adr-label { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.03em; color: rgb( 101 208 235 ); margin: 0 0 0.3rem; } .evb-kontakt-adr-line { font-size: 0.875rem; color: rgb( 255 255 255 / 0.6 ); font-weight: 300; line-height: 1.7; margin: 0; } .evb-kontakt-items { display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; } .evb-kontakt-item { display: flex; flex-direction: column; } .evb-kontakt-item-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; } .evb-kontakt-link { font-size: 1rem; font-weight: 500; text-decoration: none; color: rgb( 255 255 255 ); transition: opacity 0.2s; } .evb-kontakt-link:hover { opacity: 0.7; } /* Tablet ≤ 900: stack 2col → 1col, snížit boční padding */ @media ( max-width: 900px ) { .evb-kontakt { padding: 56px 2rem 56px; } .evb-kontakt-inner { grid-template-columns: 1fr; } } /* Mobile ≤ 640: další snížení vertical paddingu */ @media ( max-width: 640px ) { .evb-kontakt { padding: 42px 2rem 42px; } .evb-kontakt-heading { margin-bottom: 2rem; } .evb-kontakt-block, .evb-kontakt-items { padding: 1.5rem; } } /* ─── Footer (Phase 9) — GP Element site-footer, logo + copyright ─── */ .evb-footer-wrap { padding: 2.5rem 3rem; border-top: 1px solid rgb( 255 255 255 / 0.1 ); background: rgb( 0 0 0 / 0.3 ); align-items: center; gap: 1.5rem; } .evb-footer-logo img { height: 34px; width: auto; display: block; } .evb-footer-copy { font-size: 0.78rem; color: rgb( 255 255 255 / 0.4 ); font-weight: 300; margin: 0; text-align: right; } @media ( max-width: 640px ) { .evb-footer-wrap { flex-direction: column; padding: 2rem 2rem; gap: 1rem; align-items: flex-start; } .evb-footer-copy { text-align: left; } } /* ───────────────────────────────────────────────────────────────── PHASE 10 — STRÁNKA /SLUZBY/ (standalone page) ───────────────────────────────────────────────────────────────── Samostatná stránka s 10+ sekcemi v minimalistic layoutu (čísla 1-5 + bullet listy). Reuse brand barev přes --evb-accent-*. ───────────────────────────────────────────────────────────────── */ /* Šířka + centrování sekcí po odstranění obalu evb-sluzby-page. Sjednoceno s HP: obsah 1160px, okraj 2rem (=spacing|60), vystředěno. Kombinované pravidlo (max-width/margin/padding-inline) je ZÁMĚRNĚ až za jednotlivými sekcemi — longhand zachová jejich vlastní horní/dolní mezery. */ .evb-sluzby-hero { padding: 7rem 0 5rem; text-align: left; } .evb-sluzby-label { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; color: rgb( var( --evb-accent-rgb ) ); padding-bottom: 1.5rem; border-bottom: 1px solid rgb( var( --evb-accent-rgb ) ); margin-bottom: 2.5rem; } .evb-sluzby-hero h1.wp-block-heading { font-family: 'Space Grotesk', sans-serif; font-size: clamp( 1.85rem, 8.5vw, 4.5rem ); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 2rem; } .evb-sluzby-lead { font-size: var( --wp--preset--font-size--md ); line-height: 1.7; color: rgb( 255 255 255 / 0.7 ); max-width: 680px; margin: 0; } .evb-sluzby-divider { height: 1px; background: linear-gradient( 90deg, transparent 0%, rgb( 255 255 255 / 0.2 ) 30%, rgb( 255 255 255 / 0.2 ) 70%, transparent 100% ); margin: 5rem 0; border: none; } .evb-sluzby-intro { font-family: 'Space Grotesk', sans-serif; font-size: var( --wp--preset--font-size--md ); font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; color: rgb( 255 255 255 / 0.9 ); margin: 0 0 3.5rem; max-width: 720px; } .evb-sluzby-num-section { display: grid; grid-template-columns: 80px 1fr; gap: 2.5rem; align-items: start; margin: 0 0 4.5rem; } .evb-sluzby-num-section .evb-sluzby-num { font-family: 'Space Grotesk', sans-serif; font-size: 3.6rem; font-weight: 700; background: linear-gradient( 135deg, rgb( var( --evb-accent-dark-rgb ) ), rgb( var( --evb-accent-rgb ) ) ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; letter-spacing: -0.04em; margin: 0; caret-color: rgb( var( --evb-accent-rgb ) ); } .evb-sluzby-num-section h2.wp-block-heading, .evb-sluzby-block-section h2.wp-block-heading { font-family: 'Space Grotesk', sans-serif; font-size: clamp( 1.5rem, 2.5vw, 1.85rem ); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0.25rem 0 1rem; color: rgb( 255 255 255 / 0.9 ); } .evb-sluzby-num-section p, .evb-sluzby-block-section p { font-size: 0.95rem; line-height: 1.75; color: rgb( 255 255 255 / 0.7 ); margin: 0 0 1.25rem; } .evb-sluzby-list { list-style: none; padding: 0; margin: 1.25rem 0 0; } .evb-sluzby-list li { position: relative; padding: 0.65rem 0 0.65rem 1.5rem; font-size: 0.95rem; line-height: 1.7; color: rgb( 255 255 255 / 0.7 ); border-top: 1px solid rgb( 255 255 255 / 0.06 ); } .evb-sluzby-list li:first-child { border-top: none; padding-top: 0.25rem; } .evb-sluzby-list li::before { content: ''; position: absolute; left: 0; top: 1.25rem; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient( 135deg, rgb( var( --evb-accent-dark-rgb ) ), rgb( var( --evb-accent-rgb ) ) ); } .evb-sluzby-list li:first-child::before { top: 0.85rem; } .evb-sluzby-list li strong, .evb-sluzby-list li b { color: rgb( 255 255 255 / 0.9 ); font-weight: 600; } .evb-sluzby-block-section { margin: 0 0 4.5rem; } .evb-sluzby-block-section h2.wp-block-heading { font-size: clamp( 1.75rem, 3vw, 2.25rem ); letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 1.25rem; } .evb-sluzby-audience h2.wp-block-heading { font-family: 'Space Grotesk', sans-serif; font-size: clamp( 1.5rem, 2.5vw, 1.85rem ); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 2rem; color: rgb( 255 255 255 / 0.9 ); } .evb-sluzby-audience-list { list-style: none; padding: 0; margin: 0; } .evb-sluzby-audience-list li { position: relative; padding: 1.1rem 0 1.1rem 1.75rem; border-top: 1px solid rgb( 255 255 255 / 0.1 ); font-size: 0.95rem; line-height: 1.6; color: rgb( 255 255 255 / 0.7 ); } .evb-sluzby-audience-list li:last-child { border-bottom: 1px solid rgb( 255 255 255 / 0.1 ); } .evb-sluzby-audience-list li::before { content: ''; position: absolute; left: 0; top: 1.55rem; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient( 135deg, rgb( var( --evb-accent-dark-rgb ) ), rgb( var( --evb-accent-rgb ) ) ); } .evb-sluzby-audience-list li strong, .evb-sluzby-audience-list li b { color: rgb( 255 255 255 / 0.9 ); font-weight: 600; } .evb-sluzby-process h2.wp-block-heading { font-family: 'Space Grotesk', sans-serif; font-size: clamp( 1.75rem, 3vw, 2.25rem ); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 1.25rem; } .evb-sluzby-process p { font-size: 0.95rem; line-height: 1.75; color: rgb( 255 255 255 / 0.7 ); margin: 0 0 2.5rem; } .evb-sluzby-process-list { list-style: none; padding: 0; margin: 0; counter-reset: evb-step; } .evb-sluzby-process-list li { position: relative; padding: 1.5rem 0 1.5rem 1.75rem; border-top: 1px solid rgb( 255 255 255 / 0.1 ); } .evb-sluzby-process-list li:last-child { border-bottom: 1px solid rgb( 255 255 255 / 0.1 ); } .evb-sluzby-process-list li::before { content: counter( evb-step ) '.'; counter-increment: evb-step; position: absolute; left: 0; top: 1.5rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; color: rgb( var( --evb-accent-rgb ) ); } .evb-sluzby-process-list li strong, .evb-sluzby-process-list li b { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 600; color: rgb( 255 255 255 / 0.9 ); display: block; margin-bottom: 0.35rem; } .evb-sluzby-process-list li span { font-size: 0.95rem; line-height: 1.65; color: rgb( 255 255 255 / 0.7 ); } .evb-sluzby-cta-final { margin: 5rem 0 0; padding-bottom: 3.5rem; text-align: center; } .evb-sluzby-cta-final p { font-family: 'Space Grotesk', sans-serif; font-size: var( --wp--preset--font-size--md ); font-weight: 500; color: rgb( 255 255 255 / 0.7 ); margin: 0 0 1.75rem; } /* Šířka obsahu = HP (1160). max-width = 1160 + 2*2rem okraj → obsah 1160, levý okraj obsahu 140px ve 1440 = shodné s HP. box-sizing border-box. */ .evb-sluzby-hero, .evb-sluzby-num-section, .evb-sluzby-block-section, .evb-sluzby-audience, .evb-sluzby-process, .evb-sluzby-cta-final, .evb-sluzby-intro, .evb-sluzby-divider { max-width: calc( 1160px + 4rem ); margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; box-sizing: border-box; } /* Lead je v hero (constrained) — WP centruje úzké děti přes margin:auto. Vrátíme vlevo (shodně s návrhem). Specificita 0,2,0 > WP 0,1,0, bez !important. */ .evb-sluzby-hero .evb-sluzby-lead { margin-left: 0; margin-right: auto; } @media ( max-width: 720px ) { .evb-sluzby-hero, .evb-sluzby-num-section, .evb-sluzby-block-section, .evb-sluzby-audience, .evb-sluzby-process, .evb-sluzby-cta-final, .evb-sluzby-intro, .evb-sluzby-divider { padding-left: 1.5rem; padding-right: 1.5rem; } .evb-sluzby-hero { padding: 5rem 1.5rem 3rem; } .evb-sluzby-num-section { grid-template-columns: 1fr; gap: 0.5rem; } .evb-sluzby-num-section .evb-sluzby-num { font-size: 2.6rem; } .evb-sluzby-divider { margin: 3.5rem 0; } .evb-sluzby-audience-list li, .evb-sluzby-process-list li { padding-left: 1.5rem; } } /* ───────────────────────────────────────────────────────────────── PHASE 10 — /sluzby/ page-id-specific GP wrapper override ───────────────────────────────────────────────────────────────── GP separate-containers content layout zužuje effective content area paddings na .site .grid-container, .site-content, .inside-article. Pro /sluzby/ chceme content area shodnou s designem — 880px max-width constrained centered, bez extra GP outer paddings. Page-id-specific scope = žádný impact na ostatní stránky. ───────────────────────────────────────────────────────────────── */ .page-id-73 .site.grid-container { max-width: 100%; padding: 0; } .page-id-73 .site-content { padding: 0; } .page-id-73 .inside-article { padding: 0; background: transparent; } .page-id-73 .entry-content { margin: 0; } /* Phase 10.1 — hlavička: po výměně wp:navigation za shortcode [evb_nav_menu] chybí core WP styling. Reset + horizontal flex. 2026-05-27. */ .evb-nav-pill .evb-nav-menu { display: flex; flex: 1 1 auto; justify-content: center; } .evb-nav-pill .evb-nav-menu .wp-block-navigation__container { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0; gap: 2.8rem; align-items: center; } .evb-nav-pill .evb-nav-menu .wp-block-navigation-item { margin: 0; padding: 0; } .evb-nav-pill .evb-nav-menu .wp-block-navigation-item__content { color: rgb( 255 255 255 / 0.85 ); font-weight: 600; font-size: 0.82rem; } /* Homepage ikona — sjednocený vertical align se sourozeneckými textovými položkami */ .evb-nav-pill .evb-nav-menu .evb-home-item .wp-block-navigation-item__content { display: inline-flex; align-items: center; color: rgb( 255 255 255 / 0.85 ); } .evb-nav-pill .evb-nav-menu .evb-home-item svg { display: block; } .evb-nav-pill .evb-nav-menu .evb-home-item:hover svg, .evb-nav-pill .evb-nav-menu .evb-home-item:focus-within svg { stroke: rgb( var( --evb-accent-rgb ) ); } /* Screen reader text helper (pokud již není v parent themu) */ .evb-nav-menu .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; } /* Phase 10.1 fix — CTA Kontakt: vrátit původní compact padding + font-size (po výměně wp:button → [evb_cta_button] shortcode chyběly inline styles). */ .evb-nav-pill .evb-nav-cta .wp-block-button__link { padding: 0.45rem 1.25rem; font-size: 0.82rem; font-weight: 600; border-radius: 30px; line-height: 1.2; } /* Logo vertical align — sjednotit s menu položkami uprostřed pillu */ .evb-nav-pill > .wp-block-site-logo { align-self: center; line-height: 0; } .evb-nav-pill > .wp-block-site-logo a { display: block; } /* Phase 10.1 fix — anchor scroll + footer logo sizing */ /* Nativní plynulý scroll na kotvy. scroll-padding-top = pod plovoucí pill hlavičkou (76px) s rezervou. Deklarativní (bez JS) → spolehlivý doskok ve všech prohlížečích včetně mobilního Safari. */ html { scroll-padding-top: 96px; scroll-behavior: auto; } @media ( prefers-reduced-motion: reduce ) { html { scroll-behavior: auto; } } .wp-block-site-logo.evb-footer-logo img, .evb-footer-logo.wp-block-site-logo img, .evb-footer-logo img { height: 34px; width: auto; max-width: none; display: block; } /* Phase 11 — mobilní menu přes GP Off Canvas Panel. Pod 768px (GP mobile header breakpoint) skrýt náš vlastní pill header — GP mobile header (logo + hamburger) ho nahradí a otevírá off-canvas panel. GP Mobile Header skrývá jen GP DEFAULT header; náš je custom Block Element, takže ho musíme skrýt explicitně. */ @media ( max-width: 768px ) { body .evb-nav-pill { display: none; } } /* Phase 11 — brand styling GP Off Canvas panel + mobile header (vzhled HP). Panel bg navy dědí z Primary Nav colors. Sjednotit položky: bílé, cyan na tap. Potlačit falešný current-menu-item highlight (anchory /#x jsou na homepage všechny "current" → 5/6 cyan = matoucí). */ .slideout-navigation .menu-item a, .slideout-navigation .menu-item.current-menu-item > a { color: rgb( 255 255 255 / 0.9 ); font-family: 'Space Grotesk', sans-serif; font-weight: 600; } .slideout-navigation .menu-item a:hover, .slideout-navigation .menu-item a:focus { color: rgb( var( --evb-accent-rgb ) ); } /* Panel background = web body background (var page-bg gradient) — souhlasí s podkladem webu a je napojený na jeden zdroj (žádná hardcoded navy). */ .slideout-navigation.offside { background: var( --wp--preset--gradient--page-bg ); border-left: 1px solid rgb( 255 255 255 / 0.1 ); } /* Mobile header bar = web body background (var page-bg gradient), žádná hardcoded navy. */ .mobile-header-navigation { background: var( --wp--preset--gradient--page-bg ); border-bottom: 1px solid rgb( 255 255 255 / 0.1 ); } .mobile-header-navigation .menu-toggle, .mobile-header-navigation .menu-toggle .gp-icon { color: rgb( 255 255 255 / 0.95 ); } /* Hamburger ikona velikost — gp-icon SVG je em-based (font-size). Default 15px → 24px (orig čárky 22px wide). Menší padding box. */ .mobile-header-navigation .menu-toggle { font-size: 22px; padding: 0 10px; } .mobile-header-navigation .menu-toggle .gp-icon svg { width: 1em; height: 1em; } /* Mobile header logo výška. */ /* Logo: explicit width překonává GP mobile header constraint (úzký logo container + img max-width:100% squishuje). Zdroj wp:site-logo width=96 dává HTML width=96; tento override pojistka pro parent constraint. */ .mobile-header-navigation .site-logo.mobile-header-logo img, .mobile-header-navigation .navigation-branding img, .mobile-header-navigation img.custom-logo { height: 50px; width: 141px; max-width: 141px; object-fit: contain; display: block; } /* Phase 11 fix — sjednotit barvu off-canvas položek (body prefix přebíjí GP current-menu-item inline color). Na homepage je 5/6 anchorů "current", tak current highlight nedává smysl — všechny bílé, cyan jen na tap. */ body .slideout-navigation .menu-item a, body .slideout-navigation .menu-item.current-menu-item > a, body .slideout-navigation .current-menu-item a { color: rgb( 255 255 255 / 0.9 ); } body .slideout-navigation .menu-item a:hover, body .slideout-navigation .menu-item a:focus { color: rgb( var( --evb-accent-rgb ) ); } /* Phase 11 fix 2 — přebít GP current-item cyan (.main-navigation .main-nav ul li[class*="current-menu-"] > a = spec 0,3,3). Náš body-prefix match stejné struktury = 0,3,4 → vyhraje. Sjednotí položky na bílé, cyan jen tap. */ body .slideout-navigation .main-nav ul li[class*="current-menu-"] > a { color: rgb( 255 255 255 / 0.9 ); } body .slideout-navigation .main-nav ul li a:hover, body .slideout-navigation .main-nav ul li a:focus { color: rgb( var( --evb-accent-rgb ) ); } /* Phase 11 — off-canvas full-width + větší písmo + Kontakt CTA + Homepage ikona */ .slideout-navigation.offside { --gp-slideout-width: 100vw; max-width: 100vw; } /* Větší písmo položek + víc vzduchu */ body .slideout-navigation .main-nav ul li a { font-size: 1.05rem; padding-top: 0.55rem; padding-bottom: 0.55rem; } /* Zavírací křížek — větší + vpravo nahoře (dle reference Nomad). GP ho dává block/left/17px; přebíjíme bez force-pravidlo (GP nemá force-pravidlo). */ .slideout-navigation button.slideout-exit { display: flex; justify-content: flex-end; align-items: center; font-size: 30px; } /* Homepage ikona — zarovnat, cyan na tap */ .slideout-navigation .evb-slideout-home-icon { display: inline-block; vertical-align: middle; color: rgb( 255 255 255 / 0.9 ); } .slideout-navigation .menu-item a:hover .evb-slideout-home-icon, .slideout-navigation .menu-item a:focus .evb-slideout-home-icon { color: rgb( var( --evb-accent-rgb ) ); } /* Menší mezera poslední položka → CTA (GP .main-nav má margin-bottom 40px). */ #generate-slideout-menu .main-nav { margin-bottom: 0; padding-left: 2rem; } /* Kontakt CTA tlačítko na konci panelu — gradient jako desktop. */ /* .slideout-navigation prefix → (0,2,0) přebije GP core @media(max-width:768px) .main-navigation ul {display:none} (0,1,1), které schovává „bludné" ul v mobilním menu. CTA je v