/* ============================================================================ PANTHER POOLS — DESIGN TOKENS ============================================================================ PART A is copied verbatim from the design-system skill package at /Users/nicole/AI Projects/Panther Pools/tokens/ (colors.css, typography.css, spacing.css, elevation.css, motion.css). >>> DO NOT HAND-EDIT PART A. <<< If a brand value changes, change it in the skill package and re-copy. Two files are deliberately NOT copied: - fonts.css Its stylesheet-level @import of Google Fonts is the slowest possible font load. It is a with preconnects in BaseLayout.astro instead. JetBrains Mono is dropped: it only serves the DS specimen cards, not visitors. - base.css Folded into styles.css §1, with .pp-container dropped in favour of the house .container. PART B is the bridge to house-convention variable names. It loads after Part A so it wins the cascade on the names that collide (--container-max, --section-y, --font-display). ============================================================================ */ /* ========================================================================== PART A.1 — COLORS (verbatim) ========================================================================== */ :root{ /* ── Brand base ─────────────────────────────────────────── */ --pp-red-700:#a30100; --pp-red-600:#c40100; --pp-red-500:#e20100; /* brand red — official */ --pp-red-300:#f58a89; --pp-red-100:#fde8e7; --pp-blue-700:#02618a; --pp-blue-600:#0375a5; --pp-blue-500:#0388c1; /* brand light blue — official */ --pp-blue-400:#3aa7d6; --pp-blue-300:#8fd0ea; --pp-blue-200:#c9e8f5; --pp-blue-100:#e8f5fb; /* Deep navy — the complementary dark blue that carries the premium tone */ --pp-navy-900:#04182a; --pp-navy-800:#062942; --pp-navy-700:#0a3a5c; --pp-navy-600:#0f4a72; --pp-navy-300:#7d99ae; /* ── Neutrals: cool, water-tinted greys ─────────────────── */ --pp-white:#ffffff; --pp-neutral-50:#f7fafc; --pp-neutral-100:#eef3f7; --pp-neutral-200:#dde6ed; --pp-neutral-300:#c3d1dc; --pp-neutral-400:#93a5b3; --pp-neutral-500:#66798a; --pp-neutral-600:#48596a; --pp-neutral-700:#2f3e4d; --pp-neutral-900:#16202b; /* ── Semantic ───────────────────────────────────────────── */ --pp-success-500:#0f8a5f; --pp-success-100:#e2f5ec; --pp-warning-500:#c97a05; --pp-warning-100:#fdf1de; --pp-danger-500:#c40100; --pp-danger-100:#fde8e7; /* ── Semantic aliases: text ─────────────────────────────── */ --text-strong:var(--pp-navy-900); --text-body:var(--pp-neutral-700); --text-muted:var(--pp-neutral-500); --text-inverse:var(--pp-white); --text-inverse-muted:#b9cdda; --text-accent:var(--pp-blue-600); --text-brand:var(--pp-red-500); --text-link:var(--pp-blue-600); --text-link-hover:var(--pp-navy-800); /* ── Semantic aliases: surfaces ─────────────────────────── */ --surface-page:var(--pp-white); --surface-subtle:var(--pp-neutral-50); --surface-tint:var(--pp-blue-100); --surface-card:var(--pp-white); --surface-deep:var(--pp-navy-800); --surface-deepest:var(--pp-navy-900); --surface-brand:var(--pp-red-500); --surface-accent:var(--pp-blue-500); /* ── Semantic aliases: lines ────────────────────────────── */ --border-subtle:var(--pp-neutral-200); --border-default:var(--pp-neutral-300); --border-strong:var(--pp-navy-700); --border-on-deep:rgba(255,255,255,.16); --focus-ring:rgba(3,136,193,.45); /* ── Gradients & washes ─────────────────────────────────── */ --gradient-deep:linear-gradient(160deg,var(--pp-navy-800) 0%,var(--pp-navy-900) 70%); --gradient-water:linear-gradient(180deg,var(--pp-blue-100) 0%,var(--pp-white) 100%); --gradient-protect:linear-gradient(180deg,rgba(4,24,42,0) 0%,rgba(4,24,42,.78) 100%); } /* ========================================================================== PART A.2 — TYPOGRAPHY (verbatim) All-sans, no serif face in any stack. As shipped by the DS both roles are Manrope; Part B below overrides --font-display to Varela Round for headings. ========================================================================== */ :root{ --font-display:"Manrope","Helvetica Neue",Arial,sans-serif; --font-core:"Manrope","Helvetica Neue",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace; /* Type scale — 1.25 ratio, tuned for 16px base */ --text-3xs:11px; --text-2xs:12px; --text-xs:13px; --text-sm:15px; --text-md:17px; --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px; --text-5xl:60px; --text-6xl:76px; --leading-tight:1.06; --leading-snug:1.2; --leading-normal:1.5; --leading-relaxed:1.65; --tracking-tight:-0.03em; --tracking-snug:-0.01em; --tracking-normal:0; --tracking-wide:0.06em; --tracking-eyebrow:0.16em; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800; /* Semantic roles */ --type-hero-family:var(--font-display); --type-hero-size:var(--text-5xl); --type-hero-weight:var(--weight-extrabold); --type-heading-family:var(--font-core); --type-heading-weight:var(--weight-bold); --type-eyebrow-size:var(--text-2xs); --type-eyebrow-tracking:var(--tracking-eyebrow); --type-body-size:var(--text-md); --type-body-leading:var(--leading-relaxed); } /* ========================================================================== PART A.3 — SPACING (verbatim) ========================================================================== */ :root{ /* 4px base grid */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px; --space-9:72px; --space-10:96px; --space-11:128px; --section-y:var(--space-10); --section-y-tight:var(--space-9); --gutter:var(--space-5); --container-max:1200px; --container-narrow:720px; --measure:66ch; /* Corner radii — soft, generous; never fully pill except on chips/badges */ --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --radius-pill:999px; --radius-card:var(--radius-lg); --radius-control:var(--radius-pill); } /* ========================================================================== PART A.4 — ELEVATION (verbatim) ========================================================================== */ :root{ /* Shadows are cool-tinted (navy, never black) and soft — premium, not chunky */ --shadow-xs:0 1px 2px rgba(4,24,42,.06); --shadow-sm:0 2px 6px rgba(4,24,42,.07); --shadow-md:0 8px 20px -6px rgba(4,24,42,.14); --shadow-lg:0 18px 44px -12px rgba(4,24,42,.20); --shadow-xl:0 36px 80px -24px rgba(4,24,42,.28); --shadow-inset-line:inset 0 1px 0 rgba(255,255,255,.6); --shadow-brand:0 10px 24px -8px rgba(226,1,0,.42); --shadow-accent:0 10px 24px -8px rgba(3,136,193,.40); --ring-focus:0 0 0 3px var(--focus-ring); --blur-glass:saturate(150%) blur(14px); } /* ========================================================================== PART A.5 — MOTION (verbatim) ========================================================================== */ :root{ --duration-fast:120ms; --duration-base:200ms; --duration-slow:360ms; --duration-reveal:640ms; --ease-standard:cubic-bezier(.2,.6,.2,1); --ease-out:cubic-bezier(.16,.84,.44,1); --ease-in-out:cubic-bezier(.5,0,.5,1); --transition-control:background-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); --press-scale:.985; } /* ========================================================================== PART B — HOUSE-CONVENTION BRIDGE -------------------------------------------------------------------------- Every value here resolves to a --pp-* token from Part A. Never redefine a --pp-* in this block; change brand values in the skill package instead. Three names deliberately override Part A, which is why this block loads last: --container-max 1200px (DS) -> 1350px (house standard, chosen) --section-y 96px (DS) -> 88px (house rhythm, chosen) --font-display Manrope (DS) -> Varela Round (chosen for headings only; --font-core/body copy stays Manrope) ========================================================================== */ :root{ /* Names the shared structural CSS expects */ --brand:var(--pp-navy-800); --brand-deep:var(--pp-navy-900); --accent:var(--pp-blue-600); /* eyebrows / section labels on light */ --accent-on-dark:var(--pp-blue-300); /* eyebrows on navy */ --action:var(--pp-red-500); /* THE one red: primary CTA only */ --action-hover:var(--pp-red-600); --surface-muted:var(--surface-subtle); /* Container — house 1350 overrides the DS 1200 */ --container-max:1350px; --container-pad-desktop:32px; --container-pad-mobile:20px; /* Section rhythm — house 88/64/48. Responsive on the token so .section itself never needs a media query. */ --section-y:88px; --section-y-tight:64px; /* Sticky header height, used by the hero to pad its content clear of the overlay bar and by scroll-margin on anchor targets. Roomier than the DS's 84px so the enlarged nav and the overlapping logo badge have space to breathe; the logo itself is taller still and deliberately hangs past this edge (see .nav-logo in the HEADER section). */ --header-h:108px; /* Headings only. Applies to h1-h4 via the shared rule in styles.css §1, so every heading-level element picks it up automatically; body copy and labels (eyebrows, badges, buttons) stay on --font-core (Manrope). Varela Round ships one weight (400) on Google Fonts. h1 asks for 800 and h2-h4 ask for 700 (see --weight-extrabold/--weight-bold); with no 700/800 file to use, browsers synthesize (faux-)bold from the 400 weight. Varela Round's rounded terminals already read fairly bold at regular weight, which should soften the effect, but verify visually before launch. */ --font-display:"Varela Round","Helvetica Neue",Arial,sans-serif; /* Scroll reveal */ --reveal-delay:0ms; --reveal-duration:var(--duration-reveal); --reveal-ease:var(--ease-out); } @media (max-width:1024px){ :root{ --section-y:64px; --section-y-tight:48px; --header-h:72px; } } @media (max-width:640px){ :root{ --section-y:48px; --section-y-tight:40px; } }