/* ============================================================ TopRent — shadcn/ui skin Strat 1: design tokens + bază + componente generice Strat 2 (MAPPING): selectorii reali ai platformei — de completat Se încarcă DUPĂ CSS-ul existent al platformei. ============================================================ */ /* ------------------------------------------------------------ 0. Font (opțiune A — Google Fonts; opțiune B — self-hosted) Dacă self-host: mută @font-face pe cdn.extensive.digital ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ------------------------------------------------------------ 1. Design tokens — shadcn "zinc" (light) Valorile sunt cele oficiale din tema shadcn/ui. Pentru accent galben TopRent: vezi blocul comentat de mai jos. ------------------------------------------------------------ */ :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.625rem; /* 10px — valoarea curentă shadcn */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Umbre shadcn */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } /* --- Variantă accent galben TopRent (decomentează dacă păstrăm galbenul) :root { --primary: 45 93% 47%; /* galben saturat, ajustăm după logo *​/ --primary-foreground: 240 10% 3.9%; /* text închis pe galben *​/ --ring: 45 93% 47%; } --- */ /* --- Dark mode (opțional — se activează cu ) .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } --- */ /* ------------------------------------------------------------ 2. Bază — tipografie și elemente ------------------------------------------------------------ */ body { font-family: var(--font-sans); background-color: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; font-size: 16px; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: hsl(var(--foreground)); font-weight: 600; letter-spacing: -0.025em; /* tracking-tight, semnătura shadcn */ line-height: 1.2; } h1 { font-size: 2.25rem; font-weight: 700; } h2 { font-size: 1.875rem; } h3 { font-size: 1.25rem; } p { color: hsl(var(--foreground)); } a { color: inherit; text-decoration: none; transition: color .15s ease; } a:hover { color: hsl(var(--primary)); } hr { border: 0; border-top: 1px solid hsl(var(--border)); } ::selection { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } /* Focus vizibil, stil shadcn (ring) */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: calc(var(--radius) - 4px); } /* ------------------------------------------------------------ 3. Form controls — input / select / textarea Element-level: prinde controalele indiferent de clase. ------------------------------------------------------------ */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], select, textarea { height: 2.5rem; /* h-10 */ width: 100%; padding: 0.5rem 0.75rem; font-family: var(--font-sans); font-size: 0.875rem; color: hsl(var(--foreground)); background-color: hsl(var(--background)); border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; } textarea { height: auto; min-height: 5rem; resize: vertical; } input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); } input:focus, select:focus, textarea:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 0; border-color: transparent; } input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; } /* Checkbox / radio */ input[type="checkbox"], input[type="radio"] { height: 1rem; width: 1rem; accent-color: hsl(var(--primary)); } label { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); } /* ------------------------------------------------------------ 4. Componente generice (clase utilitare stil shadcn) Pot fi aplicate direct în markup sau folosite ca @extend mental pentru mapping-ul de mai jos. ------------------------------------------------------------ */ /* Button — base */ .ui-btn, button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; white-space: nowrap; border: 1px solid transparent; border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-sm); } .ui-btn:hover, button[type="submit"]:hover { background-color: hsl(var(--primary) / 0.9); color: hsl(var(--primary-foreground)); } /* Button — variante */ .ui-btn--secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .ui-btn--secondary:hover { background-color: hsl(var(--secondary) / 0.8); } .ui-btn--outline { background-color: hsl(var(--background)); color: hsl(var(--foreground)); border-color: hsl(var(--input)); } .ui-btn--outline:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .ui-btn--ghost { background-color: transparent; color: hsl(var(--foreground)); box-shadow: none; } .ui-btn--ghost:hover { background-color: hsl(var(--accent)); } .ui-btn--destructive { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .ui-btn--lg { height: 2.75rem; padding: 0 2rem; } .ui-btn--sm { height: 2.25rem; padding: 0 0.75rem; font-size: 0.8125rem; } /* Card */ .ui-card { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, border-color .2s ease; } .ui-card:hover { box-shadow: var(--shadow-md); } /* Badge */ .ui-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 600; line-height: 1.4; border: 1px solid transparent; border-radius: 9999px; background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .ui-badge--secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .ui-badge--outline { background-color: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); } .ui-badge--destructive { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } /* Separator */ .ui-separator { height: 1px; width: 100%; background-color: hsl(var(--border)); border: 0; } /* Tabs (stil "pills" shadcn) */ .ui-tabs { display: inline-flex; align-items: center; padding: 0.25rem; gap: 0.125rem; background-color: hsl(var(--muted)); border-radius: calc(var(--radius) - 2px); } .ui-tabs__item { padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); border-radius: calc(var(--radius) - 4px); cursor: pointer; transition: background-color .15s ease, color .15s ease; } .ui-tabs__item:hover { color: hsl(var(--foreground)); } .ui-tabs__item.is-active, .ui-tabs__item.active { background-color: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); } /* Accordion (FAQ) */ .ui-accordion__item { border-bottom: 1px solid hsl(var(--border)); } .ui-accordion__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 0; font-size: 0.9375rem; font-weight: 500; color: hsl(var(--foreground)); background: transparent; border: 0; cursor: pointer; text-align: left; } .ui-accordion__trigger:hover { text-decoration: underline; } .ui-accordion__trigger img, .ui-accordion__trigger svg { transition: transform .2s ease; } .ui-accordion__item.is-open .ui-accordion__trigger img, .ui-accordion__item.is-open .ui-accordion__trigger svg { transform: rotate(180deg); } .ui-accordion__content { padding-bottom: 1rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); } /* ============================================================ 5. MAPPING — selectorii reali ai platformei TopRent/CrazyRent TODO: înlocuim .TODO-* cu clasele din view-source. Structura de mai jos e pregătită pe componentele de pe homepage; doar selectorii lipsesc. ============================================================ */ /* --- Header / navbar --------------------------------------- .TODO-header { background-color: hsl(var(--background) / 0.85); backdrop-filter: blur(8px); border-bottom: 1px solid hsl(var(--border)); box-shadow: none; } .TODO-header .TODO-nav-link { font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); } .TODO-header .TODO-nav-link:hover, .TODO-header .TODO-nav-link.active { color: hsl(var(--foreground)); } ------------------------------------------------------------- */ /* --- Formular căutare (dată/oră + CASCO + Caută) ------------ .TODO-search-form { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.25rem; } .TODO-search-form .TODO-submit { … ca .ui-btn … } ------------------------------------------------------------- */ /* --- Card mașină -------------------------------------------- .TODO-car-card { … ca .ui-card … } .TODO-car-card:hover { box-shadow: var(--shadow-md); transform: none; } .TODO-car-title { font-weight: 600; letter-spacing: -0.025em; } .TODO-car-category { … ca .ui-badge--secondary … } .TODO-car-specs li { color: hsl(var(--muted-foreground)); font-size: 0.875rem; } .TODO-car-price { font-weight: 700; font-size: 1.125rem; } .TODO-car-price small{ color: hsl(var(--muted-foreground)); font-weight: 400; } .TODO-btn-rezerva { … ca .ui-btn, full-width … } .TODO-badge-popular { … ca .ui-badge … } .TODO-badge-sale { … ca .ui-badge--destructive … } ------------------------------------------------------------- */ /* --- Tabs categorii flotă (Toate/Econom/Standart/…) --------- .TODO-fleet-tabs { … ca .ui-tabs … } .TODO-fleet-tabs .item { … ca .ui-tabs__item … } ------------------------------------------------------------- */ /* --- Testimoniale ------------------------------------------- .TODO-testimonial-card { … ca .ui-card, padding 1.5rem … } .TODO-testimonial-text { color: hsl(var(--muted-foreground)); font-size: 0.875rem; } ------------------------------------------------------------- */ /* --- Branduri (grid 20+ mărci) ------------------------------ .TODO-brand-item { border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); transition: border-color .15s ease, box-shadow .15s ease; } .TODO-brand-item:hover { box-shadow: var(--shadow-sm); } ------------------------------------------------------------- */ /* --- FAQ ----------------------------------------------------- .TODO-faq-item { … ca .ui-accordion__item … } .TODO-faq-question{ … ca .ui-accordion__trigger … } .TODO-faq-answer { … ca .ui-accordion__content … } ------------------------------------------------------------- */ /* --- Footer -------------------------------------------------- .TODO-footer { background-color: hsl(240 10% 3.9%); color: hsl(240 5% 64.9%); border-top: 1px solid hsl(240 3.7% 15.9%); } .TODO-footer a:hover { color: hsl(0 0% 98%); } .TODO-footer h4 { color: hsl(0 0% 98%); font-size: 0.875rem; font-weight: 600; } ------------------------------------------------------------- */