/* ========================================================================== Inter Virtual Sdn Bhd — site styles Layered on top of Tailwind (loaded from CDN in each page's ). Only what Tailwind utilities do not cover lives here. ========================================================================== */ :root { --navy: #0b2c4d; --navy-deep: #071e35; --teal: #0e7c86; /* Focus ring and decorative rules. Deliberately darker than the Tailwind `brand.bright` accent (#19B4C2): a focus indicator must reach 3:1 against the white page background, which the lighter accent does not. */ --teal-bright: #12a0ad; --mist: #f5f7f9; --line: #e2e8ef; --ink: #334155; } html { scroll-behavior: smooth; /* Offset for the sticky header when jumping to #anchors */ scroll-padding-top: 5.5rem; } body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .font-display { font-family: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: -0.02em; } /* --- Focus visibility ---------------------------------------------------- */ :focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: #fff; color: var(--navy); padding: 0.75rem 1.25rem; border-radius: 0.5rem; font-weight: 600; transition: top 0.2s ease; } .skip-link:focus { top: 1rem; } /* --- Hero / photo overlays ----------------------------------------------- */ .photo-panel { position: relative; isolation: isolate; background-size: cover; background-position: center; } /* Navy scrim keeps white headline text above WCAG AA at every viewport. */ .photo-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(7, 30, 53, 0.93) 0%, rgba(11, 44, 77, 0.86) 45%, rgba(11, 44, 77, 0.62) 100%); } .photo-panel--flat::before { background: linear-gradient(180deg, rgba(7, 30, 53, 0.9) 0%, rgba(7, 30, 53, 0.8) 100%); } /* --- Small decorative rules ---------------------------------------------- */ .rule-teal::after { content: ''; display: block; width: 3.5rem; height: 3px; background: var(--teal-bright); margin-top: 1.25rem; border-radius: 3px; } .rule-teal.rule-center::after { margin-left: auto; margin-right: auto; } /* --- Cards --------------------------------------------------------------- */ .card-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; } .card-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(11, 44, 77, 0.45); } /* --- Prose lists inside service sections --------------------------------- */ .list-check > li { position: relative; padding-left: 1.9rem; margin-bottom: 0.7rem; line-height: 1.65; } .list-check > li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 2px solid var(--teal); } /* --- Projects table ------------------------------------------------------ */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .projects-table { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: 0.9rem; } .projects-table th { background: var(--navy); color: #fff; text-align: left; font-weight: 600; padding: 0.85rem 1rem; position: sticky; top: 0; white-space: nowrap; } .projects-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; } .projects-table tbody tr:nth-child(odd) { background: var(--mist); } .projects-table tbody tr:hover { background: #eef4f8; } .projects-table tr[hidden] { display: none; } .filter-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .filter-chip:hover { border-color: var(--teal); color: var(--teal); } .filter-chip[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: #fff; } /* --- Scroll reveal ------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .card-lift { transition: none; } .card-lift:hover { transform: none; } } /* No-JS safety net: never leave content invisible if the observer never runs. */ .no-js .reveal { opacity: 1; transform: none; }