/*//////////////////////////////////////////////////////////////////////////////////////////// THE NEW CSS RESET ////////////////////////////////////////////////////////////////////////////////////////////*/ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; font-size: 100%; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /*//////////////////////////////////////////////////////////////////////////////////////////// OKTO GLOBAL STYLES ////////////////////////////////////////////////////////////////////////////////////////////*/ :root { --ink-900: #0f172a; --ink-700: #1f2937; --ink-500: #475569; --accent: #1d4ed8; --surface: rgba(255, 255, 255, 0.76); --surface-strong: rgba(255, 255, 255, 0.94); --border: rgba(255, 255, 255, 0.6); --shadow-soft: 0 25px 80px -35px rgba(15, 23, 42, 0.4); --shadow-card: 0 18px 45px -28px rgba(15, 23, 42, 0.38); --radius-lg: 26px; --radius-md: 18px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; } body { min-height: 100vh; margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.6; color: #111827; background: #ffffff; overflow-x: hidden; position: relative; } .main-content { max-width: 70ch; margin: 0 auto; padding: 0 var(--space-3); } h1, h2, h3, h4, h5, h6 { font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 700; margin: 0 0 0.5em; color: #0f172a; } h1 { font-size: clamp(2rem, 1.15rem + 2.5vw, 2.75rem); line-height: 1.1; } h2 { font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.2; } h3 { font-size: clamp(1.5rem, 1rem + 1.2vw, 1.875rem); line-height: 1.3; } h4 { font-size: 1.25rem; line-height: 1.3; } h5 { font-size: 1.125rem; line-height: 1.4; letter-spacing: 0.02em; } h6 { font-size: 1rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; } p { margin: 0 0 var(--space-2); font-size: 1rem; line-height: 1.6; color: #111827; } :where(p, h1, h2, h3, h4, h5, h6):last-child { margin-bottom: 0; } small, .text-sm { font-size: 0.875rem; line-height: 1.5; } ul, ol { margin: 0 0 var(--space-2) var(--space-3); padding: 0; list-style-position: outside; } ul { list-style: disc; } ol { list-style: decimal; } li { margin-bottom: 0.25rem; } h1 + p, h2 + p, h3 + p { margin-top: var(--space-1); } a { color: var(--ink-900); text-decoration: none; transition: color 0.18s ease, opacity 0.18s ease; } a:hover { color: var(--accent); } section { padding: var(--space-4) 0; isolation: isolate; } .flexContainer { width: min(1200px, 92vw); margin: 0 auto; display: flex; gap: var(--space-3); padding: var(--space-3) 0; align-items: center; justify-content: space-between; } section > .flexContainer, section .flexColumn { position: relative; z-index: 1; } section > .flexContainer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); padding: var(--space-3) var(--space-4); } section > .flexContainer:has(.flexColumn) { background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; } section > .flexContainer + .flexContainer { margin-top: var(--space-2); } section .flexColumn { background: var(--surface-strong); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 22px; padding: var(--space-3); box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; flex: 1; min-width: 240px; } section .flexColumn:hover { transform: translateY(-4px); box-shadow: 0 28px 70px -40px rgba(15, 23, 42, 0.45); } .vertical { display: flex; flex-direction: column; gap: var(--space-2); } /*//////////////////////////////////////////////////////////////////////////////////////////// OKTO HEADER STYLES ////////////////////////////////////////////////////////////////////////////////////////////*/ header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.65); box-shadow: 0 18px 50px -30px rgba(15, 23, 42, 0.45); z-index: 1200; } .header-spacer { height: 108px; } header .logo { width: 100%; max-width: 200px; margin: auto 0; } header .flexContainer { justify-content: space-between; align-items: center; padding: var(--space-2) 0; } .navLinks { display: flex; align-items: center; gap: var(--space-1); } .navLinks .navIcon svg { width: 24px; height: 24px; } .navLinks .navIcon circle, .navLinks .navIcon path { stroke: currentColor; stroke-width: 2; fill: none; } .navLinks .navIcon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: var(--space-1); border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); box-shadow: var(--shadow-card); color: var(--ink-900); transition: transform 0.18s ease, box-shadow 0.18s ease; } .navLinks .navIcon:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -22px rgba(15, 23, 42, 0.4); } .navLinks a, .navLinks .navUser { margin: 0; padding: var(--space-1) var(--space-2); font-weight: 600; color: var(--ink-900); border-radius: 999px; border: 1px solid transparent; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease; } .navLinks a:hover { background: rgba(255, 255, 255, 0.65); border-color: var(--border); box-shadow: 0 16px 40px -22px rgba(15, 23, 42, 0.4); transform: translateY(-1px); } .navLinks .navUser { background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); border: 1px solid var(--border); white-space: nowrap; box-shadow: var(--shadow-card); } .hamburgerContainer { display: none; position: relative; z-index: 1300; } .navOverlay { display: none; } .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78)); box-shadow: none; transition: transform 0.2s ease, background 0.2s ease; } .hamburger:hover { transform: translateY(-1px); } .ham { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms, color 180ms ease; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; width: 52px; height: 52px; color: var(--ink-900); } .hamRotate.active { transform: rotate(45deg); color: var(--accent); } .hamRotate180.active { transform: rotate(180deg); } .line { fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms, stroke 180ms ease; stroke: currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; overflow: visible; } .ham6 .top { stroke-dasharray: 41 172; } .ham6 .middle { stroke-dasharray: 41 111; } .ham6 .bottom { stroke-dasharray: 41 172; } .ham6.active .top { stroke-dashoffset: -132px; } .ham6.active .middle { stroke-dashoffset: -71px; } .ham6.active .bottom { stroke-dashoffset: -132px; } /*//////////////////////////////////////////////////////////////////////////////////////////// OKTO FOOTER STYLES ////////////////////////////////////////////////////////////////////////////////////////////*/ footer { margin-top: var(--space-4); background: linear-gradient(165deg, rgba(15, 23, 42, 0.9), rgba(37, 99, 235, 0.8)); color: #e2e8f0; border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 -22px 60px -40px rgba(15, 23, 42, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } footer .flexContainer { justify-content: space-between; align-items: flex-start; } footer h5 { margin-bottom: var(--space-2); color: #f8fafc; letter-spacing: 0.02em; } footer a { padding: var(--space-1) 0; color: #e2e8f0; opacity: 0.85; transition: color 0.2s ease, opacity 0.2s ease; } footer a:hover { color: #ffffff; opacity: 1; } footer p { color: #cbd5e1; } footer .logo { width: 100%; max-width: 200px; margin: var(--space-2) 0 auto 0; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.35)); } /*//////////////////////////////////////////////////////////////////////////////////////////// MEDIA QUERIES ////////////////////////////////////////////////////////////////////////////////////////////*/ @media only screen and (max-width: 1000px) { .flexContainer { flex-direction: column; align-items: stretch; } section > .flexContainer { padding: var(--space-3) var(--space-3); } header .flexContainer { flex-direction: row; } .hamburgerContainer { display: flex; margin-right: calc(-1 * var(--space-1)); } .navLinks { display: flex; position: fixed; top: 0; right: 0; height: 100vh; width: min(340px, 80vw); padding: calc(var(--space-5) * 2) var(--space-3) var(--space-4); flex-direction: column; align-items: flex-start; gap: var(--space-2); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-left: 1px solid var(--border); box-shadow: -12px 0 35px rgba(0, 0, 0, 0.12); transform: translateX(100%); transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; opacity: 0; visibility: hidden; pointer-events: none; z-index: 1250; } .navLinks a, .navLinks .navUser { width: 100%; padding: var(--space-2) 0; margin: 0; } .navLinks.nav-open { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; background: rgba(255, 255, 255, 0.96); } .navOverlay { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 1100; } .navOverlay.is-active { opacity: 1; pointer-events: auto; } }