/* ===================================================================== ASK Network — Design Token System --------------------------------------------------------------------- Brand tokens are the single source of truth. Per-city accent is switched via [data-city="..."] on the element. ===================================================================== */ :root { /* Core brand */ --ink: #14233F; --paper: #F7F5F0; --brand: #14233F; /* overridden per city below */ --on-brand: #F7F5F0; /* text/icon color on top of --brand */ /* Derived surfaces */ --surface: #FFFFFF; --surface-alt: #EFECE4; --line: rgba(20, 35, 63, 0.14); --line-strong: rgba(20, 35, 63, 0.28); --muted: rgba(20, 35, 63, 0.62); /* Geometry */ --radius-sm: 10px; --radius: 18px; --radius-lg: 24px; --shadow: 0 16px 48px rgba(20, 35, 63, 0.10); --shadow-lg: 0 28px 80px rgba(20, 35, 63, 0.16); /* Type */ --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* City accents -------------------------------------------------------- */ [data-city="achaia"] { --brand: #C25A3A; --on-brand: #FFFFFF; } [data-city="patra"] { --brand: #1E6FA8; --on-brand: #FFFFFF; } [data-city="kalavryta"] { --brand: #2F6B4F; --on-brand: #FFFFFF; } [data-city="akrata"] { --brand: #8A7A2E; --on-brand: #FFFFFF; } /* ===================================================================== Base ===================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } button { cursor: pointer; } ::selection { background: var(--brand); color: var(--on-brand); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } .container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; } /* ===================================================================== Header & brand mark ( ask ● city ) ===================================================================== */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 22px; } .brand { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 22px; letter-spacing: -0.03em; line-height: 1; } .brand-ask { color: var(--ink); } .brand-node { color: var(--brand); margin: 0 0.35em; font-size: 0.85em; line-height: 1; transform: translateY(-0.05em); display: inline-block; } .brand-city { color: var(--brand); text-transform: lowercase; } .nav { display: flex; gap: 24px; color: var(--muted); font-size: 14px; font-weight: 500; } .nav a { padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .nav a:hover { color: var(--ink); border-bottom-color: var(--brand); } /* ===================================================================== Buttons ===================================================================== */ .nav-cta, .btn { border: 1px solid transparent; border-radius: 999px; padding: 12px 20px; font-weight: 700; font-size: 14px; letter-spacing: 0.01em; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease; } .nav-cta, .btn.primary { background: var(--brand); color: var(--on-brand); } .nav-cta:hover, .btn.primary:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); } .btn.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn.secondary:hover { border-color: var(--brand); color: var(--brand); } /* ===================================================================== Hero ===================================================================== */ .hero { min-height: calc(100vh - 72px); display: flex; align-items: center; padding: 80px 0; } .hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 44px; align-items: center; } .eyebrow { width: fit-content; margin: 0 0 18px; border: 1px solid var(--line); background: var(--surface); color: var(--brand); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } h1, h2, h3, p { margin-top: 0; } h1 { font-size: clamp(46px, 7vw, 86px); line-height: 0.95; letter-spacing: -0.045em; margin-bottom: 24px; color: var(--ink); font-weight: 800; } h1 small { display: block; margin-top: 14px; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.02em; color: var(--muted); font-weight: 500; } h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 16px; color: var(--ink); font-weight: 800; } h3 { font-size: 20px; margin-bottom: 10px; color: var(--ink); font-weight: 700; } .hero-subtitle, .section-title p:not(.eyebrow), .partner-box p, .contact p, .cards p { color: var(--muted); font-size: 17px; line-height: 1.65; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0; } /* ===================================================================== Trust pills / badges ===================================================================== */ .trust-pills { display: flex; flex-wrap: wrap; gap: 8px; } .trust-pills span, .badge { border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; color: var(--ink); background: var(--surface); font-size: 13px; font-weight: 500; } .badge.brand { background: var(--brand); color: var(--on-brand); border-color: transparent; } /* ===================================================================== Cards & panels ===================================================================== */ .hero-panel, .cards article, .partner-box { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .hero-panel { padding: 24px; } .panel-top { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--ink); font-weight: 700; } .live-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 18%, transparent); } .bubble { max-width: 92%; padding: 13px 16px; border-radius: 16px; line-height: 1.5; margin-bottom: 12px; font-size: 15px; } .bubble.bot { background: var(--surface-alt); color: var(--ink); border: 1px solid var(--line); } .bubble.user { margin-left: auto; background: var(--brand); color: var(--on-brand); font-weight: 600; border: 1px solid transparent; } .mini-chat { display: grid; gap: 10px; } .mini-chat button, .prompt-grid button { text-align: left; border: 1px solid var(--line); color: var(--ink); background: var(--surface); border-radius: 14px; padding: 13px 16px; font-weight: 500; transition: border-color .15s ease, color .15s ease, background .15s ease; } .mini-chat button:hover, .prompt-grid button:hover { border-color: var(--brand); color: var(--brand); background: var(--surface-alt); } /* ===================================================================== Sections ===================================================================== */ .section { padding: 92px 0; } .section-title { max-width: 760px; margin-bottom: 34px; } .cards, .prompt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cards article { padding: 26px; } .cards span { color: var(--brand); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; } .dark-section { background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .partner-box { padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .contact { padding-top: 40px; } .contact-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .contact-links a { border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; color: var(--ink); background: var(--surface); font-weight: 500; transition: border-color .15s ease, color .15s ease; } .contact-links a:hover { border-color: var(--brand); color: var(--brand); } /* ===================================================================== Floating chat ===================================================================== */ .chat-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 60px; height: 60px; border: 0; border-radius: 999px; color: var(--on-brand); font-weight: 800; font-size: 14px; letter-spacing: 0.04em; background: var(--brand); box-shadow: var(--shadow-lg); transition: transform .15s ease, background .15s ease; } .chat-launcher:hover { background: var(--ink); transform: translateY(-2px); } .chat-panel { position: fixed; right: 22px; bottom: 96px; z-index: 90; width: min(390px, calc(100% - 32px)); height: 540px; display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-lg); } .chat-panel.is-open { display: flex; } .chat-header { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface); } .chat-header strong { color: var(--ink); font-weight: 700; } .chat-header span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; } .chat-header button { border: 1px solid var(--line); width: 32px; height: 32px; border-radius: 999px; color: var(--ink); font-size: 20px; line-height: 1; background: var(--surface); } .chat-header button:hover { border-color: var(--brand); color: var(--brand); } .chat-messages { flex: 1; overflow-y: auto; padding: 18px; background: var(--paper); } .chat-form { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); } .chat-form input { flex: 1; min-width: 0; outline: none; border: 1px solid var(--line); border-radius: 999px; padding: 11px 14px; color: var(--ink); background: var(--paper); transition: border-color .15s ease; } .chat-form input:focus { border-color: var(--brand); } .chat-form button { border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 700; color: var(--on-brand); background: var(--brand); transition: background .15s ease; } .chat-form button:hover { background: var(--ink); } /* ===================================================================== Footer ===================================================================== */ .footer { border-top: 1px solid var(--line); padding: 26px 0; color: var(--muted); background: var(--surface); font-size: 14px; } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .footer p { margin: 0; } .footer strong { color: var(--ink); font-weight: 700; } .footer .network-tag { color: var(--brand); font-weight: 600; } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 880px) { .nav, .nav-cta { display: none; } .hero { min-height: auto; padding: 56px 0; } .hero-grid, .cards, .prompt-grid { grid-template-columns: 1fr; } .section { padding: 64px 0; } .partner-box, .footer-inner { flex-direction: column; align-items: flex-start; } }