/* ========================================================================= PRATHAMSATYA WEBSITE — MAIN STYLESHEET ========================================================================= This file contains the design system (colors, fonts, spacing) and the base styles for every component on the site. Phone/tablet/desktop breakpoints live in responsive.css. Animation keyframes live in animations.css. Load order in the HTML is: style.css, responsive.css, animations.css. HOW TO RE-COLOR THE WHOLE SITE: Scroll to the ":root" block right below this comment and change the hex color values. Every component on every page reads its colors from these variables, so editing them here updates the entire website. ========================================================================= */ :root { /* --------------------------------------------------------------------- BRAND COLORS — change these to re-color the entire site. "Copper" is the signature accent color (buttons, links, highlights). --------------------------------------------------------------------- */ --color-graphite: #15191c; /* Dark background: hero, footer, scrolled header */ --color-graphite-2: #1b2024; /* Slightly lighter dark panel */ --color-graphite-3: #262c31; /* Card backgrounds on dark sections */ --color-copper: #c46a2c; /* PRIMARY BRAND ACCENT COLOR */ --color-copper-light: #e3905a; /* Lighter accent (hover states) */ --color-copper-dark: #8c481c; /* Darker accent (active/pressed states) */ --color-silver: #9aa3ab; /* Cool metallic gray (secondary accent) */ --color-silver-light: #cbd1d6; --color-offwhite: #f5f6f7; /* Light section background */ --color-white: #ffffff; --color-ink: #1b1e21; /* Main body text color */ --color-ink-soft: #555c62; /* Secondary / muted text color */ --color-border: #e4e6e8; /* Light dividers / borders */ --color-success: #2f7a4f; --color-error: #c0392b; /* --------------------------------------------------------------------- TYPOGRAPHY — change fonts here. Loaded via Google Fonts in the of every page (see the comment block in index.html). --------------------------------------------------------------------- */ --font-display: 'Archivo Black', 'Arial Black', sans-serif; /* big headlines */ --font-condensed: 'Barlow Condensed', sans-serif; /* sub-headings */ --font-body: 'Inter', -apple-system, Helvetica, Arial, sans-serif; /* paragraphs */ --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* labels / specs */ /* --------------------------------------------------------------------- SPACING SCALE — used for section padding & gaps throughout the site --------------------------------------------------------------------- */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2.5rem; /* 40px */ --space-xl: 4rem; /* 64px */ --space-2xl: 6rem; /* 96px */ /* --------------------------------------------------------------------- SHAPE, SHADOW & MOTION --------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --shadow-sm: 0 2px 10px rgba(15, 18, 20, 0.08); --shadow-md: 0 14px 36px rgba(15, 18, 20, 0.14); --shadow-lg: 0 28px 70px rgba(15, 18, 20, 0.22); --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 0.18s ease; /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --container-width: 1240px; --header-height: 76px; } /* ========================================================================= RESET & BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--color-ink); background: var(--color-white); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } svg { display: block; } a { color: var(--color-copper); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-copper-dark); } ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; font-size: 1rem; } /* Visible keyboard focus ring everywhere (accessibility) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-copper-light); outline-offset: 2px; } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================= TYPOGRAPHY ========================================================================= */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); line-height: 1.08; margin: 0 0 var(--space-sm); letter-spacing: -0.01em; } h1 { font-size: 2.6rem; } h2 { font-size: 2.1rem; } h3 { font-size: 1.4rem; } h4 { font-size: 1.1rem; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } p { margin: 0 0 var(--space-sm); color: var(--color-ink-soft); } .lede { font-size: 1.15rem; color: var(--color-ink-soft); max-width: 640px; } /* "Eyebrow" mono label used above headings — a small spec-plate style tag */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-copper); margin-bottom: var(--space-sm); } .eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--color-copper); } .eyebrow.on-dark { color: var(--color-copper-light); } .section-head { max-width: 720px; margin-bottom: var(--space-xl); } .section-head.center { margin-inline: auto; text-align: center; } .text-center { text-align: center; } /* ========================================================================= LAYOUT HELPERS ========================================================================= */ .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-md); } .section { padding: var(--space-2xl) 0; } .section-tight { padding: var(--space-xl) 0; } .section-dark { background: var(--color-graphite); color: var(--color-silver-light); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .hero h1, .hero h2, .hero h3, .hero h4, .page-header h1, .page-header h2, .page-header h3, .page-header h4 { color: var(--color-white); } .section-dark p, .hero p, .page-header p { color: var(--color-silver-light); } .section-light { background: var(--color-offwhite); } .grid { display: grid; gap: var(--space-lg); } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .flex { display: flex; align-items: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } /* Skip-to-content link (keyboard / screen-reader accessibility) */ .skip-link { position: absolute; left: -999px; top: auto; background: var(--color-copper); color: var(--color-white); padding: 0.6em 1em; z-index: 10000; } .skip-link:focus { left: var(--space-sm); top: var(--space-sm); } /* ========================================================================= PRELOADER — shown briefly while the page's first paint settles ========================================================================= */ .preloader { position: fixed; inset: 0; background: var(--color-graphite); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; } .preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .preloader__bars { display: flex; gap: 8px; align-items: flex-end; height: 46px; } .preloader__bars span { width: 10px; background: var(--color-copper); border-radius: 3px; animation: loaderBar 0.9s ease-in-out infinite; } .preloader__bars span:nth-child(1) { animation-delay: 0s; } .preloader__bars span:nth-child(2) { animation-delay: 0.15s; } .preloader__bars span:nth-child(3) { animation-delay: 0.3s; } .preloader__bars span:nth-child(4) { animation-delay: 0.45s; } /* ========================================================================= BUTTONS ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--font-condensed); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.95em 1.8em; border-radius: var(--radius-sm); border: 2px solid transparent; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); cursor: pointer; text-align: center; max-width: 100%; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-copper); color: var(--color-white); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-copper-dark); color: var(--color-white); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; border-color: var(--color-silver); color: var(--color-ink); } .btn-outline:hover { border-color: var(--color-copper); color: var(--color-copper); } .btn-outline.on-dark { border-color: rgba(255,255,255,0.35); color: var(--color-white); } .btn-outline.on-dark:hover { border-color: var(--color-copper-light); color: var(--color-copper-light); } .btn-block { width: 100%; } .btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; } /* ========================================================================= SITE HEADER / NAVIGATION ========================================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-height); display: flex; align-items: center; background: rgba(21, 25, 28, 0); transition: background var(--transition), box-shadow var(--transition), height var(--transition); } /* Solid bar once the visitor scrolls (JS toggles this class) */ .site-header.is-scrolled { background: var(--color-white); box-shadow: var(--shadow-sm); height: 70px; } .site-header .header-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); } .brand { display: flex; align-items: center; gap: 0.6em; } .brand img { height: 34px; width: auto; } .brand .logo-light { display: block; } .brand .logo-dark { display: none; } .site-header.is-scrolled .brand .logo-light { display: none; } .site-header.is-scrolled .brand .logo-dark { display: block; } .main-nav { margin-left: auto; } .main-nav__list { display: none; /* mobile-first: hidden until opened; desktop shown in responsive.css */ } .main-nav__link { font-family: var(--font-condensed); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.92rem; color: var(--color-white); position: relative; padding: 0.4em 0; } .site-header.is-scrolled .main-nav__link { color: var(--color-ink); } /* "Contact" is styled as a compact button — it now does the job the removed "Get a Quote" button used to do. */ .main-nav__link--cta { background: var(--color-copper); color: var(--color-white) !important; padding: 0.55em 1.3em !important; border-radius: var(--radius-sm); transition: background var(--transition-fast); } .main-nav__link--cta::after { display: none; } .main-nav__link--cta:hover { background: var(--color-copper-dark); } .site-header.is-scrolled .main-nav__link--cta { color: var(--color-white) !important; } .main-nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--color-copper); transition: right var(--transition-fast); } .main-nav__link:hover::after, .main-nav__link.is-active::after { right: 0; } .main-nav__link.is-active { color: var(--color-copper); } .site-header.is-scrolled .main-nav__link.is-active { color: var(--color-copper); } .header-actions { display: flex; align-items: center; gap: var(--space-sm); } .header-call { display: none; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-white); } .site-header.is-scrolled .header-call { color: var(--color-ink); } /* Hamburger button (mobile menu toggle) */ .nav-toggle { width: 42px; height: 42px; border: none; background: transparent; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; z-index: 1100; } .nav-toggle span { width: 24px; height: 2px; background: var(--color-white); transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast); } .site-header.is-scrolled .nav-toggle span { background: var(--color-ink); } .nav-toggle.is-open span { background: var(--color-white); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile slide-down menu panel */ .mobile-menu { position: fixed; top: 0; right: 0; width: min(86vw, 360px); height: 100vh; background: var(--color-graphite); z-index: 1050; padding: calc(var(--header-height) + var(--space-lg)) var(--space-lg) var(--space-lg); transform: translateX(100%); transition: transform var(--transition); display: flex; flex-direction: column; gap: var(--space-lg); } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu__list { display: flex; flex-direction: column; gap: var(--space-md); } .mobile-menu__link { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-white); } .mobile-menu__link.is-active { color: var(--color-copper-light); } .mobile-menu__meta { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-silver-light); } .mobile-menu__meta a { color: var(--color-copper-light); } .nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity var(--transition); } .nav-overlay.is-open { opacity: 1; visibility: visible; } /* ========================================================================= HERO SECTION ========================================================================= */ .hero { position: relative; background: var(--color-graphite); color: var(--color-white); padding-top: calc(var(--header-height) + var(--space-xl)); padding-bottom: var(--space-2xl); overflow: hidden; } .hero::before { /* faint blueprint grid texture across the whole hero */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 42px 42px; pointer-events: none; } .hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; } .hero__title { font-size: clamp(2.4rem, 6vw, 3.6rem); margin-bottom: var(--space-md); } .hero__title .accent { color: var(--color-copper-light); } .hero__text { color: var(--color-silver-light); font-size: 1.1rem; max-width: 540px; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); } .hero__media { position: relative; } .hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* The "spec strip" stat band beneath the hero copy */ .spec-strip { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid rgba(255,255,255,0.14); } .spec-strip__item { font-family: var(--font-mono); } .spec-strip__num { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--color-white); } .spec-strip__label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-silver); } /* ========================================================================= TRUST / LOGO STRIP ========================================================================= */ .trust-strip { padding: var(--space-lg) 0; background: var(--color-offwhite); border-bottom: 1px solid var(--color-border); } .trust-strip__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); align-items: center; } .trust-strip__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2em; font-family: var(--font-mono); color: var(--color-ink-soft); } .trust-strip__item strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-ink); } .trust-strip__item span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; } /* ========================================================================= CLIENT LOGO STRIP — partner / trusted-by logos ========================================================================= */ /* ========================================================================= ABOUT PREVIEW / SPLIT SECTION ========================================================================= */ .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; } .split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; aspect-ratio: 7 / 8; object-fit: cover; } .split__media { position: relative; } .check-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); } .check-list li { display: flex; align-items: flex-start; gap: 0.7em; color: var(--color-ink-soft); } .check-list svg { flex: none; margin-top: 3px; color: var(--color-copper); } /* ========================================================================= NAMEPLATE CARDS — the site's signature recurring component. Used for products, services, and value propositions. Styled to evoke a riveted industrial spec plate. ========================================================================= */ .plate-card { position: relative; background: var(--color-graphite-2); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-md) var(--space-md); border: 1px solid rgba(255,255,255,0.08); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); overflow: hidden; will-change: transform; /* GPU compositing for smooth card hover */ } .plate-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(196,106,44,0.5); } /* corner rivets, purely decorative */ .plate-card::before, .plate-card::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--color-silver); box-shadow: 0 0 0 2px rgba(0,0,0,0.25) inset; } .plate-card::before { top: 14px; left: 14px; } .plate-card::after { top: 14px; right: 14px; } .plate-card__media { border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-md); aspect-ratio: 6/5; } .plate-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .plate-card:hover .plate-card__media img { transform: scale(1.06); } .plate-card__tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-copper-light); display: block; margin-bottom: 0.4em; } .plate-card__title { color: var(--color-white); font-size: 1.3rem; margin-bottom: 0.5em; } .plate-card__text { color: var(--color-silver-light); font-size: 0.95rem; margin-bottom: 0; } .plate-card__link { display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--space-sm); font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--color-copper-light); } .plate-card__link svg { transition: transform var(--transition-fast); } .plate-card__link:hover svg { transform: translateX(4px); } /* Light variant of the plate card, used on light backgrounds */ .plate-card--light { background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .plate-card--light:hover { border-color: rgba(196,106,44,0.4); } .plate-card--light::before, .plate-card--light::after { background: var(--color-silver-light); } .plate-card--light .plate-card__title { color: var(--color-ink); } .plate-card--light .plate-card__text { color: var(--color-ink-soft); } .plate-card--light .plate-card__tag { color: var(--color-copper); } .plate-card--light .plate-card__link { color: var(--color-copper); } /* Icon-only plate card (used for services capability grid) */ .plate-card__icon { width: 52px; height: 52px; border-radius: var(--radius-sm); background: rgba(196,106,44,0.12); color: var(--color-copper); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); } .plate-card--light .plate-card__icon { background: rgba(196,106,44,0.1); } /* ========================================================================= CTA BAND ========================================================================= */ .cta-band { background: linear-gradient(120deg, var(--color-graphite) 0%, #2b1a10 100%); color: var(--color-white); padding: var(--space-2xl) 0; text-align: center; position: relative; overflow: hidden; } .cta-band h2 { color: var(--color-white); } .cta-band .lede { color: var(--color-silver-light); margin-inline: auto; } .cta-band__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); } /* ========================================================================= TESTIMONIAL / CLIENT TRUST SECTION ========================================================================= */ .client-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; } .client-logos__slot { display: flex; align-items: center; justify-content: center; height: 64px; overflow: hidden; border: none; padding: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-ink-soft); } .client-logos__slot img { max-width: 160px; max-height: 64px; width: auto; height: auto; object-fit: contain; } .quote-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: var(--shadow-sm); } .quote-card svg { color: var(--color-copper); margin-bottom: var(--space-sm); } .quote-card p { font-size: 1.05rem; color: var(--color-ink); font-style: italic; } .quote-card__who { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-ink-soft); } /* ========================================================================= PAGE HEADER (used on About / Services / Contact pages) ========================================================================= */ .page-header { background: var(--color-graphite); color: var(--color-white); padding-top: calc(var(--header-height) + var(--space-xl)); padding-bottom: var(--space-xl); position: relative; overflow: hidden; } .page-header::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 42px 42px; } .page-header__inner { position: relative; z-index: 1; } .breadcrumb { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-silver); margin-bottom: var(--space-md); } .breadcrumb a { color: var(--color-silver-light); } .breadcrumb a:hover { color: var(--color-copper-light); } /* ========================================================================= SERVICES PAGE — capability list + packaging cards ========================================================================= */ .capability-list { display: flex; flex-direction: column; gap: 0; } .capability-list li { display: flex; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); } .capability-list .num { font-family: var(--font-mono); color: var(--color-copper); font-size: 0.9rem; flex: none; width: 2.4em; } .capability-list strong { display: block; color: var(--color-ink); margin-bottom: 0.2em; } .capability-list p { margin: 0; } .note-card { background: var(--color-offwhite); border-left: 3px solid var(--color-copper); border-radius: var(--radius-sm); padding: var(--space-md); font-size: 0.92rem; color: var(--color-ink-soft); } /* ========================================================================= CONTACT PAGE — info cards + form ========================================================================= */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .info-card-list { display: flex; flex-direction: column; gap: var(--space-md); } .info-card { display: flex; gap: var(--space-md); align-items: flex-start; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); } .info-card__icon { flex: none; width: 46px; height: 46px; border-radius: var(--radius-sm); background: rgba(196,106,44,0.1); color: var(--color-copper); display: flex; align-items: center; justify-content: center; } .info-card h4 { margin-bottom: 0.3em; } .info-card p { margin: 0; } .info-card a { color: var(--color-ink); } .info-card a:hover { color: var(--color-copper); } .map-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); margin-top: var(--space-md); } .map-frame iframe { width: 100%; height: 280px; border: 0; display: block; } /* ---- Form ---- */ .contact-form { display: flex; flex-direction: column; gap: var(--space-md); } .form-row { display: grid; gap: var(--space-md); grid-template-columns: 1fr; } .field { display: flex; flex-direction: column; gap: 0.45em; } .field label { font-family: var(--font-condensed); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-ink); } .field label .req { color: var(--color-copper); } .field input, .field textarea { border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.85em 1em; background: var(--color-white); color: var(--color-ink); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .field input:focus, .field textarea:focus { border-color: var(--color-copper); box-shadow: 0 0 0 3px rgba(196,106,44,0.15); outline: none; } .field textarea { resize: vertical; min-height: 130px; } .field.has-error input, .field.has-error textarea { border-color: var(--color-error); } .field__error { font-size: 0.8rem; color: var(--color-error); min-height: 1em; } /* Honeypot spam-trap field — kept off-screen, never shown to real visitors */ .field--hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; } .form-status { display: none; padding: 0.9em 1.1em; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 600; } .form-status.is-visible { display: block; } .form-status.is-success { background: rgba(47,122,79,0.12); color: var(--color-success); } .form-status.is-error { background: rgba(192,57,43,0.12); color: var(--color-error); } /* ========================================================================= FOOTER ========================================================================= */ .site-footer { background: var(--color-graphite); color: var(--color-silver-light); padding-top: var(--space-2xl); } .footer-grid { display: grid; gap: var(--space-xl); grid-template-columns: 1fr; padding-bottom: var(--space-xl); border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-brand img { height: 32px; width: auto; object-fit: contain; margin-bottom: var(--space-md); } .footer-brand p { color: var(--color-silver); max-width: 320px; } .footer-col h4 { color: var(--color-white); margin-bottom: var(--space-md); } .footer-col ul { display: flex; flex-direction: column; gap: 0.7em; } .footer-col a { color: var(--color-silver-light); } .footer-col a:hover { color: var(--color-copper-light); } .footer-contact li { display: flex; gap: 0.6em; align-items: flex-start; color: var(--color-silver-light); } .footer-contact svg { flex: none; color: var(--color-copper-light); margin-top: 3px; } .social-row { display: flex; gap: 0.7em; margin-top: var(--space-md); } .social-row a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: var(--color-white); transition: background var(--transition-fast), border-color var(--transition-fast); } .social-row a:hover { background: var(--color-copper); border-color: var(--color-copper); } .footer-bottom { padding: var(--space-md) 0 var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); font-size: 0.85rem; color: var(--color-silver); text-align: center; } .footer-bottom a { color: var(--color-silver); } .footer-bottom a:hover { color: var(--color-copper-light); } /* ========================================================================= FLOATING ACTION BUTTONS — WhatsApp & Back to top ========================================================================= */ .float-stack { position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 0.8em; } .fab { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: transform var(--transition-fast), box-shadow var(--transition-fast); border: none; } .fab:hover { transform: translateY(-3px) scale(1.04); } .fab-whatsapp { background: #25d366; color: #fff; } .fab-call { background: var(--color-copper); color: #fff; } .fab-top { background: var(--color-graphite); color: var(--color-white); opacity: 0; visibility: hidden; transform: translateY(10px); } .fab-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } /* ========================================================================= 404 / EMPTY STATES (used sparingly, e.g. no-results states) ========================================================================= */ .empty-state { text-align: center; padding: var(--space-2xl) 0; color: var(--color-ink-soft); } /* ========================================================================= END OF MAIN STYLESHEET — see responsive.css for breakpoints, animations.css for keyframes and scroll-reveal system. ========================================================================= */