Illusion/sharper.ly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8464c24fb1714ee9ee537285d980ac62903d7e0f
sharper.ly/apps/web/app/styles/semantic.css
T
IllusionandClaude Opus 5 8464c24fb1 Match the home page to Figma frame 253:4799 
The page resembled the design but had drifted in every band. Ported it
section by section against the measured frame.

Hero (253:4800)
- Add the SHARP wordmark above the headline. The frame paints "SHARP"
  only, not the full SHARP-ER lockup the navigation carries, so this is
  the SHARP mark on its own, as vector (extracted from the brand
  guideline artwork) at its true 273px rather than an upscaled PNG.
- Drop the leading project name from the headline in both locales: the
  wordmark above now carries it, as the frame composes it.
- Stop the lead paragraph rendering by default. The frame's subheading
  node is hidden, but the code fell back to the site description, so a
  paragraph always appeared.
- Fallback CTAs become "Discover SHARP-ER" / "Explore Our Work", 24px
  apart. Both the CMS and fallback paths now render through one HeroCta,
  so an editor-authored secondary CTA gets the designed white treatment
  instead of the dark-surface outline.
- The picture loses its radius and gains the frame's two flat washes and
  wide band.

Figures band
- 253:4835 is hidden="true" in the frame, so the band and its "figures
  still being confirmed" placeholder no longer render. It appears only
  once the CMS supplies real numbers.

Launch (361:10853)
- Heading renders at Display/Small instead of Heading/H2. SectionHeader
  gains `size` since display-sm was reachable only via titleAs="h1".
- The three-paragraph story becomes the frame's single centred lead with
  its four bold runs, which needed a ProseRun copy shape - a flat string
  cannot carry emphasis.
- The captions were Card.Content links with images and action labels;
  the frame draws plain centred Heading/H2 text.
- Add the three-up photo strip that bleeds past the page and clips.
- Remove the funding line, which the frame does not draw in this band.
  EU visibility still stands via the nav badge and footer statement.

Partners (393:14754)
- Heading moves from centred to start-aligned, up to Display/Small.
- Tiles move to the sunken surface (they were lighter than the page; the
  design has them darker), lose their border, 8px -> 4px radius, padding
  on the inline start only, logo 48 -> 70px, name to Body/Large Bold.

Footer
- Black ground via a new --surface-footer token, a top rule, links up to
  Body/Large Bold 18/28 at 24px spacing, and column headings to
  Body/Small Bold on --text-tertiary.
- Keeps the real IA from ROUTE_SLUGS rather than frame 140:7814's
  labels, which name six pages that do not exist.

Tokens
- New tier-1 steps for values the design uses and the ramps lacked
  (--color-black-a20, --color-green-200-a12, --opacity-50) and tier-2
  --overlay-picture-shade / --overlay-picture-tint for the hero wash.

copy.ts now names the Figma frame as the source for the home strings.
The Arabic launch lead is rebuilt from the approved Arabic column to
carry the English frame's meaning and is marked (ar-draft) pending
client sign-off - the file has no Arabic home frame to work from.

Verified: typecheck and build green, no raw hex or tier-1 token in
components/routes, no physical-direction utility, 141 i18n keys at
parity, both locales rendered and checked for RTL mirroring.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-14 12:38:05 +02:00

438 lines
22 KiB
CSS
Raw Blame History

/* ============================================================================
TIER 2 - SEMANTIC TOKENS
----------------------------------------------------------------------------
Every token here carries MEANING and every value is a var() pointing at a
TIER 1 primitive (app/styles/primitives.css). No raw hex is allowed below.
Components may use ONLY these tokens - never a primitive, never a hex.
SURFACES, not a global theme.
The SHARP-ER home page is dark by default (bg #1d1d1b), while the nav and
footer also ship light variants, so the whole tier-2 palette is redefined
per surface. Any element can flip the surface for its own subtree:
<html data-surface="dark"> <!-- default, may be omitted -->
<footer data-surface="light"> <!-- light footer inside a dark page -->
:root and [data-surface="dark"] share one block; [data-surface="light"]
comes afterwards so it wins on the same element, and proximity makes the
nearest data-surface ancestor win for any subtree.
========================================================================= */
/* ---------------------------------------------------------------------------
DARK SURFACE - the default
------------------------------------------------------------------------ */
:root,
[data-surface="dark"] {
color-scheme: dark;
/* --- surfaces / backgrounds ------------------------------------------ */
--surface-page: var(--color-neutral-800); /* figma background/primary */
--surface-raised: var(--color-neutral-700); /* cards sitting on the page */
--surface-sunken: var(--color-neutral-900); /* figma Neutral Black/900 */
--surface-muted: var(--color-white-a08); /* subtle fills, chips, wells */
--surface-accent: var(--color-green-600); /* figma background/accent */
--surface-accent-subtle: var(--color-green-a24);
--surface-danger: var(--color-red-500);
--surface-danger-subtle: var(--color-red-a24);
--surface-inverse: var(--color-white); /* figma background/inverse */
--surface-footer: var(--color-black); /* figma base/black - the footer sits below the page, not on it */
--surface-selection: var(--color-green-a40);
/* --- text ------------------------------------------------------------- */
--text-primary: var(--color-neutral-50); /* figma text/primary */
--text-secondary: var(--color-neutral-300); /* figma text/secondary */
--text-tertiary: var(--color-neutral-400); /* figma text/tertiary */
--text-disabled: var(--color-neutral-500);
--text-accent: var(--color-green-400); /* green-600 is unreadable on #1d1d1b */
--text-danger: var(--color-red-400);
--text-on-accent: var(--color-white); /* figma text/inverse - label on a filled button */
--text-on-inverse: var(--color-neutral-800); /* text sitting on --surface-inverse */
--text-inverse: var(--color-neutral-800); /* alias of --text-on-inverse */
--text-link: var(--color-green-400);
--text-link-hover: var(--color-green-300);
/* --- borders ----------------------------------------------------------- */
--border-subtle: var(--color-white-a12); /* figma stroke/subtle, dark equivalent */
--border-default: var(--color-white-a24);
--border-strong: var(--color-neutral-50);
--border-accent: var(--color-green-600);
--border-danger: var(--color-red-500);
--border-inverse: var(--color-neutral-800);
/* --- interactive: primary (filled green) ------------------------------- */
--interactive-primary-bg: var(--color-green-600);
--interactive-primary-bg-hover: var(--color-green-700);
--interactive-primary-bg-active: var(--color-green-800);
--interactive-primary-bg-disabled: var(--color-green-400);
--interactive-primary-fg: var(--color-white);
--interactive-primary-fg-hover: var(--color-white);
--interactive-primary-fg-disabled: var(--color-white);
--interactive-primary-border: var(--color-transparent);
--interactive-primary-border-hover: var(--color-transparent);
--interactive-primary-border-disabled: var(--color-transparent);
/* --- interactive: secondary (outlined) --------------------------------- */
--interactive-secondary-bg: var(--color-transparent);
--interactive-secondary-bg-hover: var(--color-white-a12);
--interactive-secondary-bg-active: var(--color-white-a16);
--interactive-secondary-bg-disabled: var(--color-transparent);
--interactive-secondary-fg: var(--color-neutral-50);
--interactive-secondary-fg-hover: var(--color-neutral-50);
--interactive-secondary-fg-disabled: var(--color-neutral-500);
--interactive-secondary-border: var(--color-neutral-50);
--interactive-secondary-border-hover: var(--color-neutral-50);
--interactive-secondary-border-disabled: var(--color-white-a24);
/* --- interactive: dark (near-black fill) -------------------------------- */
--interactive-dark-bg: var(--color-neutral-900);
--interactive-dark-bg-hover: var(--color-black);
--interactive-dark-bg-active: var(--color-black);
--interactive-dark-bg-disabled: var(--color-neutral-600);
--interactive-dark-fg: var(--color-white);
--interactive-dark-fg-hover: var(--color-white);
--interactive-dark-fg-disabled: var(--color-neutral-300);
--interactive-dark-border: var(--color-white-a24);
--interactive-dark-border-hover: var(--color-white-a24);
--interactive-dark-border-disabled: var(--color-white-a12);
/* --- interactive: danger ------------------------------------------------ */
--interactive-danger-bg: var(--color-red-500);
--interactive-danger-bg-hover: var(--color-red-600);
--interactive-danger-bg-active: var(--color-red-700);
--interactive-danger-bg-disabled: var(--color-red-300);
--interactive-danger-fg: var(--color-white);
--interactive-danger-fg-hover: var(--color-white);
--interactive-danger-fg-disabled: var(--color-white);
--interactive-danger-border: var(--color-transparent);
--interactive-danger-border-hover: var(--color-transparent);
--interactive-danger-border-disabled: var(--color-transparent);
/* --- interactive: ghost (text-only) -------------------------------------
DEVIATION FROM FIGMA (a11y). The published component paints the hover
background/accent (#008764) and keeps base/turquoise-dark (#006b4f) as
the label - 1.40:1, far below WCAG AA. Both surfaces therefore use white
on the accent fill, which is 4.52:1 and passes AA for body text. The two
lines marked (a11y) are the only ones that differ from Figma; reverting
them to var(--color-green-700) restores pixel parity and the failure. */
--interactive-ghost-bg: var(--color-transparent);
--interactive-ghost-bg-hover: var(--color-green-600);
--interactive-ghost-bg-active: var(--color-green-700);
--interactive-ghost-bg-disabled: var(--color-transparent);
--interactive-ghost-fg: var(--color-green-400);
--interactive-ghost-fg-hover: var(--color-white); /* (a11y) 4.52:1 on green-600; figma: green-700 = 1.40:1 */
--interactive-ghost-fg-disabled: var(--color-green-400);
--interactive-ghost-border: var(--color-transparent);
--interactive-ghost-border-hover: var(--color-transparent);
--interactive-ghost-border-disabled: var(--color-transparent);
/* --- form fields --------------------------------------------------------- */
--field-bg: var(--color-white-a08);
--field-bg-disabled: var(--color-white-a04);
--field-fg: var(--color-neutral-50);
--field-fg-disabled: var(--color-neutral-500);
--field-placeholder: var(--color-neutral-400);
--field-border: var(--color-white-a24);
--field-border-hover: var(--color-white-a40);
--field-border-focus: var(--color-green-400);
--field-border-error: var(--color-red-400);
/* --- focus ring ---------------------------------------------------------- */
--focus-ring-color: var(--color-green-400);
--focus-ring-color-inverse: var(--color-white);
/* --- overlay / scrim ------------------------------------------------------ */
--overlay-scrim: var(--color-black-a56);
--overlay-scrim-strong: var(--color-black-a72);
--overlay-veil: var(--color-white-a08);
/* The home hero's picture wash (figma 253:4800): a flat mint tint painted
over a flat shade. Both sit on a photograph rather than on the page, so
they carry the same value on either surface. */
--overlay-picture-shade: var(--color-black-a20);
--overlay-picture-tint: var(--color-green-200-a12);
}
/* ---------------------------------------------------------------------------
LIGHT SURFACE - light nav, light footer, light content sections
Same token names, re-pointed at different primitives.
------------------------------------------------------------------------ */
[data-surface="light"] {
color-scheme: light;
/* --- surfaces / backgrounds ------------------------------------------ */
--surface-page: var(--color-white); /* figma background/primary (light) */
--surface-raised: var(--color-white);
--surface-sunken: var(--color-neutral-50);
--surface-muted: var(--color-neutral-100); /* figma stroke/subtle as a fill */
--surface-accent: var(--color-green-600);
--surface-accent-subtle: var(--color-green-100);
--surface-danger: var(--color-red-500);
--surface-danger-subtle: var(--color-red-100);
--surface-inverse: var(--color-neutral-900); /* figma background/inverse #0b0b0a */
--surface-footer: var(--color-white); /* figma 140:7812, the light footer */
--surface-selection: var(--color-green-200);
/* --- text ------------------------------------------------------------- */
--text-primary: var(--color-neutral-800); /* figma text/primary (light) */
--text-secondary: var(--color-neutral-500);
/* neutral-400 (#949492) is only 3.04:1 on white - below AA for body text.
Tertiary is real, readable copy (eyebrows, meta lines), so it takes
neutral-500 (7.14:1). #949492 stays on --text-disabled, where WCAG 1.4.3
exempts a disabled control's own label. On the dark surface neutral-400
is 5.56:1 and needs no change. */
--text-tertiary: var(--color-neutral-500);
--text-disabled: var(--color-neutral-400);
--text-accent: var(--color-green-600); /* figma text/accent */
--text-danger: var(--color-red-600);
--text-on-accent: var(--color-white); /* figma text/inverse */
--text-on-inverse: var(--color-neutral-50);
--text-inverse: var(--color-neutral-50);
--text-link: var(--color-green-700);
--text-link-hover: var(--color-green-800);
/* --- borders ----------------------------------------------------------- */
--border-subtle: var(--color-neutral-100); /* figma stroke/subtle #e8e8e8 */
--border-default: var(--color-neutral-200);
--border-strong: var(--color-black); /* figma base/black button stroke */
--border-accent: var(--color-green-600);
--border-danger: var(--color-red-500);
--border-inverse: var(--color-neutral-50);
/* --- interactive: primary (filled green) ------------------------------- */
--interactive-primary-bg: var(--color-green-600);
--interactive-primary-bg-hover: var(--color-green-700);
--interactive-primary-bg-active: var(--color-green-800);
--interactive-primary-bg-disabled: var(--color-green-400);
--interactive-primary-fg: var(--color-white);
--interactive-primary-fg-hover: var(--color-white);
--interactive-primary-fg-disabled: var(--color-white);
--interactive-primary-border: var(--color-transparent);
--interactive-primary-border-hover: var(--color-transparent);
--interactive-primary-border-disabled: var(--color-transparent);
/* --- interactive: secondary (outlined) --------------------------------- */
--interactive-secondary-bg: var(--color-white);
--interactive-secondary-bg-hover: var(--color-neutral-100);
--interactive-secondary-bg-active: var(--color-neutral-200);
--interactive-secondary-bg-disabled: var(--color-white);
--interactive-secondary-fg: var(--color-neutral-800);
--interactive-secondary-fg-hover: var(--color-neutral-800);
--interactive-secondary-fg-disabled: var(--color-neutral-400);
--interactive-secondary-border: var(--color-black);
--interactive-secondary-border-hover: var(--color-black);
--interactive-secondary-border-disabled: var(--color-neutral-200);
/* --- interactive: dark (near-black fill) -------------------------------- */
--interactive-dark-bg: var(--color-neutral-900);
--interactive-dark-bg-hover: var(--color-black);
--interactive-dark-bg-active: var(--color-black);
--interactive-dark-bg-disabled: var(--color-neutral-500);
--interactive-dark-fg: var(--color-white);
--interactive-dark-fg-hover: var(--color-white);
--interactive-dark-fg-disabled: var(--color-neutral-200);
--interactive-dark-border: var(--color-transparent);
--interactive-dark-border-hover: var(--color-transparent);
--interactive-dark-border-disabled: var(--color-transparent);
/* --- interactive: danger ------------------------------------------------ */
--interactive-danger-bg: var(--color-red-500);
--interactive-danger-bg-hover: var(--color-red-600);
--interactive-danger-bg-active: var(--color-red-700);
--interactive-danger-bg-disabled: var(--color-red-300);
--interactive-danger-fg: var(--color-white);
--interactive-danger-fg-hover: var(--color-white);
--interactive-danger-fg-disabled: var(--color-white);
--interactive-danger-border: var(--color-transparent);
--interactive-danger-border-hover: var(--color-transparent);
--interactive-danger-border-disabled: var(--color-transparent);
/* --- interactive: ghost (text-only) - see the a11y note above ---------- */
--interactive-ghost-bg: var(--color-transparent);
--interactive-ghost-bg-hover: var(--color-green-600);
--interactive-ghost-bg-active: var(--color-green-700);
--interactive-ghost-bg-disabled: var(--color-transparent);
--interactive-ghost-fg: var(--color-green-600);
--interactive-ghost-fg-hover: var(--color-white); /* (a11y) 4.52:1 on green-600; figma: green-700 = 1.40:1 */
--interactive-ghost-fg-disabled: var(--color-green-600);
--interactive-ghost-border: var(--color-transparent);
--interactive-ghost-border-hover: var(--color-transparent);
--interactive-ghost-border-disabled: var(--color-transparent);
/* --- form fields --------------------------------------------------------- */
--field-bg: var(--color-white);
--field-bg-disabled: var(--color-neutral-50);
--field-fg: var(--color-neutral-800);
--field-fg-disabled: var(--color-neutral-400);
--field-placeholder: var(--color-neutral-400);
--field-border: var(--color-neutral-200);
--field-border-hover: var(--color-neutral-500);
--field-border-focus: var(--color-green-600);
--field-border-error: var(--color-red-500);
/* --- focus ring ---------------------------------------------------------- */
--focus-ring-color: var(--color-green-600);
--focus-ring-color-inverse: var(--color-neutral-900);
/* --- overlay / scrim ------------------------------------------------------ */
--overlay-scrim: var(--color-black-a40);
--overlay-scrim-strong: var(--color-black-a56);
--overlay-veil: var(--color-black-a04);
/* The home hero's picture wash (figma 253:4800): a flat mint tint painted
over a flat shade. Both sit on a photograph rather than on the page, so
they carry the same value on either surface. */
--overlay-picture-shade: var(--color-black-a20);
--overlay-picture-tint: var(--color-green-200-a12);
}
/* ---------------------------------------------------------------------------
SURFACE-INDEPENDENT SEMANTICS
Sizes, shapes, motion and stacking do not change between surfaces, so they
are declared once. Values still alias tier 1 only.
------------------------------------------------------------------------ */
:root {
/* --- shape -------------------------------------------------------------
--radius-control / --radius-control-lg / --radius-card / --radius-surface
/ --radius-pill are declared in the @theme block near the bottom of this
file so that they also generate rounded-* utilities. They are tier-2
tokens like everything else here. */
/* --- control metrics (from the Figma Button frame) ---------------------- */
--control-border-width: var(--border-width-md); /* 1.5px outlined button */
--control-gap: var(--spacing-xs); /* 8px label <-> icon */
--control-icon-size: var(--spacing-lg); /* 24px icon box */
--control-padding-inline-sm: var(--spacing-md); /* 16 */
--control-padding-block-sm: var(--spacing-xs); /* 8 */
--control-padding-inline-md: var(--spacing-lg); /* 24 */
--control-padding-block-md: var(--spacing-sm); /* 12 */
--control-padding-inline-lg: var(--spacing-lg); /* 24 */
--control-padding-block-lg: var(--spacing-sm); /* 12 */
--control-opacity-disabled: var(--opacity-40); /* figma disabled state */
/* --- base document type -------------------------------------------------
The only type the base layer in app/app.css sets on <body>; everything
else is a type-role utility from typography.css. It lives here so that
app.css never has to reach past a role to --text-md / --leading-6.
Values match the `body-md` role (Body/Medium, 16/24). */
--type-body-base-size: var(--text-md);
--type-body-base-leading: var(--leading-6);
/* --- layout ------------------------------------------------------------- */
--layout-gutter: var(--spacing-lg);
--layout-gutter-lg: var(--spacing-xl);
--layout-section-gap: var(--spacing-3xl);
--layout-stack-gap: var(--spacing-md);
--layout-content-max: var(--container-content);
--layout-prose-max: var(--container-prose);
/* --- elevation ---------------------------------------------------------- */
--elevation-flat: var(--shadow-none);
--elevation-raised: var(--shadow-sm);
--elevation-card: var(--shadow-md);
--elevation-popover: var(--shadow-lg);
--elevation-modal: var(--shadow-xl);
/* --- focus ring geometry ------------------------------------------------- */
--focus-ring-width: var(--border-width-lg);
--focus-ring-offset: var(--border-width-lg);
/* --- motion --------------------------------------------------------------- */
--motion-duration-fast: var(--duration-fast);
--motion-duration-base: var(--duration-base);
--motion-duration-slow: var(--duration-slow);
--motion-ease-standard: var(--ease-standard);
--motion-ease-entrance: var(--ease-decelerate);
--motion-ease-exit: var(--ease-accelerate);
--motion-ease-emphasized: var(--ease-emphasized);
/* --- stacking layers ------------------------------------------------------- */
--layer-base: var(--z-0);
--layer-raised: var(--z-10);
--layer-sticky: var(--z-20);
--layer-header: var(--z-30);
--layer-dropdown: var(--z-40);
--layer-overlay: var(--z-50);
--layer-modal: var(--z-60);
--layer-toast: var(--z-70);
}
/* ---------------------------------------------------------------------------
TAILWIND BRIDGE
`@theme inline` exposes the semantic tokens as Tailwind utilities without
freezing their value, so `bg-surface-page` still re-resolves inside a
[data-surface] subtree. The utility name is always
<tailwind-prefix>-<token-name>: --surface-page -> bg-surface-page,
--text-primary -> text-text-primary, --border-subtle -> border-border-subtle.
Using bg-[var(--surface-page)] directly is equally valid.
------------------------------------------------------------------------ */
@theme inline {
--color-surface-page: var(--surface-page);
--color-surface-raised: var(--surface-raised);
--color-surface-sunken: var(--surface-sunken);
--color-surface-muted: var(--surface-muted);
--color-surface-accent: var(--surface-accent);
--color-surface-accent-subtle: var(--surface-accent-subtle);
--color-surface-danger: var(--surface-danger);
--color-surface-danger-subtle: var(--surface-danger-subtle);
--color-surface-inverse: var(--surface-inverse);
--color-text-primary: var(--text-primary);
--color-text-secondary: var(--text-secondary);
--color-text-tertiary: var(--text-tertiary);
--color-text-disabled: var(--text-disabled);
--color-text-accent: var(--text-accent);
--color-text-danger: var(--text-danger);
--color-text-on-accent: var(--text-on-accent);
--color-text-on-inverse: var(--text-on-inverse);
--color-text-inverse: var(--text-inverse);
--color-text-link: var(--text-link);
--color-text-link-hover: var(--text-link-hover);
--color-border-subtle: var(--border-subtle);
--color-border-default: var(--border-default);
--color-border-strong: var(--border-strong);
--color-border-accent: var(--border-accent);
--color-border-danger: var(--border-danger);
--color-border-inverse: var(--border-inverse);
--color-interactive-primary: var(--interactive-primary-bg);
--color-interactive-primary-hover: var(--interactive-primary-bg-hover);
--color-interactive-primary-active: var(--interactive-primary-bg-active);
--color-interactive-primary-disabled: var(--interactive-primary-bg-disabled);
--color-interactive-secondary: var(--interactive-secondary-bg);
--color-interactive-secondary-hover: var(--interactive-secondary-bg-hover);
--color-interactive-dark: var(--interactive-dark-bg);
--color-interactive-dark-hover: var(--interactive-dark-bg-hover);
--color-interactive-danger: var(--interactive-danger-bg);
--color-interactive-danger-hover: var(--interactive-danger-bg-hover);
--color-interactive-ghost-hover: var(--interactive-ghost-bg-hover);
--color-field-bg: var(--field-bg);
--color-field-border: var(--field-border);
--color-field-border-focus: var(--field-border-focus);
--color-field-border-error: var(--field-border-error);
--color-field-placeholder: var(--field-placeholder);
--color-focus-ring: var(--focus-ring-color);
--color-overlay-scrim: var(--overlay-scrim);
}
/* Shape semantics that also need to exist as Tailwind utilities
(rounded-control / rounded-card / rounded-surface). They alias tier 1
directly - never a tier-2 name, which would self-reference. */
@theme static {
--radius-control: var(--radius-sm);
--radius-control-lg: var(--radius-md);
--radius-card: var(--radius-md);
--radius-surface: var(--radius-lg);
--radius-pill: var(--radius-full);
}
/* ---------------------------------------------------------------------------
SURFACE VARIANTS - target a surface explicitly from a utility class,
e.g. `surface-light:underline`.
------------------------------------------------------------------------ */
@custom-variant surface-dark (&:where([data-surface="dark"], [data-surface="dark"] *));
@custom-variant surface-light (&:where([data-surface="light"], [data-surface="light"] *));
Reference in New Issue View Git Blame Copy Permalink