/* Theme Name: Палетко Theme URI: Description: Блок тема за сайта на Палетко – складов софтуер с мобилен терминал. Визията „Crystal“ е същата като в приложението. Version: 0.8.0 Requires at least: 6.6 Tested up to: 6.8 Requires PHP: 8.1 Author: Палетко License: Proprietary Text Domain: paletko */ /* * "Crystal" look (the app's re-skin of 2026-10-16): a cool frosted page with a soft colour mesh, content on * translucent white glass with a bright top rim, a faint outer ring, a diagonal sheen and two-layer cool * shadows. Honey only on primary buttons, selection, progress and small accents. Blur only on the sticky * header and on dialog scrims. Dark mode is smoked glass on graphite, following prefers-color-scheme or * the header toggle (data-theme on , set before first paint in functions.php). * * Tokens are --pk-*; the theme.json presets (--wp--preset--color--ink etc.) are redefined for dark mode * below so headings, links and the editor follow too. Everything else is keyed on the paletko-* classes * that inc/sections.php puts on core blocks -- layout here is unchanged from the earlier look. */ :root { /* brand */ --pk-honey: #e0a83c; /* primary buttons, accents only */ --pk-honey-10: rgba(224, 168, 60, 0.14); --pk-honey-text: #85570a; /* honey as text/links on light */ --pk-on-honey: #241a0e; /* ink on honey, both themes */ --pk-ink: hsl(30, 22%, 12%); --pk-ink-2: hsla(30, 20%, 16%, 0.6); --pk-muted: #5c544d; /* secondary text: solid, so it stays >= 4.5:1 on glass */ --pk-line: hsla(30, 26%, 20%, 0.15); --pk-success: #1f9d5c; --pk-success-text: #11703f; --pk-warning: #e8801f; --pk-warning-text: #964400; --pk-error: #dc3d32; --pk-error-text: #b0261c; --pk-r-s: 6px; --pk-r-m: 10px; --pk-r-l: 16px; /* page */ --pk-page: #eceff3; --pk-mesh: radial-gradient(1100px 680px at -5% -10%, hsla(210, 75%, 86%, 0.85), transparent 62%), radial-gradient(900px 620px at 105% -5%, hsla(248, 50%, 90%, 0.85), transparent 60%), radial-gradient(1000px 720px at 95% 110%, hsla(38, 80%, 90%, 0.55), transparent 60%), radial-gradient(900px 640px at 5% 105%, hsla(190, 50%, 88%, 0.65), transparent 62%); --pk-grid-line: rgba(22, 30, 46, 0.05); /* glass */ --pk-glass: rgba(255, 255, 255, 0.42); --pk-glass-strong: rgba(255, 255, 255, 0.9); --pk-frost: rgba(255, 255, 255, 0.86); /* "thick crystal" veil for dialogs and dropdowns */ --pk-glass-ring: rgba(22, 30, 46, 0.075); --pk-glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95); --pk-glass-base: inset 0 -1px 0 rgba(22, 30, 46, 0.04); --pk-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.22) 22%, rgba(255, 255, 255, 0) 46%); --pk-sheen-top: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 55%); --pk-chip-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%); --pk-blur: blur(18px) saturate(160%); --pk-depth-1: var(--pk-glass-rim), var(--pk-glass-base), 0 0 0 1px var(--pk-glass-ring), 0 1px 2px rgba(22, 30, 46, 0.05), 0 10px 28px -14px rgba(22, 30, 46, 0.22); --pk-depth-2: var(--pk-glass-rim), var(--pk-glass-base), 0 0 0 1px rgba(22, 30, 46, 0.09), 0 2px 4px rgba(22, 30, 46, 0.06), 0 18px 40px -16px rgba(22, 30, 46, 0.3); --pk-depth-3: var(--pk-glass-rim), 0 0 0 1px rgba(22, 30, 46, 0.1), 0 3px 8px rgba(22, 30, 46, 0.08), 0 30px 70px -18px rgba(22, 30, 46, 0.38); --pk-scrim: rgba(28, 36, 52, 0.22); --pk-header: rgba(250, 251, 253, 0.72); --pk-field: #fff; --pk-field-line: rgba(22, 30, 46, 0.2); --pk-icon-tile: rgba(255, 255, 255, 0.82); /* the icons are dark strokes: their tile stays light */ /* buttons */ --pk-btn-glass: rgba(255, 255, 255, 0.6); --pk-btn-glass-hover: rgba(255, 255, 255, 0.88); --pk-btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 48%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0) 100%); --pk-btn-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(22, 30, 46, 0.11), 0 1px 2px rgba(22, 30, 46, 0.07), 0 3px 8px -3px rgba(22, 30, 46, 0.14); --pk-btn-primary-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.1) 100%); --pk-btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(110, 66, 0, 0.2), inset 0 0 0 1px rgba(140, 88, 8, 0.25), 0 1px 2px rgba(90, 58, 10, 0.18), 0 4px 12px -4px rgba(150, 100, 20, 0.36); /* dark bands (tour, scanner app, CTA, footer): smoked glass over a dark mesh, in both themes */ --pk-band: hsl(225, 12%, 10%); --pk-band-tint: hsla(226, 20%, 8%, 0.78); /* clear glass: the page shows through, blurred */ --pk-band-mesh: radial-gradient(900px 520px at 0% 0%, hsla(212, 55%, 30%, 0.38), transparent 62%), radial-gradient(800px 520px at 100% 0%, hsla(255, 35%, 30%, 0.3), transparent 60%), radial-gradient(900px 600px at 100% 100%, hsla(36, 70%, 34%, 0.16), transparent 60%), radial-gradient(800px 560px at 0% 100%, hsla(195, 45%, 24%, 0.24), transparent 62%); --pk-band-ink: hsl(38, 50%, 97%); --pk-band-ink-2: hsla(38, 40%, 92%, 0.76); --pk-band-glass: hsla(225, 10%, 22%, 0.55); --pk-band-ring: rgba(200, 218, 255, 0.1); --pk-band-rim: inset 0 1px 0 rgba(205, 222, 255, 0.13); --pk-band-sheen: linear-gradient(135deg, rgba(200, 218, 255, 0.1) 0%, rgba(200, 218, 255, 0.03) 24%, rgba(200, 218, 255, 0) 46%); --pk-header-h: 68px; /* the earlier names, still read by a few rules */ --pk-radius: var(--pk-r-l); --pk-border: 1px solid var(--pk-line); --pk-shadow: var(--pk-depth-1); } /* ---------- dark: the same tokens as smoked glass on graphite (system setting, unless the toggle says light) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --pk-honey: #ebb95a; --pk-honey-10: rgba(235, 185, 90, 0.16); --pk-honey-text: #f4cf86; --pk-ink: hsl(38, 50%, 97%); --pk-ink-2: hsla(38, 50%, 97%, 0.62); --pk-muted: #bab5ac; --pk-line: hsla(38, 38%, 88%, 0.18); --pk-success: #34b873; --pk-success-text: #7ddcaa; --pk-warning: #f39a45; --pk-warning-text: #ffc58c; --pk-error: #f0675c; --pk-error-text: #ff9c92; --pk-page: hsl(225, 12%, 8%); --pk-mesh: radial-gradient(1100px 680px at -5% -10%, hsla(212, 55%, 30%, 0.32), transparent 62%), radial-gradient(900px 620px at 105% -5%, hsla(255, 35%, 30%, 0.26), transparent 60%), radial-gradient(1000px 720px at 95% 110%, hsla(36, 70%, 34%, 0.14), transparent 60%), radial-gradient(900px 640px at 5% 105%, hsla(195, 45%, 24%, 0.2), transparent 62%); --pk-grid-line: rgba(200, 218, 255, 0.1); --pk-glass: hsla(225, 12%, 18%, 0.4); --pk-glass-strong: hsla(222, 9%, 14%, 0.9); --pk-frost: hsla(222, 10%, 14%, 0.88); --pk-glass-ring: rgba(0, 0, 0, 0.45); --pk-glass-rim: inset 0 1px 0 rgba(205, 222, 255, 0.13); --pk-glass-base: inset 0 -1px 0 rgba(0, 0, 0, 0.25); --pk-sheen: linear-gradient(135deg, rgba(200, 218, 255, 0.1) 0%, rgba(200, 218, 255, 0.03) 24%, rgba(200, 218, 255, 0) 46%); --pk-sheen-top: linear-gradient(180deg, rgba(200, 218, 255, 0.07) 0%, rgba(200, 218, 255, 0) 55%); --pk-chip-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 70%); --pk-depth-1: var(--pk-glass-rim), var(--pk-glass-base), 0 0 0 1px var(--pk-glass-ring), 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.7); --pk-depth-2: var(--pk-glass-rim), var(--pk-glass-base), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35), 0 20px 44px -16px rgba(0, 0, 0, 0.8); --pk-depth-3: inset 0 1px 0 rgba(205, 222, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4), 0 32px 72px -18px rgba(0, 0, 0, 0.85); --pk-scrim: rgba(4, 6, 12, 0.45); --pk-header: hsla(225, 12%, 10%, 0.72); --pk-field: hsl(222, 9%, 11%); --pk-field-line: rgba(200, 218, 255, 0.16); --pk-icon-tile: hsla(38, 45%, 93%, 0.92); --pk-btn-glass: rgba(200, 218, 255, 0.06); --pk-btn-glass-hover: rgba(200, 218, 255, 0.11); --pk-btn-sheen: linear-gradient(180deg, rgba(210, 225, 255, 0.13) 0%, rgba(210, 225, 255, 0.05) 48%, rgba(210, 225, 255, 0.01) 52%, rgba(210, 225, 255, 0) 100%); --pk-btn-shadow: inset 0 1px 0 rgba(210, 225, 255, 0.14), inset 0 0 0 1px rgba(200, 218, 255, 0.11), 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px -4px rgba(0, 0, 0, 0.5); --pk-btn-primary-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0) 100%); --pk-btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(80, 50, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px -4px rgba(235, 185, 90, 0.3); --pk-band: hsl(225, 12%, 12%); --pk-band-tint: hsla(226, 18%, 14%, 0.3); --wp--preset--color--ink: hsl(38, 50%, 97%); --wp--preset--color--muted: #bab5ac; --wp--preset--color--paper: hsl(225, 12%, 8%); --wp--preset--color--white: hsl(222, 9%, 14%); --wp--preset--color--beige: hsl(225, 10%, 17%); --wp--preset--color--amber: #f4cf86; --wp--preset--color--wheat: #ebb95a; --wp--preset--color--wheat-light: hsl(38, 30%, 22%); --wp--preset--color--success: #34b873; --wp--preset--color--warning: #f39a45; } } /* the same block for an explicit choice in the header toggle */ :root[data-theme="dark"] { color-scheme: dark; --pk-honey: #ebb95a; --pk-honey-10: rgba(235, 185, 90, 0.16); --pk-honey-text: #f4cf86; --pk-ink: hsl(38, 50%, 97%); --pk-ink-2: hsla(38, 50%, 97%, 0.62); --pk-muted: #bab5ac; --pk-line: hsla(38, 38%, 88%, 0.18); --pk-success: #34b873; --pk-success-text: #7ddcaa; --pk-warning: #f39a45; --pk-warning-text: #ffc58c; --pk-error: #f0675c; --pk-error-text: #ff9c92; --pk-page: hsl(225, 12%, 8%); --pk-mesh: radial-gradient(1100px 680px at -5% -10%, hsla(212, 55%, 30%, 0.32), transparent 62%), radial-gradient(900px 620px at 105% -5%, hsla(255, 35%, 30%, 0.26), transparent 60%), radial-gradient(1000px 720px at 95% 110%, hsla(36, 70%, 34%, 0.14), transparent 60%), radial-gradient(900px 640px at 5% 105%, hsla(195, 45%, 24%, 0.2), transparent 62%); --pk-grid-line: rgba(200, 218, 255, 0.1); --pk-glass: hsla(225, 12%, 18%, 0.4); --pk-glass-strong: hsla(222, 9%, 14%, 0.9); --pk-frost: hsla(222, 10%, 14%, 0.88); --pk-glass-ring: rgba(0, 0, 0, 0.45); --pk-glass-rim: inset 0 1px 0 rgba(205, 222, 255, 0.13); --pk-glass-base: inset 0 -1px 0 rgba(0, 0, 0, 0.25); --pk-sheen: linear-gradient(135deg, rgba(200, 218, 255, 0.1) 0%, rgba(200, 218, 255, 0.03) 24%, rgba(200, 218, 255, 0) 46%); --pk-sheen-top: linear-gradient(180deg, rgba(200, 218, 255, 0.07) 0%, rgba(200, 218, 255, 0) 55%); --pk-chip-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 70%); --pk-depth-1: var(--pk-glass-rim), var(--pk-glass-base), 0 0 0 1px var(--pk-glass-ring), 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.7); --pk-depth-2: var(--pk-glass-rim), var(--pk-glass-base), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35), 0 20px 44px -16px rgba(0, 0, 0, 0.8); --pk-depth-3: inset 0 1px 0 rgba(205, 222, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4), 0 32px 72px -18px rgba(0, 0, 0, 0.85); --pk-scrim: rgba(4, 6, 12, 0.45); --pk-header: hsla(225, 12%, 10%, 0.72); --pk-field: hsl(222, 9%, 11%); --pk-field-line: rgba(200, 218, 255, 0.16); --pk-icon-tile: hsla(38, 45%, 93%, 0.92); --pk-btn-glass: rgba(200, 218, 255, 0.06); --pk-btn-glass-hover: rgba(200, 218, 255, 0.11); --pk-btn-sheen: linear-gradient(180deg, rgba(210, 225, 255, 0.13) 0%, rgba(210, 225, 255, 0.05) 48%, rgba(210, 225, 255, 0.01) 52%, rgba(210, 225, 255, 0) 100%); --pk-btn-shadow: inset 0 1px 0 rgba(210, 225, 255, 0.14), inset 0 0 0 1px rgba(200, 218, 255, 0.11), 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px -4px rgba(0, 0, 0, 0.5); --pk-btn-primary-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 48%, rgba(255, 255, 255, 0.02) 52%, rgba(255, 255, 255, 0) 100%); --pk-btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(80, 50, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px -4px rgba(235, 185, 90, 0.3); --pk-band: hsl(225, 12%, 12%); --pk-band-tint: hsla(226, 18%, 14%, 0.3); --wp--preset--color--ink: hsl(38, 50%, 97%); --wp--preset--color--muted: #bab5ac; --wp--preset--color--paper: hsl(225, 12%, 8%); --wp--preset--color--white: hsl(222, 9%, 14%); --wp--preset--color--beige: hsl(225, 10%, 17%); --wp--preset--color--amber: #f4cf86; --wp--preset--color--wheat: #ebb95a; --wp--preset--color--wheat-light: hsl(38, 30%, 22%); --wp--preset--color--success: #34b873; --wp--preset--color--warning: #f39a45; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* the page: soft light mesh the glass reads against, on a fixed layer of its own (a fixed background-attachment repaints on every scroll step and makes the glass blur stutter) */ body { -webkit-font-smoothing: antialiased; overflow-x: hidden; color: var(--pk-ink); background-color: var(--pk-page); } body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: var(--pk-mesh); pointer-events: none; } ::selection { background: rgba(224, 168, 60, 0.35); color: inherit; } [id] { scroll-margin-top: calc(var(--pk-header-h) + 12px); } img { max-width: 100%; height: auto; } :where(a, button, input, select, textarea, label, summary):focus-visible { outline: 2px solid var(--pk-ink); outline-offset: 2px; border-radius: 4px; } /* main container: the home page's sections run edge to edge */ .paletko-main { margin-block: 0; padding-top: 0; } .paletko-main > .wp-block-post-content { margin-top: 0; } .paletko-page { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); } .paletko-page .wp-block-post-title { margin-bottom: var(--wp--preset--spacing--40); } /* ---------- buttons: honey primary, glass secondary ---------- */ .wp-element-button, .wp-block-button__link { background-color: var(--pk-honey); background-image: var(--pk-btn-primary-sheen); color: var(--pk-on-honey); border-radius: var(--pk-r-m); box-shadow: var(--pk-btn-primary-shadow); transition: transform 0.15s ease-out, filter 0.15s ease-out, background-color 0.15s; } .wp-element-button:hover, .wp-block-button__link:hover { background-color: var(--pk-honey); color: var(--pk-on-honey); filter: brightness(1.05) saturate(1.05); transform: translateY(-1px); } .wp-element-button:active, .wp-block-button__link:active { transform: none; filter: brightness(0.97); } /* secondary: "Try it yourself" and outline buttons are clear glass */ .wp-block-button.paletko-btn-try > .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link { background-color: var(--pk-btn-glass); background-image: var(--pk-btn-sheen); color: var(--pk-ink); border: 0; padding: 0.8rem 1.5rem; box-shadow: var(--pk-btn-shadow); } .wp-block-button.paletko-btn-try > .wp-block-button__link:hover, .wp-block-button.is-style-outline > .wp-block-button__link:hover { background-color: var(--pk-btn-glass-hover); color: var(--pk-ink); filter: none; } .wp-block-button.paletko-btn-try > .wp-block-button__link::after { content: "→"; display: inline-block; margin-left: 0.55rem; color: var(--pk-honey-text); transition: transform 0.2s; } .wp-block-button.paletko-btn-try > .wp-block-button__link:hover::after { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .wp-element-button, .wp-block-button__link { transition: none; } .wp-element-button:hover, .wp-block-button__link:hover { transform: none; } } /* ---------- header: frosted chrome ---------- */ /* sticky on the template-part wrapper: a sticky element only sticks within its parent */ .paletko-header-part { position: sticky; top: 0; z-index: 50; } .admin-bar .paletko-header-part { top: 32px; } @media (max-width: 782px) { .admin-bar .paletko-header-part { top: 46px; } } .paletko-header { position: relative; margin: 0; background-color: var(--pk-header); background-image: var(--pk-sheen-top); -webkit-backdrop-filter: var(--pk-blur); backdrop-filter: var(--pk-blur); box-shadow: var(--pk-glass-rim), 0 1px 0 var(--pk-glass-ring), 0 10px 28px -18px rgba(22, 30, 46, 0.35); } .paletko-header p { margin: 0; } /* wpautop around the shortcode */ .paletko-skip { position: absolute; left: -9999px; top: 0; background: var(--pk-ink); color: var(--pk-page); padding: 0.5rem 1rem; z-index: 100; } .paletko-skip:focus { left: 1rem; top: 0.5rem; } .paletko-header-inner { max-width: var(--wp--style--global--wide-size); margin: 0 auto; min-height: var(--pk-header-h); display: flex; align-items: center; gap: 1.5rem; padding-inline: 1rem; } .paletko-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--pk-ink); text-decoration: none; margin-right: auto; } .paletko-brand img { width: 40px; height: 44px; } .paletko-brand:hover { color: var(--pk-ink); } .paletko-nav { display: flex; align-items: center; gap: 1.25rem; } .paletko-nav-links, .paletko-langs { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; } .paletko-nav-links a { color: var(--pk-ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; } .paletko-nav-links a:hover { color: var(--pk-honey-text); } .paletko-langs { gap: 0.25rem; font-size: 0.85rem; font-weight: 600; } .paletko-langs a, .paletko-langs span { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 999px; text-decoration: none; } .paletko-langs a { color: var(--pk-muted); } .paletko-langs a:hover { color: var(--pk-ink); background: var(--pk-btn-glass-hover); } .paletko-langs span { color: var(--pk-ink); background: var(--pk-chip-sheen), var(--pk-btn-glass); box-shadow: inset 0 0 0 1px var(--pk-line); } /* light/dark toggle (shown by site.js) */ .paletko-theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--pk-r-m); cursor: pointer; color: var(--pk-ink); background-color: var(--pk-btn-glass); background-image: var(--pk-btn-sheen); box-shadow: var(--pk-btn-shadow); } .paletko-theme-toggle:hover { background-color: var(--pk-btn-glass-hover); } .paletko-theme-toggle[hidden] { display: none; } /* until site.js shows it */ .paletko-theme-toggle .pk-sun { display: none; } .paletko-theme-toggle[aria-pressed="true"] .pk-sun { display: inline; } .paletko-theme-toggle[aria-pressed="true"] .pk-moon { display: none; } .paletko-nav-cta.wp-element-button { padding: 0.55rem 1.1rem; font-size: 0.95rem; text-decoration: none; white-space: nowrap; } .paletko-menu-button { display: none; } @media (max-width: 1100px) { /* six menu links + languages + toggle + button need ~1100px */ .paletko-menu-button { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; cursor: pointer; border-radius: var(--pk-r-m); padding: 0 11px; } .paletko-menu-button span { display: block; height: 2px; background: var(--pk-ink); border-radius: 2px; } .paletko-menu-button:hover { background: var(--pk-btn-glass-hover); box-shadow: var(--pk-btn-shadow); } .paletko-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem 1rem 1.5rem; background-color: var(--pk-page); background-image: var(--pk-sheen), linear-gradient(var(--pk-frost), var(--pk-frost)), var(--pk-mesh); box-shadow: 0 1px 0 var(--pk-glass-ring), 0 24px 40px -20px rgba(22, 30, 46, 0.35); } .paletko-menu-toggle:checked ~ .paletko-nav { display: flex; } .paletko-nav-links { flex-direction: column; gap: 0; } .paletko-nav-links a { display: block; padding: 0.7rem 0.25rem; border-bottom: var(--pk-border); font-size: 1.05rem; } .paletko-theme-toggle { align-self: flex-start; } .paletko-nav-cta.wp-element-button { text-align: center; padding: 0.8rem; } } /* ---------- shared section pieces ---------- */ .paletko-section { padding-block: var(--wp--preset--spacing--60); margin-block: 0 !important; } .paletko-section-head { text-align: center; margin-bottom: var(--wp--preset--spacing--50); } .paletko-section-head > * { margin-inline: auto; } .paletko-section-head h2 { max-width: 22ch; margin-top: 0.5rem; } .paletko-lead { font-size: var(--wp--preset--font-size--large); color: var(--pk-muted); max-width: 60ch; } .paletko-grid { gap: 1.25rem; } /* glass card: translucent white over the page mesh, diagonal sheen, bright rim, two-layer shadow */ /* every box is glass: a clear fill, the page blurred behind it, a bright rim on top */ .paletko-card, .paletko-fact, .paletko-faq-item, .paletko-form { -webkit-backdrop-filter: var(--pk-blur); backdrop-filter: var(--pk-blur); } .paletko-card { background: var(--pk-sheen), var(--pk-glass); border: 0; border-radius: var(--pk-r-l); box-shadow: var(--pk-depth-1); padding: 1.6rem; } .paletko-card > * { margin-block: 0; } .paletko-card > * + * { margin-top: 0.6rem; } .paletko-card h3 { font-size: 1.1rem; } .paletko-features .paletko-card, .paletko-audience .paletko-card, .paletko-int-card { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .paletko-features .paletko-card:hover, .paletko-audience .paletko-card:hover, .paletko-int-card:hover { transform: translateY(-2px); box-shadow: var(--pk-depth-2); } .paletko-card p { color: var(--pk-muted); font-size: 0.97rem; } .paletko-icon { margin: 0 0 1rem !important; } .paletko-icon img { width: 48px; height: 48px; padding: 11px; border-radius: 12px; background: var(--pk-chip-sheen), var(--pk-icon-tile); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px var(--pk-glass-ring), 0 4px 10px -4px rgba(22, 30, 46, 0.2); box-sizing: border-box; } .paletko-checks { list-style: none; padding-left: 0; } .paletko-checks li { position: relative; padding-left: 1.9rem; margin-block: 0.55rem; } .paletko-checks li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241A0E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.8rem no-repeat, var(--pk-btn-primary-sheen), var(--pk-honey); box-shadow: inset 0 0 0 1px rgba(140, 88, 8, 0.25); } /* ---------- hero: centered copy (industry pages: then the app screen) ---------- */ .paletko-hero { position: relative; overflow: hidden; text-align: center; padding-block: clamp(3rem, 7vw, 6rem) 0; background: transparent; } /* faint floor grid, like the marked-out floor of a warehouse; fades out towards the screen */ .paletko-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--pk-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--pk-grid-line) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%); pointer-events: none; } .paletko-hero:not(:has(.paletko-hero-visual)) { padding-bottom: clamp(3rem, 7vw, 6rem); } .paletko-hero > * { position: relative; } .paletko-hero-text > * { margin-inline: auto; } .paletko-hero h1 { margin-block: 1.1rem 1.25rem; max-width: 18ch; } .paletko-hero .paletko-lead { max-width: 56ch; } .paletko-hero .wp-block-buttons { justify-content: center; margin-top: 2rem; } .paletko-hero-visual { position: relative; margin-top: clamp(3rem, 6vw, 4.5rem) !important; } .paletko-hero-shot { margin: 0 !important; } /* screenshots sit in a glass bezel: deepest shadow, 16px corners, a 1px inner rim drawn over the image */ .paletko-hero-shot img { display: block; width: 100%; border-radius: var(--pk-r-l) var(--pk-r-l) 0 0; box-shadow: var(--pk-depth-3); outline: 1px solid rgba(255, 255, 255, 0.55); outline-offset: -1px; } .paletko-try-hint { margin-top: 0.9rem !important; font-size: 0.92rem; color: var(--pk-muted); } /* ---------- facts: four glass tiles on the page, then the conveyor band ---------- */ .paletko-facts { position: relative; color: var(--pk-muted); padding-block: clamp(2.25rem, 5vw, 3.25rem); } .paletko-facts .paletko-grid { gap: 1.25rem; } @media (min-width: 900px) { .paletko-facts .paletko-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .paletko-fact { position: relative; padding: 1.25rem 1.4rem; border-radius: var(--pk-r-l); background: var(--pk-sheen), var(--pk-glass); box-shadow: var(--pk-depth-1); } .paletko-fact::before { /* a short honey bar: the one accent */ content: ""; position: absolute; left: 1.4rem; top: 0; width: 2rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--pk-honey); } .paletko-fact > * { margin: 0; } .paletko-fact-value { color: var(--pk-ink); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .paletko-fact-label { margin-top: 0.35rem !important; font-size: 0.95rem; } /* ---------- before / after ---------- */ .paletko-compare-cols { gap: 1.5rem !important; align-items: stretch !important; } .paletko-compare-cols > .wp-block-column { display: flex; } .paletko-compare-cols .paletko-card { flex: 1; padding: 2rem; } .paletko-compare-before { background: transparent; box-shadow: none; border: 1.5px dashed var(--pk-line); } .paletko-compare-before h3 { color: var(--pk-muted); } .paletko-compare-before li { color: var(--pk-muted); } .paletko-compare-after { box-shadow: var(--pk-depth-2), inset 0 0 0 1.5px rgba(224, 168, 60, 0.55); } .paletko-compare-cols li { font-size: 1.02rem; } .paletko-crosses { list-style: none; padding-left: 0; } .paletko-crosses li { position: relative; padding-left: 1.9rem; margin-block: 0.55rem; } .paletko-crosses li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736A62' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 0.7rem no-repeat, var(--pk-btn-glass); box-shadow: inset 0 0 0 1px var(--pk-line); } /* ---------- dark bands: clear dark glass over the page (tour, scanner app, industry CTA, footer) ---------- */ .paletko-tour, .paletko-mobile, .paletko-industry-cta, .paletko-footer { background-color: var(--pk-band-tint); background-image: var(--pk-band-sheen), var(--pk-band-mesh); -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.04); backdrop-filter: blur(24px) saturate(200%) brightness(1.04); box-shadow: inset 0 1px 0 rgba(235, 242, 255, 0.22), inset 0 -1px 0 rgba(235, 242, 255, 0.06); color: var(--pk-band-ink); --pk-muted: var(--pk-band-ink-2); --pk-ink: var(--pk-band-ink); --pk-honey-text: #f4cf86; --pk-line: rgba(200, 218, 255, 0.14); } /* soft coloured light under the dark glass (still: no animation) */ .paletko-tour, .paletko-mobile, .paletko-industry-cta, .paletko-footer, .paletko-bento .is-dark { position: relative; isolation: isolate; overflow: hidden; } .paletko-tour::before, .paletko-mobile::before, .paletko-industry-cta::before, .paletko-footer::before, .paletko-bento .is-dark::before { content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side at 28% 32%, hsla(212, 75%, 52%, 0.16), transparent), radial-gradient(closest-side at 72% 28%, hsla(258, 60%, 60%, 0.12), transparent), radial-gradient(closest-side at 62% 72%, hsla(38, 90%, 58%, 0.08), transparent), radial-gradient(closest-side at 30% 74%, hsla(188, 65%, 46%, 0.11), transparent); } .paletko-bento .is-dark::before { inset: -60%; } /* ---------- product tour (tabs built by assets/js/site.js) ---------- */ .paletko-tour { overflow: hidden; /* screenshot shadows stay inside the band */ } .paletko-tour h2, .paletko-tour h3 { color: var(--pk-band-ink); } .paletko-tour .paletko-lead { color: var(--pk-band-ink-2); } .paletko-tour-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: var(--wp--style--global--wide-size); margin: 0 auto 2rem !important; } .paletko-tour-tabbtn { font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; padding: 0.6rem 1.15rem; border-radius: 999px; border: 0; background: transparent; color: var(--pk-band-ink-2); box-shadow: inset 0 0 0 1px var(--pk-band-ring); transition: background 0.2s, color 0.2s, box-shadow 0.2s; } .paletko-tour-tabbtn:hover { color: var(--pk-band-ink); background: rgba(200, 218, 255, 0.07); } /* the open tab: a raised glass pill with a honey underline, not a yellow fill */ .paletko-tour-tabbtn[aria-selected="true"] { color: var(--pk-band-ink); background: linear-gradient(180deg, rgba(210, 225, 255, 0.16), rgba(210, 225, 255, 0.05)), var(--pk-band-glass); box-shadow: var(--pk-band-rim), inset 0 0 0 1px rgba(200, 218, 255, 0.16), inset 0 -2px 0 var(--pk-honey), 0 6px 16px -6px rgba(0, 0, 0, 0.6); } .paletko-tour-tabbtn:focus-visible { outline: 2px solid var(--pk-band-ink); outline-offset: 3px; } .paletko-tour-steps > .paletko-tour-step + .paletko-tour-step { margin-top: 4rem; } /* no-JS: stacked */ .paletko-tour-steps.is-tabbed > .paletko-tour-step + .paletko-tour-step { margin-top: 0; } .paletko-tour-step[hidden] { display: none !important; } .paletko-tour-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .paletko-tour-steps.is-tabbed .paletko-tour-step:not([hidden]) { animation: pk-fade 0.35s ease-out; } .paletko-tour-copy > * { margin-block: 0; } .paletko-tour-copy > * + * { margin-top: 0.9rem; } .paletko-tour-copy p { color: var(--pk-band-ink-2); } .paletko-tour-copy .paletko-checks li { color: var(--pk-band-ink); } .paletko-tour-tab { display: none; } /* used as the tab label */ .paletko-tour-steps:not(.is-tabbed) .paletko-tour-tab { display: block; color: #f4cf86 !important; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; } .paletko-tour-shot { margin: 0 !important; } .paletko-tour-shot img, .paletko-hero-shot img { cursor: zoom-in; } .paletko-tour-shot img { display: block; width: 100%; border-radius: var(--pk-r-l); box-shadow: inset 0 1px 0 rgba(205, 222, 255, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4), 0 32px 72px -18px rgba(0, 0, 0, 0.85); outline: 1px solid rgba(255, 255, 255, 0.4); outline-offset: -1px; } @keyframes pk-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- zoomed screenshot ---------- */ .paletko-zoom { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1600px); max-height: 94vh; overflow: visible; } .paletko-zoom::backdrop { background: var(--pk-scrim); -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%); } .paletko-zoom img { display: block; max-width: 100%; max-height: 94vh; border-radius: 14px; cursor: zoom-out; box-shadow: var(--pk-depth-3); } .paletko-zoom-close { position: absolute; top: -0.75rem; right: -0.75rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; color: var(--pk-ink); background: var(--pk-btn-sheen), var(--pk-glass-strong); box-shadow: var(--pk-depth-2); } /* ---------- reveal on scroll (classes added by site.js only) ---------- */ .pk-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .pk-reveal.is-in { opacity: 1; transform: none; } /* ---------- "Who it is for" dropdown (industry pages) ---------- */ .paletko-has-sub { position: relative; } .paletko-has-sub > a::after { content: " ▾"; font-size: 0.75em; color: var(--pk-muted); } .paletko-subnav { list-style: none; margin: 0; padding: 0.5rem; position: absolute; top: 100%; left: -0.75rem; min-width: 13rem; /* thick crystal: opaque frost over the page mesh, so nothing ghosts through the links */ background-color: var(--pk-page); background-image: var(--pk-sheen), linear-gradient(var(--pk-frost), var(--pk-frost)), var(--pk-mesh); background-attachment: scroll, scroll, fixed, fixed, fixed, fixed, fixed; border-radius: 12px; box-shadow: var(--pk-depth-3); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; z-index: 60; } .paletko-has-sub:hover > .paletko-subnav, .paletko-has-sub:focus-within > .paletko-subnav { opacity: 1; visibility: visible; transform: none; } .paletko-subnav a { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; white-space: nowrap; } .paletko-subnav a:hover { background: var(--pk-btn-glass-hover); box-shadow: inset 0 0 0 1px var(--pk-glass-ring); } @media (max-width: 1100px) { .paletko-subnav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 1rem; min-width: 0; background: transparent; } .paletko-has-sub > a::after { content: ""; } } /* "Learn more" link on the audience cards */ .paletko-more { margin-top: 0.9rem !important; } .paletko-more a { font-weight: 700; color: var(--pk-ink); text-decoration-color: var(--pk-honey); text-decoration-thickness: 2px; text-underline-offset: 3px; } .paletko-more a::after { content: " →"; } /* ---------- industry landing pages ---------- */ .paletko-industry-hero h1 { max-width: 22ch; font-size: clamp(2rem, 4.2vw, 3.2rem); } .paletko-industry-pains { background: transparent; } @media (min-width: 900px) { .paletko-pains-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .paletko-industry-row { gap: clamp(1.5rem, 4vw, 3.5rem) !important; margin-block: 0 !important; } .paletko-industry-row + .paletko-industry-row { margin-top: clamp(2.5rem, 6vw, 4.5rem) !important; } .paletko-industry-row h3 { font-size: 1.45rem; } .paletko-industry-row .wp-block-column > p { color: var(--pk-muted); } .paletko-industry-row .paletko-tour-shot img { box-shadow: var(--pk-depth-3); outline-color: rgba(255, 255, 255, 0.55); } @media (min-width: 782px) { .paletko-industry-row.is-reversed { flex-direction: row-reverse; } } .paletko-industry-cta { text-align: center; } .paletko-industry-cta h2 { color: var(--pk-band-ink); } .paletko-industry-cta .paletko-lead { color: var(--pk-band-ink-2); margin-inline: auto; } .paletko-industry-cta .wp-block-buttons { justify-content: center; margin-top: 1.5rem; } .paletko-industry-cta .wp-block-button:not(.paletko-btn-try) .wp-block-button__link, .paletko-industry-cta .paletko-btn-try .wp-block-button__link { color: var(--pk-band-ink); background-color: rgba(200, 218, 255, 0.07); background-image: linear-gradient(180deg, rgba(210, 225, 255, 0.13) 0%, rgba(210, 225, 255, 0.05) 48%, rgba(210, 225, 255, 0) 100%); box-shadow: inset 0 1px 0 rgba(210, 225, 255, 0.14), inset 0 0 0 1px rgba(200, 218, 255, 0.16), 0 4px 10px -4px rgba(0, 0, 0, 0.5); border: 0; } /* the first button of the band stays the honey one */ .paletko-industry-cta .wp-block-button:first-child .wp-block-button__link { color: var(--pk-on-honey); background-color: var(--pk-honey); background-image: var(--pk-btn-primary-sheen); box-shadow: var(--pk-btn-primary-shadow); } .paletko-industry-cta .wp-block-button:first-child .wp-block-button__link::after { color: var(--pk-on-honey); } /* ---------- integrations ---------- */ .paletko-int-grid { margin-bottom: 2rem !important; } @media (min-width: 640px) { .paletko-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .paletko-int-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .paletko-int-card { padding: 1.8rem; } .paletko-int-name { color: var(--pk-ink) !important; font-size: 1.45rem !important; font-weight: 800; letter-spacing: -0.02em; } .paletko-int-more { background: transparent; box-shadow: none; border: 1.5px dashed var(--pk-line); } .paletko-int-more:hover { box-shadow: none !important; } .paletko-int-more .paletko-icon img { background: transparent; box-shadow: none; border: 1.5px dashed var(--pk-line); } .paletko-int-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 2rem; margin-inline: auto !important; } .paletko-int-points li { margin-block: 0.3rem; } /* ---------- flexibility ---------- */ .paletko-flex { background: transparent; } .paletko-flex-cols { gap: clamp(2rem, 5vw, 4rem) !important; } .paletko-flex-cols h2 { margin-block: 1rem; } .paletko-flex-grid { gap: 2rem 2.5rem; } .paletko-flex-item { position: relative; border-top: 1px solid var(--pk-line); padding-top: 1.1rem; } .paletko-flex-item::before { content: ""; position: absolute; left: 0; top: -2px; width: 2.5rem; height: 3px; border-radius: 3px; background: var(--pk-honey); } .paletko-flex-item > * { margin-block: 0; } .paletko-flex-item h3 { font-size: 1.12rem; } .paletko-flex-item p { margin-top: 0.5rem; color: var(--pk-muted); font-size: 0.97rem; } /* ---------- mobile app (dark band) ---------- */ .paletko-mobile { overflow: hidden; /* keep the phone's drop shadow inside the band */ } .paletko-mobile h2 { color: var(--pk-band-ink); } .paletko-mobile .paletko-lead { color: var(--pk-band-ink-2); } .paletko-phone-image { margin: 0; text-align: center; } .paletko-phone-image img { max-height: 560px; width: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55)); } /* ---------- pricing ---------- */ /* four plans span the full width of the "in every plan" box below (the core grid would leave a fifth, empty track) */ @media (min-width: 600px) { .paletko-pricing .paletko-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .paletko-pricing .paletko-price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .paletko-price-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem; box-shadow: var(--pk-depth-2); } .paletko-price-card::before { content: ""; position: absolute; left: 1.75rem; top: 0; width: 3rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--pk-honey); } .paletko-card .paletko-plan-name { font-size: 1.25rem; } .paletko-card .paletko-plan-users { margin-top: 0.25rem; font-weight: 600; color: var(--pk-ink); } .paletko-card .paletko-plan-price { margin-top: 1.25rem; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--pk-ink); } .paletko-card .paletko-plan-price.is-quote { font-size: 1.9rem; } .paletko-card .paletko-plan-per { margin-top: 0.35rem; font-size: 0.9rem; } .paletko-price-card .wp-block-list { margin-top: 1rem; padding-top: 1rem; border-top: var(--pk-border); } .paletko-price-card .wp-block-buttons { margin-top: auto; padding-top: 1.5rem; } .paletko-price-card .wp-block-button, .paletko-price-card .wp-block-button__link { width: 100%; text-align: center; } .paletko-price-included { margin-top: var(--wp--preset--spacing--40); padding: 1.75rem 2rem; } .paletko-price-included .paletko-checks { columns: 3 16rem; column-gap: 2rem; } .paletko-price-included .paletko-checks li { break-inside: avoid; margin-block: 0 0.7rem; } /* ---------- FAQ (core/details) ---------- */ .paletko-faq-list { display: grid; gap: 0.75rem; } .paletko-faq-item { margin: 0 !important; background: var(--pk-sheen-top), var(--pk-glass); border: 0; border-radius: var(--pk-r-l); box-shadow: var(--pk-depth-1); padding: 0; transition: box-shadow 0.2s; } .paletko-faq-item[open] { box-shadow: var(--pk-depth-2); } .paletko-faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 1.1rem 3.5rem 1.1rem 1.4rem; font-weight: 700; font-size: 1.05rem; border-radius: var(--pk-r-l); } .paletko-faq-item summary::-webkit-details-marker { display: none; } .paletko-faq-item summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; width: 1.7rem; height: 1.7rem; margin-top: -0.85rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; color: var(--pk-ink); background: var(--pk-btn-sheen), var(--pk-btn-glass); box-shadow: var(--pk-btn-shadow); transition: transform 0.2s; } .paletko-faq-item[open] summary::after { transform: rotate(45deg); } .paletko-faq-item summary:hover { color: var(--pk-honey-text); } .paletko-faq-item > p { margin: 0; padding: 0 1.4rem 1.25rem; color: var(--pk-muted); } .paletko-try { text-align: center; margin: -1rem auto 2rem !important; font-weight: 500; } .paletko-try a { font-weight: 700; color: var(--pk-ink); text-decoration-color: var(--pk-honey); text-decoration-thickness: 2px; text-underline-offset: 3px; } .paletko-try a::after { content: " →"; } /* ---------- "try it yourself" dialog (paletko-leads try.php): thick crystal ---------- */ .paletko-try-dialog { width: min(92vw, 520px); border: 0; border-radius: 18px; padding: 1.75rem 1.75rem 1.25rem; background-color: var(--pk-page); background-image: var(--pk-sheen), linear-gradient(var(--pk-frost), var(--pk-frost)), var(--pk-mesh); color: var(--pk-ink); box-shadow: var(--pk-depth-3); overflow: visible; } .paletko-try-dialog::backdrop { background: var(--pk-scrim); -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%); } .paletko-try-dialog h2 { font-size: 1.5rem; margin: 0 2rem 0.5rem 0; } .paletko-try-lead { color: var(--pk-muted); margin: 0 0 1.25rem; font-size: 0.97rem; } .paletko-try-dialog .paletko-form { grid-template-columns: 1fr; padding: 1.25rem; box-shadow: var(--pk-depth-1); } .paletko-try-dialog .paletko-form-notice { margin: 0 0 1rem; } .paletko-try-dialog select { font: inherit; color: inherit; padding: 0.7rem 0.85rem; border: 1px solid var(--pk-field-line); border-radius: var(--pk-r-m); background: var(--pk-field); width: 100%; } .paletko-try-dialog .pk-hint { font-size: 0.82rem; color: var(--pk-muted); } .paletko-try-dialog button[type="submit"] { justify-self: stretch; } .paletko-try-dialog button.is-busy { opacity: 0.75; cursor: progress; } .paletko-try-dialog button.is-busy::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.6rem; vertical-align: -0.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pk-spin 0.7s linear infinite; } @keyframes pk-spin { to { transform: rotate(360deg); } } .paletko-try-foot { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--pk-muted); text-align: center; } .paletko-try-foot a { color: var(--pk-honey-text); } /* progress scene while the demo is generated: a rack filling with cartons, the mascot lifting one */ .paletko-try-dialog.is-working .paletko-try-form, .paletko-try-dialog.is-working .paletko-form-notice, .paletko-try-dialog.is-working .paletko-try-lead { display: none; } .paletko-try-progress { text-align: center; padding: 0.5rem 0 0.75rem; } .pk-scene { display: flex; align-items: flex-end; justify-content: center; gap: 0.75rem; margin: 0.5rem 0 1.25rem; } .pk-scene-mascot { width: min(92px, 22vw); height: auto; flex-shrink: 0; } .pk-rack { width: min(230px, 58vw); height: auto; overflow: visible; } .pk-post { fill: #2E5DA6; } .pk-beam { fill: #E08A1E; } .pk-box rect { fill: #C98A4B; stroke: #2A2018; stroke-width: 1.6; } .pk-box path { stroke: #8A5A2B; stroke-width: 2; fill: none; } .pk-box { transform-box: fill-box; opacity: 0; animation: pk-drop 6s cubic-bezier(.3, .7, .4, 1) infinite; animation-delay: calc(var(--i) * 0.32s); } @keyframes pk-drop { 0% { opacity: 0; transform: translateY(-70px); } 5% { opacity: 1; } 9% { transform: translateY(0); } 12% { transform: translateY(-6px); } 15% { transform: translateY(0); } 86% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } .pk-step { font-weight: 700; font-size: 1.05rem; min-height: 1.6em; margin: 0 0 0.9rem; transition: opacity 0.25s; } .pk-step.is-fading { opacity: 0; } .pk-bar { height: 8px; border-radius: 999px; background: var(--pk-btn-glass); box-shadow: inset 0 1px 2px rgba(22, 30, 46, 0.12), inset 0 0 0 1px var(--pk-glass-ring); overflow: hidden; max-width: 320px; margin: 0 auto; } .pk-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--pk-btn-primary-sheen), var(--pk-honey); animation: pk-progress 9s cubic-bezier(.15, .8, .3, 1) forwards; } @keyframes pk-progress { to { width: 92%; } } @media (prefers-reduced-motion: reduce) { .pk-box { animation: none; opacity: 1; } .pk-bar span { animation: none; width: 60%; } } /* ---------- demo form (rendered by the paletko-leads plugin) ---------- */ .paletko-demo { background: transparent; } /* forms stay opaque and readable: strong glass, white fields with a hairline border */ .paletko-form { max-width: 720px; margin-inline: auto; background: var(--pk-sheen), var(--pk-glass-strong); border: 0; border-radius: var(--pk-r-l); box-shadow: var(--pk-depth-2); padding: clamp(1.25rem, 4vw, 2.25rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; } .paletko-form .pk-field { display: flex; flex-direction: column; gap: 0.35rem; } .paletko-form .pk-wide { grid-column: 1 / -1; } .paletko-form label { font-weight: 600; font-size: 0.92rem; } .paletko-form .pk-req { color: var(--pk-error-text); } .paletko-form input[type="text"], .paletko-form input[type="email"], .paletko-form input[type="tel"], .paletko-form textarea { font: inherit; color: inherit; padding: 0.7rem 0.85rem; border: 1px solid var(--pk-field-line); border-radius: var(--pk-r-m); background: var(--pk-field); width: 100%; box-sizing: border-box; box-shadow: inset 0 1px 2px rgba(22, 30, 46, 0.05); } .paletko-form input:focus, .paletko-form textarea:focus { border-color: var(--pk-honey); outline: 3px solid rgba(224, 168, 60, 0.35); outline-offset: 0; } .paletko-form textarea { min-height: 120px; resize: vertical; } .paletko-form .pk-consent { display: flex; flex-direction: row; align-items: flex-start; gap: 0.6rem; font-weight: 400; font-size: 0.9rem; color: var(--pk-muted); } .paletko-form .pk-consent input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--pk-honey); } .paletko-form .pk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .paletko-form button { border: 0; cursor: pointer; font: inherit; font-weight: 600; justify-self: start; } .paletko-form .pk-error { color: var(--pk-error-text); font-size: 0.85rem; } .paletko-form [aria-invalid="true"] { border-color: var(--pk-error) !important; } .paletko-form-notice { max-width: 720px; margin: 0 auto 1.25rem; padding: 1rem 1.25rem; border-radius: 12px; font-weight: 500; background: var(--pk-sheen-top), var(--pk-glass-strong); } .paletko-form-notice.is-success { color: var(--pk-success-text); box-shadow: var(--pk-depth-1), inset 3px 0 0 var(--pk-success); } .paletko-form-notice.is-error { color: var(--pk-error-text); box-shadow: var(--pk-depth-1), inset 3px 0 0 var(--pk-error); } @media (max-width: 640px) { .paletko-form { grid-template-columns: 1fr; } .paletko-form button { justify-self: stretch; } } /* ---------- footer (dark band) ---------- */ .paletko-footer { padding: var(--wp--preset--spacing--50) 1rem 1.5rem; margin-top: 0 !important; font-size: 0.95rem; color: var(--pk-band-ink-2); box-shadow: inset 0 1px 0 rgba(205, 222, 255, 0.1); } .paletko-footer p { margin: 0; } .paletko-footer a { color: var(--pk-band-ink); text-decoration: none; } .paletko-footer a:hover { color: #f4cf86; } .paletko-footer .paletko-brand { color: var(--pk-band-ink); margin-bottom: 0.75rem; } .paletko-footer-inner { max-width: var(--wp--style--global--wide-size); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 2rem 3rem; } .paletko-footer-brand { flex: 2 1 16rem; } .paletko-footer-col { flex: 1 1 10rem; } .paletko-footer h2 { color: var(--pk-band-ink); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.75rem; } .paletko-footer-col ul:not(.paletko-langs) { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; } .paletko-footer .paletko-langs span { color: var(--pk-band-ink); background: rgba(200, 218, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(200, 218, 255, 0.16); } .paletko-footer .paletko-langs a { color: var(--pk-band-ink-2); } .paletko-footer .paletko-langs a:hover { background: rgba(200, 218, 255, 0.08); color: var(--pk-band-ink); } .paletko-copy { max-width: var(--wp--style--global--wide-size); margin: 2.5rem auto 0 !important; padding-top: 1.25rem; border-top: 1px solid rgba(200, 218, 255, 0.12); font-size: 0.85rem; } @media (max-width: 760px) { .paletko-footer-inner { gap: 1.5rem; } } /* ---------- 404 ---------- */ .paletko-404 { text-align: center; min-height: 50vh; } .paletko-404 .wp-element-button { display: inline-block; text-decoration: none; margin-top: 1rem; } /* ---------- small screens ---------- */ @media (max-width: 781px) { .paletko-tour-step { grid-template-columns: 1fr; } .paletko-tour-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem !important; padding: 2px 1rem 6px; scrollbar-width: none; } .paletko-tour-tabbtn { white-space: nowrap; } .paletko-hero { text-align: left; } .paletko-int-points { justify-content: flex-start; } .paletko-hero-text > * { margin-inline: 0; } .paletko-hero .wp-block-buttons { justify-content: flex-start; } .paletko-hero-visual { margin-top: 5.5rem !important; } .paletko-mobile .wp-block-column:first-child { order: 2; } .paletko-phone-image img { max-height: 420px; } .paletko-section-head { text-align: left; } .paletko-section-head > * { margin-inline: 0; } } /* ===================================================================== "Less boxy" pass (2026-10-06), re-skinned for Crystal: tilted hero with floating glass labels, a smoked conveyor band, a bento feature grid, slanted dark sections and bin-label eyebrows. ===================================================================== */ /* ---------- bin-label eyebrows: "A-01 · FEATURES" with a little barcode, numbered per page ---------- */ .paletko-main { counter-reset: pk-bin; } .paletko-eyebrow { counter-increment: pk-bin; display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.28rem 0.8rem 0.28rem 0.3rem; border-radius: 999px; background: var(--pk-sheen-top), var(--pk-glass-strong); box-shadow: var(--pk-glass-rim), 0 0 0 1px var(--pk-glass-ring), 0 4px 12px -6px rgba(22, 30, 46, 0.25); color: var(--pk-ink); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .paletko-eyebrow::before { content: "A-" counter(pk-bin, decimal-leading-zero); padding: 0.14rem 0.5rem; border-radius: 999px; background: hsl(225, 12%, 14%); color: #ebb95a; font-weight: 800; letter-spacing: 0.04em; box-shadow: inset 0 1px 0 rgba(205, 222, 255, 0.16); } .paletko-eyebrow::after { content: ""; width: 30px; height: 13px; opacity: 0.7; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 3px, currentColor 3px 4px, transparent 4px 6px, currentColor 6px 9px, transparent 9px 10px, currentColor 10px 11px, transparent 11px 13px); } .paletko-tour .paletko-eyebrow, .paletko-mobile .paletko-eyebrow, .paletko-industry-cta .paletko-eyebrow { background: linear-gradient(180deg, rgba(210, 225, 255, 0.12), rgba(210, 225, 255, 0) 70%), var(--pk-band-glass); box-shadow: var(--pk-band-rim), inset 0 0 0 1px rgba(200, 218, 255, 0.14), 0 6px 16px -8px rgba(0, 0, 0, 0.6); color: var(--pk-band-ink); } .paletko-tour .paletko-eyebrow::before, .paletko-mobile .paletko-eyebrow::before { background: rgba(0, 0, 0, 0.35); } /* ---------- hero: screen tilted in 3D (site.js flattens it while scrolling) ---------- */ .paletko-hero-visual { perspective: 1800px; } .paletko-hero-shot { transform-origin: 50% 100%; transform: rotateX(var(--pk-tilt, 0deg)); will-change: transform; } /* ---------- bento features ---------- */ .paletko-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(11.5rem, auto); grid-auto-flow: dense; gap: 1.25rem; } .paletko-bento .paletko-card { display: flex; flex-direction: column; overflow: hidden; position: relative; } .paletko-bento .is-big { grid-column: span 2; grid-row: span 2; } .paletko-bento .is-tall { grid-row: span 2; } .paletko-bento .is-wide { grid-column: span 2; } .paletko-bento .is-strip { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(12rem, 1fr) 2fr; align-items: center; gap: 1.5rem; } .paletko-bento .is-strip > * + * { margin-top: 0; } .paletko-bento .is-strip .paletko-icon { margin: 0 !important; } .paletko-bento .is-big h3 { font-size: 1.5rem; } .paletko-bento .paletko-bento-image { margin: auto -1.6rem -1.6rem 1.6rem !important; padding-top: 1.25rem; } .paletko-bento .is-big .paletko-bento-image img { border-radius: 12px 0 0 0; box-shadow: var(--pk-glass-rim), 0 0 0 1px var(--pk-glass-ring), -10px -10px 30px -8px rgba(22, 30, 46, 0.18); } /* the scanner card: smoked glass */ .paletko-bento .is-dark { background-color: var(--pk-band-tint); background-image: var(--pk-band-sheen), var(--pk-band-mesh); -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(1.04); backdrop-filter: blur(24px) saturate(200%) brightness(1.04); box-shadow: inset 0 1px 0 rgba(235, 242, 255, 0.24), inset 1px 0 0 rgba(235, 242, 255, 0.06), inset -1px 0 0 rgba(235, 242, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(22, 30, 46, 0.1), 0 18px 40px -16px rgba(22, 30, 46, 0.45); } .paletko-bento .is-dark h3 { color: var(--pk-band-ink); } .paletko-bento .is-dark p { color: var(--pk-band-ink-2); } .paletko-bento .is-dark .paletko-bento-image { margin: auto 0 -3.5rem !important; text-align: center; } .paletko-bento .is-dark .paletko-bento-image img { width: 62%; transform: rotate(-6deg); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)); } /* the orders board card: clear glass with a honey edge light (was a yellow fill) */ .paletko-bento .is-wheat { box-shadow: var(--pk-depth-1), inset 0 3px 0 var(--pk-honey); } .paletko-bento .is-wheat:hover { box-shadow: var(--pk-depth-2), inset 0 3px 0 var(--pk-honey); } @media (max-width: 1000px) { .paletko-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .paletko-bento .is-strip { grid-template-columns: auto 1fr; } .paletko-bento .is-strip p { grid-column: 1 / -1; } } @media (max-width: 640px) { .paletko-bento { grid-template-columns: 1fr; } .paletko-bento .is-big, .paletko-bento .is-wide, .paletko-bento .is-tall { grid-column: auto; grid-row: auto; } .paletko-bento .is-dark .paletko-bento-image img { width: 45%; } } /* ---------- slanted dark sections ---------- */ .paletko-tour, .paletko-mobile { padding-block: calc(var(--wp--preset--spacing--60) + 3.5vw) !important; } .paletko-tour { clip-path: polygon(0 3.5vw, 100% 0, 100% calc(100% - 3.5vw), 0 100%); --pk-slant: 178deg; } .paletko-mobile { clip-path: polygon(0 0, 100% 3.5vw, 100% 100%, 0 calc(100% - 3.5vw)); --pk-slant: 182deg; } .paletko-tour, .paletko-mobile { box-shadow: none; background-image: linear-gradient(var(--pk-slant), transparent calc(3.5vw - 0.5px), rgba(240, 245, 255, 0.42) 3.5vw, rgba(240, 245, 255, 0.1) calc(3.5vw + 1.5px), rgba(240, 245, 255, 0.04) calc(3.5vw + 3rem), transparent calc(3.5vw + 9rem)), linear-gradient(var(--pk-slant), transparent calc(100% - 3.5vw - 2px), rgba(240, 245, 255, 0.14) calc(100% - 3.5vw - 0.5px), transparent calc(100% - 3.5vw)), var(--pk-band-sheen), var(--pk-band-mesh); } @media (prefers-reduced-motion: reduce) { .paletko-hero-shot { transform: none; } .pk-reveal { opacity: 1; transform: none; transition: none; } .paletko-features .paletko-card, .paletko-audience .paletko-card, .paletko-int-card { transition: none; } .paletko-features .paletko-card:hover, .paletko-audience .paletko-card:hover, .paletko-int-card:hover { transform: none; } } /* visually hidden, still read by screen readers (aria-label isn't allowed on a