/* ========================================================================== GSKordeven Orbit 9.0 - services, navigation dropdown and footer -------------------------------------------------------------------------- Everything here is an addition. Nothing in styles.css or three-d.css was changed, so removing this one file returns the site to how version 8 looked. 1. Services dropdown in the header 2. The service card grid on the services page 3. Service page sections 4. The rebuilt footer 5. A wider carousel with fuller cards 6. The service photograph Built from the theme's own custom properties, so it inherits the live palette rather than restating it. A note on the dropdown selectors: WordPress marks a menu parent with .menu-item-has-children, while the theme's own fallback menu marks it with .has-sub. Both are matched, so the dropdown works whether the owner is using a menu built in Appearance -> Menus or the fallback the theme prints when no menu has been assigned. ========================================================================== */ /* ============ 1. SERVICES DROPDOWN ============ */ .primary-menu .has-sub, .primary-menu .menu-item-has-children{position:relative} .primary-menu .has-sub > a, .primary-menu .menu-item-has-children > a{display:inline-flex;align-items:center;gap:6px} /* The caret is drawn rather than typed, so it inherits the link colour and there is no font dependency. */ .primary-menu .has-sub > a::after, .primary-menu .menu-item-has-children > a::after{ content:"";width:7px;height:7px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s ease; } .primary-menu .has-sub:hover > a::after, .primary-menu .has-sub:focus-within > a::after, .primary-menu .menu-item-has-children:hover > a::after, .primary-menu .menu-item-has-children:focus-within > a::after{transform:translateY(1px) rotate(225deg)} .sub-menu{ position:absolute;left:50%;top:100%;z-index:70; margin:0;padding:10px;list-style:none; min-width:290px;transform:translateX(-50%) translateY(8px); border:1px solid var(--line);border-radius:var(--radius); background:rgba(32,36,44,.98); box-shadow:var(--shadow-3); backdrop-filter:blur(14px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s; } /* A gap between the link and the panel would close the menu as the pointer crossed it. This bridges that gap without being visible. */ .primary-menu .has-sub::after, .primary-menu .menu-item-has-children::after{ content:"";position:absolute;left:0;right:0;top:100%;height:14px; } .primary-menu .has-sub:hover .sub-menu, .primary-menu .has-sub:focus-within .sub-menu, .primary-menu .menu-item-has-children:hover .sub-menu, .primary-menu .menu-item-has-children:focus-within .sub-menu{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0); } .sub-menu li{margin:0} .sub-menu a{ display:block;padding:9px 13px;border-radius:var(--radius-sm); color:var(--text-2);font-size:.9rem;font-weight:600; text-decoration:none;letter-spacing:0;text-transform:none; transition:background .16s ease,color .16s ease; } .sub-menu a:hover,.sub-menu a:focus-visible{ background:rgba(57,170,255,.14);color:var(--text); } .sub-menu .sub-all{ margin-top:6px;padding-top:10px; border-top:1px solid var(--line-soft); } .sub-menu .sub-all a{color:var(--cyan)} /* On a phone the header menu is a stacked panel, so the dropdown becomes an ordinary indented list rather than an overlay that would fall off screen. */ @media (max-width:960px){ .sub-menu{ position:static;transform:none;min-width:0; margin:6px 0 4px 14px;padding:0 0 0 12px; border:0;border-left:1px solid var(--line-soft);border-radius:0; background:none;box-shadow:none;backdrop-filter:none; opacity:1;visibility:visible;pointer-events:auto; } .primary-menu .has-sub::after, .primary-menu .menu-item-has-children::after{display:none} .primary-menu .has-sub > a::after, .primary-menu .menu-item-has-children > a::after{display:none} } /* ============ 2. SERVICE CARD GRID ============ */ .svc-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px;margin-top:28px; } .svc-card{ position:relative;display:flex;flex-direction:column; } /* The flip tile is the theme's own component, unchanged. It sits inside this wrapper so a real link can live underneath it: a