/* ============================================================ OptyPeptides — Meridian Design tokens + component styles Fonts: DM Serif Display (400/italic) + Manrope (400-800) ============================================================ */ /* Fonts loaded via in — no @import (render-blocking) */ /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } img, svg { display: block; } a { color: inherit; } button { font: inherit; cursor: pointer; border: none; background: none; } /* ── Tokens ─────────────────────────────────────────────────── */ :root { --bg: #F4F1E8; --panel: #FBFAF4; --ink: #262B27; --muted: #6A726B; --faint: #9AA096; --sage: #7C9079; --sage-deep: #465A4A; --sage-hover: #384A3B; --line: rgba(38,43,39,.12); --ph-fill: #E6EADD; --on-dark: #D6D9D2; --on-dark-strong:#F4F1E8; --on-dark-faint: #7A8077; --serif: "DM Serif Display", Georgia, serif; --sans: "Manrope", system-ui, -apple-system, sans-serif; --wrap-max: 1180px; --wrap-pad: 56px; --section-y: 118px; --r-btn: 10px; --r-card: 16px; --r-pill: 999px; --r-mark: 9px; --shadow-float: 0 -2px 40px rgba(70,90,74,.07); --shadow-card: 0 24px 60px rgba(70,90,74,.08); --ease: .25s ease; } @media (max-width: 768px) { :root { --wrap-pad: 22px; --section-y: 72px; } } /* ── Base ───────────────────────────────────────────────────── */ body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15.5px; line-height: 1.62; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; color: var(--ink); text-wrap: balance; } p { text-wrap: pretty; } .it { font-style: italic; color: var(--sage-deep); } /* ── Layout ─────────────────────────────────────────────────── */ .wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); } .blk { padding: var(--section-y) 0; } .panel-bg { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ── Eyebrow ────────────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-deep); } .eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .55; flex: none; } .eyebrow-center { justify-content: center; } .eyebrow-center::before { display: none; } /* ── Buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--sans); font-weight: 700; font-size: 14.5px; border-radius: var(--r-btn); padding: 15px 28px; text-decoration: none; transition: var(--ease); cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--sage-deep); color: var(--panel); } .btn-primary:hover { background: var(--sage-hover); } .btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--sage-deep); color: var(--sage-deep); } .btn-full { width: 100%; } /* ── Logo ────────────────────────────────────────────────────── */ .brand { display: flex; align-items: center; text-decoration: none; flex: none; } .brand-logo { height: 32px; width: auto; display: block; } footer .brand-logo { /* SVG is dark — invert to show on dark footer bg */ filter: brightness(0) invert(1); opacity: 0.9; } /* ── Header / Nav ───────────────────────────────────────────── */ header { position: sticky; top: 0; z-index: 100; background: rgba(244,241,232,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; } .menu { display: flex; align-items: center; gap: 36px; } .menu a { font-size: 14.5px; color: var(--muted); text-decoration: none; font-weight: 600; transition: color var(--ease); } .menu a:hover { color: var(--ink); } .nav-cta { display: flex; align-items: center; gap: 20px; flex: none; } .nav-cta .login { font-size: 14.5px; color: var(--muted); text-decoration: none; font-weight: 600; white-space: nowrap; transition: color var(--ease); } .nav-cta .login:hover { color: var(--ink); } .nav-cta .btn { padding: 11px 22px; } /* Hamburger (mobile) */ .hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; cursor: pointer; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: var(--ease); } .nav-mobile { display: none; flex-direction: column; gap: 0; background: var(--panel); border-bottom: 1px solid var(--line); padding: 12px 0; } .nav-mobile a { display: block; padding: 12px var(--wrap-pad); font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; transition: color var(--ease); } .nav-mobile a:hover { color: var(--ink); } .nav-mobile .btn { margin: 12px var(--wrap-pad) 4px; } .nav-mobile.open { display: flex; } /* ── Download bar ───────────────────────────────────────────── */ .download-bar { height: 44px; background: var(--sage-deep); display: flex; align-items: center; } .download-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); white-space: nowrap; } .download-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--panel); text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill); padding: 6px 14px; transition: background var(--ease), border-color var(--ease); white-space: nowrap; } .download-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.35); } @media (max-width: 480px) { .download-label { display: none; } .download-bar { height: auto; padding: 8px 0; } } /* ── Image placeholder ──────────────────────────────────────── */ .ph { position: relative; display: flex; align-items: flex-end; overflow: hidden; background-color: var(--ph-fill); background-image: repeating-linear-gradient( 135deg, rgba(70,90,74,.11) 0 1px, transparent 1px 12px ); } .ph span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: .05em; color: var(--sage-deep); background: rgba(251,250,244,.88); padding: 6px 11px; border-radius: 4px; margin: 14px; text-transform: lowercase; } /* ── Browser mock ───────────────────────────────────────────── */ .browser { max-width: 1000px; margin: 64px auto 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-float); overflow: hidden; } .browser .bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .browser .dot { width: 11px; height: 11px; border-radius: 50%; background: #D8D6CB; } .browser .addr { margin-left: 14px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--faint); background: var(--bg); padding: 5px 14px; border-radius: 6px; } .browser .ph { height: 430px; width: 100%; } /* ── Hero ───────────────────────────────────────────────────── */ .hero { text-align: center; padding: 76px 0 0; } .hero h1 { font-size: 62px; margin: 24px auto 0; max-width: 18ch; } .hero .sub { font-size: 18px; color: var(--muted); max-width: 52ch; margin: 26px auto 0; } .hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; } .trust { display: flex; justify-content: center; gap: 40px; margin-top: 40px; flex-wrap: wrap; } .trust .item { display: flex; flex-direction: column; align-items: center; } .trust .n { font-family: var(--serif); font-size: 30px; color: var(--sage-deep); line-height: 1; } .trust .l { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 8px; } /* ── Section head (centered) ────────────────────────────────── */ .sec-head { text-align: center; max-width: 680px; margin: 0 auto; } .sec-head h2 { font-size: 50px; margin-top: 18px; } .sec-head .lead { font-size: 18px; color: var(--muted); margin-top: 18px; } /* ── Split section ──────────────────────────────────────────── */ .split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } .split-head h2 { font-size: 50px; margin-top: 20px; } .split-head .lead { font-size: 18px; color: var(--muted); margin-top: 20px; max-width: 34ch; } .stack { display: flex; flex-direction: column; gap: 22px; } /* ── Card ───────────────────────────────────────────────────── */ .card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 38px 40px; } .panel-bg .card { background: var(--panel); } .card .tag { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); } .card h3 { font-size: 30px; margin: 12px 0 12px; } .card .desc { color: var(--muted); font-size: 15.5px; max-width: 48ch; } .card ul { list-style: none; margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .card li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; } .card li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); flex: none; } /* ── Steps ──────────────────────────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 70px; } .step { text-align: left; } .step .num { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: var(--sage-deep); color: var(--panel); font-family: var(--serif); font-size: 24px; } .step h3 { font-size: 25px; margin: 22px 0 12px; } .step p { color: var(--muted); font-size: 15.5px; } /* ── Capability cards ───────────────────────────────────────── */ .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; } .cap { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 34px 32px; transition: border-color var(--ease), transform var(--ease); } .panel-bg .cap { background: var(--panel); } .cap:hover { border-color: var(--sage); transform: translateY(-3px); } .cap .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--ph-fill); display: flex; align-items: center; justify-content: center; } .cap .ico svg { width: 22px; height: 22px; stroke: var(--sage-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cap h3 { font-size: 23px; margin: 22px 0 10px; } .cap p { color: var(--muted); font-size: 15px; } /* ── Why / benefits ─────────────────────────────────────────── */ .why { display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; } .why .ph { height: 100%; min-height: 440px; width: 100%; border-radius: 18px; } .why-list { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; } .why-item { display: flex; gap: 20px; align-items: flex-start; } .why-item .bdg { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--sage-deep); color: var(--panel); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 19px; } .why-item h3 { font-size: 21px; margin-bottom: 6px; } .why-item p { color: var(--muted); font-size: 15px; max-width: 42ch; } /* ── Pricing ────────────────────────────────────────────────── */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; align-items: stretch; } .price-grid-4 { grid-template-columns: repeat(4, 1fr); } .pprice-label { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 12px 0 4px; line-height: 1.1; } .tier.feat .pprice-label { color: #F4F1E8; } .tier { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 40px 36px; display: flex; flex-direction: column; } .panel-bg .tier { background: var(--panel); } .tier.feat { background: var(--ink); color: #D6D9D2; border-color: var(--ink); } .tier .pname { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); } .tier.feat .pname { color: #A9BBA0; } .tier .pprice { font-family: var(--serif); font-size: 46px; line-height: 1; margin: 18px 0 4px; color: var(--ink); } .tier.feat .pprice { color: #F4F1E8; } .tier .pper { font-size: 13px; color: var(--faint); } .tier .pdesc { font-size: 14.5px; color: var(--muted); margin: 18px 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .tier.feat .pdesc { color: #A9B0A8; border-color: rgba(255,255,255,.14); } .tier ul { list-style: none; display: flex; flex-direction: column; gap: 13px; flex: 1; } .tier li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; } .tier li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; stroke: var(--sage-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tier.feat li svg { stroke: #A9BBA0; } .tier .btn { margin-top: 30px; justify-content: center; } .tier.feat .btn-primary { background: var(--sage); color: var(--ink); } .tier.feat .btn-primary:hover { background: #8fa389; } .price-ribbon { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); background: rgba(124,144,121,.16); padding: 5px 12px; border-radius: var(--r-pill); align-self: flex-start; margin-bottom: 18px; } /* ── Mission band ───────────────────────────────────────────── */ .mission { position: relative; background-color: var(--sage-deep); background-image: url('/images/clinic-lobby.jpg'); background-size: cover; background-position: center; color: #EAEFE3; padding: 120px 0; text-align: center; overflow: hidden; } .mission::before { content: ""; position: absolute; inset: 0; background: rgba(70, 90, 74, 0.82); z-index: 0; } .mission .wrap { position: relative; z-index: 1; } .mission .eyebrow { color: #C5D2BC; justify-content: center; } .mission .eyebrow::before { display: none; } .mission h2 { color: #F4F1E8; font-size: 46px; max-width: 20ch; margin: 18px auto 0; line-height: 1.18; } .mission p { color: #CDD7C6; font-size: 18px; max-width: 60ch; margin: 26px auto 0; } /* ── Demo form ──────────────────────────────────────────────── */ .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .demo-copy .lead { font-size: 18px; color: var(--muted); max-width: 42ch; margin-top: 20px; } .demo-copy h2 { font-size: 50px; margin-top: 20px; } .demo-checks { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; } .demo-check { display: flex; gap: 14px; align-items: center; } .demo-check .bdg { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--sage-deep); color: var(--panel); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 15px; } .demo-check p { font-weight: 600; font-size: 15px; } .form-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 44px 42px; box-shadow: var(--shadow-card); } .field { margin-bottom: 20px; } .field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink); margin-bottom: 8px; } .field input, .field select, .field textarea { width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 13px 15px; transition: border-color var(--ease), box-shadow var(--ease); appearance: none; } .field input::placeholder, .field textarea::placeholder { color: var(--faint); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(70,90,74,.12); } .field textarea { resize: vertical; min-height: 90px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field-row .field { margin-bottom: 0; } .form-note { font-size: 12.5px; color: var(--faint); text-align: center; margin-top: 14px; } /* ── Footer ─────────────────────────────────────────────────── */ footer { background: var(--ink); color: #D6D9D2; padding: 62px 0 38px; } .fnav { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; } footer .brand { color: #F4F1E8; } footer .mark { background: var(--sage); } footer .mark::after { background: var(--ink); } footer .tagline { color: #8E948B; font-size: 14.5px; max-width: 30ch; margin-top: 18px; } .fcol h4 { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #7A8077; font-weight: 700; margin-bottom: 18px; } .fcol a { display: block; color: #CCD0C9; text-decoration: none; font-size: 15px; margin-bottom: 13px; transition: color var(--ease); } .fcol a:hover { color: #fff; } .copy { border-top: 1px solid rgba(255,255,255,.1); margin-top: 50px; padding-top: 24px; font-size: 13px; color: #7A8077; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 1024px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } .price-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } .price-grid-4 { grid-template-columns: repeat(2, 1fr); max-width: 100%; } } @media (max-width: 768px) { /* Nav */ .menu, .nav-cta { display: none; } .hamburger { display: flex; } /* Hero */ .hero h1 { font-size: 38px; } .hero .sub { font-size: 16px; } /* Sections */ .sec-head h2 { font-size: 32px; } .split { grid-template-columns: 1fr; gap: 48px; } .split-head h2 { font-size: 32px; } .steps { grid-template-columns: 1fr; } .cap-grid { grid-template-columns: 1fr; } .why { grid-template-columns: 1fr; } .why .ph { min-height: 280px; } .demo-grid { grid-template-columns: 1fr; } .mission h2 { font-size: 32px; } .form-card { padding: 32px 24px; } .field-row { grid-template-columns: 1fr; } .field-row .field { margin-bottom: 20px; } /* Cards */ .card ul { grid-template-columns: 1fr; } .browser .ph { height: 240px; } .price-grid-4 { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } /* Footer */ .fnav { flex-direction: column; gap: 32px; } }