Add Django backend, Next.js frontend, and deploy templates
This commit is contained in:
ogrechko committed
1 parent
fc0c991335
commit
e9cd22d36f
93 files changed
+7840
-1
No files matched your search
@@ -0,0 +1,980 @@
|
||||
:root {
|
||||
--bg-top: #edf5f3;
|
||||
--bg-bottom: #d9e7e2;
|
||||
--surface: rgba(255, 255, 255, 0.42);
|
||||
--surface-strong: rgba(255, 255, 255, 0.58);
|
||||
--surface-dark: rgba(19, 45, 41, 0.54);
|
||||
--text: #173631;
|
||||
--text-soft: #54706a;
|
||||
--line: rgba(171, 196, 190, 0.66);
|
||||
--accent: #177884;
|
||||
--accent-strong: #0f5560;
|
||||
--accent-soft: rgba(213, 239, 238, 0.84);
|
||||
--shadow: 0 24px 70px rgba(18, 46, 42, 0.08);
|
||||
--container: 1240px;
|
||||
--radius: 24px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
font-family: "Segoe UI", "Helvetica Neue", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, rgba(23, 120, 132, 0.12), transparent 24%),
|
||||
radial-gradient(circle at 100% 10%, rgba(147, 199, 204, 0.16), transparent 26%),
|
||||
radial-gradient(circle at 20% 60%, rgba(255, 255, 255, 0.24), transparent 20%),
|
||||
radial-gradient(circle at 85% 72%, rgba(125, 171, 178, 0.14), transparent 24%),
|
||||
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.shell {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shell::before,
|
||||
.shell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.shell::before {
|
||||
inset: -4% -6% -16% -6%;
|
||||
background-image:
|
||||
linear-gradient(rgba(235, 243, 240, 0.5), rgba(219, 232, 227, 0.62)),
|
||||
url("/images/lab-bg-1.jpg");
|
||||
background-position: center;
|
||||
filter: blur(9px) saturate(0.98);
|
||||
opacity: 0.2;
|
||||
transform: scale(1.08);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.shell::after {
|
||||
inset: 14% -10% -22% 12%;
|
||||
background-image:
|
||||
linear-gradient(rgba(232, 240, 237, 0.36), rgba(215, 228, 223, 0.52)),
|
||||
url("/images/lab-bg-2.jpg");
|
||||
background-position: center;
|
||||
filter: blur(12px) saturate(0.98);
|
||||
opacity: 0.2;
|
||||
transform: scale(1.1);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(100% - 32px, var(--container));
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
backdrop-filter: blur(26px);
|
||||
background: rgba(237, 245, 243, 0.48);
|
||||
border-bottom: 1px solid rgba(171, 196, 190, 0.44);
|
||||
}
|
||||
|
||||
.site-header__inner,
|
||||
.site-footer__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
flex: 0 1 420px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand__eyebrow {
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.brand__name {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.15;
|
||||
font-weight: 700;
|
||||
max-width: 28ch;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.brand__tag {
|
||||
color: var(--text-soft);
|
||||
font-size: 0.94rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
flex: 1 1 auto;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 34px;
|
||||
padding: 0 11px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: var(--text-soft);
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
background-color 0.18s ease,
|
||||
color 0.18s ease,
|
||||
box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.nav__link:hover {
|
||||
color: var(--accent);
|
||||
border-color: rgba(23, 120, 132, 0.26);
|
||||
background: rgba(255, 255, 255, 0.42);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav__link--active {
|
||||
color: #0f5560;
|
||||
border-color: rgba(23, 120, 132, 0.48);
|
||||
background: rgba(218, 242, 241, 0.82);
|
||||
box-shadow: 0 10px 18px rgba(18, 46, 42, 0.06);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.phone-pill,
|
||||
.button,
|
||||
.ghost-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
min-height: 46px;
|
||||
padding: 0 20px;
|
||||
border-radius: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.phone-pill {
|
||||
background: var(--surface-strong);
|
||||
border: 1px solid var(--line);
|
||||
backdrop-filter: blur(20px);
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: linear-gradient(135deg, #0e6d7d, #1b8691);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
box-shadow: 0 18px 34px rgba(16, 107, 122, 0.24);
|
||||
}
|
||||
|
||||
.ghost-button {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.32);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 54px 0 30px;
|
||||
}
|
||||
|
||||
.hero__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
|
||||
gap: 28px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero__panel,
|
||||
.section-shell,
|
||||
.card,
|
||||
.metric,
|
||||
.page-panel {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.24));
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.hero__panel {
|
||||
padding: 34px;
|
||||
border-radius: 28px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero__panel::before,
|
||||
.hero__visual::before,
|
||||
.section-shell::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.52), transparent 18%),
|
||||
radial-gradient(circle at 88% 8%, rgba(212, 239, 238, 0.42), transparent 22%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero__panel > *,
|
||||
.hero__visual > *,
|
||||
.section-shell > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero__kicker {
|
||||
margin-top: 18px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.hero h1,
|
||||
.section-heading h2,
|
||||
.page-hero h1 {
|
||||
margin: 18px 0 14px;
|
||||
line-height: 1.04;
|
||||
letter-spacing: 0;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.5rem, 3.6vw, 4rem);
|
||||
max-width: 7ch;
|
||||
overflow: visible;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.hero p,
|
||||
.section-heading p,
|
||||
.metric p,
|
||||
.card p,
|
||||
.page-body,
|
||||
.page-intro {
|
||||
color: var(--text-soft);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero__actions,
|
||||
.hero__facts,
|
||||
.hero__highlights {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.hero__highlights {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.hero__highlight {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 44px;
|
||||
padding: 0 16px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.34);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--accent-strong);
|
||||
font-weight: 600;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.hero__facts {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.hero__fact {
|
||||
flex: 1 1 180px;
|
||||
padding: 18px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.32);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 18px 38px rgba(18, 46, 42, 0.06);
|
||||
backdrop-filter: blur(18px);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.hero__fact strong {
|
||||
display: block;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.hero__fact:hover,
|
||||
.hero__highlight:hover,
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 22px 42px rgba(18, 46, 42, 0.1);
|
||||
border-color: rgba(23, 120, 132, 0.42);
|
||||
}
|
||||
|
||||
.hero__visual {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
border-radius: 30px;
|
||||
box-shadow: var(--shadow);
|
||||
background:
|
||||
linear-gradient(rgba(229, 239, 235, 0.62), rgba(201, 220, 214, 0.7)),
|
||||
url("/images/lab-bg-1.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
backdrop-filter: blur(28px);
|
||||
}
|
||||
|
||||
.hero__visual--info {
|
||||
padding: 26px;
|
||||
background:
|
||||
linear-gradient(rgba(233, 242, 239, 0.58), rgba(206, 223, 217, 0.66)),
|
||||
url("/images/lab-bg-2.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border: 1px solid var(--line);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.hero__visual-grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.hero__visual-card {
|
||||
padding: 22px;
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid rgba(171, 196, 190, 0.72);
|
||||
box-shadow: 0 18px 36px rgba(18, 46, 42, 0.06);
|
||||
backdrop-filter: blur(22px);
|
||||
}
|
||||
|
||||
.hero__visual-card strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.hero__visual-card p {
|
||||
margin: 0 0 16px;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.hero__visual-card--accent {
|
||||
background: rgba(19, 45, 41, 0.58);
|
||||
color: #edf7f4;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.hero__visual-card--accent p {
|
||||
color: rgba(237, 247, 244, 0.82);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.hero__visual-label {
|
||||
display: inline-flex;
|
||||
min-height: 28px;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.42);
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.hero__visual-card--accent .hero__visual-label {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #edf7f4;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 26px 0 72px;
|
||||
}
|
||||
|
||||
.section-shell {
|
||||
padding: 28px;
|
||||
border-radius: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.grid--3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid--4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid--2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.card,
|
||||
.metric,
|
||||
.page-panel {
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 24px;
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.card h3,
|
||||
.metric strong,
|
||||
.page-panel h3 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.icon-chip {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 18px;
|
||||
background: rgba(213, 239, 238, 0.82);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.doctor-card__name {
|
||||
font-size: 1.08rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.doctor-card__role {
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
margin: 10px 0 12px;
|
||||
}
|
||||
|
||||
.page-hero {
|
||||
padding: 52px 0 18px;
|
||||
}
|
||||
|
||||
.page-hero h1 {
|
||||
font-size: clamp(2rem, 4vw, 3.25rem);
|
||||
max-width: 14ch;
|
||||
}
|
||||
|
||||
.page-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
|
||||
gap: 24px;
|
||||
padding-bottom: 72px;
|
||||
}
|
||||
|
||||
.page-layout--single {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.page-panel {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.side-stack {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.list-clean {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-clean li {
|
||||
padding: 0 0 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.form input,
|
||||
.form textarea {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.34);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.form textarea {
|
||||
min-height: 140px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 36px;
|
||||
border-top: 1px solid rgba(171, 196, 190, 0.44);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(78, 130, 173, 0.9), rgba(89, 138, 183, 0.82) 36%, rgba(72, 118, 166, 0.88));
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.footer-meta {
|
||||
color: rgba(235, 245, 244, 0.84);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.footer-panel {
|
||||
padding: 22px 0 28px;
|
||||
}
|
||||
|
||||
.footer-tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.footer-tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
min-height: 88px;
|
||||
padding: 18px 20px;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: #174a61;
|
||||
box-shadow: 0 20px 34px rgba(22, 54, 86, 0.12);
|
||||
}
|
||||
|
||||
.footer-tile__main {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.footer-tile__icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(23, 120, 132, 0.12);
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.footer-tile__icon img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer-map,
|
||||
.footer-contact {
|
||||
padding: 22px 24px;
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
color: #f2fbfa;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.footer-map {
|
||||
display: block;
|
||||
min-height: 140px;
|
||||
background:
|
||||
linear-gradient(rgba(16, 68, 94, 0.28), rgba(16, 68, 94, 0.28)),
|
||||
url("/images/lab-bg-2.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.footer-map__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.footer-map__title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.footer-map__meta {
|
||||
color: rgba(242, 251, 250, 0.82);
|
||||
}
|
||||
|
||||
.footer-contact strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.footer-contact__phone {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 12px 0 8px;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.documents-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.documents-sidebar__panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.24));
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.documents-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 52px;
|
||||
padding: 0 16px;
|
||||
border-radius: 14px;
|
||||
background: rgba(225, 240, 238, 0.78);
|
||||
border: 1px solid rgba(171, 196, 190, 0.74);
|
||||
color: #365866;
|
||||
box-shadow: 0 10px 18px rgba(18, 46, 42, 0.05);
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.documents-link--button {
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
background-color 0.18s ease;
|
||||
}
|
||||
|
||||
.documents-link--button:hover,
|
||||
.documents-link--download:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(23, 120, 132, 0.46);
|
||||
background: rgba(236, 246, 245, 0.94);
|
||||
box-shadow: 0 18px 28px rgba(18, 46, 42, 0.08);
|
||||
}
|
||||
|
||||
.documents-link--active {
|
||||
border-color: rgba(23, 120, 132, 0.46);
|
||||
background: rgba(213, 239, 238, 0.9);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
|
||||
.documents-link--disabled {
|
||||
opacity: 0.58;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.documents-preview {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
min-height: 820px;
|
||||
}
|
||||
|
||||
.documents-preview__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.documents-preview__header h2 {
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
.documents-preview__note {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(225, 240, 238, 0.76);
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.92rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.documents-preview__frame {
|
||||
min-height: 700px;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(171, 196, 190, 0.74);
|
||||
background: rgba(255, 255, 255, 0.48);
|
||||
}
|
||||
|
||||
.documents-preview__iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.documents-preview__empty {
|
||||
min-height: 220px;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
border-radius: 22px;
|
||||
border: 1px dashed rgba(171, 196, 190, 0.84);
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.documents-content {
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.documents-summary h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.services-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.services-sheet {
|
||||
padding: 30px 34px;
|
||||
border-radius: 28px;
|
||||
background: linear-gradient(180deg, rgba(188, 198, 227, 0.46), rgba(202, 210, 235, 0.38));
|
||||
border: 1px solid rgba(171, 196, 190, 0.6);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.services-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.services-card {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.38);
|
||||
border: 1px solid rgba(171, 196, 190, 0.74);
|
||||
box-shadow: 0 16px 30px rgba(18, 46, 42, 0.06);
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
background-color 0.18s ease;
|
||||
}
|
||||
|
||||
.services-card h3 {
|
||||
margin: 0 0 12px;
|
||||
color: #334f74;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.services-card p {
|
||||
margin: 0;
|
||||
color: #47627f;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.services-card:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: rgba(23, 120, 132, 0.46);
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 22px 38px rgba(18, 46, 42, 0.12);
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.site-header__inner {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero__grid,
|
||||
.page-layout,
|
||||
.grid--3,
|
||||
.grid--4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero__visual {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.footer-tiles,
|
||||
.footer-bottom,
|
||||
.documents-layout,
|
||||
.grid--2,
|
||||
.services-card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.site-header__inner,
|
||||
.site-footer__inner,
|
||||
.nav,
|
||||
.header-actions,
|
||||
.hero__actions,
|
||||
.hero__facts,
|
||||
.hero__highlights {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.2rem, 10vw, 3.3rem);
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero__panel,
|
||||
.section-shell,
|
||||
.hero__overlay,
|
||||
.page-panel,
|
||||
.card,
|
||||
.metric {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.hero__visual {
|
||||
min-height: 360px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user