// resources/themes/figma-port/theme.json { "name": "Figma Port", "version": "1.0.0", "description": "Portage Figma → Azuriom (Bootstrap bridge, responsive)", "author": "you", "azuriom": ">=1.0.0" } @yield('title', config('app.name')) @stack('styles')
@include('figma-port::partials._navbar')
@yield('content')
@stack('scripts') @extends('figma-port::layouts.app') @section('title', 'Accueil') @section('content')

Echelon Studio

Serveur & communauté — design issu de Figma porté sur Azuriom

Boutique Nous rejoindre

Projets

Projet A

Description courte…

Projet B

Description courte…

Projet C

Description courte…

CGV & CGU

Navigation

Réseaux

@endsection /* public/themes/figma-port/figma-bridge.css */ /* Pourquoi: on adapte tes styles Figma .WEB à Azuriom/Bootstrap, en responsive et sans min-width fixe */ :root { --bs-primary: #5534d0; /* adapte à ta couleur Figma */ --bs-body-bg: #13143a; --bs-body-color: #ffffff; } .content { margin-top: 5rem; margin-bottom: 5rem; } .web-hero { position: relative; isolation: isolate; /* empêche les blends d’affecter le reste */ background: linear-gradient(0deg, rgba(19,20,58,1) 0%, rgba(19,20,58,1) 100%), linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%), linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 100%); min-height: min(85vh, 900px); } /* couches décoratives (ex- .element/.vector/.door-icon) */ .web-hero .hero-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .web-hero .element { mix-blend-mode: luminosity; opacity: .7; } .web-hero .vector { object-fit: contain; pointer-events: none; } .web-hero .door-icon { object-fit: contain; right: 5%; left: auto; width: 38%; height: auto; } /* pastille statut (ex- .ellipse) */ .web-hero .status-indicator { position: absolute; right: clamp(12px,4vw,32px); top: clamp(12px,4vw,32px); width: 18px; height: 18px; border-radius: 50%; background: #62ff7c; box-shadow: inset 0 9px 4px #bfff7f, 0 16px 4px #4bb01d; } /* Cards adaptées à la charte Figma */ .card-figma { background: #151922; border: 1px solid rgba(255,255,255,.06); color: var(--bs-body-color); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.25); } .card-figma p { color: #9aa3ae; } /* Footer style (ex- .rectangle) */ .bg-gradient-footer { background: linear-gradient(180deg, rgba(38, 40, 143, 1) 0%, rgba(80, 91, 221, 1) 100%); border-top: 3px solid var(--bs-primary); } .footer-link { color: #fff; text-decoration: none; } .footer-link:hover { opacity: .8; } /* Nav: garder Azuriom/Bootstrap, cohérence Figma */ .navbar .nav-link { text-transform: uppercase; font-weight: 700; } .navbar .nav-link.active { color: var(--bs-primary); } /* ------- PORTAGE SÉCURISÉ DE TES CLASSES FIGMA (scopées) ------- */ /* On conserve les noms pour compat, mais on retire les min-width et on remap en responsive */ .web-hero .WEB { position: relative; width: 100%; } .web-hero .WEB .element, .web-hero .WEB .element-w-n-b, .web-hero .WEB .vector, .web-hero .WEB .vector-2, .web-hero .WEB .vector-3, .web-hero .WEB .vector-4, .web-hero .WEB .door-icon, .web-hero .WEB .door-icon-2 { display: none; } /* Pourquoi: éviter l’empilement absolu non responsive; on expose 3 couches contrôlées via .hero-layer */ /* Texte “Echelon Studio” */ .web-hero .echelon-studio { color: #5534d0; font-size: clamp(20px, 2.2vw, 35px); font-weight: 700; letter-spacing: -0.03em; } /* Liens footer (ex- .CGV-CDT, .ACCUEIL-VOTE-PROJETS, .x-INSTAGRAM-DISCORD) */ .CGV-CDT, .ACCUEIL-VOTE-PROJETS, .x-INSTAGRAM-DISCORD { text-decoration: none; display: inline-block; color: #fff; } /* Boutique CTA style Figma */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: color-mix(in oklab, var(--bs-primary), #000 10%); --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-primary), #000 12%); --bs-btn-color: #fff; } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-color: #fff; } /* Hover textes nav */ .text-wrapper-2:hover, .text-wrapper-3:hover, .text-wrapper-4:hover, .text-wrapper-5:hover, .text-wrapper-6:hover, .text-wrapper-7:hover { opacity: .8; } /* Breakpoints: on réactive des éléments décoratifs grand écran */ @media (min-width: 768px) { .web-hero .element { display: block; } } @media (min-width: 992px) { .web-hero .vector { display: block; } } @media (min-width: 1200px) { .web-hero .door-icon { display: block; } } /* Accessibilité */ :focus-visible { outline: 2px dashed var(--bs-primary); outline-offset: 2px; }