/* ========================================================================== A1A Surveying — Design tokens Every color, size, and timing value the site uses lives here. Change a value in this file and it updates everywhere. ========================================================================== */ :root { /* ---- Typefaces ------------------------------------------------------- Loaded from Google Fonts in index.html. To swap a face, change the value here AND the font URL in the of each HTML page. */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-text: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* ---- Brand palette --------------------------------------------------- Pulled from the A1A logo: navy shield, orange banner, aqua water, sand/parchment ground. */ --tan-50: #FBF7F0; --tan-100: #F4EDE1; --tan-200: #EADFCB; --tan-300: #DCCBAE; --tan-500: #B2946A; --navy-900: #0B1D38; --navy-800: #12294D; --navy-700: #16305A; --navy-600: #1E4478; --navy-100: #D7E2EF; --orange-700: #B2470E; --orange-600: #D25812; --orange-500: #E86A17; --orange-200: #FBD3AE; --orange-50: #FDF0E3; --aqua-700: #186273; --aqua-600: #1F7A93; --aqua-500: #2E96AF; --aqua-200: #BFE1E9; --aqua-50: #EDF7F9; --danger-600: #B3341C; --danger-100: #F8E3DE; --success-600: #3F7A3A; /* ---- Surfaces & ink --------------------------------------------------- */ --paper: #FAF6EE; /* page ground — warm plat paper */ --paper-2: #F3EDE1; /* alternating section ground */ --paper-card: #FFFDF9; /* card ground */ --ink: #152238; /* headings, linework */ --ink-body: #4A4638; /* body copy */ --ink-muted: #5C5747; /* secondary copy */ --ink-faint: #635B4B; /* labels, meta */ --hair: rgba(21, 34, 56, .16); /* visible hairline rule */ --hair-soft: rgba(21, 34, 56, .09); /* barely-there rule */ /* Section grounds are thin washes, not solids — the fixed plat backdrop reads clearly through them. This is the main dial for how present the drawing is: raise the alpha toward 1 to fade it back, lower it toward 0 to let more of it through. The tan wash stays slightly heavier so the alternating sections still read as separate bands. */ --paper-veil: rgba(250, 246, 238, .10); --paper-2-veil: rgba(243, 237, 225, .18); /* Backdrop: how far the drawing grows, and how soft it goes, between the top of the page and the bottom of the hero. The blur is heavy on purpose — it is what keeps text readable now that the drawing sits at full strength behind the page. */ --backdrop-blur: 34px; --backdrop-scale: 1.34; --backdrop-opacity: 1; /* ---- Spacing (4px base) ---------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --gutter: 32px; --container-xl: 1320px; --container-lg: 1140px; /* Vertical rhythm for full-width sections. Scales down on small screens (see the media query at the bottom of this file). */ --section-y: 112px; /* ---- Controls --------------------------------------------------------- */ --control-h-md: 44px; --control-h-lg: 52px; --control-pad-x-md: 18px; --control-pad-x-lg: 26px; /* ---- Shape ------------------------------------------------------------ */ --r-sm: 10px; --r-md: 18px; --r-lg: 24px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(58, 53, 44, .10), 0 1px 1px rgba(58, 53, 44, .06); --shadow-md: 0 6px 14px -6px rgba(27, 40, 62, .20), 0 2px 4px rgba(58, 53, 44, .07); --shadow-lg: 0 20px 40px -18px rgba(11, 29, 56, .32), 0 3px 8px rgba(58, 53, 44, .08); --shadow-focus: 0 0 0 3px rgba(46, 150, 175, .32); /* ---- Motion ----------------------------------------------------------- One easing curve for everything. Instrument movement: settled, no bounce, no overshoot. */ --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 500ms; --ease: cubic-bezier(.2, .7, .2, 1); /* The service-card panel gets its own pair. The shared --ease starts fast and then has a long tail, which on a big moving panel reads as a snap followed by a crawl. This curve leaves gently and settles evenly. */ --dur-card: 620ms; --ease-card: cubic-bezier(.32, .08, .24, 1); --transition-control: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } /* Tighten the vertical rhythm and gutters on phones. */ @media (max-width: 720px) { :root { --section-y: 72px; --gutter: 20px; } }