Spaces:
Sleeping
Sleeping
| /* ============================================================ | |
| pharma& clone — compiled stylesheet | |
| Source: scss/styles.scss | |
| ============================================================ */ | |
| :root { | |
| --purple-900: #2b0b48; | |
| --purple-800: #3f1561; | |
| --purple-700: #4b1f6f; | |
| --purple-600: #5b2789; | |
| --purple-500: #7a3aa5; | |
| --purple-400: #9b6ad6; | |
| --purple-200: #d8c5ee; | |
| --purple-50: #f6f0fb; | |
| --ink: #1c1024; | |
| --ink-soft: #4a3a58; | |
| --muted: #7a6a85; | |
| --line: #e7dff0; | |
| --bg: #ffffff; | |
| --bg-soft: #faf7fd; | |
| --radius: 14px; | |
| --radius-lg: 22px; | |
| --shadow-sm: 0 4px 16px rgba(75,31,111,.08); | |
| --shadow-md: 0 12px 36px rgba(75,31,111,.14); | |
| --shadow-lg: 0 24px 60px rgba(75,31,111,.22); | |
| --font-display: "Century Gothic", "CenturyGothic", "AppleGothic", "URW Gothic", "Jost", "Futura", "Trebuchet MS", system-ui, sans-serif; | |
| --font-body: "Century Gothic", "CenturyGothic", "AppleGothic", "URW Gothic", "Jost", "Futura", "Trebuchet MS", system-ui, sans-serif; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| margin: 0; | |
| font-family: var(--font-body); | |
| color: var(--ink); | |
| background: var(--bg); | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| letter-spacing: .01em; | |
| } | |
| img { max-width: 100%; display: block; } | |
| a { color: var(--purple-600); text-decoration: none; transition: color .2s ease; } | |
| a:hover { color: var(--purple-800); } | |
| h1, h2, h3, h4 { | |
| font-family: var(--font-display); | |
| color: var(--purple-800); | |
| margin: 0 0 .6em; | |
| line-height: 1.15; | |
| letter-spacing: -.01em; | |
| } | |
| h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 700; } | |
| h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 700; } | |
| h3 { font-size: 1.25rem; font-weight: 700; } | |
| h4 { font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } | |
| p { margin: 0 0 1em; color: var(--ink-soft); } | |
| .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; } | |
| .eyebrow { | |
| display: inline-block; | |
| text-transform: uppercase; | |
| letter-spacing: .22em; | |
| font-size: .78rem; | |
| font-weight: 700; | |
| color: var(--purple-500); | |
| margin-bottom: .8rem; | |
| } | |
| .lede { font-size: 1.15rem; color: var(--ink); } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-block; | |
| padding: .9rem 1.6rem; | |
| border-radius: 999px; | |
| font-weight: 700; | |
| font-family: var(--font-display); | |
| letter-spacing: .04em; | |
| text-transform: uppercase; | |
| font-size: .85rem; | |
| transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; | |
| border: 2px solid transparent; | |
| cursor: pointer; | |
| } | |
| .btn:hover { transform: translateY(-2px); } | |
| .btn-primary { background: var(--purple-700); color: #fff; box-shadow: var(--shadow-sm); } | |
| .btn-primary:hover { background: var(--purple-800); color: #fff; box-shadow: var(--shadow-md); } | |
| .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } | |
| .btn-ghost:hover { background: #fff; color: var(--purple-800); } | |
| .btn-light { background: #fff; color: var(--purple-700); } | |
| .btn-light:hover { background: var(--purple-50); color: var(--purple-800); } | |
| /* Header */ | |
| .site-header { | |
| position: fixed; top: 0; left: 0; right: 0; | |
| z-index: 50; | |
| padding: 1rem 0; | |
| transition: background .3s ease, box-shadow .3s ease, padding .3s ease; | |
| background: transparent; | |
| } | |
| .site-header.scrolled { | |
| background: rgba(255,255,255,.96); | |
| backdrop-filter: blur(12px); | |
| box-shadow: var(--shadow-sm); | |
| padding: .5rem 0; | |
| } | |
| .site-header.scrolled .logo-text, | |
| .site-header.scrolled .primary-nav a { color: var(--purple-800); } | |
| .site-header.scrolled .nav-toggle span { background: var(--purple-800); } | |
| .nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } | |
| .logo-text { | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 1.6rem; | |
| color: #fff; | |
| letter-spacing: -.01em; | |
| transition: color .3s ease; | |
| } | |
| .logo-text .amp { color: var(--purple-400); } | |
| .primary-nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; } | |
| .primary-nav a { | |
| color: #fff; font-weight: 600; font-size: .95rem; | |
| letter-spacing: .02em; transition: color .2s ease; position: relative; | |
| } | |
| .primary-nav a::after { | |
| content: ""; position: absolute; left: 0; bottom: -6px; | |
| width: 0; height: 2px; background: var(--purple-400); | |
| transition: width .25s ease; | |
| } | |
| .primary-nav a:hover::after { width: 100%; } | |
| .primary-nav .nav-cta { | |
| background: var(--purple-400); color: #fff ; | |
| padding: .55rem 1.1rem; border-radius: 999px; | |
| } | |
| .primary-nav .nav-cta::after { display: none; } | |
| .primary-nav .nav-cta:hover { background: var(--purple-500); } | |
| .nav-toggle { | |
| display: none; | |
| width: 40px; height: 40px; | |
| background: transparent; border: 0; cursor: pointer; | |
| flex-direction: column; gap: 5px; align-items: center; justify-content: center; | |
| } | |
| .nav-toggle span { display: block; width: 26px; height: 2px; background: #fff; transition: all .3s ease; } | |
| .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } | |
| .nav-toggle.open span:nth-child(2) { opacity: 0; } | |
| .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } | |
| @media (max-width: 1024px) { | |
| .nav-toggle { display: flex; } | |
| .primary-nav { | |
| position: fixed; top: 0; right: -100%; | |
| height: 100vh; width: min(85vw, 360px); | |
| background: var(--purple-800); | |
| padding: 6rem 2rem 2rem; | |
| transition: right .35s ease; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .primary-nav.open { right: 0; } | |
| .primary-nav ul { flex-direction: column; gap: 1.2rem; } | |
| .primary-nav a { color: #fff; font-size: 1.1rem; } | |
| } | |
| /* Hero */ | |
| .hero { | |
| position: relative; | |
| min-height: 100vh; | |
| display: flex; align-items: center; | |
| background: radial-gradient(ellipse at 30% 30%, #6f2db0 0%, var(--purple-800) 40%, var(--purple-900) 100%); | |
| color: #fff; | |
| overflow: hidden; | |
| isolation: isolate; | |
| } | |
| .hero::before { | |
| content: ""; position: absolute; inset: 0; z-index: -1; | |
| background: | |
| radial-gradient(circle at 80% 20%, rgba(155,106,214,.35), transparent 50%), | |
| radial-gradient(circle at 20% 80%, rgba(122,58,165,.45), transparent 50%); | |
| animation: drift 20s ease-in-out infinite alternate; | |
| } | |
| .hero-overlay { | |
| position: absolute; inset: 0; | |
| background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(43,11,72,.6) 100%); | |
| pointer-events: none; | |
| } | |
| .hero-content { position: relative; padding: 8rem 1.25rem 6rem; max-width: 900px; } | |
| .hero-title { color: #fff; font-weight: 700; margin-bottom: 1.5rem; } | |
| .hero-sub { | |
| font-size: clamp(1rem, 1.4vw, 1.2rem); | |
| color: rgba(255,255,255,.88); | |
| margin-bottom: 2rem; max-width: 640px; | |
| } | |
| .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } | |
| .scroll-cue { | |
| position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); | |
| width: 24px; height: 40px; | |
| border: 2px solid rgba(255,255,255,.6); | |
| border-radius: 14px; | |
| } | |
| .scroll-cue span { | |
| display: block; width: 4px; height: 8px; | |
| background: #fff; border-radius: 2px; margin: 6px auto; | |
| animation: scrollCue 1.6s ease-in-out infinite; | |
| } | |
| @keyframes scrollCue { | |
| 0% { transform: translateY(0); opacity: 1; } | |
| 100% { transform: translateY(14px); opacity: 0; } | |
| } | |
| @keyframes drift { | |
| 0% { transform: translate(0,0); } | |
| 100% { transform: translate(-30px, 20px); } | |
| } | |
| /* Sections */ | |
| .section { padding: 6rem 0; } | |
| .section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; } | |
| .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } | |
| @media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; gap: 1.5rem; } } | |
| .section-mission { background: var(--bg-soft); } | |
| /* Pillars */ | |
| .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } | |
| @media (max-width: 1024px) { .pillars { grid-template-columns: repeat(2, 1fr); } } | |
| @media (max-width: 540px) { .pillars { grid-template-columns: 1fr; } } | |
| .pillar { | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-lg); | |
| padding: 2rem 1.5rem; | |
| transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; | |
| } | |
| .pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--purple-200); } | |
| .pillar-icon { | |
| width: 56px; height: 56px; | |
| display: grid; place-items: center; | |
| background: var(--purple-50); | |
| border-radius: 14px; | |
| color: var(--purple-700); | |
| margin-bottom: 1.25rem; | |
| } | |
| .pillar-icon svg { width: 30px; height: 30px; } | |
| .link-arrow { | |
| display: inline-block; | |
| font-weight: 700; font-size: .9rem; | |
| letter-spacing: .04em; text-transform: uppercase; | |
| color: var(--purple-700); | |
| margin-top: .5rem; | |
| transition: transform .2s ease; | |
| } | |
| .link-arrow:hover { transform: translateX(4px); color: var(--purple-800); } | |
| /* Stats */ | |
| .section-stats { background: linear-gradient(135deg, var(--purple-700), var(--purple-900)); color: #fff; } | |
| .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; } | |
| @media (max-width: 1024px) { .stats { grid-template-columns: repeat(2, 1fr); } } | |
| @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } } | |
| .stat-num { | |
| font-family: var(--font-display); | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| font-weight: 700; color: #fff; | |
| line-height: 1; margin-bottom: .5rem; | |
| } | |
| .stat-num::after { content: "+"; color: var(--purple-400); } | |
| .stat-label { | |
| text-transform: uppercase; | |
| letter-spacing: .15em; | |
| font-size: .85rem; | |
| color: rgba(255,255,255,.85); | |
| } | |
| /* News */ | |
| .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } | |
| @media (max-width: 1024px) { .news-grid { grid-template-columns: 1fr 1fr; } } | |
| @media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } } | |
| .news-card { | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| transition: transform .3s ease, box-shadow .3s ease; | |
| } | |
| .news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } | |
| .news-img { aspect-ratio: 16/10; } | |
| .news-body { padding: 1.5rem; } | |
| .news-date { | |
| text-transform: uppercase; | |
| letter-spacing: .15em; | |
| font-size: .75rem; | |
| color: var(--purple-500); | |
| font-weight: 700; | |
| } | |
| /* CTA */ | |
| .section-cta { background: var(--bg-soft); } | |
| .cta-card { | |
| background: linear-gradient(135deg, var(--purple-600), var(--purple-800)); | |
| color: #fff; | |
| padding: 4rem 2rem; | |
| border-radius: var(--radius-lg); | |
| text-align: center; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .cta-card h2 { color: #fff; } | |
| .cta-card p { color: rgba(255,255,255,.9); max-width: 600px; margin: 0 auto 1.5rem; } | |
| /* Footer */ | |
| .site-footer { | |
| background: var(--purple-900); | |
| color: rgba(255,255,255,.8); | |
| padding: 4rem 0 0; | |
| } | |
| .site-footer h4 { color: #fff; margin-bottom: 1rem; } | |
| .site-footer a { color: rgba(255,255,255,.75); } | |
| .site-footer a:hover { color: #fff; } | |
| .site-footer .logo-text { color: #fff; font-size: 1.4rem; } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr 1fr 1fr; | |
| gap: 2rem; | |
| padding-bottom: 3rem; | |
| } | |
| @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } } | |
| @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } | |
| .footer-col ul { list-style: none; padding: 0; margin: 0; } | |
| .footer-col li { margin-bottom: .55rem; } | |
| .footer-bottom { | |
| border-top: 1px solid rgba(255,255,255,.1); | |
| padding: 1.25rem 0; | |
| font-size: .85rem; | |
| color: rgba(255,255,255,.6); | |
| text-align: center; | |
| } | |
| /* Animations */ | |
| .fade-up { opacity: 0; transform: translateY(20px); animation: fadeUp .9s ease forwards; } | |
| .delay-1 { animation-delay: .15s; } | |
| .delay-2 { animation-delay: .3s; } | |
| .delay-3 { animation-delay: .45s; } | |
| @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity .8s ease, transform .8s ease; | |
| } | |
| .reveal.visible { opacity: 1; transform: translateY(0); } | |
| .reveal.delay-1 { transition-delay: .12s; } | |
| .reveal.delay-2 { transition-delay: .24s; } | |
| .reveal.delay-3 { transition-delay: .36s; } | |
| /* Page banner */ | |
| .page-banner { | |
| background: linear-gradient(135deg, var(--purple-700), var(--purple-900)); | |
| color: #fff; | |
| padding: 9rem 0 5rem; | |
| text-align: center; | |
| } | |
| .page-banner h1 { color: #fff; } | |
| .page-banner p { color: rgba(255,255,255,.85); max-width: 720px; margin: 0 auto; } | |
| /* Prose */ | |
| .prose { max-width: 820px; margin: 0 auto; } | |
| .prose h2 { margin-top: 2rem; } | |
| .prose ul li { margin-bottom: .4rem; color: var(--ink-soft); } | |
| /* Cards */ | |
| .card-grid { | |
| display: grid; gap: 1.5rem; | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| @media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } | |
| @media (max-width: 540px) { .card-grid { grid-template-columns: 1fr; } } | |
| .card { | |
| background: #fff; | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-lg); | |
| padding: 1.75rem; | |
| transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; | |
| } | |
| .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--purple-200); } | |
| .card h3 { color: var(--purple-800); } | |
| /* FAQ */ | |
| .faq-list { max-width: 820px; margin: 0 auto; } | |
| .faq-item { | |
| border-bottom: 1px solid var(--line); | |
| padding: 1.25rem 0; | |
| } | |
| .faq-item summary { | |
| cursor: pointer; | |
| font-weight: 700; | |
| color: var(--purple-800); | |
| font-family: var(--font-display); | |
| font-size: 1.05rem; | |
| list-style: none; | |
| position: relative; | |
| padding-right: 2rem; | |
| } | |
| .faq-item summary::-webkit-details-marker { display: none; } | |
| .faq-item summary::after { | |
| content: "+"; | |
| position: absolute; right: 0; top: 0; | |
| color: var(--purple-500); | |
| font-size: 1.6rem; line-height: 1; | |
| transition: transform .2s ease; | |
| } | |
| .faq-item[open] summary::after { content: "−"; } | |
| .faq-item p { margin-top: .8rem; } | |
| /* Contact */ | |
| .contact-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| } | |
| @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } } | |
| .form-group { margin-bottom: 1.25rem; } | |
| label { | |
| display: block; font-weight: 700; | |
| color: var(--purple-800); | |
| margin-bottom: .4rem; | |
| font-size: .9rem; letter-spacing: .03em; | |
| } | |
| input, textarea, select { | |
| width: 100%; | |
| padding: .85rem 1rem; | |
| border: 1.5px solid var(--line); | |
| border-radius: var(--radius); | |
| font-family: var(--font-body); | |
| font-size: 1rem; | |
| background: #fff; | |
| color: var(--ink); | |
| transition: border-color .2s ease, box-shadow .2s ease; | |
| } | |
| input:focus, textarea:focus, select:focus { | |
| outline: none; | |
| border-color: var(--purple-500); | |
| box-shadow: 0 0 0 4px rgba(122,58,165,.15); | |
| } | |
| textarea { min-height: 140px; resize: vertical; } | |
| .contact-info { | |
| background: var(--purple-50); | |
| border-radius: var(--radius-lg); | |
| padding: 2rem; | |
| } | |
| .contact-info h3 { color: var(--purple-800); } | |
| .contact-info p strong { color: var(--purple-800); } | |