/* Stellenbosch Web Studio — Small Business Package demo. Layout lives in inline styles on each page; this file holds the things inline styles cannot express: hover/focus states, the responsive nav, and the hero animation. */ * { box-sizing: border-box; } body { margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #ffffff; color: #0b2340; -webkit-font-smoothing: antialiased; text-wrap: pretty; } a { color: #0b2340; } a:hover { color: #d4a537; } img { max-width: 100%; height: auto; } /* [hidden] has to beat the inline display:grid / display:flex on the elements the contact form toggles. */ [hidden] { display: none !important; } :focus-visible { outline: 2px solid #d4a537; outline-offset: 2px; } /* --- hover + focus states (were style-hover / style-focus in the design source) --- */ .btn-gold:hover { background: #e0b552; } .btn-navy:hover { background: #071a30; } .btn-wa:hover { background: #1eb257; } .btn-outline:hover { background: #0b2340; color: #ffffff; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #ffffff; } .hover-navy-border:hover { border-color: #0b2340; } .link-gold:hover { color: #d4a537; } .footer-link:hover { color: #ffffff; } .text-link:hover { color: #0b2340; } .nav-link:hover { color: #0b2340; border-bottom-color: #dde5f0; } .field:focus { outline: none; border-color: #0b2340; background: #ffffff; } .form-grid { display: grid; gap: 20px; } /* --- hover motion ---------------------------------------------------------- The lift is composed through a --hover-y custom property rather than set on `transform` directly, so it can share an element with the scroll-reveal transform below without the two rules fighting over specificity. */ main article, main .btn-gold, main .btn-navy, main .btn-outline, main .btn-ghost, main .hover-navy-border { transform: translateY(var(--hover-y, 0px)); } main article, .btn-gold, .btn-navy, .btn-outline, .btn-ghost, .btn-wa, .nav-link, .link-gold, .text-link, .footer-link, .hover-navy-border, .field { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .28s ease, box-shadow .28s ease; } main article:hover { --hover-y: -5px; box-shadow: 0 16px 34px rgba(11, 35, 64, 0.13); } main .btn-gold:hover, main .btn-navy:hover, main .btn-outline:hover, main .hover-navy-border:hover { --hover-y: -2px; } main .btn-gold:hover, main .btn-navy:hover, main .btn-outline:hover { box-shadow: 0 10px 22px rgba(11, 35, 64, 0.18); } main .btn-ghost:hover { --hover-y: -2px; } header .btn-navy:hover { transform: translateY(-2px); } .footer-link:hover { transform: translateX(3px); } /* Only the floating bubble carries an aria-label; the WhatsApp cards do not. */ .btn-wa[aria-label]:hover { transform: scale(1.08); } main tbody tr { transition: background-color .2s ease; } main tbody tr:hover { background: #eef3fa !important; } /* --- scroll reveal --------------------------------------------------------- site.js tags the blocks and toggles .is-visible.
is held back until that tagging is done so nothing flashes in before it is hidden; the inline script un-hides it after 1.5s if site.js never arrives. */ .js main { opacity: 0; } .js main.reveal-ready { opacity: 1; transition: opacity .2s ease; } .js main [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y, 22px)) translateY(var(--hover-y, 0px)); transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1), background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .28s ease; } .js main [data-reveal].is-visible { opacity: 1; --reveal-y: 0px; } @media (prefers-reduced-motion: reduce) { .js main [data-reveal] { opacity: 1; --reveal-y: 0px; } main article:hover, main .btn-gold:hover, main .btn-navy:hover, main .btn-outline:hover, main .btn-ghost:hover, main .hover-navy-border:hover { --hover-y: 0px; } header .btn-navy:hover, .footer-link:hover, .btn-wa[aria-label]:hover { transform: none; } } /* --- navigation: full menu on desktop, hamburger panel below 900px --- */ .nav-desktop { display: flex; align-items: center; gap: 34px; } .nav-toggle { display: none; } @media (max-width: 900px) { .nav-desktop { display: none; } .nav-toggle { display: flex; } } /* The panel is only ever the mobile menu — keep it down even if JS never ran. */ @media (min-width: 901px) { .nav-panel { display: none; } } /* --- homepage hero --- */ @keyframes swsDrift { 0% { transform: translate3d(-6%, -4%, 0) scale(1.05); } 50% { transform: translate3d(6%, 5%, 0) scale(1.18); } 100% { transform: translate3d(-6%, -4%, 0) scale(1.05); } } @keyframes swsDriftB { 0% { transform: translate3d(5%, 6%, 0) scale(1.12); } 50% { transform: translate3d(-5%, -6%, 0) scale(1); } 100% { transform: translate3d(5%, 6%, 0) scale(1.12); } } .hero-drift-a { animation: swsDrift 26s ease-in-out infinite; } .hero-drift-b { animation: swsDriftB 34s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hero-drift-a, .hero-drift-b { animation: none; } }