/* ORIGINAL OCEAN INLINE STYLE BLOCK 1 */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/latin-ext/wght/normal.woff2); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/cyrillic-ext/wght/normal.woff2); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/latin/wght/normal.woff2); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/vietnamese/wght/normal.woff2); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/cyrillic-ext/wght/normal.woff2); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/latin/wght/normal.woff2); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/vietnamese/wght/normal.woff2); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/latin-ext/wght/normal.woff2); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/cyrillic-ext/wght/normal.woff2); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/latin-ext/wght/normal.woff2); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/latin/wght/normal.woff2); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; src: url(/cf-fonts/v/plus-jakarta-sans/5.2.8/vietnamese/wght/normal.woff2); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; font-display: swap; } /* ORIGINAL OCEAN INLINE STYLE BLOCK 2 */ salla-hook { all: unset; display: none; } /* ORIGINAL OCEAN INLINE STYLE BLOCK 3 */ /* ── Smooth scrolling & subpixel rendering ───────────────────────── */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :root { --font-main: 'PingARLT'; --color-primary: #42c3ba; --color-primary-dark: #1c9d94; --color-primary-light: #68e9e0; --color-primary-reverse: #00443b; --g-blue: #4bdfbf; --g-blue-l: #4bdfbf; --g-border-h: #4bdfbf66; --g-glow-blue: #4bdfbf47; --g-bg: #0a0b10; --g-surface: #0a0b10; --g-cyan: #56d4ff; --g-cyan-l: #56d4ff; --g-glow-cyan: #56d4ff38; --pc-btn-bg: #1edfb3; --pc-btn-text: #0a0b10; --logo-w-desktop: 110px; --logo-w-mobile: 80px; --ocn-nav-h: 56px; --ocn-icon-col: #025464; } /* ── Light mode: full readable-contrast palette ─────────────────── */ html[data-theme="light"] { background-color: #f5f6fa; color: #0a0b10; --g-bg: #f5f6fa; --g-surface: #ffffff; --g-text: #0a0b10; --g-text-muted: #4a5568; --g-text-faint: #9aa3af; --g-border: rgba(0, 0, 0, 0.09); --g-blue: #4bdfbf; --g-cyan: #56d4ff; } /* ── Auto-contrast: light bg → dark text override ────────────────── */ html[data-bg-contrast="light"] { --g-text: #0a0b10; --g-text-muted: #4a5568; --g-text-faint: #9aa3af; --g-bg: #0a0b10; --g-surface: #ffffff; --g-border: rgba(0, 0, 0, 0.09); } /* ORIGINAL OCEAN INLINE STYLE BLOCK 4 */ /* ══════════════════════════════════════════════════════════════════════════ OCN-DIVIDER v32.0 — "ZERO BOX" ARCHITECTURE Philosophy: ONLY the image pixels (or floating text) are visible. No background, no border, no shadow on ANY wrapper or bar element. The page background shows through — dark space or light canvas. ══════════════════════════════════════════════════════════════════════════ */ /* ── LAYER A: GHOST WRAPPER (all themes) ────────────────────────────────── */ html .ocn-dvw, html[data-theme] .ocn-dvw, html[data-theme="dark"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, html body .s-block.ocn-dvw, html[data-theme="dark"] body .s-block.ocn-dvw, html[data-theme="light"] body .s-block.ocn-dvw { padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-block: 0 !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; /* margin-bottom owns the gap to the next section — controlled by --ocn-gap */ margin-bottom: var(--ocn-gap, 1rem) !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; outline: none !important; min-height: 0 !important; border-radius: 0 !important; } /* ── LAYER B: THE BAR — ZERO BOX ────────────────────────────────────────── */ /* Color tokens only — no visual properties here */ .ocn-dv { --_text: #ffffff; --_accent: #00b4ff; } /* Base bar: purely a layout container, fully invisible */ html .ocn-dv, html[data-theme] .ocn-dv, html[data-theme="dark"] .ocn-dv, html[data-theme="light"] .ocn-dv { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 1rem !important; position: relative !important; overflow: visible !important; /* Geometry — section gap (--ocn-gap) provides the space around; no internal margin needed */ width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; /* ZERO BOX — no visual paint at all */ background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; outline: none !important; transform: translateZ(0); transition: none; } /* No pseudo-element shimmer lines */ html .ocn-dv::before, html .ocn-dv::after, html[data-theme] .ocn-dv::before, html[data-theme] .ocn-dv::after { display: none !important; content: none !important; } /* ── IMAGE MODE ──────────────────────────────────────────────────────────── */ /* Killer: remove every shading layer — only image pixels remain */ .ocn-dv.is-image, html .ocn-dv.is-image, html[data-theme] .ocn-dv.is-image, html[data-theme="dark"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-image { padding: 0 !important; background: transparent !important; background-color: transparent !important; } /* The image: natural static flow, never absolute, never fills a dark box */ .ocn-dv.is-image picture, .ocn-dv.is-image picture source { display: contents; /* picture is layout-neutral */ } .ocn-dv .ocn-img, html .ocn-dv .ocn-img, html[data-theme] .ocn-dv .ocn-img, html[data-theme="dark"] .ocn-dv .ocn-img, html[data-theme="light"] .ocn-dv .ocn-img { /* CRITICAL: switch from absolute to natural static flow */ position: static !important; inset: auto !important; display: block !important; margin: 0 auto !important; max-height: 80px !important; width: auto !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; border-radius: 0 !important; flex-shrink: 0; } /* Kill the dark overlay completely */ .ocn-overlay, .ocn-dv .ocn-overlay, html .ocn-dv .ocn-overlay, html[data-theme] .ocn-dv .ocn-overlay, html[data-theme="dark"] .ocn-dv .ocn-overlay, html[data-theme="light"] .ocn-dv .ocn-overlay { display: none !important; background: transparent !important; } /* Image-mode content (title/button) — sits beside the image in flex row */ .ocn-dv.is-image .ocn-content { position: static; z-index: auto; padding-inline: 0.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-height: auto; width: auto; } /* ── TEXT MODE ───────────────────────────────────────────────────────────── */ .ocn-dv.is-text .ocn-content { position: static; z-index: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; padding: 0.5rem 1rem; } /* ── LIGHT MODE OVERRIDE (explicit nuclear) ─────────────────────────────── */ [data-theme="light"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, [data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-text { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--_accent, #56d4ff); margin: 0; text-shadow: 0 0 10px var(--_accent, #56d4ff); white-space: nowrap; } .ocn-dv .ocn-title { font-size: clamp(.9rem, 1.8vw, 1.15rem); font-weight: 900; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; color: var(--_text, #ffffff); margin: 0; white-space: nowrap; text-shadow: 0 0 18px rgba(86, 212, 255, .40); } /* In light mode, text should be dark enough to read on white bg */ html[data-theme="light"] .ocn-dv .ocn-title { color: var(--_text, #0a0b10); text-shadow: none; } html[data-theme="light"] .ocn-dv .ocn-eyebrow { color: var(--_accent, #0070f3); text-shadow: none; } .ocn-dv .ocn-desc { display: none; } /* ── CTA BUTTON ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-cta { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem 1.2rem; border-radius: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #ffffff; background: linear-gradient(135deg, var(--_accent, #56d4ff) 0%, #7c3aed 100%); box-shadow: 0 0 12px rgba(86, 212, 255, .28); transition: transform .18s ease, box-shadow .22s ease; white-space: nowrap; flex-shrink: 0; } .ocn-dv .ocn-cta:hover, .ocn-dv .ocn-cta:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 24px rgba(86, 212, 255, .65), 0 4px 16px rgba(0, 0, 0, .35); color: #ffffff; text-decoration: none; } /* ── MOBILE ──────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { html .ocn-dv, html[data-theme] .ocn-dv { width: 92% !important; margin: 0 auto !important; padding: 0 !important; } .ocn-dv .ocn-img { max-height: 64px !important; } .ocn-dv .ocn-title { font-size: clamp(.78rem, 3.5vw, .95rem); white-space: normal; } .ocn-dv .ocn-cta { padding: .3rem .85rem; font-size: .65rem; } .ocn-dv.is-text .ocn-content { gap: .6rem; } } /* ORIGINAL OCEAN INLINE STYLE BLOCK 5 */ /* ══════════════════════════════════════════════════════════════════════════ OCN-DIVIDER v32.0 — "ZERO BOX" ARCHITECTURE Philosophy: ONLY the image pixels (or floating text) are visible. No background, no border, no shadow on ANY wrapper or bar element. The page background shows through — dark space or light canvas. ══════════════════════════════════════════════════════════════════════════ */ /* ── LAYER A: GHOST WRAPPER (all themes) ────────────────────────────────── */ html .ocn-dvw, html[data-theme] .ocn-dvw, html[data-theme="dark"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, html body .s-block.ocn-dvw, html[data-theme="dark"] body .s-block.ocn-dvw, html[data-theme="light"] body .s-block.ocn-dvw { padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-block: 0 !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; /* margin-bottom owns the gap to the next section — controlled by --ocn-gap */ margin-bottom: var(--ocn-gap, 1rem) !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; outline: none !important; min-height: 0 !important; border-radius: 0 !important; } /* ── LAYER B: THE BAR — ZERO BOX ────────────────────────────────────────── */ /* Color tokens only — no visual properties here */ .ocn-dv { --_text: #ffffff; --_accent: #00b4ff; } /* Base bar: purely a layout container, fully invisible */ html .ocn-dv, html[data-theme] .ocn-dv, html[data-theme="dark"] .ocn-dv, html[data-theme="light"] .ocn-dv { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 1rem !important; position: relative !important; overflow: visible !important; /* Geometry — section gap (--ocn-gap) provides the space around; no internal margin needed */ width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; /* ZERO BOX — no visual paint at all */ background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; outline: none !important; transform: translateZ(0); transition: none; } /* No pseudo-element shimmer lines */ html .ocn-dv::before, html .ocn-dv::after, html[data-theme] .ocn-dv::before, html[data-theme] .ocn-dv::after { display: none !important; content: none !important; } /* ── IMAGE MODE ──────────────────────────────────────────────────────────── */ /* Killer: remove every shading layer — only image pixels remain */ .ocn-dv.is-image, html .ocn-dv.is-image, html[data-theme] .ocn-dv.is-image, html[data-theme="dark"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-image { padding: 0 !important; background: transparent !important; background-color: transparent !important; } /* The image: natural static flow, never absolute, never fills a dark box */ .ocn-dv.is-image picture, .ocn-dv.is-image picture source { display: contents; /* picture is layout-neutral */ } .ocn-dv .ocn-img, html .ocn-dv .ocn-img, html[data-theme] .ocn-dv .ocn-img, html[data-theme="dark"] .ocn-dv .ocn-img, html[data-theme="light"] .ocn-dv .ocn-img { /* CRITICAL: switch from absolute to natural static flow */ position: static !important; inset: auto !important; display: block !important; margin: 0 auto !important; max-height: 80px !important; width: auto !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; border-radius: 0 !important; flex-shrink: 0; } /* Kill the dark overlay completely */ .ocn-overlay, .ocn-dv .ocn-overlay, html .ocn-dv .ocn-overlay, html[data-theme] .ocn-dv .ocn-overlay, html[data-theme="dark"] .ocn-dv .ocn-overlay, html[data-theme="light"] .ocn-dv .ocn-overlay { display: none !important; background: transparent !important; } /* Image-mode content (title/button) — sits beside the image in flex row */ .ocn-dv.is-image .ocn-content { position: static; z-index: auto; padding-inline: 0.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-height: auto; width: auto; } /* ── TEXT MODE ───────────────────────────────────────────────────────────── */ .ocn-dv.is-text .ocn-content { position: static; z-index: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; padding: 0.5rem 1rem; } /* ── LIGHT MODE OVERRIDE (explicit nuclear) ─────────────────────────────── */ [data-theme="light"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, [data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-text { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--_accent, #56d4ff); margin: 0; text-shadow: 0 0 10px var(--_accent, #56d4ff); white-space: nowrap; } .ocn-dv .ocn-title { font-size: clamp(.9rem, 1.8vw, 1.15rem); font-weight: 900; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; color: var(--_text, #ffffff); margin: 0; white-space: nowrap; text-shadow: 0 0 18px rgba(86, 212, 255, .40); } /* In light mode, text should be dark enough to read on white bg */ html[data-theme="light"] .ocn-dv .ocn-title { color: var(--_text, #0a0b10); text-shadow: none; } html[data-theme="light"] .ocn-dv .ocn-eyebrow { color: var(--_accent, #0070f3); text-shadow: none; } .ocn-dv .ocn-desc { display: none; } /* ── CTA BUTTON ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-cta { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem 1.2rem; border-radius: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #ffffff; background: linear-gradient(135deg, var(--_accent, #56d4ff) 0%, #7c3aed 100%); box-shadow: 0 0 12px rgba(86, 212, 255, .28); transition: transform .18s ease, box-shadow .22s ease; white-space: nowrap; flex-shrink: 0; } .ocn-dv .ocn-cta:hover, .ocn-dv .ocn-cta:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 24px rgba(86, 212, 255, .65), 0 4px 16px rgba(0, 0, 0, .35); color: #ffffff; text-decoration: none; } /* ── MOBILE ──────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { html .ocn-dv, html[data-theme] .ocn-dv { width: 92% !important; margin: 0 auto !important; padding: 0 !important; } .ocn-dv .ocn-img { max-height: 64px !important; } .ocn-dv .ocn-title { font-size: clamp(.78rem, 3.5vw, .95rem); white-space: normal; } .ocn-dv .ocn-cta { padding: .3rem .85rem; font-size: .65rem; } .ocn-dv.is-text .ocn-content { gap: .6rem; } } /* ORIGINAL OCEAN INLINE STYLE BLOCK 6 */ /* ══════════════════════════════════════════════════════════════════════════ OCN-DIVIDER v32.0 — "ZERO BOX" ARCHITECTURE Philosophy: ONLY the image pixels (or floating text) are visible. No background, no border, no shadow on ANY wrapper or bar element. The page background shows through — dark space or light canvas. ══════════════════════════════════════════════════════════════════════════ */ /* ── LAYER A: GHOST WRAPPER (all themes) ────────────────────────────────── */ html .ocn-dvw, html[data-theme] .ocn-dvw, html[data-theme="dark"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, html body .s-block.ocn-dvw, html[data-theme="dark"] body .s-block.ocn-dvw, html[data-theme="light"] body .s-block.ocn-dvw { padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-block: 0 !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; /* margin-bottom owns the gap to the next section — controlled by --ocn-gap */ margin-bottom: var(--ocn-gap, 1rem) !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; outline: none !important; min-height: 0 !important; border-radius: 0 !important; } /* ── LAYER B: THE BAR — ZERO BOX ────────────────────────────────────────── */ /* Color tokens only — no visual properties here */ .ocn-dv { --_text: #ffffff; --_accent: #00b4ff; } /* Base bar: purely a layout container, fully invisible */ html .ocn-dv, html[data-theme] .ocn-dv, html[data-theme="dark"] .ocn-dv, html[data-theme="light"] .ocn-dv { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 1rem !important; position: relative !important; overflow: visible !important; /* Geometry — section gap (--ocn-gap) provides the space around; no internal margin needed */ width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; /* ZERO BOX — no visual paint at all */ background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; outline: none !important; transform: translateZ(0); transition: none; } /* No pseudo-element shimmer lines */ html .ocn-dv::before, html .ocn-dv::after, html[data-theme] .ocn-dv::before, html[data-theme] .ocn-dv::after { display: none !important; content: none !important; } /* ── IMAGE MODE ──────────────────────────────────────────────────────────── */ /* Killer: remove every shading layer — only image pixels remain */ .ocn-dv.is-image, html .ocn-dv.is-image, html[data-theme] .ocn-dv.is-image, html[data-theme="dark"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-image { padding: 0 !important; background: transparent !important; background-color: transparent !important; } /* The image: natural static flow, never absolute, never fills a dark box */ .ocn-dv.is-image picture, .ocn-dv.is-image picture source { display: contents; /* picture is layout-neutral */ } .ocn-dv .ocn-img, html .ocn-dv .ocn-img, html[data-theme] .ocn-dv .ocn-img, html[data-theme="dark"] .ocn-dv .ocn-img, html[data-theme="light"] .ocn-dv .ocn-img { /* CRITICAL: switch from absolute to natural static flow */ position: static !important; inset: auto !important; display: block !important; margin: 0 auto !important; max-height: 80px !important; width: auto !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; border-radius: 0 !important; flex-shrink: 0; } /* Kill the dark overlay completely */ .ocn-overlay, .ocn-dv .ocn-overlay, html .ocn-dv .ocn-overlay, html[data-theme] .ocn-dv .ocn-overlay, html[data-theme="dark"] .ocn-dv .ocn-overlay, html[data-theme="light"] .ocn-dv .ocn-overlay { display: none !important; background: transparent !important; } /* Image-mode content (title/button) — sits beside the image in flex row */ .ocn-dv.is-image .ocn-content { position: static; z-index: auto; padding-inline: 0.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-height: auto; width: auto; } /* ── TEXT MODE ───────────────────────────────────────────────────────────── */ .ocn-dv.is-text .ocn-content { position: static; z-index: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; padding: 0.5rem 1rem; } /* ── LIGHT MODE OVERRIDE (explicit nuclear) ─────────────────────────────── */ [data-theme="light"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, [data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-text { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--_accent, #56d4ff); margin: 0; text-shadow: 0 0 10px var(--_accent, #56d4ff); white-space: nowrap; } .ocn-dv .ocn-title { font-size: clamp(.9rem, 1.8vw, 1.15rem); font-weight: 900; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; color: var(--_text, #ffffff); margin: 0; white-space: nowrap; text-shadow: 0 0 18px rgba(86, 212, 255, .40); } /* In light mode, text should be dark enough to read on white bg */ html[data-theme="light"] .ocn-dv .ocn-title { color: var(--_text, #0a0b10); text-shadow: none; } html[data-theme="light"] .ocn-dv .ocn-eyebrow { color: var(--_accent, #0070f3); text-shadow: none; } .ocn-dv .ocn-desc { display: none; } /* ── CTA BUTTON ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-cta { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem 1.2rem; border-radius: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #ffffff; background: linear-gradient(135deg, var(--_accent, #56d4ff) 0%, #7c3aed 100%); box-shadow: 0 0 12px rgba(86, 212, 255, .28); transition: transform .18s ease, box-shadow .22s ease; white-space: nowrap; flex-shrink: 0; } .ocn-dv .ocn-cta:hover, .ocn-dv .ocn-cta:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 24px rgba(86, 212, 255, .65), 0 4px 16px rgba(0, 0, 0, .35); color: #ffffff; text-decoration: none; } /* ── MOBILE ──────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { html .ocn-dv, html[data-theme] .ocn-dv { width: 92% !important; margin: 0 auto !important; padding: 0 !important; } .ocn-dv .ocn-img { max-height: 64px !important; } .ocn-dv .ocn-title { font-size: clamp(.78rem, 3.5vw, .95rem); white-space: normal; } .ocn-dv .ocn-cta { padding: .3rem .85rem; font-size: .65rem; } .ocn-dv.is-text .ocn-content { gap: .6rem; } } /* ORIGINAL OCEAN INLINE STYLE BLOCK 7 */ /* ══════════════════════════════════════════════════════════════════════════ OCN-DIVIDER v32.0 — "ZERO BOX" ARCHITECTURE Philosophy: ONLY the image pixels (or floating text) are visible. No background, no border, no shadow on ANY wrapper or bar element. The page background shows through — dark space or light canvas. ══════════════════════════════════════════════════════════════════════════ */ /* ── LAYER A: GHOST WRAPPER (all themes) ────────────────────────────────── */ html .ocn-dvw, html[data-theme] .ocn-dvw, html[data-theme="dark"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, html body .s-block.ocn-dvw, html[data-theme="dark"] body .s-block.ocn-dvw, html[data-theme="light"] body .s-block.ocn-dvw { padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-block: 0 !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; /* margin-bottom owns the gap to the next section — controlled by --ocn-gap */ margin-bottom: var(--ocn-gap, 1rem) !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; outline: none !important; min-height: 0 !important; border-radius: 0 !important; } /* ── LAYER B: THE BAR — ZERO BOX ────────────────────────────────────────── */ /* Color tokens only — no visual properties here */ .ocn-dv { --_text: #ffffff; --_accent: #00b4ff; } /* Base bar: purely a layout container, fully invisible */ html .ocn-dv, html[data-theme] .ocn-dv, html[data-theme="dark"] .ocn-dv, html[data-theme="light"] .ocn-dv { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 1rem !important; position: relative !important; overflow: visible !important; /* Geometry — section gap (--ocn-gap) provides the space around; no internal margin needed */ width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; /* ZERO BOX — no visual paint at all */ background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; outline: none !important; transform: translateZ(0); transition: none; } /* No pseudo-element shimmer lines */ html .ocn-dv::before, html .ocn-dv::after, html[data-theme] .ocn-dv::before, html[data-theme] .ocn-dv::after { display: none !important; content: none !important; } /* ── IMAGE MODE ──────────────────────────────────────────────────────────── */ /* Killer: remove every shading layer — only image pixels remain */ .ocn-dv.is-image, html .ocn-dv.is-image, html[data-theme] .ocn-dv.is-image, html[data-theme="dark"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-image { padding: 0 !important; background: transparent !important; background-color: transparent !important; } /* The image: natural static flow, never absolute, never fills a dark box */ .ocn-dv.is-image picture, .ocn-dv.is-image picture source { display: contents; /* picture is layout-neutral */ } .ocn-dv .ocn-img, html .ocn-dv .ocn-img, html[data-theme] .ocn-dv .ocn-img, html[data-theme="dark"] .ocn-dv .ocn-img, html[data-theme="light"] .ocn-dv .ocn-img { /* CRITICAL: switch from absolute to natural static flow */ position: static !important; inset: auto !important; display: block !important; margin: 0 auto !important; max-height: 80px !important; width: auto !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; border-radius: 0 !important; flex-shrink: 0; } /* Kill the dark overlay completely */ .ocn-overlay, .ocn-dv .ocn-overlay, html .ocn-dv .ocn-overlay, html[data-theme] .ocn-dv .ocn-overlay, html[data-theme="dark"] .ocn-dv .ocn-overlay, html[data-theme="light"] .ocn-dv .ocn-overlay { display: none !important; background: transparent !important; } /* Image-mode content (title/button) — sits beside the image in flex row */ .ocn-dv.is-image .ocn-content { position: static; z-index: auto; padding-inline: 0.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-height: auto; width: auto; } /* ── TEXT MODE ───────────────────────────────────────────────────────────── */ .ocn-dv.is-text .ocn-content { position: static; z-index: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; padding: 0.5rem 1rem; } /* ── LIGHT MODE OVERRIDE (explicit nuclear) ─────────────────────────────── */ [data-theme="light"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, [data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-text { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--_accent, #56d4ff); margin: 0; text-shadow: 0 0 10px var(--_accent, #56d4ff); white-space: nowrap; } .ocn-dv .ocn-title { font-size: clamp(.9rem, 1.8vw, 1.15rem); font-weight: 900; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; color: var(--_text, #ffffff); margin: 0; white-space: nowrap; text-shadow: 0 0 18px rgba(86, 212, 255, .40); } /* In light mode, text should be dark enough to read on white bg */ html[data-theme="light"] .ocn-dv .ocn-title { color: var(--_text, #0a0b10); text-shadow: none; } html[data-theme="light"] .ocn-dv .ocn-eyebrow { color: var(--_accent, #0070f3); text-shadow: none; } .ocn-dv .ocn-desc { display: none; } /* ── CTA BUTTON ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-cta { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem 1.2rem; border-radius: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #ffffff; background: linear-gradient(135deg, var(--_accent, #56d4ff) 0%, #7c3aed 100%); box-shadow: 0 0 12px rgba(86, 212, 255, .28); transition: transform .18s ease, box-shadow .22s ease; white-space: nowrap; flex-shrink: 0; } .ocn-dv .ocn-cta:hover, .ocn-dv .ocn-cta:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 24px rgba(86, 212, 255, .65), 0 4px 16px rgba(0, 0, 0, .35); color: #ffffff; text-decoration: none; } /* ── MOBILE ──────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { html .ocn-dv, html[data-theme] .ocn-dv { width: 92% !important; margin: 0 auto !important; padding: 0 !important; } .ocn-dv .ocn-img { max-height: 64px !important; } .ocn-dv .ocn-title { font-size: clamp(.78rem, 3.5vw, .95rem); white-space: normal; } .ocn-dv .ocn-cta { padding: .3rem .85rem; font-size: .65rem; } .ocn-dv.is-text .ocn-content { gap: .6rem; } } /* ORIGINAL OCEAN INLINE STYLE BLOCK 8 */ /* ══════════════════════════════════════════════════════════════════════════ OCN-DIVIDER v32.0 — "ZERO BOX" ARCHITECTURE Philosophy: ONLY the image pixels (or floating text) are visible. No background, no border, no shadow on ANY wrapper or bar element. The page background shows through — dark space or light canvas. ══════════════════════════════════════════════════════════════════════════ */ /* ── LAYER A: GHOST WRAPPER (all themes) ────────────────────────────────── */ html .ocn-dvw, html[data-theme] .ocn-dvw, html[data-theme="dark"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, html body .s-block.ocn-dvw, html[data-theme="dark"] body .s-block.ocn-dvw, html[data-theme="light"] body .s-block.ocn-dvw { padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-block: 0 !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; /* margin-bottom owns the gap to the next section — controlled by --ocn-gap */ margin-bottom: var(--ocn-gap, 1rem) !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; outline: none !important; min-height: 0 !important; border-radius: 0 !important; } /* ── LAYER B: THE BAR — ZERO BOX ────────────────────────────────────────── */ /* Color tokens only — no visual properties here */ .ocn-dv { --_text: #ffffff; --_accent: #00b4ff; } /* Base bar: purely a layout container, fully invisible */ html .ocn-dv, html[data-theme] .ocn-dv, html[data-theme="dark"] .ocn-dv, html[data-theme="light"] .ocn-dv { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 1rem !important; position: relative !important; overflow: visible !important; /* Geometry — section gap (--ocn-gap) provides the space around; no internal margin needed */ width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; /* ZERO BOX — no visual paint at all */ background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; outline: none !important; transform: translateZ(0); transition: none; } /* No pseudo-element shimmer lines */ html .ocn-dv::before, html .ocn-dv::after, html[data-theme] .ocn-dv::before, html[data-theme] .ocn-dv::after { display: none !important; content: none !important; } /* ── IMAGE MODE ──────────────────────────────────────────────────────────── */ /* Killer: remove every shading layer — only image pixels remain */ .ocn-dv.is-image, html .ocn-dv.is-image, html[data-theme] .ocn-dv.is-image, html[data-theme="dark"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-image { padding: 0 !important; background: transparent !important; background-color: transparent !important; } /* The image: natural static flow, never absolute, never fills a dark box */ .ocn-dv.is-image picture, .ocn-dv.is-image picture source { display: contents; /* picture is layout-neutral */ } .ocn-dv .ocn-img, html .ocn-dv .ocn-img, html[data-theme] .ocn-dv .ocn-img, html[data-theme="dark"] .ocn-dv .ocn-img, html[data-theme="light"] .ocn-dv .ocn-img { /* CRITICAL: switch from absolute to natural static flow */ position: static !important; inset: auto !important; display: block !important; margin: 0 auto !important; max-height: 80px !important; width: auto !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; border-radius: 0 !important; flex-shrink: 0; } /* Kill the dark overlay completely */ .ocn-overlay, .ocn-dv .ocn-overlay, html .ocn-dv .ocn-overlay, html[data-theme] .ocn-dv .ocn-overlay, html[data-theme="dark"] .ocn-dv .ocn-overlay, html[data-theme="light"] .ocn-dv .ocn-overlay { display: none !important; background: transparent !important; } /* Image-mode content (title/button) — sits beside the image in flex row */ .ocn-dv.is-image .ocn-content { position: static; z-index: auto; padding-inline: 0.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-height: auto; width: auto; } /* ── TEXT MODE ───────────────────────────────────────────────────────────── */ .ocn-dv.is-text .ocn-content { position: static; z-index: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; padding: 0.5rem 1rem; } /* ── LIGHT MODE OVERRIDE (explicit nuclear) ─────────────────────────────── */ [data-theme="light"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, [data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-text { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--_accent, #56d4ff); margin: 0; text-shadow: 0 0 10px var(--_accent, #56d4ff); white-space: nowrap; } .ocn-dv .ocn-title { font-size: clamp(.9rem, 1.8vw, 1.15rem); font-weight: 900; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; color: var(--_text, #ffffff); margin: 0; white-space: nowrap; text-shadow: 0 0 18px rgba(86, 212, 255, .40); } /* In light mode, text should be dark enough to read on white bg */ html[data-theme="light"] .ocn-dv .ocn-title { color: var(--_text, #0a0b10); text-shadow: none; } html[data-theme="light"] .ocn-dv .ocn-eyebrow { color: var(--_accent, #0070f3); text-shadow: none; } .ocn-dv .ocn-desc { display: none; } /* ── CTA BUTTON ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-cta { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem 1.2rem; border-radius: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #ffffff; background: linear-gradient(135deg, var(--_accent, #56d4ff) 0%, #7c3aed 100%); box-shadow: 0 0 12px rgba(86, 212, 255, .28); transition: transform .18s ease, box-shadow .22s ease; white-space: nowrap; flex-shrink: 0; } .ocn-dv .ocn-cta:hover, .ocn-dv .ocn-cta:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 24px rgba(86, 212, 255, .65), 0 4px 16px rgba(0, 0, 0, .35); color: #ffffff; text-decoration: none; } /* ── MOBILE ──────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { html .ocn-dv, html[data-theme] .ocn-dv { width: 92% !important; margin: 0 auto !important; padding: 0 !important; } .ocn-dv .ocn-img { max-height: 64px !important; } .ocn-dv .ocn-title { font-size: clamp(.78rem, 3.5vw, .95rem); white-space: normal; } .ocn-dv .ocn-cta { padding: .3rem .85rem; font-size: .65rem; } .ocn-dv.is-text .ocn-content { gap: .6rem; } } /* ORIGINAL OCEAN INLINE STYLE BLOCK 9 */ /* ══════════════════════════════════════════════════════════════════════════ OCN-DIVIDER v32.0 — "ZERO BOX" ARCHITECTURE Philosophy: ONLY the image pixels (or floating text) are visible. No background, no border, no shadow on ANY wrapper or bar element. The page background shows through — dark space or light canvas. ══════════════════════════════════════════════════════════════════════════ */ /* ── LAYER A: GHOST WRAPPER (all themes) ────────────────────────────────── */ html .ocn-dvw, html[data-theme] .ocn-dvw, html[data-theme="dark"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, html body .s-block.ocn-dvw, html[data-theme="dark"] body .s-block.ocn-dvw, html[data-theme="light"] body .s-block.ocn-dvw { padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-block: 0 !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; /* margin-bottom owns the gap to the next section — controlled by --ocn-gap */ margin-bottom: var(--ocn-gap, 1rem) !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; outline: none !important; min-height: 0 !important; border-radius: 0 !important; } /* ── LAYER B: THE BAR — ZERO BOX ────────────────────────────────────────── */ /* Color tokens only — no visual properties here */ .ocn-dv { --_text: #ffffff; --_accent: #00b4ff; } /* Base bar: purely a layout container, fully invisible */ html .ocn-dv, html[data-theme] .ocn-dv, html[data-theme="dark"] .ocn-dv, html[data-theme="light"] .ocn-dv { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 1rem !important; position: relative !important; overflow: visible !important; /* Geometry — section gap (--ocn-gap) provides the space around; no internal margin needed */ width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border-radius: 0 !important; /* ZERO BOX — no visual paint at all */ background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; outline: none !important; transform: translateZ(0); transition: none; } /* No pseudo-element shimmer lines */ html .ocn-dv::before, html .ocn-dv::after, html[data-theme] .ocn-dv::before, html[data-theme] .ocn-dv::after { display: none !important; content: none !important; } /* ── IMAGE MODE ──────────────────────────────────────────────────────────── */ /* Killer: remove every shading layer — only image pixels remain */ .ocn-dv.is-image, html .ocn-dv.is-image, html[data-theme] .ocn-dv.is-image, html[data-theme="dark"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-image { padding: 0 !important; background: transparent !important; background-color: transparent !important; } /* The image: natural static flow, never absolute, never fills a dark box */ .ocn-dv.is-image picture, .ocn-dv.is-image picture source { display: contents; /* picture is layout-neutral */ } .ocn-dv .ocn-img, html .ocn-dv .ocn-img, html[data-theme] .ocn-dv .ocn-img, html[data-theme="dark"] .ocn-dv .ocn-img, html[data-theme="light"] .ocn-dv .ocn-img { /* CRITICAL: switch from absolute to natural static flow */ position: static !important; inset: auto !important; display: block !important; margin: 0 auto !important; max-height: 80px !important; width: auto !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center !important; border-radius: 0 !important; flex-shrink: 0; } /* Kill the dark overlay completely */ .ocn-overlay, .ocn-dv .ocn-overlay, html .ocn-dv .ocn-overlay, html[data-theme] .ocn-dv .ocn-overlay, html[data-theme="dark"] .ocn-dv .ocn-overlay, html[data-theme="light"] .ocn-dv .ocn-overlay { display: none !important; background: transparent !important; } /* Image-mode content (title/button) — sits beside the image in flex row */ .ocn-dv.is-image .ocn-content { position: static; z-index: auto; padding-inline: 0.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-height: auto; width: auto; } /* ── TEXT MODE ───────────────────────────────────────────────────────────── */ .ocn-dv.is-text .ocn-content { position: static; z-index: auto; width: 100%; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; padding: 0.5rem 1rem; } /* ── LIGHT MODE OVERRIDE (explicit nuclear) ─────────────────────────────── */ [data-theme="light"] .ocn-dvw, html[data-theme="light"] .ocn-dvw, [data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv, html[data-theme="light"] .ocn-dv.is-image, html[data-theme="light"] .ocn-dv.is-text { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--_accent, #56d4ff); margin: 0; text-shadow: 0 0 10px var(--_accent, #56d4ff); white-space: nowrap; } .ocn-dv .ocn-title { font-size: clamp(.9rem, 1.8vw, 1.15rem); font-weight: 900; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; color: var(--_text, #ffffff); margin: 0; white-space: nowrap; text-shadow: 0 0 18px rgba(86, 212, 255, .40); } /* In light mode, text should be dark enough to read on white bg */ html[data-theme="light"] .ocn-dv .ocn-title { color: var(--_text, #0a0b10); text-shadow: none; } html[data-theme="light"] .ocn-dv .ocn-eyebrow { color: var(--_accent, #0070f3); text-shadow: none; } .ocn-dv .ocn-desc { display: none; } /* ── CTA BUTTON ──────────────────────────────────────────────────────────── */ .ocn-dv .ocn-cta { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem 1.2rem; border-radius: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #ffffff; background: linear-gradient(135deg, var(--_accent, #56d4ff) 0%, #7c3aed 100%); box-shadow: 0 0 12px rgba(86, 212, 255, .28); transition: transform .18s ease, box-shadow .22s ease; white-space: nowrap; flex-shrink: 0; } .ocn-dv .ocn-cta:hover, .ocn-dv .ocn-cta:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 24px rgba(86, 212, 255, .65), 0 4px 16px rgba(0, 0, 0, .35); color: #ffffff; text-decoration: none; } /* ── MOBILE ──────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { html .ocn-dv, html[data-theme] .ocn-dv { width: 92% !important; margin: 0 auto !important; padding: 0 !important; } .ocn-dv .ocn-img { max-height: 64px !important; } .ocn-dv .ocn-title { font-size: clamp(.78rem, 3.5vw, .95rem); white-space: normal; } .ocn-dv .ocn-cta { padding: .3rem .85rem; font-size: .65rem; } .ocn-dv.is-text .ocn-content { gap: .6rem; } } /* ORIGINAL OCEAN INLINE STYLE BLOCK 10 */ /* ══════════════════════════════════════════════════════════════ OCN-APP-BANNER v17.0 — No-crop, pure aspect-ratio geometry ══════════════════════════════════════════════════════════════ */ /* ── Outer wrapper: full width on desktop, floating card on mobile ─ */ .ocn-app-v17-wrap { width: 100%; max-width: 1440px; margin: 0 auto; } /* ── MOBILE: 92% width creates the "floating card" safe zone ────── The 4% side margin keeps the banner from touching screen edges. aspect-ratio + contain still guarantee zero artwork cropping. */ @media (max-width: 767px) { .ocn-app-v17-wrap { width: 92% !important; margin: 1.5rem auto !important; } } /* ── Banner container: aspect-ratio drives ALL dimensions ────── */ .ocn-app-v17 { position: relative; overflow: hidden; border-radius: clamp(8px, 1vw, 16px); background-color: #0a0b10; /* * ★ MATHEMATICAL LOCK ★ * width = 100% of wrapper (up to 1440px) * height = width × (893 ÷ 2008) ← computed by browser, always exact * * At 375px viewport : height ≈ 167px * At 768px viewport : height ≈ 342px * At 1440px viewport: height ≈ 640px * * The image is NEVER cropped because object-fit:contain fits the * whole 2008×893 canvas inside whatever height this produces. */ aspect-ratio: 2008 / 893; } /* ── Background image: contain = zero cropping, ever ─────────── */ .ocn-app-v17__bg { position: absolute; inset: 0; width: 100%; /* fill the aspect-ratio box horizontally */ height: 100%; /* fill vertically (set by aspect-ratio) */ display: block; object-fit: contain; /* ★ full 2008×893 canvas always visible */ object-position: center; z-index: 0; } /* Fallback gradient when no image uploaded */ .ocn-app-v17__bg-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, #0d1117 0%, #1a2236 60%, #0d1117 100%); z-index: 0; } /* ── Overlay: directional gradient for text readability ──────── */ .ocn-app-v17__overlay { position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(10, 11, 16, .82) 0%, rgba(10, 11, 16, .52) 40%, rgba(10, 11, 16, .12) 70%, transparent 100%); z-index: 1; pointer-events: none; } /* ── Content: absolute, above overlay, scales with container ─── */ .ocn-app-v17__inner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; /* Percentage padding scales with the banner height */ padding: 5% 6%; box-sizing: border-box; pointer-events: none; } .ocn-app-v17__inner>* { pointer-events: auto; } /* ── Text column ─────────────────────────────────────────────── */ .ocn-app-v17__text { flex: 0 1 60%; min-width: 0; display: flex; flex-direction: column; gap: clamp(.3rem, 1vw, .8rem); } .ocn-app-v17__eyebrow { display: inline-flex; align-items: center; gap: .35rem; font-size: clamp(.55rem, .85vw, .72rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #56d4ff; background: rgba(86, 212, 255, .10); border: 1px solid rgba(86, 212, 255, .22); border-radius: 50px; padding: .22rem .8rem; width: fit-content; } .ocn-app-v17__title { font-size: clamp(.8rem, 2.8vw, 2.6rem); font-weight: 900; line-height: 1.08; letter-spacing: -.04em; color: #fff; margin: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, .55); } .ocn-app-v17__desc { font-size: clamp(.6rem, 1.1vw, .95rem); line-height: 1.6; color: rgba(255, 255, 255, .65); margin: 0; } /* ── Download buttons ────────────────────────────────────────── */ .ocn-app-v17__btns { display: flex; gap: clamp(.25rem, .8vw, .6rem); flex-wrap: wrap; margin-top: clamp(.15rem, .5vw, .4rem); } .ocn-app-v17__btn { display: inline-flex; align-items: center; gap: .4rem; padding: clamp(.3rem, .9vw, .55rem) clamp(.5rem, 1.3vw, 1.1rem); border-radius: 10px; font-size: clamp(.55rem, .9vw, .8rem); font-weight: 600; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; white-space: nowrap; position: relative; z-index: 3; } .ocn-app-v17__btn:hover { background: rgba(86, 212, 255, .18); border-color: rgba(86, 212, 255, .50); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(86, 212, 255, .30); } .ocn-app-v17__btn svg { width: clamp(12px, 1.3vw, 18px); height: clamp(12px, 1.3vw, 18px); flex-shrink: 0; } .ocn-app-v17__btn small { display: block; font-size: .55em; font-weight: 400; opacity: .55; line-height: 1; } .ocn-app-v17__btn strong { display: block; font-size: .88em; line-height: 1.3; } /* ── Mobile content tweaks (independent of wrapper sizing) ─────── */ @media (max-width: 480px) { .ocn-app-v17__desc { display: none; } .ocn-app-v17__btns { flex-direction: row; flex-wrap: wrap; } } /* ORIGINAL OCEAN INLINE STYLE BLOCK 11 */ /* ═══════════════════════════════════════════════════════════════ OCN-TAROT-V6900 — Gaming Tarot Cards — ALL CSS INLINE Cache buster: class ocn-tarot-v6900 (new, browser must reload) ═══════════════════════════════════════════════════════════════ */ /* ── Section wrapper ─────────────────────────────────────────── */ .ocn-tarot-v6900 { width: 100%; padding-top: 0; padding-bottom: 0; } /* ── Section header ──────────────────────────────────────────── */ .ocn-tarot-v6900 .ocn-tr-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); } .ocn-tarot-v6900 .ocn-tr-heading { font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.02em; color: #ffffff; margin: 0; line-height: 1.1; } .ocn-tarot-v6900 .ocn-tr-sub { font-size: .85rem; color: rgba(255, 255, 255, .55); margin: .35rem 0 0; } .ocn-tarot-v6900 .ocn-tr-see-all { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: #56d4ff; text-decoration: none; white-space: nowrap; transition: color .15s; } .ocn-tarot-v6900 .ocn-tr-see-all:hover { color: #ffffff; } /* ── Grid: 2 cols on mobile, 4 cols on ≥768px ───────────────── */ .ocn-tarot-v6900 .ocn-tr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, 2vw, 1.25rem); } @media (min-width: 768px) { .ocn-tarot-v6900 .ocn-tr-grid { grid-template-columns: repeat(4, 1fr); } } /* ── Card scene: perspective container ───────────────────────── */ .ocn-tarot-v6900 .ocn-tr-scene { perspective: 900px; aspect-ratio: 2 / 3; width: 100%; border-radius: 12px; cursor: pointer; /* Stagger entrance via CSS animation — always visible even if JS fails */ opacity: 0; animation: ocn-card-enter .5s ease forwards; /* JS sets --stagger-delay; fallback = 0s */ animation-delay: var(--stagger-delay, 0s); } @keyframes ocn-card-enter { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* is-visible added by JS when already in viewport at page load */ .ocn-tarot-v6900 .ocn-tr-scene.is-visible { opacity: 1; animation: none; transform: translateY(0) scale(1); } /* ── Glow on hover (desktop only — prevents sticky glow on touch) ── */ @media (hover: hover) { .ocn-tarot-v6900 .ocn-tr-scene:hover { filter: drop-shadow(0 0 14px rgba(86, 212, 255, .70)) drop-shadow(0 0 36px rgba(86, 212, 255, .35)); } } /* ───────────────────────────────────────────────────────────────── ★ 3D FLIP ANIMATION ★ 1. .ocn-tr-inner holds both faces; preserve-3d keeps 3D stacking 2. hover / .is-flipped rotates inner 180° on Y axis 3. each face hides itself when facing away (backface-visibility) ───────────────────────────────────────────────────────────────── */ .ocn-tarot-v6900 .ocn-tr-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; /* ← KEY */ transition: transform .6s cubic-bezier(.4, .2, .2, 1); /* ← smooth flip */ border-radius: 12px; } /* Flip on hover — desktop only (touch uses JS .is-flipped class) */ @media (hover: hover) { .ocn-tarot-v6900 .ocn-tr-scene:hover .ocn-tr-inner { transform: rotateY(180deg); /* ← flip! */ } } /* JS-toggled class for touch devices */ .ocn-tarot-v6900 .ocn-tr-scene.is-flipped .ocn-tr-inner { transform: rotateY(180deg); } /* ── Shared face styles ──────────────────────────────────────── */ .ocn-tarot-v6900 .ocn-tr-front, .ocn-tarot-v6900 .ocn-tr-back { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; backface-visibility: hidden; /* ← hides face when rotated away */ -webkit-backface-visibility: hidden; } /* ── FRONT face: game cover ──────────────────────────────────── */ .ocn-tarot-v6900 .ocn-tr-front { background: #0f1829; } .ocn-tarot-v6900 .ocn-tr-front img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .6s ease; } .ocn-tarot-v6900 .ocn-tr-scene:hover .ocn-tr-front img { transform: scale(1.04); } /* ── BACK face: glossy gaming panel ─────────────────────────── */ .ocn-tarot-v6900 .ocn-tr-back { transform: rotateY(180deg); /* ← starts face-down */ background: linear-gradient(160deg, rgba(10, 20, 45, .97) 0%, rgba(4, 10, 28, .99) 100%); border: 1px solid rgba(86, 212, 255, .18); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem 1rem; gap: 1rem; text-align: center; } /* Glossy top sheen */ .ocn-tarot-v6900 .ocn-tr-back::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 42%; background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, transparent 100%); border-radius: 12px 12px 0 0; pointer-events: none; } /* Subtle grid overlay */ .ocn-tarot-v6900 .ocn-tr-back::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(86, 212, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(86, 212, 255, .04) 1px, transparent 1px); background-size: 20px 20px; border-radius: 12px; pointer-events: none; } .ocn-tarot-v6900 .ocn-tr-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(86, 212, 255, .12); border: 1px solid rgba(86, 212, 255, .30); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; flex-shrink: 0; } .ocn-tarot-v6900 .ocn-tr-icon svg { width: 20px; height: 20px; fill: #56d4ff; } .ocn-tarot-v6900 .ocn-tr-back-title { font-size: clamp(.9rem, 2vw, 1.1rem); font-weight: 800; letter-spacing: -.01em; color: #ffffff; line-height: 1.2; position: relative; z-index: 1; margin: 0; text-shadow: 0 0 18px rgba(86, 212, 255, .45); } .ocn-tarot-v6900 .ocn-tr-cta { display: inline-flex; align-items: center; justify-content: center; padding: .55rem 1.5rem; border-radius: 8px; font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-decoration: none; color: #ffffff !important; background: linear-gradient(135deg, #56d4ff 0%, #7c3aed 100%); box-shadow: 0 0 16px rgba(86, 212, 255, .45), 0 3px 10px rgba(0, 0, 0, .35); position: relative; z-index: 1; transition: transform .18s ease, box-shadow .2s ease; white-space: nowrap; } .ocn-tarot-v6900 .ocn-tr-cta:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 28px rgba(86, 212, 255, .75), 0 0 52px rgba(124, 58, 237, .35), 0 5px 16px rgba(0, 0, 0, .4); text-decoration: none; } /* ── Placeholder when no image uploaded ──────────────────────── */ .ocn-tarot-v6900 .ocn-tr-placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, #0f1829, #1a2744); display: flex; align-items: center; justify-content: center; } /* ── Mobile overrides (max 767px) ────────────────────────────── */ @media (max-width: 767px) { .ocn-tarot-v6900 .ocn-tr-back { padding: 1rem .75rem; gap: .6rem; } .ocn-tarot-v6900 .ocn-tr-icon { width: 34px; height: 34px; } .ocn-tarot-v6900 .ocn-tr-icon svg { width: 16px; height: 16px; } .ocn-tarot-v6900 .ocn-tr-back-title { font-size: .78rem; } .ocn-tarot-v6900 .ocn-tr-cta { padding: .42rem 1.1rem; font-size: .72rem; } } /* ORIGINAL OCEAN INLINE STYLE BLOCK 12 */ /* ══════════════════════════════════════════════════════════════ OCN-FEATURES — Native Store Features (v161.0.0) Premium Blue Glow · Glassmorphism · Counter Animation ══════════════════════════════════════════════════════════════ */ .ocn-feat { padding-top: 0; padding-bottom: 0; content-visibility: auto; contain-intrinsic-size: 0 420px; } /* ── Grid ────────────────────────────────────────────────────── */ .ocn-feat__grid { display: grid; gap: clamp(.75rem, 1.5vw, 1.1rem); grid-template-columns: 1fr; } @media (min-width: 480px) { .ocn-feat__grid { grid-template-columns: repeat(2, 1fr); } .ocn-feat__grid .ocn-feat__card:first-child { grid-column: span 2; } } @media (min-width: 900px) { .ocn-feat__grid { grid-template-columns: repeat(3, 1fr); } .ocn-feat__grid .ocn-feat__card:first-child { grid-column: span 2; } } @media (max-width: 479px) { .ocn-feat__grid .ocn-feat__card:first-child { grid-column: span 1; } } /* ── Card — Glassmorphism ────────────────────────────────────── */ .ocn-feat__card { position: relative; overflow: hidden; border-radius: 18px; padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; gap: .8rem; background: rgba(255, 255, 255, .04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 4px 20px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .05); transition: transform .3s cubic-bezier(.175, .885, .32, 1.275), box-shadow .3s, border-color .3s; } .ocn-feat__card:hover { transform: translateY(-6px); border-color: rgba(86, 212, 255, .25); box-shadow: 0 18px 40px rgba(0, 0, 0, .30), 0 0 0 1px rgba(86, 212, 255, .15); } /* Top shimmer line */ .ocn-feat__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(86, 212, 255, .50) 50%, transparent 100%); opacity: 0; transition: opacity .3s; } .ocn-feat__card:hover::before { opacity: 1; } /* Subtle radial glow behind icon */ .ocn-feat__card::after { content: ""; position: absolute; top: -20%; left: -20%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(86, 212, 255, .06) 0%, transparent 70%); pointer-events: none; } /* ── Icon — Premium Blue Glow ────────────────────────────────── */ .ocn-feat__icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.45rem; color: #56d4ff; background: rgba(86, 212, 255, .10); border: 1px solid rgba(86, 212, 255, .22); box-shadow: 0 0 16px rgba(86, 212, 255, .14), inset 0 1px 0 rgba(86, 212, 255, .10); transition: background .3s, box-shadow .3s, border-color .3s; } .ocn-feat__card:hover .ocn-feat__icon { background: rgba(86, 212, 255, .18); border-color: rgba(86, 212, 255, .40); box-shadow: 0 0 28px rgba(86, 212, 255, .28), inset 0 1px 0 rgba(86, 212, 255, .16); } /* salla-icon support */ .ocn-feat__icon salla-icon { --icon-size: 26px; color: #56d4ff; } .ocn-feat__icon salla-icon svg { width: 26px; height: 26px; fill: currentColor; } /* ── Title ───────────────────────────────────────────────────── */ .ocn-feat__title { font-size: clamp(.95rem, 1.8vw, 1.1rem); font-weight: 800; color: #fff; margin: 0; letter-spacing: -.015em; } /* ── Description text ────────────────────────────────────────── */ .ocn-feat__desc { font-size: clamp(.82rem, 1.3vw, .9rem); color: rgba(255, 255, 255, .55); margin: 0; line-height: 1.55; } /* ── Counter (.ocn-counter) ──────────────────────────────────── */ .ocn-counter { display: block; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -.05em; color: #56d4ff; line-height: 1; margin-bottom: .15rem; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px rgba(86, 212, 255, .35); } /* ORIGINAL OCEAN INLINE STYLE BLOCK 13 */ /* ── 1. Obliterate ALL scroll-to-top buttons (Salla + Ocean theme) ──── */ salla-scroll-top, [data-salla-component="scroll-top"], .s-scroll-top, .btn--scroll-top, .scroll-top-button, salla-button.btn--scroll-top, #go-top, .go-top, #back-to-top, .back-to-top, .ocean-scroll-top, .scroll-top-btn:not(.smart-menu-item), .go-up { display: none !important; visibility: hidden !important; opacity: 0 !important; position: fixed !important; left: -9999px !important; bottom: -9999px !important; z-index: -9999 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; } /* ── 2. Global modal stacking-context rescue ──────────────────────────── */ /* Kill theme pseudo-element dimmers when any Salla modal is open */ body.s-modal-open::before, body.s-modal-open::after, body.modal-open::before, body.modal-open::after, body.has-overlay::before, body.has-overlay::after { display: none !important; opacity: 0 !important; pointer-events: none !important; } /* Break modals out of any parent stacking context */ salla-modal, salla-login-modal, salla-currency-modal, salla-cart, salla-search, .s-modal, .s-modal-wrapper { position: fixed !important; z-index: 2147483647 !important; } salla-modal::part(backdrop), salla-login-modal::part(backdrop), salla-currency-modal::part(backdrop) { background-color: rgba(0, 0, 0, 0.5) !important; z-index: 2147483646 !important; } .s-modal-bg, .s-modal-backdrop { z-index: 2147483646 !important; } /* ── 3. Smart Widget — right-side, above mobile bottom nav ───────────── */ #oceanSmartWidget { display: flex !important; position: fixed !important; right: 20px !important; left: auto !important; bottom: 90px !important; /* clears Salla's mobile bottom nav */ z-index: 99990 !important; flex-direction: column !important; align-items: flex-end !important; } @media (min-width: 768px) { #oceanSmartWidget { bottom: 30px !important; } } #smartWidgetTrigger { display: flex !important; }