/* ═══════════════════════════════════════════════════ Global CSS — Reset, Variables, Typography, Base ═══════════════════════════════════════════════════ */ /* ── CSS Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { background: none; border: none; cursor: pointer; } /* ── CSS Custom Properties ── */ :root { /* Colors */ --color-primary: #CE4405; --color-primary-hover: #b83a04; --color-secondary: #282828; --color-base: #FFFFFF; --color-cream: #f5f4f2; --color-white: #FFFFFF; --color-dark: #111111; --color-dark-card: #1a1a1a; --color-dark-surface: #161616; --color-text-primary: #FFFFFF; --color-text-body: rgba(255, 255, 255, 0.8); --color-text-muted: rgba(255, 255, 255, 0.5); --color-text-dim: rgba(255, 255, 255, 0.3); --color-text-dark: #1a1a1a; --color-text-dark-muted: #3a3a3a; /* Typography */ --font-sans: 'Plus Jakarta Sans', sans-serif; /* Font sizes */ --text-display: clamp(2rem, 7vw, 4.8125rem); --text-subheading: clamp(1.4rem, 4vw, 3.5625rem); --text-body: clamp(1rem, 1.8vw, 1.258625rem); --text-small: 0.875rem; --text-label: 0.8125rem; --text-hero-title: clamp(2.8rem, 6.5vw, 6rem); --text-hero-subtitle: clamp(2rem, 5.6vw, 61px); --text-hero-body: clamp(1rem, 2vw, 20.138px); --text-cta-heading: clamp(2.4rem, 6vw, 77px); --text-testimonial: clamp(1.25rem, 2.8vw, 2.4rem); --text-quote-mark: clamp(4rem, 12vw, 10rem); --text-nav-link: 17px; /* Spacing */ --space-section-y: clamp(6rem, 10vw, 8rem); --space-section-x: clamp(1.5rem, 4vw, 2rem); /* Layout */ --max-width: 1400px; --border-radius: 5px; /* Transitions */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 200ms; --duration-normal: 300ms; --duration-slow: 500ms; } /* ── Base Styles ── */ /* Clip on body only — NOT html. A non-visible overflow on the root element clips fixed-position descendants, which hides the WP admin bar. */ body { overflow-x: clip; } body { font-family: var(--font-sans); background-color: var(--color-base); color: var(--color-text-primary); } /* ── Typography Classes ── */ .text-display { font-size: var(--text-display); font-weight: 700; line-height: 0.92; letter-spacing: -0.06em; text-transform: capitalize; color: var(--color-white); } .text-subheading { font-size: var(--text-subheading); font-weight: 500; line-height: 1.04; color: var(--color-primary); } .text-body { font-size: var(--text-body); line-height: 1.6; color: var(--color-text-body); } .text-label { font-size: var(--text-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.24em; color: #fff; } .text-small { font-size: var(--text-small); line-height: 1.5; color: rgba(255, 255, 255, 0.65); } /* ── Keyframe Animations ── */ @keyframes marquee { from { transform: translateX(0%); } to { transform: translateX(-25%); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes stationery-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes stationery-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes page-transition-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .animate-marquee { animation: marquee 20s linear infinite; } /* ── Utility Classes ── */ .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; } /* ── Page Transition ── */ .page-transition-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: #000; pointer-events: none; opacity: 0; transition: opacity 500ms ease-in-out; } .page-transition-content { opacity: 0; transition: opacity 500ms ease-in-out; } .page-transition-content.is-visible { opacity: 1; } .page-transition-overlay.is-active { opacity: 1; } .page-transition-logo { width: min(280px, 48vw); aspect-ratio: 620 / 160; background-color: var(--color-primary); -webkit-mask-image: url('../images/Logo.svg'); mask-image: url('../images/Logo.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; filter: drop-shadow(0 0 14px rgba(206, 68, 5, 0.35)); animation: page-transition-pulse 1.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .page-transition-content { transition: none; opacity: 1; } .page-transition-overlay { transition: none; } .page-transition-logo { animation: none; } .animate-marquee { animation: none; } } /* Shared mask-icon utility (rautomead_icon_mask): the SVG shape becomes the mask, painted with the surrounding element's color. Per-context sizing lives in the block CSS (detail.css / service.css). Lives here so it works wherever a rautomead/* block renders an icon. */ .det-icon { display: block; background-color: currentColor; -webkit-mask: var(--icon-url) center / contain no-repeat; mask: var(--icon-url) center / contain no-repeat; }