/* ============================================================================ * DATUMOLOGY — main.css * THE FOUNDATION STYLESHEET (variables, reset, typography, layout, nav, footer) * * Hello, future Wes. This is the "skeleton" of the Datumology site; * components.css is the "muscles." We split them on purpose: foundations * (colors, type, layout primitives) rarely change, while components (buttons, * cards, badges) change all the time. Keeping them apart is a real-world habit. * * ARCHITECTURE LESSON — the Single Source of Truth: * This exact file lives in (eventually) two places, byte-for-byte identical: * shared/css/main.css <- THE SOURCE OF TRUTH (edit here) * static-version/css/main.css <- a copy used by the live static site * When the Flask version is built later, it gets a third identical copy. The * look of a site does NOT care whether a server or the browser built the HTML. * Design is independent of backend. Internalize that and you understand most of * modern web architecture. * -> WGU: Front-End Web Development (Term 2), UI Design (Term 3) * ==========================================================================*/ /* ---------------------------------------------------------------------------- * CUSTOM PROPERTIES ("CSS Variables") :root * * WHAT: :root is the top of the document tree (). Anything defined here * is visible to every element on the page. * WHY: Define a value once, reuse it everywhere. Re-theme the whole site by * editing a handful of lines. This is the DRY principle ("Don't Repeat * Yourself") applied to design tokens. Before CSS variables (~2017) you * needed a tool like Sass for this; now the browser does it natively. * -> WGU: Front-End Web Development (Term 2) * * The Datumology palette is "precision instrument in a dark lab": a cool * near-black canvas, fine grid lines, and a single electric accent. It is * deliberately NOT the Precise Home Repair blue or the Cinephile gold — every * brand gets its own identity. * --------------------------------------------------------------------------*/ :root { /* --- Color: surfaces (darkest -> lightest) --- */ --bg: #0a0c10; /* near-black canvas with a faint cool-blue bias */ --surface: #11141b; /* cards/panels sit "above" the background */ --surface-alt: #181d27; /* a second surface tone for subtle layering */ --surface-hi: #1f2532; /* hover/active surface */ /* --- Color: brand accents --- */ --accent: #2de2c8; /* electric teal-cyan: the "datum point" signal */ --accent-soft: #5cf0da; /* brighter accent for hovers/highlights */ --accent-2: #8b6cff; /* violet secondary, used sparingly for contrast */ /* --- Color: text --- */ --text: #e8edf4; /* cool off-white; softer on the eyes than pure #fff*/ --text-muted: #8b95a7; /* secondary text: labels, captions, meta */ --text-faint: #5a6473; /* tertiary: footnotes, disabled */ /* --- Color: lines & utility --- */ --border: #232a36; /* hairline borders between sections/cards */ --grid-line: rgba(255, 255, 255, 0.035); /* the faint blueprint grid */ --danger: #ff5d5d; --success: #2de2c8; /* --- Typography --- */ --font-display: 'Space Grotesk', system-ui, sans-serif; /* geometric, techy */ --font-body: 'Inter', system-ui, sans-serif; /* clean, readable */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* code/labels */ /* --- Spacing & rhythm (an 8px scale keeps everything visually aligned) --- */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-6: 3rem; --space-8: 4rem; --space-12: 6rem; --space-16: 8rem; /* --- Layout --- */ --max-width: 1200px; --radius: 14px; /* default rounded-corner radius */ --radius-sm: 8px; --nav-h: 72px; /* fixed-nav height; sections offset by this */ /* --- Motion --- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.4s; } /* ---------------------------------------------------------------------------- * MODERN RESET * * Browsers ship with inconsistent default margins/sizing. A small reset gives * us a predictable starting line so our design looks the same everywhere. * -> WGU: Front-End Web Development (Term 2) * --------------------------------------------------------------------------*/ *, *::before, *::after { box-sizing: border-box; /* width includes padding+border; far easier to reason about */ margin: 0; padding: 0; } html { scroll-behavior: smooth; /* anchor links glide instead of jumping */ scroll-padding-top: var(--nav-h); /* stop under the fixed nav, not behind it */ -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; /* generous leading = comfortable reading */ color: var(--text); background-color: var(--bg); /* The "blueprint" backdrop: two faint repeating gradients form a grid. * Pure CSS — no image file, so it stays crisp and weighs nothing. */ background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* belt-and-suspenders against horizontal scroll */ } img { max-width: 100%; display: block; } /* images never overflow their box */ a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ---------------------------------------------------------------------------- * TYPOGRAPHY SCALE * * clamp(MIN, PREFERRED, MAX) makes type fluid: it grows with the viewport but * never gets too small on phones or absurdly large on monitors — responsive * type with zero media queries. * -> WGU: Front-End Web Development (Term 2), UI Design (Term 3) * --------------------------------------------------------------------------*/ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; /* tighten display type for a polished feel */ color: var(--text); } h1 { font-size: clamp(2.6rem, 6vw, 4.75rem); } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); } p { color: var(--text-muted); max-width: 62ch; } /* ~62 chars/line = optimal readability */ /* The "kicker" / eyebrow label above headings — monospace + accent reads * like a precise instrument readout, reinforcing the brand. */ .eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.6rem; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); display: inline-block; } /* ---------------------------------------------------------------------------- * LAYOUT PRIMITIVES * --------------------------------------------------------------------------*/ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; /* center horizontally */ padding-inline: var(--space-3); } .section { padding-block: var(--space-16); position: relative; } .section--tight { padding-block: var(--space-8); } /* A reusable two-column split that collapses to one column on small screens. */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; } .text-accent { color: var(--accent); } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } /* ---------------------------------------------------------------------------- * NAVIGATION (fixed, translucent, blurs content behind it on scroll) * -> WGU: Front-End Web Development (Term 2), JavaScript Programming (Term 3) * --------------------------------------------------------------------------*/ .nav { position: fixed; inset: 0 0 auto 0; /* pin to top: top/right/left 0, bottom auto */ height: var(--nav-h); z-index: 100; display: flex; align-items: center; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); border-bottom: 1px solid transparent; } /* .is-scrolled is toggled by JS once the user scrolls down a bit. */ .nav.is-scrolled { background: rgba(10, 12, 16, 0.72); backdrop-filter: blur(14px); /* frosted-glass effect */ -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--border); } .nav .container { display: flex; align-items: center; justify-content: space-between; } .nav__links { display: flex; gap: var(--space-4); align-items: center; } .nav__links a { font-size: 0.95rem; color: var(--text-muted); position: relative; transition: color var(--dur) var(--ease); } .nav__links a:hover { color: var(--text); } /* Animated underline that grows from the left on hover. */ .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--accent); transition: width var(--dur) var(--ease); } .nav__links a:hover::after { width: 100%; } /* Hamburger button: hidden on desktop, shown on mobile (see media query). */ .nav__toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text); font-size: 1.5rem; padding: 0.25rem; } /* ---------------------------------------------------------------------------- * LOGO (the real Datumology mark — AI-designed, hand-processed) * * LESSON — why the logo file is a TRANSPARENT PNG, not the original JPG: * The artwork was generated as glowing light on a black background. If we * dropped that rectangle straight into the nav, you'd see its hard edges the * moment it sat on the translucent, blurred nav bar. So the image was run * through a "black-to-alpha" conversion (alpha = pixel brightness): the black * becomes fully transparent, the glow becomes PARTIALLY transparent, and the * mark now composites onto ANY dark surface like light, not like a sticker. * This is the same un-premultiply math used in film compositing. * -> WGU: UI Design (Term 3); the pixel math previews Discrete Math & * linear-algebra thinking you'll meet in the core CS courses. * * Sizing: height is fixed and width rides along via aspect-ratio (auto). The * source PNG is ~2x the displayed size so it stays crisp on Retina screens. * --------------------------------------------------------------------------*/ .logo { display: inline-flex; align-items: center; gap: 0.6rem; } /* 64px in a 72px nav = maximum presence with 4px breathing room top/bottom. * The PNG is exported at exactly 2x (128px) so Retina screens get 1:1 pixels. */ .logo__img { height: 64px; width: auto; display: block; } /* The footer gets the STACKED lockup (emblem above wordmark) at a generous * size — footers have vertical room to spare, so the brand gets a big sendoff. */ .footer .logo__img--stacked { width: 210px; height: auto; } @media (max-width: 680px) { .logo__img { height: 50px; } } /* Legacy placeholder styles kept for reference (the SVG mark + text wordmark * pattern is a useful fallback technique while a brand is still in design). */ .logo__mark { width: 26px; height: 26px; flex: none; color: var(--accent); } .logo__text { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text); } .logo__text b { color: var(--accent); font-weight: 600; } /* ---------------------------------------------------------------------------- * FOOTER * --------------------------------------------------------------------------*/ .footer { border-top: 1px solid var(--border); padding-block: var(--space-8) var(--space-4); background: var(--surface); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6); } .footer h4 { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-2); } .footer a { color: var(--text-muted); font-size: 0.95rem; line-height: 2; transition: color var(--dur) var(--ease); } .footer a:hover { color: var(--accent); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--text-faint); } /* ---------------------------------------------------------------------------- * SCROLL-REVEAL ANIMATION HOOK * Elements start invisible + nudged down; JS adds .is-visible when they scroll * into view, and they ease up into place. The CSS does the animation; the JS * only flips the switch (see main.js / IntersectionObserver). * -> WGU: JavaScript Programming (Term 3) * --------------------------------------------------------------------------*/ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Accessibility: anyone who has asked their OS to reduce motion gets none. */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ---------------------------------------------------------------------------- * RESPONSIVE BREAKPOINTS (mobile-first: we override the desktop defaults here) * -> WGU: Front-End Web Development (Term 2) * --------------------------------------------------------------------------*/ @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-6); } .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { /* Swap desktop links for a slide-in mobile drawer toggled by the hamburger. */ .nav__toggle { display: block; } .nav__links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-3); background: rgba(10, 12, 16, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bot