/* ============================================================= Peraspera Consulting — Marketing landing Built on the Peraspera (Carbon-based) design system. Source of truth: Claude Design project 5c71cb84-7ecb-4a23-a307-1392be0e2d63 / "Peraspera Landing Options.dc.html" Converted from the design-canvas doc to plain HTML/CSS. ============================================================= */ @import url('tokens/fonts.css'); @import url('tokens/colors.css'); @import url('tokens/typography.css'); @import url('tokens/spacing.css'); @import url('tokens/grid.css'); /* ---- base ---- */ *,*::before,*::after{box-sizing:border-box} body.pa-landing{ margin:0; background:var(--surface-bg); color:var(--text-primary); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; } .pa-landing a{color:var(--link-primary);text-decoration:none} .pa-landing a:hover{color:var(--link-primary-hover)} .pa-landing h1,.pa-landing h2,.pa-landing h3{letter-spacing:var(--ls-heading)} .pa-landing img{max-width:100%} /* ---- Button (Carbon: square, 3 sizes, 4 kinds) ---- */ .pa-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-03); height:2.5rem;padding:0 var(--spacing-05); font-family:var(--font-sans);font-size:.875rem;font-weight:var(--fw-regular); letter-spacing:.16px;line-height:1; border:1px solid transparent;border-radius:var(--radius-sm); cursor:pointer;text-decoration:none;white-space:nowrap; transition:background var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard); } .pa-btn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .pa-btn--sm{height:2rem} .pa-btn--lg{height:3rem;padding:0 var(--spacing-06)} .pa-btn--primary{background:var(--button-primary);color:var(--text-on-color)} .pa-btn--primary:hover{background:var(--button-primary-hover);color:var(--text-on-color)} .pa-btn--secondary{background:var(--button-secondary);color:var(--text-on-color)} .pa-btn--secondary:hover{background:var(--button-secondary-hover);color:var(--text-on-color)} .pa-btn--tertiary{background:transparent;color:var(--interactive);border-color:var(--interactive)} .pa-btn--tertiary:hover{background:var(--interactive);color:var(--text-on-color)} .pa-btn--tertiary:hover a{color:var(--text-on-color)} .pa-btn--ghost{background:transparent;color:var(--interactive)} .pa-btn--ghost:hover{background:var(--surface-hover);color:var(--interactive)} .pa-btn--block{width:100%} /* ---- Tag (Carbon: pill) ---- */ .pa-tag{ display:inline-flex;align-items:center;gap:var(--spacing-02); height:1.5rem;padding:0 var(--spacing-03); font-family:var(--font-sans);font-size:.75rem;line-height:1; border-radius:999px;white-space:nowrap; } .pa-tag--sm{height:1.25rem;font-size:.6875rem} .pa-tag--teal{background:rgba(0,157,154,.16);color:var(--pa-teal-70)} .pa-tag--blue{background:var(--pa-blue-20);color:var(--pa-blue-80)} /* ---- TextInput (Carbon) ---- */ .pa-field{display:flex;flex-direction:column;gap:var(--spacing-02)} .pa-field label{font-size:.75rem;color:var(--text-secondary);letter-spacing:.32px} .pa-field input{ height:2.5rem;width:100%;padding:0 var(--spacing-05); font-family:var(--font-sans);font-size:.875rem;color:var(--text-primary); background:var(--surface-field); border:none;border-bottom:1px solid var(--border-strong); border-radius:var(--radius-sm); } .pa-field input::placeholder{color:var(--text-placeholder)} .pa-field input:focus{outline:2px solid var(--focus);outline-offset:-2px} /* ---- FAQ (native details/summary) ---- */ .pa-faq details{border-top:1px solid var(--border-subtle)} .pa-faq details:last-child{border-bottom:1px solid var(--border-subtle)} .pa-faq summary{ display:flex;align-items:center;gap:var(--spacing-04); padding:var(--spacing-06) 0;cursor:pointer;list-style:none; font-size:1rem;color:var(--text-primary); } .pa-faq summary::-webkit-details-marker{display:none} .pa-faq summary .pa-faq-q{flex:1} .pa-faq summary .pa-faq-chevron{ transition:transform var(--motion-fast) var(--ease-standard); } .pa-faq details[open] summary .pa-faq-chevron{transform:rotate(180deg)} .pa-faq .pa-faq-a{ font-size:.875rem;color:var(--text-secondary);line-height:1.6; margin:0 0 var(--spacing-06);max-width:680px; } /* ---- icons as flat images ---- */ .pa-ico{display:inline-block;vertical-align:middle} /* ---- product-screenshot placeholder (flat block per DS convention) ---- */ .pa-shot{ aspect-ratio:16/10;overflow:hidden;border:1px solid var(--border-subtle); background: linear-gradient(135deg,var(--pa-blue-90),var(--pa-blue-100)); position:relative; } .pa-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block} .pa-shot__label{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; flex-direction:column;gap:var(--spacing-03);text-align:center;padding:var(--spacing-07); } .pa-shot__label .plog{color:var(--pa-blue-30)} .pa-shot__label span{font-size:.8125rem;color:var(--pa-blue-40)} /* Hero screenshot carousel: real mockup captures, cross-fading — per Landing Dark mockup's carousel frame (16/8, radius 16px, glow ring). */ .pa-hero-carousel{ position:relative;aspect-ratio:16/8;max-width:880px;margin:0 auto; border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1); background:var(--surface-layer-01); } .pa-hero-carousel img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top; opacity:0;transition:opacity 1s ease; } .pa-hero-carousel img.is-active{opacity:1} /* ---- hero glow (mockup: radial blur pulsing behind the eyebrow/heading) ---- */ .pa-hero-glow{ position:absolute;top:-120px;left:50%;transform:translateX(-50%); width:640px;height:640px;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(15,98,254,.35),transparent 70%); filter:blur(40px); animation:pa-glow-pulse 6s ease-in-out infinite; } @keyframes pa-glow-pulse{ 0%,100%{opacity:.55;transform:translateX(-50%) scale(1)} 50%{opacity:.85;transform:translateX(-50%) scale(1.06)} } /* The section's own breakpoints. `.cds-grid` collapses 16 columns to 8 then 4 around the carousel; the cards INSIDE a slide are a separate grid and need their own step down, or three cards share a phone's width. */ @media (max-width:1055px){ .pa-blog-carousel__slide{grid-template-columns:repeat(2,1fr);gap:24px} } @media (max-width:671px){ .pa-blog-carousel__slide{grid-template-columns:1fr;gap:32px} } @media (prefers-reduced-motion:reduce){ .pa-hero-glow{animation:none} } /* ---- CTA band glow (mockup: static teal radial blur, no pulse) ---- */ .pa-cta-glow{ position:absolute;top:0;left:50%;transform:translateX(-50%); width:500px;height:500px;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(0,157,154,.25),transparent 70%); filter:blur(50px); } /* ---- product-logo wordmark (footer) ---- */ .pa-wordmark{ font-family:var(--font-mono);font-weight:500;font-size:1rem; color:var(--pa-white);letter-spacing:.02em;line-height:1; } .pa-wordmark small{display:block;font-size:.625rem;color:var(--pa-gray-40);letter-spacing:.18em;margin-top:4px} /* ---- trust-strip logo type ---- */ .plog{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--pa-gray-50);letter-spacing:.02em;white-space:nowrap} /* ---- registration modal ---- */ .pa-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:var(--surface-overlay)} .pa-modal.is-open{display:flex} .pa-modal__card{background:var(--surface-bg);width:420px;max-width:90vw;padding:var(--spacing-07);position:relative;box-shadow:0 8px 24px var(--shadow-color)} .pa-modal__close{position:absolute;top:var(--spacing-05);right:var(--spacing-05);cursor:pointer;background:none;border:none;padding:0;line-height:0} .pa-modal__ok{display:flex;flex-direction:column;gap:var(--spacing-03);align-items:flex-start} /* ---- header brand logo (recolor black icon PNG to white via filter, since no logo-icon-white.png asset exists; preserves exact icon shape) ---- */ .pa-header-brand img{filter:brightness(0) invert(1)} /* ---- logged-in header account menu (burger + avatar + dropdown) ---- */ .pa-header-burger{ display:flex;flex-direction:column;justify-content:center;gap:5px; width:20px;height:14px;background:transparent;border:none;cursor:pointer;padding:0; } .pa-header-burger span{display:block;width:20px;height:2px;background:var(--text-primary)} .pa-header-avatar{ width:32px;height:32px;border-radius:50%;background:var(--interactive);color:var(--text-on-color); display:flex;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:12px;flex-shrink:0; } .pa-header-menu{ position:absolute;top:44px;right:0;width:200px; background:var(--surface-layer-01);border:1px solid var(--border-subtle); box-shadow:0 8px 24px var(--shadow-color);z-index:40; display:none;flex-direction:column; } .pa-header-menu.is-open{display:flex} .pa-header-menu a{ padding:12px 16px;font-size:14px;color:var(--text-primary); border-bottom:1px solid var(--border-subtle); } .pa-header-menu a:last-child{border-bottom:none} .pa-header-menu a:hover{background:var(--surface-hover);color:var(--text-primary)} /* ---- responsive header / mobile nav ---- */ .pa-header-toggle{ display:none;flex-direction:column;justify-content:center;gap:5px; width:32px;height:32px;flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:0; } .pa-header-toggle span{display:block;width:20px;height:2px;background:var(--text-primary);transition:transform .15s ease,opacity .15s ease} .pa-header-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .pa-header-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .pa-header-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---- responsive ---- */ /* Header: logo + toggle on one row; full nav link list collapses into a dropdown below, shown only via .is-open. Breakpoint matches tokens/grid.css's OWN 1055px breakpoint (not the narrower 671px one below) — that generic rule forces every cds-col-span-N child (brand/ nav/actions all three) onto its own full-width row starting at 1055px, so the hamburger has to take over at that same width or there's a gap between 672-1055px where cards stack but no toggle exists yet to collapse the nav — cramming brand+nav+actions into a fixed 64px row with no way to open/close nav. */ @media (max-width:1055px){ .pa-header-row{height:auto !important;min-height:64px;padding:10px 0} .pa-header-brand{grid-column:1 / span 2 !important;grid-row:1} .pa-header-actions{grid-column:3 / span 2 !important;grid-row:1;justify-content:flex-end;gap:8px} .pa-header-toggle{display:flex} .pa-header-nav{ /* !important: the