/* * epily·SYS·tems — theme CSS * * Design tokens (χρώματα oklch, ονόματα utility) αντιγραμμένα αυτούσια από * το src/styles.css του αρχικού Lovable/React design, ώστε η μετατροπή σε * WordPress να είναι όσο πιο πιστή γίνεται στο πρωτότυπο. Το layout/CSS * είναι χειρόγραφο (χωρίς Tailwind build step) — semantic class names ανά * section, ίδια λογική με tekton-domi/meandros/assets/css. */ /* ---------- Design tokens ---------- */ :root { --radius: 0.5rem; --background: oklch(0.975 0.004 240); --foreground: oklch(0.333 0.062 246.5); --card: oklch(1 0 0); --card-foreground: oklch(0.129 0.042 264.695); --primary: oklch(0.333 0.062 246.5); --primary-foreground: oklch(0.975 0.004 240); --secondary: oklch(0.968 0.007 247.896); --muted: oklch(0.945 0.007 235); --muted-foreground: oklch(0.53 0.035 246); --accent: oklch(0.679 0.125 174.5); --border: oklch(0.333 0.062 246.5 / 12%); --input: oklch(0.333 0.062 246.5 / 18%); --ring: oklch(0.679 0.125 174.5); --signal: oklch(0.682 0.168 58.5); --signal-foreground: oklch(1 0 0); --teal: oklch(0.679 0.125 174.5); --canvas: oklch(0.975 0.004 240); --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); text-rendering: optimizeLegibility; line-height: 1.5; } h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; } p { margin: 0; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; outline-offset: 4px; } button { font: inherit; } ul { margin: 0; padding: 0; list-style: none; } .text-teal { color: var(--teal); } .text-signal { color: var(--signal); } .text-muted { color: var(--muted-foreground); } .text-foreground { color: var(--foreground); } .text-canvas { color: var(--canvas); } .text-canvas-40 { color: color-mix(in oklab, var(--canvas) 40%, transparent); } .relative { position: relative; } .text-center { text-align: center; } .container { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; } .container-narrow { max-width: 64rem; } @media (min-width: 640px) { .container { padding-inline: 2rem; } } .section { padding-block: 5rem; } .section-lg { padding-block: 7rem; } @media (min-width: 640px) { .section { padding-block: 6rem; } .section-lg { padding-block: 7rem; } } .section-card { background: var(--card); } .eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .wordmark { font-family: var(--font-display); font-size: 1.12rem; font-weight: 400; white-space: nowrap; } .wordmark strong { font-weight: 700; } .wordmark-dot { color: var(--teal); padding-inline: 0.12rem; } .text-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--teal); transition: gap 180ms ease; } .text-link:hover { gap: 0.75rem; } .surface-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: 0 18px 55px color-mix(in oklab, var(--foreground) 6%, transparent); } .prose-text, .prose-content { line-height: 2rem; color: var(--muted-foreground); } /* ---------- Network / node decoration ---------- */ .network-field { position: absolute; inset: 0; opacity: .42; pointer-events: none; overflow: hidden; } .node { position: absolute; width: .72rem; height: .72rem; border-radius: 999px; background: var(--teal); box-shadow: 0 0 0 7px color-mix(in oklab, var(--teal) 12%, transparent); animation: node-pulse 4s ease-in-out infinite; } .node-a { top: 18%; right: 22%; } .node-b { top: 52%; right: 8%; background: var(--signal); animation-delay: 1s; } .node-c { bottom: 12%; right: 34%; animation-delay: 2s; } .network-line { position: absolute; right: 10%; height: 1px; transform-origin: right center; background: color-mix(in oklab, var(--teal) 45%, transparent); } .line-a { top: 28%; width: 34%; transform: rotate(18deg); } .line-b { top: 48%; width: 28%; transform: rotate(-34deg); } .line-c { bottom: 24%; width: 40%; transform: rotate(12deg); } @keyframes node-pulse { 50% { transform: scale(1.3); opacity: .55; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: background-color 150ms ease, color 150ms ease; height: 2.25rem; padding-inline: 1rem; } .btn svg { width: 1rem; height: 1rem; flex-shrink: 0; } .btn-signal { background: var(--signal); color: var(--signal-foreground); box-shadow: 0 10px 28px color-mix(in oklab, var(--signal) 24%, transparent); } .btn-signal:hover { background: color-mix(in oklab, var(--signal) 90%, black); } .btn-hero-outline { border: 1px solid color-mix(in oklab, var(--canvas) 20%, transparent); background: transparent; color: var(--canvas); } .btn-hero-outline:hover { background: color-mix(in oklab, var(--canvas) 10%, transparent); } .btn-outline { border: 1px solid var(--input); background: var(--background); color: var(--foreground); } .btn-outline:hover { background: var(--muted); } .btn-lg { height: 3rem; border-radius: var(--radius-sm); padding-inline: 1.75rem; font-size: 0.95rem; } .btn-sm { height: 2rem; padding-inline: 0.75rem; font-size: 0.8rem; } /* ---------- Notice banner ("Υπό κατασκευή" — inc/customizer-contact.php) ---------- */ .site-notice-banner { background: var(--signal); color: var(--signal-foreground); } .site-notice-banner-inner { max-width: 80rem; margin-inline: auto; padding: 0.6rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.6rem; text-align: center; font-size: 0.8125rem; line-height: 1.4; } @media (min-width: 640px) { .site-notice-banner-inner { padding-inline: 2rem; } } .site-notice-banner-icon { flex-shrink: 0; } .site-notice-banner-links { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; white-space: nowrap; } .site-notice-banner-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .site-notice-banner-links a:hover { text-decoration: none; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--background) 90%, transparent); backdrop-filter: blur(20px); } .site-header-inner { max-width: 80rem; margin-inline: auto; height: 4.5rem; display: flex; align-items: center; justify-content: space-between; padding-inline: 1.25rem; } @media (min-width: 640px) { .site-header-inner { padding-inline: 2rem; } } .brand-link { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .brand-mark { height: 3.5rem; width: auto; flex-shrink: 0; } .brand-mark-invert { filter: brightness(0) invert(1); } /* Προαιρετικό slogan δίπλα στο λογότυπο (Customizer → Στοιχεία ιστότοπου — πόρτο του "Site Identity" του tekton-domi, βλ. inc/customizer-contact.php). */ .brand-slogan { font-family: var(--font-display); font-size: 0.75rem; line-height: 1.3; font-weight: 500; color: color-mix(in oklab, var(--foreground) 65%, transparent); white-space: nowrap; } .brand-slogan-invert { color: color-mix(in oklab, var(--canvas) 70%, transparent); } .primary-nav { display: none; align-items: center; gap: 1.75rem; } @media (min-width: 768px) { .primary-nav { display: flex; } } /* Το wp_nav_menu() βγάζει
  • στοιχεία χωρίς περιτύλιγμα