/* ========================================================================== PROJECT.CSS — Meticulous Design Loads AFTER core.css. Layer 1 values + the few Layer 2 aliases that depend on them. Nothing here changes core.css's architecture — only its numbers, which is the per-project pass core.css step 5 describes. Enqueue after the core handle: wp_enqueue_style( 'project-system', get_stylesheet_directory_uri() . '/assets/css/project.css', [ 'core-system' ], filemtime( get_stylesheet_directory() . '/assets/css/project.css' ) ); WHAT CHANGED AND WHY Every value below answers something core.css's generic defaults could not express. The reference layout ran a ~7x display-to-body ratio, a 180px section beat and a 1360px container; core.css topped out at 55px type, 96px sections and 1200px. Structure was never the gap — magnitude was. Display ramp NEW. core.css stopped at 55px. Three display steps now reach 120px, on a steeper slope than the 1.25 text ratio. Section beat 96px -> 180px. The single biggest contributor to the feel. Container 1200px -> 1360px. Mirror this in Site Settings > Layout. Tracking Display gets its own -0.04em; body headings stay -0.02em, because -0.04em on a 20px h5 is over-tight and illegible. Leading Display sets solid at 1.0; core.css's 1.15 stays for h3-h6. Neutrals Cool -> warm. Paper, not screen. Brand Blue placeholder -> terracotta. Elementor's own guidance flags generic blue; this is a committed dominant color. Surface Pure white -> warm off-white, so white cards read as raised. ========================================================================== */ /* ========================================================================== LAYER 1 — PROJECT PRIMITIVES ========================================================================== */ :root { /* --- Neutral ramp — warm. Paper stock, not interface gray. ----------- */ --ds-neutral-0: #ffffff; --ds-neutral-50: #faf8f5; --ds-neutral-100: #f4f1ec; --ds-neutral-200: #e8e3db; --ds-neutral-300: #d6cfc3; --ds-neutral-400: #b0a89a; --ds-neutral-500: #8a8173; --ds-neutral-600: #6b6357; --ds-neutral-700: #514a41; --ds-neutral-800: #38332d; --ds-neutral-900: #23201c; --ds-neutral-950: #14120f; /* --- Brand ramp — terracotta. One dominant color, used with intent. -- #b44426 on white = 5.5:1, so it is safe for link text, not only large type. Swap the whole ramp to rebrand; nothing below names a hex. */ --ds-brand-50: #fdf3ef; --ds-brand-100: #fae2d9; --ds-brand-200: #f4c3b2; --ds-brand-300: #ec9d83; --ds-brand-400: #e07555; --ds-brand-500: #d15632; --ds-brand-600: #b44426; /* default brand stop */ --ds-brand-700: #93351d; --ds-brand-800: #772c1a; --ds-brand-900: #622718; --ds-brand-950: #35110a; /* --- Shadow tint — warm, to match the neutrals ----------------------- */ --ds-shadow-hue: 24 14% 12%; /* --- Display type ramp — NEW ----------------------------------------- Separate from the text steps on purpose. The text ramp (1.25) is right for body and UI; display needs a steeper climb to earn the hierarchy. Each clamp is solved to hit its max at exactly 1440px, so the scale keeps growing across the whole desktop range instead of topping out early at ~900px. */ --ds-display-1: clamp(1.75rem, 1.398rem + 1.502vw, 2.75rem); /* 28 -> 44 */ --ds-display-2: clamp(2.125rem, 1.465rem + 2.817vw, 4rem); /* 34 -> 64 */ --ds-display-3: clamp(2.5rem, 1.444rem + 4.507vw, 5.5rem); /* 40 -> 88 */ /* --- Display metrics ------------------------------------------------- */ --ds-leading-display: 1.05; /* Gambarino is a serif with descenders; solid 1.0 collides */ --ds-tracking-display: -0.04em; /* display only — see note above */ /* --- Fonts ----------------------------------------------------------- DECISION POINT. The display face is the single largest lever on how this reads, and it is the one thing that should not be inherited from a reference. Any geometric or neo-grotesque with a real 600 weight works structurally. Confirm the license before shipping to a client. The fallback stack renders correctly on its own if you do nothing. */ --ds-font-sans: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ds-font-display: "Gambarino", Georgia, "Times New Roman", serif; --ds-weight-display: 400; /* Gambarino has only 400 -- higher values synthesize faux bold */ } /* ========================================================================== LAYER 2 — SEMANTIC ALIASES THAT DEPEND ON THE ABOVE ========================================================================== */ :root { /* Off-white page so a white card reads as raised without a heavy shadow */ --color-surface: var(--ds-neutral-50); --color-surface-sunken: var(--ds-neutral-100); --color-surface-raised: var(--ds-neutral-0); /* Display type — the authoring vocabulary for hero and section heads */ --text-display-sm: var(--ds-display-1); --text-display: var(--ds-display-2); --text-display-lg: var(--ds-display-3); --font-display: var(--ds-font-display); /* Section rhythm — 64 -> 180px. Solved to max at 1440 like the type. */ --space-section: clamp(4rem, 1.929rem + 10.36vw, 11.25rem); --space-section-tight: clamp(3rem, 1.714rem + 6.43vw, 7.5rem); /* 1360px. Keep numerically in sync with Site Settings > Layout. */ --layout-max: 85rem; } /* ========================================================================== DISPLAY TYPE Unlayered, so it beats core.css's :where(h1) reset — which is zero specificity by design and meant to be overridden exactly like this. ========================================================================== */ .u-display-lg { font-family: var(--font-display); font-size: var(--text-display-lg); line-height: var(--ds-leading-display); letter-spacing: var(--ds-tracking-display); font-weight: var(--ds-weight-display); text-wrap: balance; } .u-display { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--ds-leading-display); letter-spacing: var(--ds-tracking-display); font-weight: var(--ds-weight-display); text-wrap: balance; } .u-display-sm { font-family: var(--font-display); font-size: var(--text-display-sm); line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-display); font-weight: var(--ds-weight-display); } /* SCOPED v1.1a: display styling is class-only (.u-display*), never bare h1/h2, so loading this sheet site-wide restyles no existing heading. Add a u-display* class where you want the display treatment. h3 down keep core.css's text ramp and its gentler -0.02em. Card titles sit around 32px with normal tracking — tight tracking at that size reads as a mistake rather than a choice. */ /* ========================================================================== SECTION HELPERS The rhythm is the layout. These two classes carry most of it. ========================================================================== */ /* Standard vertical beat. Type into a Container's CSS Classes field. */ .u-section { padding-block: var(--space-section); } .u-section-tight { padding-block: var(--space-section-tight); } /* An inverted section runs tighter than the light ones around it — the contrast is already doing the work, so it needs less air to read as a break in the rhythm. Pair with core.css's `theme-dark`. */ .theme-dark.u-section { padding-block: var(--space-section-tight); } /* Full-width rule used to separate stacked list rows (services, FAQ). */ .u-row-divided > * + * { border-block-start: 1px solid var(--color-divider); } /* ========================================================================== ELEMENTOR BRIDGE — display face core.css points the four typography globals at --font-heading. The display slot is separate, so headings styled through Elementor's Primary global pick up the display face rather than the body stack. ========================================================================== */ :root { --e-global-typography-primary-font-family: var(--font-display); }