/* ========================================================================== Prasavik corporate site ========================================================================== Contents 0. FONT self-hosted Inter 1. TOKENS colours, type scale, spacing (edit here to re-theme) 2. RESET 3. BASE TYPOGRAPHY 4. LAYOUT container, sections, section heads 5. BUTTONS + LINKS 6. HEADER / NAV 7. HERO 8. CARDS "What we do" 9. PRODUCTS 10. STEPS "How we work" 11. ABOUT (includes optional team styles) 12. CONTACT + FORM 13. FOOTER 14. LEGAL PAGES + 404 15. MOTION scroll reveal + reduced-motion opt-out 16. RESPONSIVE ========================================================================== */ /* ========================================================================== 0. FONT -------------------------------------------------------------------------- Inter is self-hosted rather than loaded from fonts.googleapis.com. A third-party stylesheet in blocks the first paint on a network we do not control, and it would send every visitor's IP to another company. The files in /assets/fonts are the same woff2 subsets Google Fonts serves. Inter is licensed under the SIL Open Font License 1.1, which permits this. To update: download the latest woff2 subsets, replace the two files, and leave everything below unchanged. ========================================================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin-ext.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; } /* ========================================================================== 1. TOKENS -------------------------------------------------------------------------- Dark is the default theme. The light theme below re-declares the same custom properties with inverted roles, so changing a value here changes both themes unless it is also listed in the light block. ========================================================================== */ :root { /* Colour: surfaces */ --bg: #08080b; --bg-alt: #0b0b10; --surface: rgba(255, 255, 255, 0.026); --surface-hover: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); /* Colour: text */ --text: #f4f4f6; --text-muted: #a2a2b0; /* 7.9:1 on --bg */ --text-faint: #82829a; /* 5.3:1 on --bg, passes AA for body text */ /* Colour: accent. One saturated hue, used sparingly. */ --accent: #7f5af0; --accent-text: #b39bff; /* passes AA on --bg */ --accent-glow: rgba(127, 90, 240, 0.30); /* Colour: inverted button (primary CTA) */ --btn-bg: #f4f4f6; --btn-fg: #08080b; --btn-bg-hover: #ffffff; /* Colour: form states */ --danger: #ff8a8a; --success: #6ee7a8; /* Type */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Radii */ --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; /* Spacing */ --gutter: 24px; --section-pad: 120px; --max-width: 1160px; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Light theme: same tokens, inverted roles. */ @media (prefers-color-scheme: light) { :root { --bg: #ffffff; --bg-alt: #f7f7f9; --surface: rgba(9, 9, 16, 0.022); --surface-hover: rgba(9, 9, 16, 0.045); --border: rgba(9, 9, 16, 0.10); --border-strong: rgba(9, 9, 16, 0.20); --text: #0b0b12; --text-muted: #4f4f5f; /* 8.0:1 on --bg */ --text-faint: #6b6b7c; /* 5.2:1 on --bg */ --accent: #6538e0; --accent-text: #5227cc; /* passes AA on white */ --accent-glow: rgba(101, 56, 224, 0.16); --btn-bg: #0b0b12; --btn-fg: #ffffff; --btn-bg-hover: #22222e; --danger: #b3261e; --success: #12683f; } } /* ========================================================================== 2. RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } body, h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } img, svg { display: block; max-width: 100%; } button, input, textarea { font: inherit; color: inherit; } a { color: inherit; } /* ========================================================================== 3. BASE TYPOGRAPHY ========================================================================== */ body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 17px; line-height: 1.7; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; } p { text-wrap: pretty; } /* Focus: always visible, never removed. */ :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: var(--btn-bg); color: var(--btn-fg); border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; } .eyebrow { color: var(--accent-text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 18px; } /* ========================================================================== 4. LAYOUT ========================================================================== */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); } .section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); } .section__head { max-width: 640px; margin-bottom: 64px; } .section__title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.85rem); } .section__lede { margin-top: 20px; color: var(--text-muted); font-size: 1.0625rem; } /* ========================================================================== 5. BUTTONS + LINKS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border: 1px solid transparent; border-radius: 999px; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: background-color 180ms var(--ease), transform 180ms var(--ease), opacity 180ms var(--ease); } .btn--primary { background: var(--btn-bg); color: var(--btn-fg); } .btn--primary:hover { background: var(--btn-bg-hover); } .btn--primary:active { transform: translateY(1px); } .btn--sm { padding: 9px 18px; font-size: 0.875rem; } .link-arrow { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-text); font-weight: 550; font-size: 0.9375rem; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 180ms var(--ease); } .link-arrow:hover { border-bottom-color: currentColor; } .link-arrow svg { transition: transform 180ms var(--ease); } .link-arrow:hover svg { transform: translateX(3px); } /* ========================================================================== 6. HEADER / NAV ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 220ms var(--ease), border-color 220ms var(--ease); } /* Applied by main.js once the page has scrolled. */ .site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--border); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; } .wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); } .wordmark__mark { color: var(--accent-text); flex: none; } .wordmark__text { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em; } .nav { display: flex; align-items: center; gap: 34px; } .nav__list { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; } .nav__link { color: var(--text-muted); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: color 160ms var(--ease); } .nav__link:hover { color: var(--text); } .nav__link[aria-current="true"] { color: var(--text); } .nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; } .nav-toggle__icon--close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__icon--open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__icon--close { display: block; } /* ========================================================================== 7. HERO ========================================================================== */ .hero { position: relative; padding-block: clamp(80px, 6vw + 40px, 150px) clamp(72px, 5vw + 40px, 130px); overflow: hidden; } /* Soft radial glow behind the headline. Decorative only. */ .hero__glow { position: absolute; top: -280px; left: 50%; width: min(1100px, 130vw); height: 720px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, var(--accent-glow) 0%, transparent 72%); pointer-events: none; z-index: 0; } .hero__inner { position: relative; z-index: 1; max-width: 800px; } .hero__title { font-size: clamp(2.5rem, 1.35rem + 5.1vw, 4.4rem); letter-spacing: -0.038em; font-weight: 620; } .hero__sub { margin-top: 26px; max-width: 620px; color: var(--text-muted); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: 42px; } /* ========================================================================== 8. CARDS ("What we do") ========================================================================== */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; } .card { padding: 30px 28px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: background-color 220ms var(--ease), border-color 220ms var(--ease); } .card:hover { background: var(--surface-hover); border-color: var(--border-strong); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 22px; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: var(--radius-sm); } .card__title { font-size: 1.1875rem; margin-bottom: 10px; } .card__body { color: var(--text-muted); font-size: 0.9688rem; } /* ========================================================================== 9. PRODUCTS -------------------------------------------------------------------------- The grid is auto-fitting: one product fills the row, two sit side by side on desktop, three wrap. No CSS change needed when a product is added. ========================================================================== */ .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 22px; } /* A lone product does not need the full column width. Two or more use it all. */ .products:has(> .product:only-child) { max-width: 860px; } .product { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .product__name { font-size: 1.75rem; letter-spacing: -0.03em; margin-bottom: 8px; } .product__tagline { color: var(--text-muted); font-size: 1.0625rem; } .product__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .product__list li { position: relative; padding-left: 28px; color: var(--text-muted); font-size: 0.9688rem; line-height: 1.6; } /* Checkmark drawn in CSS so the markup stays clean. */ .product__list li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 12px; height: 7px; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg); } /* ========================================================================== 10. STEPS ("How we work") ========================================================================== */ .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 56px; margin: 0; padding: 0; list-style: none; counter-reset: step; } .step { display: flex; gap: 20px; padding: 28px 0; border-top: 1px solid var(--border); } .step__num { flex: none; color: var(--accent-text); font-size: 0.875rem; font-weight: 650; letter-spacing: 0.04em; padding-top: 4px; font-variant-numeric: tabular-nums; } .step__title { font-size: 1.125rem; margin-bottom: 8px; } .step__body { color: var(--text-muted); font-size: 0.9688rem; } /* ========================================================================== 11. ABOUT ========================================================================== */ .about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; } .about__head { position: sticky; top: 110px; } .about__body { display: grid; gap: 22px; } .about__body p { color: var(--text-muted); font-size: 1.0625rem; } /* Optional team block. Unused until the placeholder in index.html is filled. */ .team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px; margin-top: 20px; padding: 0; list-style: none; } .team__member { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .team__name { font-size: 1.0625rem; margin-bottom: 4px; } .team__role { color: var(--accent-text); font-size: 0.875rem; font-weight: 600; margin-bottom: 10px; } .team__bio { color: var(--text-muted); font-size: 0.9375rem; } /* ========================================================================== 12. CONTACT + FORM ========================================================================== */ .contact { position: relative; overflow: hidden; border-top: 1px solid var(--border); } .contact__glow { position: absolute; bottom: -420px; left: 50%; width: min(1200px, 140vw); height: 760px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, var(--accent-glow) 0%, transparent 70%); pointer-events: none; z-index: 0; } .contact__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } .contact__intro { max-width: 520px; } .contact__direct { margin-top: 28px; color: var(--text-muted); font-size: 0.9688rem; } .contact__direct a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } .form { display: grid; gap: 18px; padding: 34px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .field { display: grid; gap: 7px; } .field__label { font-size: 0.875rem; font-weight: 550; } .field__opt { color: var(--text-faint); font-weight: 400; } .field__input { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0.9375rem; transition: border-color 160ms var(--ease); } .field__input:hover { border-color: var(--accent-text); } .field__input--area { resize: vertical; min-height: 108px; line-height: 1.6; } .field__input[aria-invalid="true"] { border-color: var(--danger); } .field__error { color: var(--danger); font-size: 0.8125rem; line-height: 1.5; } /* Honeypot, removed from the visual and accessibility trees. */ .field--hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form__submit { margin-top: 6px; justify-self: start; } .form__submit[disabled] { opacity: 0.6; cursor: progress; } .form__status { font-size: 0.875rem; line-height: 1.6; } .form__status:empty { display: none; } .form__status[data-state="error"] { color: var(--danger); } .form__status[data-state="success"] { color: var(--success); } .form__status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== 13. FOOTER ========================================================================== */ .site-footer { padding-block: 56px; background: var(--bg-alt); border-top: 1px solid var(--border); } .footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 48px; align-items: start; } .footer__note { margin-top: 10px; max-width: 380px; color: var(--text-faint); font-size: 0.875rem; line-height: 1.6; } .footer__links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0; padding: 0; list-style: none; justify-content: flex-end; } .footer__links a { color: var(--text-muted); font-size: 0.875rem; text-decoration: none; transition: color 160ms var(--ease); } .footer__links a:hover { color: var(--text); } .footer__copy { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 0.8125rem; } /* ========================================================================== 14. LEGAL PAGES + 404 -------------------------------------------------------------------------- Shared by privacy.html, terms.html and 404.html. Same tokens, no extra colours introduced. ========================================================================== */ .page { padding-block: clamp(64px, 5vw + 30px, 110px) var(--section-pad); } .page__inner { max-width: 720px; } .page__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.85rem); margin-bottom: 14px; } .page__meta { color: var(--text-faint); font-size: 0.875rem; } .prose { margin-top: 48px; display: grid; gap: 30px; } .prose h2 { font-size: 1.25rem; margin-bottom: 10px; } .prose p, .prose li { color: var(--text-muted); font-size: 1rem; } .prose ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 22px; } .prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } /* Definition list of company details on the imprint page. */ .details { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 14px 28px; margin: 16px 0 0; } .details dt { color: var(--text-faint); font-size: 0.9375rem; } .details dd { margin: 0; color: var(--text); font-size: 1rem; } .details a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } /* A value that has not been filled in yet. Deliberately loud: this must not reach production unnoticed. Delete the markup, not this rule. */ .pending { display: inline-block; padding: 1px 9px; background: color-mix(in srgb, var(--danger) 13%, transparent); border: 1px dashed var(--danger); border-radius: 6px; color: var(--danger); font-size: 0.9375rem; } /* Editor note rendered on screen so a placeholder is never missed in review. */ .notice { padding: 18px 20px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--radius); color: var(--text-muted); font-size: 0.9375rem; } .error-page { display: grid; align-content: center; min-height: 70vh; text-align: left; } .error-page__code { color: var(--accent-text); font-size: 0.875rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; } .error-page__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; } /* ========================================================================== 15. MOTION -------------------------------------------------------------------------- Reveal state is only applied when motion is welcome. Under prefers-reduced-motion: reduce, the rules below never match, so content renders at its final position with no animation and no observer work. With JavaScript disabled, assets/noscript.css restores visibility. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } .reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* The 70ms stagger between siblings is applied in main.js, not as a transition-delay here: a delay left on the element would also postpone unrelated transitions later on, such as card hover. */ } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 16. RESPONSIVE ========================================================================== */ @media (max-width: 1080px) { :root { --section-pad: 96px; } .cards { grid-template-columns: repeat(2, 1fr); } .about, .contact__inner { grid-template-columns: 1fr; gap: 44px; } .about__head { position: static; } } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 0; } } /* Mobile navigation: the desktop nav becomes a panel under the header. */ @media (max-width: 760px) { :root { --section-pad: 80px; --gutter: 20px; } .nav-toggle { display: inline-flex; } .nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 6px; padding: 16px var(--gutter) 22px; background: var(--bg); border-bottom: 1px solid var(--border); } .nav.is-open { display: flex; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { display: block; padding: 13px 2px; font-size: 1rem; color: var(--text); border-bottom: 1px solid var(--border); } .nav__cta { margin-top: 14px; justify-content: center; padding: 12px 22px; } .site-header { position: sticky; } .header__inner { position: relative; min-height: 64px; } .cards { grid-template-columns: 1fr; } .product { padding: 28px 24px; } .form { padding: 24px 20px; } .footer__inner { grid-template-columns: 1fr; } .footer__links { justify-content: flex-start; } } @media (max-width: 560px) { .details { grid-template-columns: 1fr; gap: 2px 0; } .details dd { margin-bottom: 16px; } } @media (max-width: 400px) { :root { --gutter: 18px; } body { font-size: 16px; } .btn { width: 100%; } .hero__actions { gap: 18px; } .product { padding: 24px 18px; } }