/** * PDG Design System * Foundation: Visual System and Core Infrastructure * Requirements: 1.1–1.10 */ /* ───────────────────────────────────────────── Google Fonts: Playfair Display + Inter Loaded via in each page with: rel="preconnect" + rel="preload" as="style" + display=swap for font-display: swap No @import here to avoid render-blocking. ───────────────────────────────────────────── */ /* ───────────────────────────────────────────── Design Tokens: CSS Custom Properties ───────────────────────────────────────────── */ :root { /* ── Color Palette ── */ --color-bg: #F9F8F6; /* warm alabaster — primary background */ --color-fg: #1A1A1A; /* charcoal — primary foreground */ --color-accent: #D4AF37; /* metallic gold — single accent */ /* Derived tones */ --color-fg-muted: #6B6B6B; /* secondary text */ --color-border: #E2E0DC; /* subtle dividers */ --color-surface: #F2F0ED; /* card/section surface */ /* Semantic aliases */ --color-text-primary: var(--color-fg); --color-text-secondary: var(--color-fg-muted); --color-background: var(--color-bg); /* ── Typography ── */ --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Fluid type scale using clamp() */ --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.825rem + 0.2vw, 0.9375rem); --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem); --text-2xl: clamp(2rem, 1.5rem + 2vw, 3.5rem); --text-3xl: clamp(2.75rem, 2rem + 3vw, 5rem); /* Line heights */ --leading-tight: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.8; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; /* ── Spacing Grid (8px base unit) ── */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-6: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-12: 6rem; /* 96px */ --space-16: 8rem; /* 128px */ --space-20: 10rem; /* 160px */ --space-24: 12rem; /* 192px */ /* ── Container widths ── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* ── Border radius: strictly 0 — editorial ── */ --radius: 0px; /* ── Shadows: minimal, editorial ── */ --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.06); --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.08); /* ── Motion ── */ --ease-cinematic: cubic-bezier(0.25, 0.1, 0.25, 1.0); --ease-functional: ease-out; --duration-narrative: 0.8s; --duration-functional: 0.2s; --duration-fast: 0.15s; } /* ───────────────────────────────────────────── Font Rendering Optimizations ───────────────────────────────────────────── */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-size: 100%; scroll-behavior: smooth; } /* ───────────────────────────────────────────── Base Reset / Normalize ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: var(--leading-normal); min-height: 100vh; } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; border-radius: var(--radius); border: none; background: none; cursor: pointer; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-fg); } p { line-height: var(--leading-normal); } hr { border: none; border-top: 1px solid var(--color-border); } /* ───────────────────────────────────────────── Responsive Breakpoint System (320px – 2560px) ───────────────────────────────────────────── */ /* --bp-xs: 320px --bp-sm: 640px --bp-md: 768px --bp-lg: 1024px --bp-xl: 1280px --bp-2xl: 1536px --bp-3xl: 1920px --bp-4xl: 2560px */ /* ───────────────────────────────────────────── Container Utility Classes ───────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-4); } .container-sm { max-width: var(--container-sm); margin-inline: auto; padding-inline: var(--space-4); } .container-md { max-width: var(--container-md); margin-inline: auto; padding-inline: var(--space-4); } .container-lg { max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-4); } .container-xl { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-4); } .container-2xl { max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--space-4); } .container-full { width: 100%; padding-inline: var(--space-4); } @media (min-width: 640px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-2xl { padding-inline: var(--space-6); } } @media (min-width: 1024px) { .container, .container-lg, .container-xl, .container-2xl { padding-inline: var(--space-8); } } /* ───────────────────────────────────────────── Typography Utility Classes ───────────────────────────────────────────── */ /* Headings — Playfair Display */ .heading-1, .h1 { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .heading-2, .h2 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .heading-3, .h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); } .heading-4, .h4 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); } /* Body — Inter */ .body-xl { font-family: var(--font-body); font-size: var(--text-xl); line-height: var(--leading-relaxed); } .body-lg { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-relaxed); } .body-base { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); } .body-sm { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); } .body-xs { font-family: var(--font-body); font-size: var(--text-xs); line-height: var(--leading-normal); } /* Kicker / label — uppercase Inter */ .kicker { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-fg-muted); } /* Text color utilities */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-accent { color: var(--color-accent); } .text-muted { color: var(--color-fg-muted); } /* ───────────────────────────────────────────── Button Styles ───────────────────────────────────────────── */ /* Base button reset */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius); cursor: pointer; position: relative; overflow: hidden; transition: color var(--duration-functional) var(--ease-functional), border-color var(--duration-functional) var(--ease-functional); } /* Primary: dark background, gold hover slide */ .btn-primary { background-color: var(--color-fg); color: var(--color-bg); border: 1px solid var(--color-fg); } .btn-primary::after { content: ''; position: absolute; inset: 0; background-color: var(--color-accent); transform: translateX(-101%); transition: transform var(--duration-functional) var(--ease-functional); z-index: 0; } .btn-primary span { position: relative; z-index: 1; } .btn-primary:hover::after { transform: translateX(0); } .btn-primary:hover { color: var(--color-fg); } /* Secondary: border only */ .btn-secondary { background-color: transparent; color: var(--color-fg); border: 1px solid var(--color-fg); } .btn-secondary:hover { background-color: var(--color-fg); color: var(--color-bg); } /* Ghost: minimal */ .btn-ghost { background-color: transparent; color: var(--color-fg); border: 1px solid var(--color-border); } .btn-ghost:hover { border-color: var(--color-fg); } /* ───────────────────────────────────────────── Card Styles ───────────────────────────────────────────── */ /* Base card: border-top pattern, no rounded corners */ .pdg-card { background-color: var(--color-surface); border-top: 2px solid var(--color-border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--duration-functional) var(--ease-functional); } .pdg-card:hover { border-top-color: var(--color-accent); } .pdg-card__image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .pdg-card__body { padding: var(--space-4); } .pdg-card__kicker { composes: kicker; margin-bottom: var(--space-2); } .pdg-card__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); margin-bottom: var(--space-2); } .pdg-card__excerpt { font-size: var(--text-sm); color: var(--color-fg-muted); line-height: var(--leading-normal); } /* ───────────────────────────────────────────── Image Hover Reveal: Grayscale → Color Requirement 1.9 ───────────────────────────────────────────── */ .pdg-image { filter: grayscale(100%); transition: filter var(--duration-narrative) var(--ease-cinematic); width: 100%; height: 100%; object-fit: cover; } [data-color-dwell].is-colorized .pdg-image, [data-color-dwell].is-colorized .home-hero__bg, [data-color-dwell]:focus-within .pdg-image, [data-color-dwell]:focus-within .home-hero__bg { filter: grayscale(0%); } @media (hover: hover) and (pointer: fine) { [data-color-dwell]:hover .pdg-image, [data-color-dwell]:hover .home-hero__bg { filter: grayscale(0%); } } /* ───────────────────────────────────────────── Narrative Motion CSS [data-narrative] pattern — opacity + transform only Requirement 1.10, 6.4 ───────────────────────────────────────────── */ [data-narrative] { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-narrative) var(--ease-cinematic), transform var(--duration-narrative) var(--ease-cinematic); } [data-narrative].is-visible { opacity: 1; transform: translateY(0); } [data-focus-text] { transform-origin: left center; transition: transform var(--duration-narrative) var(--ease-cinematic), opacity 0.22s var(--ease-functional), color 0.22s var(--ease-functional); will-change: transform, opacity, color; } [data-focus-text].is-muted { opacity: 0.56; } [data-focus-accent] { display: inline-block; transition: color 0.22s var(--ease-functional); } [data-focus-accent].is-accented { color: var(--color-accent); } /* Stagger delays for sibling narrative elements */ [data-narrative]:nth-child(2) { transition-delay: 0.1s; } [data-narrative]:nth-child(3) { transition-delay: 0.2s; } [data-narrative]:nth-child(4) { transition-delay: 0.3s; } /* ───────────────────────────────────────────── Functional Motion CSS Filter chips, progress bar Requirement 7.1, 7.5 ───────────────────────────────────────────── */ /* Filter chips */ .filter-chip { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; transition: background-color var(--duration-functional) var(--ease-functional), color var(--duration-functional) var(--ease-functional), border-color var(--duration-functional) var(--ease-functional), transform var(--duration-fast) var(--ease-functional); } .filter-chip.is-active { background-color: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); } .filter-chip:hover:not(.is-active) { border-color: var(--color-fg); transform: translateY(-1px); } /* Section progress bar */ [data-progress-bar] { position: fixed; top: 0; left: 0; right: 0; height: 2px; background-color: var(--color-accent); transform-origin: left center; transform: scaleX(0); transition: transform 0.1s linear; z-index: 1000; pointer-events: none; } /* ───────────────────────────────────────────── Vertical Gridlines 4 fixed lines at column boundaries ───────────────────────────────────────────── */ .pdg-gridlines { position: fixed; inset: 0; pointer-events: none; z-index: 9999; display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-8); } .pdg-gridlines__line { border-left: 1px solid rgba(212, 175, 55, 0.08); height: 100%; } .pdg-gridlines__line:last-child { border-right: 1px solid rgba(212, 175, 55, 0.08); } /* ───────────────────────────────────────────── Prefers-Reduced-Motion Disable all non-essential animations Requirement 1.10 ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-narrative] { opacity: 1; transform: none; transition: none; } .pdg-image { filter: none; transition: none; } [data-color-dwell].is-colorized .pdg-image, [data-color-dwell].is-colorized .home-hero__bg, [data-color-dwell]:focus-within .pdg-image, [data-color-dwell]:focus-within .home-hero__bg { filter: none; } .filter-chip { transition: none; transform: none; } .btn-primary::after { transition: none; } [data-progress-bar] { transition: none; } [data-focus-text] { opacity: 1; transform: none; transition: none; will-change: auto; } [data-focus-accent] { transition: none; } } /* ───────────────────────────────────────────── Responsive Breakpoints 320px → 2560px ───────────────────────────────────────────── */ /* xs: 320px+ (base styles above) */ /* sm: 640px+ */ @media (min-width: 640px) { .container { padding-inline: var(--space-6); } } /* md: 768px+ */ @media (min-width: 768px) { .container { padding-inline: var(--space-6); } } /* lg: 1024px+ */ @media (min-width: 1024px) { .container { padding-inline: var(--space-8); } } /* xl: 1280px+ */ @media (min-width: 1280px) { .container { padding-inline: var(--space-8); } } /* 2xl: 1536px+ */ @media (min-width: 1536px) { .container { padding-inline: var(--space-12); } } /* 3xl: 1920px+ */ @media (min-width: 1920px) { .container { padding-inline: var(--space-16); } } /* 4xl: 2560px+ */ @media (min-width: 2560px) { .container { max-width: 2200px; } } /* ───────────────────────────────────────────── Utility: Visually Hidden (accessibility) ───────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ───────────────────────────────────────────── Utility: Divider ───────────────────────────────────────────── */ .divider { width: 100%; height: 1px; background-color: var(--color-border); margin-block: var(--space-6); } .divider-accent { width: 3rem; height: 2px; background-color: var(--color-accent); margin-block: var(--space-4); } /* ───────────────────────────────────────────── Accessibility: Skip Link Requirements: 17.2, 17.4 ───────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: 9999; padding: var(--space-2) var(--space-4); background: var(--color-fg); color: var(--color-bg); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); text-decoration: none; border-radius: var(--radius); transition: top 0.2s ease-out; } .skip-link:focus { top: var(--space-4); outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ───────────────────────────────────────────── Accessibility: Focus Indicators Requirements: 17.2, 17.4 ───────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Remove default outline only when focus-visible is supported */ :focus:not(:focus-visible) { outline: none; } /* Buttons and interactive elements */ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ───────────────────────────────────────────── Accessibility: Loading state Requirements: 9.3, 9.4 ───────────────────────────────────────────── */ .is-loading { opacity: 0.5; pointer-events: none; } /* ───────────────────────────────────────────── Accessibility: Reduced motion (global) ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }