/* ================================================================ ThermoInstall – Landing Page Styles Author: ThermoInstall Structure: Tokens → Reset → Layout → Components → Sections → Utilities ================================================================ */ /* ---------------------------------------------------------------- 1. CSS CUSTOM PROPERTIES (DESIGN TOKENS) ---------------------------------------------------------------- */ :root { /* Colors */ --clr-primary: #1e293b; /* Navy slate */ --clr-primary-light: #334155; --clr-primary-dark: #0f172a; --clr-accent: #f97316; /* Energetic orange */ --clr-accent-hover: #ea6c0a; --clr-accent-soft: #fff7ed; --clr-bg: #f8fafc; --clr-bg-alt: #f1f5f9; --clr-surface: #ffffff; --clr-border: #e2e8f0; --clr-text: #1e293b; --clr-text-muted: #64748b; --clr-text-light: #94a3b8; /* Typography */ --font-sans: 'Quicksand', 'Inter', system-ui, -apple-system, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* Radii */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.07); --shadow-lg: 0 10px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08); --shadow-xl: 0 20px 60px rgba(0,0,0,.15); /* Transitions */ --ease-fast: 150ms ease; --ease-normal: 250ms ease; --ease-slow: 400ms ease; /* Layout */ --container-max: 1200px; --header-h: 72px; } /* ---------------------------------------------------------------- 2. RESET & BASE ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; } /* iOS-safe scroll lock gdy mobile menu jest otwarte */ html.menu-open { overflow: hidden; /* iOS wymaga tego na , nie na */ height: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.65; color: var(--clr-text); background-color: var(--clr-bg); overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } address { font-style: normal; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ---------------------------------------------------------------- 3. LAYOUT UTILITIES ---------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-6); } .section { padding-block: var(--sp-24); } .section--dark { background-color: var(--clr-primary); color: var(--clr-bg); } .section--alt { background-color: var(--clr-bg-alt); } /* Section header */ .section__header { text-align: center; max-width: 680px; margin-inline: auto; margin-bottom: var(--sp-16); } .section__header--light .section__title, .section__header--light .section__sub { color: var(--clr-bg); } .section__label { display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--clr-accent); background: var(--clr-accent-soft); padding: var(--sp-1) var(--sp-4); border-radius: var(--radius-full); margin-bottom: var(--sp-3); } .section__label--light { background: rgba(249,115,22,.15); } .section__title { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); font-weight: var(--fw-extrabold); line-height: 1.2; letter-spacing: -.02em; color: var(--clr-primary); margin-bottom: var(--sp-4); } .section__sub { font-size: var(--text-lg); color: var(--clr-text-muted); line-height: 1.7; } /* ---------------------------------------------------------------- 3b. SKIP LINK (accessibility + crawlability) ---------------------------------------------------------------- */ .skip-link { position: fixed; top: var(--sp-4); left: var(--sp-4); z-index: 9999; background: var(--clr-primary); color: #fff; font-size: var(--text-sm); font-weight: var(--fw-semibold); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-md); transform: translateY(calc(-100% - var(--sp-4))); transition: transform var(--ease-fast); text-decoration: none; } .skip-link:focus { transform: translateY(0); outline: 3px solid var(--clr-accent); outline-offset: 2px; } /* ---------------------------------------------------------------- 4. BUTTONS ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); padding: 0.625rem var(--sp-5); border-radius: var(--radius-md); transition: all var(--ease-normal); white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; } .btn--primary { background: var(--clr-accent); color: #fff; box-shadow: 0 4px 14px rgba(249,115,22,.35); } .btn--primary:hover { background: var(--clr-accent-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(249,115,22,.45); } .btn--primary:active { transform: translateY(0); } .btn--outline { background: transparent; color: var(--clr-accent); border: 2px solid var(--clr-accent); } .btn--outline:hover { background: var(--clr-accent); color: #fff; } .btn--ghost { background: rgba(255,255,255,.15); color: #fff; border: 2px solid rgba(255,255,255,.4); backdrop-filter: blur(4px); } .btn--ghost:hover { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.7); } .btn--lg { font-size: var(--text-base); padding: 0.875rem var(--sp-8); border-radius: var(--radius-lg); } .btn--full { width: 100%; } .btn__loader { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; } .btn--loading .btn__loader { display: block; } .btn--loading span { opacity: 0; } /* ---------------------------------------------------------------- 5. HEADER / NAVIGATION ---------------------------------------------------------------- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--ease-normal), box-shadow var(--ease-normal); } .header.scrolled { border-bottom-color: var(--clr-border); box-shadow: var(--shadow-md); } .nav { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-6); } /* Logo */ .nav__logo { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } .nav__logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--clr-accent), #fb923c); border-radius: var(--radius-md); display: grid; place-items: center; color: #fff; font-size: var(--text-lg); flex-shrink: 0; } .nav__logo-text { display: flex; flex-direction: column; line-height: 1.2; } .nav__logo-brand { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--clr-primary); letter-spacing: -.01em; } .nav__logo-brand strong { color: var(--clr-accent); } /* ".pl" – muted, smaller, lighter weight */ .nav__logo-tld { font-size: .75em; font-weight: var(--fw-medium); color: var(--clr-text-light); letter-spacing: 0; } /* footer dark variant */ .nav__logo--footer .nav__logo-tld { color: rgba(255,255,255,.3); } .nav__logo-tagline { font-size: 10px; color: var(--clr-text-muted); letter-spacing: .05em; text-transform: uppercase; } /* Nav links */ .nav__links { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; } .nav__link { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--clr-text-muted); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); transition: color var(--ease-fast), background var(--ease-fast); } .nav__link:hover, .nav__link.active { color: var(--clr-primary); background: var(--clr-bg-alt); } /* Actions */ .nav__actions { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; } .nav__phone { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--clr-primary); transition: color var(--ease-fast); } .nav__phone i { color: var(--clr-accent); } .nav__phone:hover { color: var(--clr-accent); } /* Burger */ .nav__burger { display: none; flex-direction: column; gap: 5px; padding: var(--sp-2); margin-left: auto; } .nav__burger span { display: block; width: 24px; height: 2px; background: var(--clr-primary); border-radius: 2px; transition: all var(--ease-normal); transform-origin: center; } .nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { position: fixed; top: var(--header-h); right: 0; bottom: 0; left: 0; /* dvh fallback: działa poprawnie na iOS Safari */ height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: var(--clr-surface); z-index: 999; display: flex; flex-direction: column; padding: var(--sp-8) var(--sp-6); gap: var(--sp-4); transform: translateX(100%); transition: transform var(--ease-slow) cubic-bezier(.4,0,.2,1); overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-menu.open { transform: translateX(0); } .mobile-menu__links { display: flex; flex-direction: column; gap: var(--sp-1); } .mobile-menu__link { font-size: var(--text-xl); font-weight: var(--fw-semibold); color: var(--clr-primary); padding: var(--sp-3) 0; border-bottom: 1px solid var(--clr-border); transition: color var(--ease-fast); } .mobile-menu__link:hover { color: var(--clr-accent); } .mobile-menu__phone { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--clr-primary); margin-top: var(--sp-4); } .mobile-menu__phone i { color: var(--clr-accent); } .mobile-menu__cta { margin-top: var(--sp-2); font-size: var(--text-lg); padding: var(--sp-4); } /* ---------------------------------------------------------------- 6. HERO SECTION ---------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: var(--header-h); overflow: hidden; } .hero__bg { position: absolute; inset: 0; } .hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(15,23,42,.88) 0%, rgba(30,41,59,.80) 50%, rgba(15,23,42,.70) 100% ); } .hero__content { position: relative; z-index: 1; padding-top: var(--sp-20); padding-bottom: var(--sp-20); max-width: 760px; } .hero__badge { display: inline-flex; align-items: center; gap: var(--sp-2); background: rgba(249,115,22,.2); border: 1px solid rgba(249,115,22,.4); color: #fdba74; font-size: var(--text-sm); font-weight: var(--fw-medium); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full); margin-bottom: var(--sp-6); backdrop-filter: blur(4px); } .hero__badge i { color: var(--clr-accent); } .hero__title { font-size: clamp(var(--text-3xl), 6vw, var(--text-6xl)); font-weight: var(--fw-extrabold); line-height: 1.1; letter-spacing: -.03em; color: #fff; margin-bottom: var(--sp-6); } .hero__title--accent { color: var(--clr-accent); } .hero__sub { font-size: clamp(var(--text-base), 2vw, var(--text-xl)); color: rgba(255,255,255,.75); line-height: 1.7; margin-bottom: var(--sp-10); max-width: 560px; } .hero__sub strong { color: #fff; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-16); } .hero__stats { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; } .hero__stat { display: flex; flex-direction: column; gap: 2px; } .hero__stat strong { font-size: var(--text-3xl); font-weight: var(--fw-extrabold); color: var(--clr-accent); line-height: 1; } .hero__stat span { font-size: var(--text-sm); color: rgba(255,255,255,.6); letter-spacing: .02em; } .hero__stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,.2); } /* Scroll cue */ .hero__scroll { position: absolute; bottom: var(--sp-8); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.5); font-size: var(--text-xl); animation: bounce 2s ease-in-out infinite; transition: color var(--ease-fast); z-index: 1; } .hero__scroll:hover { color: var(--clr-accent); } /* ---------------------------------------------------------------- 7. TRUST / FEATURES ---------------------------------------------------------------- */ .trust { background: var(--clr-surface); padding-block: var(--sp-16); position: relative; z-index: 1; } .trust__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-6); } .trust__card { background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); padding: var(--sp-8) var(--sp-6); transition: transform var(--ease-normal), box-shadow var(--ease-normal), border-color var(--ease-normal); } .trust__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--clr-accent); } .trust__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; font-size: var(--text-xl); margin-bottom: var(--sp-5); flex-shrink: 0; } .trust__icon--1 { background: #fff7ed; color: #f97316; } .trust__icon--2 { background: #eff6ff; color: #3b82f6; } .trust__icon--3 { background: #f0fdf4; color: #22c55e; } .trust__icon--4 { background: #fdf4ff; color: #a855f7; } .trust__card h3 { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--clr-primary); margin-bottom: var(--sp-3); } .trust__card p { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.7; } /* ---------------------------------------------------------------- 8. SERVICES SECTION ---------------------------------------------------------------- */ .services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } .service-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); overflow: hidden; transition: transform var(--ease-normal), box-shadow var(--ease-normal), border-color var(--ease-normal); display: flex; flex-direction: column; } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; } /* Coloured icon header area */ .service-card__header { position: relative; height: 140px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .service-card__header--blue { background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%); } .service-card__header--orange { background: linear-gradient(135deg, #f97316 0%, #dc2626 100%); } .service-card__header--green { background: linear-gradient(135deg, #10b981 0%, #0891b2 100%); } .service-card__header--yellow { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .service-card__header--purple { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); } /* Subtle pattern overlay on header */ .service-card__header::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 70% 30%, rgba(255,255,255,.15) 0%, transparent 60%); } .service-card__icon-wrap { width: 64px; height: 64px; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.3); border-radius: var(--radius-xl); display: grid; place-items: center; color: #fff; font-size: 1.625rem; position: relative; z-index: 1; backdrop-filter: blur(4px); } .service-card__badge { position: absolute; top: var(--sp-3); right: var(--sp-3); background: rgba(255,255,255,.9); color: var(--clr-accent); font-size: 10px; font-weight: var(--fw-semibold); padding: 2px var(--sp-2); border-radius: var(--radius-full); letter-spacing: .04em; z-index: 1; } .service-card__badge--green { color: #059669; } .service-card__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); display: flex; flex-direction: column; flex: 1; } .service-card__body h3 { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--clr-primary); margin-bottom: var(--sp-2); line-height: 1.3; } .service-card__body p { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.65; margin-bottom: var(--sp-4); } .service-card__list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); flex: 1; } .service-card__list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--text-xs); color: var(--clr-text); line-height: 1.5; } .service-card__list i { color: #22c55e; font-size: 10px; flex-shrink: 0; margin-top: 3px; } .service-card__cta { font-size: var(--text-xs); padding: 0.5rem var(--sp-4); align-self: flex-start; } /* ---------------------------------------------------------------- 9. GALLERY SECTION ---------------------------------------------------------------- */ .gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .gallery__item { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ease-slow); } .gallery__item:hover img { transform: scale(1.08); } .gallery__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(15,23,42,.85) 0%, rgba(15,23,42,.3) 60%, transparent 100% ); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); opacity: 0; transition: opacity var(--ease-normal); } .gallery__item:hover .gallery__overlay { opacity: 1; } .gallery__overlay i { font-size: var(--text-3xl); color: var(--clr-accent); } .gallery__overlay span { position: absolute; bottom: var(--sp-4); left: var(--sp-4); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: #fff; } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.95); z-index: 2000; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity var(--ease-normal); } .lightbox.open { opacity: 1; pointer-events: all; } .lightbox__content { max-width: min(90vw, 1100px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); } .lightbox__img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); transform: scale(.9); transition: transform var(--ease-slow) cubic-bezier(.34,1.56,.64,1); } .lightbox.open .lightbox__img { transform: scale(1); } .lightbox__caption { color: rgba(255,255,255,.7); font-size: var(--text-sm); font-weight: var(--fw-medium); letter-spacing: .03em; } .lightbox__close { position: fixed; top: var(--sp-6); right: var(--sp-6); width: 44px; height: 44px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; font-size: var(--text-xl); display: grid; place-items: center; transition: all var(--ease-fast); z-index: 2001; } .lightbox__close:hover { background: rgba(255,255,255,.2); transform: scale(1.1); } .lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; font-size: var(--text-xl); display: grid; place-items: center; transition: all var(--ease-fast); z-index: 2001; } .lightbox__nav:hover { background: var(--clr-accent); border-color: var(--clr-accent); } .lightbox__nav--prev { left: var(--sp-6); } .lightbox__nav--next { right: var(--sp-6); } /* ---------------------------------------------------------------- 10. ABOUT SECTION ---------------------------------------------------------------- */ .about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; } .about__visual { position: relative; } /* Decorative stats panel — replaces photo */ .about__panel { background: linear-gradient(145deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%); border-radius: var(--radius-xl); padding: var(--sp-10) var(--sp-8); display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); box-shadow: var(--shadow-xl); position: relative; overflow: hidden; } /* Subtle radial glow */ .about__panel::before { content: ''; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(249,115,22,.2) 0%, transparent 70%); pointer-events: none; } .about__panel-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--clr-accent), #fb923c); border-radius: var(--radius-xl); display: grid; place-items: center; font-size: 2.25rem; color: #fff; box-shadow: 0 8px 32px rgba(249,115,22,.4); position: relative; } .about__panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); width: 100%; } .about__panel-stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-4); text-align: center; } .about__panel-stat strong { display: block; font-size: var(--text-3xl); font-weight: var(--fw-extrabold); color: var(--clr-accent); line-height: 1; margin-bottom: var(--sp-1); } .about__panel-stat span { font-size: var(--text-xs); color: rgba(255,255,255,.5); letter-spacing: .04em; text-transform: uppercase; } .about__panel-certs { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; } .about__panel-cert { display: flex; align-items: center; gap: var(--sp-3); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); } .about__panel-cert i { color: var(--clr-accent); font-size: var(--text-base); width: 20px; text-align: center; flex-shrink: 0; } .about__panel-cert span { font-size: var(--text-sm); font-weight: var(--fw-medium); color: rgba(255,255,255,.8); } .about__content .section__label { display: inline-block; margin-bottom: var(--sp-3); } .about__lead { font-size: var(--text-lg); font-weight: var(--fw-medium); color: var(--clr-primary); line-height: 1.7; margin-bottom: var(--sp-4); margin-top: var(--sp-4); } .about__content > p { color: var(--clr-text-muted); line-height: 1.8; margin-bottom: var(--sp-8); } .about__values { display: flex; flex-direction: column; gap: var(--sp-5); margin-bottom: var(--sp-10); } .about__value { display: flex; align-items: flex-start; gap: var(--sp-4); } .about__value > i { font-size: var(--text-xl); color: var(--clr-accent); margin-top: 2px; flex-shrink: 0; } .about__value strong { display: block; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--clr-primary); margin-bottom: var(--sp-1); } .about__value p { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.6; } /* ---------------------------------------------------------------- 11. CONTACT SECTION ---------------------------------------------------------------- */ .contact__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-8); align-items: start; } .contact__info-card { background: var(--clr-primary); color: #fff; border-radius: var(--radius-xl); padding: var(--sp-8); position: sticky; top: calc(var(--header-h) + var(--sp-6)); } .contact__info-card h3 { font-size: var(--text-xl); font-weight: var(--fw-bold); margin-bottom: var(--sp-8); padding-bottom: var(--sp-6); border-bottom: 1px solid rgba(255,255,255,.1); } .contact__info-item { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-6); } .contact__info-icon { width: 40px; height: 40px; background: rgba(249,115,22,.2); border-radius: var(--radius-md); display: grid; place-items: center; color: var(--clr-accent); flex-shrink: 0; } .contact__info-item > div > span { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.45); margin-bottom: var(--sp-1); } .contact__info-item a, .contact__info-item address, .contact__info-item p { font-size: var(--text-sm); font-weight: var(--fw-medium); color: rgba(255,255,255,.9); line-height: 1.6; } .contact__info-item a:hover { color: var(--clr-accent); } /* Form */ .contact__form-wrap { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); padding: var(--sp-10); box-shadow: var(--shadow-sm); } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .form__group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); } .form__group--consent { flex-direction: row; align-items: flex-start; gap: var(--sp-3); } .form__group--consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--clr-accent); cursor: pointer; } .form__group--consent label { font-size: var(--text-xs); color: var(--clr-text-muted); line-height: 1.6; cursor: pointer; } .form__group label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--clr-primary); } .required { color: var(--clr-accent); } .form__group input, .form__group textarea { border: 1.5px solid var(--clr-border); border-radius: var(--radius-md); padding: 0.75rem var(--sp-4); font-size: var(--text-sm); color: var(--clr-text); background: var(--clr-bg); transition: border-color var(--ease-fast), box-shadow var(--ease-fast); outline: none; resize: vertical; } .form__group input:focus, .form__group textarea:focus { border-color: var(--clr-accent); box-shadow: 0 0 0 3px rgba(249,115,22,.12); background: var(--clr-surface); } .form__group input.invalid, .form__group textarea.invalid, .form__group select.invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); } .form__select-wrap { position: relative; } .form__select-wrap select { width: 100%; border: 1.5px solid var(--clr-border); border-radius: var(--radius-md); padding: 0.75rem var(--sp-10) 0.75rem var(--sp-4); font-size: var(--text-sm); color: var(--clr-text); background: var(--clr-bg); appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; transition: border-color var(--ease-fast), box-shadow var(--ease-fast); } .form__select-wrap select:focus { border-color: var(--clr-accent); box-shadow: 0 0 0 3px rgba(249,115,22,.12); background: var(--clr-surface); } .form__select-wrap > i { position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--clr-text-muted); pointer-events: none; font-size: var(--text-sm); } .form__error { font-size: var(--text-xs); color: #ef4444; font-weight: var(--fw-medium); min-height: 1em; } /* ---------------------------------------------------------------- 12. FOOTER ---------------------------------------------------------------- */ .footer { background: var(--clr-primary-dark); color: rgba(255,255,255,.7); padding-top: var(--sp-20); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--sp-12); margin-bottom: var(--sp-16); } .nav__logo--footer .nav__logo-brand, .nav__logo--footer .nav__logo-tagline { color: rgba(255,255,255,.9); } .nav__logo--footer .nav__logo-brand strong { color: var(--clr-accent); } .footer__brand-desc { font-size: var(--text-sm); line-height: 1.7; color: rgba(255,255,255,.5); margin-top: var(--sp-4); margin-bottom: var(--sp-6); } .footer__social { display: flex; gap: var(--sp-3); } .footer__social-link { width: 38px; height: 38px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); display: grid; place-items: center; color: rgba(255,255,255,.6); font-size: var(--text-sm); transition: all var(--ease-normal); } .footer__social-link:hover { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; transform: translateY(-2px); } .footer__col h4 { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: #fff; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-5); } .footer__col ul { display: flex; flex-direction: column; gap: var(--sp-3); } .footer__col a { font-size: var(--text-sm); color: rgba(255,255,255,.5); transition: color var(--ease-fast); } .footer__col a:hover { color: var(--clr-accent); } .footer__contact { display: flex; flex-direction: column; gap: var(--sp-4); } .footer__contact li { display: flex; align-items: flex-start; gap: var(--sp-3); } .footer__contact i { color: var(--clr-accent); font-size: var(--text-sm); margin-top: 3px; flex-shrink: 0; } .footer__contact a, .footer__contact span { font-size: var(--text-sm); color: rgba(255,255,255,.5); line-height: 1.5; } .footer__contact a:hover { color: var(--clr-accent); } .footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-block: var(--sp-6); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); } .footer__bottom p { font-size: var(--text-sm); color: rgba(255,255,255,.35); } .footer__bottom .fa-heart { color: var(--clr-accent); } /* ---------------------------------------------------------------- 13. TOAST NOTIFICATION ---------------------------------------------------------------- */ .toast { position: fixed; bottom: var(--sp-8); right: var(--sp-8); background: var(--clr-surface); border: 1px solid #dcfce7; border-left: 4px solid #22c55e; border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); box-shadow: var(--shadow-xl); z-index: 3000; transform: translateX(calc(100% + var(--sp-8))); opacity: 0; transition: transform var(--ease-slow) cubic-bezier(.34,1.56,.64,1), opacity var(--ease-slow); max-width: 360px; } .toast.show { transform: translateX(0); opacity: 1; } .toast__icon { font-size: var(--text-2xl); color: #22c55e; flex-shrink: 0; } .toast__body strong { display: block; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--clr-primary); margin-bottom: 2px; } .toast__body p { font-size: var(--text-xs); color: var(--clr-text-muted); } .toast__close { margin-left: auto; color: var(--clr-text-muted); font-size: var(--text-lg); flex-shrink: 0; padding: var(--sp-1); transition: color var(--ease-fast); } .toast__close:hover { color: var(--clr-primary); } /* ---------------------------------------------------------------- 13b. FAQ SECTION ---------------------------------------------------------------- */ .faq__grid { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-3); } .faq__item { background: var(--clr-surface); border: 1.5px solid var(--clr-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--ease-normal), box-shadow var(--ease-normal); } .faq__item:has(.faq__question[aria-expanded="true"]) { border-color: var(--clr-accent); box-shadow: 0 4px 20px rgba(249,115,22,.1); } .faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); text-align: left; background: none; cursor: pointer; transition: background var(--ease-fast); } .faq__question:hover { background: var(--clr-bg); } .faq__question span { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--clr-primary); line-height: 1.4; } .faq__question i { color: var(--clr-accent); font-size: var(--text-sm); flex-shrink: 0; transition: transform var(--ease-normal); } .faq__question[aria-expanded="true"] i { transform: rotate(180deg); } .faq__answer { padding: 0 var(--sp-6) var(--sp-5); border-top: 1px solid var(--clr-border); animation: faqOpen var(--ease-normal) forwards; } .faq__answer p { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.75; padding-top: var(--sp-4); } .faq__answer a { color: var(--clr-accent); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; } @keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------------- 13c. COOKIE CONSENT BANNER ---------------------------------------------------------------- */ .cookie { position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%) translateY(calc(100% + var(--sp-8))); width: min(760px, calc(100vw - var(--sp-8))); z-index: 2500; transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; opacity: 0; } .cookie.visible { transform: translateX(-50%) translateY(0); opacity: 1; } .cookie__inner { background: var(--clr-primary-dark); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-xl); padding: var(--sp-5) var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(249,115,22,.15); } .cookie__icon { font-size: 1.75rem; color: var(--clr-accent); flex-shrink: 0; } .cookie__text { flex: 1; min-width: 0; } .cookie__text strong { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: #fff; margin-bottom: var(--sp-1); } .cookie__text p { font-size: var(--text-xs); color: rgba(255,255,255,.55); line-height: 1.6; } .cookie__link { color: var(--clr-accent); text-decoration: underline; text-underline-offset: 2px; } .cookie__actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } .cookie__accept { font-size: var(--text-xs); padding: 0.5rem var(--sp-5); } .cookie__decline { font-size: var(--text-xs); font-weight: var(--fw-medium); color: rgba(255,255,255,.45); padding: 0.5rem var(--sp-3); border-radius: var(--radius-md); transition: color var(--ease-fast); white-space: nowrap; } .cookie__decline:hover { color: rgba(255,255,255,.8); } @media (max-width: 640px) { .cookie__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); } .cookie__actions { width: 100%; flex-direction: row-reverse; justify-content: flex-start; } .cookie__accept { flex: 1; } } /* ---------------------------------------------------------------- 14. ANIMATIONS ---------------------------------------------------------------- */ @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } @keyframes spin { to { transform: rotate(360deg); } } /* Fade-in on scroll */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 300ms; } .reveal-delay-4 { transition-delay: 400ms; } /* ---------------------------------------------------------------- 15. RESPONSIVE — TABLETS (max 1024px) ---------------------------------------------------------------- */ @media (max-width: 1024px) { /* Gallery → 3 columns on tablet */ .gallery__grid { grid-template-columns: repeat(3, 1fr); } /* Services → 2 columns on tablet */ .services__grid { grid-template-columns: repeat(2, 1fr); } .about__grid { grid-template-columns: 1fr; gap: var(--sp-12); } .about__visual { max-width: 520px; margin-inline: auto; } .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .footer__brand { grid-column: 1 / -1; } } /* ---------------------------------------------------------------- 16. RESPONSIVE — MOBILE (max 768px) ---------------------------------------------------------------- */ @media (max-width: 768px) { :root { --header-h: 64px; } .section { padding-block: var(--sp-16); } /* Nav */ .nav__links { display: none; } .nav__actions { display: none; } .nav__burger { display: flex; } /* Hero */ .hero__stats { gap: var(--sp-5); } .hero__stat-divider { height: 28px; } .hero__stat strong { font-size: var(--text-2xl); } /* Services → 1 column on mobile */ .services__grid { grid-template-columns: 1fr; } /* Gallery → 2 columns on mobile */ .gallery__grid { grid-template-columns: repeat(2, 1fr); } /* Contact */ .contact__grid { grid-template-columns: 1fr; } .contact__info-card { position: static; } .contact__form-wrap { padding: var(--sp-6); } .form__row { grid-template-columns: 1fr; gap: 0; } /* Footer */ .footer__grid { grid-template-columns: 1fr; gap: var(--sp-8); } .footer__brand { grid-column: auto; } .footer__bottom { flex-direction: column; text-align: center; } /* Toast */ .toast { bottom: var(--sp-4); right: var(--sp-4); left: var(--sp-4); transform: translateY(calc(100% + var(--sp-8))); } .toast.show { transform: translateY(0); } /* Lightbox nav */ .lightbox__nav { width: 40px; height: 40px; } .lightbox__nav--prev { left: var(--sp-3); } .lightbox__nav--next { right: var(--sp-3); } } /* ---------------------------------------------------------------- 17. RESPONSIVE — SMALL PHONES (max 480px) ---------------------------------------------------------------- */ @media (max-width: 480px) { .gallery__grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } .hero__actions { flex-direction: column; } .hero__actions .btn { width: 100%; } .trust__grid { grid-template-columns: 1fr; } }