/* Theme Name: Prototip G Auto Theme URI: https://prototipauto.com/ Author: Raiseco Technologies Author URI: https://raiseco.ro/ Description: Temă WordPress dedicată pentru PROTOTIP G AUTO SRL — prototipare componente auto. Design dark, tehnic, bilingv RO/EN (compatibil Polylang), formular de contact nativ. Portare fidelă a mockup-ului aprobat. Version: 1.5.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: prototip-g-auto Tags: business, one-column, custom-menu, custom-logo, translation-ready, footer-widgets */ /* ============================================================ NOTĂ DE PORTARE (Raiseco) Fișierul de mai jos este CSS-ul din mockup, integral și nemodificat, cu excepția blocului "ADAPTĂRI WORDPRESS" de la finalul fișierului, care: - anulează comutarea SPA .page{display:none} - mapează starea activă a meniului pe clasele WordPress (.current-menu-item / .current_page_item) - adaugă clasele utilitare WP (aliniere, screen-reader-text) ============================================================ */ /* ============================================================ BRAND TOKENS — PROTOTIP G AUTO ============================================================ */ :root{ --c-bg: #0A0E1A; /* deep carbon black */ --c-bg-2: #111623; /* panel */ --c-bg-3: #1A2030; /* card */ --c-line: #2A3140; /* hairline */ --c-text: #E6EAF0; /* near white */ --c-text-2: #9BA3B4; /* muted */ --c-text-3: #5F687A; /* very muted */ --c-chrome: #C0C5CC; /* silver */ --c-accent: #00A5E5; /* electric blue (logo) */ --c-accent-2: #4DC4FF; /* bright cyan */ --c-accent-glow: rgba(0,165,229,.35); --c-success: #2BD17E; --c-danger: #FF4E4E; --font-display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.6); --shadow-glow: 0 0 30px var(--c-accent-glow); --container: 1240px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font-body); background:var(--c-bg); color:var(--c-text); font-size:16px; line-height:1.6; overflow-x:hidden; } img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none;transition:color .2s} a:hover{color:var(--c-accent)} h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:.01em} h1{font-size:clamp(2.4rem,5vw,4.2rem);text-transform:uppercase;letter-spacing:.04em} h2{font-size:clamp(1.8rem,3.2vw,2.6rem);text-transform:uppercase;letter-spacing:.03em} h3{font-size:1.4rem} h4{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-accent-2)} .container{max-width:var(--container);margin:0 auto;padding:0 24px} /* tiny chrome divider used as a brand motif */ .chrome-line{ width:60px;height:3px; background:linear-gradient(90deg,var(--c-accent),transparent); margin:18px 0 24px; } /* ============================================================ HEADER + NAV ============================================================ */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(10,14,26,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--c-line); } .nav{ display:flex;align-items:center;justify-content:space-between; padding:14px 24px;max-width:var(--container);margin:0 auto;gap:16px; } .nav-logo{display:flex;align-items:center;gap:12px} .nav-logo img{height:48px;width:auto} .nav-logo .nav-brand{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase} .nav-logo .nav-brand small{display:block;font-size:.65rem;color:var(--c-accent);letter-spacing:.2em;font-weight:500} .nav-menu{display:flex;align-items:center;gap:28px} .nav-menu a{ font-family:var(--font-display); font-weight:600;font-size:.95rem; text-transform:uppercase;letter-spacing:.08em; color:var(--c-text-2); padding:8px 2px; position:relative; } .nav-menu a.active,.nav-menu a:hover{color:var(--c-text)} .nav-menu a.active::after{ content:'';position:absolute;left:0;right:0;bottom:-4px; height:2px;background:var(--c-accent); } .nav-right{display:flex;align-items:center;gap:14px} .lang-toggle{ display:inline-flex;border:1px solid var(--c-line);border-radius:var(--r-sm); overflow:hidden;background:var(--c-bg-2); } .lang-toggle button{ background:none;border:0;color:var(--c-text-2); font-family:var(--font-display);font-weight:600;font-size:.8rem; padding:6px 12px;cursor:pointer;letter-spacing:.05em; } .lang-toggle button.active{background:var(--c-accent);color:#000} .btn{ display:inline-block;padding:12px 22px; font-family:var(--font-display);font-weight:600;font-size:.95rem; text-transform:uppercase;letter-spacing:.08em; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;transition:all .2s; } .btn-primary{background:var(--c-accent);color:#000;box-shadow:var(--shadow-glow)} .btn-primary:hover{background:var(--c-accent-2);color:#000;transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--c-text);border-color:var(--c-line)} .btn-ghost:hover{border-color:var(--c-accent);color:var(--c-accent)} .mobile-toggle{display:none;background:none;border:0;color:var(--c-text);font-size:1.5rem;cursor:pointer} /* ============================================================ PAGE SWITCHER (single-file demo simulating multi-page) ============================================================ */ .page{display:none} .page.active{display:block;animation:fadeIn .35s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ============================================================ HERO (Home) ============================================================ */ .hero{ position:relative; min-height:88vh; display:flex;align-items:center; background: radial-gradient(ellipse at 50% 30%, rgba(0,165,229,.18), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(77,196,255,.08), transparent 60%), linear-gradient(180deg, #0A0E1A 0%, #060812 100%); overflow:hidden; } .hero::before{ content:'';position:absolute;inset:0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%); -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%); } .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;width:100%} .hero-eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-display);font-weight:600;font-size:.85rem; text-transform:uppercase;letter-spacing:.2em; color:var(--c-accent);margin-bottom:18px; } .hero-eyebrow::before{content:'';width:32px;height:1px;background:var(--c-accent)} .hero h1 .accent{color:var(--c-accent);display:inline} .hero p.lead{font-size:1.15rem;color:var(--c-text-2);max-width:560px;margin:24px 0 36px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} .hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:420px} .hero-visual img{ max-height:520px;width:auto; filter:drop-shadow(0 30px 60px rgba(0,165,229,.25)); animation:float 6s ease-in-out infinite; } @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* stat strip below hero */ .stat-strip{ background:var(--c-bg-2); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); } .stat-strip-inner{ display:grid;grid-template-columns:repeat(4,1fr); padding:36px 24px;max-width:var(--container);margin:0 auto;gap:24px; } .stat{text-align:center;border-right:1px solid var(--c-line);padding:0 12px} .stat:last-child{border-right:0} .stat-num{font-family:var(--font-display);font-weight:700;font-size:2.8rem;color:var(--c-accent);line-height:1} .stat-lbl{font-size:.85rem;color:var(--c-text-2);text-transform:uppercase;letter-spacing:.12em;margin-top:8px} /* ============================================================ SECTIONS ============================================================ */ section{padding:96px 0} section.alt{background:var(--c-bg-2)} .section-head{text-align:center;max-width:760px;margin:0 auto 56px} .section-head h4{margin-bottom:14px} .section-head .chrome-line{margin:18px auto 24px} .section-head p{color:var(--c-text-2);font-size:1.05rem} /* Capabilities grid */ .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .cap{ background:linear-gradient(180deg, var(--c-bg-3) 0%, var(--c-bg-2) 100%); border:1px solid var(--c-line); border-radius:var(--r-md); padding:28px; transition:all .25s; position:relative;overflow:hidden; } .cap::before{ content:'';position:absolute;inset:0; background:linear-gradient(135deg,var(--c-accent),transparent 60%); opacity:0;transition:opacity .25s; border-radius:var(--r-md); pointer-events:none; } .cap:hover{transform:translateY(-4px);border-color:var(--c-accent);box-shadow:var(--shadow-md)} .cap:hover::before{opacity:.06} .cap-icon{ width:52px;height:52px;display:flex;align-items:center;justify-content:center; background:rgba(0,165,229,.1);border:1px solid var(--c-accent); border-radius:var(--r-sm); color:var(--c-accent);font-family:var(--font-display);font-weight:700;font-size:1.2rem; margin-bottom:18px; } .cap h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem;margin-bottom:10px} .cap p{color:var(--c-text-2);font-size:.95rem} /* CTA Banner */ .cta-banner{ background: linear-gradient(135deg, rgba(0,165,229,.12), rgba(0,165,229,0)), var(--c-bg-2); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding:64px 0; } .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap} .cta-inner h2{margin-bottom:8px} .cta-inner p{color:var(--c-text-2)} /* ============================================================ ABOUT ============================================================ */ .about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center} .about-img{position:relative} .about-img img{border-radius:var(--r-md);box-shadow:var(--shadow-lg)} .about-img::after{ content:'';position:absolute;inset:auto -16px -16px auto;width:60%;height:60%; border:2px solid var(--c-accent);border-radius:var(--r-md);z-index:-1; } .about-text h2{margin-bottom:18px} .about-text p{color:var(--c-text-2);margin-bottom:16px} .about-values{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px} .value-item{padding:18px;background:var(--c-bg-3);border-radius:var(--r-sm);border-left:3px solid var(--c-accent)} .value-item h4{margin-bottom:6px;font-size:.85rem} .value-item p{font-size:.9rem;color:var(--c-text-2);margin:0} /* ============================================================ SERVICES PAGE ============================================================ */ .dept-row{ display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; padding:48px 0;border-bottom:1px solid var(--c-line); } .dept-row:last-child{border-bottom:0} .dept-row.reverse{direction:rtl} .dept-row.reverse > *{direction:ltr} .dept-img img{border-radius:var(--r-md);box-shadow:var(--shadow-md)} .dept-text h2{font-size:1.6rem;text-transform:uppercase;letter-spacing:.04em;color:var(--c-text);margin-bottom:14px} .dept-text h4{margin-bottom:14px} .dept-text ul{list-style:none;margin-top:18px} .dept-text li{ padding:8px 0 8px 26px;color:var(--c-text-2);position:relative; border-bottom:1px dashed var(--c-line); } .dept-text li:last-child{border-bottom:0} .dept-text li::before{ content:'▸';position:absolute;left:0;color:var(--c-accent);font-weight:700; } /* ============================================================ CONTACT ============================================================ */ .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start} .contact-info{background:var(--c-bg-3);border:1px solid var(--c-line);border-radius:var(--r-md);padding:36px} .contact-info h3{margin-bottom:20px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em} .contact-block{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px} .contact-icon{ width:42px;height:42px;flex-shrink:0; background:rgba(0,165,229,.1);border:1px solid var(--c-accent); border-radius:var(--r-sm);color:var(--c-accent); display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700; } .contact-block strong{display:block;font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:var(--c-text);margin-bottom:4px} .contact-block span{color:var(--c-text-2);font-size:.95rem;line-height:1.5} .contact-block a{color:var(--c-accent-2)} .contact-form{background:var(--c-bg-3);border:1px solid var(--c-line);border-radius:var(--r-md);padding:36px} .contact-form h3{margin-bottom:8px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em} .contact-form > p{color:var(--c-text-2);margin-bottom:24px;font-size:.95rem} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-field{margin-bottom:18px} .form-field label{display:block;font-family:var(--font-display);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-2);margin-bottom:8px} .form-field input,.form-field textarea,.form-field select{ width:100%;padding:12px 14px; background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r-sm); color:var(--c-text);font-family:var(--font-body);font-size:.95rem; transition:border-color .2s, box-shadow .2s; } .form-field input:focus,.form-field textarea:focus,.form-field select:focus{ outline:0;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,165,229,.15); } .form-field textarea{min-height:130px;resize:vertical;font-family:var(--font-body)} .form-gdpr{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--c-text-2);margin:16px 0 24px} .form-gdpr input{margin-top:3px;flex-shrink:0} .form-gdpr a{color:var(--c-accent-2);text-decoration:underline} /* ============================================================ FOOTER ============================================================ */ footer{background:#060812;border-top:1px solid var(--c-line);padding:64px 0 24px;color:var(--c-text-2);font-size:.9rem} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px} .footer-brand img{height:64px;margin-bottom:18px} .footer-brand p{font-size:.9rem;max-width:340px} .footer-col h4{margin-bottom:18px;color:var(--c-text);font-size:.85rem} .footer-col ul{list-style:none} .footer-col li{padding:5px 0} .footer-col a:hover{color:var(--c-accent)} .footer-bottom{ display:flex;justify-content:space-between;align-items:center; padding-top:24px;border-top:1px solid var(--c-line);font-size:.85rem; flex-wrap:wrap;gap:12px; } .footer-bottom .legal-links{display:flex;gap:18px} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px){ .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--c-bg-2);border-top:1px solid var(--c-line);flex-direction:column;padding:18px 24px;gap:6px;align-items:flex-start} .nav-menu.open{display:flex} .nav-menu a{padding:12px 0;width:100%;border-bottom:1px solid var(--c-line)} .mobile-toggle{display:block} .hero{min-height:auto;padding:80px 0 60px} .hero-inner{grid-template-columns:1fr;text-align:center} .hero-visual{order:-1;min-height:auto;margin-bottom:24px} .hero-visual img{max-height:280px} .hero p.lead{margin:24px auto 36px} .hero-actions{justify-content:center} .stat-strip-inner{grid-template-columns:repeat(2,1fr);gap:24px;padding:24px} .stat{border-right:0;border-bottom:1px solid var(--c-line);padding-bottom:24px} .stat:nth-last-child(-n+2){border-bottom:0;padding-bottom:0} .cap-grid{grid-template-columns:1fr;gap:16px} .about-grid{grid-template-columns:1fr;gap:36px} .about-values{grid-template-columns:1fr} .dept-row{grid-template-columns:1fr;gap:24px;padding:32px 0} .dept-row.reverse{direction:ltr} .contact-grid{grid-template-columns:1fr;gap:24px} .form-row{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .cta-inner{flex-direction:column;text-align:center} section{padding:64px 0} } @media (max-width:520px){ .footer-grid{grid-template-columns:1fr} h1{font-size:2rem} h2{font-size:1.6rem} } /* ============================================================ ADAPTĂRI WORDPRESS (Raiseco) ============================================================ */ /* Mockup-ul era un SPA cu o singură pagină în care secțiunile .page erau ascunse/afișate din JS. În WordPress fiecare pagină are propriul template, deci conținutul trebuie mereu vizibil. */ .page{display:block} .page.active{animation:none} /* Starea activă a meniului: în mockup era clasa .active pe , în WordPress wp_nav_menu adaugă clase pe
  • . Le tratăm la fel. */ .nav-menu li.current-menu-item > a, .nav-menu li.current_page_item > a, .nav-menu li.current-menu-ancestor > a{color:var(--c-text)} .nav-menu li.current-menu-item > a::after, .nav-menu li.current_page_item > a::after{ content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px; background:var(--c-accent);box-shadow:0 0 8px var(--c-accent); } .nav-menu li{position:relative;list-style:none} .nav-menu ul{display:flex;align-items:center;gap:28px;margin:0;padding:0;list-style:none} /* Notificări formular contact */ .form-notice{border-radius:var(--r-md);padding:14px 18px;margin-bottom:22px;font-size:.95rem;border:1px solid} .form-notice.ok{background:rgba(43,209,126,.08);border-color:var(--c-success);color:var(--c-success)} .form-notice.err{background:rgba(255,78,78,.08);border-color:var(--c-danger);color:var(--c-danger)} /* Honeypot anti-spam — invizibil pentru utilizatori, capcană pentru boți */ .pga-hp-field{position:absolute!important;left:-9999px!important;top:-9999px!important;height:0;width:0;overflow:hidden} /* Clase utilitare WordPress standard */ .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important} .alignwide{max-width:1240px;margin-left:auto;margin-right:auto} .aligncenter{display:block;margin-left:auto;margin-right:auto} .wp-caption{max-width:100%} .wp-caption-text{font-size:.85rem;color:var(--c-text-2)} /* Meniu WordPress (wp_nav_menu →