/* nokatfood.eu homepage — native CSS, no framework. Design targets: joshwcomeau (theming + tasteful motion), robbowen (fluid responsiveness). Self-contained: defines its own tokens (does not depend on the waiting-page style.css). Font (Raleway subset) + browser-theme.js come from site-common/. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, p, ul, figure { margin: 0; } @font-face { font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/raleway-latin.woff2") format("woff2"); } /* Auto follows the OS via color-scheme + light-dark(); browser-theme.js pins light/dark by setting data-theme on . One accent hue, tuned per theme for contrast. */ :root { color-scheme: light dark; --bg: light-dark(#fbfbfa, #12131a); --bg-raised: light-dark(#ffffff, #1a1c26); --fg: light-dark(#16171d, #e9e9ee); --muted: light-dark(#5b5d6b, #9a9db0); --border: light-dark(#e7e7e4, #282a37); --accent: light-dark(#4f46e5, #a5b4fc); --accent-fg: light-dark(#ffffff, #12131a); --measure: 42rem; --gutter: clamp(1.25rem, 5vw, 4rem); --section-gap: clamp(4rem, 12vh, 9rem); /* Fluid type scale (robbowen-style: scales smoothly, no breakpoint jumps). */ --step--1: clamp(0.83rem, 0.78rem + 0.2vw, 0.94rem); --step-0: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); --step-3: clamp(2rem, 1.6rem + 2vw, 3.25rem); --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.75rem); } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { font: var(--step-0)/1.65 "Raleway", system-ui, sans-serif; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wrap { width: min(72rem, 100% - 2 * var(--gutter)); margin-inline: auto; } a { color: var(--accent); text-underline-offset: 0.15em; } /* --- header --- */ .site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.3s; } .site-header[data-scrolled="true"] { border-bottom-color: var(--border); } .site-header .wrap { display: flex; align-items: center; gap: 1rem; padding-block: 1rem; } .brand { font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--fg); font-size: var(--step-1); } .brand .dot { color: var(--accent); } .nav { margin-left: auto; display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); } .nav a { color: var(--muted); text-decoration: none; font-size: var(--step--1); font-weight: 600; transition: color 0.2s; } .nav a:hover { color: var(--fg); } .nav .cta { color: var(--accent-fg); background: var(--accent); padding: 0.5em 0.9em; border-radius: 0.5rem; transition: transform 0.15s ease, filter 0.2s; } .nav .cta:hover { color: var(--accent-fg); filter: brightness(1.08); transform: translateY(-1px); } .theme-toggle { background: var(--bg-raised); color: var(--fg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.4em 0.7em; font: inherit; font-size: var(--step--1); cursor: pointer; opacity: 0.75; transition: opacity 0.2s; } .theme-toggle:hover { opacity: 1; } @media (max-width: 34rem) { .nav a:not(.cta) { display: none; } } /* --- hero --- */ .hero { padding-block: clamp(4rem, 16vh, 11rem) var(--section-gap); position: relative; overflow: hidden; } /* Soft drifting accent glow — cheap radial gradient, not an image. */ .hero::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 60vh; z-index: -1; background: radial-gradient(60% 60% at 30% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); animation: drift 22s ease-in-out infinite alternate; } @keyframes drift { to { transform: translate3d(8%, 6%, 0) scale(1.15); } } .hero h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; } .hero h1 .grad { background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--fg))); -webkit-background-clip: text; background-clip: text; color: transparent; /* background-clip:text paints only to the advance box; a sliver of right padding keeps the last glyph's ink (the y's arm) from being clipped. */ padding-right: 0.08em; } .hero .lede { font-size: var(--step-1); color: var(--muted); max-width: var(--measure); margin-top: 1.5rem; } .hero .actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; } .btn { display: inline-block; text-decoration: none; font-weight: 600; color: var(--accent-fg); background: var(--accent); padding: 0.7em 1.3em; border-radius: 0.6rem; transition: transform 0.15s ease, filter 0.2s; } .btn:hover { color: var(--accent-fg); filter: brightness(1.08); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); } .btn-ghost:hover { color: var(--fg); border-color: var(--accent); } /* --- sections --- */ section { padding-block: var(--section-gap); } .section-label { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; } h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; max-width: 20ch; } .section-intro { color: var(--muted); font-size: var(--step-1); max-width: var(--measure); margin-top: 1rem; } /* services */ .services { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: clamp(2rem, 5vw, 3.5rem); } .card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 1rem; padding: clamp(1.5rem, 3vw, 2rem); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: 0 12px 40px -20px color-mix(in srgb, var(--accent) 60%, transparent); } .card .num { font-size: var(--step--1); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } /* Reserve three lines (line-height 1.15) so a longer wrapping title ("Advisory & developer relations") doesn't push its card's body below its neighbours'. Only applies where cards sit side by side. */ .card h3 { font-size: var(--step-2); font-weight: 700; margin: 0.5rem 0 0.6rem; letter-spacing: -0.01em; line-height: 1.15; } @media (min-width: 48rem) { .card h3 { min-block-size: 3.45em; } } .card p { color: var(--muted); } /* approach — numbered principles */ .principles { list-style: none; padding: 0; margin-top: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 0; } .principles li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding-block: clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid var(--border); } .principles li:last-child { border-bottom: 1px solid var(--border); } .principles .p-num { font-size: var(--step-2); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; } .principles .p-body h3 { font-size: var(--step-1); font-weight: 700; margin-bottom: 0.25rem; } .principles .p-body p { color: var(--muted); max-width: var(--measure); } /* contact */ .contact { text-align: center; } .contact .wrap { display: grid; place-items: center; } .contact h2 { max-width: none; } .contact .email { font-size: var(--step-2); font-weight: 700; margin-top: 1.5rem; display: inline-block; } .contact .privacy { color: var(--muted); font-size: var(--step--1); margin-top: 2rem; } /* footer — carries the statutory company-information block (CA 2014 s.151(4)) */ .site-footer { border-top: 1px solid var(--border); padding-block: 2.5rem; color: var(--muted); font-size: var(--step--1); line-height: 1.6; } .site-footer .wrap { display: grid; gap: 1rem; } .site-footer .legal { margin: 0; max-width: 60rem; } .site-footer .legal strong { color: var(--fg); font-weight: 700; } .site-footer .foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--fg); } /* prose pages (privacy, legal) */ .page { padding-block: clamp(3rem, 10vh, 6rem) var(--section-gap); } .prose { max-width: var(--measure); } .prose h1 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .prose h2 { font-size: var(--step-1); font-weight: 700; margin-top: 2.75rem; max-width: none; } .prose p, .prose li { color: var(--fg); } .prose ul { padding-left: 1.2rem; } .prose li { margin-block: 0.35rem; } .prose .updated { color: var(--muted); font-size: var(--step--1); } .prose .back { display: inline-block; margin-top: 3rem; } /* --- scroll reveal --- Progressive enhancement: only hide when JS is active (html.js, set synchronously in ). No JS → everything visible. */ .js .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--reveal-delay, 0s); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } .js .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto !important; } }