/* ========================================================================== Implevo — brand stylesheet Palette: Slate #221f20 · White #ffffff · Stone #756c61 · Aqua #00656c · Pine #475f3f Type: Elms Sans (Google Fonts) — Regular body, Bold standout Motif: beveled cube (top-left + bottom-right corners cut at 45°) ========================================================================== */ :root { --slate: #221f20; --white: #ffffff; --stone: #756c61; --aqua: #00656c; --pine: #475f3f; --paper: #faf9f6; /* warm off-white page background */ --stone-050: #f2f0eb; /* warm tint for alt sections */ --stone-100: #e8e5de; /* borders, dividers */ --pine-dark: #38492f; --aqua-dark: #00494e; --slate-soft: #4a4547; /* secondary text on light */ --paper-soft: #d8d4cc; /* secondary text on dark */ --stone-dark: #5d564d; /* stone that passes AA for small text on light */ --font: "Elms Sans", "Century Gothic", "Trebuchet MS", Arial, sans-serif; --bevel: 14px; /* cube-corner cut for cards/buttons */ --bevel-lg: 28px; --measure: 62ch; --site-w: 1140px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --step-0: 1rem; --step-1: clamp(1.125rem, 1rem + 0.5vw, 1.3rem); --step-2: clamp(1.35rem, 1.15rem + 1vw, 1.75rem); --step-3: clamp(1.7rem, 1.35rem + 1.7vw, 2.4rem); --step-4: clamp(2.2rem, 1.6rem + 3vw, 3.5rem); --step-5: clamp(2.6rem, 1.8rem + 4.2vw, 4.4rem); --space-s: clamp(1rem, 2vw, 1.5rem); --space-m: clamp(1.75rem, 3.5vw, 2.75rem); --space-l: clamp(3rem, 6vw, 5rem); --space-xl: clamp(4.5rem, 9vw, 7.5rem); } /* ---------- reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Pre-paint state while saved text overrides load (set by an inline script, removed by js/content.js or its 900ms safety timeout) */ html.content-pending body { visibility: hidden; } html.content-pending .hm, html.content-pending .hm polygon, html.content-pending .hm g, html.content-pending .hero-logo { animation-play-state: paused; } body { margin: 0; font-family: var(--font); font-size: var(--step-0); line-height: 1.65; color: var(--slate); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.12; margin: 0 0 0.6em; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { margin: 0 0 1.1em; max-width: var(--measure); } p:last-child { margin-bottom: 0; } a { color: var(--aqua); text-underline-offset: 3px; } a:hover { color: var(--aqua-dark); } /* readable link colours on dark backgrounds */ .hero a:not(.btn), .page-hero a:not(.btn), .section--slate a:not(.btn), .section--pine a:not(.btn) { color: #8fb3b6; } .hero a:not(.btn):hover, .page-hero a:not(.btn):hover, .section--slate a:not(.btn):hover, .section--pine a:not(.btn):hover { color: var(--white); } .section--slate .card a, .section--slate .callout a { color: var(--aqua); } .section--slate .card a:hover, .section--slate .callout a:hover { color: var(--aqua-dark); } ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; } ::selection { background: var(--pine); color: var(--white); } :focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--slate); color: var(--white); padding: 0.6em 1.2em; z-index: 100; } .skip-link:focus { left: 0; } /* ---------- layout helpers ---------- */ .wrap { width: min(var(--site-w), 100% - 2 * var(--gutter)); margin-inline: auto; } .section { padding-block: var(--space-xl); } .section--tight { padding-block: var(--space-l); } .section--stone { background: var(--stone-050); } .section--slate { background: var(--slate); color: var(--white); } .section--slate p { color: var(--paper-soft); } /* light panels keep dark text even inside dark sections */ .section--slate .card, .section--slate .callout { color: var(--slate); } .section--slate .card p, .section--slate .callout p { color: var(--slate-soft); } .section--pine { background: var(--pine); color: var(--white); } .section--pine p { color: #e4e9df; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pine); margin-bottom: 1.1em; } .eyebrow::before { content: ""; width: 0.85em; height: 0.85em; background: currentColor; clip-path: polygon(38% 0, 100% 0, 100% 62%, 62% 100%, 0 100%, 0 38%); } .section--slate .eyebrow, .section--pine .eyebrow { color: #a9c19a; } .section--slate .eyebrow { color: #8fb3b6; } .lede { font-size: var(--step-1); color: var(--slate-soft); max-width: 54ch; } .section--slate .lede, .section--pine .lede { color: inherit; } .center { text-align: center; } .center p, .center .lede { margin-inline: auto; } /* ---------- cube motif ---------- */ .cut { /* beveled cube corners — the logo shape, generalised */ clip-path: polygon( var(--bevel) 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%, 0 var(--bevel) ); } .cut-lg { clip-path: polygon( var(--bevel-lg) 0, 100% 0, 100% calc(100% - var(--bevel-lg)), calc(100% - var(--bevel-lg)) 100%, 0 100%, 0 var(--bevel-lg) ); } /* ---------- buttons ---------- */ .btn { display: inline-block; font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1; padding: 1.05em 1.7em; text-decoration: none; border: 0; cursor: pointer; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; } .btn:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } } .btn--primary { background: var(--pine); color: var(--white); } .btn--primary:hover { background: var(--pine-dark); color: var(--white); } .btn--ghost { background: transparent; color: var(--slate); box-shadow: inset 0 0 0 2px var(--slate); } .btn--ghost:hover { background: var(--slate); color: var(--white); } /* ghost buttons on dark backgrounds */ .hero .btn--ghost, .page-hero .btn--ghost, .section--slate .btn--ghost, .section--pine .btn--ghost { color: var(--white); box-shadow: inset 0 0 0 2px var(--white); } .hero .btn--ghost:hover, .page-hero .btn--ghost:hover, .section--slate .btn--ghost:hover, .section--pine .btn--ghost:hover { background: var(--white); color: var(--slate); } .btn--light { background: var(--white); color: var(--pine); } .btn--light:hover { background: var(--stone-050); color: var(--pine-dark); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 249, 246, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--stone-100); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; } .brand { display: inline-flex; align-items: center; } .brand img { height: 2.4rem; width: auto; } .site-nav ul { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 0.9rem); list-style: none; margin: 0; padding: 0; } /* nav links as slate cut-corner buttons; the CTA stays pine */ .site-nav a { display: inline-block; font-weight: 700; text-decoration: none; color: var(--white); background: var(--slate); padding: 0.7em 1.3em; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); } .site-nav a:hover { background: var(--slate-soft); color: var(--white); } .site-nav a[aria-current="page"] { color: #a9c19a; } .site-nav .nav-cta { background: var(--pine); } .site-nav .nav-cta:hover { background: var(--pine-dark); color: var(--white); } .site-nav .nav-cta[aria-current="page"] { color: var(--white); background: var(--pine-dark); } .nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; } .nav-toggle .bar { display: block; width: 26px; height: 3px; background: var(--slate); margin: 5px 0; transition: transform 200ms ease, opacity 200ms ease; } @media (max-width: 780px) { .nav-toggle { display: block; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--stone-100); display: none; padding: 1rem var(--gutter) 1.5rem; } .site-nav.is-open { display: block; } .site-nav ul { flex-direction: column; align-items: stretch; gap: 0.5rem; } .site-nav a { display: block; padding: 0.85em 1.1em; font-size: 1.05rem; } .site-nav .nav-cta { text-align: center; margin-top: 0.5rem; } .nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } } /* ---------- hero ---------- */ .hero { padding-block: var(--space-xl); overflow: clip; background: var(--slate); color: var(--white); } .hero .lede { color: var(--paper-soft); } .hero .eyebrow { color: #a9c19a; } .hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-l); align-items: center; } @media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; } .hero-art { max-width: 380px; order: -1; } } .hero h1 { margin-bottom: 0.4em; } .hero .lede { margin-bottom: 1.6em; } .hero .accent { color: #a9c19a; } .hero-art { position: relative; } /* ---------- hero logo assembly animation ---------- */ /* The cube builds from six true fragments of its own geometry: they arrive in the brand colours, seat with visible seams, then merge — seams close, colours fuse to white — and the finished wordmark crossfades in. */ .hm { width: 100%; height: auto; animation: hm-out 400ms ease 2550ms forwards; } .lp { transform-box: fill-box; transform-origin: center; opacity: 0; animation-duration: 640ms, 260ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1); animation-fill-mode: both, forwards; } .lp-1 { animation-name: lp-in-1, lp-merge; animation-delay: 1010ms, 1950ms; } .lp-2 { animation-name: lp-in-2, lp-merge; animation-delay: 1100ms, 1950ms; } .lp-3 { animation-name: lp-in-3, lp-merge; animation-delay: 830ms, 1950ms; } .lp-4 { animation-name: lp-in-4, lp-merge; animation-delay: 920ms, 1950ms; } .lp-5 { animation-name: lp-in-5, lp-merge; animation-delay: 650ms, 1950ms; } .lp-6 { animation-name: lp-in-6, lp-merge; animation-delay: 740ms, 1950ms; } /* the whole mark settles as the seams close */ .lp-all { transform-box: fill-box; transform-origin: center; animation: lp-settle 260ms ease-in-out 2020ms 1; } .hero-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; animation: hm-logo-in 500ms ease 2350ms forwards; } @keyframes lp-in-1 { from { transform: translate(-340px, -180px) rotate(-14deg) scale(0.9); opacity: 0; filter: blur(14px); } to { transform: scale(0.96); opacity: 1; filter: blur(0); } } @keyframes lp-in-2 { from { transform: translate(260px, -220px) rotate(10deg) scale(0.9); opacity: 0; filter: blur(14px); } to { transform: scale(0.96); opacity: 1; filter: blur(0); } } @keyframes lp-in-3 { from { transform: translate(-380px, 60px) rotate(8deg) scale(0.9); opacity: 0; filter: blur(14px); } to { transform: scale(0.96); opacity: 1; filter: blur(0); } } @keyframes lp-in-4 { from { transform: translate(360px, 40px) rotate(-8deg) scale(0.9); opacity: 0; filter: blur(14px); } to { transform: scale(0.96); opacity: 1; filter: blur(0); } } @keyframes lp-in-5 { from { transform: translate(-200px, 300px) rotate(12deg) scale(0.9); opacity: 0; filter: blur(14px); } to { transform: scale(0.96); opacity: 1; filter: blur(0); } } @keyframes lp-in-6 { from { transform: translate(240px, 280px) rotate(-12deg) scale(0.9); opacity: 0; filter: blur(14px); } to { transform: scale(0.96); opacity: 1; filter: blur(0); } } @keyframes lp-merge { to { transform: scale(1); fill: #ffffff; } } @keyframes lp-settle { 0% { transform: translateY(0); } 45% { transform: translateY(6px); } 100% { transform: translateY(0); } } @keyframes hm-out { to { opacity: 0; } } @keyframes hm-logo-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hm { display: none; } .hero-logo { opacity: 1; animation: none !important; } } /* page hero (interior pages) */ .page-hero { padding-block: var(--space-l) var(--space-l); background: var(--slate); color: var(--white); } .page-hero h1 { max-width: 22ch; } .page-hero .lede { color: var(--paper-soft); } .page-hero .eyebrow { color: #a9c19a; } /* ---------- cards ---------- */ .card-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: var(--space-m); } .card { background: var(--white); border: 1px solid var(--stone-100); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 0.4rem; } .card .tagline { font-weight: 700; font-size: var(--step-1); color: var(--aqua); margin-bottom: 0.35em; } .card .price { margin-top: auto; padding-top: 1.2rem; font-weight: 700; color: var(--pine); font-size: 1rem; } .card .price small { display: block; font-weight: 400; color: var(--stone-dark); } .card-mark { width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem; clip-path: polygon(38% 0, 100% 0, 100% 62%, 62% 100%, 0 100%, 0 38%); } .card-mark--pine { background: var(--pine); } .card-mark--aqua { background: var(--aqua); } .card-mark--stone { background: var(--stone); } .card-mark--slate { background: var(--slate); } /* ---------- value strip (dark) ---------- */ .value-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-top: var(--space-m); } .value-grid h3 { font-size: var(--step-1); margin-bottom: 0.35em; } .value-grid p { font-size: 1rem; } /* ---------- steps ---------- */ .steps { list-style: none; padding: 0; margin: var(--space-m) 0 0; display: grid; gap: 0; counter-reset: step; } .step { counter-increment: step; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.4rem; padding: 1.6rem 0; border-top: 1px solid var(--stone-100); } .step:last-child { border-bottom: 1px solid var(--stone-100); } .step::before { content: counter(step, decimal-leading-zero); font-weight: 700; font-size: 1.35rem; color: var(--white); background: var(--pine); width: 3.2rem; height: 3.2rem; display: grid; place-items: center; clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); } .step:nth-child(even)::before { background: var(--aqua); } .step :is(h2, h3) { font-size: var(--step-1); margin-bottom: 0.25em; } .step p { font-size: 1rem; color: var(--slate-soft); } .step .step-when { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-dark); margin-bottom: 0.4em; } /* ---------- service detail blocks ---------- */ .offer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-l); padding-block: var(--space-l); border-top: 1px solid var(--stone-100); align-items: start; } .offer:first-of-type { border-top: 0; padding-top: var(--space-m); } @media (max-width: 880px) { .offer { grid-template-columns: 1fr; gap: var(--space-m); } } .offer .tagline { font-weight: 700; font-size: var(--step-2); color: var(--aqua); line-height: 1.3; margin-bottom: 0.6em; text-wrap: balance; } .offer-facts { background: var(--white); border: 1px solid var(--stone-100); padding: clamp(1.5rem, 3vw, 2rem); } .offer-facts dl { margin: 0; } .offer-facts dt { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-dark); margin-top: 1.1rem; } .offer-facts dt:first-child { margin-top: 0; } .offer-facts dd { margin: 0.15rem 0 0; font-weight: 700; font-size: 1.15rem; color: var(--pine); } .offer-facts dd small { font-weight: 400; color: var(--slate-soft); } .ticks { list-style: none; padding: 0; margin: 1rem 0 0; } .ticks li { position: relative; padding-left: 1.7em; margin-bottom: 0.55em; } .ticks li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.85em; height: 0.85em; background: var(--pine); clip-path: polygon(38% 0, 100% 0, 100% 62%, 62% 100%, 0 100%, 0 38%); } .chips { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 1rem 0 0; list-style: none; } .chips li { background: var(--stone-050); border: 1px solid var(--stone-100); padding: 0.45em 0.95em; font-size: 1rem; font-weight: 500; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } /* ---------- price note / callout ---------- */ .callout { background: var(--stone-050); border: 1px solid var(--stone-100); padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2rem); margin-top: var(--space-m); } .callout p { max-width: none; } /* ---------- FAQ ---------- */ .faq { margin-top: var(--space-m); } .faq details { border-top: 1px solid var(--stone-100); padding: 0.35rem 0; } .faq details:last-child { border-bottom: 1px solid var(--stone-100); } .faq summary { cursor: pointer; font-weight: 700; font-size: var(--step-1); padding: 0.9rem 2.5rem 0.9rem 0; list-style: none; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--pine); } .faq details[open] summary::after { content: "–"; } .faq details p { padding-bottom: 1rem; color: var(--slate-soft); } /* ---------- founders ---------- */ .founder-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: var(--space-m); } .founder { background: var(--white); border: 1px solid var(--stone-100); padding: clamp(1.75rem, 3vw, 2.5rem); } .founder-avatar { width: 4.6rem; height: 4.6rem; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: 1.7rem; margin-bottom: 1.25rem; clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); } .founder-avatar--pine { background: var(--pine); } .founder-avatar--aqua { background: var(--aqua); } .founder .role { font-weight: 500; color: var(--stone); margin-top: -0.5em; margin-bottom: 1em; } /* ---------- contact ---------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-l); align-items: start; } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } .big-mail { display: inline-block; font-size: var(--step-2); font-weight: 700; color: var(--aqua); text-decoration-thickness: 3px; word-break: break-word; } .contact-form { background: var(--white); border: 1px solid var(--stone-100); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.1rem; } .contact-form label { font-weight: 700; font-size: 0.95rem; display: block; margin-bottom: 0.35rem; } .contact-form input, .contact-form textarea { width: 100%; font: inherit; color: var(--slate); background: var(--paper); border: 1.5px solid var(--stone-100); padding: 0.8em 1em; border-radius: 0; } .contact-form input:focus, .contact-form textarea:focus { outline: 3px solid var(--aqua); outline-offset: 0; border-color: var(--aqua); } .contact-form textarea { resize: vertical; min-height: 8.5em; } .form-note { font-size: 0.95rem; color: var(--stone-dark); } /* ---------- CTA band ---------- */ .cta-band { text-align: center; } .cta-band h2 { max-width: 22ch; margin-inline: auto; } .cta-band .lede { margin-inline: auto; margin-bottom: 1.8em; } /* ---------- footer ---------- */ .site-footer { background: var(--slate); color: var(--paper-soft); padding-block: var(--space-l) var(--space-m); font-size: 0.95rem; } .footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-m); align-items: start; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; } } .site-footer img { height: 2.6rem; width: auto; margin-bottom: 1rem; } .site-footer p { color: var(--paper-soft); } .site-footer :is(h2, h4) { color: var(--white); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.9em; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 0.55em; } .site-footer a { color: var(--paper-soft); text-decoration: none; } .site-footer a:hover { color: var(--white); text-decoration: underline; } .footer-bottom { border-top: 1px solid #3a3637; margin-top: var(--space-m); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.85rem; color: #a8a19c; } .site-footer .footer-legal { margin: 1rem 0 0; font-size: 0.85rem; color: #a8a19c; max-width: none; } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 500ms ease, transform 500ms ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }