/* ============================================================================ * CinephileHub — main.css * THE FOUNDATION STYLESHEET (variables, reset, typography, layout, nav, footer) * * Hello, future Wes (and Kevin)! This file is the "skeleton" of the whole site. * components.css is the "muscles." Keeping them split is a real-world habit: * foundations rarely change, components change all the time. * * IMPORTANT ARCHITECTURE LESSON: * This exact file lives in THREE places and is byte-for-byte identical: * shared/css/main.css <- the SOURCE OF TRUTH (edit here) * static-version/css/main.css <- a copy * flask-version/app/static/css/main.css <- a copy * The visual design does NOT care whether a server (Flask) or the browser * (vanilla JS) built the HTML. Design is independent of backend. That single * idea is one of the most valuable things in this entire project. * -> WGU: Front-End Web Development (Term 2), UI Design (Term 3) * ==========================================================================*/ /* ---------------------------------------------------------------------------- * CUSTOM PROPERTIES ("CSS Variables") ::root * * WHAT: :root is the very top of the document tree (the element). Any * variable we define here is visible EVERYWHERE on the page. * WHY: Define a color once, reuse it 200 times. Want to re-theme the whole * site? Change one line. This is the DRY principle ("Don't Repeat Yourself") * applied to design. Before custom properties (~2017) people used Sass just * to get this. Now it is built into the browser — no build tool required. * -> WGU: Front-End Web Development (Term 2) * --------------------------------------------------------------------------*/ :root { /* Color palette — "Dark cinema": Criterion Collection meets movie palace. */ --color-bg: #0d0d0d; /* near-black canvas, like a darkened theater */ --color-surface: #1a1a1a; /* cards / raised panels sit "above" the bg */ --color-surface-alt: #222222; /* a second surface tone for subtle layering */ --color-gold: #c9a84c; /* brass marquee gold — our brand accent */ --color-gold-light: #e8c96a; /* brighter gold for hovers / highlights */ --color-text: #e8e0d0; /* warm off-white — easier on eyes than #fff */ --color-text-muted: #8a8a8a; /* secondary text: years, directors, captions */ --color-border: #2e2e2e; /* hairline separators between dark surfaces */ --color-danger: #c0392b; /* delete buttons, destructive actions */ --color-easy: #2ecc71; /* difficulty badge: "Easy Watch" */ --color-challenging: #f39c12; /* difficulty badge: "Challenging" */ --color-essential: #e74c3c; /* difficulty badge: "Essential Study" */ /* Typography tokens */ --font-heading: 'Cinzel', Georgia, 'Times New Roman', serif; /* classical authority */ --font-body: 'Lato', -apple-system, Helvetica, Arial, sans-serif; /* clean & readable */ --fs-base: 16px; /* the base font size everything else scales from */ --lh-base: 1.7; /* generous line-height = comfortable reading */ /* Spacing / layout tokens (one scale = consistent rhythm everywhere) */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --max-width: 1200px; /* content never gets wider than this, centered */ --radius: 6px; /* one corner radius reused site-wide */ --nav-height: 70px; /* fixed nav height — used to offset page content */ /* Motion */ --transition: 200ms ease; /* one transition speed = a calm, consistent feel */ } /* ---------------------------------------------------------------------------- * MODERN RESET * * WHAT: Browsers ship with default margins/padding that differ slightly. A * "reset" zeroes them so we start from a predictable blank slate. * box-sizing: border-box is the single most useful CSS line a beginner can * learn: it makes width include padding + border, so "width: 280px" really * means 280px on screen. Without it, padding ADDS to width and layouts drift. * -> WGU: Web Development Foundations (Term 1) * --------------------------------------------------------------------------*/ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---------------------------------------------------------------------------- * BASE ELEMENTS * --------------------------------------------------------------------------*/ html { font-size: var(--fs-base); scroll-behavior: smooth; /* anchor links glide instead of teleporting */ } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: var(--lh-base); /* min-height + flex column lets the footer "stick" to the bottom even on short pages. The
grows to fill leftover space. */ min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; /* belt-and-suspenders: never allow horizontal scroll */ } main { flex: 1 0 auto; /* grow to fill, never shrink — pushes footer down */ } /* Headings all use the cinematic serif and tighter line-height. */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; color: var(--color-text); letter-spacing: 0.02em; } a { color: var(--color-gold); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-gold-light); } img { max-width: 100%; display: block; } /* responsive images, no inline gap */ ul { list-style: none; } /* we style our own lists; remove default bullets */ /* ---------------------------------------------------------------------------- * LAYOUT HELPERS * * .container centers content and caps its width. We reuse it on every page so * the left/right "gutters" line up perfectly from section to section. * --------------------------------------------------------------------------*/ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; /* auto left+right margins = horizontal centering */ padding: 0 var(--space-md); } .section { padding: var(--space-lg) 0; } .section-title { font-size: 2rem; margin-bottom: var(--space-md); text-align: center; color: var(--color-gold); } /* A thin decorative gold rule under section titles — a "marquee" flourish. */ .section-title::after { content: ""; display: block; width: 60px; height: 2px; background: var(--color-gold); margin: var(--space-sm) auto 0; } .text-muted { color: var(--color-text-muted); } .text-center { text-align: center; } /* ---------------------------------------------------------------------------- * NAVIGATION (fixed top bar) * * position: fixed pins the bar to the viewport so it stays visible while you * scroll. Because it is lifted out of normal flow, the page content would slide * underneath it — so we add padding-top equal to --nav-height on the pages. * * backdrop-filter: blur() frosts whatever scrolls behind the bar (a very * "cinematic glass" look). It is progressive enhancement: browsers that do not * support it simply show the solid background color instead. Nothing breaks. * -> WGU: Front-End Web Development (Term 2), UI Design (Term 3) * --------------------------------------------------------------------------*/ .site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 1000; /* sit above everything else */ display: flex; align-items: center; background: rgba(13, 13, 13, 0.65); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); transition: background var(--transition); } /* nav.js adds .scrolled once the user scrolls down, making the bar more solid so text stays legible over busy hero imagery. */ .site-nav.scrolled { background: rgba(13, 13, 13, 0.92); } .nav-inner { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-gold); letter-spacing: 0.08em; white-space: nowrap; } .nav-logo:hover { color: var(--color-gold-light); } /* The desktop link list. On mobile we hide it and show the drawer instead. */ .nav-links { display: flex; align-items: center; gap: var(--space-md); } .nav-links a { color: var(--color-text); font-size: 0.95rem; letter-spacing: 0.03em; } .nav-links a:hover { color: var(--color-gold); } /* Genres dropdown (CSS-only on desktop, hover to reveal). */ .nav-dropdown { position: relative; } .nav-dropdown-toggle { cursor: pointer; background: none; border: none; color: var(--color-text); font: inherit; letter-spacing: 0.03em; } .nav-dropdown-toggle:hover { color: var(--color-gold); } .nav-dropdown-menu { position: absolute; top: 130%; left: 0; min-width: 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-xs); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); box-shadow: 0 10px 30px rgba(0,0,0,0.5); } /* Reveal on hover (desktop) OR when JS adds .open (keyboard / mobile). */ .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-menu a { display: block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius); font-size: 0.9rem; } .nav-dropdown-menu a:hover { background: var(--color-surface-alt); color: var(--color-gold); } /* Hamburger button — hidden on desktop, shown under 768px (see media query). */ .nav-toggle { display: none; background: none; border: none; color: var(--color-gold); font-size: 1.5rem; cursor: pointer; } /* The slide-in mobile drawer (starts off-screen to the right). */ .nav-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 80%; max-width: 320px; background: var(--color-surface); border-left: 1px solid var(--color-border); z-index: 1100; padding: calc(var(--nav-height) + var(--space-md)) var(--space-md) var(--space-md); transform: translateX(100%); /* parked off-screen */ transition: transform 280ms ease; display: flex; flex-direction: column; gap: var(--space-sm); } .nav-drawer.open { transform: translateX(0); } /* nav.js toggles this class */ .nav-drawer a { color: var(--color-text); font-size: 1.1rem; padding: var(--space-xs) 0; } .nav-drawer a:hover { color: var(--color-gold); } .nav-drawer-close { position: absolute; top: var(--space-sm); right: var(--space-md); background: none; border: none; color: var(--color-text-muted); font-size: 1.6rem; cursor: pointer; } /* A dark scrim behind the drawer that dims the page and closes on click. */ .nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1050; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); } .nav-scrim.open { opacity: 1; visibility: visible; } /* ---------------------------------------------------------------------------- * FOOTER * --------------------------------------------------------------------------*/ .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-lg) 0 var(--space-md); margin-top: var(--space-lg); } .footer-grid { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: space-between; } .footer-col { flex: 1 1 200px; } .footer-logo { font-family: var(--font-heading); color: var(--color-gold); font-size: 1.3rem; letter-spacing: 0.08em; margin-bottom: var(--space-xs); } .footer-col h4 { color: var(--color-gold); font-size: 1rem; margin-bottom: var(--space-sm); } .footer-col ul li { margin-bottom: var(--space-xs); } .footer-col a { color: var(--color-text-muted); font-size: 0.9rem; } .footer-col a:hover { color: var(--color-gold); } .footer-tagline { color: var(--color-text-muted); font-style: italic; font-size: 0.9rem; } .footer-bottom { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); text-align: center; color: var(--color-text-muted); font-size: 0.85rem; } /* "Site by Datumology" studio credit — the very last line of every page. Small, quiet, and gold-linked back to Wes's web-dev studio. */ .footer-credit { margin-top: var(--space-sm); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--color-text-muted); } .footer-credit a { color: var(--color-gold); } .footer-credit a:hover { color: var(--color-gold-light); } /* ---------------------------------------------------------------------------- * RESPONSIVE BREAKPOINTS — MOBILE-FIRST * * PHILOSOPHY: We wrote the base styles for small screens first, then ADD * complexity for larger screens. Why mobile-first? Most traffic is mobile, and * it is easier to add than to take away. Here we instead hide desktop nav on * small screens — a pragmatic exception that keeps the markup simple. * -> WGU: Front-End Web Deve