/* YATHARTH-PROPERTIES / Assets/Modules/base.css Theme: Rouge Classic Version: 1.0.0 Created: 2025-10-26 Last Edited: 2025-10-26 Developer: Mayank Chawdhari (BOSS294) Trademark: © YATHARTH PROPERTIES DESCRIPTION Base system CSS used across YATHARTH-PROPERTIES. Provides: - Core CSS variables for the Rouge Classic theme. - Global resets and typographic scale. - Container/layout utilities. - Primary component styles: buttons (primary + outline), inputs, cards, navs. - Accessibility + focus styles. - Responsive breakpoints and utility helpers. - Export-ready tokens are referenced via CSS custom properties. HOW TO USE 1. Drop this file into Assets/Modules/base.css and include it before component-specific CSS. 2. Use CSS variables (--*) from :root to theme components. Example: background: var(--bg); color: var(--text); 3. Buttons: use .btn + modifier classes: .btn - base .btn--primary - primary CTA .btn--outline - bordered CTA .btn--sm / .btn--lg for sizes 4. To switch theme colors at runtime, update the root variables or set a data-theme attribute on and override variables. 5. Use utility classes: .container, .stack, .muted, .sr-only for quick layouts. FEATURES (sections) 1 - :root variables (theme tokens, sizing, breakpoints) 2 - Global reset + base typography 3 - Layout helpers (.container, .stack, grid helpers) 4 - Buttons (base, primary, outline, sizes, disabled, interactions) 5 - Forms (inputs, labels, selects, textareas) 6 - Cards & surfaces 7 - Navigation & header basics 8 - Utilities (text helpers, visibility, spacing small helpers) 9 - Responsive breakpoints & helper adjustments END OF DOCUMENTATION */ /* 1. THEME TOKENS & GLOBAL VARIABLES */ :root{ /* Theme identity */ --theme-name: "Rouge Classic"; --theme-version: "1.0.0"; --theme-trademark: "© YATHARTH PROPERTIES"; --bg: #ffffff; /* ~60% primary background */ --surface: #ffffff; /* ~30% cards / surfaces */ --accent: #ff385b; /* ~10% primary accent */ --accent-2: #ff7c96; /* accent gradient / secondary accent */ --text: #18121a; /* primary text */ --muted: #7b6b73; /* muted text / meta */ --border: rgba(24,18,26,0.06); --shadow-1: 0 6px 18px rgba(24,18,26,0.06); --shadow-2: 0 14px 40px rgba(24,18,26,0.08); /* Typography (Rogue Classic as primary; provide fallbacks) */ --font-family: "Rogue Classic", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --font-sans: var(--font-family); --font-serif: "Merriweather", Georgia, serif; --font-mono: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace; /* Type scale */ --fs-hero: 2rem; /* 32px */ --fs-xl: 1.5rem; /* 24px */ --fs-lg: 1.125rem; /* 18px */ --fs-base: 1rem; /* 16px */ --fs-sm: 0.875rem; /* 14px */ --fs-xs: 0.75rem; /* 12px */ --lh-tight: 1.1; --lh-base: 1.45; /* Layout */ --max-width: 1200px; --gutter: 20px; --card-radius: 12px; --btn-radius: 10px; /* Buttons */ --btn-padding-y: 10px; --btn-padding-x: 16px; --btn-font-weight: 700; --btn-transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease, background-color 160ms ease; /* Breakpoints */ --bp-sm: 640px; --bp-md: 980px; --bp-lg: 1200px; } /* 2. RESET + BASE TYPOGRAPHY */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font-family: inherit; color: inherit; border: none; background: transparent; } :focus { outline: none; } /* Accessibility focus */ :focus-visible { outline: 3px solid rgba(255,56,91,0.14); outline-offset: 2px; border-radius: 6px; } /* Headings */ h1, h2, h3, h4, h5 { margin: 0 0 0.5rem 0; font-weight: 700; line-height: var(--lh-tight); } h1 { font-size: var(--fs-hero); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } p { margin: 0 0 1rem 0; color: var(--text); } /* Small text */ .small, .muted { font-size: var(--fs-sm); color: var(--muted); } /* 3. LAYOUT HELPERS */ .container { width: 100%; max-width: var(--max-width); margin-left: auto; margin-right: auto; padding-left: calc(var(--gutter)); padding-right: calc(var(--gutter)); } .row { display: flex; flex-wrap: wrap; gap: calc(var(--gutter)); } /* Simple column helper */ .col { flex: 1 1 0%; min-width: 0; } /* vertical stack */ .stack { display: flex; flex-direction: column; gap: 12px; } /* Card / surface base */ .surface { background: var(--surface); border-radius: var(--card-radius); border: 1px solid var(--border); box-shadow: var(--shadow-1); padding: 16px; } /* 4. BUTTONS - base + primary + outline (default patterns) Usage: