barua-ui 0.2.0

package/css/components/marketing.css

@@ -0,0 +1,280 @@
+@layer components {
+  /* ==========================================================================
+     Marketing — the anatomy of a product page.
+
+     A landing page is a sequence of full-width chapters, each one a single
+     idea: a headline, a sentence, and a picture that carries the weight. The
+     rhythm is what makes a family of product pages feel like one company, so
+     the spacing and the measure are the components, not decoration.
+     ========================================================================== */
+
+  /* ---- The page ------------------------------------------------------------ */
+  .b-landing {
+    --b-chapter-gap: clamp(4.5rem, 9vw, 8.5rem);
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* ---- Slim marketing bar: quieter than an app's chrome -------------------- */
+  .b-marketing-nav {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--b-z-sticky);
+    display: flex;
+    align-items: center;
+    gap: var(--b-space-5);
+    height: 2.75rem;
+    padding-inline: var(--b-space-6);
+    font-size: var(--b-text-caption);
+    background: var(--b-material-chrome-bg);
+    -webkit-backdrop-filter: var(--b-glass);
+    backdrop-filter: var(--b-glass);
+    border-block-end: 1px solid var(--b-hairline);
+  }
+  .b-marketing-nav__brand { font-weight: var(--b-weight-semibold); font-size: var(--b-text-subheadline); }
+  .b-marketing-nav__links { display: flex; gap: var(--b-space-5); margin-inline: auto; }
+  .b-marketing-nav a { color: var(--b-text-secondary); text-decoration: none; }
+  .b-marketing-nav a:hover { color: var(--b-text); }
+
+  /* ---- Chapter: one idea, centred, with room around it --------------------- */
+  .b-chapter {
+    padding-block: var(--b-chapter-gap);
+    padding-inline: var(--b-space-6);
+    text-align: center;
+  }
+  .b-chapter--tight { padding-block: calc(var(--b-chapter-gap) * 0.55); }
+  .b-chapter--start { text-align: start; }
+  .b-chapter__eyebrow {
+    font-size: var(--b-text-subheadline);
+    font-weight: var(--b-weight-semibold);
+    color: var(--b-color-accent-text);
+  }
+  .b-chapter__title {
+    max-width: 20ch;
+    margin: var(--b-space-2) auto 0;
+    font-size: clamp(2rem, 5.2vw, 3.5rem);
+    font-weight: var(--b-weight-bold);
+    line-height: 1.06;
+    letter-spacing: var(--b-tracking-tight);
+    text-wrap: balance;
+  }
+  .b-chapter__lede {
+    max-width: 46ch;
+    margin: var(--b-space-4) auto 0;
+    font-size: var(--b-text-callout);
+    line-height: var(--b-leading-body);
+    color: var(--b-text-secondary);
+    text-wrap: pretty;
+  }
+  .b-chapter--start :is(.b-chapter__title, .b-chapter__lede) { margin-inline: 0; }
+  .b-chapter__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--b-space-4);
+    justify-content: center;
+    margin-block-start: var(--b-space-6);
+  }
+  .b-chapter--start .b-chapter__actions { justify-content: flex-start; }
+  .b-feature-row .b-chapter__actions { justify-content: flex-start; margin-block-start: var(--b-space-5); }
+
+  /* ---- The hero: the first chapter, with the product beneath it ------------ */
+  .b-hero { padding-block-start: clamp(3.5rem, 7vw, 6rem); }
+  .b-hero__title { font-size: clamp(2.5rem, 7vw, 4.75rem); }
+  .b-hero__media { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
+
+  /* ---- Figures: a picture is furniture, so it has a shape ------------------ */
+  .b-figure { margin: 0; }
+  .b-figure__frame {
+    overflow: hidden;
+    border-radius: var(--b-radius-2xl);
+    box-shadow: var(--b-elevation-4);
+    background: var(--b-surface-2);
+  }
+  .b-figure__frame :is(img, video) { display: block; width: 100%; height: auto; }
+  .b-figure__caption {
+    margin-block-start: var(--b-space-3);
+    font-size: var(--b-text-footnote);
+    color: var(--b-text-tertiary);
+  }
+  .b-figure--bleed { margin-inline: calc(var(--b-space-6) * -1); }
+  .b-figure--bleed .b-figure__frame { border-radius: 0; }
+
+  /* ---- Alternating rows: picture beside prose ------------------------------ */
+  .b-feature-row {
+    display: grid;
+    gap: clamp(var(--b-space-6), 5vw, var(--b-space-10));
+    align-items: center;
+    text-align: start;
+  }
+  @media (min-width: 768px) {
+    .b-feature-row { grid-template-columns: 1fr 1fr; }
+    .b-feature-row--flip > :first-child { order: 2; }
+  }
+  .b-feature-row__title {
+    font-size: clamp(1.5rem, 3vw, 2.25rem);
+    font-weight: var(--b-weight-semibold);
+    line-height: var(--b-leading-tight);
+    letter-spacing: var(--b-tracking-tight);
+  }
+  .b-feature-row__body {
+    margin-block-start: var(--b-space-3);
+    color: var(--b-text-secondary);
+    line-height: var(--b-leading-body);
+  }
+
+  /* ---- Bento: tiles of unequal weight, one grid ---------------------------- */
+  .b-bento {
+    display: grid;
+    gap: var(--b-space-4);
+    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
+    text-align: start;
+  }
+  .b-bento__tile {
+    display: flex;
+    flex-direction: column;
+    gap: var(--b-space-2);
+    padding: var(--b-space-6);
+    background: var(--b-surface-2);
+    border: 1px solid var(--b-separator);
+    border-radius: var(--b-radius-2xl);
+  }
+  .b-bento__tile--wide { grid-column: span 2; }
+  @media (max-width: 767px) { .b-bento__tile--wide { grid-column: auto; } }
+  .b-bento__title { font-size: var(--b-text-headline); font-weight: var(--b-weight-semibold); }
+  .b-bento__body { font-size: var(--b-text-subheadline); color: var(--b-text-secondary); }
+
+  /* ---- A strip of numbers -------------------------------------------------- */
+  .b-spec-strip {
+    display: grid;
+    gap: var(--b-space-6);
+    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
+    text-align: center;
+  }
+  .b-spec__value {
+    display: block;
+    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+    font-weight: var(--b-weight-bold);
+    letter-spacing: var(--b-tracking-tight);
+  }
+  .b-spec__label { display: block; margin-block-start: var(--b-space-1); font-size: var(--b-text-footnote); color: var(--b-text-secondary); }
+
+  /* ---- A chapter that inverts ---------------------------------------------
+     Product pages alternate light and dark full-bleed sections so a page has
+     chapters you can feel while scrolling. Flipping color-scheme rather than
+     hardcoding colours means every token inside resolves for the dark ground,
+     so components dropped in keep working. */
+  .b-chapter--dark {
+    color-scheme: dark;
+    background: var(--b-bg);
+    color: var(--b-text);
+  }
+
+  /* ---- Pill switcher: one product, several platforms ----------------------- */
+  .b-pill-nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--b-space-2);
+    padding: var(--b-space-4) var(--b-space-6);
+  }
+  .b-pill-nav a {
+    padding: var(--b-space-2) var(--b-space-4);
+    font-size: var(--b-text-subheadline);
+    color: var(--b-text-secondary);
+    text-decoration: none;
+    background: var(--b-fill-quaternary);
+    border-radius: var(--b-radius-full);
+    transition: background var(--b-duration-fast) var(--b-ease-out), color var(--b-duration-fast) var(--b-ease-out);
+  }
+  .b-pill-nav a:hover { background: var(--b-fill-tertiary); color: var(--b-text); }
+  .b-pill-nav a.is-active { background: var(--b-text); color: var(--b-bg); }
+
+  /* ---- Card rail: a row you push sideways ---------------------------------- */
+  .b-card-rail {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(min(17rem, 78vw), 21rem);
+    gap: var(--b-space-4);
+    padding-block-end: var(--b-space-3);
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    text-align: start;
+  }
+  .b-card-rail::-webkit-scrollbar { display: none; }
+  .b-card-rail > * { scroll-snap-align: start; }
+  /* Photographs arrive at whatever shape they were taken; a rail needs one
+     shape, or the captions sit at four different heights. */
+  .b-card-rail .b-figure__frame { aspect-ratio: 4 / 3; }
+  .b-card-rail .b-figure__frame :is(img, video) { height: 100%; object-fit: cover; }
+  .b-rail-card__body { margin-block-start: var(--b-space-3); }
+  .b-rail-card__title { font-weight: var(--b-weight-semibold); }
+  .b-rail-card__text { margin-block-start: var(--b-space-1); font-size: var(--b-text-subheadline); color: var(--b-text-secondary); }
+
+  /* ---- Promo band: one offer, full width, its own colour ------------------- */
+  .b-promo-band {
+    color-scheme: dark;
+    padding: clamp(3rem, 6vw, 5rem) var(--b-space-6);
+    text-align: center;
+    color: #fff;
+    background: linear-gradient(135deg,
+      var(--b-color-accent),
+      color-mix(in srgb, var(--b-color-indigo) 80%, var(--b-color-purple)));
+  }
+  .b-promo-band__title {
+    font-size: clamp(1.75rem, 4vw, 2.75rem);
+    font-weight: var(--b-weight-bold);
+    letter-spacing: var(--b-tracking-tight);
+  }
+  .b-promo-band__body {
+    max-width: 52ch;
+    margin: var(--b-space-3) auto 0;
+    line-height: var(--b-leading-body);
+    color: rgba(255, 255, 255, 0.86);
+  }
+
+  /* ---- Footnotes: the small print a claim earns ---------------------------- */
+  .b-footnotes {
+    max-width: var(--b-container-xl);
+    margin-inline: auto;
+    padding: var(--b-space-8) var(--b-space-6) 0;
+    font-size: var(--b-text-caption);
+    line-height: var(--b-leading-body);
+    color: var(--b-text-tertiary);
+  }
+  .b-footnotes ol { padding-inline-start: var(--b-space-5); }
+  .b-footnotes li + li { margin-block-start: var(--b-space-2); }
+
+  /* ---- The footer: small, dense, and unafraid of links --------------------- */
+  .b-site-footer {
+    padding: var(--b-space-10) var(--b-space-6) var(--b-space-8);
+    font-size: var(--b-text-caption);
+    color: var(--b-text-secondary);
+    background: var(--b-surface-2);
+    border-block-start: 1px solid var(--b-separator);
+  }
+  .b-site-footer__groups {
+    display: grid;
+    gap: var(--b-space-6) var(--b-space-8);
+    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
+    max-width: var(--b-container-xl);
+    margin-inline: auto;
+  }
+  .b-site-footer__heading {
+    margin-block-end: var(--b-space-2);
+    font-size: var(--b-text-caption);
+    font-weight: var(--b-weight-semibold);
+    color: var(--b-text);
+  }
+  .b-site-footer__group a { display: block; padding-block: 0.2rem; color: var(--b-text-secondary); text-decoration: none; }
+  .b-site-footer__group a:hover { color: var(--b-text); text-decoration: underline; }
+  .b-site-footer__legal {
+    max-width: var(--b-container-xl);
+    margin: var(--b-space-8) auto 0;
+    padding-block-start: var(--b-space-5);
+    border-block-start: 1px solid var(--b-separator);
+    color: var(--b-text-tertiary);
+    line-height: var(--b-leading-body);
+  }
+}

package/css/components/media.css

@@ -0,0 +1,321 @@
+/* ==========================================================================
+   Barua UI — Media
+   Image Viewer, Image Gallery, Carousel, Video Player frame, Audio Player,
+   Media Controls, Thumbnail, Media Placeholder, Upload Preview grid.
+   ========================================================================== */
+
+@layer components {
+  /* ---- Image Viewer -------------------------------------------------------- */
+  .b-image-viewer {
+    position: relative;
+    background: light-dark(#0e0e12, #000);
+    border-radius: var(--b-radius-xl);
+    overflow: hidden;
+    display: grid;
+    place-items: center;
+  }
+  .b-image-viewer img { max-height: 70vh; object-fit: contain; }
+  .b-image-viewer__bar {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--b-space-2) var(--b-space-3);
+    color: #fff;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
+    font-size: var(--b-text-footnote);
+  }
+
+  /* ---- Image Gallery -------------------------------------------------------- */
+  .b-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+    gap: var(--b-space-2);
+  }
+  .b-gallery a, .b-gallery button {
+    display: block;
+    padding: 0;
+    border: none;
+    background: none;
+    border-radius: var(--b-radius-md);
+    overflow: hidden;
+    cursor: zoom-in;
+  }
+  .b-gallery img {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+    transition: scale var(--b-duration-normal) var(--b-ease-out);
+  }
+  .b-gallery :is(a, button):hover img { scale: 1.05; }
+
+  /* ---- Carousel (scroll-snap) ------------------------------------------------ */
+  .b-carousel { position: relative; }
+  .b-carousel__track {
+    display: flex;
+    gap: var(--b-space-3);
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-padding-inline: var(--b-space-1);
+    scrollbar-width: none;
+    padding-block: var(--b-space-1);
+  }
+  .b-carousel__track::-webkit-scrollbar { display: none; }
+  .b-carousel__slide {
+    flex: 0 0 var(--b-slide-w, 70%);
+    scroll-snap-align: start;
+    border-radius: var(--b-radius-lg);
+    overflow: hidden;
+  }
+  .b-carousel__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
+  .b-carousel__nav {
+    position: absolute;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+    z-index: var(--b-z-raised);
+  }
+  .b-carousel__nav--prev { inset-inline-start: var(--b-space-2); }
+  .b-carousel__nav--next { inset-inline-end: var(--b-space-2); }
+  .b-carousel__dots {
+    display: flex;
+    justify-content: center;
+    gap: var(--b-space-1);
+    margin-block-start: var(--b-space-2);
+  }
+  .b-carousel__dots button {
+    width: 0.45rem; height: 0.45rem;
+    padding: 0;
+    background: var(--b-fill);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background var(--b-duration-fast), width var(--b-duration-normal) var(--b-ease-out);
+  }
+  .b-carousel__dots button.is-active {
+    width: 1.1rem;
+    border-radius: var(--b-radius-full);
+    background: var(--b-color-accent);
+  }
+
+  /* ---- Video Player frame ------------------------------------------------------ */
+  .b-video {
+    position: relative;
+    background: #000;
+    border-radius: var(--b-radius-xl);
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+  }
+  .b-video video { width: 100%; height: 100%; object-fit: contain; }
+  .b-video__overlay {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    background: rgba(0, 0, 0, 0.25);
+    opacity: 0;
+    transition: opacity var(--b-duration-normal);
+  }
+  .b-video:hover .b-video__overlay, .b-video.is-paused .b-video__overlay { opacity: 1; }
+  .b-video__play {
+    display: grid;
+    place-items: center;
+    width: 4rem; height: 4rem;
+    font-size: 1.4rem;
+    color: #fff;
+    background: rgba(20, 20, 26, 0.55);
+    -webkit-backdrop-filter: var(--b-glass);
+    backdrop-filter: var(--b-glass);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: scale var(--b-duration-fast) var(--b-ease-bounce);
+  }
+  .b-video__play:hover { scale: 1.08; }
+
+  /* ---- Media Controls (shared control bar) --------------------------------------- */
+  .b-media-controls {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--b-space-2);
+    padding: var(--b-space-2) var(--b-space-3);
+    color: #fff;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
+    color-scheme: dark;
+  }
+  .b-media-controls .b-icon-btn {
+    color: #fff;
+    background: transparent;
+  }
+  .b-media-controls .b-icon-btn:hover { background: rgba(255, 255, 255, 0.16); }
+  .b-media-controls .b-slider { flex: 1; }
+  .b-media-controls__time {
+    font-size: var(--b-text-caption);
+    font-variant-numeric: tabular-nums;
+    opacity: 0.85;
+  }
+
+  /* ---- Audio Player ---------------------------------------------------------------- */
+  .b-audio {
+    display: flex;
+    align-items: center;
+    gap: var(--b-space-3);
+    padding: var(--b-space-3) var(--b-space-4);
+    background: var(--b-surface);
+    border: 1px solid var(--b-separator);
+    border-radius: var(--b-radius-xl);
+  }
+  .b-audio--glass {
+    background: var(--b-material-regular-bg);
+    -webkit-backdrop-filter: var(--b-glass);
+    backdrop-filter: var(--b-glass);
+    border-color: var(--b-hairline);
+  }
+  .b-audio__art {
+    width: 3rem; height: 3rem;
+    border-radius: var(--b-radius-md);
+    object-fit: cover;
+    background: var(--b-fill-tertiary);
+    flex: none;
+  }
+  .b-audio__meta { flex: 1; min-width: 0; }
+  .b-audio__title { font-size: var(--b-text-footnote); font-weight: var(--b-weight-semibold); }
+  .b-audio__artist { font-size: var(--b-text-caption); color: var(--b-text-secondary); }
+  .b-audio__controls { display: flex; align-items: center; gap: var(--b-space-1); }
+  .b-audio .b-progress { margin-block-start: var(--b-space-1); }
+
+  /* Waveform bars (decorative) */
+  .b-waveform {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    height: 1.6rem;
+    flex: 1;
+  }
+  .b-waveform i {
+    flex: 1;
+    height: calc(var(--v, 0.4) * 100%);
+    min-width: 2px;
+    background: var(--b-fill);
+    border-radius: var(--b-radius-full);
+  }
+  .b-waveform i.is-played { background: var(--b-color-accent); }
+
+  /* ---- Async image (SwiftUI AsyncImage) ------------------------------------
+     <span class="b-async-img"><img data-b-async src="…"></span>
+     Shimmers until the image loads, then fades it in (barua.js).
+  --------------------------------------------------------------------------- */
+  .b-async-img {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    border-radius: var(--b-radius-lg);
+    background: var(--b-fill-tertiary);
+  }
+  .b-async-img::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    translate: -100% 0;
+    background: linear-gradient(90deg, transparent,
+      light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.06)), transparent);
+    animation: b-shimmer 1.6s var(--b-ease-standard) infinite;
+  }
+  .b-async-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity var(--b-duration-slow) var(--b-ease-out);
+  }
+  .b-async-img.is-loaded::before { display: none; }
+  .b-async-img.is-loaded img { opacity: 1; }
+
+  /* ---- Thumbnail --------------------------------------------------------------------- */
+  .b-thumb {
+    position: relative;
+    display: inline-block;
+    width: var(--b-thumb-size, 4.5rem);
+    aspect-ratio: 1;
+    border-radius: var(--b-radius-md);
+    overflow: hidden;
+    background: var(--b-fill-tertiary);
+    flex: none;
+  }
+  .b-thumb img { width: 100%; height: 100%; object-fit: cover; }
+  .b-thumb--video::after {
+    content: "▶";
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-size: 1rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.3);
+  }
+  .b-thumb__duration {
+    position: absolute;
+    inset-block-end: 0.25rem;
+    inset-inline-end: 0.25rem;
+    padding: 0.05rem 0.3rem;
+    font-size: var(--b-text-caption2);
+    font-variant-numeric: tabular-nums;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.65);
+    border-radius: var(--b-radius-xs);
+  }
+
+  /* ---- Media Placeholder --------------------------------------------------------------- */
+  .b-media-placeholder {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 16 / 9;
+    color: var(--b-text-quaternary);
+    background:
+      repeating-linear-gradient(45deg,
+        var(--b-fill-quaternary) 0 10px, transparent 10px 20px),
+      var(--b-fill-quaternary);
+    border: 1px dashed var(--b-border);
+    border-radius: var(--b-radius-lg);
+  }
+  .b-media-placeholder svg { width: 2rem; height: 2rem; }
+
+  /* ---- Upload Preview grid --------------------------------------------------------------- */
+  .b-upload-previews {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+    gap: var(--b-space-2);
+  }
+  .b-upload-preview {
+    position: relative;
+    aspect-ratio: 1;
+    border-radius: var(--b-radius-md);
+    overflow: hidden;
+    background: var(--b-fill-tertiary);
+  }
+  .b-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
+  .b-upload-preview__remove {
+    position: absolute;
+    inset-block-start: 0.25rem;
+    inset-inline-end: 0.25rem;
+    display: grid;
+    place-items: center;
+    width: 1.4rem; height: 1.4rem;
+    font-size: 0.8rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.55);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+  .b-upload-preview__remove:hover { background: var(--b-color-danger); }
+  .b-upload-preview .b-progress {
+    position: absolute;
+    inset-inline: 0.4rem;
+    inset-block-end: 0.4rem;
+  }
+}