/* ==========================================
BALBUSSE OS V2
COMPLETE SYSTEM CSS
SOLID CLOCK VERSION
========================================== */


/* RESET */

* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html,
body {

    width:100%;
    height:100%;
    overflow:hidden;

    background:#ffffff;
    color:#000000;

    font-family:"IBM Plex Mono", monospace;

}



/* ==========================================
DESKTOP
========================================== */


.desktop-background {

    position:absolute;

    inset:0;

    background-image:url("https://www.aatlaas.com/images/boutique.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:1;

}


/* ==========================================
BALBUSSE TITLE
========================================== */


header {

    position:absolute;

    top:55px;

    left:0;

    width:100%;

    display:flex;

    justify-content:center;

    z-index:300;

}


header h1 {

    font-family:"Cormorant Garamond", serif;

    font-size:2.4rem;

    font-weight:400;

    letter-spacing:.42em;

    margin-left:.42em;

    color:#000000;

}


/* ==========================================
APPLICATION SYSTEM
========================================== */


.application-layer {

    position:absolute;

    inset:0;

    z-index:50;

    pointer-events:none;

}



.application {

    position:absolute;

    inset:0;

    bottom:42px;

    background:rgba(0,0,0,.96);

    color:#ffffff;

    display:none;

    pointer-events:none;

}



.application.active {

    display:block;

    pointer-events:auto;

}





.window-controls {

    position:absolute;

    top:28px;

    right:40px;

    display:flex;

    gap:20px;

}



.window-controls button {

    background:none;

    border:none;

    color:#ffffff;

    cursor:pointer;

    font-family:"IBM Plex Mono", monospace;

}



.window-controls button:hover {

    color:#B3D7EA;

}





.application-content {

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

}



.application-content h2 {

    font-family:"IBM Plex Mono", monospace;

    font-size:.85rem;

    font-weight:300;

    letter-spacing:.25em;

}



/* ==========================================
DESKTOP INTERFACE
========================================== */


.desktop-interface {

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    z-index:200;

}



/* ==========================================
MAIN LAUNCHER
========================================== */


.launcher-menu {

    position:absolute;

    bottom:42px;

    left:0;

    width:380px;

    background:#000000;

    padding:45px 40px;

    display:flex;

    flex-direction:column;

    gap:22px;

    opacity:0;

    pointer-events:none;

}



.desktop-interface.menu-open .launcher-menu {

    opacity:1;

    pointer-events:auto;

}



.launcher-menu a {

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:300;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#ffffff;

    text-decoration:none;

}



.launcher-menu a:hover {

    color:#B3D7EA;

}

/* ==========================================
LAUNCHER DIVIDER
========================================== */

.launcher-divider {

    width:100%;

    height:1px;

    background:#ffffff;

    margin:18px 0;

}

/* ==========================================
LA MAISON BALBUSSE MENUS
========================================== */

.maison-container,
.univers-container {

    position:relative;

}


/* ==========================================
FIRST LEVEL (BLUE)
========================================== */

.maison-submenu {

    position:absolute;

    left:340px;
    bottom:0;

    width:360px;

    background:#B3D7EA;

    padding:45px 40px;

    display:flex;
    flex-direction:column;
    gap:22px;

    opacity:0;
    pointer-events:none;

}

.maison-container.open .maison-submenu {

    opacity:1;
    pointer-events:auto;

}

.maison-container.open .maison-trigger {

    color:#B3D7EA;

}


/* ==========================================
SECOND LEVEL (WHITE)
========================================== */

.univers-submenu {

    position:absolute;

    left:99%;
    top:-8px;              /* Raise slightly above the blue menu */

    width:360px;

    background:#ffffff;

    padding:45px 40px;

    display:flex;
    flex-direction:column;
    gap:22px;

    opacity:0;
    pointer-events:none;

}

.univers-container.open .univers-submenu {

    opacity:1;
    pointer-events:auto;

}


/* ==========================================
MENU LINKS
========================================== */

.maison-submenu a,
.univers-submenu a {

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-family:"IBM Plex Mono", monospace;
    font-size:.68rem;
    font-weight:300;
    letter-spacing:.16em;
    text-transform:uppercase;

    text-decoration:none;

}


/* BLUE MENU */

.maison-submenu a {

    color:#ffffff;

}

.maison-submenu a:hover {

    color:#000000;

}


/* WHITE MENU */

.univers-submenu a {

    color:#000000;

}

.univers-submenu a:hover {

    color:#B3D7EA;

}

/* ==========================================
PRODUCT SUBMENU
========================================== */


.products-container {

    position:relative;

}



.products-submenu {

    position:fixed;

    left:380px;

    bottom:42px;

    width:360px;

    background:#B3D7EA;

    padding:45px 40px;

    display:flex;

    flex-direction:column;

    gap:22px;

    opacity:0;

    pointer-events:none;

}



.products-container.open .products-submenu {

    opacity:1;

    pointer-events:auto;

}



.products-container.open .products-trigger {

    color:#B3D7EA;

}



.products-submenu a {

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:300;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#ffffff;

    text-decoration:none;

}



.products-submenu a:hover {

    color:#000000;

}



/* ==========================================
TASKBAR
========================================== */


.taskbar {

    height:42px;

    width:100%;

    background:#000000;

    display:flex;

    align-items:center;

}



/* DÉCOUVRIR */


.discover-button {

    height:42px;

    padding:0 32px;

    background:#000000;

    color:#ffffff;

    border:none;

    border-right:1px solid #ffffff;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:300;

    letter-spacing:.18em;

    cursor:pointer;

}



.discover-button:hover {

    color:#B3D7EA;

}



/* OPEN APPLICATIONS */


.taskbar-applications {

    height:42px;

    display:flex;

}



.taskbar-tab {

    height:42px;

    padding:0 18px 0 25px;

    display:flex;

    align-items:center;

    gap:16px;

    background:#000000;

    color:#ffffff;

    border-right:1px solid #333333;

    font-family:"IBM Plex Mono", monospace;

    font-size:.65rem;

    letter-spacing:.15em;

    cursor:pointer;

}



.taskbar-tab span {

    color:#ffffff;

}



.taskbar-tab:hover span {

    color:#B3D7EA;

}



.taskbar-tab:hover .taskbar-close {

    color:#B3D7EA;

}



.taskbar-tab.active span {

    color:#B3D7EA;

}



.taskbar-tab.active .taskbar-close {

    color:#B3D7EA;

}



.taskbar-close {

    background:none;

    border:none;

    color:#ffffff;

    cursor:pointer;

    font-family:"IBM Plex Mono", monospace;

    font-size:.8rem;

}



.taskbar-close:hover {

    color:#B3D7EA;

}



/* ==========================================
SYSTEM TRAY
========================================== */


.system-tray {

    margin-left:auto;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    padding:0 26px;

    background:#000000;

    border-left:1px solid #ffffff;

}



.language-button {

    background:none;

    border:none;

    color:#ffffff;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    letter-spacing:.16em;

    cursor:pointer;

}



.language-button:hover {

    color:#B3D7EA;

}



.system-icon {

    width:22px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:none;

    border:none;

    color:#ffffff;

    cursor:pointer;

}



.system-icon i {

    font-size:14px;

}



.system-icon:hover {

    color:#B3D7EA;

}



/* ==========================================
CLOCK PANEL
========================================== */


.clock-panel {

    height:42px;

    width:90px;

    background:#B3D7EA;

    color:#000000;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    letter-spacing:.16em;

}



.clock-window {

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}



.clock-display {

    color:#000000;

    font-family:"IBM Plex Mono", monospace;

    font-size:.68rem;

    font-weight:400;

    letter-spacing:.16em;

}



/* ==========================================
ACTIVE APPLICATION TITLE
========================================== */


body.application-open header h1 {

    color:#ffffff;

}

/* ==========================================
LAUNCHER MENU GROUPS
========================================== */


.menu-primary,
.menu-secondary {

    display:flex;

    flex-direction:column;

    gap:22px;

}



.menu-divider {

    width:100%;

    height:1px;

    background:#ffffff;

    margin:12px 0;

}

/* ==========================================
CONTACT APPLICATION
========================================== */


#contact .application-content {

    display:flex;

    justify-content:center;

}



#contact .contact-list {

    display:flex;

    margin-top:35px;

    width:360px;

    transform:translateX(75px);

    position:relative;

}



#contact .contact-rule {

    width:1px;

    height:340px;

    background:#ffffff;

    margin-right:28px;

}



#contact .contact-content {

    text-align:left;

}



#contact .contact-section {

    margin-bottom:45px;

}



#contact .contact-section p {

    font-family:"IBM Plex Mono", monospace;

    font-size:.75rem;

    font-weight:400;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin:0 0 12px 0;

}



#contact .contact-section span {

    font-family:"IBM Plex Mono", monospace;

    font-size:.70rem;

    font-weight:300;

    letter-spacing:.12em;

    color:#ffffff;

}

#contact .contact-section span:hover {

    color:#B3D7EA;

    cursor:pointer;

}

/* ==========================================
PRODUCT APPLICATIONS
WHITE ARCHIVE WINDOWS
========================================== */


#sacs,
#canons,
#pret-a-porter,
#souliers,
#accessoires,
#joaillerie,
#beaute,
#voyages,
#demeure {

    background:#ffffff;

}


/* ==========================================
PRODUCT APPLICATION TEXT
========================================== */


#sacs .application-content,
#canons .application-content,
#pret-a-porter .application-content,
#souliers .application-content,
#accessoires .application-content,
#joaillerie .application-content,
#beaute .application-content,
#voyages .application-content,
#demeure .application-content {

    color:#000000;

}



#sacs .application-content h2,
#canons .application-content h2,
#pret-a-porter .application-content h2,
#souliers .application-content h2,
#accessoires .application-content h2,
#joaillerie .application-content h2,
#beaute .application-content h2,
#voyages .application-content h2,
#demeure .application-content h2 {

    color:#000000;

}



/* ==========================================
PRODUCT WINDOW CONTENT
========================================== */


.product-window-content {

    display:flex;

    align-items:center;

    gap:80px;

    margin-top:60px;

}



/* ==========================================
PRODUCT IMAGE
========================================== */


.product-image img {

    width:420px;

    height:auto;

}



/* ==========================================
PRODUCT LIST
========================================== */


.product-list {

    font-family:"IBM Plex Mono", monospace;

    font-size:.75rem;

    font-weight:300;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#000000;

}



.product-list p {

    margin:0 0 28px 0;

}

/* ==========================================
PRODUCT APPLICATION BALBUSSE TITLE
========================================== */


#sacs.active ~ header h1,
#canons.active ~ header h1,
#pret-a-porter.active ~ header h1,
#souliers.active ~ header h1,
#accessoires.active ~ header h1,
#joaillerie.active ~ header h1,
#beaute.active ~ header h1,
#voyages.active ~ header h1,
#demeure.active ~ header h1 {

    color:#000000;

}

/* ==========================================
PRODUCT MODE TITLE COLOR
========================================== */


body.product-open header h1 {

    color:#000000;

}

/* ==========================================
PRODUCT WINDOW CONTROLS
========================================== */

body.product-open .window-controls button{

    color:#000000;

}

body.product-open .window-controls button:hover{

    color:#B3D7EA;

}

/* ==========================================
PRODUCT DISPLAY CONTROLS
========================================== */


.application-divider {

width:100%;

height:1px;

background:#000000;

margin-bottom:25px;

}


.icons-section {

width:100%;

text-align:center;

}


.icons-section h3 {

font-size:13px;

font-weight:600;

margin:0 0 18px 0;

}


.icon-grid {

display:flex;

justify-content:center;

gap:45px;

align-items:center;

}


.icon-item p {

font-size:11px;

margin:0;

cursor:pointer;

}


.icon-item p:hover {

color:#B3D7EA;

}
/* ==========================================
SACS APPLICATION POSITION
========================================== */

#sacs .application-content {

    top:23%;

}

/* ==========================================
CATEGORY DISPLAY
========================================== */


.categories-section {

width:100%;

text-align:center;

transform:translateY(-25px);

}



.categories-section h3 {

font-size:13px;

font-weight:600;

margin:0 0 18px 0;

}



.category-grid {

display:flex;

justify-content:center;

gap:45px;

align-items:center;

flex-wrap:wrap;

}



.category-item p {

font-size:11px;

margin:0;

cursor:pointer;

}



.category-item p:hover {

color:#B3D7EA;

}