/* ============================================================ BRUTALIST LAYER — ports the Dataspace marketing-page style onto the rest of the site. Loaded after tokens.css + site.css. Default state == "safer port" (Tomorrow headlines, concrete texture, photographic mocks, marquees, ticket collage, before/after columns, lined CTAs). Adding .bolder to opts into the bolder remix (gutter rails, heavier rhythm). ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Tomorrow:wght@200;400;500;600;700&display=swap"); :root { --brut-h-line: url("/assets/h_line.png"); --brut-v-line: url("/assets/v_line.png"); --brut-concrete: url("/assets/concrete-wall.png"); --brut-mathematics: url("/assets/old_mathematics.png"); --brut-dots: url("/assets/dotted_pattern.png"); --brut-paper: url("/assets/rice-paper-2.png"); --brut-grid: url("/assets/noisy_grid.webp"); --brut-mirror: url("/assets/lighter-mirror.jpg"); --brut-accent: #FF5100; --brut-ink: #0E0E10; --brut-charcoal: #1a1a1f; --brut-paper-cream: #ECE6D5; } /* ------------------------------------------------------------ 1. PAGE BACKGROUND — layered parallax: concrete base + dots accent ------------------------------------------------------------ */ html { background-color: var(--ds-paper-50); } html[data-theme="dark"] { background-color: var(--ds-ink-900); } body { background: transparent; position: relative; isolation: isolate; } .brut-parallax { position: fixed; inset: -10vh -10vw; pointer-events: none; z-index: -1; background-repeat: repeat; background-position-y: 0; will-change: background-position; } .brut-parallax--concrete { background-image: var(--brut-concrete); background-size: 420px; opacity: 1; mix-blend-mode: multiply; z-index: -2; } .brut-parallax--dots { background-image: radial-gradient(circle, rgba(0,0,0,0.3) 1px, transparent 1px); background-size: 80px 80px; opacity: 0.35; mix-blend-mode: multiply; z-index: -1; } html[data-theme="dark"] .brut-parallax--concrete { mix-blend-mode: soft-light; opacity: 0.9; } html[data-theme="dark"] .brut-parallax--dots { background-image: radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px); mix-blend-mode: screen; opacity: 0.18; } body.surface-paper .brut-parallax--concrete { background-image: var(--brut-paper); background-size: 400px; } body.surface-mathematics .brut-parallax--concrete { background-image: var(--brut-mathematics); background-size: 240px; opacity: 0.6; } body.surface-dots .brut-parallax--concrete { background-image: var(--brut-dots); background-size: 360px; opacity: 0.6; } /* ------------------------------------------------------------ 2. TYPOGRAPHY — Tomorrow for all display surfaces sitewide ------------------------------------------------------------ */ .hero__headline, .section-head h2, .cta-band h2, .feature-card h3, .feat-row__copy h2, .feature-hero__copy h2, .usecase h3, .maturity__step h3, .feat-case h3, .product-hero__title, .sols-hero__title, .brut-section__title, .brut-hero__title, .dark-hero h1 { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 200; text-transform: uppercase; letter-spacing: 0.05em; font-style: normal; line-height: 1.08; } .hero__headline em, .section-head h2 em, .cta-band h2 em, .feat-row__copy h2 em, .feature-hero__copy h2 em, .usecase h3 em, .maturity__step h3 em, .feat-case h3 em, .product-hero__title em, .sols-hero__title em, .dark-hero h1 em { font-family: inherit; font-style: normal; font-weight: 200; color: var(--brut-accent); } .hero__tagline { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 200; font-style: italic; text-transform: none; letter-spacing: 0.02em; } .btn { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 2px; font-size: 12px; padding: 13px 22px; } .btn--lg { padding: 16px 28px; font-size: 13px; } .btn--sm { padding: 9px 16px; font-size: 11px; } .eyebrow { font-family: var(--ds-font-mono); letter-spacing: 0.18em; } .site-nav__links a { font-family: "Tomorrow", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 400; } /* ------------------------------------------------------------ 3. LINED CTA BUTTON (.btn--lined) ------------------------------------------------------------ */ .btn--lined { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; margin-top: 6px; border: 0; background: transparent; text-decoration: none; cursor: pointer; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .btn--lined:hover { transform: translateY(-4px); } .btn--lined__h { position: absolute; left: 50%; height: 1px; width: calc(100% + 56px); background: var(--brut-charcoal); background-image: var(--brut-h-line); background-repeat: repeat-x; background-position: center; background-size: auto 100%; -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); pointer-events: none; opacity: 0.5; transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; } .btn--lined__h--top { top: 0; transform: translateX(-50%); } .btn--lined__h--bottom { bottom: 0; transform: translateX(-50%); } .btn--lined:hover .btn--lined__h--top { width: calc(100% + 80px); transform: translateX(-50%) translateY(-4px); opacity: 0.95; } .btn--lined:hover .btn--lined__h--bottom { width: calc(100% + 80px); transform: translateX(-50%) translateY(4px); opacity: 0.95; } .btn--lined__mid { display: flex; align-items: stretch; position: relative; z-index: 1; } .btn--lined__v { flex: 0 0 1px; width: 1px; margin-top: -10px; margin-bottom: -10px; background-image: var(--brut-v-line); background-repeat: no-repeat; background-position: center; background-size: contain; filter: invert(20%); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .btn--lined:hover .btn--lined__v--left { transform: translateX(-3px) scaleY(1.08); } .btn--lined:hover .btn--lined__v--right { transform: translateX(3px) scaleY(1.08); } .btn--lined__body { display: inline-flex; align-items: center; gap: 0.55rem; padding: 14px 26px; background: #fff; color: var(--brut-charcoal); font-family: "Tomorrow", system-ui, sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; transition: box-shadow 0.4s ease, transform 0.4s ease; border-radius: 0; } .btn--lined:hover .btn--lined__body { box-shadow: 0 16px 36px rgba(20, 20, 15, 0.18); } .btn--lined__body .arrow, .btn--lined__body .bi { font-size: 14px; line-height: 1; } .surface-dark .btn--lined__h, .dark-band .btn--lined__h { background-color: transparent; filter: invert(100%); opacity: 0.9; } .surface-dark .btn--lined__v, .dark-band .btn--lined__v { filter: invert(95%); opacity: 0.95; } .surface-dark .btn--lined__body, .dark-band .btn--lined__body, .cta-band .btn--lined__body, .brut-darkband .btn--lined__body { background: #fff; color: var(--brut-charcoal); } .cta-band .btn--lined__h, .brut-darkband .btn--lined__h { background-color: transparent; filter: invert(100%); opacity: 0.9; } .cta-band .btn--lined__v, .brut-darkband .btn--lined__v { filter: invert(95%); opacity: 0.95; } /* ------------------------------------------------------------ 4. MARQUEE STRIP ------------------------------------------------------------ */ .brut-marquee { position: relative; margin: 0; padding: 28px 0; background-color: #050507; background-image: url("/assets/dark-grain.jpg"); background-size: cover; background-position: center; color: #fff; overflow: hidden; border-block: 1px solid rgba(255,255,255,0.06); } .brut-marquee::before { content: ""; position: absolute; inset: 0; background-image: var(--brut-mathematics); background-size: 220px; opacity: 0.12; mix-blend-mode: screen; pointer-events: none; } .brut-marquee__track { display: flex; width: max-content; animation: brut-marquee 38s linear infinite; white-space: nowrap; } .brut-marquee__track > span { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 200; font-size: clamp(28px, 4vw, 52px); letter-spacing: 0.06em; text-transform: uppercase; padding-right: 1.2em; display: inline-block; } .brut-marquee__track > span em { font-style: normal; color: var(--brut-accent); padding-right: 0.5em; } @keyframes brut-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .brut-marquee__track { animation: none; } } .brut-marquee--light { background: var(--brut-paper-cream); color: var(--brut-charcoal); } .brut-marquee--light::before { background-image: var(--brut-mathematics); opacity: 0.25; mix-blend-mode: multiply; } /* ------------------------------------------------------------ 5. TICKET COLLAGE BAND ------------------------------------------------------------ */ .brut-ticket { position: relative; padding: clamp(48px, 7vw, 96px) 0; isolation: isolate; background-color: #050507; background-image: url("/assets/dark-grain.jpg"); background-size: cover; background-position: center; color: #fff; overflow: hidden; } .brut-ticket::before { content: ""; position: absolute; inset: 0; background-image: var(--brut-mathematics); background-size: 300px; opacity: 0.16; mix-blend-mode: screen; pointer-events: none; } .brut-ticket__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, 1fr) 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: center; max-width: var(--ds-content-full); margin: 0 auto; padding-inline: var(--ds-gutter); } @media (max-width: 800px) { .brut-ticket__inner { grid-template-columns: 1fr; } } .brut-ticket__figure { position: relative; filter: drop-shadow(0 32px 56px rgba(0,0,0,0.4)); } .brut-ticket__figure img { width: 100%; height: auto; display: block; max-width: 480px; margin-left: auto; } .brut-ticket__prose { display: flex; flex-direction: column; gap: var(--ds-space-lg); } .brut-ticket__eyebrow { font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brut-accent); } .brut-ticket__title { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 200; font-size: clamp(30px, 4.2vw, 56px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; margin: 0; max-width: 20ch; } .brut-ticket__title em { font-style: normal; color: var(--brut-accent); } .brut-ticket__body { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 54ch; margin: 0; } .brut-ticket__body em { color: #fff; font-style: italic; } .brut-ticket__sig { font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); padding-top: var(--ds-space-sm); border-top: 1px solid rgba(255,255,255,0.18); } /* ------------------------------------------------------------ 6. BEFORE / AFTER COMPARISON COLUMNS ------------------------------------------------------------ */ .brut-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--th-hairline); border-bottom: 1px solid var(--th-hairline); } @media (max-width: 760px) { .brut-compare { grid-template-columns: 1fr; } } .brut-compare__col { padding: var(--ds-space-xl) var(--ds-space-xl); display: flex; flex-direction: column; gap: var(--ds-space-md); } .brut-compare__col + .brut-compare__col { border-left: 1px solid var(--th-hairline); } @media (max-width: 760px) { .brut-compare__col + .brut-compare__col { border-left: 0; border-top: 1px solid var(--th-hairline); } } .brut-compare__col--before { background: rgba(20,20,15,0.02); } .brut-compare__col--after { background-color: #050507; background-image: url("/assets/dark-grain.jpg"); background-size: cover; background-position: center; color: #fff; position: relative; } .brut-compare__col--after::before { content: ""; position: absolute; inset: 0; background-image: var(--brut-mathematics); background-size: 220px; opacity: 0.14; mix-blend-mode: screen; pointer-events: none; } .brut-compare__lbl { font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--th-text-faint); } .brut-compare__col--after .brut-compare__lbl { color: var(--brut-accent); } .brut-compare__col h3 { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 200; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1; margin: 0; max-width: 18ch; } .brut-compare__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; position: relative; z-index: 1; } .brut-compare__list li { padding: 14px 0; border-bottom: 1px solid var(--th-hairline); font-size: 15px; line-height: 1.5; display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: baseline; } .brut-compare__col--after .brut-compare__list li { border-bottom-color: rgba(255,255,255,0.1); } .brut-compare__list li::before { content: ""; width: 14px; height: 1px; background: currentColor; opacity: 0.5; margin-top: 10px; } .brut-compare__col--after .brut-compare__list li::before { background: var(--brut-accent); opacity: 1; } /* ------------------------------------------------------------ 7. PHOTOGRAPHIC MOCKS ------------------------------------------------------------ */ .brut-mock { position: absolute; inset: 0; background: var(--brut-ink); background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: space-between; padding: var(--ds-space-md); overflow: hidden; isolation: isolate; } .brut-mock::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 60%, transparent 0%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85) 100%); z-index: 0; pointer-events: none; } .brut-mock::after { content: ""; position: absolute; inset: 0; background-image: var(--brut-mathematics); background-size: 180px; opacity: 0.12; mix-blend-mode: screen; z-index: 0; pointer-events: none; } .brut-mock > * { position: relative; z-index: 1; } .brut-mock__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); } .brut-mock__chip { font-family: var(--ds-font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.75); padding: 4px 10px; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; white-space: nowrap; } .brut-mock__chip--active { background: var(--brut-accent); border-color: var(--brut-accent); color: #fff; } .brut-mock__pictogram { flex: 1; display: grid; place-items: center; } .brut-mock__pictogram img { width: clamp(72px, 28%, 140px); height: auto; filter: brightness(0) invert(1); opacity: 0.95; transition: transform 0.5s ease; } .brut-mock:hover .brut-mock__pictogram img { transform: scale(1.06); } .brut-mock__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); } .brut-mock__signal { font-family: var(--ds-font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.65); } .brut-mock__signal strong { color: var(--brut-accent); font-weight: 500; letter-spacing: 0.16em; } .brut-mock--atmos, .brut-mock--grid, .brut-mock--ship, .brut-mock--manual, .brut-mock--paper, .brut-mock--time, .brut-mock--fragment, .brut-mock--mirror { background-image: linear-gradient(rgba(14,14,16,0.55), rgba(14,14,16,0.85)), url("/assets/atmosphere.jpg"); } .feature-card__visual:has(.brut-mock), .feat-row__visual:has(.brut-mock) { background: transparent; } /* ------------------------------------------------------------ 8. THREE-PILLAR PICTOGRAM ROW ------------------------------------------------------------ */ .brut-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background-image: var(--brut-v-line), var(--brut-v-line); background-repeat: no-repeat, no-repeat; background-size: 1px 100%, 1px 100%; background-position: 33.333% 0, 66.666% 0; padding: var(--ds-space-xl) 0; border-top: 1px solid var(--th-hairline); border-bottom: 1px solid var(--th-hairline); } @media (max-width: 760px) { .brut-pillars { grid-template-columns: 1fr; background-image: none; } } .brut-pillar { padding: var(--ds-space-md) var(--ds-space-xl); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .brut-pillar__icon { width: 64px; height: 64px; display: grid; place-items: center; background: var(--brut-charcoal); background-image: radial-gradient(circle at 50% 50%, rgba(255,81,0,0.18), transparent 70%); border-radius: 50%; } .brut-pillar__icon img { width: 38px; height: 38px; filter: brightness(0) invert(1); } .brut-pillar__label { font-family: "Tomorrow", system-ui, sans-serif; font-size: 12px; letter-spacing: 0.16em; font-weight: 500; text-transform: uppercase; color: var(--th-text); } .brut-pillar__sub { font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--th-text-faint); } /* ------------------------------------------------------------ 9. DARK "NEW ERA" BAND ------------------------------------------------------------ */ .brut-darkband { position: relative; isolation: isolate; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,81,0,0.18), transparent 65%), linear-gradient(180deg, var(--brut-charcoal) 0%, #0c0c10 100%); color: #fff; overflow: hidden; } .brut-darkband::before { content: ""; position: absolute; inset: 0; background-image: var(--brut-mathematics); background-size: 300px; opacity: 0.14; mix-blend-mode: screen; pointer-events: none; z-index: 0; } .brut-darkband::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background-image: url("/assets/centered_background_ship.png"); background-size: cover; background-position: center bottom; background-repeat: no-repeat; opacity: 0.45; pointer-events: none; z-index: 0; mix-blend-mode: screen; } .brut-darkband > .container { position: relative; z-index: 2; } /* ------------------------------------------------------------ 10. STACKED DETAIL CARDS ------------------------------------------------------------ */ .brut-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1100px; margin: 0 auto; align-items: flex-start; } @media (max-width: 900px) { .brut-stack { grid-template-columns: 1fr; gap: var(--ds-space-md); } } .brut-stack__card { position: relative; background: #fff; color: var(--brut-charcoal); border: 1px solid rgba(255,255,255,0.16); padding: var(--ds-space-lg) var(--ds-space-lg) calc(var(--ds-space-lg) + 8px); font-size: 15px; line-height: 1.55; box-shadow: 0 24px 52px rgba(0,0,0,0.42), 0 8px 22px rgba(0,0,0,0.24); } .brut-stack__card:nth-child(1) { z-index: 1; margin-right: -18px; margin-top: 8px; } .brut-stack__card:nth-child(2) { z-index: 3; margin-top: 24px; box-shadow: 0 32px 60px rgba(0,0,0,0.5), 0 12px 28px rgba(0,0,0,0.3); } .brut-stack__card:nth-child(3) { z-index: 2; margin-left: -18px; margin-top: 8px; } @media (max-width: 900px) { .brut-stack__card, .brut-stack__card:nth-child(1), .brut-stack__card:nth-child(2), .brut-stack__card:nth-child(3) { margin: 0; z-index: auto; } } .brut-stack__num { font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brut-accent); margin-bottom: 8px; display: block; } .brut-stack__head { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; line-height: 1.2; } .brut-stack__card ul { margin: 0; padding-left: 18px; } .brut-stack__card li { margin-bottom: 6px; } /* ------------------------------------------------------------ 11. NAV refinements ------------------------------------------------------------ */ .site-nav { background: rgba(250, 248, 243, 0.86); } html[data-theme="dark"] .site-nav { background: rgba(14, 14, 16, 0.82); } .site-nav__cta .btn--primary { background: var(--brut-accent); border-color: var(--brut-accent); } /* ------------------------------------------------------------ 12. HERO sizing ------------------------------------------------------------ */ .hero__headline { font-size: clamp(40px, 7vw, 96px); } .section-head h2 { font-size: clamp(30px, 4.4vw, 64px); letter-spacing: 0.03em; } .cta-band h2 { font-size: clamp(30px, 4.4vw, 64px); letter-spacing: 0.03em; } .feature-card h3 { font-size: 18px; letter-spacing: 0.05em; } .feat-row__copy h2 { font-size: clamp(28px, 3.5vw, 48px); letter-spacing: 0.04em; } .usecase h3 { font-size: 17px; letter-spacing: 0.06em; line-height: 1.2; } .maturity__step h3 { font-size: 19px; letter-spacing: 0.05em; } .feature-card, .usecase { position: relative; isolation: isolate; } .feature-card::after, .usecase::after { content: ""; position: absolute; inset: 0; background-image: var(--brut-paper); background-size: 320px; opacity: 0.5; mix-blend-mode: multiply; z-index: -1; pointer-events: none; border-radius: inherit; } html[data-theme="dark"] .feature-card::after, html[data-theme="dark"] .usecase::after { display: none; } .cta-band { background-color: #050507; background-image: radial-gradient(ellipse 70% 80% at 110% 50%, rgba(255,81,0,0.20), transparent 60%), url("/assets/dark-grain.jpg"); background-size: auto, cover; background-position: center; } .cta-band::before { background-image: var(--brut-mathematics); background-size: 280px; background-position: center; background-repeat: repeat; opacity: 0.14; } /* ------------------------------------------------------------ 13. BOLDER REMIX ------------------------------------------------------------ */ body.bolder { --brut-page-gutter: 56px; } @media (max-width: 1100px) { body.bolder { --brut-page-gutter: 0; } } body.bolder .site-nav__inner, body.bolder .container, body.bolder .brut-ticket__inner { padding-left: max(var(--ds-gutter), var(--brut-page-gutter)); padding-right: max(var(--ds-gutter), var(--brut-page-gutter)); } body.bolder .brut-rail { display: block; position: fixed; top: 0; bottom: 0; width: var(--brut-page-gutter); z-index: 50; pointer-events: none; overflow: hidden; } body:not(.bolder) .brut-rail { display: none; } body.bolder .brut-rail--left { left: 0; } body.bolder .brut-rail--right { right: 0; } @media (max-width: 1100px) { body.bolder .brut-rail { display: none !important; } } body.bolder .brut-rail::before { content: ""; position: absolute; inset: 0; background-color: #000; background-image: var(--brut-mathematics); background-repeat: repeat; background-size: 120px; background-position: center; } body.bolder .brut-rail__logos { position: absolute; left: 50%; top: 50%; width: max(280vh, 3000px); height: var(--brut-page-gutter); transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center center; background-image: url("/assets/logo.svg"); background-repeat: round; background-position: center; filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(0,0,0,0.5)); opacity: 0.85; mix-blend-mode: soft-light; animation: brut-rail-drift 32s linear infinite; } body.bolder .brut-rail--right .brut-rail__logos { animation-direction: reverse; } @keyframes brut-rail-drift { 0% { transform: translate(-50%, -50%) rotate(-90deg); } 100% { transform: translate(-50%, calc(-50% - 140px)) rotate(-90deg); } } @media (prefers-reduced-motion: reduce) { body.bolder .brut-rail__logos { animation: none; } } body.bolder .section + .section::before { content: ""; display: block; height: 28px; background-image: var(--brut-dots); background-size: 280px; background-position: center; background-repeat: repeat-x; opacity: 0.35; margin-bottom: var(--ds-space-2xl); } body.bolder .brut-marquee { padding: 40px 0; } body.bolder .brut-marquee__track > span { font-size: clamp(36px, 5vw, 72px); } body.bolder .hero__headline, body.bolder .product-hero__title, body.bolder .sols-hero__title, body.bolder .brut-hero__title { letter-spacing: 0.08em; } /* ------------------------------------------------------------ 14. RESOURCES & DEMO page primitives ------------------------------------------------------------ */ .brut-rescards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-space-lg); } @media (max-width: 1000px) { .brut-rescards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .brut-rescards { grid-template-columns: 1fr; } } .brut-rescard { display: flex; flex-direction: column; background: var(--th-bg-raised); border: 1px solid var(--th-hairline); position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; } .brut-rescard:hover { transform: translateY(-4px); border-color: var(--brut-charcoal); box-shadow: 0 22px 48px rgba(20,20,15,0.14); } .brut-rescard__img { aspect-ratio: 16 / 10; background-color: var(--brut-charcoal); background-size: cover; background-position: center; position: relative; } .brut-rescard__img::after { content: ""; position: absolute; inset: 0; background-image: var(--brut-mathematics); background-size: 200px; mix-blend-mode: screen; opacity: 0.15; } .brut-rescard__kind { position: absolute; top: 14px; left: 14px; font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; padding: 4px 10px; background: var(--brut-accent); z-index: 1; } .brut-rescard__body { padding: var(--ds-space-md) var(--ds-space-lg) var(--ds-space-lg); display: flex; flex-direction: column; gap: 10px; flex: 1; } .brut-rescard__meta { font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--th-text-faint); } .brut-rescard__title { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 200; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.18; margin: 0; color: var(--th-text); text-wrap: balance; } .brut-rescard__title em { font-style: normal; color: var(--brut-accent); } .brut-rescard__excerpt { font-size: 14px; color: var(--th-text-muted); line-height: 1.55; margin: 0; } .brut-rescard__cta { margin-top: auto; padding-top: var(--ds-space-sm); font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brut-accent); display: inline-flex; gap: 6px; } .brut-rescard__cta::after { content: "→"; } .brut-changelog { display: flex; flex-direction: column; gap: 0; } .brut-changelog__item { display: grid; grid-template-columns: 200px 1fr; gap: var(--ds-space-xl); padding: var(--ds-space-lg) 0; border-bottom: 1px solid var(--th-hairline); } @media (max-width: 700px) { .brut-changelog__item { grid-template-columns: 1fr; gap: var(--ds-space-sm); } } .brut-changelog__date { font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--th-text-faint); padding-top: 4px; } .brut-changelog__tag { display: inline-block; margin-right: 8px; padding: 2px 8px; background: var(--brut-accent); color: #fff; font-size: 9px; letter-spacing: 0.16em; border-radius: 0; } .brut-changelog__h { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 200; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 6px; color: var(--th-text); line-height: 1.2; } .brut-changelog__h em { color: var(--brut-accent); font-style: normal; } .brut-changelog__p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--th-text-muted); } .brut-demo { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; padding-top: clamp(80px, 12vh, 140px); padding-bottom: var(--ds-space-4xl); } @media (max-width: 900px) { .brut-demo { grid-template-columns: 1fr; } } .brut-demo__intro h1 { font-family: "Tomorrow", system-ui, sans-serif; font-weight: 200; font-size: clamp(40px, 6vw, 88px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; margin: 0 0 var(--ds-space-lg); max-width: 14ch; } .brut-demo__intro h1 em { font-style: normal; color: var(--brut-accent); } .brut-demo__points { list-style: none; padding: 0; margin: var(--ds-space-xl) 0 0; display: flex; flex-direction: column; gap: 0; } .brut-demo__points li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--th-hairline); font-size: 15px; line-height: 1.5; color: var(--th-text); } .brut-demo__points li:last-child { border-bottom: 0; } .brut-demo__points li::before { content: ""; width: 18px; height: 1px; background: var(--brut-accent); margin-top: 12px; } .brut-form { position: relative; background: var(--th-bg-raised); padding: var(--ds-space-2xl) var(--ds-space-xl); border: 1px solid var(--th-hairline); } .brut-form::before { content: ""; position: absolute; inset: 0; background-image: var(--brut-paper); background-size: 320px; opacity: 0.6; mix-blend-mode: multiply; pointer-events: none; } .brut-form__head { font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brut-accent); margin: 0 0 var(--ds-space-md); position: relative; } .brut-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-md); position: relative; } .brut-form__row { display: flex; flex-direction: column; gap: 6px; position: relative; } .brut-form__row--wide { grid-column: 1 / -1; } .brut-form label { font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--th-text-faint); } .brut-form input, .brut-form select, .brut-form textarea { font-family: var(--ds-font-body); font-size: 14px; padding: 12px 14px; background: rgba(255,255,255,0.86); border: 1px solid var(--th-hairline); color: var(--th-text); border-radius: 0; transition: border-color 0.2s ease; width: 100%; } .brut-form input:focus, .brut-form select:focus, .brut-form textarea:focus { outline: none; border-color: var(--brut-accent); box-shadow: 0 0 0 3px rgba(255,81,0,0.16); } .brut-form__submit { grid-column: 1 / -1; margin-top: var(--ds-space-md); position: relative; z-index: 1; } .brut-form__fine { grid-column: 1 / -1; font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--th-text-faint); margin: var(--ds-space-md) 0 0; position: relative; } /* ------------------------------------------------------------ 15. Tweaks panel ------------------------------------------------------------ */ .brut-tweaks { position: fixed; bottom: 18px; right: 18px; z-index: 9000; width: 280px; max-width: calc(100vw - 36px); background: #fff; border: 1px solid var(--brut-charcoal); box-shadow: 0 24px 60px rgba(0,0,0,0.22); display: none; font-family: var(--ds-font-body); color: var(--brut-charcoal); } .brut-tweaks.is-open { display: block; } .brut-tweaks__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--brut-charcoal); color: #fff; font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; } .brut-tweaks__close { cursor: pointer; background: none; border: 0; color: #fff; font-size: 16px; line-height: 1; } .brut-tweaks__body { padding: 14px; display: flex; flex-direction: column; gap: 14px; max-height: 70vh; overflow-y: auto; } .brut-tweaks__row { display: flex; flex-direction: column; gap: 6px; } .brut-tweaks__lbl { font-family: var(--ds-font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brut-charcoal); opacity: 0.6; } .brut-tweaks__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--brut-charcoal); } .brut-tweaks__seg button { padding: 8px 10px; background: #fff; color: var(--brut-charcoal); font-family: "Tomorrow", system-ui, sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; border: 0; } .brut-tweaks__seg button.is-on { background: var(--brut-charcoal); color: #fff; } .brut-tweaks__seg--3 { grid-template-columns: 1fr 1fr 1fr; } .brut-tweaks__seg--4 { grid-template-columns: repeat(4, 1fr); } .brut-tweaks__swatches { display: flex; gap: 6px; } .brut-tweaks__swatch { width: 30px; height: 30px; border: 1px solid var(--brut-charcoal); cursor: pointer; padding: 0; position: relative; } .brut-tweaks__swatch.is-on::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--brut-charcoal); } /* ------------------------------------------------------------ 16. Reveal-on-scroll for stack cards ------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { .brut-stack__card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .brut-stack__card:hover { transform: translateY(-4px); } }