github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-17 05:32:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): one voice, brand gradients, a lighter splash gate, denser portfolio

Browse Source 
- Voice unified on the title-tag register: the homepage h1 now says what we
  sell (Custom E-commerce, Apps & Crypto Tools); 'Precision engineering for
  everyone' is demoted to the supporting line. The structured-data and
  manifest descriptions now match the OG description instead of carrying
  their own registers.
- The off-palette cyan/blue gradients are gone: .hero-title and the new
  .brand-gradient-text use the four-colour system (light palette on light,
  dark palette on dark, per the pack). Splash cover text, services and
  portfolio headings, the hero aura, and button shadows all follow.
- The splash now dismisses once 40% scrolled past instead of requiring the
  whole screen to leave the viewport (it was already once-per-session and
  reduced-motion-skipping).
- Portfolio: heading 'Portfolio', subtitle 'Products & projects', meta title
  to match; grid grows to three columns on xl in a max-w-6xl container.
- anim3_matrix slimmed: single-layer glow, unfiltered crackle and orbs, and
  the border cycles stroke colour instead of animating filter:hue-rotate --
  the filter animation forced a full filter re-render per frame and pegged a
  core on the page hosting it.
This commit is contained in:
jwinterm
2026-08-16 00:04:28 -04:00
parent c73b9f1c04
commit 261cb04667
11 changed files with 47 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/globals.css
+16 -1
View File
@@ -286,14 +286,29 @@
/* Hero title: an animated gradient sheen. LCP-safe — the text paints immediately with the
gradient; only the gradient POSITION animates, which never delays the largest paint. The
global reduced-motion rule freezes it to the base gradient. */
/* The brand's four-colour system (S green, U magenta, C blue, H teal), one per glyph.
Light theme uses the light palette; .dark swaps in the dark palette, which is the
same hues lifted for contrast on near-black -- from packs/such-software/pack.json. */
.hero-title {
background-image: linear-gradient(110deg, #22d3ee 0%, #3b82f6 30%, #7dd3fc 50%, #3b82f6 70%, #22d3ee 100%);
background-image: linear-gradient(110deg, #1a5c38 0%, #b83670 30%, #176a92 55%, #12857e 80%, #1a5c38 100%);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: hero-sheen 9s ease-in-out infinite;
}
.dark .hero-title {
background-image: linear-gradient(110deg, #35925c 0%, #e8689e 30%, #4aade0 55%, #3ad4c6 80%, #35925c 100%);
}
.brand-gradient-text {
background-image: linear-gradient(90deg, #1a5c38, #b83670, #176a92, #12857e);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.dark .brand-gradient-text {
background-image: linear-gradient(90deg, #35925c, #e8689e, #4aade0, #3ad4c6);
}
@keyframes hero-sheen {
0%, 100% { background-position: 0% center; }
50% { background-position: 100% center; }