@medcore-ua/concrete-css 1.0.0 → 1.1.0

package/scss/components/_hero.scss

@@ -0,0 +1,134 @@
+// =============================================================================
+// HERO
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}hero {
+  border-bottom: map.get($border-widths, '4') solid $color-black;
+  background: $color-gray-100;
+  position: relative;
+  z-index: 1;
+}
+
+.#{$prefix}hero-inner {
+  display: grid;
+  gap: 1.5rem;
+  padding: 1.75rem 0 2rem;
+  min-width: 0;
+
+  @media (min-width: 720px) {
+    grid-template-columns: minmax(0, 3fr) minmax(260px, 2.3fr);
+    align-items: stretch;
+  }
+
+  @media (min-width: 1200px) {
+    grid-template-columns: minmax(0, 4fr) minmax(320px, 2fr);
+    gap: 2.5rem;
+  }
+}
+
+.#{$prefix}hero-inner > * {
+  min-width: 0;
+}
+
+.#{$prefix}hero__kicker {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.14em;
+  margin-bottom: 0.75rem;
+  color: inherit;
+}
+
+.#{$prefix}hero__title {
+  font-size: clamp(1.5rem, 5vw, 2.8rem);
+  line-height: 1.1;
+  text-transform: uppercase;
+  margin-bottom: 0.75rem;
+  font-weight: 900;
+}
+
+.#{$prefix}hero__subtitle {
+  font-size: 0.9rem;
+  max-width: 32rem;
+  margin-bottom: 1.2rem;
+  line-height: 1.5;
+}
+
+.#{$prefix}hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin-bottom: 1.25rem;
+}
+
+.#{$prefix}hero__meta {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  width: 100%;
+  letter-spacing: 0.1em;
+}
+
+.#{$prefix}hero__meta-item {
+  border-top: map.get($border-widths, '1') solid $color-black;
+  padding: 0.35rem 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.#{$prefix}hero__meta-label {
+  opacity: 0.7;
+}
+
+.#{$prefix}hero__meta-value {
+  font-weight: 700;
+  text-align: right;
+
+  @media (max-width: 360px) {
+    text-align: left;
+    width: 100%;
+  }
+}
+
+.#{$prefix}hero__image {
+  border: map.get($border-widths, '4') solid $color-black;
+  background: $color-white;
+  padding: 0.8rem;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0.7rem;
+  min-width: 0;
+}
+
+.#{$prefix}hero__image-label {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  border-bottom: map.get($border-widths, '1') solid $color-black;
+  padding-bottom: 0.35rem;
+  margin-bottom: 0.5rem;
+}
+
+.#{$prefix}hero__image-placeholder {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: repeating-linear-gradient(-45deg, #fff 0, #fff 6px, #e0e0e0 6px, #e0e0e0 12px);
+  min-height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  text-align: center;
+  padding: 0.7rem;
+}
+
+.#{$prefix}hero__image-caption {
+  border-top: map.get($border-widths, '1') solid $color-black;
+  padding-top: 0.35rem;
+  font-size: 0.7rem;
+  opacity: 0.8;
+}

package/scss/components/_index.scss

@@ -0,0 +1,29 @@
+// =============================================================================
+// COMPONENTS INDEX
+// =============================================================================
+
+@use 'buttons';
+@use 'badge';
+@use 'card';
+@use 'layout';
+@use 'forms';
+@use 'header';
+@use 'nav';
+@use 'hero';
+@use 'footer';
+@use 'grid';
+@use 'list';
+@use 'pill';
+@use 'aside';
+@use 'panel';
+@use 'table';
+@use 'accordion';
+@use 'article';
+@use 'feature';
+@use 'map';
+@use 'page';
+@use 'category';
+@use 'profile-card';
+@use 'info-block';
+@use 'schedule';
+@use 'utilities';

package/scss/components/_info-block.scss

@@ -0,0 +1,42 @@
+// =============================================================================
+// INFO BLOCK
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}info-block {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: $color-white;
+  padding: 0.9rem;
+  min-width: 0;
+}
+
+.#{$prefix}info-block__title {
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  padding-bottom: 0.35rem;
+  margin-bottom: 0.4rem;
+  border-bottom: map.get($border-widths, '1') solid $color-black;
+}
+
+.#{$prefix}info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.85rem;
+}
+
+.#{$prefix}info-item__label {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  opacity: 0.9;
+}
+
+.#{$prefix}info-item__value {
+  font-size: 0.85rem;
+  line-height: 1.4;
+}

package/scss/components/_layout.scss

@@ -0,0 +1,73 @@
+// =============================================================================
+// SECTION & CONTAINER
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}section {
+  border-bottom: map.get($border-widths, '4') solid $color-black;
+  position: relative;
+  z-index: 1;
+  padding: 1.75rem 0 2rem;
+}
+
+.#{$prefix}section--thin {
+  border-bottom-width: map.get($border-widths, '2');
+}
+
+.#{$prefix}section--none {
+  border-bottom: none;
+}
+
+.#{$prefix}container {
+  max-width: map.get($max-widths, '6xl');
+  margin: 0 auto;
+  padding: 0 map.get($page-gutter, 'sm');
+  width: 100%;
+
+  @media (min-width: 768px) {
+    padding: 0 map.get($page-gutter, 'md');
+  }
+
+  @media (min-width: 1200px) {
+    padding: 0 map.get($page-gutter, 'lg');
+  }
+}
+
+.#{$prefix}section-inner {
+  padding: 1.5rem 0 1.8rem;
+}
+
+.#{$prefix}section__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-bottom: 1.1rem;
+  min-width: 0;
+}
+
+.#{$prefix}section__eyebrow {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.12em;
+}
+
+.#{$prefix}section__title {
+  font-size: clamp(1.5rem, 5vw, 2.8rem);
+  text-transform: uppercase;
+  line-height: 1.1;
+  font-weight: 900;
+}
+
+.#{$prefix}section__title--compact {
+  font-size: 1.1rem;
+  line-height: 1.3;
+}
+
+.#{$prefix}section__description {
+  font-size: 0.85rem;
+  max-width: 32rem;
+  line-height: 1.5;
+}

package/scss/components/_list.scss

@@ -0,0 +1,58 @@
+// =============================================================================
+// LIST
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}list-item {
+  border-bottom: map.get($border-widths, '1') solid $color-black;
+  padding: 0.55rem 0.7rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  font-size: 0.8rem;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.#{$prefix}list-item__name {
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.#{$prefix}list-item__meta {
+  font-size: 0.7rem;
+  opacity: 0.8;
+}
+
+.#{$prefix}list-item__status {
+  font-size: 0.7rem;
+  font-weight: 700;
+  margin-top: 0.2rem;
+}
+
+.#{$prefix}fact-list {
+  list-style: none;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  font-size: 0.8rem;
+}
+
+.#{$prefix}fact-list li {
+  border-top: map.get($border-widths, '1') solid $color-black;
+  padding: 0.25rem 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  font-size: 0.8rem;
+}
+
+.#{$prefix}fact-list__value {
+  font-weight: 700;
+  text-align: right;
+}

package/scss/components/_map.scss

@@ -0,0 +1,20 @@
+// =============================================================================
+// MAP
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}map-box {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: linear-gradient(90deg, #fff 0, $color-gray-200 14px, #fff 28px);
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  text-align: center;
+  padding: 1rem;
+}

package/scss/components/_nav.scss

@@ -0,0 +1,131 @@
+// =============================================================================
+// NAVIGATION
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}nav-toggle {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: transparent;
+  padding: 0.3rem 0.5rem;
+  font-family: inherit;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.12em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  white-space: nowrap;
+
+  @media (min-width: 850px) {
+    display: none;
+  }
+}
+
+.#{$prefix}nav-toggle span {
+  display: block;
+  width: 16px;
+  height: 2px;
+  border: map.get($border-widths, '1') solid $color-black;
+  position: relative;
+}
+
+.#{$prefix}nav-toggle span::before,
+.#{$prefix}nav-toggle span::after {
+  content: "";
+  position: absolute;
+  left: -2px;
+  right: -2px;
+  height: 2px;
+  border: map.get($border-widths, '1') solid $color-black;
+}
+
+.#{$prefix}nav-toggle span::before {
+  top: -5px;
+}
+
+.#{$prefix}nav-toggle span::after {
+  bottom: -5px;
+}
+
+.#{$prefix}nav {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background: $color-white;
+  border-bottom: map.get($border-widths, '4') solid $color-black;
+  padding: 1rem map.get($page-gutter, 'sm');
+  z-index: 999;
+
+  @media (min-width: 768px) {
+    padding: 1rem map.get($page-gutter, 'md');
+  }
+
+  @media (min-width: 1200px) {
+    padding: 1rem map.get($page-gutter, 'lg');
+  }
+}
+
+.#{$prefix}nav.open {
+  display: block;
+}
+
+@media (min-width: 850px) {
+  .#{$prefix}nav-toggle {
+    display: none;
+  }
+
+  .#{$prefix}nav {
+    display: block !important;
+    position: static;
+    width: auto;
+    border: none;
+    padding: 0;
+    background: transparent;
+    flex: 1 1 auto;
+    margin-left: 1.5rem;
+  }
+}
+
+.#{$prefix}nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  @media (min-width: 850px) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    text-align: right;
+    align-items: center;
+    gap: 0.4rem 1.5rem;
+  }
+}
+
+.#{$prefix}nav-link {
+  text-transform: uppercase;
+  font-size: 0.72rem;
+  letter-spacing: 0.12em;
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  display: inline-block;
+  padding: 0.15rem 0;
+
+  &:hover {
+    border-bottom-color: $color-black;
+  }
+
+  @media (min-width: 850px) {
+    font-size: 0.72rem;
+    white-space: nowrap;
+  }
+}

package/scss/components/_page.scss

@@ -0,0 +1,39 @@
+// =============================================================================
+// PAGE LAYOUT
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.#{$prefix}top-strip {
+  border-bottom: map.get($border-widths, '2') solid $color-black;
+  padding: 0.4rem map.get($page-gutter, 'sm');
+  background: $color-white;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+
+  @media (min-width: 768px) {
+    padding: 0.4rem map.get($page-gutter, 'md');
+  }
+
+  @media (min-width: 1200px) {
+    padding: 0.4rem map.get($page-gutter, 'lg');
+  }
+}
+
+.#{$prefix}top-strip__emergency {
+  font-weight: 900;
+}

package/scss/components/_panel.scss

@@ -0,0 +1,53 @@
+// =============================================================================
+// PANEL
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}panel {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: $color-white;
+  padding: 0.9rem;
+}
+
+.#{$prefix}panel--thick {
+  border-width: map.get($border-widths, '4');
+}
+
+.#{$prefix}panel--thin {
+  border-width: map.get($border-widths, '1');
+}
+
+.#{$prefix}panel__header {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  border-bottom: map.get($border-widths, '1') solid $color-black;
+  padding-bottom: 0.35rem;
+  margin-bottom: 0.5rem;
+}
+
+.#{$prefix}panel__title {
+  font-size: 1rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+  line-height: 1.3;
+  border-bottom: map.get($border-widths, '1') solid $color-black;
+  padding-bottom: 0.4rem;
+}
+
+.#{$prefix}panel__content {
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.#{$prefix}panel__content p {
+  margin: 0 0 0.8rem 0;
+}
+
+.#{$prefix}panel__content strong {
+  font-weight: 700;
+}

package/scss/components/_pill.scss

@@ -0,0 +1,38 @@
+// =============================================================================
+// PILL
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}pill-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-bottom: 0.5rem;
+}
+
+.#{$prefix}pill {
+  border: map.get($border-widths, '1') solid $color-black;
+  padding: 0.15rem 0.5rem;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  background: $color-white;
+  display: inline-block;
+}
+
+.#{$prefix}tag {
+  border: map.get($border-widths, '1') solid $color-black;
+  padding: 0.05rem 0.4rem;
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  display: inline-block;
+  margin-right: 0.25rem;
+}
+
+.#{$prefix}tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}

package/scss/components/_profile-card.scss

@@ -0,0 +1,55 @@
+// =============================================================================
+// PROFILE CARD
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}profile-card {
+  border: map.get($border-widths, '2') solid $color-black;
+  background: $color-white;
+  padding: 0.8rem;
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: 0.7rem;
+}
+
+.#{$prefix}profile-card__avatar {
+  border: map.get($border-widths, '4') solid $color-black;
+  background: $color-gray-300;
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  height: 72px;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.#{$prefix}profile-card__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.#{$prefix}profile-card__name {
+  text-transform: uppercase;
+  font-weight: 900;
+  font-size: 0.85rem;
+  margin-bottom: 0.1rem;
+}
+
+.#{$prefix}profile-card__role {
+  font-size: 0.75rem;
+  margin: 0 0 0.4rem;
+  font-weight: 700;
+}
+
+.#{$prefix}profile-card__meta {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  margin-bottom: 0.5rem;
+}

package/scss/components/_schedule.scss

@@ -0,0 +1,28 @@
+// =============================================================================
+// SCHEDULE
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts/variables' as *;
+@use '../abstracts/tokens' as *;
+
+.#{$prefix}schedule {
+  list-style: none;
+  padding: 0;
+  margin: 0.2rem 0 0;
+  font-size: 0.8rem;
+}
+
+.#{$prefix}schedule__day {
+  font-weight: 700;
+}
+
+.#{$prefix}schedule__hours {
+  float: right;
+  font-size: 0.8rem;
+
+  @media (max-width: 360px) {
+    float: none;
+    display: block;
+  }
+}