/* ========================================================================== D ORDER — Landing page styles Standalone stylesheet (no build step). Brand palette taken from Figma: accent #b52655, dark #290f17, light pink #fdecf1. ========================================================================== */ /* ---- Fonts -------------------------------------------------------------- */ @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeue-Light.woff2') format('woff2'), url('fonts/HelveticaNeue-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeue-Roman.woff2') format('woff2'), url('fonts/HelveticaNeue-Roman.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeue-Medium.woff2') format('woff2'), url('fonts/HelveticaNeue-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeue-Bold.woff2') format('woff2'), url('fonts/HelveticaNeue-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* ---- Tokens ------------------------------------------------------------- */ :root { --accent: #b52655; --accent-dark: #9c1f48; --dark: #290f17; --pink: #fdecf1; --pink-2: #fbe4ec; --text: #290f17; --muted: #6b5b61; --border: #eaeaea; --white: #ffffff; --container: 1220px; --radius: 16px; --radius-lg: 24px; --pad-x: 24px; } /* ---- Reset / base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--text); background: var(--white); line-height: 1.5; /* clip (not hidden) prevents horizontal scroll without making a scroll container — which would break the sticky header. */ overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p { margin: 0; } h1, h2, h3 { overflow-wrap: break-word; word-break: normal; hyphens: auto; } .container { width: 100%; /* Content is exactly --container (1220px) wide, with 110px design margins at 1440. */ padding-inline: max(var(--pad-x), calc((100vw - var(--container)) / 2)); } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 45px; padding: 0 24px; border-radius: 8px; font-size: 16px; font-weight: 500; border: 1px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease; white-space: nowrap; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-dark); } .btn-outline-dark { background: transparent; color: var(--dark); border-color: var(--dark); } .btn-outline-dark:hover { background: var(--dark); color: #fff; } .btn-light { background: #fff; color: var(--accent); } .btn-light:hover { background: #f4dfe7; } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } .btn-outline-light:hover { background: rgba(255,255,255,.12); } /* App-store style button (dark) */ .btn-store { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px; border-radius: 10px; background: var(--dark); color: #fff; font-size: 15px; font-weight: 500; transition: opacity .18s ease; } .btn-store:hover { opacity: .88; } .btn-store svg { width: 22px; height: 22px; flex: none; } .btn-store .store-ico { width: 20px; height: 22px; flex: none; object-fit: contain; } /* ---- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--border); } /* Offset anchor scrolling for the sticky header */ #funkcijos, #duk, #kontaktai { scroll-margin-top: 90px; } .site-header .container { height: 80px; display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; flex: none; } .brand svg, .brand img { height: 26px; width: auto; } /* Wrapper is layout-neutral on desktop; becomes the dropdown panel on mobile. */ .nav-drawer { display: contents; } .main-nav { display: flex; align-items: center; gap: 32px; margin-left: 32px; } .main-nav a { position: relative; font-size: 16px; font-weight: 500; color: var(--dark); padding: 4px 0; } .main-nav a:hover { color: var(--accent); } .main-nav a.is-active { color: var(--accent); } .main-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: #fff; align-items: center; justify-content: center; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 2px; background: var(--dark); position: relative; transition: transform .2s ease, opacity .2s ease; } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } /* ---- Section scaffolding ------------------------------------------------ */ section { position: relative; } .section-pad { padding: 100px 0; } .eyebrow { /* reserved */ } .h-display { font-size: 40px; line-height: 1.2; font-weight: 700; letter-spacing: -0.5px; } .lead { font-size: 16px; line-height: 1.65; color: var(--muted); } .two-col { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; } .two-col.reverse .col-visual { order: -1; } /* ---- Hero --------------------------------------------------------------- */ .hero { background: var(--accent); color: #fff; overflow: hidden; } .hero .container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding-top: 70px; padding-bottom: 70px; } .hero h1 { font-size: 40px; line-height: 1.18; font-weight: 700; letter-spacing: -0.5px; max-width: 560px; } .hero p { margin-top: 22px; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.9); max-width: 540px; } .hero .btn-row { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; } .hero-visual { position: relative; min-height: 430px; } .hero-devices { display: block; width: 100%; max-width: 660px; height: auto; margin-left: auto; } /* device mockup placeholder */ .device-laptop { position: relative; width: 100%; max-width: 600px; margin-left: auto; } .device-laptop .screen { border-radius: 12px 12px 0 0; border: 8px solid #1c1c1e; border-bottom: none; background: #fff; aspect-ratio: 16 / 10; overflow: hidden; } .device-laptop .base { height: 14px; background: #cfd2d6; border-radius: 0 0 12px 12px; margin: 0 -6%; } .device-phone { position: absolute; right: -8px; bottom: -10px; width: 150px; border: 7px solid #1c1c1e; border-radius: 26px; background: #fff; aspect-ratio: 9 / 19; overflow: hidden; } .hero-card { position: absolute; top: 14px; right: 56px; width: 320px; background: #fff; color: var(--text); border-radius: var(--radius-lg); padding: 32px 28px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.18); } .hero-card .crown { width: 56px; height: 56px; margin: 0 auto 16px; color: var(--accent); } .hero-card h3 { font-size: 28px; font-weight: 700; line-height: 1.15; } .hero-card p { margin-top: 10px; font-size: 15px; color: var(--muted); } .hero-card .btn { margin-top: 22px; width: 100%; } /* ---- Placeholder media (raster screenshots / photo) --------------------- */ .media-placeholder { position: relative; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%); border: 1px dashed rgba(181,38,85,.35); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: rgba(181,38,85,.55); font-size: 13px; font-weight: 500; text-align: center; min-height: 120px; } .media-placeholder span { padding: 12px; } /* Browser window mockup */ .browser { border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(41,15,23,.12); overflow: hidden; border: 1px solid #eee; } .browser .bar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #f3f3f5; border-bottom: 1px solid #e7e7ea; } .browser .bar i { width: 12px; height: 12px; border-radius: 50%; display: block; } .browser .bar i:nth-child(1) { background: #ff5f57; } .browser .bar i:nth-child(2) { background: #febc2e; } .browser .bar i:nth-child(3) { background: #28c840; } .browser .viewport { aspect-ratio: 16 / 10; } .browser .viewport .media-placeholder { height: 100%; border: none; border-radius: 0; } /* ---- Icon row (Viskas, ko reikia) -------------------------------------- */ .icon-row { margin-top: 28px; display: flex; align-items: center; gap: 22px; color: var(--accent); flex-wrap: wrap; } .icon-row svg { width: 24px; height: 24px; } .icon-row-img { margin-top: 30px; height: 22px; width: auto; display: block; } /* Real exported visuals */ .col-visual-bleed { margin-right: calc(-1 * max(var(--pad-x), (100vw - var(--container)) / 2)); } .viskas-browser { display: block; width: 100%; height: auto; } .dirbk-phones, .phones img { display: block; } .phones .phone-back { position: relative; z-index: 1; width: 218px; height: auto; transform: translate(58px, -8px) rotate(-4deg); } .phones .phone-front { position: relative; z-index: 2; width: 242px; height: auto; transform: translate(-46px, 24px); } .device-combo .uzsakymas-devices { position: relative; z-index: 1; width: 100%; max-width: 610px; height: auto; display: block; margin: 0 auto; } .dentist-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .why-icon img { width: 32px; height: 32px; display: block; object-fit: contain; } /* ---- Bullet list -------------------------------------------------------- */ .feature-list { margin-top: 26px; display: grid; gap: 14px; } .feature-list li { position: relative; padding-left: 32px; font-size: 16px; font-weight: 500; line-height: 1.4; } .feature-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 14px no-repeat; } /* Light-pink sections */ .bg-pink { background: var(--pink); } .bg-white { background: #fff; } /* ---- "Dirbk" phones ----------------------------------------------------- */ .phones { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; } .phones::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(181,38,85,.16) 0%, rgba(181,38,85,.06) 55%, transparent 70%); } .phones .device-phone-lg { position: relative; width: 210px; border: 9px solid #1c1c1e; border-radius: 34px; background: #fff; aspect-ratio: 9 / 19; overflow: hidden; box-shadow: 0 18px 50px rgba(41,15,23,.18); } .phones .device-phone-lg.back { position: absolute; left: calc(50% - 150px); width: 190px; transform: rotate(-6deg); opacity: .96; } .phones .device-phone-lg.front { transform: translateX(40px); } /* ---- Laptop + phone combo (Vienas užsakymas) ---------------------------- */ .device-combo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 400px; } .device-combo::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(181,38,85,.14) 0%, rgba(181,38,85,.05) 58%, transparent 70%); z-index: 0; } .device-combo .device-laptop { position: relative; z-index: 1; width: 100%; max-width: 520px; margin: 0 auto; } .device-combo .device-phone { z-index: 2; right: 6px; bottom: -6px; } /* ---- Dentist photo (full-bleed right) ----------------------------------- */ .photo-frame { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; } .photo-frame .media-placeholder { height: 100%; border-radius: 0; } .gydytojas { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .gydytojas-text { padding-block: 100px; padding-left: max(var(--pad-x), calc((100vw - var(--container)) / 2)); padding-right: 72px; } .gydytojas-photo { align-self: stretch; min-height: 560px; display: flex; } .gydytojas-photo .photo-frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: var(--radius-lg) 0 0 var(--radius-lg); } /* ---- Dark sections (Kodėl, FAQ) ---------------------------------------- */ .section-dark { background: var(--dark); color: #fff; } .section-dark .h-display { color: #fff; } .section-title-center { text-align: center; margin-bottom: 64px; } .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 80px; max-width: 1000px; margin: 0 auto; } .why-item { display: flex; gap: 20px; align-items: flex-start; } .why-icon { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--pink); color: var(--accent); display: flex; align-items: center; justify-content: center; } .why-icon svg { width: 30px; height: 30px; } .why-item p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82); } /* ---- FAQ accordion (light) --------------------------------------------- */ .faq-section { overflow: hidden; } .faq-section::after { /* faint concentric circle decoration on the right, as in the design */ content: ""; position: absolute; right: -180px; top: 50%; transform: translateY(-50%); width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, transparent 0 38%, rgba(181,38,85,.06) 38% 39%, transparent 39%), radial-gradient(circle, transparent 0 48%, rgba(181,38,85,.06) 48% 49%, transparent 49%), radial-gradient(circle, transparent 0 58%, rgba(181,38,85,.06) 58% 59%, transparent 59%), radial-gradient(circle, transparent 0 68%, rgba(181,38,85,.05) 68% 69%, transparent 69%); pointer-events: none; } .faq { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; } .faq-item { border-bottom: 1px solid #ececec; } .faq-q { width: 100%; background: none; border: none; color: var(--dark); text-align: left; font-size: 16px; font-weight: 700; padding: 22px 40px 22px 0; position: relative; display: block; } .faq-q::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(0deg); font-size: 24px; font-weight: 400; line-height: 1; color: var(--accent); transition: transform .3s ease; } .faq-q { transition: color .25s ease; } .faq-item.open .faq-q { color: var(--accent); } .faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); } .faq-a { overflow: hidden; max-height: 0; opacity: 0; padding: 0 40px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); font-weight: 300; transition: max-height .4s ease, opacity .3s ease, padding-bottom .4s ease; } .faq-item.open .faq-a { max-height: 320px; opacity: 1; padding-bottom: 24px; } /* ---- CTA band ----------------------------------------------------------- */ .cta { background: var(--accent); color: #fff; text-align: center; overflow: hidden; } .cta .container { position: relative; z-index: 1; padding-block: 70px; } .cta::before { content: ""; position: absolute; inset: 0; background: url('expoted-assets/bacgkround-vector.svg') center / cover no-repeat; z-index: 0; pointer-events: none; } .cta h2 { font-size: 40px; font-weight: 700; line-height: 1.2; max-width: 760px; margin: 0 auto; } .cta .btn-row { margin-top: 30px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---- Contact ------------------------------------------------------------ */ .contact { display: grid; grid-template-columns: 1fr 1fr; } .contact-info { background: var(--pink); padding: 80px 64px 80px max(var(--pad-x), calc((100vw - var(--container)) / 2)); } .contact-info .brand { margin-bottom: 24px; } .contact-info .brand svg, .contact-info .brand img { height: 30px; } /* Social buttons hidden for now (markup kept). Switch to flex to re-enable. */ .social-row { display: none; align-items: center; gap: 22px; margin-bottom: 48px; } .social-row a { display: inline-flex; opacity: 1; transition: opacity .18s ease; } .social-row a:hover { opacity: .7; } .social-row a img { width: 22px; height: 22px; display: block; object-fit: contain; } .contact-info h3 { font-size: 24px; font-weight: 700; margin-bottom: 20px; } .contact-info ul { display: grid; gap: 12px; } .contact-info li { font-size: 16px; font-weight: 500; display: flex; align-items: center; gap: 10px; } .contact-info li svg { width: 18px; height: 18px; color: var(--accent); flex: none; } .contact-form { background: var(--dark); color: #fff; padding: 80px max(var(--pad-x), calc((100vw - var(--container)) / 2)) 80px 64px; } .contact-form h2 { font-size: 40px; font-weight: 700; margin-bottom: 32px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field { display: flex; flex-direction: column; gap: 8px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 12px; color: rgba(255,255,255,.6); } .field input, .field select, .field textarea { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: #fff; font-family: inherit; font-size: 14px; padding: 12px 14px; } .field textarea { min-height: 96px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.4); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff80'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; } .form-footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; margin-top: 4px; flex-wrap: wrap; } .form-footer .btn-primary { min-width: 150px; } .consent { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.7); } .consent input { width: 18px; height: 18px; accent-color: var(--accent); } .consent a { text-decoration: underline; } .hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .form-status { grid-column: 1 / -1; font-size: 14px; line-height: 1.4; } .form-status:empty { display: none; } .form-status.ok { color: #5fd08a; } .form-status.err { color: #ff8aa3; } /* ---- Footer ------------------------------------------------------------- */ .site-footer { background: var(--accent); color: rgba(255,255,255,.92); font-family: 'Poppins', 'Helvetica Neue', sans-serif; } .site-footer .container { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; font-size: 14px; } .footer-links { display: flex; gap: 28px; } .footer-links a:hover { color: #fff; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 992px) { .section-pad { padding: 56px 0; } .h-display, .hero h1, .cta h2, .contact-form h2 { font-size: 30px; } .two-col { grid-template-columns: 1fr; gap: 40px; } .two-col.reverse .col-visual { order: 0; } .hero .container { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; padding-bottom: 56px; } .hero p, .hero h1 { max-width: none; } .hero-visual { min-height: 0; } .hero-card { position: static; width: 100%; max-width: 360px; margin: 28px auto 0; } .device-laptop { margin: 0 auto; } .why-grid { grid-template-columns: 1fr; gap: 32px; max-width: 520px; } .col-visual-bleed { margin-right: 0; } .phones .phone-back { transform: translate(34px, -6px) rotate(-4deg); width: 180px; } .phones .phone-front { transform: translate(-28px, 18px); width: 200px; } .gydytojas { grid-template-columns: 1fr; } .gydytojas-text { padding: 56px var(--pad-x) 8px; } .gydytojas-photo { min-height: 0; padding: 0 var(--pad-x) 56px; } .gydytojas-photo .photo-frame { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; } .contact { grid-template-columns: 1fr; } .contact-info, .contact-form { padding: 48px 24px; } .cta::before { font-size: 120px; } /* Mobile nav */ .nav-toggle { display: inline-flex; } .nav-drawer { display: none; position: absolute; left: 0; right: 0; top: 80px; flex-direction: column; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 16px 30px rgba(0,0,0,.08); } .site-header.nav-open .nav-drawer { display: flex; } .main-nav, .header-actions { flex-direction: column; align-items: stretch; gap: 0; margin: 0; } .main-nav { padding: 8px 24px; } .main-nav a { padding: 14px 0; border-bottom: 1px solid #f1f1f1; } .main-nav a:last-child { border-bottom: none; } .main-nav a.is-active::after { display: none; } .header-actions { padding: 16px 24px 20px; gap: 12px; } .header-actions .btn { width: 100%; } } @media (max-width: 560px) { :root { --pad-x: 18px; } .h-display, .hero h1, .cta h2, .contact-form h2 { font-size: 26px; } .form-grid { grid-template-columns: 1fr; } .phones .device-phone-lg.back { left: 0; } .phones .device-phone-lg.front { transform: translateX(20px); } .footer-links { gap: 16px; } .site-footer .container { flex-direction: column; align-items: flex-start; } }