/* ========================================================================== Robot Zebra — AI Workshop for Agencies Structure and copy: approved mockup (rz-warsztat-v2) Look and feel: robotzebra.agency — the tokens below are the values declared in that site's Elementor kit, not sampled approximations. ========================================================================== */ /* --------------------------------------------------------------- 1. Fonts */ /* Mona Sans is loaded from Google Fonts in the of each page, matching how robotzebra.agency serves it. Variable weight 200..900, so every weight used here (400 body, 500 headings, 600 UI, 700 list markers) comes from a single file. No @font-face needed — the hosted stylesheet supplies them. */ /* --------------------------------------------------------------- 2. Tokens */ :root { /* Brand palette — robotzebra.agency Elementor kit-8 */ --blue: #2999fd; --lime: #caff00; --ink: #000000; --text: #484848; --muted: #888888; --line: #dfdee5; --white: #ffffff; --soft: #f2f1f6; --page: #fafafa; /* On-blue variants. Kept at full white: the brand blue is bright enough that even pure white only reaches 2.97:1, so any transparency costs legibility for no real gain. Hierarchy on blue comes from size, not opacity. */ --on-blue-text: #ffffff; --on-blue-fill: rgba(255, 255, 255, 0.15); --on-blue-line: rgba(255, 255, 255, 0.3); /* Contrast-safe companions to the brand greys/blue, for small text only. --muted (#888888) is 3.40:1 on the page background, which fails WCAG AA below 18px; --blue is 2.97:1 on white. These pass at 4.8:1 and read as the same colours at small sizes. */ --muted-strong: #6e6e6e; --blue-ink: #1a72d0; /* The eyebrow chip's own hairline — a soft indigo the agency site uses for this component specifically, rather than the general --line grey. */ --eyebrow-line: rgba(99, 110, 223, 0.3); /* Radii — the brand is pill-and-large-radius throughout */ --r-panel: 34px; --r-card: 20px; --r-sm: 12px; --r-pill: 999px; /* Measure — every section shares one column width so content aligns down the whole page. --wrap-wide is the header shell only. */ --wrap: 1000px; --wrap-wide: 1240px; --gutter: 24px; /* Type */ --font: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --track: -0.025em; /* brand: -2px at 80px, -1px at 40px */ } /* --------------------------------------------------------------- 3. Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--text); background: var(--page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: inherit; } /* --------------------------------------------------------------- 4. Type */ h1, h2, h3 { color: var(--ink); font-weight: 500; /* brand headings are medium, never bold */ letter-spacing: var(--track); line-height: 1.06; text-wrap: balance; } h1 { font-size: clamp(34px, 4.6vw, 60px); margin-bottom: 20px; } h2 { font-size: clamp(27px, 3.2vw, 42px); line-height: 1.1; margin-bottom: 18px; } h3 { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 8px; } p { margin-bottom: 14px; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 600; color: var(--ink); } .lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--text); max-width: 62ch; margin-bottom: 30px; } .micro { font-size: 13.5px; color: var(--muted-strong); margin-top: 14px; } /* Emphasis word inside a heading, the way the brand does it */ .hl { color: var(--lime); } /* --------------------------------------------------- 5. Layout primitives */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .sec { padding: 76px 0; } .sec--soft { background: var(--soft); } /* Blue emphasis panel: full-bleed edge to edge, but still carrying the brand's large corner radius, so the page background shows through at the corners. */ .panel { position: relative; overflow: hidden; padding: 84px 0; border-radius: var(--r-panel); background: var(--blue); color: var(--on-blue-text); isolation: isolate; } .panel h1, .panel h2, .panel h3 { color: var(--white); } .panel .lead { color: var(--on-blue-text); } .panel .micro { color: rgba(255, 255, 255, 0.92); } .panel strong, .panel b { color: var(--white); } /* Faint arcs echoing the brand hero background */ .panel::before { content: ''; position: absolute; inset: -30% -10% auto -30%; height: 160%; z-index: -1; background: radial-gradient(60% 60% at 12% 30%, rgba(255, 255, 255, 0.11), transparent 70%), radial-gradient(45% 45% at 88% 12%, rgba(255, 255, 255, 0.09), transparent 70%); pointer-events: none; } /* Decorative four-point sparkle */ .sparkle { position: absolute; z-index: -1; color: var(--lime); pointer-events: none; } .sparkle svg { width: 100%; height: auto; fill: currentColor; } .sparkle--hero { width: clamp(90px, 13vw, 190px); top: 6%; right: -22px; } .sparkle--price { width: clamp(70px, 8vw, 120px); bottom: 8%; left: -18px; } .sparkle--cta { width: clamp(70px, 8vw, 130px); top: 10%; right: -20px; } /* -------------------------------------------------------------- 6. Eyebrow Matched to robotzebra.agency's `.elementor-element-6599f17`: chip padding 5px 14px, border-radius 10px, transparent fill, 1px hairline rgba(99,110,223,.3) text 18px / 500 / 1.333, black dot 6px lime, radius 2px, 6px clear of the label, blinking on a 0.75s loop (their `flickerAnimation`: opacity 1 -> 0 -> 1) --------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; padding: 5px 14px; border: 1px solid var(--eyebrow-line); border-radius: 10px; background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.333; } .eyebrow::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 2px; background: var(--lime); animation: eyebrow-blink 0.75s infinite; } @keyframes eyebrow-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .panel .eyebrow { border-color: var(--on-blue-line); color: var(--white); } /* -------------------------------------------------------------- 7. Buttons Ported from robotzebra.agency's `.button-style.button-border`: shell border-radius 20px, 1px border, padding 6px 30px 6px 6px badge 48x48, border-radius 15px, lime, 18px black arrow label 16px / 1.625, weight 600, 10px clear of the badge Hover is three moves at once: a blue fill wipes rightward across the button, the badge turns blue with it, the label rolls up while a copy rolls in beneath it, and the arrow slides out right as a second slides in from left. One deliberate departure from the source: the agency site insets its fill (left:20px, top/bottom:6px, width -> calc(100% - 26px)), leaving a white frame around a rounded inner block. Here the fill covers the whole shell. --------------------------------------------------------------------------- */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; padding: 6px 30px 6px 6px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.625; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; overflow: hidden; /* clips the fill below to the rounded shell */ } /* The blue fill, wiping rightward across the whole button. inset:0 with an explicit width means `right` is ignored, so the block grows from the left edge and covers the shell completely — no white frame left around it. */ .btn::before { content: ''; position: absolute; z-index: 0; inset: 0; width: 0; background: var(--blue); transition: width 0.4s ease; } .btn:hover::before, .btn:focus-visible::before { width: 100%; } .btn:hover, .btn:focus-visible { border-color: var(--blue); } .btn__ico { position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; overflow: hidden; border-radius: 15px; background: var(--lime); transition: background 0.4s ease; } .btn:hover .btn__ico, .btn:focus-visible .btn__ico { background: var(--blue); } .btn__arw { position: absolute; width: 18px; height: 18px; stroke: var(--ink); stroke-width: 2; fill: none; transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .btn__arw:first-child { transition-delay: 0.1s; } .btn__arw + .btn__arw { transform: translateX(-200%); transition-delay: 0s; } .btn:hover .btn__arw:first-child, .btn:focus-visible .btn__arw:first-child { transform: translateX(200%); transition-delay: 0s; } .btn:hover .btn__arw + .btn__arw, .btn:focus-visible .btn__arw + .btn__arw { transform: translateX(0); transition-delay: 0.1s; } .btn__label { position: relative; z-index: 1; display: inline-block; margin-left: 10px; overflow: hidden; white-space: nowrap; transition: color 0.3s ease; } .btn__label > span { display: block; transition: transform 0.3s ease, opacity 0.3s ease; } /* the second copy sits on top, waiting below the fold of the label box */ .btn__label > span + span { position: absolute; inset: 0; transform: translateY(100%); opacity: 0; } .btn:hover .btn__label, .btn:focus-visible .btn__label { color: var(--white); } .btn:hover .btn__label > span:first-child, .btn:focus-visible .btn__label > span:first-child { transform: translateY(-100%); opacity: 0; } .btn:hover .btn__label > span + span, .btn:focus-visible .btn__label > span + span { transform: translateY(0); opacity: 1; } .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .panel .btn { border-color: transparent; } .panel .btn:focus-visible { outline-color: var(--white); } /* On a blue panel a blue fill would make the button vanish into the background, so it wipes black instead with a light arrow — the same substitution the agency site makes for its own on-blue button variant. */ .panel .btn::before { background: var(--ink); } .panel .btn:hover, .panel .btn:focus-visible { border-color: var(--ink); } .panel .btn:hover .btn__ico, .panel .btn:focus-visible .btn__ico { background: var(--ink); } .panel .btn:hover .btn__arw, .panel .btn:focus-visible .btn__arw { stroke: var(--white); } /* Small variant — the site's own 40x40 / radius-10 badge override */ .btn--sm { padding: 5px 22px 5px 5px; border-radius: 16px; font-size: 15px; } .btn--sm .btn__ico { width: 40px; height: 40px; border-radius: 10px; } .btn--sm .btn__arw { width: 16px; height: 16px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; } /* --------------------------------------------------------------- 8. Header */ .site-header { position: sticky; top: 0; z-index: 40; padding: 14px 0; background: rgba(250, 250, 250, 0.86); backdrop-filter: saturate(150%) blur(10px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--gutter); } .brand { display: inline-flex; align-items: center; flex-shrink: 0; /* the wordmark must never be squeezed by the CTA beside it */ padding: 11px 24px; border-radius: var(--r-pill); background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); text-decoration: none; } .brand img { width: auto; height: 34px; } /* ----------------------------------------------------------------- 9. Hero */ .hero { padding: clamp(56px, 7vw, 104px) 0 clamp(60px, 7vw, 108px); } .hero .lead { max-width: 58ch; margin-bottom: 24px; } /* Price anchor — lime highlight pill, the brand's accent move */ .price-anchor { display: inline-block; margin-bottom: 30px; padding: 11px 20px; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; } .benefit-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 8px; } .benefit { padding: 20px 18px; border: 1px solid var(--on-blue-line); border-radius: var(--r-card); background: var(--on-blue-fill); line-height: normal; } .benefit b { display: block; margin-bottom: 5px; color: var(--white); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; } .benefit span { font-size: 14.5px; color: rgba(255, 255, 255, 0.92); } /* ---------------------------------------------------------------- 10. Cards */ .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; } .card { padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); } .card h3 { margin-bottom: 8px; } .card p { font-size: 15.5px; line-height: 1.55; } /* --------------------------------------------------------------- 11. Agenda */ .agenda { margin-top: 8px; } .agenda__row { display: grid; grid-template-columns: 132px 1fr; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line); } .agenda__row:first-child { border-top: none; padding-top: 6px; } .agenda__time { /* it's a grid item, so it would stretch to the full column without this — most visible once the row collapses to one column on mobile */ align-self: start; justify-self: start; padding: 5px 13px; border-radius: var(--r-pill); background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; } .sec--soft .agenda__time { background: var(--white); } .agenda__row h3 { margin-bottom: 5px; } .agenda__row p { font-size: 15.5px; line-height: 1.55; margin: 0; } .deliverable { margin-top: 26px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); font-size: 16px; } /* ---------------------------------------------------------- 12. Facilitator */ .blist { list-style: none; margin-top: 4px; } .blist li { position: relative; padding: 13px 0 13px 30px; border-top: 1px solid var(--on-blue-line); font-size: 16px; line-height: 1.5; } .blist li:first-child { border-top: none; } .blist li::before { content: ''; position: absolute; left: 2px; top: 21px; width: 9px; height: 9px; border-radius: 2px; background: var(--lime); } /* ---------------------------------------------------- 13. Fit / not-fit cols */ .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; } .col { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); } .col--no { background: var(--soft); } .sec--soft .col--no { background: transparent; } .col h3 { margin-bottom: 10px; font-size: 17px; } .col ul { list-style: none; } .col li { position: relative; padding: 9px 0 9px 32px; font-size: 15.5px; line-height: 1.5; } .col li::before { position: absolute; left: 0; top: 11px; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; } .col--yes li::before { content: '\2713'; background: var(--ink); color: var(--lime); } .col--no li::before { content: '\2715'; background: #e4e3e9; color: var(--muted); } /* ---------------------------------------------------------------- 14. Proof */ .case { padding: 26px 24px; margin-bottom: 34px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); } .case h3 { margin-bottom: 8px; } .case p { font-size: 15.5px; margin-bottom: 0; } .logos-label { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 22px; } .logos { display: flex; flex-wrap: wrap; gap: 20px 44px; align-items: center; justify-content: center; } .logos img { width: auto; height: 32px; opacity: 0.55; filter: grayscale(100%); transition: opacity 0.2s ease, filter 0.2s ease; } .logos img:hover { opacity: 1; filter: none; } .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 38px; } .quote { display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); } .quote p { font-size: 16px; line-height: 1.6; margin-bottom: 18px; } .quote__who { margin-top: auto; font-size: 14px; } .quote__who b { display: block; font-weight: 600; } .quote__who span { color: var(--muted-strong); font-size: 13px; } /* ------------------------------------------------------------ 15. Logistics */ .logi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; } .logi__item { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); line-height: normal; } .logi__item b { display: block; margin-bottom: 6px; color: var(--blue-ink); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .logi__item span { font-size: 15.5px; line-height: 1.45; } /* ---------------------------------------------------------------- 16. Price */ /* The price panel centres, since it carries no heading of its own */ .pricing { text-align: center; } .price-box { max-width: 520px; margin: 6px auto 0; padding: 38px 30px; border-radius: var(--r-card); background: var(--white); text-align: center; } .price-box__amt { color: var(--ink); font-size: clamp(44px, 6vw, 64px); font-weight: 500; letter-spacing: var(--track); line-height: 1; } .price-box__amt small { font-size: 17px; font-weight: 500; color: var(--muted); letter-spacing: 0; } /* Explicit class, not `.price-box p` — a descendant selector would outrank .price-box__amt and silently shrink the headline figure. */ .price-box__note { margin: 14px auto 0; max-width: 34ch; color: var(--text); font-size: 16.5px; } /* ------------------------------------------------------------------ 17. FAQ */ .faq { padding: 22px 0; border-top: 1px solid var(--line); } .faq:first-of-type { border-top: none; padding-top: 4px; } .faq__q { display: block; margin-bottom: 7px; color: var(--ink); font-size: 17px; font-weight: 600; font-style: normal; letter-spacing: -0.01em; } /* renders quote marks by default — the copy supplies its own voice */ .faq__q::before, .faq__q::after { content: none; } .faq p { font-size: 15.5px; line-height: 1.6; margin-bottom: 0; } /* ------------------------------------------------------------ 18. Final CTA */ .footcta { text-align: center; } .footcta .lead { margin: 0 auto 10px; } .footcta .cta-row { justify-content: center; } /* Slot for the Calendly / HubSpot embed. White, so a scheduler dropped in looks native. Replace the inner placeholder with the provider snippet. */ .cal-slot { display: grid; place-items: center; min-height: 132px; margin-top: 26px; padding: 14px; border-radius: var(--r-card); background: var(--white); } .cal-slot__ph { width: 100%; padding: 30px 18px; border: 2px dashed var(--line); border-radius: var(--r-sm); color: var(--muted); font-size: 14px; } .contact-line { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; margin-top: 24px; font-size: 15.5px; font-weight: 500; } .contact-line a { padding-bottom: 2px; border-bottom: 1px solid var(--on-blue-line); color: var(--white); text-decoration: none; } .contact-line a:hover { border-bottom-color: var(--white); } /* --------------------------------------------------------------- 19. Footer */ .site-footer { padding: 34px 0 40px; text-align: center; color: var(--muted-strong); font-size: 13.5px; } .site-footer a { border-bottom: 1px solid var(--line); color: var(--muted-strong); text-decoration: none; } .site-footer a:hover { color: var(--ink); } /* -------------------------------------------------- 20. Sticky mobile CTA */ .mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(160%) blur(12px); } .mobile-cta .btn { width: 100%; justify-content: center; padding-right: 16px; } /* -------------------------------------------------------------- 21. A11y */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; background: var(--ink); color: var(--white); text-decoration: none; } .skip:focus { left: 0; } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------- 22. Responsive */ /* Brand breakpoint ladder: 1200 / 1024 / 880 / 767 / 479 */ @media (max-width: 1024px) { :root { --r-panel: 30px; } .sec { padding: 66px 0; } .panel { padding: 72px 0; } } /* 3 -> 2 columns on tablet */ @media (max-width: 1024px) and (min-width: 768px) { .grid3, .logi, .benefit-row { grid-template-columns: repeat(2, 1fr); } } /* Phones */ @media (max-width: 767px) { :root { --r-panel: 24px; --r-card: 16px; --gutter: 20px; } body { font-size: 16.5px; /* clear the sticky CTA bar */ padding-bottom: calc(84px + env(safe-area-inset-bottom)); } /* Header scrolls away on mobile so it never competes with the sticky bar */ .site-header { position: static; padding: 12px 0; background: none; backdrop-filter: none; } .sec { padding: 52px 0; } .panel { padding: 56px 0; } .hero { padding: 44px 0 50px; } h3 { font-size: 18px; } /* keeps the longest eyebrow ("What your team can do after three hours") on a single line rather than stretching the chip across the viewport */ .eyebrow { font-size: 16px; } .grid3, .benefit-row, .cols2, .logi, .quotes { grid-template-columns: 1fr; } /* Agenda stacks, time pill sits above the heading */ .agenda__row { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; } .logos { gap: 18px 30px; } .logos img { height: 26px; } .card, .col, .case, .quote { padding: 22px 20px; } .price-box { padding: 30px 22px; } .contact-line { flex-direction: column; gap: 6px; } .mobile-cta { display: block; } /* Sparkles bleed off a panel corner on mobile. Anything positioned mid-panel ends up as a sliver behind the content and reads as an accident. */ .sparkle--hero { top: auto; right: -34px; bottom: -30px; } /* The price panel is too compact on mobile to host one without it sitting behind the box — the hero and CTA sparkles carry the motif instead. */ .sparkle--price { display: none; } .sparkle--cta { top: -24px; right: -26px; } } @media (max-width: 479px) { /* one more step so the longest eyebrow still fits on a single line at the 375px iPhone width; below ~360px it wraps to two lines, which is fine */ .eyebrow { padding: 5px 12px; font-size: 15px; } .brand { padding: 9px 17px; } .brand img { height: 28px; } .btn--sm { padding: 4px 16px 4px 4px; border-radius: 14px; font-size: 14px; } .btn--sm .btn__ico { width: 36px; height: 36px; border-radius: 9px; } } /* Below ~380px the logo and the header CTA cannot both sit at full size. The sticky bottom bar already carries the CTA on mobile, so the header keeps the logo rather than shrinking it. */ @media (max-width: 379px) { .site-header .btn { display: none; } } /* ------------------------------------------------------- 23. Preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; /* essential alongside the duration: without it an `infinite` animation (the eyebrow dot) would loop every 0.01ms instead of stopping */ animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media print { .site-header, .mobile-cta, .sparkle { display: none !important; } body { padding-bottom: 0; background: #fff; } .panel { border: 1px solid #ccc; background: #fff; color: #000; } .panel h1, .panel h2, .panel h3, .panel .lead, .contact-line a { color: #000; } }