/* =========================================================================== PRESTIGE COMMUNICATIONS — DESIGN TOKENS --------------------------------------------------------------------------- This is the tweak surface. Almost every visual decision on the site resolves to a variable declared here, so brand adjustments happen in this one file rather than being hunted through component CSS. Source of truth: "Prestige Communications — Logo Presentation by Savage Design" (April 2026). Prestige Gold #BF9B5C the signature — warm, refined, confident Deep Black #000000 contrast, gravity, presence Soft Cream #F5F0E8 space, light, breath Display type Orpheus Pro (see the note under TYPOGRAPHY) Body type Poppins Contrast: every text/background pair below is annotated with its measured ratio. WCAG 2.2 AA needs 4.5:1 for body text and 3:1 for large text and UI borders. Do not lower a value past its noted floor without re-checking. ========================================================================= */ :root { /* ----------------------------------------------------------------------- 1. BRAND COLOUR -------------------------------------------------------------------- */ --pc-gold: #bf9b5c; /* signature gold — 8.08:1 on black */ --pc-gold-light: #e9cfa2; /* highlight stop from the logo gradient */ --pc-gold-mid: #dab783; --pc-gold-warm: #b38c54; --pc-gold-dark: #9d7541; --pc-gold-shadow: #63411b; /* deepest stop from the logo gradient */ /* Gold is unreadable as text on cream (2.3:1). This darkened tone is the only gold permitted for text on light surfaces — 5.26:1 on cream. */ --pc-gold-ink: #7e5f28; --pc-black: #000000; --pc-cream: #f5f0e8; /* The exact gradient from logo.svg, reused for rules, the monogram and any surface that should read as brushed metal rather than flat colour. */ --pc-gradient-gold: linear-gradient( 135deg, #9d7541 0%, #b38c54 18%, #dab783 39%, #b58e55 55%, #e9cfa2 72%, #b68d54 87%, #63411b 100% ); /* ----------------------------------------------------------------------- 2. SURFACES (the site is black-first; cream is the inverted mode) -------------------------------------------------------------------- */ --pc-surface: #000000; /* page ground */ --pc-surface-raised: #0a0a0a;/* cards, panels lifted off the page */ --pc-surface-sunken: #060606; --pc-surface-inverse: #f5f0e8; /* ----------------------------------------------------------------------- 3. TEXT (ratios measured against --pc-surface #000) -------------------------------------------------------------------- */ --pc-text: #f5f0e8; /* 19.6:1 — body and headings */ --pc-text-muted: #a8a29a; /* 8.2:1 — secondary copy, captions */ --pc-text-dim: #8a857c; /* 5.7:1 — labels, meta, folio numbers */ --pc-text-inverse: #0a0a0a; /* 18.8:1 on cream — text on light sections */ --pc-text-inverse-muted: #4a4741; /* 8.6:1 on cream */ /* ----------------------------------------------------------------------- 4. LINES & EDGES Hairlines carry the editorial feel. Anything a user must perceive as a control boundary sits at --pc-line-strong or above (3:1 minimum). -------------------------------------------------------------------- */ --pc-line: rgba(191, 155, 92, 0.20); --pc-line-soft: rgba(245, 240, 232, 0.12); --pc-line-strong: rgba(191, 155, 92, 0.55); --pc-line-inverse: rgba(10, 10, 10, 0.18); /* ----------------------------------------------------------------------- 5. TYPOGRAPHY "Prestige Display" and "Prestige Sans" are family tokens defined in fonts.css, not literal font names. Today they resolve to: Prestige Display -> Noto Serif Display (Greek + Latin, variable) Prestige Sans -> Poppins (Latin) + Manrope (Greek) Poppins ships no Greek subset, so the Greek ranges fall to Manrope automatically via unicode-range. Greek is the site's primary language, so any replacement face MUST cover U+0370–U+03FF. TO INSTALL LICENSED ORPHEUS PRO: add its @font-face declarations to fonts.css under the family name "Prestige Display" and delete the Noto Serif Display blocks. Nothing else in the codebase changes. -------------------------------------------------------------------- */ --pc-font-display: 'Prestige Display', 'Noto Serif Display', 'Didot', 'Times New Roman', serif; --pc-font-body: 'Prestige Sans', 'Poppins', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Fluid scale. Each step interpolates between a phone and a 1680px desktop, so there are no breakpoint jumps in the type. */ --pc-t-hero: clamp(2.6rem, 6.6vw, 6.25rem); --pc-t-d1: clamp(2.1rem, 4.6vw, 4rem); --pc-t-d2: clamp(1.7rem, 3.1vw, 2.75rem); --pc-t-d3: clamp(1.45rem, 2.6vw, 2.25rem); --pc-t-d4: clamp(1.2rem, 1.8vw, 1.55rem); --pc-t-lead: clamp(1.06rem, 1.45vw, 1.32rem); --pc-t-body: clamp(0.975rem, 0.55vw + 0.85rem, 1.06rem); --pc-t-small: 0.875rem; --pc-t-label: 0.72rem; --pc-lh-tight: 0.94; /* display headlines */ --pc-lh-snug: 1.12; --pc-lh-normal: 1.5; --pc-lh-relaxed: 1.72; /* long-form body copy */ --pc-ls-display: -0.02em; --pc-ls-normal: 0; --pc-ls-wide: 0.08em; --pc-ls-label: 0.3em; /* matches the COMMUNICATIONS lockup in the logo */ --pc-weight-light: 200; --pc-weight-regular: 300; --pc-weight-medium: 400; --pc-weight-semi: 500; /* Comfortable reading measure — long copy never exceeds this. */ --pc-measure: 64ch; --pc-measure-tight: 46ch; /* ----------------------------------------------------------------------- 6. SPACE -------------------------------------------------------------------- */ --pc-s-1: 0.25rem; --pc-s-2: 0.5rem; --pc-s-3: 0.75rem; --pc-s-4: 1rem; --pc-s-5: 1.5rem; --pc-s-6: 2rem; --pc-s-7: 2.5rem; --pc-s-8: 3rem; --pc-s-9: 4rem; --pc-s-10: 5rem; --pc-s-11: 6.5rem; --pc-s-12: 8rem; --pc-s-13: 10rem; /* Vertical rhythm between full sections — generous by design. */ --pc-section-y: clamp(5.5rem, 11vw, 12rem); --pc-section-y-tight: clamp(3.5rem, 7vw, 7rem); /* ----------------------------------------------------------------------- 7. LAYOUT -------------------------------------------------------------------- */ --pc-page-x: clamp(1.25rem, 4.5vw, 5rem); --pc-max-width: 1680px; --pc-max-text: 1180px; --pc-grid-columns: 12; --pc-grid-gap: clamp(1rem, 2vw, 2rem); /* The fixed header is two stacked rows: the utility top bar and the logo/nav row. --pc-header-h is their sum, and every `calc(var(--pc-header-h) …)` page offset on the site is written against it — so the top bar appearing at 760px reflows those offsets on its own, with no second set of media queries to keep in step. The bar is 0-height below that breakpoint. */ --pc-topbar-h: 0rem; --pc-header-row-h: 5.25rem; --pc-header-h: calc(var(--pc-header-row-h) + var(--pc-topbar-h)); /* ----------------------------------------------------------------------- 8. SHAPE Zero radius throughout — the brand is sharp-cornered and editorial. Change this single value to soften the whole site. -------------------------------------------------------------------- */ --pc-radius: 0px; --pc-hairline: 1px; /* ----------------------------------------------------------------------- 9. MOTION Slow and cinematic. Durations are long on purpose; the brand reads as unhurried. Every one is disabled under prefers-reduced-motion. -------------------------------------------------------------------- */ --pc-ease: cubic-bezier(0.22, 1, 0.36, 1); /* decelerate, filmic */ --pc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --pc-ease-out-slow: cubic-bezier(0.16, 1, 0.3, 1); --pc-dur-fast: 0.32s; --pc-dur-base: 0.6s; --pc-dur-slow: 1s; --pc-dur-slower: 1.6s; --pc-dur-cinematic: 2.2s; /* ----------------------------------------------------------------------- 10. DEPTH & ATMOSPHERE -------------------------------------------------------------------- */ --pc-shadow-soft: 0 24px 80px -24px rgba(0, 0, 0, 0.9); --pc-glow-gold: 0 0 60px -12px rgba(191, 155, 92, 0.35); --pc-grain-opacity: 0.035; --pc-scrim: linear-gradient( to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 40%, rgba(0, 0, 0, 0.75) 100% ); /* ----------------------------------------------------------------------- 11. LAYERS -------------------------------------------------------------------- */ --pc-z-base: 0; --pc-z-raised: 10; --pc-z-sticky: 100; --pc-z-menu: 300; /* The header sits ABOVE the overlay menu on purpose: the menu toggle is also the close button, so burying it under the overlay would leave a visitor with no visible way out. */ --pc-z-header: 350; /* The lightbox DOES cover the header — unlike the overlay menu it carries its own close button, plus Escape and a click on the backdrop, so there is no risk of stranding a visitor. A header floating over a full-screen photograph reads as a rendering fault. */ --pc-z-lightbox: 380; --pc-z-cursor: 400; --pc-z-banner: 500; --pc-z-transition: 600; /* The preloader covers the whole site including the transition veil, because it is what the visitor sees before anything else exists. It holds nothing focusable and retires itself, so nothing can strand a visitor underneath it. */ --pc-z-preloader: 700; /* Focus ring — must stay visible against both black and cream. */ --pc-focus: var(--pc-gold-light); --pc-focus-width: 2px; --pc-focus-offset: 3px; } /* --------------------------------------------------------------------------- INVERTED SECTIONS Add class="pc-invert" to any section to flip it to the cream palette. Text colours, lines and the gold accent all remap, so nested components need no special handling. ------------------------------------------------------------------------ */ .pc-invert { --pc-surface: #f5f0e8; --pc-surface-raised: #ffffff; --pc-surface-sunken: #ece5d9; --pc-text: #0a0a0a; --pc-text-muted: #4a4741; --pc-text-dim: #6b675f; --pc-line: rgba(10, 10, 10, 0.16); --pc-line-soft: rgba(10, 10, 10, 0.1); --pc-line-strong: rgba(126, 95, 40, 0.6); --pc-gold: var(--pc-gold-ink); --pc-focus: #7e5f28; --pc-scrim: linear-gradient( to bottom, rgba(245, 240, 232, 0.9) 0%, rgba(245, 240, 232, 0.5) 50%, rgba(245, 240, 232, 0.9) 100% ); background-color: var(--pc-surface); color: var(--pc-text); } /* --------------------------------------------------------------------------- HIGH CONTRAST / FORCED COLOURS Windows High Contrast mode replaces our palette entirely; make sure the decorative layers do not swallow content. ------------------------------------------------------------------------ */ @media (forced-colors: active) { :root { --pc-line: CanvasText; --pc-line-strong: CanvasText; --pc-grain-opacity: 0; } } /* --------------------------------------------------------------------------- UTILITY TOP BAR The bar carries the email, phone and social links. The client asked for it to disappear on phones, where the address bar is scarce and the same details sit in the overlay menu and the footer one tap away. Collapsing it to zero height here rather than in the component rules is what keeps every `calc(var(--pc-header-h) …)` offset across the site correct at both sizes without duplicating a single media query. ------------------------------------------------------------------------ */ @media (min-width: 760px) { :root { --pc-topbar-h: 2.5rem; } }